Skip to content

Commit 353718f

Browse files
jwangkunjwangkun
committed
1、新增点击提示词展示提示词详情页面
1 parent 2d2a567 commit 353718f

3 files changed

Lines changed: 396 additions & 6 deletions

File tree

‎index.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,67 @@ <h2 id="modalTitle">创建智能体</h2>
277277
</div>
278278
</div>
279279

280+
<!-- 提示词详情模态框 -->
281+
<div id="detailModal" class="modal-overlay">
282+
<div class="modal-container detail-modal">
283+
<div class="modal-header">
284+
<h2 id="detailTitle">提示词详情</h2>
285+
<button id="closeDetailModal" class="btn btn-icon">
286+
<i class="fas fa-times"></i>
287+
</button>
288+
</div>
289+
290+
<div class="modal-body detail-body">
291+
<div class="detail-meta">
292+
<div class="detail-info">
293+
<div class="info-item">
294+
<label>名称:</label>
295+
<span id="detailName"></span>
296+
</div>
297+
<div class="info-item" id="detailSourceItem">
298+
<label>来源:</label>
299+
<span id="detailSource"></span>
300+
</div>
301+
<div class="info-item">
302+
<label>更新时间:</label>
303+
<span id="detailUpdatedAt"></span>
304+
</div>
305+
</div>
306+
307+
<div class="detail-actions">
308+
<button id="detailCopyBtn" class="btn btn-primary">
309+
<i class="fas fa-copy"></i>
310+
复制内容
311+
</button>
312+
<button id="detailEditBtn" class="btn btn-secondary">
313+
<i class="fas fa-edit"></i>
314+
编辑
315+
</button>
316+
<button id="detailPinBtn" class="btn btn-outline">
317+
<i class="fas fa-thumbtack"></i>
318+
<span id="detailPinText">置顶</span>
319+
</button>
320+
</div>
321+
</div>
322+
323+
<div class="detail-tags" id="detailTagsContainer">
324+
<label>标签:</label>
325+
<div id="detailTags" class="tags-list"></div>
326+
</div>
327+
328+
<div class="detail-content">
329+
<label>内容:</label>
330+
<div id="detailContent" class="content-display"></div>
331+
</div>
332+
333+
<div class="detail-notes" id="detailNotesContainer">
334+
<label>备注:</label>
335+
<div id="detailNotes" class="notes-display"></div>
336+
</div>
337+
</div>
338+
</div>
339+
</div>
340+
280341
<script type="module" src="/src/main.ts"></script>
281342
</body>
282343
</html>

‎src/main.ts‎

Lines changed: 116 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,12 @@ function bindEvents() {
4949
document.getElementById('cancelBtn')?.addEventListener('click', closeModal);
5050
document.querySelector('.modal-overlay')?.addEventListener('click', closeModal);
5151
document.getElementById('promptForm')?.addEventListener('submit', handleFormSubmit);
52+
53+
// 详情页面模态框
54+
document.getElementById('closeDetailModal')?.addEventListener('click', closeDetailModal);
55+
document.querySelector('#detailModal')?.addEventListener('click', (e) => {
56+
if (e.target === e.currentTarget) closeDetailModal();
57+
});
5258
}
5359

5460
// 加载提示词
@@ -87,22 +93,22 @@ function renderPrompts(prompts: any[]) {
8793
}
8894

8995
promptList.innerHTML = prompts.map(prompt => `
90-
<div class="prompt-card" data-id="${prompt.id}">
96+
<div class="prompt-card" data-id="${prompt.id}" onclick="showPromptDetail(${prompt.id})">
9197
${prompt.pinned ? '<div class="pin-indicator"><i class="fas fa-thumbtack"></i></div>' : ''}
9298
9399
<div class="card-header">
94100
<h3 class="card-title">${prompt.name}</h3>
95101
<div class="card-actions">
96-
<button class="btn btn-icon" onclick="togglePin(${prompt.id})" title="${prompt.pinned ? '取消置顶' : '置顶'}">
102+
<button class="btn btn-icon" onclick="event.stopPropagation(); togglePin(${prompt.id})" title="${prompt.pinned ? '取消置顶' : '置顶'}">
97103
<i class="fas fa-thumbtack ${prompt.pinned ? 'pinned' : ''}"></i>
98104
</button>
99-
<button class="btn btn-icon" onclick="copyPrompt(${prompt.id})" title="复制">
105+
<button class="btn btn-icon" onclick="event.stopPropagation(); copyPrompt(${prompt.id})" title="复制">
100106
<i class="fas fa-copy"></i>
101107
</button>
102-
<button class="btn btn-icon" onclick="editPrompt(${prompt.id})" title="编辑">
108+
<button class="btn btn-icon" onclick="event.stopPropagation(); editPrompt(${prompt.id})" title="编辑">
103109
<i class="fas fa-edit"></i>
104110
</button>
105-
<button class="btn btn-icon" onclick="deletePrompt(${prompt.id})" title="删除">
111+
<button class="btn btn-icon" onclick="event.stopPropagation(); deletePrompt(${prompt.id})" title="删除">
106112
<i class="fas fa-trash"></i>
107113
</button>
108114
</div>
@@ -348,7 +354,107 @@ async function handleFormSubmit(e: Event) {
348354
}
349355
}
350356

357+
// 显示提示词详情页面
358+
function showPromptDetail(id: number) {
359+
const prompt = currentPrompts.find(p => p.id === id);
360+
if (!prompt) return;
361+
362+
const detailModal = document.getElementById('detailModal');
363+
const detailName = document.getElementById('detailName');
364+
const detailSource = document.getElementById('detailSource');
365+
const detailSourceItem = document.getElementById('detailSourceItem');
366+
const detailUpdatedAt = document.getElementById('detailUpdatedAt');
367+
const detailTags = document.getElementById('detailTags');
368+
const detailTagsContainer = document.getElementById('detailTagsContainer');
369+
const detailContent = document.getElementById('detailContent');
370+
const detailNotes = document.getElementById('detailNotes');
371+
const detailNotesContainer = document.getElementById('detailNotesContainer');
372+
const detailPinBtn = document.getElementById('detailPinBtn');
373+
const detailPinText = document.getElementById('detailPinText');
374+
375+
if (!detailModal) return;
376+
377+
// 填充详情信息
378+
if (detailName) detailName.textContent = prompt.name;
379+
if (detailSource) detailSource.textContent = prompt.source || '';
380+
if (detailUpdatedAt) detailUpdatedAt.textContent = formatDate(prompt.updated_at);
381+
if (detailContent) detailContent.textContent = prompt.content;
382+
if (detailNotes) detailNotes.textContent = prompt.notes || '';
383+
384+
// 处理来源显示
385+
if (detailSourceItem) {
386+
detailSourceItem.style.display = prompt.source ? 'flex' : 'none';
387+
}
388+
389+
// 处理标签显示
390+
if (detailTags && detailTagsContainer) {
391+
if (prompt.tags && prompt.tags.length > 0) {
392+
detailTags.innerHTML = prompt.tags.map((tag: string) =>
393+
`<span class="tag">${tag}</span>`
394+
).join('');
395+
detailTagsContainer.style.display = 'block';
396+
} else {
397+
detailTagsContainer.style.display = 'none';
398+
}
399+
}
400+
401+
// 处理备注显示
402+
if (detailNotesContainer) {
403+
detailNotesContainer.style.display = prompt.notes ? 'block' : 'none';
404+
}
405+
406+
// 更新置顶按钮状态
407+
if (detailPinText) {
408+
detailPinText.textContent = prompt.pinned ? '取消置顶' : '置顶';
409+
}
410+
if (detailPinBtn) {
411+
detailPinBtn.className = prompt.pinned ? 'btn btn-outline pinned' : 'btn btn-outline';
412+
}
413+
414+
// 绑定详情页面的按钮事件
415+
const detailCopyBtn = document.getElementById('detailCopyBtn');
416+
const detailEditBtn = document.getElementById('detailEditBtn');
417+
418+
if (detailCopyBtn) {
419+
detailCopyBtn.onclick = () => (window as any).copyPrompt(prompt.id);
420+
}
421+
422+
if (detailEditBtn) {
423+
detailEditBtn.onclick = () => {
424+
closeDetailModal();
425+
(window as any).editPrompt(prompt.id);
426+
};
427+
}
428+
429+
if (detailPinBtn) {
430+
detailPinBtn.onclick = async () => {
431+
await (window as any).togglePin(prompt.id);
432+
// 更新详情页面的置顶状态
433+
const updatedPrompt = currentPrompts.find(p => p.id === id);
434+
if (updatedPrompt && detailPinText) {
435+
detailPinText.textContent = updatedPrompt.pinned ? '取消置顶' : '置顶';
436+
detailPinBtn.className = updatedPrompt.pinned ? 'btn btn-outline pinned' : 'btn btn-outline';
437+
}
438+
};
439+
}
440+
441+
// 显示模态框
442+
detailModal.classList.add('show');
443+
document.body.style.overflow = 'hidden';
444+
}
445+
446+
// 关闭详情页面模态框
447+
function closeDetailModal() {
448+
const detailModal = document.getElementById('detailModal');
449+
if (detailModal) {
450+
detailModal.classList.remove('show');
451+
document.body.style.overflow = '';
452+
}
453+
}
454+
351455
// 全局函数 - 确保这些函数在全局作用域中可用
456+
(window as any).showPromptDetail = showPromptDetail;
457+
352458
(window as any).copyPrompt = async (id: number) => {
353459
try {
354460
const prompt = currentPrompts.find(p => p.id === id);
@@ -579,7 +685,11 @@ function initKeyboardShortcuts() {
579685
// Escape: 关闭模态框
580686
if (e.key === 'Escape') {
581687
const modal = document.getElementById('modal');
582-
if (modal && modal.classList.contains('show')) {
688+
const detailModal = document.getElementById('detailModal');
689+
690+
if (detailModal && detailModal.classList.contains('show')) {
691+
closeDetailModal();
692+
} else if (modal && modal.classList.contains('show')) {
583693
closeModal();
584694
}
585695
}

0 commit comments

Comments
 (0)