chore: 更新前端依赖和侧边栏导航

- 添加必要的前端依赖
- 优化侧边栏交互
- 更新 AI-Core API 文档

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

web/src/components/FormDialog.vue

@@ -5,6 +5,7 @@ defineProps<{
   description?: string
   icon?: string
   iconClass?: string
+  class?: string
 }>()
 
 const emit = defineEmits<{
@@ -18,7 +19,7 @@ const close = () => {
 
 <template>
   <Teleport to="body">
-    <div v-if="modelValue" class="dialog-overlay" @click.self="close">
+    <div v-if="modelValue" class="dialog-overlay" :class="$props.class" @click.self="close">
       <div class="dialog-container">
         <!-- 头部 -->
         <div class="dialog-header">
@@ -61,7 +62,7 @@ const close = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 9999;
+  z-index: 2000;
 }
 
 .dialog-container {

web/src/components/Sidebar.vue

@@ -21,12 +21,15 @@ const mainMenu: MenuItem[] = [
   { name: 'Dashboard', icon: 'fa-gauge', path: '/dashboard' },
   { name: 'Agents', icon: 'fa-robot', badge: 3, path: '/agents' },
   { name: 'Team', icon: 'fa-users', path: '/team' },
-  { name: 'Skills', icon: 'fa-wand-magic-sparkles', badge: 21, path: '/mcp' },
-  { name: 'Tools', icon: 'fa-tools', badge: 13, path: '/model-apis' },
   { name: 'Database', icon: 'fa-database', path: '/database' },
   { name: 'Knowledge', icon: 'fa-brain', path: '/knowledge' },
 ]
 
+const middleMenu: MenuItem[] = [
+  { name: 'Skills', icon: 'fa-wand-magic-sparkles', badge: 21, path: '/mcp' },
+  { name: 'Tools', icon: 'fa-tools', badge: 13, path: '/model-apis' },
+]
+
 const bottomMenu: MenuItem[] = [
   { name: 'Settings', icon: 'fa-gear', path: '/settings' },
 ]
@@ -117,6 +120,25 @@ const handleUserCommand = (command: string) => {
         <!-- 分隔线 -->
         <li class="my-4 border-t border-dark-500"></li>
 
+        <!-- Skills & Tools -->
+        <li v-for="item in middleMenu" :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>
+            <span v-if="item.badge" class="bg-dark-500 text-xs px-2 py-0.5 rounded-full">{{ item.badge }}</span>
+          </a>
+        </li>
+
+        <!-- 分隔线 -->
+        <li class="my-4 border-t border-dark-500"></li>
+
         <!-- Settings -->
         <li v-for="item in bottomMenu" :key="item.name">
           <a