mcp-probe-kit 2.1.2 → 2.2.1

package/build/tools/__tests__/start_ui.integration.test.js

@@ -16,12 +16,15 @@ describe('start_ui 集成测试', () => {
             const text = result.content[0].text || '';
             // 1. 应该包含快速开始部分
             expect(text).toMatch(/^#\s+快速开始/m);
-            // 2. 应该包含 4 个步骤
-            expect(text).toMatch(/步骤 1.*生成设计系统/);
-            expect(text).toMatch(/步骤 2.*生成组件目录/);
-            expect(text).toMatch(/步骤 3.*搜索.*模板/);
-            expect(text).toMatch(/步骤 4.*渲染.*代码/);
+            // 2. 应该包含 6 个步骤（新增了项目上下文和更新索引）
+            expect(text).toMatch(/步骤 1.*生成项目上下文/);
+            expect(text).toMatch(/步骤 2.*生成设计系统/);
+            expect(text).toMatch(/步骤 3.*生成组件目录/);
+            expect(text).toMatch(/步骤 4.*搜索.*模板/);
+            expect(text).toMatch(/步骤 5.*渲染.*代码/);
+            expect(text).toMatch(/步骤 6.*更新项目上下文/);
             // 3. 每个步骤应该包含工具名称
+            expect(text).toMatch(/init_project_context/);
             expect(text).toMatch(/ui_design_system/);
             expect(text).toMatch(/init_component_catalog/);
             expect(text).toMatch(/ui_search/);

package/build/tools/__tests__/start_ui.unit.test.js

@@ -35,9 +35,9 @@ describe('start_ui 单元测试', () => {
         });
     });
     describe('参数解析', () => {
-        test('默认 framework 为 react', async () => {
+        test('默认 framework 为 html（最通用）', async () => {
             const result = await startUi({ description: '测试' });
-            expect(result.content[0].text).toMatch(/react/i);
+            expect(result.content[0].text).toMatch(/html/i);
         });
         test('支持 vue framework', async () => {
             const result = await startUi({

package/build/tools/gencommit.d.ts

@@ -1,4 +1,4 @@
-export declare function gencommit(args: any): Promise<import("../lib/response.js").ToolResponse | {
+export declare function gencommit(args: any): Promise<{
     content: {
         type: string;
         text: string;

package/build/tools/gencommit.js

@@ -1,6 +1,4 @@
 import { parseArgs, getString } from "../utils/parseArgs.js";
-import { okStructured } from "../lib/response.js";
-import { CommitMessageSchema } from "../schemas/structured-output.js";
 // gencommit 工具实现
 export async function gencommit(args) {
     try {
@@ -112,24 +110,17 @@ chore: 🤖 升级依赖版本至 1.2.9
 - 如果暂存区为空，提示用户先使用 \`git add\` 添加文件
 - 如果变更较多，建议分多次提交
 - 确保 commit 消息清晰描述了"做了什么"和"为什么"`;
-        // 创建示例结构化数据（用于演示格式）
-        // 注意：实际的 commit 数据应该由 AI 根据实际变更生成
-        const exampleCommitData = {
-            type: type || 'feat',
-            scope: '',
-            subject: '示例：添加新功能',
-            body: '这是一个示例 commit 消息\n\n实际使用时，AI 会根据代码变更生成真实的 commit 内容',
-            footer: '',
-            fullMessage: 'feat: 🎸 示例：添加新功能\n\n这是一个示例 commit 消息\n\n实际使用时，AI 会根据代码变更生成真实的 commit 内容',
-            emoji: '🎸',
+        // 返回纯文本指导
+        // AI 会根据这些指导分析代码变更并生成符合规范的 commit 消息
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: textMessage,
+                },
+            ],
+            isError: false,
         };
-        // 返回结构化输出
-        // textMessage 提供人类可读的指导信息
-        // exampleCommitData 提供结构化数据示例（AI 会根据实际情况生成真实数据）
-        return okStructured(textMessage, exampleCommitData, {
-            schema: CommitMessageSchema,
-            note: 'AI 应该根据实际代码变更生成真实的 commit 数据，而不是使用这个示例',
-        });
     }
     catch (error) {
         const errorMessage = error instanceof Error ? error.message : String(error);

package/build/tools/start_ui.js

@@ -11,20 +11,38 @@ import { parseArgs, getString } from "../utils/parseArgs.js";
 import { getReasoningEngine } from "./ui-ux-tools.js";
 import { okStructured } from "../lib/response.js";
 import { UIReportSchema } from "../schemas/structured-output.js";
+import { detectProjectType } from "../lib/project-detector.js";
 const PROMPT_TEMPLATE = `# 快速开始
 
 **职责说明**: 本工具仅提供执行指导，不执行实际操作。请按顺序调用以下 MCP 工具。
 
 执行以下工具：
 
-1. 检查 \`docs/design-system.md\` 是否存在，不存在则调用 \`ui_design_system --product_type="SaaS" --stack="{framework}"\`
-2. 检查 \`docs/component-catalog.json\` 是否存在，不存在则调用 \`init_component_catalog\`
-3. \`ui_search --mode=template --query="{description}"\`
-4. \`render_ui --template="docs/ui/{templateName}.json" --framework="{framework}"\`
+1. 检查 \`docs/project-context.md\` 是否存在，不存在则调用 \`init_project_context\`
+2. 检查 \`docs/design-system.md\` 是否存在，不存在则调用 \`ui_design_system --product_type="SaaS" --stack="{framework}"\`
+3. 检查 \`docs/component-catalog.json\` 是否存在，不存在则调用 \`init_component_catalog\`
+4. \`ui_search --mode=template --query="{description}"\`
+5. \`render_ui --template="docs/ui/{templateName}.json" --framework="{framework}"\`
+6. 将生成的 UI 文档添加到 \`docs/project-context.md\` 索引中
 
 ---
 
-## 步骤 1: 生成设计系统（如不存在）✅
+## 步骤 1: 生成项目上下文（如不存在）📋
+
+**检查**: 查看 \`docs/project-context.md\` 是否存在
+
+**如果不存在，调用工具**: \`init_project_context\`
+**参数**: 无（使用默认配置）
+
+**预期输出**: 
+- \`docs/project-context.md\` - 项目上下文索引文件
+- \`docs/project-context/\` - 项目文档目录
+
+**失败处理**: 确保 docs 目录存在且有写入权限
+
+---
+
+## 步骤 2: 生成设计系统（如不存在）🎨
 
 **检查**: 查看 \`docs/design-system.md\` 是否存在
 
@@ -43,7 +61,7 @@ const PROMPT_TEMPLATE = `# 快速开始
 
 ---
 
-## 步骤 2: 生成组件目录（如不存在）🔄
+## 步骤 3: 生成组件目录（如不存在）📦
 
 **检查**: 查看 \`docs/component-catalog.json\` 是否存在
 
@@ -51,11 +69,11 @@ const PROMPT_TEMPLATE = `# 快速开始
 **参数**: 无
 
 **预期输出**: \`docs/component-catalog.json\`
-**失败处理**: 确保步骤 1 的设计系统文件已生成
+**失败处理**: 确保步骤 2 的设计系统文件已生成
 
 ---
 
-## 步骤 3: 搜索 UI 模板 🔍
+## 步骤 4: 搜索 UI 模板 🔍
 
 **工具**: \`ui_search\`
 **参数**:
@@ -67,11 +85,11 @@ const PROMPT_TEMPLATE = `# 快速开始
 \`\`\`
 
 **预期输出**: 匹配的模板列表（可能为空）
-**失败处理**: 如果没有找到模板，继续到步骤 4 使用默认模板
+**失败处理**: 如果没有找到模板，继续到步骤 5 使用默认模板
 
 ---
 
-## 步骤 4: 渲染最终代码 🎨
+## 步骤 5: 渲染最终代码 💻
 
 **工具**: \`render_ui\`
 **参数**:
@@ -87,6 +105,32 @@ const PROMPT_TEMPLATE = `# 快速开始
 
 ---
 
+## 步骤 6: 更新项目上下文索引 📝
+
+**操作**: 将生成的 UI 文档添加到 \`docs/project-context.md\` 中
+
+**添加内容**:
+在 "## 📚 文档导航" 部分添加：
+
+\`\`\`markdown
+### [UI 设计系统](./design-system.md)
+项目的 UI 设计规范，包括颜色、字体、组件样式等
+
+### [UI 组件目录](./component-catalog.json)
+可用的 UI 组件及其属性定义
+\`\`\`
+
+在 "## 💡 开发时查看对应文档" 部分的 "添加新功能" 下添加：
+\`\`\`markdown
+- **UI 设计系统**: [design-system.md](./design-system.md) - 查看设计规范
+- **UI 组件目录**: [component-catalog.json](./component-catalog.json) - 查看可用组件
+\`\`\`
+
+**预期结果**: \`docs/project-context.md\` 包含 UI 相关文档的链接
+**失败处理**: 如果文件不存在，跳过此步骤
+
+---
+
 ## 高级选项
 
 ### 自定义设计系统
@@ -103,16 +147,75 @@ A: 不需要。如果文件已存在，直接跳过步骤 1。
 **Q: 如何使用自定义模板？**
 A: 在 \`docs/ui/\` 目录创建 JSON 模板文件，然后在步骤 4 中指定模板路径。
 `;
+/**
+ * 从 project-context.md 读取框架信息
+ */
+function getFrameworkFromContext(projectRoot) {
+    try {
+        const fs = require('fs');
+        const path = require('path');
+        const contextPath = path.join(projectRoot, 'docs', 'project-context.md');
+        if (!fs.existsSync(contextPath)) {
+            return null;
+        }
+        const content = fs.readFileSync(contextPath, 'utf-8');
+        // 匹配表格中的框架信息：| 框架 | xxx |
+        const match = content.match(/\|\s*框架\s*\|\s*([^\|]+)\s*\|/);
+        if (match && match[1]) {
+            const framework = match[1].trim();
+            if (framework && framework !== '无' && framework !== '未检测到') {
+                return framework;
+            }
+        }
+        return null;
+    }
+    catch (error) {
+        return null;
+    }
+}
 /**
  * 统一 UI 开发编排工具
  */
 export async function startUi(args) {
     try {
+        const projectRoot = process.cwd();
+        // 优先从 project-context.md 读取框架信息
+        let detectedFramework = 'html'; // 默认值
+        const contextFramework = getFrameworkFromContext(projectRoot);
+        if (contextFramework) {
+            // 从 project-context.md 中读取到了框架信息
+            const fw = contextFramework.toLowerCase();
+            if (fw.includes('vue') || fw.includes('nuxt')) {
+                detectedFramework = 'vue';
+            }
+            else if (fw.includes('react') || fw.includes('next')) {
+                detectedFramework = 'react';
+            }
+            else if (fw.includes('html')) {
+                detectedFramework = 'html';
+            }
+        }
+        else {
+            // 如果没有 project-context.md，则实时检测
+            const detection = detectProjectType(projectRoot);
+            if (detection.framework) {
+                const fw = detection.framework.toLowerCase();
+                if (fw.includes('vue') || fw.includes('nuxt')) {
+                    detectedFramework = 'vue';
+                }
+                else if (fw.includes('react') || fw.includes('next')) {
+                    detectedFramework = 'react';
+                }
+                else if (fw.includes('html') || fw === 'none') {
+                    detectedFramework = 'html';
+                }
+            }
+        }
         // 智能参数解析
         const parsedArgs = parseArgs(args, {
             defaultValues: {
                 description: "",
-                framework: "react",
+                framework: detectedFramework, // 使用检测到的框架
                 template: "",
                 mode: "manual",
             },
@@ -125,7 +228,7 @@ export async function startUi(args) {
             },
         });
         const description = getString(parsedArgs.description);
-        const framework = getString(parsedArgs.framework) || "react";
+        const framework = getString(parsedArgs.framework) || detectedFramework;
         const mode = getString(parsedArgs.mode) || "manual";
         let templateName = getString(parsedArgs.template);
         // 验证 mode 参数
@@ -184,27 +287,35 @@ start_ui "用户列表" --mode=auto
 
 请按顺序执行以下命令：
 
-### 1. 生成设计系统 🎨
+### 1. 生成项目上下文 📋
+\`\`\`bash
+init_project_context
+\`\`\`
+
+### 2. 生成设计系统 🎨
 \`\`\`bash
 ui_design_system --product_type="${inferredProductType}" --stack="${inferredStack}" --keywords="${inferredKeywords}" --description="${description}"
 \`\`\`
 
-### 2. 生成组件目录 📦
+### 3. 生成组件目录 📦
 \`\`\`bash
 init_component_catalog
 \`\`\`
 
-### 3. 生成 UI 模板 📄
+### 4. 生成 UI 模板 📄
 \`\`\`bash
 # 搜索现有模板或生成新模板
 ui_search --mode=template --query="${templateName || description}"
 \`\`\`
 
-### 4. 渲染代码 💻
+### 5. 渲染代码 💻
 \`\`\`bash
 render_ui docs/ui/${templateName || 'template'}.json --framework="${inferredStack}"
 \`\`\`
 
+### 6. 更新项目上下文 📝
+将生成的 UI 文档链接添加到 \`docs/project-context.md\` 的文档导航部分。
+
 ---
 
 ## 💡 为什么选择这个方案？
@@ -216,6 +327,11 @@ ${recommendation.reasoning}
                 summary: `智能 UI 开发：${description}`,
                 status: 'pending',
                 steps: [
+                    {
+                        name: '生成项目上下文',
+                        status: 'pending',
+                        description: `调用 init_project_context 生成项目文档`,
+                    },
                     {
                         name: '生成设计系统',
                         status: 'pending',
@@ -236,13 +352,20 @@ ${recommendation.reasoning}
                         status: 'pending',
                         description: '调用 render_ui 生成组件代码',
                     },
+                    {
+                        name: '更新项目上下文',
+                        status: 'pending',
+                        description: '将 UI 文档添加到 project-context.md 索引',
+                    },
                 ],
                 artifacts: [],
                 nextSteps: [
+                    '调用 init_project_context',
                     `调用 ui_design_system --product_type="${inferredProductType}" --stack="${inferredStack}"`,
                     '调用 init_component_catalog',
                     `调用 ui_search --mode=template --query="${description}"`,
                     `调用 render_ui --framework="${inferredStack}"`,
+                    '更新 docs/project-context.md 添加 UI 文档链接',
                 ],
                 designSystem: {
                     colors: {},
@@ -326,6 +449,11 @@ start_ui "设置页面" --framework=react
             summary: `UI 开发工作流：${description}`,
             status: 'pending',
             steps: [
+                {
+                    name: '检查项目上下文',
+                    status: 'pending',
+                    description: '检查 docs/project-context.md 是否存在',
+                },
                 {
                     name: '检查设计系统',
                     status: 'pending',
@@ -346,13 +474,20 @@ start_ui "设置页面" --framework=react
                     status: 'pending',
                     description: '调用 render_ui 生成组件代码',
                 },
+                {
+                    name: '更新项目上下文',
+                    status: 'pending',
+                    description: '将 UI 文档添加到 project-context.md 索引',
+                },
             ],
             artifacts: [],
             nextSteps: [
+                '检查项目上下文，如不存在则调用 init_project_context',
                 '检查设计系统文件，如不存在则调用 ui_design_system',
                 '检查组件目录，如不存在则调用 init_component_catalog',
                 `调用 ui_search --mode=template --query="${description}"`,
                 `调用 render_ui --framework="${framework}"`,
+                '更新 docs/project-context.md 添加 UI 文档链接',
             ],
             designSystem: {
                 colors: {},

package/docs/pages/all-tools.html

@@ -296,13 +296,19 @@
                 
                 <div class="nav-section">
                     <div class="nav-section-title">工具文档</div>
-                    <a href="./all-tools.html" class="nav-item active">
+                    <div class="nav-item nav-item-toggle active expanded" onclick="toggleSubmenu(this)">
                         <div class="nav-item-content">
                             <span class="icon">🛠️</span>
                             <span>所有工具</span>
                         </div>
-                        <span class="badge">39</span>
-                    </a>
+                        <div style="display: flex; align-items: center; gap: 8px;">
+                            <span class="badge">39</span>
+                            <span class="toggle-icon">▶</span>
+                        </div>
+                    </div>
+                    <div class="nav-submenu expanded" id="tools-submenu">
+                        <!-- 工具列表将通过 JavaScript 动态生成 -->
+                    </div>
                 </div>
                 
                 <div class="nav-section">
@@ -464,6 +470,142 @@
     <!-- 引入工具数据 -->
     <script src="../data/tools.js"></script>
     <script>
+        // 切换子菜单展开/收起
+        function toggleSubmenu(element) {
+            element.classList.toggle('expanded');
+            const submenu = document.getElementById('tools-submenu');
+            submenu.classList.toggle('expanded');
+        }
+        
+        // 工具简短描述（最多4个字）
+        const toolDescriptions = {
+            // 工作流编排
+            'start_feature': '新功能',
+            'start_bugfix': '修Bug',
+            'start_review': '代码审查',
+            'start_release': '发版本',
+            'start_refactor': '重构',
+            'start_onboard': '快速上手',
+            'start_api': 'API开发',
+            'start_doc': '写文档',
+            'start_ui': 'UI开发',
+            'start_ralph': '循环开发',
+            
+            // 代码分析
+            'code_review': '审查代码',
+            'security_scan': '安全扫描',
+            'debug': '调试',
+            'perf': '性能优化',
+            'refactor': '重构建议',
+            'fix_bug': '修复Bug',
+            'estimate': '工作量',
+            
+            // Git 工具
+            'gencommit': '生成提交',
+            'genchangelog': '生成日志',
+            'genpr': '生成PR',
+            'resolve_conflict': '解决冲突',
+            
+            // 生成工具
+            'genapi': 'API文档',
+            'gendoc': '生成注释',
+            'gentest': '生成测试',
+            'gensql': '生成SQL',
+            'genreadme': '生成说明',
+            'gen_mock': '生成数据',
+            'genui': '生成UI',
+            
+            // 项目管理
+            'init_project': '初始化',
+            'analyze_project': '分析项目',
+            'init_project_context': '项目上下文',
+            'add_feature': '添加功能',
+            'check_deps': '检查依赖',
+            'interview': '需求访谈',
+            'ask_user': '提问用户',
+            
+            // UI/UX 工具
+            'ui_design_system': '设计系统',
+            'ui_search': '搜索UI',
+            'sync_ui_data': '同步数据',
+            'init_component_catalog': '组件目录',
+            'render_ui': '渲染UI',
+            'design2code': '设计转码',
+            
+            // 其他工具
+            'fix': '修复',
+            'split': '拆分',
+            'convert': '转换',
+            'explain': '解释',
+            'css_order': 'CSS排序',
+            'detect_shell': '检测Shell',
+            'init_setting': '初始设置',
+            'gen_skill': '生成技能'
+        };
+        
+        // 生成侧边栏工具列表
+        function generateSidebarTools() {
+            const submenu = document.getElementById('tools-submenu');
+            let html = '';
+            
+            for (const [categoryKey, categoryInfo] of Object.entries(categories)) {
+                const tools = toolsData[categoryKey];
+                if (!tools || tools.length === 0) continue;
+                
+                tools.forEach(tool => {
+                    const toolId = tool.name.replace(/_/g, '-');
+                    const desc = toolDescriptions[tool.name] || '';
+                    const displayText = desc ? `${tool.name} (${desc})` : tool.name;
+                    
+                    html += `
+                        <a href="javascript:void(0)" class="nav-subitem" onclick="scrollToTool('${toolId}', event)" title="${tool.description}">
+                            ${displayText}
+                        </a>
+                    `;
+                });
+            }
+            
+            submenu.innerHTML = html;
+        }
+        
+        // 滚动到指定工具
+        function scrollToTool(toolId, event) {
+            // 阻止默认行为
+            if (event) {
+                event.preventDefault();
+            }
+            
+            // 移除所有选中状态
+            document.querySelectorAll('.nav-subitem').forEach(item => {
+                item.classList.remove('active');
+            });
+            
+            // 添加当前选中状态
+            if (event && event.currentTarget) {
+                event.currentTarget.classList.add('active');
+            }
+            
+            const element = document.getElementById(toolId);
+            if (element) {
+                // 计算滚动位置，留出 header 高度 (60px) + 间距 (40px)
+                const headerHeight = 100;
+                const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
+                const offsetPosition = elementPosition - headerHeight;
+                
+                window.scrollTo({
+                    top: offsetPosition,
+                    behavior: 'smooth'
+                });
+                
+                // 高亮显示
+                element.style.transition = 'background 0.3s';
+                element.style.background = 'rgba(37, 99, 235, 0.05)';
+                setTimeout(() => {
+                    element.style.background = '';
+                }, 2000);
+            }
+        }
+        
         // Topbar scroll effect
         const topbar = document.getElementById('topbar');
         window.addEventListener('scroll', () => {
@@ -584,7 +726,7 @@
             }
             
             return `
-                <div class="tool-card">
+                <div class="tool-card" id="${tool.name.replace(/_/g, '-')}">
                     <div class="tool-main">
                         <div class="tool-header">
                             <div class="tool-name">${tool.name}</div>
@@ -632,6 +774,9 @@
                 });
             }
             
+            // 生成侧边栏工具列表
+            generateSidebarTools();
+            
             // 渲染所有工具
             renderTools();
             

package/docs/styles/page.css

@@ -126,7 +126,7 @@ body {
 
 /* ========== Sidebar ========== */
 .sidebar {
-    width: 260px;
+    width: 300px;
     background: var(--bg-card);
     border-right: 1px solid var(--border);
     position: fixed;
@@ -218,6 +218,59 @@ body {
     opacity: 1;
 }
 
+/* 子菜单样式 */
+.nav-item-toggle {
+    cursor: pointer;
+    user-select: none;
+}
+
+.nav-item-toggle .toggle-icon {
+    transition: transform 0.2s;
+    font-size: 12px;
+    color: var(--text-tertiary);
+}
+
+.nav-item-toggle.expanded .toggle-icon {
+    transform: rotate(90deg);
+}
+
+.nav-submenu {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
+}
+
+.nav-submenu.expanded {
+    max-height: 2000px;
+}
+
+.nav-subitem {
+    display: block;
+    padding: 8px 16px 8px 40px;
+    margin: 2px 8px;
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: all 0.2s;
+    border-radius: 6px;
+    font-size: 12px;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: 'Courier New', monospace;
+}
+
+.nav-subitem:hover {
+    background: var(--bg-hover);
+    color: var(--primary);
+}
+
+.nav-subitem.active {
+    background: rgba(37, 99, 235, 0.05);
+    color: var(--primary);
+    font-weight: 600;
+}
+
 .badge {
     background: var(--bg-hover);
     color: var(--text-secondary);
@@ -301,7 +354,7 @@ body {
 /* ========== Main Content ========== */
 .main-content {
     flex: 1;
-    margin-left: 260px;
+    margin-left: 300px;
     display: flex;
     flex-direction: column;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcp-probe-kit",
-  "version": "2.1.2",
+  "version": "2.2.1",
   "description": "AI-Powered Development Toolkit - MCP Server with 39 practical tools covering code quality, development efficiency, project management, and UI/UX design. Features: Structured Output, Workflow Orchestration, UI/UX Pro Max, and Requirements Interview.",
   "type": "module",
   "main": "build/index.js",