mirror of
https://github.com/qingchencloud/clawpanel.git
synced 2026-05-29 20:30:00 +08:00
feat: 完善 UI 交互和 mock 数据
- 修复 tab/modal/toolbar CSS class 不匹配问题 - 新增 Modal 弹窗组件替代原生 prompt() - 补全所有页面的 mock 数据(日志/记忆/MCP) - 添加 loading 骨架屏动画、按钮 disabled 状态 - 添加搜索高亮 mark 样式 - 修复记忆页面 memory-sidebar/memory-editor 样式
This commit is contained in:
52
src/components/modal.js
Normal file
52
src/components/modal.js
Normal 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()
|
||||
}
|
||||
Reference in New Issue
Block a user