From b5b2c3247734070f002fce9d5976bc4931cd58aa Mon Sep 17 00:00:00 2001
From: "DESKTOP-72TV0V4\\caoxiaozhu" <leocaoxiaozhu@163.com>
Date: Wed, 11 Mar 2026 14:46:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0=20useSkills?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/views/skill/useSkills.ts | 46 ++++++++++++++++++++++++++------
 1 file changed, 38 insertions(+), 8 deletions(-)

diff --git a/web/src/views/skill/useSkills.ts b/web/src/views/skill/useSkills.ts
index 623898e..8dcf293 100644
--- a/web/src/views/skill/useSkills.ts
+++ b/web/src/views/skill/useSkills.ts
@@ -1,19 +1,49 @@
-import { ref, computed } from 'vue'
-import { ElMessageBox } from 'element-plus'
+import { ref, computed, onMounted } from 'vue'
+import { ElMessageBox, ElMessage } from 'element-plus'
+
+const API_BASE = 'http://localhost:8082'
 
 export interface Skill {
-  id: number
+  id: string
   name: string
   description: string
-  type: string
+  description_cn?: string
+  command: string
+  args?: string
+  env?: string
   category: string
-  status: 'running' | 'stopped' | 'error'
-  port: number
-  createdAt: string
-  tools: number
+  status: string
+  created_at?: string
 }
 
 export function useSkills() {
+  // 从 API 获取 MCP 列表
+  const fetchSkills = async () => {
+    try {
+      const response = await fetch(`${API_BASE}/mcp/list`)
+      const result = await response.json()
+      if (result && Array.isArray(result)) {
+        skills.value = result.map((mcp: any) => ({
+          id: mcp.id,
+          name: mcp.name,
+          description: mcp.description || '',
+          description_cn: mcp.description_cn || '',
+          command: mcp.command || '',
+          args: mcp.args || '',
+          env: mcp.env || '',
+          category: mcp.category || 'custom',
+          status: mcp.status || 'stopped',
+          created_at: mcp.created_at,
+        }))
+      }
+    } catch (error) {
+      console.error('Failed to fetch MCP list:', error)
+    }
+  }
+
+  onMounted(() => {
+    fetchSkills()
+  })
   // Skill 数据
   const skills = ref<Skill[]>([
     { id: 1, name: 'Linear', description: 'Linear API integration for project management', type: 'API', category: 'api', status: 'running', port: 3001, createdAt: '2025-04-10', tools: 12 },