diff --git a/web/src/components/Sidebar.vue b/web/src/components/Sidebar.vue
index c18c2ba..880685f 100644
--- a/web/src/components/Sidebar.vue
+++ b/web/src/components/Sidebar.vue
@@ -54,7 +54,7 @@ const group2 = computed(() => [
 // 第3组: Skills, Tools, Script, Plan, Memory
 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: 'Tools', icon: 'fa-tools', badge: 13, path: '/tools' },
   { name: 'Script', icon: 'fa-code', path: '/script' },
   { name: 'Plan', icon: 'fa-clock', path: '/plan' },
   { name: 'Memory', icon: 'fa-brain', path: '/memory' },
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index 48d2720..5a1078c 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -5,7 +5,7 @@ import Chat from '@/views/Chat.vue'
 import Agents from '@/views/Agents.vue'
 import Team from '@/views/Team.vue'
 import Skill from '@/views/Skill.vue'
-import ModelAPIs from '@/views/ModelAPIs.vue'
+import Tools from '@/views/Tools.vue'
 import Database from '@/views/Database.vue'
 import Script from '@/views/Script.vue'
 import Plan from '@/views/Plan.vue'
@@ -49,9 +49,9 @@ const router = createRouter({
       component: Skill
     },
     {
-      path: '/model-apis',
-      name: 'model-apis',
-      component: ModelAPIs
+      path: '/tools',
+      name: 'tools',
+      component: Tools
     },
     {
       path: '/database',
diff --git a/web/src/views/Skill.vue b/web/src/views/Skill.vue
index e15d175..6658417 100644
--- a/web/src/views/Skill.vue
+++ b/web/src/views/Skill.vue
@@ -1,330 +1,52 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
-import { useModelSettings } from './settings/useModelSettings'
-import { useSkillServers } from './skill/useSkillServers'
-import { useFileTree } from './skill/useFileTree'
-import { useSkillChat } from './skill/useSkillChat'
-import { useWorkflow } from './skill/useWorkflow'
-import type { FileItem } from './skill/types'
+import { useSkills } from './skill/useSkills'
+import '@/views/database/database.css'
 
-// MCP Server management
 const {
-  mcpServers,
-  editingServer,
-  isEditing,
   searchQuery,
   filterStatus,
+  isEditing,
+  isCreating,
   editForm,
-  openEdit,
-  saveEdit,
-  cancelEdit,
-  toggleStatus,
-  deleteServer,
-  filteredServers,
+  newSkillForm,
+  categories,
+  types,
+  filteredSkills,
   statusClass,
-} = useSkillServers()
-
-// File tree management
-const {
-  fileTree,
-  rootFiles,
-  inlineNewFolderName,
-  inlineCreatingFolderId,
-  inlineNewFileName,
-  inlineCreatingFileId,
-  isEditingFile,
-  isEditingFileClosing,
-  editingFile,
-  editingFileName,
-  editingFileContent,
-  editingFileType,
-  hoveringItem,
-  selectedFolder,
-  toggleFolder,
-  showInlineNewFolderInput,
-  confirmInlineCreateFolder,
-  cancelInlineCreateFolder,
-  findFolderById,
-  showInlineNewFileInput,
-  confirmInlineCreateFile,
-  cancelInlineCreateFile,
-  getFileIconByName,
-  handleFileUpload,
-  findFile,
-  selectFolder,
-  deleteFile,
-  deleteFolder,
-  openFile,
-  saveFileEdit,
-  cancelFileEdit,
-} = useFileTree()
-
-// Chat functionality
-const {
-  isChatOpen,
-  chatInput,
-  chatMessages,
-  toggleChat,
-  sendMessage,
-} = useSkillChat()
-
-// Workflow visualization
-const {
-  workflowData,
-  isGeneratingGraph,
-  isGraphGenerated,
-  toggleNode,
-  renderWorkflow,
-  generateGraph,
-} = useWorkflow()
-
-// 新建 Skill
-const isCreating = ref(false)
-const createStep = ref(1)
-const newSkillForm = ref({
-  name: '',
-  type: 'API',
-  provider: 'Custom',
-  port: 3000,
-  description: '',
-  enabled: true,
-  model: 'gpt-4o',
-})
-
-// 从 Model Settings 获取模型
-const { models, fetchModels } = useModelSettings()
-
-const availableModels = computed(() => {
-  return models.value
-    .filter((m: any) => m.model_type === 'chat')
-    .map((m: any) => ({
-      name: m.model,
-      provider: m.provider,
-      icon: 'fa-brain'
-    }))
-})
-
-onMounted(() => {
-  fetchModels()
-})
-
-const goToStep2 = () => {
-  if (!newSkillForm.value.name.trim()) return
-  createStep.value = 2
-  isGraphGenerated.value = false
-  isGeneratingGraph.value = false
-}
-
-const goBackToStep1 = () => {
-  createStep.value = 1
-}
-
-const openCreate = () => {
-  newSkillForm.value = {
-    name: '',
-    type: 'API',
-    provider: 'Custom',
-    port: 3000,
-    description: '',
-    enabled: true,
-    model: 'gpt-4o',
-  }
-  createStep.value = 1
-  isCreating.value = true
-}
-
-const closeCreate = () => {
-  isCreating.value = false
-  createStep.value = 1
-}
-
-const saveNewSkill = () => {
-  const newId = Math.max(...mcpServers.value.map(s => s.id)) + 1
-  mcpServers.value.push({
-    id: newId,
-    name: newSkillForm.value.name || 'Untitled Skill',
-    status: 'stopped',
-    type: newSkillForm.value.type,
-    port: newSkillForm.value.port,
-    createdAt: new Date().toISOString().split('T')[0],
-    description: newSkillForm.value.description,
-  })
-  isCreating.value = false
-}
+  openCreate,
+  closeCreate,
+  saveNewSkill,
+  openEdit,
+  closeEdit,
+  saveEdit,
+  toggleStatus,
+  deleteSkill,
+} = useSkills()
 </script>
 
-<style scoped>
-/* 模态框进入动画 */
-@keyframes modal-in {
-  0% {
-    opacity: 0;
-    transform: scale(0.95) translateY(20px);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-@keyframes fade-in {
-  0% { opacity: 0; transform: translateY(-5px); }
-  100% { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes float {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-8px); }
-}
-
-@keyframes scale-in {
-  0% { opacity: 0; transform: scale(0.9); }
-  100% { opacity: 1; transform: scale(1); }
-}
-
-.animate-modal-in {
-  animation: modal-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-@keyframes modal-out {
-  0% { opacity: 1; transform: scale(1); }
-  100% { opacity: 0; transform: scale(0.95); }
-}
-
-.animate-modal-out {
-  animation: modal-out 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-@keyframes slide-in {
-  0% { transform: translateX(100%); opacity: 0; }
-  100% { transform: translateX(0); opacity: 1; }
-}
-
-@keyframes slide-out {
-  0% { transform: translateX(0); opacity: 1; }
-  100% { transform: translateX(100%); opacity: 0; }
-}
-
-.animate-slide-in {
-  animation: slide-in 0.3s ease-out forwards;
-}
-
-@keyframes progress-width {
-  0% { width: 0%; }
-  100% { width: 100%; }
-}
-
-.animate-progress-width {
-  animation: progress-width 2.5s ease-in-out forwards;
-}
-
-@keyframes spin-slow {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.animate-spin-slow {
-  animation: spin-slow 20s linear infinite;
-}
-
-@keyframes pulse-slow {
-  0%, 100% { transform: scale(1); opacity: 1; }
-  50% { transform: scale(1.1); opacity: 0.8; }
-}
-
-.animate-pulse-slow {
-  animation: pulse-slow 2s ease-in-out infinite;
-}
-
-@keyframes float-particle {
-  0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
-  50% { transform: translateY(-10px) scale(1.2); opacity: 1; }
-}
-
-.animate-float-particle {
-  animation: float-particle 3s ease-in-out infinite;
-}
-
-@keyframes scan {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(200%); }
-}
-
-.animate-scan {
-  animation: scan 1.5s ease-in-out infinite;
-}
-
-.animate-fade-in {
-  animation: fade-in 0.3s ease-out forwards;
-}
-
-.animate-float {
-  animation: float 3s ease-in-out infinite;
-}
-
-.animate-scale-in {
-  animation: scale-in 0.5s ease-out forwards;
-}
-
-/* 流程节点动画 */
-.graph-node {
-  transition: transform 0.3s ease;
-}
-
-.graph-node:hover {
-  transform: scale(1.1);
-}
-
-.center-node {
-  transition: transform 0.3s ease;
-}
-
-.center-node:hover {
-  transform: scale(1.05);
-}
-
-.animate-pulse-slow {
-  animation: pulse-slow 3s ease-in-out infinite;
-}
-
-@keyframes pulse-slow {
-  0%, 100% { box-shadow: 0 0 20px rgba(30, 107, 249, 0.3); }
-  50% { box-shadow: 0 0 40px rgba(30, 107, 249, 0.5); }
-}
-
-@keyframes draw-line {
-  0% { stroke-dashoffset: 100; }
-  100% { stroke-dashoffset: 0; }
-}
-
-.animate-draw-line {
-  stroke-dasharray: 100;
-  stroke-dashoffset: 100;
-  animation: draw-line 1.5s ease forwards;
-}
-
-</style>
-
 <template>
   <div class="p-6 min-h-screen">
+    <!-- 顶部导航 -->
     <div class="flex justify-between items-center mb-6">
       <div class="flex items-center gap-2">
         <i class="fa-solid fa-wand-magic-sparkles text-orange-500"></i>
         <span class="font-medium">Skills</span>
       </div>
-      <button @click="openCreate" class="bg-gradient-to-r from-primary-orange to-red-500 hover:from-orange-500 hover:to-red-600 text-white px-4 py-2 rounded-lg font-medium flex items-center gap-2 transition-all">
+      <button @click="openCreate" class="btn-primary">
         <i class="fa-solid fa-plus"></i>
         New Skill
       </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="searchQuery"
           type="text"
-          placeholder="Search skills..."
-          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"
+          placeholder="Search skills by name, type or description..."
+          class="search-input w-full"
         >
       </div>
       <el-select v-model="filterStatus" placeholder="Select" class="w-40" size="large">
@@ -335,57 +57,54 @@ const saveNewSkill = () => {
       </el-select>
     </div>
 
+    <!-- Skills 列表 -->
     <div class="bg-dark-700 rounded-xl overflow-hidden">
-      <table class="w-full">
+      <table v-if="filteredSkills.length > 0" class="w-full">
         <thead class="bg-dark-600">
           <tr>
             <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Skill Name</th>
-            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Type</th>
-            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Port</th>
-            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Status</th>
-            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Created</th>
-            <th class="text-right px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Type</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Category</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Port</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Tools</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Status</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Created</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="server in filteredServers()" :key="server.id" class="border-t border-dark-600 hover:bg-dark-600/50 transition-colors">
+          <tr v-for="skill in filteredSkills" :key="skill.id" class="table-row">
             <td class="px-5 py-4">
-              <div class="font-medium">{{ server.name }}</div>
-              <div class="text-sm text-gray-500">{{ server.description }}</div>
+              <div class="font-medium">{{ skill.name }}</div>
+              <div class="text-sm text-gray-500">{{ skill.description }}</div>
             </td>
-            <td class="px-5 py-4">
-              <span class="bg-dark-500 px-2 py-1 rounded text-sm">{{ server.type }}</span>
+            <td class="px-5 py-4 text-center">
+              <span class="bg-dark-500 px-2 py-1 rounded text-sm">{{ skill.type }}</span>
             </td>
-            <td class="px-5 py-4 text-gray-300">{{ server.port }}</td>
-            <td class="px-5 py-4">
-              <div class="flex items-center gap-2">
-                <span class="w-2 h-2 rounded-full" :class="statusClass(server.status)"></span>
-                <span class="capitalize text-sm">{{ server.status }}</span>
-              </div>
+            <td class="px-5 py-4 text-center">
+              <span class="text-gray-400 text-sm capitalize">{{ skill.category }}</span>
             </td>
-            <td class="px-5 py-4 text-gray-400 text-sm">{{ server.createdAt }}</td>
+            <td class="px-5 py-4 text-center text-gray-400 text-sm">{{ skill.port }}</td>
+            <td class="px-5 py-4 text-center">
+              <span class="text-primary-cyan">{{ skill.tools }}</span>
+            </td>
+            <td class="px-5 py-4 text-center">
+              <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs" :class="skill.status === 'running' ? 'bg-green-500/20 text-green-400' : skill.status === 'error' ? 'bg-red-500/20 text-red-400' : 'bg-gray-500/20 text-gray-400'">
+                <span class="w-1.5 h-1.5 rounded-full" :class="statusClass(skill.status)"></span>
+                <span class="capitalize">{{ skill.status }}</span>
+              </span>
+            </td>
+            <td class="px-5 py-4 text-center text-gray-400 text-sm">{{ skill.createdAt }}</td>
             <td class="px-5 py-4">
-              <div class="flex items-center justify-end gap-2">
-                <button
-                  @click="toggleStatus(server)"
-                  class="p-2 rounded-lg hover:bg-dark-500 transition-colors"
-                  :title="server.status === 'running' ? 'Stop' : 'Start'"
-                >
-                  <i :class="['fa-solid', server.status === 'running' ? 'fa-stop' : 'fa-play', 'text-gray-400 hover:text-white']"></i>
+              <div class="flex items-center justify-center gap-2">
+                <button @click="toggleStatus(skill)" class="btn-icon" :title="skill.status === 'running' ? 'Stop' : 'Start'">
+                  <i :class="['fa-solid', skill.status === 'running' ? 'fa-stop' : 'fa-play', 'text-gray-400 hover:text-white']"></i>
                 </button>
-                <button
-                  @click="openEdit(server)"
-                  class="p-2 rounded-lg hover:bg-dark-500 transition-colors"
-                  title="Edit"
-                >
+                <button @click="openEdit(skill)" class="btn-icon" title="Edit">
                   <i class="fa-solid fa-pen text-gray-400 hover:text-white"></i>
                 </button>
-                <button
-                  @click="deleteServer(server.id)"
-                  class="p-2 rounded-lg hover:bg-dark-500 transition-colors"
-                  title="Delete"
-                >
-                  <i class="fa-solid fa-trash text-gray-400 hover:text-primary-danger"></i>
+                <button @click="deleteSkill(skill.id)" class="btn-icon" title="Delete">
+                  <i class="fa-solid fa-trash text-gray-400 hover:text-red-400"></i>
                 </button>
               </div>
             </td>
@@ -393,18 +112,23 @@ const saveNewSkill = () => {
         </tbody>
       </table>
 
-      <div v-if="filteredServers().length === 0" class="py-12 text-center text-gray-500">
-        <i class="fa-solid fa-code text-4xl mb-3"></i>
-        <p>No skills found</p>
+      <!-- 空状态 -->
+      <div v-else class="empty-box">
+        <div class="empty-icon">
+          <i class="fa-solid fa-wand-magic-sparkles"></i>
+        </div>
+        <p class="empty-text">No skills found</p>
+        <p class="empty-tip">Click "New Skill" to add a skill</p>
       </div>
     </div>
 
+    <!-- 编辑弹窗 -->
     <Teleport to="body">
-      <div v-if="isEditing" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
-        <div class="bg-dark-700 rounded-2xl w-full max-w-lg border border-dark-500 shadow-2xl">
+      <div v-if="isEditing" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50 modal-overlay">
+        <div class="bg-dark-700 rounded-2xl w-full max-w-lg border border-dark-500 shadow-2xl modal-content">
           <div class="flex items-center justify-between p-5 border-b border-dark-500">
             <h3 class="text-lg font-semibold">Edit Skill</h3>
-            <button @click="cancelEdit" class="text-gray-400 hover:text-white transition-colors">
+            <button @click="closeEdit" class="btn-icon">
               <i class="fa-solid fa-xmark text-xl"></i>
             </button>
           </div>
@@ -412,846 +136,104 @@ const saveNewSkill = () => {
           <div class="p-5 space-y-4">
             <div>
               <label class="block text-sm font-medium text-gray-300 mb-2">Skill Name</label>
-              <input
-                v-model="editForm.name"
-                type="text"
-                class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-primary-orange"
-              >
+              <input v-model="editForm.name" type="text" class="input-field">
             </div>
 
-            <div>
-              <label class="block text-sm font-medium text-gray-300 mb-2">Type</label>
-              <el-select v-model="editForm.type" placeholder="Select" class="w-full" size="large">
-                <el-option label="Linear" value="Linear" />
-                <el-option label="Google Maps" value="Google Maps" />
-                <el-option label="File System" value="File System" />
-                <el-option label="PostgreSQL" value="PostgreSQL" />
-                <el-option label="GitHub" value="GitHub" />
-              </el-select>
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-300 mb-2">Type</label>
+                <el-select v-model="editForm.type" placeholder="Select" class="w-full" size="large" popper-class="dark-select-dropdown">
+                  <el-option v-for="type in types" :key="type" :label="type" :value="type" />
+                </el-select>
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-300 mb-2">Category</label>
+                <el-select v-model="editForm.category" placeholder="Select" class="w-full" size="large" popper-class="dark-select-dropdown">
+                  <el-option v-for="cat in categories" :key="cat.value" :label="cat.label" :value="cat.value" />
+                </el-select>
+              </div>
             </div>
 
             <div>
               <label class="block text-sm font-medium text-gray-300 mb-2">Port</label>
-              <input
-                v-model="editForm.port"
-                type="number"
-                class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-primary-orange"
-              >
+              <input v-model="editForm.port" type="number" class="input-field">
             </div>
 
             <div>
               <label class="block text-sm font-medium text-gray-300 mb-2">Description</label>
-              <textarea
-                v-model="editForm.description"
-                rows="3"
-                class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-primary-orange resize-none"
-              ></textarea>
+              <textarea v-model="editForm.description" rows="2" class="input-field resize-none"></textarea>
             </div>
           </div>
 
           <div class="flex items-center justify-end gap-3 p-5 border-t border-dark-500">
-            <button
-              @click="cancelEdit"
-              class="px-4 py-2 rounded-lg bg-dark-600 text-gray-300 hover:bg-dark-500 transition-colors"
-            >
-              Cancel
-            </button>
-            <button
-              @click="saveEdit"
-              class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary-orange to-red-500 text-white hover:from-orange-500 hover:to-red-600 transition-all"
-            >
-              Save Changes
-            </button>
+            <button @click="closeEdit" class="btn-secondary">Cancel</button>
+            <button @click="saveEdit" class="btn-primary">Save Changes</button>
           </div>
         </div>
       </div>
     </Teleport>
 
-    <!-- 新建 Skill 模态框 -->
+    <!-- 新建弹窗 -->
     <Teleport to="body">
-      <div v-if="isCreating" class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-6">
-        <!-- 步骤1：基本信息 -->
-        <div v-if="createStep === 1" class="bg-dark-800 rounded-2xl w-full max-w-lg border border-dark-600 shadow-2xl overflow-hidden animate-modal-in">
-          <!-- 头部 -->
+      <div v-if="isCreating" class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4 modal-overlay">
+        <div class="bg-dark-800 rounded-2xl w-full max-w-lg border border-dark-600 shadow-2xl overflow-hidden modal-content">
           <div class="flex items-center justify-between p-5 border-b border-dark-600 bg-dark-700/50">
             <div class="flex items-center gap-3">
-              <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-orange to-red-500 flex items-center justify-center">
+              <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center">
                 <i class="fa-solid fa-wand-magic-sparkles text-white"></i>
               </div>
               <div>
                 <h3 class="text-xl font-semibold text-white">Create New Skill</h3>
-                <p class="text-sm text-gray-400">Step 1 of 2 - Basic Info</p>
+                <p class="text-sm text-gray-400">Configure your skill</p>
               </div>
             </div>
-            <button @click="closeCreate" class="text-gray-400 hover:text-white transition-all p-2 hover:bg-dark-600 rounded-lg">
+            <button @click="closeCreate" class="btn-icon">
               <i class="fa-solid fa-xmark text-xl"></i>
             </button>
           </div>
 
-          <!-- 表单内容 -->
-          <div class="p-6 space-y-5">
-            <!-- Skill Name -->
+          <div class="p-5 space-y-4">
             <div>
-              <label class="block text-sm font-medium text-gray-300 mb-2">
-                <i class="fa-solid fa-tag mr-2 text-primary-orange"></i>Skill Name
-              </label>
-              <input
-                v-model="newSkillForm.name"
-                type="text"
-                placeholder="Enter skill name..."
-                class="w-full bg-dark-600 border border-dark-500 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange transition-colors"
-              >
+              <label class="block text-sm font-medium text-gray-300 mb-2">Skill Name</label>
+              <input v-model="newSkillForm.name" type="text" placeholder="Enter skill name..." class="input-field">
             </div>
 
-            <!-- Description -->
-            <div>
-              <label class="block text-sm font-medium text-gray-300 mb-2">
-                <i class="fa-solid fa-align-left mr-2 text-gray-400"></i>Description
-              </label>
-              <textarea
-                v-model="newSkillForm.description"
-                rows="3"
-                placeholder="Describe your skill's purpose..."
-                class="w-full bg-dark-600 border border-dark-500 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange transition-colors resize-none"
-              ></textarea>
-            </div>
-
-            <!-- Model Selection -->
-            <div>
-              <label class="block text-sm font-medium text-gray-300 mb-2">
-                <i class="fa-solid fa-brain mr-2 text-primary-cyan"></i>Select Model
-              </label>
-              <el-select
-                v-model="newSkillForm.model"
-                placeholder="Select a model"
-                class="w-full"
-                size="large"
-                popper-class="dark-select-dropdown"
-              >
-                <el-option
-                  v-for="model in availableModels"
-                  :key="model.name"
-                  :label="`${model.name} (${model.provider})`"
-                  :value="model.name"
-                >
-                  <div class="flex items-center gap-2">
-                    <i :class="['fa-solid', model.icon, 'text-primary-cyan']"></i>
-                    <span class="text-white">{{ model.name }}</span>
-                    <span class="text-gray-500 text-sm">({{ model.provider }})</span>
-                  </div>
-                </el-option>
-              </el-select>
-            </div>
-          </div>
-
-          <!-- 底部按钮 -->
-          <div class="flex items-center justify-end gap-3 p-5 border-t border-dark-600 bg-dark-700/50">
-            <button
-              @click="closeCreate"
-              class="px-5 py-2.5 rounded-xl bg-dark-600 text-gray-300 hover:bg-dark-500 border border-dark-500 transition-all"
-            >
-              Cancel
-            </button>
-            <button
-              @click="goToStep2"
-              :disabled="!newSkillForm.name.trim()"
-              class="px-6 py-2.5 rounded-xl bg-gradient-to-r from-primary-orange to-red-500 text-white hover:from-orange-500 hover:to-red-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
-            >
-              Next Step
-              <i class="fa-solid fa-arrow-right"></i>
-            </button>
-          </div>
-        </div>
-
-        <!-- 步骤2：三栏配置界面 -->
-        <div v-else class="bg-dark-800 rounded-2xl w-full max-w-[95vw] h-[90vh] border border-dark-600 shadow-2xl overflow-hidden flex animate-modal-in relative">
-          <!-- 顶部进度指示 -->
-          <div class="absolute top-0 left-0 right-0 h-1 bg-dark-700">
-            <div class="h-full bg-gradient-to-r from-primary-orange to-red-500 w-full"></div>
-          </div>
-
-          <!-- 左侧边栏：VS Code 风格文件管理器 -->
-          <div class="w-64 bg-dark-900 border-r border-dark-600 flex flex-col">
-            <!-- 头部 -->
-            <div class="p-3 border-b border-dark-600 flex items-center justify-between">
-              <button
-                @click="goBackToStep1"
-                class="flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
-              >
-                <i class="fa-solid fa-arrow-left text-sm"></i>
-                <span class="font-semibold text-white text-sm">Explorer</span>
-              </button>
-              <div class="flex items-center gap-1">
-                <button @click="showInlineNewFolderInput(null)" class="p-1.5 text-gray-500 hover:text-white hover:bg-dark-700 rounded transition-colors" title="New Folder">
-                  <i class="fa-solid fa-folder-plus text-sm"></i>
-                </button>
-                <button @click="showInlineNewFileInput(null)" class="p-1.5 text-gray-500 hover:text-white hover:bg-dark-700 rounded transition-colors" title="New File">
-                  <i class="fa-solid fa-file-circle-plus text-sm"></i>
-                </button>
-                <label class="p-1.5 text-gray-500 hover:text-white hover:bg-dark-700 rounded transition-colors cursor-pointer" title="Upload File">
-                  <i class="fa-solid fa-upload text-sm"></i>
-                  <input type="file" class="hidden" multiple @change="handleFileUpload($event, null)">
-                </label>
-              </div>
-            </div>
-
-            <!-- VS Code 风格文件树 -->
-            <div class="flex-1 overflow-y-auto py-2">
-              <!-- 根目录文件 -->
-              <div class="px-2">
-                <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-2 py-1">Workspace</div>
-                <div
-                  v-for="file in rootFiles"
-                  :key="file.id"
-                  @click="openFile(file)"
-                  @mouseenter="hoveringItem = file.id"
-                  @mouseleave="hoveringItem = null"
-                  class="flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer hover:bg-dark-700 group transition-colors"
-                  :class="{ 'bg-dark-700': hoveringItem === file.id }"
-                >
-                  <i :class="['fa-solid', file.icon, 'text-primary-cyan text-sm']"></i>
-                  <span class="text-sm text-gray-300 group-hover:text-white truncate flex-1">{{ file.name }}</span>
-                  <button
-                    @click.stop="deleteFile(file, null)"
-                    class="text-red-400 hover:text-red-300 p-1 rounded hover:bg-dark-600 transition-colors opacity-0 group-hover:opacity-100"
-                    title="Delete File"
-                  >
-                    <i class="fa-solid fa-trash text-xs"></i>
-                  </button>
-                </div>
-
-                <!-- 根目录新建文件夹/文件按钮 -->
-                <div v-if="inlineCreatingFolderId === 'root'" class="flex items-center gap-2 px-2 py-1">
-                  <i class="fa-solid fa-folder text-yellow-400 text-sm"></i>
-                  <input
-                    v-model="inlineNewFolderName"
-                    type="text"
-                    placeholder="Folder name"
-                    class="flex-1 bg-dark-700 border border-dark-500 rounded px-2 py-0.5 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-primary-cyan"
-                    @keyup.enter="confirmInlineCreateFolder"
-                    @blur="confirmInlineCreateFolder"
-                    @keyup.escape="cancelInlineCreateFolder"
-                    autofocus
-                  >
-                </div>
-                <div v-else-if="inlineCreatingFileId === 'root'" class="flex items-center gap-2 px-2 py-1">
-                  <i class="fa-solid fa-file text-gray-400 text-sm"></i>
-                  <input
-                    v-model="inlineNewFileName"
-                    type="text"
-                    placeholder="File name"
-                    class="flex-1 bg-dark-700 border border-dark-500 rounded px-2 py-0.5 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-primary-cyan"
-                    @keyup.enter="confirmInlineCreateFile"
-                    @blur="confirmInlineCreateFile"
-                    @keyup.escape="cancelInlineCreateFile"
-                    autofocus
-                  >
-                </div>
-                <div v-else class="flex items-center gap-2 px-2 py-1">
-                  <button
-                    @click="showInlineNewFolderInput(null)"
-                    class="flex items-center gap-1 text-xs text-gray-500 hover:text-white transition-colors"
-                  >
-                    <i class="fa-solid fa-folder-plus"></i>
-                    <span>New Folder</span>
-                  </button>
-                  <button
-                    @click="showInlineNewFileInput(null)"
-                    class="flex items-center gap-1 text-xs text-gray-500 hover:text-white transition-colors"
-                  >
-                    <i class="fa-solid fa-file-circle-plus"></i>
-                    <span>New File</span>
-                  </button>
-                </div>
-              </div>
-
-              <!-- 文件夹列表 -->
-              <div class="mt-2">
-                <div
-                  v-for="folder in fileTree"
-                  :key="folder.id"
-                  class=""
-                >
-                  <!-- 文件夹标题 -->
-                  <div
-                    @click.stop="selectFolder(folder.id)"
-                    @mouseenter="hoveringItem = folder.id"
-                    @mouseleave="hoveringItem = null"
-                    class="flex items-center gap-2 px-2 py-1.5 cursor-pointer hover:bg-dark-700 group transition-colors"
-                    :class="{ 'bg-dark-700': hoveringItem === folder.id || selectedFolder === folder.id }"
-                  >
-                    <i
-                      @click.stop="toggleFolder(folder)"
-                      :class="['fa-solid', folder.expanded ? 'fa-chevron-down' : 'fa-chevron-right', 'text-gray-500 text-xs']"
-                    ></i>
-                    <i
-                      @click.stop="toggleFolder(folder)"
-                      :class="['fa-solid', folder.expanded ? 'fa-folder-open' : 'fa-folder', 'text-yellow-400 text-sm']"
-                    ></i>
-                    <span
-                      class="text-sm text-gray-300 group-hover:text-white font-medium flex-1"
-                    >{{ folder.name }}</span>
-                    <!-- 选中状态指示器 -->
-                    <span v-if="selectedFolder === folder.id" class="text-xs text-primary-cyan">Selected</span>
-                    <button
-                      @click.stop="deleteFolder(folder)"
-                      class="text-red-400 hover:text-red-300 p-1 rounded hover:bg-dark-600 transition-colors opacity-0 group-hover:opacity-100"
-                      title="Delete Folder"
-                    >
-                      <i class="fa-solid fa-trash text-xs"></i>
-                    </button>
-                  </div>
-
-                  <!-- 文件夹内的文件 -->
-                  <div v-if="folder.expanded || selectedFolder === folder.id" class="ml-4">
-                    <div
-                      v-for="child in folder.children"
-                      :key="child.id"
-                      @click="openFile(child as FileItem)"
-                      @mouseenter="hoveringItem = child.id"
-                      @mouseleave="hoveringItem = null"
-                      class="flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer hover:bg-dark-700 group transition-colors"
-                      :class="{ 'bg-dark-700': hoveringItem === child.id }"
-                    >
-                      <i :class="['fa-solid', (child as FileItem).icon, 'text-gray-400 text-sm']"></i>
-                      <span class="text-sm text-gray-300 group-hover:text-white truncate flex-1">{{ child.name }}</span>
-                      <button
-                        @click.stop="deleteFile(child as FileItem, folder.id)"
-                        class="text-red-400 hover:text-red-300 p-1 rounded hover:bg-dark-600 transition-colors opacity-0 group-hover:opacity-100"
-                        title="Delete File"
-                      >
-                        <i class="fa-solid fa-trash text-xs"></i>
-                      </button>
-                    </div>
-                    <!-- 文件夹内新建文件夹/文件按钮或内联输入框 -->
-                    <div v-if="inlineCreatingFolderId === folder.id" class="flex items-center gap-2 px-2 py-1">
-                      <i class="fa-solid fa-folder text-yellow-400 text-xs"></i>
-                      <input
-                        v-model="inlineNewFolderName"
-                        type="text"
-                        placeholder="Folder name"
-                        class="flex-1 bg-dark-700 border border-dark-500 rounded px-2 py-0.5 text-xs text-white placeholder-gray-500 focus:outline-none focus:border-primary-cyan"
-                        @keyup.enter="confirmInlineCreateFolder"
-                        @blur="confirmInlineCreateFolder"
-                        @keyup.escape="cancelInlineCreateFolder"
-                        autofocus
-                      >
-                    </div>
-                    <div v-else-if="inlineCreatingFileId === folder.id" class="flex items-center gap-2 px-2 py-1">
-                      <i class="fa-solid fa-file text-gray-400 text-xs"></i>
-                      <input
-                        v-model="inlineNewFileName"
-                        type="text"
-                        placeholder="File name"
-                        class="flex-1 bg-dark-700 border border-dark-500 rounded px-2 py-0.5 text-xs text-white placeholder-gray-500 focus:outline-none focus:border-primary-cyan"
-                        @keyup.enter="confirmInlineCreateFile"
-                        @blur="confirmInlineCreateFile"
-                        @keyup.escape="cancelInlineCreateFile"
-                        autofocus
-                      >
-                    </div>
-                    <div v-else class="flex items-center gap-2 px-2 py-1">
-                      <button
-                        @click.stop="showInlineNewFolderInput(folder.id)"
-                        class="flex items-center gap-1 text-xs text-gray-500 hover:text-white transition-colors"
-                        :class="selectedFolder === folder.id ? '' : 'opacity-0 group-hover:opacity-100'"
-                        title="New Folder"
-                      >
-                        <i class="fa-solid fa-folder-plus"></i>
-                        <span>New Folder</span>
-                      </button>
-                      <button
-                        @click.stop="showInlineNewFileInput(folder.id)"
-                        class="flex items-center gap-1 text-xs text-gray-500 hover:text-white transition-colors"
-                        :class="selectedFolder === folder.id ? '' : 'opacity-0 group-hover:opacity-100'"
-                      >
-                        <i class="fa-solid fa-plus"></i>
-                        <span>New File</span>
-                      </button>
-                      <label
-                        class="flex items-center gap-1 text-xs text-gray-500 hover:text-white transition-colors cursor-pointer"
-                        :class="selectedFolder === folder.id ? '' : 'opacity-0 group-hover:opacity-100'"
-                        title="Upload File"
-                      >
-                        <i class="fa-solid fa-upload"></i>
-                        <input type="file" class="hidden" multiple @change="handleFileUpload($event, folder.id)">
-                      </label>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- 底部操作 -->
-            <div class="p-3 border-t border-dark-600">
-              <button
-                @click="generateGraph"
-                :disabled="isGeneratingGraph || isGraphGenerated"
-                class="w-full bg-gradient-to-r from-primary-orange to-red-500 hover:from-orange-500 hover:to-red-600 text-white font-medium py-2 px-3 rounded-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                <i :class="['fa-solid fa-sitemap', isGraphGenerated ? 'text-green-400' : '']"></i>
-                {{ isGraphGenerated ? '流程已生成' : (isGeneratingGraph ? '生成中...' : '生成流程') }}
-              </button>
-            </div>
-          </div>
-
-          <!-- 中间：流程视图 -->
-          <div class="flex-1 relative overflow-hidden" style="background: linear-gradient(135deg, #0a0e1a 0%, #0f172a 50%, #0a0e1a 100%);">
-            <!-- 未生成流程时的提示 -->
-            <div v-if="!isGraphGenerated && !isGeneratingGraph" class="absolute inset-0 flex flex-col items-center justify-center z-10">
-              <div class="w-24 h-24 rounded-2xl bg-dark-700 flex items-center justify-center mb-4">
-                <i class="fa-solid fa-sitemap text-4xl text-gray-600"></i>
-              </div>
-              <p class="text-gray-500 text-sm">点击左侧按钮生成流程</p>
-            </div>
-
-            <!-- 生成中的加载动画 - 现代化设计 -->
-            <div v-else-if="isGeneratingGraph" class="absolute inset-0 flex flex-col items-center justify-center z-10">
-              <!-- 现代化加载动画 -->
-              <div class="flex flex-col items-center">
-                <!-- 多层旋转环 + 脉冲点 -->
-                <div class="relative w-24 h-24 mb-8">
-                  <!-- 外环 -->
-                  <div class="absolute inset-0 border-2 border-primary-cyan/20 rounded-full"></div>
-                  <div class="absolute inset-1 border-2 border-t-primary-cyan rounded-full loading-spin" style="animation-duration: 1.5s;"></div>
-                  <!-- 中环 - 反向 -->
-                  <div class="absolute inset-2 border-2 border-purple-500/30 rounded-full" style="animation: loading-spin 2s linear infinite reverse;"></div>
-                  <!-- 内环 -->
-                  <div class="absolute inset-4 border-2 border-primary-cyan/40 rounded-full" style="animation: loading-spin 1s linear infinite;"></div>
-                  <!-- 中心脉冲 -->
-                  <div class="absolute inset-0 flex items-center justify-center">
-                    <div class="w-3 h-3 bg-primary-cyan rounded-full animate-pulse"></div>
-                  </div>
-                  <!-- 周围脉冲点 -->
-                  <div class="absolute inset-0 flex items-center justify-center" style="animation: loading-dots 1.4s ease-in-out infinite both;">
-                    <span class="absolute w-2 h-2 bg-primary-cyan rounded-full" style="top: 10%;"></span>
-                    <span class="absolute w-2 h-2 bg-purple-500 rounded-full" style="right: 10%;"></span>
-                    <span class="absolute w-2 h-2 bg-primary-orange rounded-full" style="bottom: 10%;"></span>
-                    <span class="absolute w-2 h-2 bg-green-500 rounded-full" style="left: 10%;"></span>
-                  </div>
-                </div>
-
-                <!-- 文字 -->
-                <div class="text-center mb-6">
-                  <p class="text-white font-medium text-lg mb-2">正在生成执行流程</p>
-                  <p class="text-gray-400 text-sm">Building your workflow...</p>
-                </div>
-
-                <!-- 步骤指示器 -->
-                <div class="flex items-center gap-2 mb-6">
-                  <div class="flex items-center gap-1.5">
-                    <div class="w-2 h-2 rounded-full bg-primary-cyan loading-pulse"></div>
-                    <span class="text-xs text-gray-500">分析</span>
-                  </div>
-                  <div class="w-8 h-px bg-dark-600"></div>
-                  <div class="flex items-center gap-1.5">
-                    <div class="w-2 h-2 rounded-full bg-gray-600"></div>
-                    <span class="text-xs text-gray-500">规划</span>
-                  </div>
-                  <div class="w-8 h-px bg-dark-600"></div>
-                  <div class="flex items-center gap-1.5">
-                    <div class="w-2 h-2 rounded-full bg-gray-600"></div>
-                    <span class="text-xs text-gray-500">执行</span>
-                  </div>
-                  <div class="w-8 h-px bg-dark-600"></div>
-                  <div class="flex items-center gap-1.5">
-                    <div class="w-2 h-2 rounded-full bg-gray-600"></div>
-                    <span class="text-xs text-gray-500">完成</span>
-                  </div>
-                </div>
-
-                <!-- 进度条 -->
-                <div class="w-64">
-                  <div class="h-1 bg-dark-700 rounded-full overflow-hidden">
-                    <div class="h-full bg-gradient-to-r from-primary-cyan via-purple-500 to-primary-orange loading-progress-bar rounded-full"></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- 背景光效层 -->
-            <div v-show="isGraphGenerated" class="absolute inset-0 overflow-hidden">
-              <!-- 青色光晕 - 更亮更柔和 -->
-              <div class="absolute top-0 left-0 w-[500px] h-[500px] rounded-full opacity-30" style="background: radial-gradient(circle, rgba(0, 217, 255, 0.4) 0%, transparent 70%); filter: blur(80px);"></div>
-              <!-- 紫色光晕 - 更亮更柔和 -->
-              <div class="absolute bottom-0 right-0 w-[400px] h-[400px] rounded-full opacity-25" style="background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%); filter: blur(80px);"></div>
-              <!-- 中心补充光效 -->
-              <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full opacity-15" style="background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); filter: blur(100px);"></div>
-            </div>
-
-            <!-- 金字塔/树形流程图展示 -->
-            <div v-show="isGraphGenerated" class="w-full h-full relative z-10 overflow-auto p-6">
-              <!-- 流程标题 -->
-              <div class="sticky top-0 bg-slate-900/80 backdrop-blur-sm px-4 py-3 border-b border-slate-700/50 mb-6 z-20">
-                <div class="flex items-center justify-between">
-                  <div class="flex items-center gap-2">
-                    <i class="fa-solid fa-sitemap text-primary-cyan"></i>
-                    <span class="text-sm font-medium text-white">执行流程</span>
-                    <span class="px-2 py-0.5 rounded-full bg-slate-700 text-xs text-slate-300">4层</span>
-                  </div>
-                  <span class="text-xs text-slate-400">点击节点展开详情</span>
-                </div>
-              </div>
-
-              <!-- 树形结构 - 深邃版本 -->
-              <div class="flex flex-col items-center">
-                <!-- 递归渲染树节点 -->
-                <template v-for="node in workflowData" :key="node.id">
-                  <div class="w-full flex flex-col items-center">
-                    <!-- 根节点 - 深邃设计 -->
-                    <div
-                      @click="toggleNode(node)"
-                      class="w-full max-w-lg cursor-pointer group"
-                    >
-                      <!-- 外层发光效果 -->
-                      <div
-                        class="relative p-1 rounded-2xl transition-all duration-500"
-                        :class="node.expanded ? 'opacity-100' : 'opacity-80 hover:opacity-100'"
-                      >
-                        <!-- 内层背景 -->
-                        <div
-                          class="relative bg-slate-800/70 backdrop-blur-xl border rounded-2xl p-5 overflow-hidden"
-                          :class="node.expanded ? `border-2 ${node.borderColor} shadow-lg shadow-${node.color.includes('green') ? 'green' : node.color.includes('orange') ? 'orange' : node.color.includes('purple') ? 'purple' : 'cyan'}-500/30` : 'border-slate-600/50'"
-                        >
-                          <!-- 背景光效 -->
-                          <div
-                            class="absolute inset-0 opacity-30 transition-opacity duration-500"
-                            :class="node.expanded ? 'opacity-100' : 'opacity-0'"
-                            :style="`background: linear-gradient(135deg, ${node.color.includes('green') ? 'rgba(34, 197, 94, 0.15)' : node.color.includes('orange') ? 'rgba(249, 115, 22, 0.15)' : node.color.includes('purple') ? 'rgba(168, 85, 247, 0.15)' : 'rgba(6, 182, 212, 0.15)'} 0%, transparent 100%);`"
-                          ></div>
-
-                          <!-- 网格纹理 -->
-                          <div class="absolute inset-0 opacity-10" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 20px 20px;"></div>
-
-                          <!-- 主内容 -->
-                          <div class="relative flex items-center gap-4">
-                            <!-- 图标容器 - 多层设计 -->
-                            <div class="relative">
-                              <!-- 外层光晕 -->
-                              <div
-                                class="absolute inset-0 rounded-2xl blur-xl opacity-40 transition-all duration-500"
-                                :class="node.expanded ? 'scale-150 opacity-40' : 'scale-100 opacity-0'"
-                                :style="`background: ${node.color.includes('green') ? '#22c55e' : node.color.includes('orange') ? '#f97316' : node.color.includes('purple') ? '#a855f7' : '#06b6d4'};`"
-                              ></div>
-                              <!-- 图标框 -->
-                              <div
-                                class="relative w-16 h-16 rounded-2xl bg-gradient-to-br flex items-center justify-center border-2 backdrop-blur-sm"
-                                :class="[node.bgColor, node.borderColor]"
-                              >
-                                <i :class="['fa-solid', node.icon, node.color, 'text-2xl']"></i>
-                              </div>
-                              <!-- 状态指示点 -->
-                              <div
-                                class="absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-slate-700 flex items-center justify-center"
-                                :class="node.status === 'completed' ? 'bg-green-500' : node.status === 'processing' ? 'bg-yellow-500' : 'bg-gray-500'"
-                              >
-                                <i v-if="node.status === 'completed'" class="fa-solid fa-check text-[8px] text-white"></i>
-                              </div>
-                            </div>
-
-                            <!-- 文字内容 -->
-                            <div class="flex-1">
-                              <div class="flex items-center gap-2 mb-1">
-                                <h4 class="text-white font-bold text-lg tracking-wide">{{ node.name }}</h4>
-                                <span
-                                  class="px-2.5 py-1 rounded-full text-xs font-semibold uppercase tracking-wider backdrop-blur-sm"
-                                  :class="[
-                                    node.status === 'completed' ? 'bg-green-500/30 text-green-400 border border-green-500/50' :
-                                    node.status === 'processing' ? 'bg-yellow-500/30 text-yellow-400 border border-yellow-500/50' :
-                                    'bg-slate-500/30 text-slate-300 border border-slate-500/50'
-                                  ]"
-                                >
-                                  {{ node.status === 'completed' ? '✓ 完成' : node.status === 'processing' ? '◐ 进行中' : '○ 待处理' }}
-                                </span>
-                              </div>
-                              <p class="text-slate-300 text-sm">{{ node.description }}</p>
-                              <!-- 底部信息 -->
-                              <div class="flex items-center gap-4 mt-2 text-xs text-slate-400">
-                                <span class="flex items-center gap-1">
-                                  <i class="fa-solid fa-layer-group"></i>
-                                  Level 1
-                                </span>
-                                <span class="flex items-center gap-1">
-                                  <i class="fa-solid fa-code-branch"></i>
-                                  {{ node.children?.length || 0 }} 个子任务
-                                </span>
-                              </div>
-                            </div>
-
-                            <!-- 展开箭头 -->
-                            <div
-                              v-if="node.children && node.children.length > 0"
-                              class="flex items-center justify-center w-8 h-8 rounded-lg bg-slate-700/50 border border-slate-600"
-                            >
-                              <i
-                                :class="['fa-solid fa-chevron-down text-slate-300 transition-transform duration-300', node.expanded ? 'rotate-180' : '']"
-                              ></i>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <!-- 连接线 + 子节点 -->
-                    <div v-if="node.expanded && node.children" class="w-full flex flex-col items-center mt-1">
-                      <!-- 垂直连接线 - 复杂设计 -->
-                      <div class="relative flex flex-col items-center">
-                        <!-- 主线 -->
-                        <div class="w-0.5 h-8 bg-gradient-to-b from-green-500/40 to-purple-500/40"></div>
-                        <!-- 发光点 -->
-                        <div class="absolute top-1/2 w-2 h-2 rounded-full bg-cyan-400 shadow-lg shadow-cyan-400/40"></div>
-                      </div>
-
-                      <!-- 子节点容器 -->
-                      <div class="w-full flex justify-center gap-6">
-                        <div v-for="(child, idx) in node.children" :key="child.id" class="flex-1 flex flex-col items-center max-w-md">
-                          <!-- 水平连接线 -->
-                          <div class="w-full h-0.5 bg-gradient-to-r from-transparent via-purple-500/40 to-transparent mb-3"></div>
-
-                          <!-- 子节点 - 深邃设计 -->
-                          <div
-                            @click.stop="toggleNode(child)"
-                            class="w-full cursor-pointer group"
-                          >
-                            <div
-                              class="relative p-0.5 rounded-xl transition-all duration-300"
-                              :class="child.expanded ? 'opacity-100' : 'opacity-80 hover:opacity-100'"
-                            >
-                              <div
-                                class="relative bg-slate-800/60 backdrop-blur-xl border rounded-xl p-4"
-                                :class="child.expanded ? `border-2 ${child.borderColor}` : 'border-slate-600/50'"
-                              >
-                                <!-- 背景微光 -->
-                                <div
-                                  class="absolute inset-0 opacity-20 rounded-xl"
-                                  :style="`background: linear-gradient(135deg, ${child.color.includes('green') ? 'rgba(34, 197, 94, 0.2)' : child.color.includes('orange') ? 'rgba(249, 115, 22, 0.2)' : child.color.includes('yellow') ? 'rgba(234, 179, 8, 0.2)' : 'rgba(6, 182, 212, 0.2)'} 0%, transparent 100%);`"
-                                ></div>
-
-                                <div class="relative flex items-center gap-3">
-                                  <!-- 图标 -->
-                                  <div class="relative">
-                                    <div
-                                      class="w-12 h-12 rounded-xl bg-gradient-to-br flex items-center justify-center border"
-                                      :class="[child.bgColor, child.borderColor]"
-                                    >
-                                      <i :class="['fa-solid', child.icon, child.color, 'text-xl']"></i>
-                                    </div>
-                                    <!-- 序号标签 -->
-                                    <div class="absolute -top-2 -left-2 w-5 h-5 rounded-full bg-slate-700 border border-slate-500 flex items-center justify-center text-[10px] text-slate-300 font-bold">
-                                      {{ idx + 1 }}
-                                    </div>
-                                  </div>
-
-                                  <!-- 文字 -->
-                                  <div class="flex-1 min-w-0">
-                                    <div class="flex items-center gap-2 mb-0.5">
-                                      <h5 class="text-white font-semibold">{{ child.name }}</h5>
-                                      <span
-                                        v-if="child.children && child.children.length > 0"
-                                        class="px-1.5 py-0.5 rounded bg-slate-700 text-slate-300 text-xs"
-                                      >
-                                        {{ child.children.length }}
-                                      </span>
-                                    </div>
-                                    <p class="text-slate-400 text-xs truncate">{{ child.description }}</p>
-                                  </div>
-
-                                  <!-- 箭头 -->
-                                  <i
-                                    v-if="child.children && child.children.length > 0"
-                                    :class="['fa-solid fa-chevron-down text-slate-400 text-xs transition-transform duration-300', child.expanded ? 'rotate-180' : '']"
-                                  ></i>
-                                </div>
-                              </div>
-                            </div>
-
-                            <!-- 孙子节点 -->
-                            <div v-if="child.expanded && child.children" class="mt-2 ml-4 space-y-2">
-                              <div
-                                v-for="(grandchild, gidx) in child.children"
-                                :key="grandchild.id"
-                                class="relative pl-4 border-l-2 border-slate-600/50"
-                              >
-                                <!-- 连接点 -->
-                                <div class="absolute -left-1 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-slate-500"></div>
-
-                                <div class="flex items-center gap-3 p-2 rounded-lg bg-slate-700/30 hover:bg-slate-700/60 transition-colors cursor-pointer border border-transparent hover:border-slate-500">
-                                  <div
-                                    class="w-8 h-8 rounded-lg bg-gradient-to-br flex items-center justify-center border"
-                                    :class="[grandchild.bgColor, grandchild.borderColor]"
-                                  >
-                                    <i :class="['fa-solid', grandchild.icon, grandchild.color, 'text-sm']"></i>
-                                  </div>
-                                  <div class="flex-1 min-w-0">
-                                    <h6 class="text-white font-medium text-sm">{{ grandchild.name }}</h6>
-                                    <p class="text-slate-400 text-xs truncate">{{ grandchild.description }}</p>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </template>
-              </div>
-            </div>
-
-            <!-- 底部提示 -->
-            <div v-show="isGraphGenerated" class="absolute bottom-4 left-1/2 -translate-x-1/2 bg-slate-800/80 backdrop-blur-sm border border-slate-600/50 rounded-lg px-4 py-2 text-xs text-slate-300 shadow-lg">
-              <i class="fa-solid fa-sitemap mr-1 text-primary-cyan"></i>
-              金字塔结构 · 4层执行流程 · 点击展开
-            </div>
-          </div>
-
-          <!-- 右侧：对话面板 -->
-          <!-- 悬浮图标按钮 -->
-          <button
-            v-if="!isChatOpen"
-            @click="toggleChat"
-            class="absolute right-4 bottom-4 w-14 h-14 rounded-full bg-gradient-to-br from-primary-cyan to-purple-500 flex items-center justify-center shadow-lg shadow-purple-500/30 hover:scale-110 transition-transform z-20"
-          >
-            <i class="fa-solid fa-robot text-white text-xl animate-bounce"></i>
-          </button>
-
-          <!-- 展开的对话面板 -->
-          <div
-            v-else
-            class="w-80 bg-dark-800 border-l border-dark-600 flex flex-col animate-slide-in"
-          >
-            <!-- 头部 -->
-            <div class="p-4 border-b border-dark-600 flex items-center justify-between">
-              <div class="flex items-center gap-2">
-                <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary-cyan to-purple-500 flex items-center justify-center">
-                  <i class="fa-solid fa-robot text-white text-sm"></i>
-                </div>
-                <div>
-                  <div class="font-medium text-white text-sm">AI Assistant</div>
-                  <div class="text-xs text-gray-500">Configure your skill</div>
-                </div>
-              </div>
-              <button @click="toggleChat" class="text-gray-400 hover:text-white transition-colors">
-                <i class="fa-solid fa-chevron-right"></i>
-              </button>
-            </div>
-
-            <!-- 对话内容 -->
-            <div class="flex-1 overflow-y-auto p-4 space-y-4">
-              <!-- AI 消息 -->
-              <div class="flex gap-3">
-                <div class="w-7 h-7 rounded-lg bg-gradient-to-br from-primary-cyan to-purple-500 flex items-center justify-center flex-shrink-0">
-                  <i class="fa-solid fa-robot text-white text-xs"></i>
-                </div>
-                <div class="bg-dark-700 rounded-2xl rounded-tl-none px-4 py-3 text-sm text-gray-300">
-                  <p>Hello! I'm your AI assistant. I can help you configure your skill by:</p>
-                  <ul class="mt-2 space-y-1 text-gray-400">
-                    <li>• Managing data files</li>
-                    <li>• Adding reference documents</li>
-                    <li>• Writing scripts</li>
-                  </ul>
-                  <p class="mt-2">What would you like to do?</p>
-                </div>
-              </div>
-
-              <!-- 用户消息 -->
-              <div v-for="msg in chatMessages" :key="msg.id" class="flex gap-3 flex-row-reverse">
-                <div class="w-7 h-7 rounded-lg bg-dark-600 flex items-center justify-center flex-shrink-0">
-                  <i class="fa-solid fa-user text-gray-400 text-xs"></i>
-                </div>
-                <div class="bg-dark-600 rounded-2xl rounded-tr-none px-4 py-3 text-sm text-white max-w-[80%]">
-                  {{ msg.text }}
-                </div>
-              </div>
-            </div>
-
-            <!-- 输入框 -->
-            <div class="p-4 border-t border-dark-600">
-              <div class="relative">
-                <input
-                  v-model="chatInput"
-                  type="text"
-                  placeholder="Ask AI to help..."
-                  class="w-full bg-dark-700 border border-dark-500 rounded-xl px-4 py-3 pr-12 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
-                  @keyup.enter="sendMessage"
-                >
-                <button
-                  @click="sendMessage"
-                  class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-lg bg-primary-orange text-white flex items-center justify-center hover:from-orange-500 hover:to-red-600 transition-all"
-                >
-                  <i class="fa-solid fa-paper-plane text-xs"></i>
-                </button>
-              </div>
-            </div>
-
-            <!-- 底部按钮 -->
-            <div class="p-3 border-t border-dark-600 flex gap-2">
-              <button
-                @click="closeCreate"
-                class="flex-1 py-2 rounded-lg bg-dark-700 text-gray-300 hover:bg-dark-600 text-sm transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                @click="saveNewSkill"
-                class="flex-1 py-2 rounded-lg bg-gradient-to-r from-primary-orange to-red-500 text-white hover:from-orange-500 hover:to-red-600 text-sm transition-all flex items-center justify-center gap-2"
-              >
-                <i class="fa-solid fa-check"></i>
-                Create
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Teleport>
-
-    <!-- 文件编辑弹窗 -->
-    <Teleport to="body">
-      <div v-if="isEditingFile" class="fixed inset-0 bg-black/80 flex items-center justify-center z-[60]">
-        <div :class="['bg-dark-800 rounded-2xl w-full max-w-5xl h-[85vh] border border-dark-600 shadow-2xl overflow-hidden flex flex-col', isEditingFileClosing ? 'animate-modal-out' : 'animate-modal-in']">
-          <!-- 头部 -->
-          <div class="flex items-center justify-between p-5 border-b border-dark-600 bg-dark-700/50">
-            <div class="flex items-center gap-3">
-              <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary-cyan to-purple-500 flex items-center justify-center">
-                <i class="fa-solid fa-file-edit text-white"></i>
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-300 mb-2">Type</label>
+                <el-select v-model="newSkillForm.type" placeholder="Select" class="w-full" size="large" popper-class="dark-select-dropdown">
+                  <el-option v-for="type in types" :key="type" :label="type" :value="type" />
+                </el-select>
               </div>
               <div>
-                <h3 class="text-lg font-semibold text-white">Edit File</h3>
-                <p class="text-sm text-gray-400">{{ editingFileName }}</p>
+                <label class="block text-sm font-medium text-gray-300 mb-2">Category</label>
+                <el-select v-model="newSkillForm.category" placeholder="Select" class="w-full" size="large" popper-class="dark-select-dropdown">
+                  <el-option v-for="cat in categories" :key="cat.value" :label="cat.label" :value="cat.value" />
+                </el-select>
               </div>
             </div>
-            <button @click="cancelFileEdit" class="text-gray-400 hover:text-white transition-all p-2 hover:bg-dark-600 rounded-lg">
-              <i class="fa-solid fa-xmark text-xl"></i>
-            </button>
+
+            <div>
+              <label class="block text-sm font-medium text-gray-300 mb-2">Port</label>
+              <input v-model="newSkillForm.port" type="number" placeholder="3000" class="input-field">
+            </div>
+
+            <div>
+              <label class="block text-sm font-medium text-gray-300 mb-2">Description</label>
+              <textarea v-model="newSkillForm.description" rows="2" placeholder="Describe this skill..." class="input-field resize-none"></textarea>
+            </div>
           </div>
 
-          <!-- 编辑器内容 -->
-          <div class="flex-1 p-5 overflow-hidden">
-            <textarea
-              v-model="editingFileContent"
-              class="w-full h-full bg-dark-900 border border-dark-500 rounded-xl p-4 text-sm text-gray-300 font-mono focus:outline-none focus:border-primary-cyan resize-none"
-              placeholder="File content..."
-            ></textarea>
-          </div>
-
-          <!-- 底部按钮 -->
           <div class="flex items-center justify-end gap-3 p-5 border-t border-dark-600 bg-dark-700/50">
-            <button
-              @click="cancelFileEdit"
-              class="px-5 py-2.5 rounded-xl bg-dark-600 text-gray-300 hover:bg-dark-500 border border-dark-500 transition-all"
-            >
-              Cancel
-            </button>
-            <button
-              @click="saveFileEdit"
-              class="px-6 py-2.5 rounded-xl bg-gradient-to-r from-primary-cyan to-purple-500 text-white hover:from-cyan-500 hover:to-purple-600 transition-all flex items-center gap-2"
-            >
-              <i class="fa-solid fa-save"></i>
-              Save Changes
-            </button>
+            <button @click="closeCreate" class="btn-secondary">Cancel</button>
+            <button @click="saveNewSkill" class="btn-primary">Create Skill</button>
           </div>
         </div>
       </div>
     </Teleport>
   </div>
 </template>
+
+<style scoped>
+/* 使用全局样式 */
+</style>
diff --git a/web/src/views/Tools.vue b/web/src/views/Tools.vue
new file mode 100644
index 0000000..0dc5394
--- /dev/null
+++ b/web/src/views/Tools.vue
@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import '@/views/database/database.css'
+
+interface Tool {
+  id: number
+  name: string
+  type: 'built-in' | 'custom' | 'mcp'
+  description: string
+  status: 'active' | 'inactive'
+  icon?: string
+  provider?: string
+  config?: object
+  createdAt: string
+}
+
+// Mock data for tools
+const builtInTools = ref<Tool[]>([
+  { id: 1, name: 'File Reader', type: 'built-in', description: 'Read files from the filesystem', status: 'active', icon: 'fa-file-lines', createdAt: '2025-01-15' },
+  { id: 2, name: 'Web Search', type: 'built-in', description: 'Search the web for information', status: 'active', icon: 'fa-globe', createdAt: '2025-01-15' },
+  { id: 3, name: 'Calculator', type: 'built-in', description: 'Perform mathematical calculations', status: 'active', icon: 'fa-calculator', createdAt: '2025-01-15' },
+  { id: 4, name: 'Code Executor', type: 'built-in', description: 'Execute code in a sandbox', status: 'active', icon: 'fa-code', createdAt: '2025-01-15' },
+  { id: 5, name: 'JSON Parser', type: 'built-in', description: 'Parse and validate JSON data', status: 'active', icon: 'fa-brackets-curly', createdAt: '2025-01-15' },
+])
+
+const customTools = ref<Tool[]>([
+  { id: 101, name: 'GitHub API', type: 'custom', description: 'Interact with GitHub REST API', status: 'active', icon: 'fa-github', provider: 'Custom', createdAt: '2025-03-01' },
+  { id: 102, name: 'Slack Notifier', type: 'custom', description: 'Send notifications to Slack', status: 'inactive', icon: 'fa-slack', provider: 'Custom', createdAt: '2025-03-05' },
+  { id: 103, name: 'Email Sender', type: 'custom', description: 'Send emails via SMTP', status: 'active', icon: 'fa-envelope', provider: 'Custom', createdAt: '2025-03-08' },
+])
+
+const mcpTools = ref<Tool[]>([
+  { id: 201, name: 'Puppeteer', type: 'mcp', description: 'Browser automation via Puppeteer', status: 'active', icon: 'fa-browser', provider: 'MCP Server', createdAt: '2025-02-10' },
+  { id: 202, name: 'SQL Database', type: 'mcp', description: 'Execute SQL queries on databases', status: 'active', icon: 'fa-database', provider: 'MCP Server', createdAt: '2025-02-12' },
+  { id: 203, name: 'Filesystem', type: 'mcp', description: 'File operations via MCP', status: 'active', icon: 'fa-folder', provider: 'MCP Server', createdAt: '2025-02-15' },
+  { id: 204, name: 'Git Operations', type: 'mcp', description: 'Git repository operations', status: 'inactive', icon: 'fa-git-alt', provider: 'MCP Server', createdAt: '2025-02-18' },
+])
+
+const activeTab = ref<'built-in' | 'custom' | 'mcp'>('built-in')
+const searchQuery = ref('')
+const filterStatus = ref('all')
+const editingTool = ref<Tool | null>(null)
+const isEditing = ref(false)
+
+const editForm = ref({
+  name: '',
+  description: '',
+  provider: '',
+})
+
+// Statistics
+const stats = computed(() => ({
+  total: builtInTools.value.length + customTools.value.length + mcpTools.value.length,
+  active: [...builtInTools.value, ...customTools.value, ...mcpTools.value].filter(t => t.status === 'active').length,
+  builtIn: builtInTools.value.length,
+  custom: customTools.value.length,
+  mcp: mcpTools.value.length
+}))
+
+const currentTools = computed(() => {
+  let tools: Tool[] = []
+  switch (activeTab.value) {
+    case 'built-in': tools = builtInTools.value; break
+    case 'custom': tools = customTools.value; break
+    case 'mcp': tools = mcpTools.value; break
+  }
+  return tools.filter(tool => {
+    const matchSearch = tool.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+                       tool.description.toLowerCase().includes(searchQuery.value.toLowerCase())
+    const matchStatus = filterStatus.value === 'all' || tool.status === filterStatus.value
+    return matchSearch && matchStatus
+  })
+})
+
+const tabCounts = computed(() => ({
+  'built-in': builtInTools.value.length,
+  'custom': customTools.value.length,
+  'mcp': mcpTools.value.length,
+}))
+
+const openEdit = (tool: Tool) => {
+  editingTool.value = tool
+  editForm.value = { name: tool.name, description: tool.description, provider: tool.provider || '' }
+  isEditing.value = true
+}
+
+const saveEdit = () => {
+  if (editingTool.value) {
+    const targetArray = editingTool.value.type === 'built-in' ? builtInTools.value :
+                        editingTool.value.type === 'custom' ? customTools.value : mcpTools.value
+    const index = targetArray.findIndex(t => t.id === editingTool.value!.id)
+    if (index !== -1) targetArray[index] = { ...targetArray[index], ...editForm.value }
+  }
+  isEditing.value = false
+}
+
+const cancelEdit = () => { isEditing.value = false; editingTool.value = null }
+
+const toggleStatus = (tool: Tool) => {
+  const targetArray = tool.type === 'built-in' ? builtInTools.value :
+                      tool.type === 'custom' ? customTools.value : mcpTools.value
+  const found = targetArray.find(t => t.id === tool.id)
+  if (found) found.status = found.status === 'active' ? 'inactive' : 'active'
+}
+
+const deleteTool = (id: number) => {
+  switch (activeTab.value) {
+    case 'built-in': builtInTools.value = builtInTools.value.filter(t => t.id !== id); break
+    case 'custom': customTools.value = customTools.value.filter(t => t.id !== id); break
+    case 'mcp': mcpTools.value = mcpTools.value.filter(t => t.id !== id); break
+  }
+}
+</script>
+
+<template>
+  <div class="p-6 min-h-screen">
+    <!-- 顶部导航 -->
+    <div class="flex justify-between items-center mb-6">
+      <div class="flex items-center gap-2">
+        <i class="fa-solid fa-tools text-orange-500"></i>
+        <span class="font-medium">Tools</span>
+      </div>
+      <button class="btn-primary">
+        <i class="fa-solid fa-plus"></i>
+        New Tool
+      </button>
+    </div>
+
+    <!-- Tab 导航 -->
+    <div class="flex items-center gap-2 mb-6">
+      <button
+        v-for="(label, tab) in { 'built-in': 'Built-in', 'custom': 'Custom', 'mcp': 'MCP Servers' }"
+        :key="tab"
+        @click="activeTab = tab as 'built-in' | 'custom' | 'mcp'"
+        class="px-4 py-2 rounded-lg font-medium flex items-center gap-2 transition-all"
+        :class="activeTab === tab
+          ? 'bg-orange-500 text-white'
+          : 'bg-dark-700 text-gray-400 hover:bg-dark-600 hover:text-white'"
+      >
+        <span>{{ label }}</span>
+        <span class="px-2 py-0.5 rounded-full text-xs" :class="activeTab === tab ? 'bg-white/20' : 'bg-dark-600'">
+          {{ tabCounts[tab as keyof typeof tabCounts] }}
+        </span>
+      </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="searchQuery"
+          type="text"
+          placeholder="Search tools by name or description..."
+          class="search-input w-full"
+        >
+      </div>
+      <el-select v-model="filterStatus" placeholder="Select" class="w-40" size="large">
+        <el-option label="All Status" value="all" />
+        <el-option label="Active" value="active" />
+        <el-option label="Inactive" value="inactive" />
+      </el-select>
+    </div>
+
+    <!-- Tools 列表 -->
+    <div class="bg-dark-700 rounded-xl overflow-hidden">
+      <table v-if="currentTools.length > 0" class="w-full">
+        <thead class="bg-dark-600">
+          <tr>
+            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Tool Name</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Provider</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Status</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Created</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="tool in currentTools" :key="tool.id" class="table-row">
+            <td class="px-5 py-4">
+              <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg flex items-center justify-center" :class="tool.type === 'built-in' ? 'bg-orange-500/20' : tool.type === 'custom' ? 'bg-blue-500/20' : 'bg-emerald-500/20'">
+                  <i :class="['fa-solid', tool.icon || 'fa-cube', 'text-lg', tool.type === 'built-in' ? 'text-orange-400' : tool.type === 'custom' ? 'text-blue-400' : 'text-emerald-400']"></i>
+                </div>
+                <div>
+                  <div class="font-medium">{{ tool.name }}</div>
+                  <div class="text-sm text-gray-500">{{ tool.description }}</div>
+                </div>
+              </div>
+            </td>
+            <td class="px-5 py-4 text-center">
+              <span class="text-gray-400 text-sm">{{ tool.provider || (tool.type === 'built-in' ? 'System' : 'Custom') }}</span>
+            </td>
+            <td class="px-5 py-4 text-center">
+              <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs" :class="tool.status === 'active' ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-400'">
+                <span class="w-1.5 h-1.5 rounded-full" :class="tool.status === 'active' ? 'bg-green-500' : 'bg-gray-400'"></span>
+                <span class="capitalize">{{ tool.status }}</span>
+              </span>
+            </td>
+            <td class="px-5 py-4 text-center text-gray-400 text-sm">{{ tool.createdAt }}</td>
+            <td class="px-5 py-4">
+              <div class="flex items-center justify-center gap-2">
+                <button @click="toggleStatus(tool)" class="btn-icon" :title="tool.status === 'active' ? 'Deactivate' : 'Activate'">
+                  <i :class="['fa-solid', tool.status === 'active' ? 'fa-pause' : 'fa-play', 'text-gray-400 hover:text-white']"></i>
+                </button>
+                <button @click="openEdit(tool)" class="btn-icon" title="Edit">
+                  <i class="fa-solid fa-pen text-gray-400 hover:text-white"></i>
+                </button>
+                <button @click="deleteTool(tool.id)" class="btn-icon" title="Delete">
+                  <i class="fa-solid fa-trash text-gray-400 hover:text-red-400"></i>
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- 空状态 -->
+      <div v-else class="empty-box">
+        <div class="empty-icon">
+          <i class="fa-solid fa-tools"></i>
+        </div>
+        <p class="empty-text">No tools found</p>
+        <p class="empty-tip">Click "New Tool" to add a tool</p>
+      </div>
+    </div>
+
+    <!-- 编辑弹窗 -->
+    <Teleport to="body">
+      <div v-if="isEditing" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50 modal-overlay">
+        <div class="bg-dark-700 rounded-2xl w-full max-w-lg border border-dark-500 shadow-2xl modal-content">
+          <div class="flex items-center justify-between p-5 border-b border-dark-500">
+            <h3 class="text-lg font-semibold">Edit Tool</h3>
+            <button @click="cancelEdit" class="btn-icon">
+              <i class="fa-solid fa-xmark text-xl"></i>
+            </button>
+          </div>
+
+          <div class="p-5 space-y-4">
+            <div>
+              <label class="block text-sm font-medium text-gray-300 mb-2">Tool Name</label>
+              <input v-model="editForm.name" type="text" class="input-field">
+            </div>
+            <div v-if="activeTab !== 'built-in'">
+              <label class="block text-sm font-medium text-gray-300 mb-2">Provider</label>
+              <input v-model="editForm.provider" type="text" class="input-field">
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-300 mb-2">Description</label>
+              <textarea v-model="editForm.description" rows="3" class="input-field resize-none"></textarea>
+            </div>
+          </div>
+
+          <div class="flex items-center justify-end gap-3 p-5 border-t border-dark-500">
+            <button @click="cancelEdit" class="btn-secondary">Cancel</button>
+            <button @click="saveEdit" class="btn-primary">Save Changes</button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+/* 使用全局样式 */
+</style>
diff --git a/web/src/views/skill/useSkills.ts b/web/src/views/skill/useSkills.ts
new file mode 100644
index 0000000..47a9c67
--- /dev/null
+++ b/web/src/views/skill/useSkills.ts
@@ -0,0 +1,191 @@
+import { ref, computed } from 'vue'
+import { ElMessageBox } from 'element-plus'
+
+export interface Skill {
+  id: number
+  name: string
+  description: string
+  type: string
+  category: string
+  status: 'running' | 'stopped' | 'error'
+  port: number
+  createdAt: string
+  tools: number
+}
+
+export function useSkills() {
+  // Skill 数据
+  const skills = ref<Skill[]>([
+    { id: 1, name: 'Linear', description: 'Linear API integration for project management', type: 'API', category: 'api', status: 'running', port: 3001, createdAt: '2025-04-10', tools: 12 },
+    { id: 2, name: 'Google Maps', description: 'Google Maps API for location services', type: 'Google Maps', category: 'api', status: 'running', port: 3002, createdAt: '2025-04-08', tools: 8 },
+    { id: 3, name: 'File Explorer', description: 'File system explorer and editor', type: 'File System', category: 'filesystem', status: 'error', port: 3003, createdAt: '2025-04-05', tools: 15 },
+    { id: 4, name: 'PostgreSQL', description: 'PostgreSQL database operations', type: 'Database', category: 'database', status: 'running', port: 3004, createdAt: '2025-04-12', tools: 10 },
+    { id: 5, name: 'GitHub', description: 'GitHub API integration', type: 'GitHub', category: 'communication', status: 'stopped', port: 3005, createdAt: '2025-04-11', tools: 20 },
+    { id: 6, name: 'Slack', description: 'Slack messaging integration', type: 'Communication', category: 'communication', status: 'running', port: 3006, createdAt: '2025-04-09', tools: 6 },
+    { id: 7, name: 'OpenAI', description: 'OpenAI GPT models for AI conversations', type: 'AI/ML', category: 'ai', status: 'running', port: 3007, createdAt: '2025-04-07', tools: 5 },
+    { id: 8, name: 'MySQL', description: 'MySQL database operations', type: 'Database', category: 'database', status: 'stopped', port: 3008, createdAt: '2025-04-06', tools: 10 },
+  ])
+
+  // 搜索和筛选
+  const searchQuery = ref('')
+  const filterStatus = ref('all')
+
+  // 编辑状态
+  const isEditing = ref(false)
+  const isCreating = ref(false)
+  const editingSkill = ref<Skill | null>(null)
+
+  // 表单
+  const editForm = ref({
+    name: '',
+    type: '',
+    category: '',
+    port: 3000,
+    description: '',
+  })
+
+  const newSkillForm = ref({
+    name: '',
+    type: 'API',
+    category: 'api',
+    port: 3000,
+    description: '',
+  })
+
+  // 分类选项
+  const categories = [
+    { value: 'api', label: 'API' },
+    { value: 'database', label: 'Database' },
+    { value: 'filesystem', label: 'File System' },
+    { value: 'communication', label: 'Communication' },
+    { value: 'ai', label: 'AI/ML' },
+  ]
+
+  const types = ['API', 'Database', 'File System', 'Communication', 'AI/ML']
+
+  // 筛选
+  const filteredSkills = computed(() => {
+    return skills.value.filter(skill => {
+      const matchSearch = skill.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+                         skill.description.toLowerCase().includes(searchQuery.value.toLowerCase())
+      const matchStatus = filterStatus.value === 'all' || skill.status === filterStatus.value
+      return matchSearch && matchStatus
+    })
+  })
+
+  // 状态样式
+  const statusClass = (status: string) => {
+    switch (status) {
+      case 'running': return 'bg-green-500'
+      case 'stopped': return 'bg-gray-500'
+      case 'error': return 'bg-red-500'
+      default: return 'bg-gray-500'
+    }
+  }
+
+  // 打开创建弹窗
+  const openCreate = () => {
+    newSkillForm.value = { name: '', type: 'API', category: 'api', port: 3000, description: '' }
+    isCreating.value = true
+  }
+
+  // 关闭创建弹窗
+  const closeCreate = () => {
+    isCreating.value = false
+  }
+
+  // 保存新技能
+  const saveNewSkill = () => {
+    const newId = Math.max(...skills.value.map(s => s.id)) + 1
+    skills.value.push({
+      id: newId,
+      name: newSkillForm.value.name,
+      description: newSkillForm.value.description,
+      type: newSkillForm.value.type,
+      category: newSkillForm.value.category,
+      status: 'stopped',
+      port: newSkillForm.value.port,
+      createdAt: new Date().toISOString().split('T')[0],
+      tools: 0,
+    })
+    isCreating.value = false
+  }
+
+  // 打开编辑弹窗
+  const openEdit = (skill: Skill) => {
+    editingSkill.value = skill
+    editForm.value = {
+      name: skill.name,
+      type: skill.type,
+      category: skill.category,
+      port: skill.port,
+      description: skill.description,
+    }
+    isEditing.value = true
+  }
+
+  // 关闭编辑弹窗
+  const closeEdit = () => {
+    isEditing.value = false
+    editingSkill.value = null
+  }
+
+  // 保存编辑
+  const saveEdit = () => {
+    const index = skills.value.findIndex(s => s.id === editingSkill.value!.id)
+    if (index !== -1) {
+      skills.value[index] = {
+        ...skills.value[index],
+        name: editForm.value.name,
+        type: editForm.value.type,
+        category: editForm.value.category,
+        port: editForm.value.port,
+        description: editForm.value.description,
+      }
+    }
+    isEditing.value = false
+  }
+
+  // 切换状态
+  const toggleStatus = (skill: Skill) => {
+    if (skill.status === 'running') skill.status = 'stopped'
+    else if (skill.status === 'stopped') skill.status = 'running'
+  }
+
+  // 删除技能
+  const deleteSkill = (id: number) => {
+    ElMessageBox.confirm('Are you sure you want to delete this skill?', 'Confirm Delete', {
+      confirmButtonText: 'Delete',
+      cancelButtonText: 'Cancel',
+      type: 'warning',
+    }).then(() => {
+      skills.value = skills.value.filter(s => s.id !== id)
+    }).catch(() => {})
+  }
+
+  return {
+    // State
+    skills,
+    searchQuery,
+    filterStatus,
+    isEditing,
+    isCreating,
+    editingSkill,
+    editForm,
+    newSkillForm,
+    categories,
+    types,
+    // Computed
+    filteredSkills,
+    // Methods
+    statusClass,
+    openCreate,
+    closeCreate,
+    saveNewSkill,
+    openEdit,
+    closeEdit,
+    saveEdit,
+    toggleStatus,
+    deleteSkill,
+  }
+}