feat: 优化多个前端页面

- 扩展 Account 账户页面功能
- 优化 Script 脚本页面
- 完善 Settings 设置页面
- 增强 Chat 聊天页面

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/views/Settings.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useModelSettings } from './settings/useModelSettings'
 import FormDialog from '@/components/FormDialog.vue'
@@ -47,6 +47,7 @@ const menuItems = [
   { key: 'members', label: 'Members', icon: 'fa-users' },
   { key: 'notifications', label: 'Notifications', icon: 'fa-bell' },
   { key: 'modelSettings', label: 'Model Settings', icon: 'fa-brain' },
+  { key: 'logs', label: 'Logs', icon: 'fa-file-lines' },
 ]
 
 // General 设置表单
@@ -82,13 +83,92 @@ const saveChanges = () => {
 const showChangePassword = () => {
   ElMessage.info('Password change dialog would open here')
 }
+
+// ========== Logs 功能 ==========
+interface Log {
+  id: number
+  level: 'info' | 'warning' | 'error' | 'debug'
+  source: string
+  message: string
+  timestamp: string
+  user?: string
+}
+
+const logs = ref<Log[]>([
+  { id: 1, level: 'info', source: 'System', message: 'User logged in successfully', timestamp: '2025-03-10 14:35:22', user: 'alex@example.com' },
+  { id: 2, level: 'warning', source: 'API', message: 'Rate limit approaching for API key', timestamp: '2025-03-10 14:32:15', user: 'john@example.com' },
+  { id: 3, level: 'error', source: 'Database', message: 'Connection timeout to primary database', timestamp: '2025-03-10 14:30:45' },
+  { id: 4, level: 'info', source: 'Skill', message: 'MCP Server started successfully', timestamp: '2025-03-10 14:28:10' },
+  { id: 5, level: 'debug', source: 'Auth', message: 'Token refresh initiated', timestamp: '2025-03-10 14:25:33', user: 'jane@example.com' },
+  { id: 6, level: 'error', source: 'Script', message: 'Failed to execute backup script', timestamp: '2025-03-10 14:20:18' },
+  { id: 7, level: 'info', source: 'Account', message: 'User role updated', timestamp: '2025-03-10 14:15:42', user: 'admin@example.com' },
+  { id: 8, level: 'warning', source: 'Memory', message: 'Memory usage exceeds 80% threshold', timestamp: '2025-03-10 14:10:55' },
+  { id: 9, level: 'info', source: 'Knowledge', message: 'Document indexed successfully', timestamp: '2025-03-10 14:05:30' },
+  { id: 10, level: 'error', source: 'API', message: 'Invalid API key provided', timestamp: '2025-03-10 14:00:12' },
+])
+
+const logSearchQuery = ref('')
+const logFilterLevel = ref('')
+const logFilterSource = ref('')
+
+const logLevelOptions = [
+  { value: '', label: 'All Levels' },
+  { value: 'info', label: 'Info' },
+  { value: 'warning', label: 'Warning' },
+  { value: 'error', label: 'Error' },
+  { value: 'debug', label: 'Debug' },
+]
+
+const logSourceOptions = computed(() => {
+  const sources = [...new Set(logs.value.map(l => l.source))]
+  return [{ value: '', label: 'All Sources' }, ...sources.map(s => ({ value: s, label: s }))]
+})
+
+const filteredLogs = computed(() => {
+  return logs.value.filter(log => {
+    const matchSearch = logSearchQuery.value === '' ||
+      log.message.toLowerCase().includes(logSearchQuery.value.toLowerCase()) ||
+      log.source.toLowerCase().includes(logSearchQuery.value.toLowerCase())
+    const matchLevel = logFilterLevel.value === '' || log.level === logFilterLevel.value
+    const matchSource = logFilterSource.value === '' || log.source === logFilterSource.value
+    return matchSearch && matchLevel && matchSource
+  })
+})
+
+const logLevelClass = (level: string) => {
+  switch (level) {
+    case 'info': return 'bg-blue-500/20 text-blue-400'
+    case 'warning': return 'bg-yellow-500/20 text-yellow-400'
+    case 'error': return 'bg-red-500/20 text-red-400'
+    case 'debug': return 'bg-gray-500/20 text-gray-400'
+    default: return 'bg-gray-500/20 text-gray-400'
+  }
+}
+
+const selectedLog = ref<Log | null>(null)
+const showLogDetail = ref(false)
+
+const viewLogDetail = (log: Log) => {
+  selectedLog.value = log
+  showLogDetail.value = true
+}
+
+const closeLogDetail = () => {
+  showLogDetail.value = false
+  selectedLog.value = null
+}
+
+const clearLogs = () => {
+  logs.value = []
+}
 </script>
 
 <template>
   <div class="settings-page">
     <!-- 页面标题 -->
-    <div class="page-header">
-      <h1 class="page-title">Settings</h1>
+    <div class="flex items-center gap-2 mb-6">
+      <i class="fa-solid fa-gear text-orange-500"></i>
+      <span class="font-medium">Settings</span>
     </div>
 
     <div class="settings-container">
@@ -432,6 +512,141 @@ const showChangePassword = () => {
             </template>
           </FormDialog>
         </div>
+
+        <!-- Logs 设置 -->
+        <div v-if="activeMenu === 'logs'" class="settings-section">
+          <div class="flex items-center justify-between mb-6">
+            <div>
+              <h2 class="section-title">Logs</h2>
+              <p class="section-desc">View system logs</p>
+            </div>
+            <button @click="clearLogs" class="px-4 py-2 rounded-lg bg-dark-600 text-gray-300 hover:bg-dark-500 transition-colors flex items-center gap-2">
+              <i class="fa-solid fa-trash"></i>
+              Clear Logs
+            </button>
+          </div>
+
+          <!-- 搜索和筛选 -->
+          <div class="flex gap-4 mb-6">
+            <div class="flex-1 relative">
+              <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
+              <input
+                v-model="logSearchQuery"
+                type="text"
+                placeholder="Search logs..."
+                class="w-full bg-dark-600 border border-dark-500 rounded-lg py-2 pl-10 pr-4 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
+              >
+            </div>
+            <el-select v-model="logFilterLevel" placeholder="All Levels" class="w-40" size="large" popper-class="dark-select-dropdown">
+              <el-option v-for="opt in logLevelOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+            </el-select>
+            <el-select v-model="logFilterSource" placeholder="All Sources" class="w-40" size="large" popper-class="dark-select-dropdown">
+              <el-option v-for="opt in logSourceOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+            </el-select>
+          </div>
+
+          <!-- 日志列表 -->
+          <div class="bg-dark-700 rounded-xl overflow-hidden">
+            <table class="w-full">
+              <thead class="bg-dark-600">
+                <tr>
+                  <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Level</th>
+                  <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Source</th>
+                  <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Message</th>
+                  <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">User</th>
+                  <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Timestamp</th>
+                  <th class="text-right px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="log in filteredLogs" :key="log.id" class="border-t border-dark-600 hover:bg-dark-600/50">
+                  <td class="px-5 py-4">
+                    <span :class="['px-2 py-1 rounded text-xs font-medium', logLevelClass(log.level)]">
+                      {{ log.level.toUpperCase() }}
+                    </span>
+                  </td>
+                  <td class="px-5 py-4 text-gray-300">{{ log.source }}</td>
+                  <td class="px-5 py-4 text-gray-300 max-w-md">
+                    <div class="truncate">{{ log.message }}</div>
+                  </td>
+                  <td class="px-5 py-4 text-gray-400">{{ log.user || '-' }}</td>
+                  <td class="px-5 py-4 text-gray-400 text-sm">{{ log.timestamp }}</td>
+                  <td class="px-5 py-4">
+                    <div class="flex items-center justify-end">
+                      <button
+                        @click="viewLogDetail(log)"
+                        class="p-2 rounded-lg hover:bg-dark-500 transition-colors"
+                        title="View Details"
+                      >
+                        <i class="fa-solid fa-eye text-gray-400 hover:text-white"></i>
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+            <!-- 空状态 -->
+            <div v-if="filteredLogs.length === 0" class="py-12 text-center text-gray-500">
+              <i class="fa-solid fa-file-lines text-4xl mb-3"></i>
+              <p>No logs found</p>
+            </div>
+          </div>
+
+          <!-- 日志详情弹窗 -->
+          <Teleport to="body">
+            <div v-if="showLogDetail" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50" @click="closeLogDetail">
+              <div class="bg-dark-700 rounded-2xl w-full max-w-2xl border border-dark-500 shadow-2xl" @click.stop>
+                <div class="flex items-center justify-between p-5 border-b border-dark-500">
+                  <h3 class="text-lg font-semibold">Log Details</h3>
+                  <button @click="closeLogDetail" class="text-gray-400 hover:text-white transition-colors">
+                    <i class="fa-solid fa-xmark text-xl"></i>
+                  </button>
+                </div>
+
+                <div v-if="selectedLog" class="p-5 space-y-4">
+                  <div class="flex items-center gap-4">
+                    <span :class="['px-3 py-1 rounded text-sm font-medium', logLevelClass(selectedLog.level)]">
+                      {{ selectedLog.level.toUpperCase() }}
+                    </span>
+                    <span class="text-gray-400">{{ selectedLog.timestamp }}</span>
+                  </div>
+
+                  <div>
+                    <label class="block text-sm font-medium text-gray-400 mb-2">Source</label>
+                    <div class="text-white">{{ selectedLog.source }}</div>
+                  </div>
+
+                  <div>
+                    <label class="block text-sm font-medium text-gray-400 mb-2">User</label>
+                    <div class="text-white">{{ selectedLog.user || 'System' }}</div>
+                  </div>
+
+                  <div>
+                    <label class="block text-sm font-medium text-gray-400 mb-2">Message</label>
+                    <div class="bg-dark-800 rounded-lg p-4 text-gray-300 font-mono text-sm whitespace-pre-wrap">
+                      {{ selectedLog.message }}
+                    </div>
+                  </div>
+
+                  <div>
+                    <label class="block text-sm font-medium text-gray-400 mb-2">Log ID</label>
+                    <div class="text-gray-500">#{{ selectedLog.id }}</div>
+                  </div>
+                </div>
+
+                <div class="flex items-center justify-end gap-3 p-5 border-t border-dark-500">
+                  <button
+                    @click="closeLogDetail"
+                    class="px-4 py-2 rounded-lg bg-dark-600 text-gray-300 hover:bg-dark-500 transition-colors"
+                  >
+                    Close
+                  </button>
+                </div>
+              </div>
+            </div>
+          </Teleport>
+        </div>
       </div>
     </div>
   </div>