@blueking/bkui-knowledge 0.0.1-beta.13 → 0.0.1-beta.15

package/server/mcp-core.js

@@ -60,7 +60,7 @@ const TOOLS = [
     }
   },
 
-  // L2 工具: 获取组件 API
+  // L2 工具: 获取 Vue3 组件 API
   {
     name: "get_component_api",
     description: "【必须调用】获取 bk- 组件的 API 文档 (Props/Slots/Events/常见错误)。使用任何 bk- 组件前都应先调用此工具，避免使用错误的属性名。共 58 个组件: navigation, menu, table, form, dialog, button, input, select, checkbox, radio, date-picker, upload, tab, tree, cascader, steps, popover, message, notify, loading 等。",
@@ -75,6 +75,21 @@ const TOOLS = [
       required: ["componentName"]
     }
   },
+  // L2 工具: 获取 Vue2 组件 API
+  {
+    name: "get_component_api_vue2",
+    description: "获取 bk- 组件的 API 文档 (Props/Slots/Events)。使用任何 bk- 组件前都应先调用此工具，避免使用错误的属性名。共 70 个组件: navigation, menu, table, form, dialog, button, input, select, checkbox, radio, date-picker, upload, tab, tree, cascade, popover, message, notify, loading 等。",
+    inputSchema: {
+      type: "object",
+      properties: {
+        componentName: {
+          type: "string",
+          description: "组件名 (不含 bk- 前缀)，如: navigation, menu, table, form, dialog, button, input, select..."
+        }
+      },
+      required: ["componentName"]
+    }
+  },
 
   // 批量加载工具: 减少调用轮次
   {
@@ -96,6 +111,21 @@ const TOOLS = [
       }
     }
   },
+  // vue2 组件库批量加载工具: 减少调用轮次
+  {
+    name: "batch_load_vue2",
+    description: "批量加载 vue2 组件库多个组件，减少调用轮次。推荐用于一次获取多个组件。",
+    inputSchema: {
+      type: "object",
+      properties: {
+        componentNames: {
+          type: "array",
+          items: { type: "string" },
+          description: "组件名列表 (不含 bk- 前缀)"
+        }
+      }
+    }
+  },
 
   // 查看 Skills 同步状态
   {
@@ -130,7 +160,12 @@ const TOOLS = [
 const PROMPTS = [
   {
     name: "BKUI-EXPERT",
-    description: "设计稿还原专家模式。完整的 CoT 流程。",
+    description: "设计稿还原专家模式（使用Vue3 组件库）。完整的 CoT 流程。",
+    arguments: []
+  },
+  {
+    name: "BKUI-EXPERT-VUE2",
+    description: "设计稿还原专家模式（使用Vue2 组件库）。",
     arguments: []
   }
 ];
@@ -314,7 +349,7 @@ const Handlers = {
     return { content: [{ type: "text", text: content }] };
   },
 
-  // L2: 获取组件 API
+  // L2: 获取 Vue3 组件 API
   async get_component_api({ componentName }) {
     const manifest = loadManifest();
     const normalizedName = componentName.toLowerCase().replace('bk-', '');
@@ -391,6 +426,83 @@ const Handlers = {
     return { content: [{ type: "text", text: result }] };
   },
 
+   // L2: 获取 Vue2 组件 API
+   async get_component_api_vue2({ componentName }) {
+    const manifest = loadManifest();
+    const normalizedName = componentName.toLowerCase().replace('bk-', '');
+
+    const apiPath = path.join(KNOWLEDGE_DIR, manifest.componentApisVue2.base_path, `${normalizedName}.json`);
+
+    if (!fs.existsSync(apiPath)) {
+      // 降级：尝试从 reference 中搜索源码
+      return {
+        content: [{
+          type: "text",
+          text: `⚠️ 未找到 bk-${normalizedName} 的 API 文档。\n\n建议：\n1. 查看官方文档\n2. 或在 reference/bkui-vue-source 中搜索源码`
+        }]
+      };
+    }
+
+    const apiData = JSON.parse(fs.readFileSync(apiPath, 'utf-8'));
+    let result = `# ${apiData.name} 组件 API\n\n`;
+    result += `> ${apiData.description}\n\n`;
+
+    // Props
+    result += `## Props\n\n| 属性 | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n`;
+    for (const [name, prop] of Object.entries(apiData.props)) {
+      result += `| ${name} | ${prop.type} | ${prop.default} | ${prop.description} |\n`;
+    }
+
+    // Slots
+    if (apiData.slots) {
+      result += `\n## Slots\n\n| 名称 | 说明 |\n|------|------|\n`;
+      for (const [name, slot] of Object.entries(apiData.slots)) {
+        result += `| #${name} | ${slot.description} |\n`;
+      }
+    }
+
+    // Events
+    if (apiData.events) {
+      result += `\n## Events\n\n| 事件名 | 参数 | 说明 |\n|--------|------|------|\n`;
+      for (const [name, event] of Object.entries(apiData.events)) {
+        result += `| @${name} | ${event.params} | ${event.description} |\n`;
+      }
+    }
+
+    // Common Mistakes (重要!)
+    if (apiData.commonMistakes && apiData.commonMistakes.length > 0) {
+      result += `\n## ⚠️ 常见错误 (必读!)\n\n`;
+      apiData.commonMistakes.forEach((m, i) => {
+        result += `### 错误 ${i + 1}\n`;
+        result += `- ❌ 错误: \`${m.wrong}\`\n`;
+        result += `- ✅ 正确: \`${m.correct}\`\n`;
+        result += `- 原因: ${m.reason}\n\n`;
+      });
+    }
+
+    // Related Components
+    if (apiData.relatedComponents) {
+      result += `\n## 关联组件\n\n`;
+      for (const [compName, info] of Object.entries(apiData.relatedComponents)) {
+        result += `### ${compName}\n`;
+        result += `Props: \`${JSON.stringify(info.props)}\`\n\n`;
+      }
+    }
+
+    // 检查是否有可用示例 (L3 层)
+    const compExamples = manifest.componentExamplesVue2?.items?.find(c => c.id === normalizedName);
+    if (compExamples && compExamples.examples.length > 0) {
+      result += `\n## 📦 可用示例 (询问用户是否需要)\n\n`;
+      result += `如需查看完整示例代码，请询问用户后获取对应 resource:\n\n`;
+      compExamples.examples.forEach(ex => {
+        result += `- \`example://${normalizedName}/${ex.name}\` - ${ex.description}\n`;
+      });
+      result += `\n> 提示: 询问用户 "是否需要查看 ${apiData.name} 的示例代码？" 确认后再获取\n`;
+    }
+
+    return { content: [{ type: "text", text: result }] };
+  },
+
   // 批量加载
   async batch_load({ skillIds = [], componentNames = [] }) {
     const results = [];
@@ -431,6 +543,33 @@ const Handlers = {
     return { content: [{ type: "text", text: output }] };
   },
 
+  // 批量加载 vue2 组件库
+  async batch_load_vue2({ componentNames = [] }) {
+    const results = [];
+    for (const name of componentNames) {
+      try {
+        const api = await Handlers.get_component_api_vue2({ componentName: name });
+        results.push({ type: 'componentApi', name, content: api.content[0].text });
+      } catch (e) {
+        results.push({ type: 'componentApi', name, error: e.message });
+      }
+    }
+    // 格式化输出
+    let output = `# 批量加载结果\n\n`;
+    output += `共加载 ${results.length} 项资源\n\n`;
+
+    results.forEach((r, i) => {
+      output += `---\n\n## [${i + 1}] ${r.type}: ${r.id || r.name}\n\n`;
+      if (r.error) {
+        output += `❌ 加载失败: ${r.error}\n\n`;
+      } else {
+        output += r.content + '\n\n';
+      }
+    });
+
+    return { content: [{ type: "text", text: output }] };
+  },
+
   // 同步 Skills 信息
   async sync_skills({ preset, skillIds = [] }) {
     const manifest = loadManifest();
@@ -478,7 +617,7 @@ ${recommendedIds.map(id => {
   // Prompt 处理
   async get_prompt({ name }) {
     if (name === "BKUI-EXPERT") {
-      const prompt = `[设计稿还原专家模式]
+      const prompt = `[设计稿还原专家模式(Vue3 组件库)]
 
 ## 执行步骤
 
@@ -543,8 +682,25 @@ ${recommendedIds.map(id => {
           content: { type: "text", text: prompt }
         }]
       };
-    }
+    } else if (name === "BKUI-EXPERT-VUE2") {
+      const prompt = `[设计稿还原专家模式(Vue2 组件库)]
+
+## 执行步骤
+
+**Step 1: 获取组件 API 及示例代码**
+- 调用 batch_load_vue2 批量获取组件详细信息。
 
+**Step 2: 生成页面代码**
+- 根据设计稿布局对页面代码进行合理的组件化设计；
+- 生成100%还原设计稿图片的代码；"`;
+
+      return {
+        messages: [{
+          role: "user",
+          content: { type: "text", text: prompt }
+        }]
+      };
+    }
     throw new Error(`Prompt '${name}' not found`);
   }
 };