feat: 优化前端页面和组件

- 重构 Agents 页面
- 优化 Knowledge 页面
- 更新侧边栏导航
- 添加前端依赖

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

web/src/components/Sidebar.vue

@@ -39,42 +39,45 @@ interface MenuItem {
   path?: string
 }
 
-const mainMenu = computed<MenuItem[]>(() => [
-  { name: 'Dashboard', icon: 'fa-gauge', path: '/dashboard' },
-  { name: 'Agents', icon: 'fa-robot', badge: 3, path: '/agents' },
-  { name: 'Script', icon: 'fa-code', path: '/script' },
+// 第1组: Chat, Agents
+const group1 = computed(() => [
+  { name: 'Chat', icon: 'fa-robot', path: '/agents' },
+  { name: 'Agents', icon: 'fa-users', badge: 3, path: '/agents' },
+])
+
+// 第2组: Database, Knowledge
+const group2 = computed(() => [
   { name: 'Database', icon: 'fa-database', path: '/database', badge: databaseCount.value },
   { name: 'Knowledge', icon: 'fa-brain', path: '/knowledge', badge: knowledgeCount.value },
 ])
 
-const middleMenu: MenuItem[] = [
+// 第3组: Skills, Tools, Script
+const group3 = computed(() => [
   { name: 'Skills', icon: 'fa-wand-magic-sparkles', badge: 21, path: '/mcp' },
   { name: 'Tools', icon: 'fa-tools', badge: 13, path: '/model-apis' },
-]
+  { name: 'Script', icon: 'fa-code', path: '/script' },
+])
 
-const bottomMenu: MenuItem[] = [
-  { name: 'Settings', icon: 'fa-gear', path: '/settings' },
-]
-
-const bottomMenu2: MenuItem[] = [
+// 第4组: Dashboard, Account, Settings
+const group4 = computed(() => [
+  { name: 'Dashboard', icon: 'fa-gauge', path: '/dashboard' },
   { name: 'Account', icon: 'fa-user', path: '/account' },
-]
+  { name: 'Settings', icon: 'fa-gear', path: '/settings' },
+])
 
 const activeMenu = computed(() => {
   const currentPath = route.path
-  // Check main menu
-  const menuItem = mainMenu.value.find(item => item.path === currentPath)
-  if (menuItem) return menuItem.name
-  // Check middle menu (Skills, Tools)
-  const middleItem = middleMenu.find(item => item.path === currentPath)
-  if (middleItem) return middleItem.name
-  // Check bottom menu (Settings)
-  const bottomItem = bottomMenu.find(item => item.path === currentPath)
-  if (bottomItem) return bottomItem.name
-  // Check bottomMenu2 (Account)
-  const bottomItem2 = bottomMenu2.find(item => item.path === currentPath)
-  if (bottomItem2) return bottomItem2.name
-  return 'Dashboard'
+
+  // Special case for /agents - prioritize Chat over Agents
+  if (currentPath === '/agents') {
+    return 'Chat'
+  }
+
+  // Check all groups
+  const allGroups = [...group1.value, ...group2.value, ...group3.value, ...group4.value]
+  const item = allGroups.find(item => item.path === currentPath)
+  if (item) return item.name
+  return 'Chat'
 })
 
 const navigateTo = (item: MenuItem) => {
@@ -129,8 +132,8 @@ const handleUserCommand = (command: string) => {
     <!-- 导航菜单 -->
     <nav class="flex-1 px-3 py-2">
       <ul class="space-y-1">
-        <!-- Dashboard, Agents -->
-        <li v-for="item in mainMenu.slice(0, 2)" :key="item.name">
+        <!-- 第1组: Chat, Agents -->
+        <li v-for="item in group1" :key="item.name">
           <a
             href="#"
             class="flex items-center justify-between px-3 py-2.5 rounded-lg transition-colors text-sm"
@@ -148,8 +151,8 @@ const handleUserCommand = (command: string) => {
         <!-- 分隔线1 -->
         <li class="my-4 border-t border-dark-500"></li>
 
-        <!-- Database, Knowledge -->
-        <li v-for="item in mainMenu.slice(2)" :key="item.name">
+        <!-- 第2组: Database, Knowledge -->
+        <li v-for="item in group2" :key="item.name">
           <a
             href="#"
             class="flex items-center justify-between px-3 py-2.5 rounded-lg transition-colors text-sm"
@@ -167,8 +170,8 @@ const handleUserCommand = (command: string) => {
         <!-- 分隔线2 -->
         <li class="my-4 border-t border-dark-500"></li>
 
-        <!-- Skills & Tools -->
-        <li v-for="item in middleMenu" :key="item.name">
+        <!-- 第3组: Skills, Tools, Script -->
+        <li v-for="item in group3" :key="item.name">
           <a
             href="#"
             class="flex items-center justify-between px-3 py-2.5 rounded-lg transition-colors text-sm"
@@ -183,8 +186,11 @@ const handleUserCommand = (command: string) => {
           </a>
         </li>
 
-        <!-- Settings -->
-        <li v-for="item in bottomMenu" :key="item.name">
+        <!-- 分隔线3 -->
+        <li class="my-4 border-t border-dark-500"></li>
+
+        <!-- 第4组: Dashboard, Account, Settings -->
+        <li v-for="item in group4" :key="item.name">
           <a
             href="#"
             class="flex items-center justify-between px-3 py-2.5 rounded-lg transition-colors text-sm"
@@ -202,24 +208,6 @@ const handleUserCommand = (command: string) => {
             </div>
           </a>
         </li>
-
-        <!-- 分隔线 -->
-        <li class="my-4 border-t border-dark-500"></li>
-
-        <!-- Account -->
-        <li v-for="item in bottomMenu2" :key="item.name">
-          <a
-            href="#"
-            class="flex items-center justify-between px-3 py-2.5 rounded-lg transition-colors text-sm"
-            :class="activeMenu === item.name ? 'bg-dark-600 text-white' : 'text-gray-400 hover:bg-dark-600 hover:text-white'"
-            @click="navigateTo(item)"
-          >
-            <div class="flex items-center gap-3">
-              <i :class="['fa-solid', item.icon, 'w-5', 'text-center']"></i>
-              <span>{{ item.name }}</span>
-            </div>
-          </a>
-        </li>
       </ul>
     </nav>