mcp-probe-kit 1.15.1 → 2.0.0

package/build/tools/render_ui.js

@@ -1,384 +1,238 @@
+import { okStructured } from "../lib/response.js";
 /**
- * UI 渲染工具
- *
+ * UI 渲染引擎（内部工具）
  * 将 JSON 模板渲染为最终代码
- * 自动应用设计规范，确保样式统一
  */
-const PROMPT_TEMPLATE = `# 🎨 UI 代码渲染
-
-## 🎯 任务目标
-
-将 JSON 模板渲染为最终代码，自动应用设计规范。
-
-**输入文件**: \`{templatePath}\`
-**框架**: {framework}
-
----
-
-## 📋 执行流程
+export async function renderUi(args) {
+    try {
+        const fs = await import('fs/promises');
+        const path = await import('path');
+        const templatePath = args.template;
+        const framework = args.framework || 'react';
+        if (!templatePath) {
+            const errorData = {
+                summary: "缺少模板路径参数",
+                framework: framework,
+                code: '',
+            };
+            return okStructured(`❌ 缺少模板路径参数
 
-### 第1步：读取必要文件
+**用法**:
+\`\`\`
+render_ui --template="docs/ui/pages/login.json" --framework="react"
+\`\`\`
 
-**操作**:
-1. 读取 UI 模板: \`{templatePath}\`
-2. 读取组件目录: \`docs/component-catalog.json\`
-3. 读取设计指南: \`docs/design-system.md\` ✨
-4. 读取设计规范: \`docs/design-system.json\`
+**支持的框架**: react, vue, html
+`, errorData, {
+                schema: (await import('../schemas/output/ui-ux-tools.js')).RenderResultSchema,
+            });
+        }
+        // 读取模板文件
+        const fullTemplatePath = path.join(process.cwd(), templatePath);
+        let template;
+        try {
+            const templateContent = await fs.readFile(fullTemplatePath, 'utf-8');
+            template = JSON.parse(templateContent);
+        }
+        catch (error) {
+            const errorData = {
+                summary: "模板文件读取失败",
+                framework: framework,
+                code: '',
+            };
+            return okStructured(`❌ 模板文件读取失败: ${templatePath}
+
+**可能的原因**:
+1. 文件不存在
+2. 文件格式错误（不是有效的 JSON）
+3. 文件路径错误
+
+**建议**:
+1. 检查文件路径是否正确
+2. 使用 \`ui_search --mode=template\` 查看可用模板
+3. 使用 \`start_ui\` 生成新模板
+`, errorData, {
+                schema: (await import('../schemas/output/ui-ux-tools.js')).RenderResultSchema,
+            });
+        }
+        // 读取设计系统和组件目录
+        const designSystemPath = path.join(process.cwd(), 'docs', 'design-system.json');
+        const catalogPath = path.join(process.cwd(), 'docs', 'ui', 'component-catalog.json');
+        let designSystem = {};
+        let catalog = { components: [] };
+        try {
+            const designSystemContent = await fs.readFile(designSystemPath, 'utf-8');
+            designSystem = JSON.parse(designSystemContent);
+        }
+        catch (error) {
+            console.warn('Design system not found, using defaults');
+        }
+        try {
+            const catalogContent = await fs.readFile(catalogPath, 'utf-8');
+            catalog = JSON.parse(catalogContent);
+        }
+        catch (error) {
+            console.warn('Component catalog not found, using defaults');
+        }
+        // 渲染代码（简化版本，实际实现会更复杂）
+        let code = '';
+        const usedComponents = [];
+        const designTokens = {};
+        if (framework === 'react') {
+            code = renderReact(template, designSystem, catalog, usedComponents, designTokens);
+        }
+        else if (framework === 'vue') {
+            code = renderVue(template, designSystem, catalog, usedComponents, designTokens);
+        }
+        else if (framework === 'html') {
+            code = renderHtml(template, designSystem, catalog, usedComponents, designTokens);
+        }
+        else {
+            const errorData = {
+                summary: "不支持的框架",
+                framework: framework,
+                code: '',
+            };
+            return okStructured(`❌ 不支持的框架: ${framework}
 
-**为什么要读取 design-system.md？**
-- 理解设计理念和原则（如：专业、现代、简洁）
-- 了解配色方案的使用场景（主色用于主要操作，辅色用于次要操作）
-- 理解字体配对逻辑（标题用什么字体、正文用什么字体）
-- 学习间距系统规则（什么时候用大间距、小间距）
-- 查看反模式警告（避免什么样的设计）
-- 确保生成的代码符合设计理念
+**支持的框架**: react, vue, html
+`, errorData, {
+                schema: (await import('../schemas/output/ui-ux-tools.js')).RenderResultSchema,
+            });
+        }
+        const message = `✅ UI 代码已渲染
 
-**验证**:
-- [ ] 所有文件都存在
-- [ ] JSON 格式正确
-- [ ] 模板引用的组件在组件目录中存在
-- [ ] 理解了 design-system.md 中的设计理念
+**框架**: ${framework}
+**模板**: ${templatePath}
+**使用的组件**: ${usedComponents.join(', ') || '无'}
 
 ---
 
-### 第2步：解析模板结构
-
-**操作**:
-1. 解析 JSON 模板的 layout 结构
-2. 识别所有使用的组件
-3. 提取组件的 props
+## 渲染的代码
 
-**示例模板**:
-\`\`\`json
-{
-  "name": "LoginForm",
-  "layout": {
-    "type": "Container",
-    "props": { "maxWidth": "sm" },
-    "children": [
-      {
-        "type": "Card",
-        "props": { "title": "登录" },
-        "children": [
-          {
-            "type": "Input",
-            "props": { "label": "用户名", "type": "text" }
-          },
-          {
-            "type": "Button",
-            "props": { "variant": "primary", "label": "登录" }
-          }
-        ]
-      }
-    ]
-  }
-}
+\`\`\`${framework === 'react' ? 'tsx' : framework === 'vue' ? 'vue' : 'html'}
+${code}
 \`\`\`
 
 ---
 
-### 第3步：替换占位符
-
-**操作**:
-对每个组件，从组件目录中获取样式定义，然后替换占位符。
-
-**占位符替换规则**:
-
-1. **颜色占位符**:
-   - \`{colors.primary.500}\` → 从 design-system.json 读取 \`colors.primary["500"]\`
-   - 示例: \`bg-[{colors.primary.500}]\` → \`bg-[#3b82f6]\`
+## 使用的设计 Token
 
-2. **字体占位符**:
-   - \`{typography.fontSize.base}\` → 从 design-system.json 读取
-   - 示例: \`text-[{typography.fontSize.base}]\` → \`text-[1rem]\`
+${Object.entries(designTokens).map(([key, value]) => `- **${key}**: ${value}`).join('\n') || '无'}
 
-3. **间距占位符**:
-   - \`{spacing.scale.4}\` → 从 design-system.json 读取 \`spacing.scale[4]\`
-   - 示例: \`space-y-[{spacing.scale.4}]\` → \`space-y-4\`
-
-4. **圆角占位符**:
-   - \`{borderRadius.md}\` → 从 design-system.json 读取
-   - 示例: \`rounded-[{borderRadius.md}]\` → \`rounded-md\`
-
-5. **阴影占位符**:
-   - \`{shadows.md}\` → 从 design-system.json 读取
-   - 示例: \`shadow-[{shadows.md}]\` → \`shadow-md\`
+**提示**: 代码已自动应用设计系统中的样式 Token。
+`;
+        const structuredData = {
+            summary: `UI 代码已渲染 - ${framework}`,
+            framework: framework,
+            code,
+            usedComponents,
+            designTokens,
+        };
+        return okStructured(message, structuredData, {
+            schema: (await import('../schemas/output/ui-ux-tools.js')).RenderResultSchema,
+        });
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        const errorData = {
+            summary: "UI 渲染失败",
+            framework: args.framework || 'react',
+            code: '',
+        };
+        return okStructured(`❌ UI 渲染失败: ${errorMessage}
+
+**可能的原因**:
+1. 模板格式错误
+2. 设计系统文件缺失
+3. 组件目录文件缺失
+
+**建议**:
+1. 检查模板文件格式
+2. 运行 \`ui_design_system\` 生成设计系统
+3. 运行 \`init_component_catalog\` 生成组件目录
+`, errorData, {
+            schema: (await import('../schemas/output/ui-ux-tools.js')).RenderResultSchema,
+        });
+    }
+}
+/**
+ * 渲染 React 代码
+ */
+function renderReact(template, designSystem, catalog, usedComponents, designTokens) {
+    const componentName = template.name || 'Component';
+    // 提取使用的设计 Token
+    if (designSystem.colors?.primary) {
+        designTokens['primary-color'] = Object.values(designSystem.colors.primary)[0];
+    }
+    if (designSystem.typography?.fontFamilies) {
+        designTokens['font-family'] = Object.values(designSystem.typography.fontFamilies)[0];
+    }
+    // 简化的渲染逻辑
+    return `import React from 'react';
 
-**替换算法**:
-\`\`\`typescript
-function replacePlaceholders(styleString: string, designSystem: any): string {
-  // 匹配 {path.to.value} 格式
-  return styleString.replace(/\\{([^}]+)\\}/g, (match, path) => {
-    const value = getValueByPath(designSystem, path);
-    return value || match; // 找不到则保留原样
-  });
+interface ${componentName}Props {
+  // Props will be defined here
 }
 
-function getValueByPath(obj: any, path: string): any {
-  return path.split('.').reduce((current, key) => {
-    if (current && typeof current === 'object') {
-      // 处理数组索引，如 spacing.scale.4
-      if (!isNaN(Number(key)) && Array.isArray(current)) {
-        return current[Number(key)];
-      }
-      return current[key];
-    }
-    return undefined;
-  }, obj);
-}
-\`\`\`
-
----
-
-### 第4步：生成代码
-
-根据框架生成对应的代码。
-
-#### React 代码生成
-
-\`\`\`tsx
-import React from 'react';
-
-export const {componentName}: React.FC = () => {
+export const ${componentName}: React.FC<${componentName}Props> = (props) => {
   return (
-    <div className="{containerClasses}">
-      {/* 递归渲染子组件 */}
-      <div className="{cardClasses}">
-        <h2 className="text-2xl font-semibold mb-4">{title}</h2>
-        
-        <div className="space-y-4">
-          {/* Input 组件 */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              {label}
-            </label>
-            <input
-              type="{type}"
-              className="{inputClasses}"
-            />
-          </div>
-          
-          {/* Button 组件 */}
-          <button className="{buttonClasses}">
-            {buttonLabel}
-          </button>
-        </div>
-      </div>
+    <div className="${componentName.toLowerCase()}">
+      <h1>${template.description || componentName}</h1>
+      {/* Component content will be rendered here */}
     </div>
   );
 };
-\`\`\`
 
-**关键点**:
-- 所有 className 都是替换占位符后的实际值
-- 颜色、间距、圆角都来自设计规范
-- 保证样式统一
-
-#### Vue 3 代码生成
-
-\`\`\`vue
-<template>
-  <div :class="containerClasses">
-    <div :class="cardClasses">
-      <h2 class="text-2xl font-semibold mb-4">{{ title }}</h2>
-      
-      <div class="space-y-4">
-        <div>
-          <label class="block text-sm font-medium text-gray-700 mb-1">
-            {{ label }}
-          </label>
-          <input
-            :type="type"
-            :class="inputClasses"
-          />
-        </div>
-        
-        <button :class="buttonClasses">
-          {{ buttonLabel }}
-        </button>
-      </div>
-    </div>
+export default ${componentName};
+`;
+}
+/**
+ * 渲染 Vue 代码
+ */
+function renderVue(template, designSystem, catalog, usedComponents, designTokens) {
+    const componentName = template.name || 'Component';
+    return `<template>
+  <div class="${componentName.toLowerCase()}">
+    <h1>{{ title }}</h1>
+    <!-- Component content will be rendered here -->
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 
-const title = ref('{title}');
-const label = ref('{label}');
-const type = ref('{type}');
-const buttonLabel = ref('{buttonLabel}');
-
-const containerClasses = '{containerClasses}';
-const cardClasses = '{cardClasses}';
-const inputClasses = '{inputClasses}';
-const buttonClasses = '{buttonClasses}';
+const title = ref('${template.description || componentName}');
 </script>
-\`\`\`
-
----
-
-### 第5步：代码优化
-
-**操作**:
-1. 格式化代码（缩进、换行）
-2. 添加 TypeScript 类型
-3. 添加注释说明
-4. 提取可复用的样式类
-
-**优化示例**:
-\`\`\`tsx
-// 提取常量
-const BUTTON_CLASSES = {
-  primary: 'bg-[#3b82f6] text-white hover:bg-[#2563eb]',
-  secondary: 'bg-[#8b5cf6] text-white hover:bg-[#7c3aed]',
-} as const;
-
-// 使用常量
-<button className={\`\${baseClasses} \${BUTTON_CLASSES[variant]}\`}>
-  {label}
-</button>
-\`\`\`
-
----
-
-## ✅ 输出结果
-
-生成的代码包含：
-
-1. **完整的组件实现**
-   - React: Hooks + TypeScript
-   - Vue: Composition API + TypeScript
-   - HTML: 原生 JavaScript
-
-2. **自动应用的设计规范**
-   - ✅ 设计理念来自 design-system.md（UI 风格、设计原则）
-   - ✅ 颜色来自 design-system.json（精确的色值）
-   - ✅ 字体来自 design-system.json（字体族和大小）
-   - ✅ 间距来自 design-system.json（间距比例）
-   - ✅ 圆角来自 design-system.json（圆角大小）
-   - ✅ 阴影来自 design-system.json（阴影效果）
-   - ✅ 最佳实践来自 design-system.md（使用建议）
-
-3. **代码特点**
-   - ✅ 类型安全（TypeScript）
-   - ✅ 可访问性（A11y）
-   - ✅ 响应式设计
-   - ✅ 样式统一
-   - ✅ 符合设计理念
-
----
-
-## 📌 注意事项
-
-1. **占位符格式**: 必须严格遵循 \`{path.to.value}\` 格式
-2. **路径正确性**: 确保路径在 design-system.json 中存在
-3. **组件存在性**: 模板中的组件必须在 component-catalog.json 中定义
-4. **嵌套处理**: 正确处理组件的嵌套关系
-
----
-
-## 🚀 使用示例
-
-### 示例 1：渲染登录表单
-
-\`\`\`bash
-# 假设已有 docs/ui/login-form.json
-render_ui docs/ui/login-form.json --framework=react
-\`\`\`
-
-**输出**:
-- 完整的 React 组件代码
-- 自动应用设计规范
-- 可直接使用
-
-### 示例 2：渲染数据表格
-
-\`\`\`bash
-render_ui docs/ui/data-table.json --framework=vue
-\`\`\`
-
-**输出**:
-- 完整的 Vue 3 组件代码
-- 自动应用设计规范
-- 包含 TypeScript 类型
 
----
-
-## ⚠️ 边界约束
-
-- ❌ 仅输出代码，不自动创建文件
-- ❌ 不执行代码或命令
-- ✅ 输出完整可用的组件代码
-- ✅ 自动应用设计规范
-- ✅ 保证样式统一
-
----
-
-## 🔗 相关工具
-
-- **ui_design_system**: 生成设计规范
-- **init_component_catalog**: 生成组件目录
-- **ui_search --mode=template**: 获取 UI 模板
-- **start_ui**: 一键完成整个流程（推荐）
+<style scoped>
+.${componentName.toLowerCase()} {
+  /* Styles will be applied here */
+}
+</style>
 `;
+}
 /**
- * UI 渲染工具
+ * 渲染 HTML 代码
  */
-export async function renderUi(args) {
-    try {
-        // 解析参数
-        const templatePath = args.template || args.path || args.input || '';
-        const framework = args.framework || 'react';
-        if (!templatePath) {
-            return {
-                content: [
-                    {
-                        type: "text",
-                        text: `❌ 缺少必要参数
-
-**用法**:
-\`\`\`
-render_ui <template-path> [--framework=react|vue|html]
-\`\`\`
-
-**示例**:
-\`\`\`
-render_ui docs/ui/login-form.json
-render_ui docs/ui/login-form.json --framework=vue
-\`\`\`
-
-**提示**: 
-- 模板文件应该是 JSON 格式
-- 确保已运行 \`ui_design_system\` 和 \`init_component_catalog\`
-`,
-                    },
-                ],
-                isError: true,
-            };
-        }
-        const guide = PROMPT_TEMPLATE
-            .replace(/{templatePath}/g, templatePath)
-            .replace(/{framework}/g, framework);
-        return {
-            content: [
-                {
-                    type: "text",
-                    text: guide,
-                },
-            ],
-        };
-    }
-    catch (error) {
-        const errorMessage = error instanceof Error ? error.message : String(error);
-        return {
-            content: [
-                {
-                    type: "text",
-                    text: `❌ UI 渲染失败: ${errorMessage}`,
-                },
-            ],
-            isError: true,
-        };
-    }
+function renderHtml(template, designSystem, catalog, usedComponents, designTokens) {
+    const componentName = template.name || 'Component';
+    return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${componentName}</title>
+  <style>
+    /* Styles will be applied here */
+  </style>
+</head>
+<body>
+  <div class="${componentName.toLowerCase()}">
+    <h1>${template.description || componentName}</h1>
+    <!-- Component content will be rendered here -->
+  </div>
+</body>
+</html>
+`;
 }

package/build/tools/resolve_conflict.d.ts

@@ -1,13 +1 @@
-export declare function resolveConflict(args: any): Promise<{
-    content: {
-        type: string;
-        text: string;
-    }[];
-    isError?: undefined;
-} | {
-    content: {
-        type: string;
-        text: string;
-    }[];
-    isError: boolean;
-}>;
+export declare function resolveConflict(args: any): Promise<import("../lib/response.js").ToolResponse>;

package/build/tools/resolve_conflict.js

@@ -1,4 +1,5 @@
 import { parseArgs, getString } from "../utils/parseArgs.js";
+import { okStructured } from "../lib/response.js";
 // resolve_conflict 工具实现
 export async function resolveConflict(args) {
     try {
@@ -325,25 +326,27 @@ git mergetool
 2. 双方修改意图
 3. 推荐的合并方案
 4. 完整的解决后代码`;
-        return {
-            content: [
-                {
-                    type: "text",
-                    text: message,
-                },
-            ],
+        // 创建结构化数据对象
+        const structuredData = {
+            summary: "Git 冲突解决指南",
+            conflicts: [],
+            resolvedCode: "待分析冲突后生成",
+            explanation: "请提供冲突内容以进行分析"
         };
+        return okStructured(message, structuredData, {
+            schema: (await import("../schemas/output/project-tools.js")).ConflictResolutionSchema,
+        });
     }
     catch (error) {
         const errorMessage = error instanceof Error ? error.message : String(error);
-        return {
-            content: [
-                {
-                    type: "text",
-                    text: `❌ 冲突解决失败: ${errorMessage}`,
-                },
-            ],
-            isError: true,
+        const errorData = {
+            summary: "冲突解决失败",
+            conflicts: [],
+            resolvedCode: "",
+            explanation: errorMessage
         };
+        return okStructured(`❌ 冲突解决失败: ${errorMessage}`, errorData, {
+            schema: (await import("../schemas/output/project-tools.js")).ConflictResolutionSchema,
+        });
     }
 }

package/build/tools/security_scan.d.ts

@@ -7,16 +7,4 @@
 /**
  * security_scan 工具实现
  */
-export declare function securityScan(args: any): Promise<{
-    content: {
-        type: string;
-        text: string;
-    }[];
-    isError?: undefined;
-} | {
-    content: {
-        type: string;
-        text: string;
-    }[];
-    isError: boolean;
-}>;
+export declare function securityScan(args: any): Promise<import("../lib/response.js").ToolResponse>;