feat: 完善 UI 交互和 mock 数据

- 修复 tab/modal/toolbar CSS class 不匹配问题
- 新增 Modal 弹窗组件替代原生 prompt()
- 补全所有页面的 mock 数据（日志/记忆/MCP）
- 添加 loading 骨架屏动画、按钮 disabled 状态
- 添加搜索高亮 mark 样式
- 修复记忆页面 memory-sidebar/memory-editor 样式

src/components/modal.js

@@ -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()
+}

src/lib/tauri-api.js

@@ -30,13 +30,72 @@ function mockInvoke(cmd, args) {
     }),
     read_openclaw_config: () => ({
       meta: { lastTouchedVersion: '2026.2.23' },
-      models: { mode: 'replace', providers: {} },
-      agents: { defaults: { model: { primary: 'newapi-claude/claude-opus-4-6', fallbacks: [] } } },
-      gateway: { port: 18789, mode: 'local', bind: 'loopback' },
+      models: {
+        mode: 'replace',
+        providers: {
+          'newapi-claude': {
+            baseUrl: 'http://192.168.1.14:30080/v1',
+            apiType: 'openai',
+            models: [
+              { id: 'claude-opus-4-6' },
+              { id: 'claude-sonnet-4-5' },
+            ],
+          },
+        },
+      },
+      agents: {
+        defaults: {
+          model: { primary: 'newapi-claude/claude-opus-4-6', fallbacks: ['newapi-claude/claude-sonnet-4-5'] },
+          maxConcurrent: 4,
+          subagents: 2,
+        },
+      },
+      gateway: { port: 18789, mode: 'local', bind: 'loopback', authToken: '' },
     }),
-    read_log_tail: () => '2026-02-26 13:29:01 [INFO] Gateway started on :18789\n2026-02-26 13:29:02 [INFO] Agent connected\n',
-    list_memory_files: () => [],
-    read_mcp_config: () => ({}),
+    write_openclaw_config: () => true,
+    read_log_tail: ({ logName }) => {
+      const logs = {
+        'gateway': [
+          '2026-02-26 13:29:01 [INFO] Gateway started on :18789',
+          '2026-02-26 13:29:02 [INFO] Agent connected: claude-opus-4-6',
+          '2026-02-26 13:29:05 [INFO] Request /v1/chat/completions → 200 (1.2s)',
+          '2026-02-26 13:30:12 [INFO] Request /v1/chat/completions → 200 (3.8s)',
+          '2026-02-26 13:31:00 [WARN] Rate limit approaching: 45/50 rpm',
+          '2026-02-26 13:32:15 [INFO] Request /v1/chat/completions → 200 (2.1s)',
+        ],
+        'gateway-err': ['2026-02-26 12:00:01 [ERROR] Upstream 502: connection refused'],
+        'guardian': ['2026-02-26 13:29:00 [INFO] Health check passed', '2026-02-26 13:30:00 [INFO] Health check passed'],
+        'guardian-backup': ['2026-02-26 12:00:00 [INFO] Backup completed: openclaw.json.bak'],
+        'config-audit': ['{"ts":"2026-02-26T13:29:00Z","action":"config.read","file":"openclaw.json"}'],
+      }
+      return (logs[logName] || logs['gateway']).join('\n')
+    },
+    search_log: ({ query }) => [
+      `2026-02-26 13:29:01 [INFO] Match: ${query}`,
+      `2026-02-26 13:30:12 [INFO] Found: ${query} in request`,
+    ],
+    list_memory_files: ({ category }) => {
+      const files = {
+        memory: ['active-context.md', 'decisions.md', 'progress.md'],
+        archive: ['2026-02-sprint1.md', '2026-02-sprint2.md'],
+        core: ['AGENTS.md', 'CLAUDE.md'],
+      }
+      return files[category] || files.memory
+    },
+    read_memory_file: ({ path }) => `# ${path}\n\n这是 ${path} 的内容示例。\n\n## 概述\n\n在此记录工作记忆...`,
+    write_memory_file: () => true,
+    read_mcp_config: () => ({
+      mcpServers: {
+        'exa': { command: 'npx', args: ['-y', '@anthropic/exa-mcp-server'], env: { EXA_API_KEY: '***' } },
+        'web-reader': { command: 'npx', args: ['-y', '@anthropic/web-reader-mcp'], env: {} },
+        'pal': { command: 'node', args: ['/opt/pal-mcp/index.js'], env: {} },
+      },
+    }),
+    write_mcp_config: () => true,
+    start_service: () => true,
+    stop_service: () => true,
+    restart_service: () => true,
+    write_env_file: () => true,
   }
   const fn = mocks[cmd]
   return fn ? Promise.resolve(fn(args)) : Promise.reject(`未知命令: ${cmd}`)

src/pages/mcp.js

@@ -3,6 +3,7 @@
  */
 import { api } from '../lib/tauri-api.js'
 import { toast } from '../components/toast.js'
+import { showModal } from '../components/modal.js'
 
 export async function render() {
   const page = document.createElement('div')
@@ -122,12 +123,20 @@ function editServer(page, state, key) {
 }
 
 function addServer(page, state) {
-  const name = prompt('输入 MCP Server 名称:')
-  if (!name) return
-  const target = state.config?.mcpServers || state.config
-  target[name] = { command: '', args: [], env: {} }
-  renderServers(page, state)
-  toast(`已添加 ${name}`, 'success')
+  showModal({
+    title: '添加 MCP Server',
+    fields: [
+      { name: 'name', label: 'Server 名称', placeholder: '如 exa, web-reader' },
+      { name: 'command', label: '启动命令', placeholder: '如 npx, node' },
+    ],
+    onConfirm: ({ name, command }) => {
+      if (!name) return
+      const target = state.config?.mcpServers || state.config
+      target[name] = { command: command || '', args: [], env: {} }
+      renderServers(page, state)
+      toast(`已添加 ${name}`, 'success')
+    },
+  })
 }
 
 async function saveConfig(state) {

src/pages/models.js

@@ -3,6 +3,7 @@
  */
 import { api } from '../lib/tauri-api.js'
 import { toast } from '../components/toast.js'
+import { showModal } from '../components/modal.js'
 
 export async function render() {
   const page = document.createElement('div')
@@ -109,11 +110,16 @@ function renderProviders(page, state) {
         state.config.models.providers[providerKey].models.splice(idx, 1)
         renderProviders(page, state)
       } else if (action === 'add-model') {
-        const id = prompt('输入模型 ID:')
-        if (id) {
-          state.config.models.providers[providerKey].models.push({ id })
-          renderProviders(page, state)
-        }
+        showModal({
+          title: '添加模型',
+          fields: [{ name: 'id', label: '模型 ID', placeholder: '如 claude-opus-4-6' }],
+          onConfirm: ({ id }) => {
+            if (id) {
+              state.config.models.providers[providerKey].models.push({ id })
+              renderProviders(page, state)
+            }
+          },
+        })
       }
     }
   })
@@ -128,13 +134,29 @@ function renderProviders(page, state) {
 }
 
 function addProvider(page, state) {
-  const key = prompt('输入 Provider 名称 (如 openai, newapi):')
-  if (!key) return
-  if (!state.config.models) state.config.models = { mode: 'replace', providers: {} }
-  if (!state.config.models.providers) state.config.models.providers = {}
-  state.config.models.providers[key] = { baseUrl: '', apiType: 'openai', models: [] }
-  renderProviders(page, state)
-  toast(`已添加 ${key}`, 'success')
+  showModal({
+    title: '添加 Provider',
+    fields: [
+      { name: 'key', label: 'Provider 名称', placeholder: '如 openai, newapi' },
+      { name: 'baseUrl', label: 'Base URL', placeholder: 'https://api.openai.com/v1' },
+      {
+        name: 'apiType', label: 'API 类型', type: 'select',
+        options: [
+          { value: 'openai', label: 'OpenAI' },
+          { value: 'anthropic', label: 'Anthropic' },
+          { value: 'google', label: 'Google' },
+        ],
+      },
+    ],
+    onConfirm: ({ key, baseUrl, apiType }) => {
+      if (!key) return
+      if (!state.config.models) state.config.models = { mode: 'replace', providers: {} }
+      if (!state.config.models.providers) state.config.models.providers = {}
+      state.config.models.providers[key] = { baseUrl, apiType, models: [] }
+      renderProviders(page, state)
+      toast(`已添加 ${key}`, 'success')
+    },
+  })
 }
 
 async function saveConfig(state) {

src/style/components.css

@@ -154,7 +154,7 @@
   margin-bottom: var(--space-lg);
 }
 
-.tab-item {
+.tab {
   padding: var(--space-sm) var(--space-lg);
   font-size: var(--font-size-sm);
   color: var(--text-tertiary);
@@ -163,8 +163,84 @@
   transition: all var(--transition-fast);
 }
 
-.tab-item:hover { color: var(--text-secondary); }
-.tab-item.active {
+.tab:hover { color: var(--text-secondary); }
+.tab.active {
   color: var(--accent-hover);
   border-bottom-color: var(--accent);
 }
+
+/* 配置操作栏 */
+.config-actions {
+  display: flex;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-lg);
+}
+
+/* 按钮禁用状态 */
+.btn:disabled, .btn[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* 搜索高亮 */
+mark {
+  background: var(--warning-muted);
+  color: var(--warning);
+  padding: 0 2px;
+  border-radius: 2px;
+}
+
+/* Loading 占位动画 */
+.loading-placeholder {
+  min-height: 80px;
+  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-glass-hover) 50%, var(--bg-tertiary) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* Modal 弹窗 */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9000;
+  animation: fadeInModal 150ms ease;
+}
+
+.modal {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-xl);
+  padding: var(--space-xl);
+  min-width: 360px;
+  max-width: 500px;
+  box-shadow: var(--shadow-lg);
+}
+
+.modal-title {
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  margin-bottom: var(--space-lg);
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-sm);
+  margin-top: var(--space-xl);
+}
+
+@keyframes fadeInModal {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

src/style/pages.css

@@ -45,6 +45,14 @@
   gap: var(--space-sm);
 }
 
+/* 日志工具栏 */
+.log-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  margin-bottom: var(--space-md);
+}
+
 /* 日志查看器 */
 .log-viewer {
   background: var(--bg-secondary);
@@ -93,7 +101,7 @@
   height: calc(100vh - 200px);
 }
 
-.file-tree {
+.memory-sidebar {
   background: var(--bg-card);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
@@ -101,6 +109,29 @@
   overflow-y: auto;
 }
 
+.memory-editor {
+  background: var(--bg-card);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.memory-editor textarea {
+  flex: 1;
+  width: 100%;
+  background: transparent;
+  border: none;
+  resize: none;
+  outline: none;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  line-height: 1.7;
+  padding: var(--space-lg);
+}
+
 .file-item {
   padding: var(--space-sm) var(--space-md);
   border-radius: var(--radius-sm);