mcp-probe-kit 2.1.2 → 2.2.0

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/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,49 @@
     <!-- 引入工具数据 -->
     <script src="../data/tools.js"></script>
     <script>
+        // 切换子菜单展开/收起
+        function toggleSubmenu(element) {
+            element.classList.toggle('expanded');
+            const submenu = document.getElementById('tools-submenu');
+            submenu.classList.toggle('expanded');
+        }
+        
+        // 生成侧边栏工具列表
+        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, '-');
+                    html += `
+                        <a href="#${toolId}" class="nav-subitem" onclick="scrollToTool('${toolId}')">
+                            ${tool.name}
+                        </a>
+                    `;
+                });
+            }
+            
+            submenu.innerHTML = html;
+        }
+        
+        // 滚动到指定工具
+        function scrollToTool(toolId) {
+            const element = document.getElementById(toolId);
+            if (element) {
+                element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                // 高亮显示
+                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 +633,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 +681,9 @@
                 });
             }
             
+            // 生成侧边栏工具列表
+            generateSidebarTools();
+            
             // 渲染所有工具
             renderTools();
             

package/docs/styles/page.css

@@ -218,6 +218,55 @@ 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 20px 8px 48px;
+    margin: 2px 12px;
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: all 0.2s;
+    border-radius: 6px;
+    font-size: 13px;
+    position: relative;
+}
+
+.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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcp-probe-kit",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "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",