feat: 完善 UI 交互和 mock 数据

- 修复 tab/modal/toolbar CSS class 不匹配问题
- 新增 Modal 弹窗组件替代原生 prompt()
- 补全所有页面的 mock 数据(日志/记忆/MCP)
- 添加 loading 骨架屏动画、按钮 disabled 状态
- 添加搜索高亮 mark 样式
- 修复记忆页面 memory-sidebar/memory-editor 样式
This commit is contained in:
晴天
2026-02-26 22:55:56 +08:00
parent e26c4d9307
commit d32ce81547
6 changed files with 277 additions and 28 deletions

52
src/components/modal.js Normal file
View File

@@ -0,0 +1,52 @@
/**
* Modal 弹窗组件
*/
export function showModal({ title, fields, onConfirm }) {
const overlay = document.createElement('div')
overlay.className = 'modal-overlay'
const fieldHtml = fields.map(f => `
<div class="form-group">
<label class="form-label">${f.label}</label>
${f.type === 'select'
? `<select class="form-input" data-name="${f.name}">
${f.options.map(o => `<option value="${o.value}" ${o.value === f.value ? 'selected' : ''}>${o.label}</option>`).join('')}
</select>`
: `<input class="form-input" data-name="${f.name}" value="${f.value || ''}" placeholder="${f.placeholder || ''}">`
}
</div>
`).join('')
overlay.innerHTML = `
<div class="modal">
<div class="modal-title">${title}</div>
${fieldHtml}
<div class="modal-actions">
<button class="btn btn-secondary btn-sm" data-action="cancel">取消</button>
<button class="btn btn-primary btn-sm" data-action="confirm">确定</button>
</div>
</div>
`
document.body.appendChild(overlay)
// 点击遮罩关闭
overlay.addEventListener('click', (e) => {
if (e.target === overlay) overlay.remove()
})
overlay.querySelector('[data-action="cancel"]').onclick = () => overlay.remove()
overlay.querySelector('[data-action="confirm"]').onclick = () => {
const result = {}
overlay.querySelectorAll('[data-name]').forEach(el => {
result[el.dataset.name] = el.value
})
overlay.remove()
onConfirm(result)
}
// 自动聚焦第一个输入框
const firstInput = overlay.querySelector('input, select')
if (firstInput) firstInput.focus()
}