@fjyueke/bify-mcp 1.0.3 → 1.0.5

package/README.md

@@ -9,26 +9,89 @@
 
 Bify 是基于 Taroify 的移动端组件库，基于 Vant 视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。
 
-Bify MCP 是一项独立的 MCP（模型上下文协议）服务，旨在将 Bify 与大模型连接起来。它使大模型能够直接从文档中检索组件、API数据。
+Bify MCP 是一项独立的 MCP（模型上下文协议）服务，旨在将 Bify 与大模型连接起来。它使大模型能够直接从文档中检索组件、API 数据，并支持 Arco Mobile → Bify 代码转换。
 
 - 直接使用 npx 运行
 - 无需外部依赖，只需要 Node 环境
+- 支持 68+ 个组件文档查询
+- 支持 Arco Mobile 代码转换
 
-## Cursor 用法
+## 配置方式
 
-Cursor Mcp 使用指南参考：<https://docs.cursor.com/context/model-context-protocol#using-mcp-tools-in-agent>
+### Cursor
 
-``` json
+```json
 {
   "mcpServers": {
     "@fjyueke/bify-mcp": {
       "command": "npx",
       "args": [
         "-y",
-        "@fjyueke/bify-mcp",
+        "@fjyueke/bify-mcp"
       ],
       "env": {}
     }
   }
 }
 ```
+
+### Trae
+
+在 `.trae/skills/` 目录下创建配置文件，或在 Trae 设置中添加 MCP 服务。
+
+### 其他支持 MCP 的 IDE
+
+参考对应 IDE 的 MCP 配置文档，使用上述配置格式。
+
+## 可用工具
+
+| 工具名 | 功能 |
+|--------|------|
+| `list-components` | 列出所有可用的 Bify 组件 |
+| `get-component-docs` | 获取指定组件的详细文档 |
+| `get-component-props` | 获取指定组件的属性和 API 文档 |
+| `list-component-example` | 获取指定组件的所有示例代码 |
+| `convert-arco-to-bify` | 将 Arco Mobile React 代码转换为 Bify 代码 |
+| `get-arco-conversion-help` | 获取 Arco Mobile → Bify 转换帮助信息 |
+
+## 使用示例
+
+### 查询组件文档
+
+```bash
+# 列出所有组件
+list-components
+
+# 获取 Cell 组件文档
+get-component-docs Cell
+
+# 获取 Cell 组件属性
+get-component-props Cell
+
+# 获取 Cell 组件示例
+list-component-example Cell
+```
+
+### Arco Mobile 代码转换
+
+```bash
+# 获取转换帮助
+get-arco-conversion-help
+
+# 转换代码
+convert-arco-to-bify "<Cell label='标题' desc='描述' showArrow>内容</Cell>"
+```
+
+## 版本历史
+
+| 版本 | 日期 | 说明 |
+|------|------|------|
+| 1.0.3 | 2026-07-13 | 优化代码转换工具，增加 40+ 组件映射、值映射、布尔属性转换 |
+| 1.0.2 | 2026-07-13 | 添加 Arco Mobile → Bify 代码转换功能 |
+| 1.0.1 | 2026-07-13 | 更正包名为 bify-mcp |
+| 1.0.0 | 2026-07-13 | 初始版本，支持 68+ 组件文档查询 |
+
+## 相关链接
+
+- npm 包地址：https://www.npmjs.com/package/@fjyueke/bify-mcp
+- Bify 组件库：https://github.com/fjyueke/bify

package/dist/index.js

@@ -616,20 +616,36 @@ function findAllArcoComponents() {
 
 // src/services/arco-converter.ts
 async function convertArcoToBify(arcoCode) {
+  const warnings = [];
+  const suggestions = [];
+  const usedMappings = [];
   let result = arcoCode;
-  result = convertImports(result);
-  result = convertComponents(result);
+  const importsResult = convertImports(result, warnings);
+  result = importsResult.code;
+  usedMappings.push(...importsResult.mappings);
+  const componentsResult = convertComponents(result, warnings, suggestions);
+  result = componentsResult.code;
+  usedMappings.push(...componentsResult.mappings);
   result = convertIconImports(result);
   result = fixCodeFormat(result);
-  return result;
+  const uniqueMappings = usedMappings.filter(
+    (m, index, self) => self.findIndex((t) => t.arcoName === m.arcoName) === index
+  );
+  return {
+    code: result,
+    mappings: uniqueMappings,
+    warnings,
+    suggestions
+  };
 }
-function convertImports(code) {
+function convertImports(code, warnings) {
   let result = code;
+  const usedMappings = [];
   const arcoImportRegex = /import\s+([\s\S]*?)\s+from\s+['"]@arco-design\/mobile-react['"]/g;
   const matches = [...code.matchAll(arcoImportRegex)];
   const bifyCoreComponents = [];
   const bifyIconComponents = [];
-  const remainingComponents = [];
+  const unsupportedComponents = [];
   for (const match of matches) {
     const importContent = match[1].trim();
     const namedImportRegex = /\{([\s\S]*?)\}/;
@@ -639,17 +655,16 @@ function convertImports(code) {
       for (const component of components) {
         const mapping = findMappingByArcoName(component);
         if (mapping) {
+          usedMappings.push(mapping);
           if (mapping.bifyImport === "@fjyueke/bify-icons") {
             bifyIconComponents.push(component);
           } else {
             bifyCoreComponents.push(mapping.bifyName || component);
           }
         } else {
-          remainingComponents.push(component);
+          unsupportedComponents.push(component);
         }
       }
-    } else {
-      remainingComponents.push(importContent);
     }
     result = result.replace(match[0], "");
   }
@@ -666,22 +681,29 @@ function convertImports(code) {
 `;
     result = iconImport + result;
   }
-  return result;
+  if (unsupportedComponents.length > 0) {
+    warnings.push(`\u4EE5\u4E0B\u7EC4\u4EF6\u6682\u4E0D\u652F\u6301\u81EA\u52A8\u8F6C\u6362\uFF1A${unsupportedComponents.join(", ")}`);
+  }
+  return { code: result, mappings: usedMappings };
 }
-function convertComponents(code) {
+function convertComponents(code, warnings, suggestions) {
   let result = code;
+  const usedMappings = [];
   const arcoComponents = findAllArcoComponents();
   for (const arcoComponent of arcoComponents) {
     const mapping = findMappingByArcoName(arcoComponent);
     if (!mapping || !mapping.bifyName) continue;
+    const componentPattern = new RegExp(`<${arcoComponent}`, "g");
+    if (!componentPattern.test(code)) continue;
+    usedMappings.push(mapping);
     const bifyComponent = mapping.bifyName;
-    const componentRegex = new RegExp(
+    const selfClosingRegex = new RegExp(
       `<${arcoComponent}([^>]*)\\/?>`,
       "g"
     );
-    result = result.replace(componentRegex, (match, props) => {
+    result = result.replace(selfClosingRegex, (match, props) => {
       let newProps = props;
-      newProps = applyPropMappings(newProps, mapping);
+      newProps = applyPropMappings(newProps, mapping, warnings);
       newProps = applyValueMappings(newProps, mapping);
       return `<${bifyComponent}${newProps}/>`;
     });
@@ -691,15 +713,23 @@ function convertComponents(code) {
     );
     result = result.replace(closingComponentRegex, (match, props, children) => {
       let newProps = props;
-      newProps = applyPropMappings(newProps, mapping);
+      newProps = applyPropMappings(newProps, mapping, warnings);
       newProps = applyValueMappings(newProps, mapping);
       return `<${bifyComponent}${newProps}>${children}</${bifyComponent}>`;
     });
+    addSuggestions(mapping, suggestions);
   }
-  return result;
+  return { code: result, mappings: usedMappings };
 }
-function applyPropMappings(props, mapping) {
+function applyPropMappings(props, mapping, warnings) {
   let result = props;
+  const arcoProps = props.match(/\b(\w+)=/g)?.map((p) => p.slice(0, -1)) || [];
+  const mappedProps = mapping.propMappings.map((m) => m.arcoProp);
+  for (const arcoProp of arcoProps) {
+    if (!mappedProps.includes(arcoProp) && !["className", "style", "children"].includes(arcoProp)) {
+      warnings.push(`\u7EC4\u4EF6 ${mapping.arcoName} \u7684\u5C5E\u6027 ${arcoProp} \u672A\u627E\u5230\u6620\u5C04\uFF0C\u5DF2\u4FDD\u7559\u539F\u6837`);
+    }
+  }
   for (const propMapping of mapping.propMappings) {
     const propRegex = new RegExp(
       `${propMapping.arcoProp}=(["'])(.*?)\\1`,
@@ -731,7 +761,10 @@ function applyValueMappings(props, mapping) {
     );
     result = result.replace(propRegex, (match, quote, value) => {
       const mappedValue = valueMap[value] || value;
-      return `${propName}=${quote}${mappedValue}${quote}`;
+      if (mappedValue !== value) {
+        return `${propName}=${quote}${mappedValue}${quote}`;
+      }
+      return match;
     });
   }
   return result;
@@ -753,6 +786,18 @@ function fixCodeFormat(code) {
   result = nonEmptyLines.join("\n");
   return result.trim();
 }
+function addSuggestions(mapping, suggestions) {
+  const suggestionMap = {
+    Cell: "Bify \u7684 Cell \u7EC4\u4EF6\u652F\u6301\u66F4\u591A\u5E03\u5C40\u5C5E\u6027\uFF0C\u5EFA\u8BAE\u67E5\u770B\u6587\u6863\u4E86\u89E3 align\u3001size \u7B49\u5C5E\u6027",
+    Button: "Bify \u7684 Button \u7EC4\u4EF6\u652F\u6301\u66F4\u591A\u6837\u5F0F\u53D8\u4F53\uFF0C\u5EFA\u8BAE\u67E5\u770B variant \u5C5E\u6027",
+    Dialog: "Bify \u7684 Dialog \u7EC4\u4EF6\u652F\u6301\u66F4\u591A\u4EA4\u4E92\u9009\u9879\uFF0C\u5EFA\u8BAE\u67E5\u770B closeOnClickOverlay \u7B49\u5C5E\u6027",
+    Tabs: "Bify \u7684 Tabs \u7EC4\u4EF6\u652F\u6301\u6ED1\u52A8\u5207\u6362\uFF0C\u5EFA\u8BAE\u67E5\u770B swipeable \u5C5E\u6027",
+    Field: "Bify \u7684 Field \u7EC4\u4EF6\u652F\u6301\u66F4\u591A\u9A8C\u8BC1\u5C5E\u6027\uFF0C\u5EFA\u8BAE\u67E5\u770B rules \u5C5E\u6027"
+  };
+  if (suggestionMap[mapping.arcoName]) {
+    suggestions.push(suggestionMap[mapping.arcoName]);
+  }
+}
 async function getArcoConversionHelp() {
   const availableComponents = componentMappings.filter((m) => m.bifyName).map((m) => `- ${m.arcoName} \u2192 ${m.bifyName}`).join("\n");
   const valueMappingExamples = componentMappings.filter((m) => m.valueMappings).map((m) => {
@@ -806,9 +851,15 @@ import { Cell, CellGroup, Button } from '@fjyueke/bify-core';
 | \`max\` | \`count\` | Rate \u6700\u5927\u6570\u91CF |
 | \`percent\` | \`percentage\` | Progress \u767E\u5206\u6BD4 |
 
+### \u6700\u4F73\u5B9E\u8DF5
+
+1. **\u4F7F\u7528 AI \u8F85\u52A9\u8F6C\u6362**\uFF1A\u540C\u65F6\u914D\u7F6E Arco Mobile MCP \u548C Bify MCP\uFF0C\u8BA9 AI \u67E5\u8BE2\u53CC\u65B9\u6587\u6863\u540E\u518D\u8FDB\u884C\u8F6C\u6362
+2. **\u624B\u52A8\u68C0\u67E5**\uFF1A\u8F6C\u6362\u540E\u8BF7\u68C0\u67E5\u8B66\u544A\u4FE1\u606F\uFF0C\u5904\u7406\u672A\u6620\u5C04\u7684\u5C5E\u6027
+3. **\u53C2\u8003\u6587\u6863**\uFF1A\u4F7F\u7528 \`get-component-docs\` \u548C \`get-component-props\` \u67E5\u770B Bify \u7EC4\u4EF6\u7684\u8BE6\u7EC6\u7528\u6CD5
+
 ### \u8C03\u7528\u65B9\u5F0F
 
-\u4F7F\u7528 \`convert-arco-to-bify\` \u5DE5\u5177\uFF0C\u4F20\u5165 Arco Mobile \u4EE3\u7801\u5373\u53EF\u83B7\u5F97\u8F6C\u6362\u540E\u7684 Bify \u4EE3\u7801\u3002`;
+\u4F7F\u7528 \`convert-arco-to-bify\` \u5DE5\u5177\uFF0C\u4F20\u5165 Arco Mobile \u4EE3\u7801\u5373\u53EF\u83B7\u5F97\u8F6C\u6362\u540E\u7684 Bify \u4EE3\u7801\u53CA\u8BE6\u7EC6\u62A5\u544A\u3002`;
 }
 
 // src/tools/components.ts
@@ -880,19 +931,50 @@ function registerTifyTools(server) {
   );
   server.tool(
     "convert-arco-to-bify",
-    "Converts Arco Mobile React code to Bify code",
+    "Converts Arco Mobile React code to Bify code with detailed report including warnings and suggestions",
     { arcoCode: z.string() },
     async (args) => {
-      const convertedCode = await convertArcoToBify(args.arcoCode);
+      const result = await convertArcoToBify(args.arcoCode);
+      let report = `## \u8F6C\u6362\u7ED3\u679C
+
+### \u8F6C\u6362\u540E\u7684\u4EE3\u7801
+
+\`\`\`tsx
+${result.code}
+\`\`\``;
+      if (result.mappings.length > 0) {
+        report += `
+
+### \u4F7F\u7528\u7684\u6620\u5C04
+
+| Arco \u7EC4\u4EF6 | Bify \u7EC4\u4EF6 |
+|-----------|-----------|
+${result.mappings.map((m) => `| ${m.arcoName} | ${m.bifyName} |`).join("\n")}`;
+      }
+      if (result.warnings.length > 0) {
+        report += `
+
+### \u26A0\uFE0F \u8B66\u544A
+
+- ${result.warnings.join("\n- ")}`;
+      }
+      if (result.suggestions.length > 0) {
+        report += `
+
+### \u{1F4A1} \u5EFA\u8BAE
+
+- ${result.suggestions.join("\n- ")}`;
+      }
+      report += `
+
+### \u8F6C\u6362\u8BF4\u660E
+
+\u5982\u9700\u66F4\u7CBE\u786E\u7684\u8F6C\u6362\uFF0C\u5EFA\u8BAE\u540C\u65F6\u4F7F\u7528 Arco Mobile MCP \u548C Bify MCP \u67E5\u8BE2\u53CC\u65B9\u7EC4\u4EF6\u6587\u6863\u540E\u8FDB\u884C\u624B\u52A8\u8C03\u6574\u3002`;
       return {
         content: [
           {
             type: "text",
-            text: `## \u8F6C\u6362\u7ED3\u679C
-
-\`\`\`tsx
-${convertedCode}
-\`\`\``
+            text: report
           }
         ]
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fjyueke/bify-mcp",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
   "description": "MCP UI builder by Bify",
   "license": "MIT",