From e9678e32d337030f58d8a7e98e02d2cfdd58335d Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Mon, 27 Apr 2026 09:26:16 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=88=A0=E9=99=A4=E6=97=A0?=
 =?UTF-8?q?=E7=94=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/McpServersComponent.vue    | 1182 --------------
 web/src/components/SkillsManagerComponent.vue | 1406 -----------------
 web/src/components/SubAgentsComponent.vue     |  595 -------
 web/src/components/ToolsManagerComponent.vue  |  292 ----
 .../components/extensions/McpDetailView.vue   |  139 ++
 5 files changed, 139 insertions(+), 3475 deletions(-)
 delete mode 100644 web/src/components/McpServersComponent.vue
 delete mode 100644 web/src/components/SkillsManagerComponent.vue
 delete mode 100644 web/src/components/SubAgentsComponent.vue
 delete mode 100644 web/src/components/ToolsManagerComponent.vue

diff --git a/web/src/components/McpServersComponent.vue b/web/src/components/McpServersComponent.vue
deleted file mode 100644
index 0e1b8194..00000000
--- a/web/src/components/McpServersComponent.vue
+++ /dev/null
@@ -1,1182 +0,0 @@
-<template>
-  <div class="mcp-servers extension-page-root">
-    <div v-if="loading" class="loading-bar-wrapper">
-      <div class="loading-bar"></div>
-    </div>
-    <div class="layout-wrapper" :class="{ 'content-loading': loading }">
-      <!-- 左侧：MCP 列表 -->
-      <div class="sidebar-list">
-        <!-- 搜索框 -->
-        <div class="sidebar-toolbar">
-          <div class="search-box">
-            <a-input
-              v-model:value="searchQuery"
-              placeholder="搜索 MCP..."
-              allow-clear
-              class="search-input"
-            >
-              <template #prefix><Search :size="14" class="text-muted" /></template>
-            </a-input>
-          </div>
-
-          <a-tooltip title="刷新 MCP">
-            <a-button class="sidebar-tool" :disabled="loading" @click="fetchServers">
-              <RotateCw :size="14" />
-            </a-button>
-          </a-tooltip>
-        </div>
-
-        <!-- 统计信息 -->
-        <!-- <div class="stats-section" v-if="filteredServers.length > 0">
-          <span class="stats-text">
-            {{ filteredServers.length }} 个 MCP： HTTP: {{ httpCount }} · SSE: {{ sseCount }} · StdIO: {{ stdioCount }}
-          </span>
-        </div> -->
-
-        <!-- MCP 列表 -->
-        <div class="list-container">
-          <div
-            v-if="!filteredEnabledServers.length && !filteredDisabledServers.length"
-            class="empty-text"
-          >
-            <a-empty :image="false" :description="searchQuery ? '无匹配 MCP' : '暂无 MCP'" />
-          </div>
-          <div v-if="filteredEnabledServers.length" class="list-section-title">已添加</div>
-          <template
-            v-for="(server, index) in filteredEnabledServers"
-            :key="`enabled-${server.name}`"
-          >
-            <div
-              class="list-item extension-list-item"
-              :class="{ active: currentServer?.name === server.name }"
-              @click="selectServer(server)"
-            >
-              <div class="item-main-row">
-                <div class="item-header">
-                  <span class="server-icon">{{ server.icon || '🔌' }}</span>
-                  <span class="item-name">{{ server.name }}</span>
-                </div>
-                <div class="item-status">
-                  <span class="status-chip status-chip-success">已添加</span>
-                  <button
-                    type="button"
-                    class="inline-hover-action"
-                    @click.stop="handleInlineRemoveServer(server)"
-                  >
-                    {{ getServerActionLabel(server) }}
-                  </button>
-                </div>
-              </div>
-              <div class="item-details">
-                <span class="item-desc">{{ server.description || '暂无描述' }}</span>
-                <div class="item-tags">
-                  <span v-if="server.created_by === 'system'" class="source-tag builtin">内置</span>
-                </div>
-              </div>
-            </div>
-            <div
-              v-if="index < filteredEnabledServers.length - 1 || filteredDisabledServers.length > 0"
-              class="list-separator"
-            ></div>
-          </template>
-          <div v-if="filteredDisabledServers.length" class="list-section-title">可添加</div>
-          <template
-            v-for="(server, index) in filteredDisabledServers"
-            :key="`disabled-${server.name}`"
-          >
-            <div
-              class="list-item extension-list-item"
-              :class="{ active: currentServer?.name === server.name, disabled: true }"
-              @click="selectServer(server)"
-            >
-              <div class="item-main-row">
-                <div class="item-header">
-                  <span class="server-icon">{{ server.icon || '🔌' }}</span>
-                  <span class="item-name">{{ server.name }}</span>
-                </div>
-                <div class="item-status">
-                  <button
-                    type="button"
-                    class="skill-inline-action skill-inline-action-primary"
-                    @click.stop="handleSetServerEnabled(server, true)"
-                  >
-                    添加
-                  </button>
-                </div>
-              </div>
-              <div class="item-details">
-                <span class="item-desc">{{ server.description || '暂无描述' }}</span>
-                <div class="item-tags">
-                  <span v-if="server.created_by === 'system'" class="source-tag builtin">内置</span>
-                </div>
-              </div>
-            </div>
-            <div v-if="index < filteredDisabledServers.length - 1" class="list-separator"></div>
-          </template>
-        </div>
-      </div>
-
-      <!-- 右侧：详情面板 -->
-      <div class="main-panel">
-        <div v-if="!currentServer" class="unselected-state">
-          <div class="hint-box">
-            <Plug :size="40" class="text-muted" />
-            <p>请在左侧选择 MCP 进行操作</p>
-          </div>
-        </div>
-
-        <template v-else>
-          <div class="panel-top-bar">
-            <h2 class="panel-title-row">
-              <span class="server-icon-lg">{{ currentServer.icon || '🔌' }}</span>
-              <span
-                ><strong>{{ currentServer.name }}</strong></span
-              >
-            </h2>
-            <div class="panel-actions">
-              <a-space :size="8">
-                <button
-                  type="button"
-                  @click="handleTestServer(currentServer)"
-                  :disabled="testLoading === currentServer.name"
-                  class="lucide-icon-btn extension-panel-action extension-panel-action-secondary"
-                >
-                  <Zap :size="14" v-if="testLoading !== currentServer.name" />
-                  <span>测试</span>
-                </button>
-                <button
-                  type="button"
-                  @click="showEditModal(currentServer)"
-                  class="lucide-icon-btn extension-panel-action extension-panel-action-secondary"
-                >
-                  <Pencil :size="14" />
-                  <span>编辑</span>
-                </button>
-                <button
-                  type="button"
-                  @click="handleDangerAction(currentServer)"
-                  :class="[
-                    'lucide-icon-btn',
-                    'extension-panel-action',
-                    getServerActionTone(currentServer)
-                  ]"
-                >
-                  <Plus v-if="currentServer.enabled === false" :size="14" />
-                  <Trash2 v-else :size="14" />
-                  <span>{{ getServerActionLabel(currentServer) }}</span>
-                </button>
-              </a-space>
-            </div>
-          </div>
-
-          <!-- Tab 导航 -->
-          <a-tabs v-model:activeKey="detailTab" class="detail-tabs">
-            <a-tab-pane key="general">
-              <template #tab>
-                <span class="tab-title"><Settings2 :size="14" />信息</span>
-              </template>
-              <div class="tab-content">
-                <div class="info-grid">
-                  <div class="info-item" v-if="currentServer.description">
-                    <label>描述</label>
-                    <span>{{ currentServer.description }}</span>
-                  </div>
-                  <div class="info-item">
-                    <label>传输类型</label>
-                    <span>
-                      <a-tag :color="getTransportColor(currentServer.transport)">
-                        {{ currentServer.transport }}
-                      </a-tag>
-                    </span>
-                  </div>
-                  <div
-                    class="info-item"
-                    v-if="Array.isArray(currentServer.tags) && currentServer.tags.length > 0"
-                  >
-                    <label>标签</label>
-                    <span>
-                      <a-tag v-for="tag in currentServer.tags" :key="tag">{{ tag }}</a-tag>
-                    </span>
-                  </div>
-
-                  <!-- HTTP 类型显示 URL -->
-                  <template
-                    v-if="
-                      currentServer.transport === 'streamable_http' ||
-                      currentServer.transport === 'sse'
-                    "
-                  >
-                    <div class="info-item" v-if="currentServer.url">
-                      <label>MCP URL</label>
-                      <span class="code-inline text-break-all">{{ currentServer.url }}</span>
-                    </div>
-                    <div
-                      class="info-item"
-                      v-if="currentServer.headers && Object.keys(currentServer.headers).length > 0"
-                    >
-                      <label>请求头</label>
-                      <pre class="code-pre">{{
-                        JSON.stringify(currentServer.headers, null, 2)
-                      }}</pre>
-                    </div>
-                    <div class="info-item" v-if="currentServer.timeout">
-                      <label>HTTP 超时</label>
-                      <span>{{ currentServer.timeout }} 秒</span>
-                    </div>
-                    <div class="info-item" v-if="currentServer.sse_read_timeout">
-                      <label>SSE 读取超时</label>
-                      <span>{{ currentServer.sse_read_timeout }} 秒</span>
-                    </div>
-                  </template>
-
-                  <!-- StdIO 类型显示 command/args -->
-                  <template v-if="currentServer.transport === 'stdio'">
-                    <div class="info-item" v-if="currentServer.command">
-                      <label>命令</label>
-                      <span class="code-inline">{{ currentServer.command }}</span>
-                    </div>
-                    <div
-                      class="info-item"
-                      v-if="currentServer.args && currentServer.args.length > 0"
-                    >
-                      <label>参数</label>
-                      <span>
-                        <a-tag v-for="(arg, index) in currentServer.args" :key="index" size="small">
-                          {{ arg }}
-                        </a-tag>
-                      </span>
-                    </div>
-                    <div
-                      class="info-item"
-                      v-if="currentServer.env && Object.keys(currentServer.env).length > 0"
-                    >
-                      <label>环境变量</label>
-                      <pre class="code-pre">{{ JSON.stringify(currentServer.env, null, 2) }}</pre>
-                    </div>
-                  </template>
-
-                  <div class="info-item">
-                    <label>创建时间</label>
-                    <span>{{ formatTime(currentServer.created_at) }}</span>
-                  </div>
-                  <div class="info-item">
-                    <label>更新时间</label>
-                    <span>{{ formatTime(currentServer.updated_at) }}</span>
-                  </div>
-                  <div class="info-item">
-                    <label>创建人</label>
-                    <span>{{ currentServer.created_by }}</span>
-                  </div>
-                </div>
-              </div>
-            </a-tab-pane>
-
-            <a-tab-pane key="tools">
-              <template #tab>
-                <span class="tab-title"><Wrench :size="14" />工具 ({{ tools.length }})</span>
-              </template>
-              <div class="tab-content tools-tab">
-                <div class="tools-toolbar">
-                  <a-input-search
-                    v-model:value="toolSearchText"
-                    placeholder="搜索工具..."
-                    style="width: 200px"
-                    allowClear
-                  />
-                  <a-button @click="fetchTools" :loading="toolsLoading" class="lucide-icon-btn">
-                    <RotateCw :size="14" />
-                    <span>刷新</span>
-                  </a-button>
-                </div>
-                <a-spin :spinning="toolsLoading">
-                  <div v-if="filteredTools.length === 0" class="empty-tools">
-                    <a-empty :description="toolsError || '暂无工具'" />
-                  </div>
-                  <div v-else class="tools-list">
-                    <div
-                      v-for="tool in filteredTools"
-                      :key="tool.name"
-                      class="tool-card"
-                      :class="{ disabled: !tool.enabled }"
-                    >
-                      <div class="tool-header">
-                        <div class="tool-info">
-                          <span class="tool-name">{{ tool.name }}</span>
-                          <a-tooltip :title="`ID: ${tool.id}`">
-                            <Info :size="14" class="info-icon" />
-                          </a-tooltip>
-                        </div>
-                        <div class="tool-actions">
-                          <a-switch
-                            :checked="tool.enabled"
-                            @change="handleToggleTool(tool)"
-                            :loading="toggleToolLoading === tool.name"
-                            size="small"
-                          />
-                          <a-tooltip title="复制工具名称">
-                            <a-button
-                              type="text"
-                              size="small"
-                              @click="copyToolName(tool.name)"
-                              class="lucide-icon-btn"
-                            >
-                              <Copy :size="14" />
-                            </a-button>
-                          </a-tooltip>
-                        </div>
-                      </div>
-                      <div class="tool-description" v-if="tool.description">
-                        {{ tool.description }}
-                      </div>
-                      <a-collapse
-                        v-if="tool.parameters && Object.keys(tool.parameters).length > 0"
-                        ghost
-                      >
-                        <a-collapse-panel key="params" header="参数">
-                          <div class="params-list">
-                            <div
-                              v-for="(param, paramName) in tool.parameters"
-                              :key="paramName"
-                              class="param-item"
-                            >
-                              <div class="param-header">
-                                <span class="param-name">{{ paramName }}</span>
-                                <span
-                                  class="param-required"
-                                  v-if="tool.required?.includes(paramName)"
-                                  >必填</span
-                                >
-                                <span class="param-type">{{ param.type || 'any' }}</span>
-                              </div>
-                              <div class="param-desc" v-if="param.description">
-                                {{ param.description }}
-                              </div>
-                            </div>
-                          </div>
-                        </a-collapse-panel>
-                      </a-collapse>
-                    </div>
-                  </div>
-                </a-spin>
-              </div>
-            </a-tab-pane>
-          </a-tabs>
-        </template>
-      </div>
-    </div>
-
-    <!-- 添加/编辑 MCP 模态框 -->
-    <a-modal
-      v-model:open="formModalVisible"
-      :title="editMode ? '编辑 MCP' : '添加 MCP'"
-      @ok="handleFormSubmit"
-      :confirmLoading="formLoading"
-      @cancel="formModalVisible = false"
-      :maskClosable="false"
-      width="560px"
-      class="server-modal"
-    >
-      <!-- 模式切换 -->
-      <div class="mode-switch">
-        <a-radio-group v-model:value="formMode" button-style="solid" size="small">
-          <a-radio-button value="form">表单模式</a-radio-button>
-          <a-radio-button value="json">JSON 模式</a-radio-button>
-        </a-radio-group>
-      </div>
-
-      <!-- 表单模式 -->
-      <a-form v-if="formMode === 'form'" layout="vertical" class="extension-form">
-        <a-form-item label="MCP 名称" required class="form-item">
-          <a-input
-            v-model:value="form.name"
-            placeholder="请输入 MCP 名称（唯一标识）"
-            :disabled="editMode"
-          />
-        </a-form-item>
-
-        <a-form-item label="描述" class="form-item">
-          <a-input v-model:value="form.description" placeholder="请输入 MCP 描述" />
-        </a-form-item>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="传输类型" required class="form-item">
-              <a-select v-model:value="form.transport">
-                <a-select-option value="streamable_http">streamable_http</a-select-option>
-                <a-select-option value="sse">sse</a-select-option>
-                <a-select-option value="stdio">stdio</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="图标" class="form-item">
-              <a-input v-model:value="form.icon" placeholder="输入 emoji，如 🧠" :maxlength="2" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <!-- HTTP 类型 -->
-        <template v-if="form.transport === 'streamable_http' || form.transport === 'sse'">
-          <a-form-item label="MCP URL" required class="form-item">
-            <a-input v-model:value="form.url" placeholder="https://example.com/mcp" />
-          </a-form-item>
-
-          <a-form-item label="HTTP 请求头" class="form-item">
-            <a-textarea
-              v-model:value="form.headersText"
-              placeholder='JSON 格式，如：{"Authorization": "Bearer xxx"}'
-              :rows="3"
-            />
-          </a-form-item>
-
-          <a-row :gutter="16">
-            <a-col :span="12">
-              <a-form-item label="HTTP 超时（秒）" class="form-item">
-                <a-input-number
-                  v-model:value="form.timeout"
-                  :min="1"
-                  :max="300"
-                  style="width: 100%"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="SSE 读取超时（秒）" class="form-item">
-                <a-input-number
-                  v-model:value="form.sse_read_timeout"
-                  :min="1"
-                  :max="300"
-                  style="width: 100%"
-                />
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </template>
-
-        <!-- StdIO 类型 -->
-        <template v-if="isStdioTransport">
-          <a-form-item label="命令" required class="form-item">
-            <a-input v-model:value="form.command" placeholder="例如：npx 或 /path/to/server" />
-          </a-form-item>
-
-          <a-form-item label="参数" class="form-item">
-            <a-select
-              v-model:value="form.args"
-              mode="tags"
-              placeholder="输入参数后回车添加，如：-m"
-              style="width: 100%"
-            />
-          </a-form-item>
-
-          <a-form-item label="环境变量" class="form-item">
-            <McpEnvEditor v-model="form.env" />
-          </a-form-item>
-        </template>
-
-        <a-form-item label="标签" class="form-item">
-          <a-select
-            v-model:value="form.tags"
-            mode="tags"
-            placeholder="输入标签后回车添加"
-            style="width: 100%"
-          />
-        </a-form-item>
-      </a-form>
-
-      <!-- JSON 模式 -->
-      <div v-else class="json-mode">
-        <a-textarea
-          v-model:value="jsonContent"
-          :rows="15"
-          placeholder='请输入 JSON 配置，格式如：
-{
-  "name": "my-server",
-  "transport": "streamable_http",
-  "url": "https://example.com/mcp",
-  "description": "MCP 描述",
-  "headers": {"Authorization": "Bearer xxx"},
-  "tags": ["工具", "AI"]
-}'
-          class="json-textarea"
-        />
-        <div class="json-actions">
-          <a-button size="small" @click="formatJson">格式化</a-button>
-          <a-button size="small" @click="parseJsonToForm">解析到表单</a-button>
-        </div>
-      </div>
-    </a-modal>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
-import { message, Modal } from 'ant-design-vue'
-import {
-  Search,
-  Plug,
-  Plus,
-  Zap,
-  Pencil,
-  Trash2,
-  RotateCw,
-  Info,
-  Copy,
-  Settings2,
-  Wrench
-} from 'lucide-vue-next'
-import { mcpApi } from '@/apis/mcp_api'
-import { formatFullDateTime } from '@/utils/time'
-import McpEnvEditor from './McpEnvEditor.vue'
-
-// 状态
-const loading = ref(false)
-const error = ref(null)
-const servers = ref([])
-const toggleLoading = ref(null)
-const testLoading = ref(null)
-const searchQuery = ref('')
-const currentServer = ref(null)
-const detailTab = ref('general')
-
-// 工具相关状态
-const tools = ref([])
-const toolsLoading = ref(false)
-const toolsError = ref(null)
-const toolSearchText = ref('')
-const toggleToolLoading = ref(null)
-
-// 表单相关
-const formModalVisible = ref(false)
-const formLoading = ref(false)
-const formMode = ref('form')
-const editMode = ref(false)
-const jsonContent = ref('')
-const form = reactive({
-  name: '',
-  description: '',
-  transport: 'streamable_http',
-  url: '',
-  command: '',
-  args: [],
-  env: null,
-  headersText: '',
-  timeout: null,
-  sse_read_timeout: null,
-  tags: [],
-  icon: ''
-})
-
-// 计算属性
-const filteredServers = computed(() => {
-  const sorted = [...servers.value].sort((a, b) => {
-    return String(a.name || '').localeCompare(String(b.name || ''), 'zh-Hans-CN', {
-      sensitivity: 'base',
-      numeric: true
-    })
-  })
-  if (!searchQuery.value) return sorted
-  const q = searchQuery.value.toLowerCase()
-  return sorted.filter(
-    (s) => s.name.toLowerCase().includes(q) || (s.description || '').toLowerCase().includes(q)
-  )
-})
-
-const filteredEnabledServers = computed(() =>
-  filteredServers.value.filter((item) => !!item.enabled)
-)
-const filteredDisabledServers = computed(() =>
-  filteredServers.value.filter((item) => !item.enabled)
-)
-
-const isStdioTransport = computed(
-  () =>
-    String(form.transport || '')
-      .trim()
-      .toLowerCase() === 'stdio'
-)
-
-// 工具相关计算属性
-const filteredTools = computed(() => {
-  if (!toolSearchText.value) return tools.value
-  const search = toolSearchText.value.toLowerCase()
-  return tools.value.filter(
-    (t) =>
-      t.name.toLowerCase().includes(search) ||
-      (t.description && t.description.toLowerCase().includes(search))
-  )
-})
-
-// 获取 MCP 列表
-const fetchServers = async () => {
-  try {
-    loading.value = true
-    error.value = null
-    const result = await mcpApi.getMcpServers()
-    if (result.success) {
-      servers.value = result.data || []
-      const defaultList = filteredEnabledServers.value.length
-        ? filteredEnabledServers.value
-        : filteredDisabledServers.value
-      if (!currentServer.value && defaultList.length > 0) {
-        selectServer(defaultList[0])
-      } else if (currentServer.value) {
-        const latest = servers.value.find((s) => s.name === currentServer.value.name)
-        if (latest) {
-          currentServer.value = latest
-        }
-      }
-    } else {
-      error.value = result.message || '获取 MCP 列表失败'
-    }
-  } catch (err) {
-    console.error('获取 MCP 列表失败:', err)
-    error.value = err.message || '获取 MCP 列表失败'
-  } finally {
-    loading.value = false
-  }
-}
-
-// 获取工具列表
-const fetchTools = async () => {
-  if (!currentServer.value) return
-
-  try {
-    toolsLoading.value = true
-    toolsError.value = null
-    const result = await mcpApi.getMcpServerTools(currentServer.value.name)
-    if (result.success) {
-      tools.value = result.data || []
-    } else {
-      toolsError.value = result.message || '获取工具列表失败'
-      tools.value = []
-    }
-  } catch (err) {
-    console.error('获取工具列表失败:', err)
-    toolsError.value = err.message || '获取工具列表失败'
-    tools.value = []
-  } finally {
-    toolsLoading.value = false
-  }
-}
-
-// 切换工具启用状态
-const handleToggleTool = async (tool) => {
-  if (!currentServer.value) return
-
-  try {
-    toggleToolLoading.value = tool.name
-    const result = await mcpApi.toggleMcpServerTool(currentServer.value.name, tool.name)
-    if (result.success) {
-      message.success(result.message)
-      const targetTool = tools.value.find((t) => t.name === tool.name)
-      if (targetTool) {
-        targetTool.enabled = result.enabled
-      }
-    } else {
-      message.error(result.message || '操作失败')
-    }
-  } catch (err) {
-    console.error('切换工具状态失败:', err)
-    message.error(err.message || '操作失败')
-  } finally {
-    toggleToolLoading.value = null
-  }
-}
-
-// 复制工具名称
-const copyToolName = async (name) => {
-  try {
-    await navigator.clipboard.writeText(name)
-    message.success('已复制到剪贴板')
-  } catch {
-    message.error('复制失败')
-  }
-}
-
-// 格式化时间
-const formatTime = (timeStr) => formatFullDateTime(timeStr)
-
-// 获取传输类型颜色
-const getTransportColor = (transport) => {
-  const colors = {
-    sse: 'orange',
-    stdio: 'green',
-    streamable_http: 'blue'
-  }
-  return colors[transport] || 'blue'
-}
-
-// 选择 MCP
-const selectServer = (server) => {
-  currentServer.value = server
-  detailTab.value = 'general'
-  fetchTools()
-}
-
-// 显示添加模态框
-const showAddModal = () => {
-  editMode.value = false
-  formMode.value = 'form'
-  Object.assign(form, {
-    name: '',
-    description: '',
-    transport: 'streamable_http',
-    url: '',
-    command: '',
-    args: [],
-    env: null,
-    headersText: '',
-    timeout: null,
-    sse_read_timeout: null,
-    tags: [],
-    icon: ''
-  })
-  jsonContent.value = ''
-  formModalVisible.value = true
-}
-
-const applyServerToForm = (server) => {
-  editMode.value = true
-  formMode.value = 'form'
-  Object.assign(form, {
-    name: server.name,
-    description: server.description || '',
-    transport: server.transport,
-    url: server.url || '',
-    command: server.command || '',
-    args: server.args || [],
-    env: server.env || null,
-    headersText: server.headers ? JSON.stringify(server.headers, null, 2) : '',
-    timeout: server.timeout,
-    sse_read_timeout: server.sse_read_timeout,
-    tags: server.tags || [],
-    icon: server.icon || ''
-  })
-  formModalVisible.value = true
-}
-
-// 显示编辑模态框
-const showEditModal = async (server) => {
-  try {
-    const result = await mcpApi.getMcpServer(server.name)
-    if (result.success && result.data) {
-      applyServerToForm(result.data)
-      return
-    }
-  } catch (err) {
-    console.error('获取 MCP 详情失败，回退使用列表数据:', err)
-  }
-  applyServerToForm(server)
-}
-
-// 处理表单提交
-const handleFormSubmit = async () => {
-  try {
-    formLoading.value = true
-
-    let data
-    if (formMode.value === 'json') {
-      try {
-        data = JSON.parse(jsonContent.value)
-      } catch {
-        message.error('JSON 格式错误')
-        return
-      }
-    } else {
-      // 解析 headers
-      let headers = null
-      if (form.headersText.trim()) {
-        try {
-          headers = JSON.parse(form.headersText)
-        } catch {
-          message.error('请求头 JSON 格式错误')
-          return
-        }
-      }
-
-      data = {
-        name: form.name,
-        description: form.description || null,
-        transport: form.transport,
-        url: form.url || null,
-        command: form.command || null,
-        args: form.args.length > 0 ? form.args : null,
-        env: form.env,
-        headers,
-        timeout: form.timeout || null,
-        sse_read_timeout: form.sse_read_timeout || null,
-        tags: form.tags.length > 0 ? form.tags : null,
-        icon: form.icon || null
-      }
-    }
-
-    // 校验必填字段
-    if (!data.name?.trim()) {
-      message.error('MCP 名称不能为空')
-      return
-    }
-    if (!data.transport) {
-      message.error('请选择传输类型')
-      return
-    }
-    // HTTP 类型校验 URL
-    if (['sse', 'streamable_http'].includes(data.transport)) {
-      if (!data.url?.trim()) {
-        message.error('HTTP 类型必须填写 MCP URL')
-        return
-      }
-    }
-    // StdIO 类型校验 command
-    if (data.transport === 'stdio') {
-      if (!data.command?.trim()) {
-        message.error('StdIO 类型必须填写命令')
-        return
-      }
-    }
-
-    if (editMode.value) {
-      const result = await mcpApi.updateMcpServer(data.name, data)
-      if (result.success) {
-        message.success('MCP 更新成功')
-      } else {
-        message.error(result.message || '更新失败')
-        return
-      }
-    } else {
-      const result = await mcpApi.createMcpServer(data)
-      if (result.success) {
-        message.success('MCP 创建成功')
-      } else {
-        message.error(result.message || '创建失败')
-        return
-      }
-    }
-
-    formModalVisible.value = false
-    await fetchServers()
-  } catch (err) {
-    console.error('操作失败:', err)
-    message.error(err.message || '操作失败')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-// 更新 MCP 启用状态
-const handleSetServerEnabled = async (server, enabled) => {
-  try {
-    toggleLoading.value = server.name
-    const result = await mcpApi.updateMcpServerStatus(server.name, enabled)
-    if (result.success) {
-      message.success(result.message || `MCP 已${enabled ? '添加' : '移除'}`)
-      await fetchServers()
-      if (!enabled && currentServer.value?.name === server.name) {
-        tools.value = []
-      }
-    } else {
-      message.error(result.message || '操作失败')
-    }
-  } catch (err) {
-    console.error('更新状态失败:', err)
-    message.error(err.message || '操作失败')
-  } finally {
-    toggleLoading.value = null
-  }
-}
-
-// 测试 MCP 连接
-const handleTestServer = async (server) => {
-  try {
-    testLoading.value = server.name
-    const result = await mcpApi.testMcpServer(server.name)
-    if (result.success) {
-      message.success(result.message)
-    } else {
-      message.warning(result.message || '连接失败')
-    }
-  } catch (err) {
-    console.error('测试连接失败:', err)
-    message.error(err.message || '测试失败')
-  } finally {
-    testLoading.value = null
-  }
-}
-
-const handleDangerAction = async (server) => {
-  if (server.enabled === false) {
-    await handleSetServerEnabled(server, true)
-    return
-  }
-  if (server.created_by === 'system') {
-    await handleSetServerEnabled(server, false)
-    return
-  }
-  confirmDeleteServer(server)
-}
-
-const handleInlineRemoveServer = async (server) => {
-  if (server.created_by === 'system') {
-    await handleSetServerEnabled(server, false)
-    return
-  }
-  confirmDeleteServer(server)
-}
-
-const getServerActionLabel = (server) => {
-  if (server?.enabled === false) {
-    return '添加'
-  }
-  return server?.created_by === 'system' ? '移除' : '删除'
-}
-
-const getServerActionTone = (server) => {
-  return server?.enabled === false
-    ? 'extension-panel-action-primary'
-    : 'extension-panel-action-danger'
-}
-
-// 确认删除 MCP
-const confirmDeleteServer = (server) => {
-  Modal.confirm({
-    title: '确认删除 MCP',
-    content: `确定要删除 MCP "${server.name}" 吗？此操作不可撤销。`,
-    okText: '删除',
-    okType: 'danger',
-    cancelText: '取消',
-    async onOk() {
-      try {
-        const result = await mcpApi.deleteMcpServer(server.name)
-        if (result.success) {
-          message.success('MCP 删除成功')
-          await fetchServers()
-        } else {
-          message.error(result.message || '删除失败')
-        }
-      } catch (err) {
-        console.error('删除失败:', err)
-        message.error(err.message || '删除失败')
-      }
-    }
-  })
-}
-
-// 格式化 JSON
-const formatJson = () => {
-  try {
-    const obj = JSON.parse(jsonContent.value)
-    jsonContent.value = JSON.stringify(obj, null, 2)
-  } catch {
-    message.error('JSON 格式错误，无法格式化')
-  }
-}
-
-// 解析 JSON 到表单
-const parseJsonToForm = () => {
-  try {
-    const obj = JSON.parse(jsonContent.value)
-    Object.assign(form, {
-      name: obj.name || '',
-      description: obj.description || '',
-      transport: obj.transport || 'streamable_http',
-      url: obj.url || '',
-      command: obj.command || '',
-      args: obj.args || [],
-      env: obj.env || null,
-      headersText: obj.headers ? JSON.stringify(obj.headers, null, 2) : '',
-      timeout: obj.timeout || null,
-      sse_read_timeout: obj.sse_read_timeout || null,
-      tags: obj.tags || [],
-      icon: obj.icon || ''
-    })
-    formMode.value = 'form'
-    message.success('已解析到表单')
-  } catch {
-    message.error('JSON 格式错误')
-  }
-}
-
-// 初始化
-onMounted(() => {
-  fetchServers()
-})
-
-// 暴露方法给父组件
-defineExpose({
-  fetchServers,
-  showAddModal
-})
-</script>
-
-<style lang="less" scoped>
-@import '@/assets/css/extensions.less';
-
-.stats-section {
-  padding: 8px 12px;
-  .stats-text {
-    font-size: 12px;
-    color: var(--gray-500);
-  }
-}
-
-.list-item {
-  .server-icon {
-    font-size: 18px;
-  }
-}
-
-/* 工具列表样式 */
-.tools-tab {
-  .tools-toolbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
-  }
-
-  .empty-tools {
-    padding: 40px 0;
-  }
-
-  .tools-list {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-
-    .tool-card {
-      background: var(--gray-0);
-      border: 1px solid var(--gray-150);
-      border-radius: 8px;
-      padding: 12px 16px;
-      transition: all 0.2s ease;
-
-      &:hover {
-        border-color: var(--gray-200);
-      }
-
-      &.disabled {
-        opacity: 0.6;
-      }
-
-      .tool-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 8px;
-
-        .tool-info {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-
-          .tool-name {
-            font-weight: 600;
-            font-size: 14px;
-            color: var(--gray-900);
-          }
-
-          .info-icon {
-            color: var(--gray-400);
-            cursor: pointer;
-            &:hover {
-              color: var(--gray-600);
-            }
-          }
-        }
-
-        .tool-actions {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-        }
-      }
-
-      .tool-description {
-        font-size: 13px;
-        color: var(--gray-600);
-        line-height: 1.4;
-        margin-bottom: 8px;
-      }
-
-      :deep(.ant-collapse) {
-        background: transparent;
-        border: none;
-
-        .ant-collapse-header {
-          padding: 8px 0;
-          font-size: 13px;
-          color: var(--gray-600);
-        }
-        .ant-collapse-content-box {
-          padding: 0;
-        }
-      }
-
-      .params-list {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-
-        .param-item {
-          background: var(--gray-50);
-          padding: 8px 12px;
-          border-radius: 4px;
-
-          .param-header {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 4px;
-
-            .param-name {
-              font-weight: 500;
-              font-size: 13px;
-              color: var(--gray-900);
-              font-family: @mono-font;
-            }
-            .param-required {
-              font-size: 11px;
-              color: var(--color-error-500);
-              background: var(--color-error-50);
-              padding: 1px 6px;
-              border-radius: 3px;
-            }
-            .param-type {
-              font-size: 11px;
-              color: var(--gray-500);
-              background: var(--gray-100);
-              padding: 1px 6px;
-              border-radius: 3px;
-              font-family: @mono-font;
-            }
-          }
-
-          .param-desc {
-            font-size: 12px;
-            color: var(--gray-600);
-            line-height: 1.4;
-          }
-        }
-      }
-    }
-  }
-}
-
-/* 模态框样式 */
-.server-modal {
-  .mode-switch {
-    margin-bottom: 16px;
-    text-align: right;
-  }
-  .json-mode {
-    .json-textarea {
-      font-family: @mono-font;
-      font-size: 13px;
-    }
-    .json-actions {
-      margin-top: 12px;
-      display: flex;
-      gap: 8px;
-    }
-  }
-}
-</style>
diff --git a/web/src/components/SkillsManagerComponent.vue b/web/src/components/SkillsManagerComponent.vue
deleted file mode 100644
index fde94556..00000000
--- a/web/src/components/SkillsManagerComponent.vue
+++ /dev/null
@@ -1,1406 +0,0 @@
-<template>
-  <div class="skills-manager-container extension-page-root">
-    <div v-if="loading" class="loading-bar-wrapper">
-      <div class="loading-bar"></div>
-    </div>
-    <div class="layout-wrapper" :class="{ 'content-loading': loading }">
-      <!-- 左侧：技能列表 -->
-      <div class="sidebar-list">
-        <div class="sidebar-toolbar">
-          <div class="search-box">
-            <a-input
-              v-model:value="searchQuery"
-              placeholder="搜索技能..."
-              allow-clear
-              class="search-input"
-            >
-              <template #prefix><Search :size="14" class="text-muted" /></template>
-            </a-input>
-          </div>
-
-          <a-tooltip title="刷新 Skills">
-            <a-button class="sidebar-tool" :disabled="loading" @click="fetchSkills">
-              <RotateCw :size="14" />
-            </a-button>
-          </a-tooltip>
-        </div>
-
-        <div class="list-container">
-          <div
-            v-if="
-              filteredInstalledSkills.length === 0 && filteredUninstalledBuiltinSkills.length === 0
-            "
-            class="empty-text"
-          >
-            <a-empty :image="false" description="无匹配技能" />
-          </div>
-          <div v-if="filteredInstalledSkills.length" class="list-section-title">已添加 Skills</div>
-          <template
-            v-for="(skill, index) in filteredInstalledSkills"
-            :key="`installed-${skill.slug}`"
-          >
-            <div
-              class="list-item extension-list-item"
-              :class="{ active: currentSkill?.slug === skill.slug }"
-              @click="selectSkill(skill)"
-            >
-              <div class="item-main-row">
-                <div class="item-header">
-                  <BookMarked :size="16" class="item-icon" />
-                  <span class="item-name">{{ skill.name }}</span>
-                </div>
-                <div class="item-status">
-                  <span class="status-chip status-chip-success">已添加</span>
-                  <button
-                    type="button"
-                    class="inline-hover-action"
-                    @click.stop="confirmDeleteSkill(skill)"
-                  >
-                    移除
-                  </button>
-                </div>
-              </div>
-              <div class="item-details">
-                <span class="item-desc">{{ skill.description || '暂无描述' }}</span>
-                <div class="item-tags">
-                  <span class="source-tag" :class="{ builtin: skill.sourceType === 'builtin' }">{{
-                    skill.sourceLabel
-                  }}</span>
-                </div>
-              </div>
-            </div>
-            <div
-              v-if="
-                index < filteredInstalledSkills.length - 1 ||
-                filteredUninstalledBuiltinSkills.length > 0
-              "
-              class="list-separator"
-            ></div>
-          </template>
-
-          <div v-if="filteredUninstalledBuiltinSkills.length" class="list-section-title">
-            可添加 Skills
-          </div>
-          <template
-            v-for="(skill, index) in filteredUninstalledBuiltinSkills"
-            :key="`builtin-${skill.slug}`"
-          >
-            <div
-              class="list-item extension-list-item"
-              :class="{ active: currentSkill?.slug === skill.slug }"
-              @click="selectSkill(skill)"
-            >
-              <div class="item-main-row">
-                <div class="item-header">
-                  <BookMarked :size="16" class="item-icon" />
-                  <span class="item-name">{{ skill.name }}</span>
-                </div>
-                <div class="item-status">
-                  <button
-                    type="button"
-                    class="skill-inline-action skill-inline-action-primary"
-                    @click.stop="handleInstallBuiltin(skill)"
-                  >
-                    安装
-                  </button>
-                </div>
-              </div>
-              <div class="item-details">
-                <span class="item-desc">{{ skill.description || '暂无描述' }}</span>
-                <div class="item-tags">
-                  <span class="source-tag builtin">内置</span>
-                </div>
-              </div>
-            </div>
-            <div
-              v-if="index < filteredUninstalledBuiltinSkills.length - 1"
-              class="list-separator"
-            ></div>
-          </template>
-        </div>
-      </div>
-
-      <!-- 右侧：详情面板 -->
-      <div class="main-panel">
-        <div v-if="!currentSkill" class="unselected-state">
-          <div class="hint-box">
-            <FileCode :size="40" class="text-muted" />
-            <p>请在左侧选择技能包进行编辑</p>
-          </div>
-        </div>
-
-        <template v-else>
-          <div class="panel-top-bar">
-            <div class="panel-title-stack">
-              <h2>{{ currentSkill.name }}</h2>
-              <!-- <code>{{ currentSkill.slug }}</code> -->
-            </div>
-            <div class="panel-actions">
-              <a-space :size="8">
-                <span
-                  v-if="currentSkillStatusLabel"
-                  class="panel-status-chip"
-                  :class="{ warning: currentSkillStatusTone === 'warning' }"
-                >
-                  {{ currentSkillStatusLabel }}
-                </span>
-                <button
-                  v-if="currentSkill.is_builtin_spec && currentSkill.status === 'not_installed'"
-                  type="button"
-                  @click="handleInstallBuiltin(currentSkill)"
-                  class="lucide-icon-btn extension-panel-action extension-panel-action-primary"
-                >
-                  <span>安装</span>
-                </button>
-                <button
-                  v-if="currentSkill.is_builtin_spec && currentSkill.status === 'update_available'"
-                  type="button"
-                  @click="handleUpdateBuiltin(currentSkill)"
-                  class="lucide-icon-btn extension-panel-action extension-panel-action-secondary"
-                >
-                  <span>更新</span>
-                </button>
-                <button
-                  v-if="isInstalledSkill"
-                  type="button"
-                  @click="handleExport"
-                  class="lucide-icon-btn extension-panel-action extension-panel-action-secondary"
-                >
-                  <Download :size="14" />
-                  <span>导出</span>
-                </button>
-                <button
-                  v-if="isInstalledSkill"
-                  type="button"
-                  @click="confirmDeleteSkill"
-                  class="lucide-icon-btn extension-panel-action extension-panel-action-danger"
-                >
-                  <Trash2 :size="14" />
-                  <span>{{ isBuiltinInstalledSkill ? '卸载' : '删除' }}</span>
-                </button>
-              </a-space>
-            </div>
-          </div>
-
-          <div v-if="!isInstalledSkill" class="builtin-uninstalled-state">
-            <h3>{{ currentSkill.description }}</h3>
-            <p>版本 {{ currentSkill.version }}</p>
-            <a-button type="primary" @click="handleInstallBuiltin(currentSkill)"
-              >安装内置 Skill</a-button
-            >
-          </div>
-
-          <a-tabs v-else v-model:activeKey="activeTab" class="minimal-tabs">
-            <a-tab-pane key="editor">
-              <template #tab>
-                <span class="tab-title"><FileText :size="14" />代码管理</span>
-              </template>
-              <div class="workspace">
-                <div class="tree-container">
-                  <div class="tree-header">
-                    <span class="label">项目结构</span>
-                    <div class="tree-actions">
-                      <a-tooltip v-if="!isBuiltinInstalledSkill" title="新建文件"
-                        ><button @click="openCreateModal(false)"><FilePlus :size="14" /></button
-                      ></a-tooltip>
-                      <a-tooltip v-if="!isBuiltinInstalledSkill" title="新建目录"
-                        ><button @click="openCreateModal(true)"><FolderPlus :size="14" /></button
-                      ></a-tooltip>
-                      <a-tooltip title="刷新"
-                        ><button @click="reloadTree"><RotateCw :size="14" /></button
-                      ></a-tooltip>
-                    </div>
-                  </div>
-                  <div class="tree-content">
-                    <FileTreeComponent
-                      v-model:selectedKeys="selectedTreeKeys"
-                      v-model:expandedKeys="expandedKeys"
-                      :tree-data="treeData"
-                      @select="handleTreeSelect"
-                    />
-                  </div>
-                </div>
-
-                <div class="editor-container">
-                  <div class="editor-header">
-                    <div class="current-path">
-                      <File :size="14" />
-                      <span>{{ selectedPath || '未选择文件' }}</span>
-                      <span v-if="canSave" class="save-hint">●</span>
-                    </div>
-                    <div class="header-actions">
-                      <a-button
-                        v-if="isMarkdownFile && selectedPath"
-                        size="small"
-                        @click="viewMode = viewMode === 'edit' ? 'preview' : 'edit'"
-                        class="lucide-icon-btn view-toggle-btn"
-                        :title="viewMode === 'edit' ? '预览' : '编辑'"
-                      >
-                        <Eye v-if="viewMode === 'edit'" :size="14" />
-                        <Edit3 v-else :size="14" />
-                        <span>{{ viewMode === 'edit' ? '预览' : '编辑' }}</span>
-                      </a-button>
-                      <a-button
-                        v-if="!isBuiltinInstalledSkill"
-                        type="primary"
-                        size="small"
-                        @click="saveCurrentFile"
-                        :disabled="!canSave"
-                        :loading="savingFile"
-                        class="lucide-icon-btn"
-                      >
-                        <Save :size="14" />
-                        <span>保存</span>
-                      </a-button>
-                    </div>
-                  </div>
-                  <div class="editor-main">
-                    <a-empty
-                      v-if="!selectedPath || selectedIsDir"
-                      description="选择文件以开始编辑"
-                      class="mt-40"
-                    />
-                    <template v-else>
-                      <MdPreview
-                        v-if="viewMode === 'preview'"
-                        :modelValue="fileContent"
-                        :theme="theme"
-                        previewTheme="github"
-                        class="markdown-preview flat-md-preview"
-                      />
-                      <a-textarea
-                        v-else
-                        v-model:value="fileContent"
-                        class="pure-editor"
-                        :readonly="isBuiltinInstalledSkill"
-                        spellcheck="false"
-                      />
-                    </template>
-                  </div>
-                </div>
-              </div>
-            </a-tab-pane>
-
-            <a-tab-pane key="dependencies">
-              <template #tab>
-                <span class="tab-title"><Layers :size="14" />依赖管理</span>
-              </template>
-              <div class="config-view">
-                <div class="config-header">
-                  <div class="text">
-                    <h3>依赖声明</h3>
-                    <p>配置此 Skill 所需的工具、MCP 及其他 Skill 依赖。</p>
-                  </div>
-                  <a-button
-                    type="primary"
-                    :loading="savingDependencies"
-                    @click="saveDependencies"
-                    class="lucide-icon-btn"
-                  >
-                    <Save :size="14" />
-                    <span>更新依赖</span>
-                  </a-button>
-                </div>
-
-                <div class="config-form">
-                  <a-form layout="vertical">
-                    <a-form-item label="工具依赖 (Tools)">
-                      <a-select
-                        v-model:value="dependencyForm.tool_dependencies"
-                        mode="multiple"
-                        :options="toolDependencyOptions"
-                        placeholder="选择工具..."
-                        allow-clear
-                        show-search
-                      />
-                    </a-form-item>
-                    <a-form-item label="MCP 依赖 (Model Context Protocol)">
-                      <a-select
-                        v-model:value="dependencyForm.mcp_dependencies"
-                        mode="multiple"
-                        :options="mcpDependencyOptions"
-                        placeholder="选择 MCP 服务..."
-                        allow-clear
-                        show-search
-                      />
-                    </a-form-item>
-                    <a-form-item label="Skill 依赖">
-                      <a-select
-                        v-model:value="dependencyForm.skill_dependencies"
-                        mode="multiple"
-                        :options="skillDependencyOptions"
-                        placeholder="选择 Skill..."
-                        allow-clear
-                        show-search
-                      />
-                    </a-form-item>
-                  </a-form>
-                </div>
-              </div>
-            </a-tab-pane>
-          </a-tabs>
-        </template>
-      </div>
-    </div>
-
-    <!-- 弹窗 -->
-    <a-modal
-      v-model:open="createModalVisible"
-      :title="createForm.isDir ? '新建目录' : '新建文件'"
-      @ok="handleCreateNode"
-      :confirm-loading="creatingNode"
-      width="400px"
-    >
-      <a-form layout="vertical" class="pt-12">
-        <a-form-item label="路径 (相对于根目录)" required>
-          <a-input v-model:value="createForm.path" placeholder="src/main.py" />
-        </a-form-item>
-        <a-form-item v-if="!createForm.isDir" label="内容">
-          <a-textarea v-model:value="createForm.content" :rows="5" />
-        </a-form-item>
-      </a-form>
-    </a-modal>
-
-    <a-modal
-      v-model:open="remoteInstallModalVisible"
-      title="远程安装 Skill"
-      :footer="null"
-      width="560px"
-      :closable="!installingRemoteSkill"
-      :mask-closable="!installingRemoteSkill"
-      :keyboard="!installingRemoteSkill"
-    >
-      <div class="remote-install-panel modal-mode">
-        <div class="panel-header-text">
-          <span class="title">基于 skills.sh 的能力拉取并导入到当前系统</span>
-          <span class="desc">
-            支持 `owner/repo` 或完整 GitHub URL，可前往
-            <a href="https://skills.sh/" target="_blank" rel="noopener noreferrer">skills.sh</a>
-            查询可用 skills
-          </span>
-        </div>
-        <a-form layout="vertical" class="remote-install-form">
-          <a-form-item label="来源仓库">
-            <a-input
-              v-model:value="remoteInstallForm.source"
-              placeholder="anthropics/skills 或 GitHub URL"
-              :disabled="installingRemoteSkill"
-            />
-          </a-form-item>
-          <a-form-item label="Skill 名称">
-            <a-select
-              v-model:value="remoteInstallForm.skills"
-              mode="tags"
-              :options="filteredRemoteSkillOptions"
-              placeholder="frontend-design"
-              allow-clear
-              show-search
-              :disabled="installingRemoteSkill"
-              :filter-option="filterRemoteSkillOption"
-              :max-tag-count="6"
-            />
-          </a-form-item>
-          <div class="remote-install-actions">
-            <a-button
-              :loading="listingRemoteSkills"
-              :disabled="installingRemoteSkill"
-              @click="handleListRemoteSkills"
-            >
-              查看可安装 Skills
-            </a-button>
-            <a-button
-              type="primary"
-              :loading="installingRemoteSkill"
-              :disabled="listingRemoteSkills"
-              @click="handleInstallRemoteSkill"
-            >
-              安装
-            </a-button>
-            <span v-if="remoteInstallStatusText" class="remote-install-status">
-              {{ remoteInstallStatusText }}
-            </span>
-          </div>
-          <div v-if="remoteSkillOptions.length" class="remote-skill-summary">
-            共发现 {{ remoteSkillOptions.length }} 个 skills，可按输入内容筛选候选项。
-          </div>
-        </a-form>
-      </div>
-    </a-modal>
-  </div>
-</template>
-
-<script setup>
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { message, Modal } from 'ant-design-vue'
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import 'dayjs/locale/zh-cn'
-import { MdPreview } from 'md-editor-v3'
-import 'md-editor-v3/lib/preview.css'
-import { useThemeStore } from '@/stores/theme'
-import {
-  RotateCw,
-  Download,
-  Trash2,
-  Save,
-  FileText,
-  Layers,
-  FilePlus,
-  FolderPlus,
-  File,
-  Search,
-  BookMarked,
-  FileCode,
-  Eye,
-  Edit3
-} from 'lucide-vue-next'
-import { skillApi } from '@/apis/skill_api'
-import FileTreeComponent from '@/components/FileTreeComponent.vue'
-
-dayjs.extend(relativeTime)
-dayjs.locale('zh-cn')
-
-const themeStore = useThemeStore()
-const theme = computed(() => (themeStore.isDark ? 'dark' : 'light'))
-
-const loading = ref(false)
-const importing = ref(false)
-const listingRemoteSkills = ref(false)
-const installingRemoteSkill = ref(false)
-const savingFile = ref(false)
-const creatingNode = ref(false)
-const savingDependencies = ref(false)
-const activeTab = ref('editor')
-const searchQuery = ref('')
-const viewMode = ref('edit') // 'edit' | 'preview'
-
-const skills = ref([])
-const builtinSkills = ref([])
-const currentSkill = ref(null)
-const treeData = ref([])
-const selectedTreeKeys = ref([])
-const expandedKeys = ref([])
-const selectedPath = ref('')
-const selectedIsDir = ref(false)
-const fileContent = ref('')
-const originalFileContent = ref('')
-
-const createModalVisible = ref(false)
-const remoteInstallModalVisible = ref(false)
-const createForm = reactive({ path: '', isDir: false, content: '' })
-const remoteInstallForm = reactive({
-  source: 'https://github.com/anthropics/skills',
-  skills: []
-})
-const remoteSkillOptions = ref([])
-const remoteInstallProgress = reactive({
-  visible: false,
-  total: 0,
-  completed: 0,
-  success: 0,
-  failed: 0,
-  currentSkill: ''
-})
-const remoteInstallResults = reactive({
-  success: [],
-  failed: []
-})
-const dependencyOptions = reactive({ tools: [], mcps: [], skills: [] })
-const dependencyForm = reactive({
-  tool_dependencies: [],
-  mcp_dependencies: [],
-  skill_dependencies: []
-})
-
-const matchesSearch = (skill) => {
-  if (!searchQuery.value) return true
-  const q = searchQuery.value.toLowerCase()
-  return skill.name.toLowerCase().includes(q) || skill.slug.toLowerCase().includes(q)
-}
-
-const installedSkillCards = computed(() => {
-  const builtinInstalledMap = new Map(
-    (builtinSkills.value || [])
-      .filter((skill) => skill.status !== 'not_installed')
-      .map((skill) => [
-        skill.slug,
-        {
-          ...skill,
-          sourceType: 'builtin',
-          sourceLabel: '内置',
-          statusLabel: skill.status === 'update_available' ? '更新可用' : '已安装',
-          statusTone: skill.status === 'update_available' ? 'warning' : 'default'
-        }
-      ])
-  )
-
-  const importedInstalled = (skills.value || [])
-    .filter((skill) => !builtinInstalledMap.has(skill.slug))
-    .map((skill) => ({
-      ...skill,
-      sourceType: 'imported',
-      sourceLabel: '导入',
-      statusLabel: '已上传',
-      statusTone: 'default'
-    }))
-
-  return [...builtinInstalledMap.values(), ...importedInstalled]
-})
-
-const filteredInstalledSkills = computed(() => installedSkillCards.value.filter(matchesSearch))
-
-const filteredUninstalledBuiltinSkills = computed(() => {
-  return (builtinSkills.value || []).filter(
-    (skill) => skill.status === 'not_installed' && matchesSearch(skill)
-  )
-})
-
-const isInstalledSkill = computed(() => {
-  return !!(
-    currentSkill.value &&
-    (currentSkill.value.installed_record || currentSkill.value.dir_path)
-  )
-})
-
-const isBuiltinInstalledSkill = computed(() => {
-  return !!(
-    isInstalledSkill.value &&
-    (currentSkill.value?.is_builtin || currentSkill.value?.installed_record)
-  )
-})
-
-const currentSkillStatusLabel = computed(() => {
-  const skill = currentSkill.value
-  if (!skill) return ''
-  if (skill.is_builtin_spec) {
-    if (skill.status === 'not_installed') return '未安装'
-    if (skill.status === 'update_available') return '更新可用'
-    return '已安装'
-  }
-  if (skill.is_builtin) return '已安装'
-  return '已上传'
-})
-
-const currentSkillStatusTone = computed(() => {
-  return currentSkill.value?.status === 'update_available' ? 'warning' : 'default'
-})
-
-const canSave = computed(() => {
-  if (!selectedPath.value || selectedIsDir.value) return false
-  return fileContent.value !== originalFileContent.value
-})
-
-const isMarkdownFile = computed(() => {
-  if (!selectedPath.value) return false
-  return selectedPath.value.toLowerCase().endsWith('.md')
-})
-
-// 切换到非markdown文件时重置为编辑模式
-watch(selectedPath, (newPath) => {
-  if (newPath && !newPath.toLowerCase().endsWith('.md')) {
-    viewMode.value = 'edit'
-  }
-})
-
-const toolDependencyOptions = computed(() =>
-  (dependencyOptions.tools || []).map((i) =>
-    typeof i === 'object' ? { label: i.name, value: i.id } : { label: i, value: i }
-  )
-)
-const mcpDependencyOptions = computed(() =>
-  (dependencyOptions.mcps || []).map((i) => ({ label: i, value: i }))
-)
-const skillDependencyOptions = computed(() =>
-  (dependencyOptions.skills || [])
-    .filter((s) => s !== currentSkill.value?.slug)
-    .map((i) => ({ label: i, value: i }))
-)
-const filteredRemoteSkillOptions = computed(() =>
-  remoteSkillOptions.value.map((item) => ({
-    value: item.name,
-    label: item.description ? `${item.name} - ${item.description}` : item.name
-  }))
-)
-const remoteInstallStatusText = computed(() => {
-  if (!remoteInstallProgress.visible || !remoteInstallProgress.total) return ''
-  const progressText = `[${remoteInstallProgress.completed}/${remoteInstallProgress.total}]`
-  const currentSkill = remoteInstallProgress.currentSkill || ''
-  const failedText =
-    remoteInstallProgress.failed > 0 ? `, ${remoteInstallProgress.failed} failed` : ''
-  return `${progressText} ${currentSkill}${failedText}`.trim()
-})
-const filterRemoteSkillOption = (input, option) => {
-  const keyword = input.trim().toLowerCase()
-  if (!keyword) return true
-  const value = String(option?.value || '').toLowerCase()
-  const label = String(option?.label || '').toLowerCase()
-  return value.includes(keyword) || label.includes(keyword)
-}
-
-const normalizeRemoteSkillNames = (skills) => {
-  const seen = new Set()
-  return (skills || []).reduce((acc, skill) => {
-    const normalized = String(skill || '').trim()
-    if (!normalized || seen.has(normalized)) return acc
-    seen.add(normalized)
-    acc.push(normalized)
-    return acc
-  }, [])
-}
-
-const resetRemoteInstallState = () => {
-  remoteInstallProgress.visible = false
-  remoteInstallProgress.total = 0
-  remoteInstallProgress.completed = 0
-  remoteInstallProgress.success = 0
-  remoteInstallProgress.failed = 0
-  remoteInstallProgress.currentSkill = ''
-  remoteInstallResults.success = []
-  remoteInstallResults.failed = []
-}
-
-const normalizeTree = (nodes) =>
-  (nodes || []).map((node) => ({
-    title: node.name,
-    key: node.path,
-    isLeaf: !node.is_dir,
-    path: node.path,
-    is_dir: node.is_dir,
-    children: node.is_dir ? normalizeTree(node.children || []) : undefined
-  }))
-
-const resetFileState = () => {
-  selectedPath.value = ''
-  selectedIsDir.value = false
-  selectedTreeKeys.value = []
-  expandedKeys.value = []
-  fileContent.value = ''
-  originalFileContent.value = ''
-  viewMode.value = 'preview'
-}
-
-const expandAllKeys = (nodes) =>
-  nodes.flatMap((node) => (node.is_dir ? [node.key, ...expandAllKeys(node.children || [])] : []))
-
-const fetchSkills = async () => {
-  loading.value = true
-  try {
-    const [skillResult, builtinResult] = await Promise.all([
-      skillApi.listSkills(),
-      skillApi.listBuiltinSkills()
-    ])
-    skills.value = skillResult?.data || []
-    builtinSkills.value = (builtinResult?.data || []).map((item) => ({
-      ...item,
-      ...(item.installed_record || {}),
-      is_builtin_spec: true
-    }))
-
-    // 默认选中第一个技能并加载 SKILL.md
-    const preferredList = filteredInstalledSkills.value.length
-      ? filteredInstalledSkills.value
-      : filteredUninstalledBuiltinSkills.value
-    if (!currentSkill.value && preferredList.length > 0) {
-      await selectSkill(preferredList[0])
-    } else if (currentSkill.value) {
-      const latest =
-        builtinSkills.value.find((i) => i.slug === currentSkill.value.slug) ||
-        skills.value.find((i) => i.slug === currentSkill.value.slug)
-      if (latest) {
-        currentSkill.value = latest
-        syncDependencyFormFromSkill(latest.installed_record || latest)
-      } else {
-        currentSkill.value = null
-        treeData.value = []
-        resetFileState()
-      }
-    }
-    await fetchDependencyOptions()
-  } catch {
-    message.error('加载失败')
-  } finally {
-    loading.value = false
-  }
-}
-
-const fetchDependencyOptions = async () => {
-  try {
-    const result = await skillApi.getSkillDependencyOptions()
-    const data = result?.data || {}
-    dependencyOptions.tools = data.tools || []
-    dependencyOptions.mcps = data.mcps || []
-    dependencyOptions.skills = data.skills || []
-  } catch {
-    // ignore error
-  }
-}
-
-const syncDependencyFormFromSkill = (skillRecord) => {
-  dependencyForm.tool_dependencies = [...(skillRecord?.tool_dependencies || [])]
-  dependencyForm.mcp_dependencies = [...(skillRecord?.mcp_dependencies || [])]
-  dependencyForm.skill_dependencies = [...(skillRecord?.skill_dependencies || [])]
-}
-
-const reloadTree = async () => {
-  if (!currentSkill.value || !isInstalledSkill.value) return
-  loading.value = true
-  try {
-    const result = await skillApi.getSkillTree(currentSkill.value.slug)
-    const normalized = normalizeTree(result?.data || [])
-    treeData.value = normalized
-    expandedKeys.value = expandAllKeys(normalized)
-  } catch {
-    message.error('加载目录树失败')
-  } finally {
-    loading.value = false
-  }
-}
-
-const loadSkillFile = async (slug, path = 'SKILL.md') => {
-  try {
-    const fileResult = await skillApi.getSkillFile(slug, path)
-    const content = fileResult?.data?.content || ''
-    fileContent.value = content
-    originalFileContent.value = content
-    selectedPath.value = path
-    selectedIsDir.value = false
-    selectedTreeKeys.value = [path]
-  } catch {
-    // 文件不存在时忽略
-  }
-}
-
-const selectSkill = async (record) => {
-  currentSkill.value = record
-  resetFileState()
-  syncDependencyFormFromSkill(record.installed_record || record)
-
-  if (!record.installed_record && !record.dir_path) {
-    treeData.value = []
-    return
-  }
-
-  // 并行执行：加载树结构和获取 SKILL.md
-  await Promise.all([reloadTree(), loadSkillFile(record.slug)])
-}
-
-const handleTreeSelect = async (keys, info) => {
-  if (!keys?.length) {
-    resetFileState()
-    return
-  }
-  const node = info?.node || {}
-  const path = node.path || node.key
-  const isDir = !!node.is_dir
-  selectedTreeKeys.value = [path]
-  selectedPath.value = path
-  selectedIsDir.value = isDir
-  if (isDir) {
-    fileContent.value = ''
-    originalFileContent.value = ''
-    return
-  }
-  try {
-    const result = await skillApi.getSkillFile(currentSkill.value.slug, path)
-    const content = result?.data?.content || ''
-    fileContent.value = content
-    originalFileContent.value = content
-  } catch {
-    message.error('文件读取失败')
-  }
-}
-
-const saveCurrentFile = async () => {
-  if (
-    !currentSkill.value ||
-    !selectedPath.value ||
-    selectedIsDir.value ||
-    isBuiltinInstalledSkill.value
-  )
-    return
-  savingFile.value = true
-  try {
-    await skillApi.updateSkillFile(currentSkill.value.slug, {
-      path: selectedPath.value,
-      content: fileContent.value
-    })
-    originalFileContent.value = fileContent.value
-    message.success('已保存')
-    if (selectedPath.value === 'SKILL.md') await fetchSkills()
-  } catch {
-    message.error('保存失败')
-  } finally {
-    savingFile.value = false
-  }
-}
-
-const handleInstallBuiltin = async (record) => {
-  if (!record?.slug) return
-  loading.value = true
-  try {
-    await skillApi.installBuiltinSkill(record.slug)
-    await fetchSkills()
-    const latest = builtinSkills.value.find((item) => item.slug === record.slug)
-    if (latest) await selectSkill(latest)
-    message.success('安装成功')
-  } catch (error) {
-    message.error(error?.response?.data?.detail || error.message || '安装失败')
-  } finally {
-    loading.value = false
-  }
-}
-
-const handleUpdateBuiltin = async (record) => {
-  if (!record?.slug) return
-  loading.value = true
-  try {
-    await skillApi.updateBuiltinSkill(record.slug, false)
-    await fetchSkills()
-    const latest = builtinSkills.value.find((item) => item.slug === record.slug)
-    if (latest) await selectSkill(latest)
-    message.success('更新成功')
-  } catch (error) {
-    if (error.response?.data?.detail?.needs_confirm) {
-      loading.value = false
-      Modal.confirm({
-        title: '确认覆盖更新？',
-        content: '检测到你修改过此 skill，更新将覆盖你的修改，是否继续？',
-        okText: '继续更新',
-        cancelText: '取消',
-        onOk: async () => {
-          loading.value = true
-          try {
-            await skillApi.updateBuiltinSkill(record.slug, true)
-            await fetchSkills()
-            const latest = builtinSkills.value.find((item) => item.slug === record.slug)
-            if (latest) await selectSkill(latest)
-            message.success('更新成功')
-          } catch (forceError) {
-            message.error(forceError?.response?.data?.detail || forceError.message || '更新失败')
-          } finally {
-            loading.value = false
-          }
-        }
-      })
-      return
-    }
-    message.error(error?.response?.data?.detail || error.message || '更新失败')
-  } finally {
-    loading.value = false
-  }
-}
-
-const openCreateModal = (isDir) => {
-  if (!currentSkill.value) return
-  createForm.path = ''
-  createForm.content = ''
-  createForm.isDir = isDir
-  createModalVisible.value = true
-}
-
-const handleCreateNode = async () => {
-  if (!currentSkill.value || !createForm.path.trim() || isBuiltinInstalledSkill.value) return
-  creatingNode.value = true
-  try {
-    await skillApi.createSkillFile(currentSkill.value.slug, {
-      path: createForm.path.trim(),
-      is_dir: createForm.isDir,
-      content: createForm.content
-    })
-    createModalVisible.value = false
-    await reloadTree()
-    message.success('创建成功')
-  } catch {
-    message.error('创建失败')
-  } finally {
-    creatingNode.value = false
-  }
-}
-
-const confirmDeleteSkill = (targetSkill = null) => {
-  const target = targetSkill || currentSkill.value
-  if (!target) return
-
-  const installed = !!(
-    target &&
-    (target.installed_record || target.dir_path || target.is_builtin || target.sourceType)
-  )
-  if (!installed) return
-
-  const isBuiltinTarget = !!(
-    target?.is_builtin ||
-    target?.installed_record ||
-    target?.sourceType === 'builtin'
-  )
-  const actionText = isBuiltinTarget ? '卸载' : '删除'
-  const detailText = isBuiltinTarget
-    ? '卸载后会移除已安装文件和数据库记录，但仍可从“未安装 Skills”中重新安装。'
-    : '删除后无法恢复，所有文件和配置将永久消失。'
-  Modal.confirm({
-    title: `确认${actionText}技能「${target.slug}」？`,
-    content: detailText,
-    okText: `确认${actionText}`,
-    okType: 'danger',
-    cancelText: '取消',
-    onOk: async () => {
-      try {
-        await skillApi.deleteSkill(target.slug)
-        message.success(`已${actionText}`)
-        if (currentSkill.value?.slug === target.slug) {
-          currentSkill.value = null
-          treeData.value = []
-          resetFileState()
-        }
-        await fetchSkills()
-      } catch {
-        message.error(`${actionText}失败`)
-      }
-    }
-  })
-}
-
-const handleExport = async () => {
-  if (!currentSkill.value || !isInstalledSkill.value) return
-  try {
-    const response = await skillApi.exportSkill(currentSkill.value.slug)
-    const blob = await response.blob()
-    const url = URL.createObjectURL(blob)
-    const link = document.createElement('a')
-    link.href = url
-    link.download = `${currentSkill.value.slug}.zip`
-    link.click()
-    URL.revokeObjectURL(url)
-  } catch {
-    message.error('导出失败')
-  }
-}
-
-const handleImportUpload = async ({ file, onSuccess, onError }) => {
-  importing.value = true
-  try {
-    const result = await skillApi.importSkillZip(file)
-    message.success('导入完成')
-    await fetchSkills()
-    const imported = result?.data
-    if (imported?.slug) {
-      const record = skills.value.find((i) => i.slug === imported.slug)
-      if (record) await selectSkill(record)
-    }
-    onSuccess?.(result)
-  } catch (e) {
-    message.error('导入失败')
-    onError?.(e)
-  } finally {
-    importing.value = false
-  }
-}
-
-const handleListRemoteSkills = async () => {
-  const source = remoteInstallForm.source.trim()
-  if (!source) {
-    message.warning('请输入来源仓库')
-    return
-  }
-  listingRemoteSkills.value = true
-  try {
-    const result = await skillApi.listRemoteSkills(source)
-    remoteSkillOptions.value = result?.data || []
-    remoteInstallForm.skills = normalizeRemoteSkillNames(remoteInstallForm.skills)
-    if (!remoteSkillOptions.value.length) {
-      message.warning('未发现可安装的 Skills')
-      return
-    }
-    message.success(`已发现 ${remoteSkillOptions.value.length} 个 Skills`)
-  } catch (error) {
-    message.error(error?.response?.data?.detail || error.message || '获取远程 Skills 失败')
-  } finally {
-    listingRemoteSkills.value = false
-  }
-}
-
-const handleInstallRemoteSkill = async () => {
-  const source = remoteInstallForm.source.trim()
-  const skillsToInstall = normalizeRemoteSkillNames(remoteInstallForm.skills)
-  if (!source || !skillsToInstall.length) {
-    message.warning('请填写来源仓库和 Skill 名称')
-    return
-  }
-  remoteInstallForm.skills = skillsToInstall
-  resetRemoteInstallState()
-  installingRemoteSkill.value = true
-  remoteInstallProgress.visible = true
-  remoteInstallProgress.total = skillsToInstall.length
-  let lastInstalledSlug = ''
-  try {
-    for (const skill of skillsToInstall) {
-      remoteInstallProgress.currentSkill = skill
-      try {
-        const result = await skillApi.installRemoteSkill({ source, skill })
-        const installed = result?.data
-        const installedSlug = installed?.slug || skill
-        remoteInstallResults.success.push(installedSlug)
-        remoteInstallProgress.success += 1
-        lastInstalledSlug = installedSlug
-      } catch (error) {
-        remoteInstallResults.failed.push({
-          skill,
-          error: error?.response?.data?.detail || error.message || '远程 Skill 安装失败'
-        })
-        remoteInstallProgress.failed += 1
-      } finally {
-        remoteInstallProgress.completed += 1
-      }
-    }
-    remoteInstallProgress.currentSkill = ''
-    await fetchSkills()
-    if (lastInstalledSlug) {
-      const record =
-        skills.value.find((item) => item.slug === lastInstalledSlug) ||
-        builtinSkills.value.find((item) => item.slug === lastInstalledSlug)
-      if (record) await selectSkill(record)
-    }
-    if (remoteInstallResults.failed.length === 0) {
-      remoteInstallModalVisible.value = false
-      message.success(`远程 Skills 安装成功，共 ${remoteInstallResults.success.length} 个`)
-      resetRemoteInstallState()
-      remoteInstallForm.skills = []
-      return
-    }
-    message.warning(
-      `远程 Skills 安装完成，成功 ${remoteInstallResults.success.length} 个，失败 ${remoteInstallResults.failed.length} 个`
-    )
-  } catch (error) {
-    message.error(error?.response?.data?.detail || error.message || '远程 Skill 安装失败')
-  } finally {
-    remoteInstallProgress.currentSkill = ''
-    installingRemoteSkill.value = false
-  }
-}
-
-const openRemoteInstallModal = () => {
-  if (!remoteInstallModalVisible.value) {
-    remoteInstallForm.skills = []
-    resetRemoteInstallState()
-  }
-  remoteInstallModalVisible.value = true
-}
-
-watch(remoteInstallModalVisible, (visible) => {
-  if (!visible && !installingRemoteSkill.value) {
-    remoteInstallForm.skills = []
-    resetRemoteInstallState()
-  }
-})
-
-const saveDependencies = async () => {
-  if (!currentSkill.value || !isInstalledSkill.value) return
-  savingDependencies.value = true
-  try {
-    const result = await skillApi.updateSkillDependencies(currentSkill.value.slug, {
-      tool_dependencies: dependencyForm.tool_dependencies,
-      mcp_dependencies: dependencyForm.mcp_dependencies,
-      skill_dependencies: dependencyForm.skill_dependencies
-    })
-    const updated = result?.data
-    if (updated) {
-      currentSkill.value = updated
-      syncDependencyFormFromSkill(updated)
-    }
-    await fetchSkills()
-    message.success('依赖已更新')
-  } catch {
-    message.error('更新失败')
-  } finally {
-    savingDependencies.value = false
-  }
-}
-
-onMounted(fetchSkills)
-
-// 暴露方法给父组件
-defineExpose({
-  fetchSkills,
-  handleImportUpload,
-  openRemoteInstallModal
-})
-</script>
-
-<style scoped lang="less">
-@import '@/assets/css/extensions.less';
-
-.builtin-uninstalled-state {
-  padding: 24px;
-  h3 {
-    margin: 0 0 8px;
-    font-size: 16px;
-  }
-  p {
-    margin: 0 0 16px;
-    color: var(--gray-500);
-  }
-}
-
-.workspace {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  height: 100%;
-  overflow: hidden;
-}
-
-.remote-install-panel {
-  background: linear-gradient(180deg, var(--gray-0) 0%, var(--gray-50) 100%);
-  border: 1px solid @border-color;
-  border-radius: 12px;
-  padding: 16px;
-
-  &.modal-mode {
-    border: none;
-    border-radius: 0;
-    padding: 0;
-    background: transparent;
-  }
-
-  .panel-header-text {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    margin-bottom: 12px;
-
-    .title {
-      font-size: 14px;
-      font-weight: 600;
-      color: var(--gray-900);
-    }
-
-    .desc {
-      font-size: 12px;
-      color: var(--gray-500);
-    }
-  }
-
-  .remote-install-form {
-    :deep(.ant-form-item) {
-      margin-bottom: 12px;
-    }
-  }
-
-  .remote-install-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .remote-install-status {
-    min-width: 0;
-    flex: 1;
-    font-size: 12px;
-    color: var(--gray-600);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .remote-skill-hints {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-top: 12px;
-  }
-
-  .remote-skill-summary {
-    margin-top: 12px;
-    font-size: 12px;
-    color: var(--gray-500);
-  }
-}
-
-/* 文件 tree */
-.tree-container {
-  width: 240px;
-  border-right: 1px solid @border-color;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-
-  .tree-header {
-    padding: 10px 12px 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .label {
-      font-size: 12px;
-      font-weight: 600;
-      color: var(--gray-500);
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-    .tree-actions {
-      display: flex;
-      gap: 4px;
-      button {
-        background: none;
-        border: none;
-        padding: 2px;
-        cursor: pointer;
-        color: var(--gray-500);
-        display: flex;
-        align-items: center;
-        &:hover {
-          color: var(--gray-900);
-        }
-      }
-    }
-  }
-
-  .tree-content {
-    flex: 1;
-    overflow-y: auto;
-    height: 100%;
-    padding: 8px 0;
-  }
-}
-
-/* 编辑器 */
-.editor-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-
-  .editor-header {
-    padding: 8px 16px 4px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: var(--gray-0);
-    flex-shrink: 0;
-
-    .current-path {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-family: monospace;
-      font-size: 12px;
-      color: var(--gray-500);
-      .save-hint {
-        color: var(--color-warning-500);
-        font-size: 10px;
-        margin-left: 4px;
-      }
-    }
-
-    .header-actions {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .view-toggle-btn {
-      background-color: var(--gray-100);
-      border-color: var(--gray-300);
-      &:hover {
-        background-color: var(--gray-200);
-        border-color: var(--gray-400);
-      }
-    }
-  }
-
-  .editor-main {
-    flex: 1;
-    min-height: 0;
-    background-color: var(--gray-0);
-    display: flex;
-    flex-direction: column;
-  }
-
-  .editor-main :deep(.ant-empty) {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .editor-main :deep(textarea) {
-    flex: 1;
-    min-height: 0;
-  }
-
-  .pure-editor {
-    width: 100%;
-    height: 100%;
-    border: none;
-    resize: none;
-    padding: 16px;
-    font-family: 'Fira Code', 'Monaco', monospace;
-    font-size: 13px;
-    line-height: 1.6;
-    &:focus {
-      outline: none;
-    }
-  }
-
-  .markdown-preview {
-    flex: 1;
-    height: 100%;
-    overflow-y: auto;
-    :deep(.md-editor) {
-      height: 100%;
-      background: var(--gray-0);
-    }
-    :deep(.md-editor-preview-wrapper) {
-      padding: 16px 20px;
-    }
-  }
-}
-
-/* 依赖配置 */
-.config-view {
-  padding: 16px;
-  flex: 1;
-  overflow-y: auto;
-  .config-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 32px;
-    flex-shrink: 0;
-    .text {
-      h3 {
-        margin: 0 0 4px 0;
-        font-size: 16px;
-        font-weight: 600;
-      }
-      p {
-        margin: 0;
-        color: var(--gray-500);
-        font-size: 13px;
-      }
-    }
-  }
-  .config-form {
-    max-width: 600px;
-    :deep(.ant-form-item-label label) {
-      font-weight: 500;
-      font-size: 13px;
-    }
-  }
-}
-
-.mt-40 {
-  margin-top: 40px;
-}
-.pt-12 {
-  padding-top: 12px;
-}
-
-@media (max-width: 1000px) {
-  .sidebar-list {
-    width: 220px;
-  }
-  .tree-container {
-    width: 180px;
-  }
-}
-</style>
diff --git a/web/src/components/SubAgentsComponent.vue b/web/src/components/SubAgentsComponent.vue
deleted file mode 100644
index a7161f18..00000000
--- a/web/src/components/SubAgentsComponent.vue
+++ /dev/null
@@ -1,595 +0,0 @@
-<template>
-  <div class="subagents-component extension-page-root">
-    <div v-if="loading" class="loading-bar-wrapper">
-      <div class="loading-bar"></div>
-    </div>
-    <div class="layout-wrapper" :class="{ 'content-loading': loading }">
-      <!-- 左侧：SubAgent 列表 -->
-      <div class="sidebar-list">
-        <!-- 搜索框 -->
-        <div class="sidebar-toolbar">
-          <div class="search-box">
-            <a-input
-              v-model:value="searchQuery"
-              placeholder="搜索 SubAgent..."
-              allow-clear
-              class="search-input"
-            >
-              <template #prefix><Search :size="14" class="text-muted" /></template>
-            </a-input>
-          </div>
-
-          <a-tooltip title="刷新 Subagents">
-            <a-button class="sidebar-tool" :disabled="loading" @click="fetchSubAgents">
-              <RotateCw :size="14" />
-            </a-button>
-          </a-tooltip>
-        </div>
-
-        <!-- SubAgent 列表 -->
-        <div class="list-container">
-          <div
-            v-if="!filteredEnabledSubAgents.length && !filteredDisabledSubAgents.length"
-            class="empty-text"
-          >
-            <a-empty
-              :image="false"
-              :description="searchQuery ? '无匹配 SubAgent' : '暂无 SubAgent'"
-            />
-          </div>
-          <div v-if="filteredEnabledSubAgents.length" class="list-section-title">已添加</div>
-          <template
-            v-for="(agent, index) in filteredEnabledSubAgents"
-            :key="`enabled-${agent.name}`"
-          >
-            <div
-              class="list-item extension-list-item"
-              :class="{ active: currentAgent?.name === agent.name }"
-              @click="selectAgent(agent)"
-            >
-              <div class="item-main-row">
-                <div class="item-header">
-                  <Bot :size="16" class="item-icon" />
-                  <span class="item-name">{{ agent.name }}</span>
-                </div>
-                <div class="item-status">
-                  <span class="status-chip status-chip-success">已添加</span>
-                  <button
-                    type="button"
-                    class="inline-hover-action danger"
-                    @click.stop="handleSetAgentEnabled(agent, false)"
-                  >
-                    移除
-                  </button>
-                </div>
-              </div>
-              <div class="item-details">
-                <span class="item-desc">{{ agent.description || '暂无描述' }}</span>
-                <div class="item-tags">
-                  <span v-if="agent.is_builtin" class="source-tag builtin">内置</span>
-                </div>
-              </div>
-            </div>
-            <div
-              v-if="
-                index < filteredEnabledSubAgents.length - 1 || filteredDisabledSubAgents.length > 0
-              "
-              class="list-separator"
-            ></div>
-          </template>
-
-          <div v-if="filteredDisabledSubAgents.length" class="list-section-title">可添加</div>
-          <template
-            v-for="(agent, index) in filteredDisabledSubAgents"
-            :key="`disabled-${agent.name}`"
-          >
-            <div
-              class="list-item extension-list-item"
-              :class="{ active: currentAgent?.name === agent.name }"
-              @click="selectAgent(agent)"
-            >
-              <div class="item-main-row">
-                <div class="item-header">
-                  <Bot :size="16" class="item-icon" />
-                  <span class="item-name">{{ agent.name }}</span>
-                </div>
-                <div class="item-status">
-                  <button
-                    type="button"
-                    class="skill-inline-action skill-inline-action-primary"
-                    @click.stop="handleSetAgentEnabled(agent, true)"
-                  >
-                    添加
-                  </button>
-                </div>
-              </div>
-              <div class="item-details">
-                <span class="item-desc">{{ agent.description || '暂无描述' }}</span>
-                <div class="item-tags">
-                  <span v-if="agent.is_builtin" class="source-tag builtin">内置</span>
-                </div>
-              </div>
-            </div>
-            <div v-if="index < filteredDisabledSubAgents.length - 1" class="list-separator"></div>
-          </template>
-        </div>
-      </div>
-
-      <!-- 右侧：详情面板 -->
-      <div class="main-panel">
-        <div v-if="!currentAgent" class="unselected-state">
-          <div class="hint-box">
-            <Bot :size="40" class="text-muted" />
-            <p>请在左侧选择 SubAgent 进行操作</p>
-          </div>
-        </div>
-
-        <template v-else>
-          <div class="panel-top-bar">
-            <h2 class="panel-title-row">
-              <Bot :size="18" class="panel-title-icon" />
-              <span
-                ><strong>{{ currentAgent.name }}</strong></span
-              >
-            </h2>
-            <div class="panel-actions">
-              <a-space :size="8">
-                <a-button
-                  size="small"
-                  @click="showEditModal(currentAgent)"
-                  class="lucide-icon-btn"
-                  v-if="!currentAgent.is_builtin"
-                >
-                  <Pencil :size="14" />
-                  <span>编辑</span>
-                </a-button>
-                <a-button
-                  size="small"
-                  danger
-                  ghost
-                  :disabled="currentAgent.is_builtin"
-                  @click="confirmDeleteAgent(currentAgent)"
-                  class="lucide-icon-btn"
-                  v-if="!currentAgent.is_builtin"
-                >
-                  <Trash2 :size="14" />
-                  <span>删除</span>
-                </a-button>
-              </a-space>
-            </div>
-          </div>
-
-          <div class="detail-section-container">
-            <div class="detail-section">
-              <div class="section-header">
-                <MessageSquare :size="14" />
-                <span>系统提示词</span>
-              </div>
-              <div class="section-content">
-                <div class="code-panel">
-                  <pre class="code-panel-pre">{{ currentAgent.system_prompt }}</pre>
-                </div>
-              </div>
-            </div>
-
-            <div class="detail-section" v-if="currentAgent.description">
-              <div class="section-header">
-                <FileText :size="14" />
-                <span>描述</span>
-              </div>
-              <div class="section-content description">
-                {{ currentAgent.description }}
-              </div>
-            </div>
-
-            <div class="detail-section" v-if="currentAgent.model">
-              <div class="section-header">
-                <Cpu :size="14" />
-                <span>模型覆盖</span>
-              </div>
-              <div class="section-content">
-                {{ currentAgent.model }}
-              </div>
-            </div>
-
-            <div class="detail-section" v-if="currentAgent.tools && currentAgent.tools.length > 0">
-              <div class="section-header">
-                <Wrench :size="14" />
-                <span>工具</span>
-              </div>
-              <div class="section-content">
-                <a-tag v-for="tool in currentAgent.tools" :key="tool">{{ tool }}</a-tag>
-              </div>
-            </div>
-
-            <div
-              class="detail-section"
-              v-if="currentAgent.is_builtin || currentAgent.enabled === false"
-            >
-              <div class="section-header">
-                <Info :size="14" />
-                <span>类型</span>
-              </div>
-              <div class="section-content">
-                <a-tag v-if="currentAgent.is_builtin" color="blue">内置</a-tag>
-                <a-tag v-else color="default">自定义</a-tag>
-                <a-tag v-if="currentAgent.enabled === false" color="default">未添加</a-tag>
-              </div>
-            </div>
-
-            <div class="detail-section">
-              <div class="section-header">
-                <Clock :size="14" />
-                <span>元信息</span>
-              </div>
-              <div class="section-content meta-info">
-                <div class="meta-item">
-                  <span class="meta-label">创建时间</span>
-                  <span class="meta-value">{{ formatTime(currentAgent.created_at) }}</span>
-                </div>
-                <div class="meta-item">
-                  <span class="meta-label">更新时间</span>
-                  <span class="meta-value">{{ formatTime(currentAgent.updated_at) }}</span>
-                </div>
-                <div class="meta-item" v-if="currentAgent.created_by">
-                  <span class="meta-label">创建人</span>
-                  <span class="meta-value">{{ currentAgent.created_by }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
-
-    <!-- 添加/编辑 SubAgent 模态框 -->
-    <a-modal
-      v-model:open="formModalVisible"
-      :title="editMode ? '编辑 SubAgent' : '添加 SubAgent'"
-      @ok="handleFormSubmit"
-      :confirmLoading="formLoading"
-      @cancel="formModalVisible = false"
-      :maskClosable="false"
-      width="600px"
-    >
-      <a-form layout="vertical" class="extension-form">
-        <a-form-item label="名称" required class="form-item">
-          <a-input
-            v-model:value="form.name"
-            placeholder="请输入 SubAgent 名称（唯一标识）"
-            :disabled="editMode"
-          />
-        </a-form-item>
-
-        <a-form-item label="描述" class="form-item">
-          <a-input v-model:value="form.description" placeholder="请输入 SubAgent 描述" />
-        </a-form-item>
-
-        <a-form-item label="系统提示词" required class="form-item">
-          <a-textarea v-model:value="form.system_prompt" placeholder="请输入系统提示词" :rows="6" />
-        </a-form-item>
-
-        <a-form-item label="工具" class="form-item">
-          <a-select
-            v-model:value="form.tools"
-            mode="tags"
-            placeholder="选择或输入工具名称"
-            style="width: 100%"
-            :options="availableTools"
-            @focus="fetchAvailableTools"
-          />
-        </a-form-item>
-
-        <a-form-item label="模型覆盖（可选）" class="form-item">
-          <div class="model-override-row">
-            <ModelSelectorComponent
-              :model_spec="form.model"
-              placeholder="请选择模型"
-              class="model-selector-full"
-              @select-model="handleModelSelect"
-            />
-            <a-button v-if="form.model" type="link" size="small" @click="form.model = ''">
-              清空
-            </a-button>
-          </div>
-        </a-form-item>
-      </a-form>
-    </a-modal>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
-import { message, Modal } from 'ant-design-vue'
-import {
-  Search,
-  Bot,
-  Pencil,
-  Trash2,
-  RotateCw,
-  Info,
-  MessageSquare,
-  FileText,
-  Cpu,
-  Wrench,
-  Clock
-} from 'lucide-vue-next'
-import { subagentApi } from '@/apis/subagent_api'
-import { toolApi } from '@/apis/tool_api'
-import { formatFullDateTime } from '@/utils/time'
-import ModelSelectorComponent from '@/components/ModelSelectorComponent.vue'
-
-// 状态
-const loading = ref(false)
-const error = ref(null)
-const subagents = ref([])
-const searchQuery = ref('')
-const currentAgent = ref(null)
-const availableTools = ref([])
-
-// 表单相关
-const formModalVisible = ref(false)
-const formLoading = ref(false)
-const editMode = ref(false)
-const form = reactive({
-  name: '',
-  description: '',
-  system_prompt: '',
-  tools: [],
-  model: ''
-})
-
-const getSortedSubAgents = (items) => {
-  return [...items].sort((a, b) => {
-    // 内置的排前面
-    if (a.is_builtin !== b.is_builtin) {
-      return a.is_builtin ? -1 : 1
-    }
-    return new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
-  })
-}
-
-// 计算属性
-const filteredSubAgents = computed(() => {
-  const sorted = getSortedSubAgents(subagents.value)
-  if (!searchQuery.value) return sorted
-  const q = searchQuery.value.toLowerCase()
-  return sorted.filter(
-    (a) => a.name.toLowerCase().includes(q) || (a.description || '').toLowerCase().includes(q)
-  )
-})
-
-const filteredEnabledSubAgents = computed(() =>
-  filteredSubAgents.value.filter((item) => item.enabled !== false)
-)
-const filteredDisabledSubAgents = computed(() =>
-  filteredSubAgents.value.filter((item) => item.enabled === false)
-)
-
-// 获取 SubAgent 列表
-const fetchSubAgents = async () => {
-  try {
-    loading.value = true
-    error.value = null
-    const result = await subagentApi.getSubAgents()
-    if (result.success) {
-      subagents.value = result.data || []
-      // 保持选中状态
-      if (currentAgent.value) {
-        const latest = subagents.value.find((a) => a.name === currentAgent.value.name)
-        if (latest) {
-          currentAgent.value = latest
-        } else {
-          currentAgent.value = null
-        }
-      }
-      // 默认选中第一个已添加项
-      const defaultList = filteredEnabledSubAgents.value.length
-        ? filteredEnabledSubAgents.value
-        : filteredDisabledSubAgents.value
-      if (!currentAgent.value && defaultList.length > 0) {
-        currentAgent.value = defaultList[0]
-      }
-    } else {
-      error.value = result.message || '获取列表失败'
-    }
-  } catch (err) {
-    console.error('获取 SubAgent 列表失败:', err)
-    error.value = err.message || '获取列表失败'
-  } finally {
-    loading.value = false
-  }
-}
-
-// 获取可选工具列表
-const fetchAvailableTools = async () => {
-  if (availableTools.value.length > 0) return
-  try {
-    const result = await toolApi.getToolOptions()
-    if (result.success && result.data) {
-      availableTools.value = result.data
-    }
-  } catch (err) {
-    console.error('获取工具选项失败:', err)
-  }
-}
-
-// 格式化时间
-const formatTime = (timeStr) => formatFullDateTime(timeStr)
-
-const handleModelSelect = (spec) => {
-  form.model = spec || ''
-}
-
-const handleSetAgentEnabled = async (agent, enabled) => {
-  try {
-    const result = await subagentApi.updateSubAgentStatus(agent.name, enabled)
-    if (result.success) {
-      message.success(result.message || `SubAgent 已${enabled ? '添加' : '移除'}`)
-      await fetchSubAgents()
-    } else {
-      message.error(result.message || '操作失败')
-    }
-  } catch (err) {
-    console.error('更新状态失败:', err)
-    message.error(err.message || '操作失败')
-  }
-}
-
-// 选择 SubAgent
-const selectAgent = (agent) => {
-  currentAgent.value = agent
-}
-
-// 显示添加模态框
-const showAddModal = () => {
-  editMode.value = false
-  Object.assign(form, {
-    name: '',
-    description: '',
-    system_prompt: '',
-    tools: [],
-    model: ''
-  })
-  formModalVisible.value = true
-}
-
-// 显示编辑模态框
-const showEditModal = async (agent) => {
-  try {
-    const result = await subagentApi.getSubAgent(agent.name)
-    if (result.success && result.data) {
-      editMode.value = true
-      Object.assign(form, {
-        name: result.data.name,
-        description: result.data.description || '',
-        system_prompt: result.data.system_prompt || '',
-        tools: result.data.tools || [],
-        model: result.data.model || ''
-      })
-      formModalVisible.value = true
-      return
-    }
-  } catch (err) {
-    console.error('获取 SubAgent 详情失败，回退使用列表数据:', err)
-  }
-  // 回退：使用列表数据
-  editMode.value = true
-  Object.assign(form, {
-    name: agent.name,
-    description: agent.description || '',
-    system_prompt: agent.system_prompt || '',
-    tools: agent.tools || [],
-    model: agent.model || ''
-  })
-  formModalVisible.value = true
-}
-
-// 处理表单提交
-const handleFormSubmit = async () => {
-  try {
-    // 校验
-    if (!form.name?.trim()) {
-      message.error('名称不能为空')
-      return
-    }
-    if (!form.system_prompt?.trim()) {
-      message.error('系统提示词不能为空')
-      return
-    }
-
-    formLoading.value = true
-
-    const data = {
-      name: form.name.trim(),
-      description: form.description || '',
-      system_prompt: form.system_prompt,
-      tools: form.tools || [],
-      model: form.model || null
-    }
-
-    if (editMode.value) {
-      const result = await subagentApi.updateSubAgent(form.name, data)
-      if (result.success) {
-        message.success('SubAgent 更新成功')
-      } else {
-        message.error(result.message || '更新失败')
-        return
-      }
-    } else {
-      const result = await subagentApi.createSubAgent(data)
-      if (result.success) {
-        message.success('SubAgent 创建成功')
-      } else {
-        message.error(result.message || '创建失败')
-        return
-      }
-    }
-
-    formModalVisible.value = false
-    await fetchSubAgents()
-  } catch (err) {
-    console.error('操作失败:', err)
-    message.error(err.message || '操作失败')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-// 确认删除 SubAgent
-const confirmDeleteAgent = (agent) => {
-  Modal.confirm({
-    title: '确认删除 SubAgent',
-    content: `确定要删除 SubAgent "${agent.name}" 吗？此操作不可撤销。`,
-    okText: '删除',
-    okType: 'danger',
-    cancelText: '取消',
-    async onOk() {
-      try {
-        const result = await subagentApi.deleteSubAgent(agent.name)
-        if (result.success) {
-          message.success('SubAgent 删除成功')
-          if (currentAgent.value?.name === agent.name) {
-            currentAgent.value = null
-          }
-          await fetchSubAgents()
-        } else {
-          message.error(result.message || '删除失败')
-        }
-      } catch (err) {
-        console.error('删除失败:', err)
-        message.error(err.message || '删除失败')
-      }
-    }
-  })
-}
-
-// 初始化
-onMounted(() => {
-  fetchSubAgents()
-})
-
-// 暴露方法给父组件
-defineExpose({
-  fetchSubAgents,
-  showAddModal
-})
-</script>
-
-<style lang="less" scoped>
-@import '@/assets/css/extensions.less';
-
-.model-override-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.model-selector-full {
-  flex: 1;
-
-  :deep(.model-select) {
-    width: 100%;
-  }
-}
-</style>
diff --git a/web/src/components/ToolsManagerComponent.vue b/web/src/components/ToolsManagerComponent.vue
deleted file mode 100644
index bccf539f..00000000
--- a/web/src/components/ToolsManagerComponent.vue
+++ /dev/null
@@ -1,292 +0,0 @@
-<template>
-  <div class="tools-manager-container extension-page-root">
-    <div v-if="loading" class="loading-bar-wrapper">
-      <div class="loading-bar"></div>
-    </div>
-    <div class="layout-wrapper" :class="{ 'content-loading': loading }">
-      <!-- 左侧：工具列表 -->
-      <div class="sidebar-list">
-        <div class="sidebar-toolbar">
-          <div class="search-box">
-            <a-input
-              v-model:value="searchQuery"
-              placeholder="搜索工具..."
-              allow-clear
-              class="search-input"
-            >
-              <template #prefix><Search :size="14" class="text-muted" /></template>
-            </a-input>
-          </div>
-
-          <a-tooltip title="刷新工具">
-            <a-button class="sidebar-tool" :disabled="loading" @click="fetchTools">
-              <RotateCw :size="14" />
-            </a-button>
-          </a-tooltip>
-
-          <a-tooltip :title="`当前分类：${currentCategoryLabel}`">
-            <a-dropdown trigger="click">
-              <a-button
-                class="sidebar-tool category-trigger"
-                :class="{ active: !!selectedCategory }"
-              >
-                <SlidersHorizontal :size="14" />
-              </a-button>
-              <template #overlay>
-                <a-menu :selectedKeys="[selectedCategory || 'all']" @click="handleCategorySelect">
-                  <a-menu-item key="all">全部分类</a-menu-item>
-                  <a-menu-item v-for="cat in categories" :key="cat">
-                    {{ categoryLabels[cat] || cat }}
-                  </a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
-          </a-tooltip>
-        </div>
-
-        <div class="list-container">
-          <div v-if="filteredTools.length === 0" class="empty-text">
-            <a-empty :image="false" description="无匹配工具" />
-          </div>
-          <template v-for="(tool, index) in filteredTools" :key="tool.id">
-            <div
-              class="list-item"
-              :class="{ active: currentTool?.id === tool.id }"
-              @click="selectTool(tool)"
-            >
-              <div class="item-header">
-                <component :is="getToolIcon(tool.id) || Wrench" :size="16" class="item-icon" />
-                <span class="item-name">{{ tool.name }}</span>
-              </div>
-              <div class="item-details item-details-inline">
-                <span class="item-category item-meta">{{
-                  categoryLabels[tool.category] || tool.category
-                }}</span>
-                <div class="item-tags">
-                  <a-tag v-for="tag in tool.tags" :key="tag" size="small" class="tool-tag">{{
-                    tag
-                  }}</a-tag>
-                </div>
-              </div>
-            </div>
-            <div v-if="index < filteredTools.length - 1" class="list-separator"></div>
-          </template>
-        </div>
-      </div>
-
-      <!-- 右侧：详情面板 -->
-      <div class="main-panel">
-        <div v-if="!currentTool" class="unselected-state">
-          <div class="hint-box">
-            <Wrench :size="40" class="text-muted" />
-            <p>请在左侧选择工具查看详情</p>
-          </div>
-        </div>
-
-        <template v-else>
-          <div class="panel-top-bar">
-            <div class="panel-title-stack">
-              <h2>
-                <component :is="getToolIcon(currentTool.id) || Wrench" :size="24" />
-                {{ currentTool.name }}
-              </h2>
-              <code class="panel-title-meta">{{ currentTool.id }}</code>
-            </div>
-          </div>
-
-          <div class="detail-section-container">
-            <div class="detail-section">
-              <div class="section-header">
-                <FileText :size="14" />
-                <span>描述</span>
-              </div>
-              <div class="section-content description">
-                {{ currentTool.description || '无描述' }}
-              </div>
-            </div>
-
-            <div class="detail-section" v-if="currentTool.config_guide">
-              <div class="section-header">
-                <FileText :size="14" />
-                <span>配置说明</span>
-              </div>
-              <div class="section-content description config-guide">
-                {{ currentTool.config_guide }}
-              </div>
-            </div>
-
-            <div class="detail-section">
-              <div class="section-header">
-                <Tag :size="14" />
-                <span>分类</span>
-              </div>
-              <div class="section-content">
-                <a-tag :color="categoryColors[currentTool.category] || 'default'">
-                  {{ categoryLabels[currentTool.category] || currentTool.category }}
-                </a-tag>
-              </div>
-            </div>
-
-            <div class="detail-section">
-              <div class="section-header">
-                <Tags :size="14" />
-                <span>标签</span>
-              </div>
-              <div class="section-content">
-                <a-tag v-for="tag in currentTool.tags" :key="tag">{{ tag }}</a-tag>
-                <span v-if="!currentTool.tags?.length" class="text-muted">无</span>
-              </div>
-            </div>
-
-            <div class="detail-section" v-if="currentTool.args?.length">
-              <div class="section-header">
-                <List :size="14" />
-                <span>参数</span>
-              </div>
-              <div class="section-content">
-                <a-table
-                  :dataSource="currentTool.args"
-                  :columns="argColumns"
-                  size="small"
-                  :pagination="false"
-                  bordered
-                  class="args-table"
-                />
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, onMounted, ref } from 'vue'
-import { message } from 'ant-design-vue'
-import {
-  Search,
-  Wrench,
-  Tag,
-  Tags,
-  FileText,
-  List,
-  SlidersHorizontal,
-  RotateCw
-} from 'lucide-vue-next'
-import { toolApi } from '@/apis/tool_api'
-import { getToolIcon } from '@/components/ToolCallingResult/toolRegistry'
-
-const loading = ref(false)
-const searchQuery = ref('')
-const selectedCategory = ref('')
-
-const tools = ref([])
-const currentTool = ref(null)
-
-const categories = ['buildin', 'mysql', 'debug']
-const categoryLabels = {
-  buildin: '内置工具',
-  mysql: 'MySQL',
-  debug: '调试'
-}
-const categoryColors = {
-  buildin: 'blue',
-  mysql: 'green',
-  debug: 'orange'
-}
-
-const argColumns = [
-  { title: '参数名', dataIndex: 'name', key: 'name' },
-  { title: '类型', dataIndex: 'type', key: 'type', width: 80 },
-  { title: '描述', dataIndex: 'description', key: 'description' }
-]
-
-const filteredTools = computed(() => {
-  let result = tools.value
-  if (selectedCategory.value) {
-    result = result.filter((t) => t.category === selectedCategory.value)
-  }
-  if (searchQuery.value) {
-    const q = searchQuery.value.toLowerCase()
-    result = result.filter(
-      (t) =>
-        t.name.toLowerCase().includes(q) ||
-        t.id.toLowerCase().includes(q) ||
-        t.description?.toLowerCase().includes(q) ||
-        t.config_guide?.toLowerCase().includes(q)
-    )
-  }
-  return result
-})
-
-const currentCategoryLabel = computed(
-  () =>
-    categoryLabels[selectedCategory.value] ||
-    (selectedCategory.value ? selectedCategory.value : '全部分类')
-)
-
-const fetchTools = async () => {
-  loading.value = true
-  try {
-    const result = await toolApi.getTools()
-    tools.value = result?.data || []
-    // 默认选中第一个工具
-    if (!currentTool.value && tools.value.length > 0) {
-      currentTool.value = tools.value[0]
-    }
-  } catch {
-    message.error('加载工具失败')
-  } finally {
-    loading.value = false
-  }
-}
-
-const selectTool = (record) => {
-  currentTool.value = record
-}
-
-const handleCategorySelect = ({ key }) => {
-  selectedCategory.value = key === 'all' ? '' : key
-}
-
-onMounted(fetchTools)
-
-// 暴露方法给父组件
-defineExpose({
-  fetchTools
-})
-</script>
-
-<style scoped lang="less">
-@import '@/assets/css/extensions.less';
-
-.list-item {
-  .item-details {
-    .item-tags {
-      display: flex;
-      gap: 2px;
-      flex-wrap: wrap;
-      max-width: 100px;
-      justify-content: flex-end;
-      .tool-tag {
-        color: var(--gray-500);
-        font-size: 11px;
-        padding: 0 4px;
-        margin: 0;
-        border: none;
-      }
-    }
-  }
-}
-
-.args-table {
-  :deep(.ant-table) {
-    font-size: 12px;
-  }
-}
-
-.config-guide {
-  white-space: pre-line;
-}
-</style>
diff --git a/web/src/components/extensions/McpDetailView.vue b/web/src/components/extensions/McpDetailView.vue
index 284d909e..2da9bb46 100644
--- a/web/src/components/extensions/McpDetailView.vue
+++ b/web/src/components/extensions/McpDetailView.vue
@@ -469,6 +469,145 @@ onMounted(() => {
 @import '@/assets/css/extensions.less';
 @import '@/assets/css/extension-detail.less';
 
+
+/* 工具列表样式 */
+.tools-tab {
+  .tools-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  .empty-tools {
+    padding: 40px 0;
+  }
+
+  .tools-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .tool-card {
+      background: var(--gray-0);
+      border: 1px solid var(--gray-150);
+      border-radius: 8px;
+      padding: 12px 16px;
+      transition: all 0.2s ease;
+
+      &:hover {
+        border-color: var(--gray-200);
+      }
+
+      &.disabled {
+        opacity: 0.6;
+      }
+
+      .tool-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 8px;
+
+        .tool-info {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .tool-name {
+            font-weight: 600;
+            font-size: 14px;
+            color: var(--gray-900);
+          }
+
+          .info-icon {
+            color: var(--gray-400);
+            cursor: pointer;
+            &:hover {
+              color: var(--gray-600);
+            }
+          }
+        }
+
+        .tool-actions {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+      }
+
+      .tool-description {
+        font-size: 13px;
+        color: var(--gray-600);
+        line-height: 1.4;
+        margin-bottom: 8px;
+      }
+
+      :deep(.ant-collapse) {
+        background: transparent;
+        border: none;
+
+        .ant-collapse-header {
+          padding: 8px 0;
+          font-size: 13px;
+          color: var(--gray-600);
+        }
+        .ant-collapse-content-box {
+          padding: 0;
+        }
+      }
+
+      .params-list {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        .param-item {
+          background: var(--gray-50);
+          padding: 8px 12px;
+          border-radius: 4px;
+
+          .param-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 4px;
+
+            .param-name {
+              font-weight: 500;
+              font-size: 13px;
+              color: var(--gray-900);
+              font-family: @mono-font;
+            }
+            .param-required {
+              font-size: 11px;
+              color: var(--color-error-500);
+              background: var(--color-error-50);
+              padding: 1px 6px;
+              border-radius: 3px;
+            }
+            .param-type {
+              font-size: 11px;
+              color: var(--gray-500);
+              background: var(--gray-100);
+              padding: 1px 6px;
+              border-radius: 3px;
+              font-family: @mono-font;
+            }
+          }
+
+          .param-desc {
+            font-size: 12px;
+            color: var(--gray-600);
+            line-height: 1.4;
+          }
+        }
+      }
+    }
+  }
+}
+
+
 .mcp-detail {
   .detail-content-wrapper {
     flex: 1;