refactor: 更新AgentPanel、HeaderComponent和SkillsManager组件的样式和结构

- 重新排列了AgentPanel中的标签页以提升用户体验。
- 将AgentPanel中的默认活动标签页从'todos'更改为'files'。
- 更新了HeaderComponent中的标题样式以提高可读性。
- 调整了HeaderComponent段落的边距以获得更好的间距效果。
- 重构SkillsManagerComponent以增强布局和可用性：
  - 引入了新的HeaderComponent以获得更好的结构。
  - 改进了技能列表和详情面板的布局。
  - 添加了技能搜索功能。
  - 通过更好的样式和布局增强了依赖管理界面。
  - 更新了文件编辑器和树形结构以改善用户体验。

web/src/assets/css/main.css

@@ -44,27 +44,14 @@ body {
   }
 }
 
-.iconfont {
+.lucide-icon-btn {
-  max-width: 100%;
+  display: inline-flex;
-  max-height: 100%;
+  align-items: center;
-
+  justify-content: center;
-  &.icon-10 {
+  gap: 6px;
-    width: 10px;
-    height: 10px;
-  }
-
-  &.icon-16 {
-    width: 16px;
-    height: 16px;
-  }
-
-  &.icon-20 {
-    width: 20px;
-    height: 20px;
-  }
-
-  &.icon-24 {
-    width: 24px;
-    height: 24px;
-  }
 }
+
+.lucide-icon-btn svg {
+  flex-shrink: 0;
+}
+

web/src/components/AgentPanel.vue

@@ -19,12 +19,12 @@
     </div>
 
     <div class="tabs">
-      <button class="tab" :class="{ active: activeTab === 'todos' }" @click="activeTab = 'todos'">
-        任务 ({{ completedCount }}/{{ todos.length }})
-      </button>
       <button class="tab" :class="{ active: activeTab === 'files' }" @click="activeTab = 'files'">
         文件 ({{ fileCount }})
       </button>
+      <button class="tab" :class="{ active: activeTab === 'todos' }" @click="activeTab = 'todos'">
+        任务 ({{ completedCount }}/{{ todos.length }})
+      </button>
     </div>
     <div class="tab-content">
       <!-- Todo Display -->
@@ -181,7 +181,7 @@ const props = defineProps({
 
 const emit = defineEmits(['refresh', 'close', 'resize', 'resizing'])
 
-const activeTab = ref('todos')
+const activeTab = ref('files')
 const modalVisible = ref(false)
 const currentFile = ref(null)
 const currentFilePath = ref('')
@@ -566,7 +566,7 @@ const stopResize = () => {
   align-items: center;
   justify-content: space-between;
   padding: 4px 16px;
-  height: 40px;
+  height: 48px;
   background: var(--gray-25);
   flex-shrink: 0;
 }

web/src/components/HeaderComponent.vue

@@ -61,7 +61,7 @@ const props = defineProps({
   flex: 1;
   width: 100%;
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--gray-900);
 
   .header-title-block {
     display: flex;
@@ -77,7 +77,7 @@ const props = defineProps({
   }
 
   p {
-    margin: 8px 0 0;
+    margin: 4px 0 0;
   }
 }
 

web/src/components/SettingsModal.vue

@@ -58,15 +58,6 @@
           <ApiOutlined class="icon" />
           <span>MCP 管理</span>
         </div>
-        <div
-          class="sider-item"
-          :class="{ activesec: activeTab === 'skills' }"
-          @click="activeTab = 'skills'"
-          v-if="userStore.isSuperAdmin"
-        >
-          <FolderOutlined class="icon" />
-          <span>Skills 管理</span>
-        </div>
       </div>
 
       <!-- 顶部导航 (Mobile) -->
@@ -103,14 +94,6 @@
         >
           MCP 管理
         </div>
-        <div
-          class="nav-item"
-          :class="{ active: activeTab === 'skills' }"
-          @click="activeTab = 'skills'"
-          v-if="userStore.isSuperAdmin"
-        >
-          Skills 管理
-        </div>
         <div
           class="nav-item"
           :class="{ active: activeTab === 'department' }"
@@ -140,10 +123,6 @@
             <McpServersComponent />
           </div>
 
-          <div v-show="activeTab === 'skills'" v-if="userStore.isSuperAdmin">
-            <SkillsManagerComponent />
-          </div>
-
           <div v-show="activeTab === 'department'" v-if="userStore.isSuperAdmin">
             <DepartmentManagementComponent />
           </div>
@@ -161,15 +140,13 @@ import {
   CodeOutlined,
   UserOutlined,
   ApiOutlined,
-  TeamOutlined,
+  TeamOutlined
-  FolderOutlined
 } from '@ant-design/icons-vue'
 import BasicSettingsSection from '@/components/BasicSettingsSection.vue'
 import ModelProvidersComponent from '@/components/ModelProvidersComponent.vue'
 import UserManagementComponent from '@/components/UserManagementComponent.vue'
 import McpServersComponent from '@/components/McpServersComponent.vue'
 import DepartmentManagementComponent from '@/components/DepartmentManagementComponent.vue'
-import SkillsManagerComponent from '@/components/SkillsManagerComponent.vue'
 
 const props = defineProps({
   visible: {