@szc-ft/mcp-szcd-client 0.18.0 → 0.19.1

package/agents/qwen-extension/agents/szcd-component-expert.md

@@ -113,6 +113,28 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 - "代码已生成，是否需要调整样式或交互细节？"
 - "是否需要补充表单校验规则？"
 - "是否需要添加批量操作功能？"
+- "是否需要进行浏览器验证？（在本地浏览器中检查还原度和功能）"
+
+
+### 步骤6.5：浏览器验证（条件执行）
+
+当用户在步骤6中选择进行浏览器验证时执行此步骤。
+
+1. **提取代码上下文**：你已经掌握生成的代码结构（组件、selector、API），直接用于构造测试计划
+2. **询问用户**：目标页面 URL（如果还不知道）和设计稿（如有）
+3. **构造测试计划 JSON**：按 `local-browser-test` skill 中定义的 Plan Schema，从代码中提取真实 selector 和 API 路径
+4. **执行测试**：在用户终端执行：
+   ```bash
+   node {client_path}/local-browser-executor.js --plan '<计划JSON>' --output /tmp/browser-test-result.json
+   ```
+5. **解读结果**：读取 /tmp/browser-test-result.json，分析还原度评分和功能测试通过情况
+6. **闭环修复**：如有问题，主动修复代码并询问是否重新测试
+
+**构造测试计划的要点**：
+- selector 从生成的代码中读取（id/className/data-testid），不要猜测
+- API 路径从代码中的接口调用读取
+- checkElement 的 expect 从代码逻辑推断（columns 数量、数据行数等）
+- 有设计稿时添加 compare 步骤，无设计稿时跳过
 
 ### 步骤7：收集用户反馈（必做，质量闭环）
 

package/agents/src/szcd-component-expert.md

@@ -76,7 +76,7 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 | 任务类型 | 判断条件 | 流程 |
 |---------|---------|------|
 | **简单查询** | 只查组件信息/API/示例，不涉及代码生成 | 快速流程（步骤1→4→6→7） |
-| **页面生成** | 需要根据需求/设计稿生成页面代码 | 完整流程（步骤1→2→3→4→5→6→7） |
+| **页面生成** | 需要根据需求/设计稿生成页面代码 | 完整流程（步骤1→2→3→4→5→6→6.5→7） |
 
 ---
 <!-- /INCLUDE:enhanced -->
@@ -267,8 +267,38 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 - "代码已生成，是否需要调整样式或交互细节？"
 - "是否需要补充表单校验规则？"
 - "是否需要添加批量操作功能？"
+- "是否需要进行浏览器验证？（在本地浏览器中检查还原度和功能）"
 <!-- /EXCLUDE:enhanced -->
 
+<!-- INCLUDE:enhanced -->
+**交互节点**：代码生成后，询问用户下一步：
+> "代码已生成，你可以选择：
+> 1. 调整样式或交互细节
+> 2. 补充表单校验/批量操作等功能
+> 3. 进行浏览器验证（在本地浏览器中检查还原度和功能）
+> 4. 完成，收集反馈"
+<!-- /INCLUDE:enhanced -->
+
+### 步骤6.5：浏览器验证（条件执行）
+
+当用户在步骤6中选择进行浏览器验证时执行此步骤。
+
+1. **提取代码上下文**：你已经掌握生成的代码结构（组件、selector、API），直接用于构造测试计划
+2. **询问用户**：目标页面 URL（如果还不知道）和设计稿（如有）
+3. **构造测试计划 JSON**：按 `local-browser-test` skill 中定义的 Plan Schema，从代码中提取真实 selector 和 API 路径
+4. **执行测试**：在用户终端执行：
+   ```bash
+   node {client_path}/local-browser-executor.js --plan '<计划JSON>' --output /tmp/browser-test-result.json
+   ```
+5. **解读结果**：读取 /tmp/browser-test-result.json，分析还原度评分和功能测试通过情况
+6. **闭环修复**：如有问题，主动修复代码并询问是否重新测试
+
+**构造测试计划的要点**：
+- selector 从生成的代码中读取（id/className/data-testid），不要猜测
+- API 路径从代码中的接口调用读取
+- checkElement 的 expect 从代码逻辑推断（columns 数量、数据行数等）
+- 有设计稿时添加 compare 步骤，无设计稿时跳过
+
 ### 步骤7：收集用户反馈（必做，质量闭环）
 
 代码生成完成后，**必须**向用户收集反馈，用于优化 MCP 工具行为：
@@ -358,7 +388,7 @@ ProForm / ProFormWrapper
 
 ## 快速流程（简单查询类任务）
 
-仅执行步骤1→4→6→7，跳过需求分析和方案确认：
+仅执行步骤1→4→6→7（跳过6.5），跳过需求分析和方案确认：
 1. **架构认知 + 自检** — 同步骤1
 2. **查询组件** — 按需查询目标组件（含依赖验证）
 3. **输出结果** — 直接返回组件信息/API/示例

package/agents/szcd-component-expert.md

@@ -117,6 +117,28 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 - "代码已生成，是否需要调整样式或交互细节？"
 - "是否需要补充表单校验规则？"
 - "是否需要添加批量操作功能？"
+- "是否需要进行浏览器验证？（在本地浏览器中检查还原度和功能）"
+
+
+### 步骤6.5：浏览器验证（条件执行）
+
+当用户在步骤6中选择进行浏览器验证时执行此步骤。
+
+1. **提取代码上下文**：你已经掌握生成的代码结构（组件、selector、API），直接用于构造测试计划
+2. **询问用户**：目标页面 URL（如果还不知道）和设计稿（如有）
+3. **构造测试计划 JSON**：按 `local-browser-test` skill 中定义的 Plan Schema，从代码中提取真实 selector 和 API 路径
+4. **执行测试**：在用户终端执行：
+   ```bash
+   node {client_path}/local-browser-executor.js --plan '<计划JSON>' --output /tmp/browser-test-result.json
+   ```
+5. **解读结果**：读取 /tmp/browser-test-result.json，分析还原度评分和功能测试通过情况
+6. **闭环修复**：如有问题，主动修复代码并询问是否重新测试
+
+**构造测试计划的要点**：
+- selector 从生成的代码中读取（id/className/data-testid），不要猜测
+- API 路径从代码中的接口调用读取
+- checkElement 的 expect 从代码逻辑推断（columns 数量、数据行数等）
+- 有设计稿时添加 compare 步骤，无设计稿时跳过
 
 ### 步骤7：收集用户反馈（必做，质量闭环）
 

package/agents/szcd-component-expert.qoder.md

@@ -66,7 +66,7 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 | 任务类型 | 判断条件 | 流程 |
 |---------|---------|------|
 | **简单查询** | 只查组件信息/API/示例，不涉及代码生成 | 快速流程（步骤1→4→6→7） |
-| **页面生成** | 需要根据需求/设计稿生成页面代码 | 完整流程（步骤1→2→3→4→5→6→7） |
+| **页面生成** | 需要根据需求/设计稿生成页面代码 | 完整流程（步骤1→2→3→4→5→6→6.5→7） |
 
 ---
 
@@ -195,6 +195,33 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 - Hooks 按依赖关系正确引入（如 useLeftTree、useTable）
 
 
+**交互节点**：代码生成后，询问用户下一步：
+> "代码已生成，你可以选择：
+> 1. 调整样式或交互细节
+> 2. 补充表单校验/批量操作等功能
+> 3. 进行浏览器验证（在本地浏览器中检查还原度和功能）
+> 4. 完成，收集反馈"
+
+### 步骤6.5：浏览器验证（条件执行）
+
+当用户在步骤6中选择进行浏览器验证时执行此步骤。
+
+1. **提取代码上下文**：你已经掌握生成的代码结构（组件、selector、API），直接用于构造测试计划
+2. **询问用户**：目标页面 URL（如果还不知道）和设计稿（如有）
+3. **构造测试计划 JSON**：按 `local-browser-test` skill 中定义的 Plan Schema，从代码中提取真实 selector 和 API 路径
+4. **执行测试**：在用户终端执行：
+   ```bash
+   node {client_path}/local-browser-executor.js --plan '<计划JSON>' --output /tmp/browser-test-result.json
+   ```
+5. **解读结果**：读取 /tmp/browser-test-result.json，分析还原度评分和功能测试通过情况
+6. **闭环修复**：如有问题，主动修复代码并询问是否重新测试
+
+**构造测试计划的要点**：
+- selector 从生成的代码中读取（id/className/data-testid），不要猜测
+- API 路径从代码中的接口调用读取
+- checkElement 的 expect 从代码逻辑推断（columns 数量、数据行数等）
+- 有设计稿时添加 compare 步骤，无设计稿时跳过
+
 ### 步骤7：收集用户反馈（必做，质量闭环）
 
 代码生成完成后，**必须**向用户收集反馈，用于优化 MCP 工具行为：
@@ -241,7 +268,7 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 
 ## 快速流程（简单查询类任务）
 
-仅执行步骤1→4→6→7，跳过需求分析和方案确认：
+仅执行步骤1→4→6→7（跳过6.5），跳过需求分析和方案确认：
 1. **架构认知 + 自检** — 同步骤1
 2. **查询组件** — 按需查询目标组件（含依赖验证）
 3. **输出结果** — 直接返回组件信息/API/示例

package/agents/szcd-component-expert.trae.md

@@ -46,7 +46,7 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 | 任务类型 | 判断条件 | 流程 |
 |---------|---------|------|
 | **简单查询** | 只查组件信息/API/示例，不涉及代码生成 | 快速流程（步骤1→4→6→7） |
-| **页面生成** | 需要根据需求/设计稿生成页面代码 | 完整流程（步骤1→2→3→4→5→6→7） |
+| **页面生成** | 需要根据需求/设计稿生成页面代码 | 完整流程（步骤1→2→3→4→5→6→6.5→7） |
 
 ---
 
@@ -162,6 +162,33 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 - Hooks 按依赖关系正确引入（如 useLeftTree、useTable）
 
 
+**交互节点**：代码生成后，询问用户下一步：
+> "代码已生成，你可以选择：
+> 1. 调整样式或交互细节
+> 2. 补充表单校验/批量操作等功能
+> 3. 进行浏览器验证（在本地浏览器中检查还原度和功能）
+> 4. 完成，收集反馈"
+
+### 步骤6.5：浏览器验证（条件执行）
+
+当用户在步骤6中选择进行浏览器验证时执行此步骤。
+
+1. **提取代码上下文**：你已经掌握生成的代码结构（组件、selector、API），直接用于构造测试计划
+2. **询问用户**：目标页面 URL（如果还不知道）和设计稿（如有）
+3. **构造测试计划 JSON**：按 `local-browser-test` skill 中定义的 Plan Schema，从代码中提取真实 selector 和 API 路径
+4. **执行测试**：在用户终端执行：
+   ```bash
+   node {client_path}/local-browser-executor.js --plan '<计划JSON>' --output /tmp/browser-test-result.json
+   ```
+5. **解读结果**：读取 /tmp/browser-test-result.json，分析还原度评分和功能测试通过情况
+6. **闭环修复**：如有问题，主动修复代码并询问是否重新测试
+
+**构造测试计划的要点**：
+- selector 从生成的代码中读取（id/className/data-testid），不要猜测
+- API 路径从代码中的接口调用读取
+- checkElement 的 expect 从代码逻辑推断（columns 数量、数据行数等）
+- 有设计稿时添加 compare 步骤，无设计稿时跳过
+
 ### 步骤7：收集用户反馈（必做，质量闭环）
 
 代码生成完成后，**必须**向用户收集反馈，用于优化 MCP 工具行为：
@@ -206,7 +233,7 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 
 ## 快速流程（简单查询类任务）
 
-仅执行步骤1→4→6→7，跳过需求分析和方案确认：
+仅执行步骤1→4→6→7（跳过6.5），跳过需求分析和方案确认：
 1. **架构认知 + 自检** — 同步骤1
 2. **查询组件** — 按需查询目标组件（含依赖验证）
 3. **输出结果** — 直接返回组件信息/API/示例

package/commands/szcd-mcp-browser-test.md

@@ -0,0 +1,57 @@
+---
+description: 在本地浏览器中执行自动化测试（设计稿还原度对比/功能验证/页面检查）
+argument-hint: <目标页面URL> [可选：设计稿图片路径]
+---
+
+请帮我在本地浏览器中执行测试。
+
+**执行流程**：
+
+1. **收集测试信息**：
+
+   - **目标页面 URL**（必需）：如果用户在命令参数中已提供，直接使用；否则向用户询问要测试的页面地址
+   - **设计稿图片**（可选）：如果用户在命令参数中提供了图片路径，用于还原度对比；否则跳过视觉对比
+   - **测试范围**：向用户提供选项：
+     - "设计稿还原度对比"（需提供设计稿）
+     - "功能验证"（点击/输入/导航等交互测试）
+     - "页面检查"（JS 错误检测 + 页面截图）
+     - "全部测试"（以上全部）
+
+2. **读取 `local-browser-test` skill 文档**，了解 Plan Schema 和执行命令格式：
+   - 按 skill 中定义的步骤类型构造测试计划 JSON
+   - selector 从用户项目代码中读取（`id`/`className`/`data-testid`），不要猜测
+   - 根据用户选择的测试范围选择对应场景（A/B/C/D）
+
+3. **构造测试计划 JSON** 并写入临时文件（避免命令行参数过长）：
+   ```bash
+   cat > /tmp/browser-test-plan.json << 'EOF'
+   {测试计划 JSON}
+   EOF
+   ```
+
+4. **执行测试**：
+   ```bash
+   node {client_install_path}/local-browser-executor.js \
+     --plan-file /tmp/browser-test-plan.json \
+     --output /tmp/browser-test-result.json
+   ```
+
+   命令回退（如果上面的路径不可用）：
+   - `npx szcd-mcp-browser-test --plan-file /tmp/browser-test-plan.json --output /tmp/browser-test-result.json`
+   - `node $(npm root -g)/@szc-ft/mcp-szcd-client/local-browser-executor.js --plan-file /tmp/browser-test-plan.json --output /tmp/browser-test-result.json`
+   - `node /scity/zengzhijie/mcp/szcd-mcp-client/local-browser-executor.js --plan-file /tmp/browser-test-plan.json --output /tmp/browser-test-result.json`
+
+5. **读取并解读结果**：
+   读取 `/tmp/browser-test-result.json`，按以下标准解读：
+   - **还原度**：fidelity >= 95% 优秀 / 90-95% 良好 / < 90% 不足
+   - **功能测试**：passed = total 全部通过，否则列出失败步骤及原因
+   - **diff 图**：如有 diffImagePath，展示 diff 图路径供用户查看
+
+6. **闭环建议**：
+   - 如有问题，给出具体的修复建议
+   - 询问用户是否需要重新测试
+
+**注意事项**：
+- 首次使用需确保 Chrome 以调试模式启动：`google-chrome --remote-debugging-port=9222`
+- 如执行器报错依赖缺失，引导用户安装：`npm install puppeteer-core pixelmatch pngjs sharp`
+- connect 模式下天然继承用户浏览器的登录态和微前端环境

package/commands/szcd-mcp-feedback.md

@@ -0,0 +1,42 @@
+---
+description: 提交本次会话的代码生成反馈，用于优化 szcd MCP 服务质量
+argument-hint: [可选：评分1-5] [可选：采纳/不采纳]
+---
+
+请帮我提交本次会话的反馈。
+
+**执行流程**：
+
+1. **自动收集上下文**：从当前会话历史中提取以下信息，**不要重复询问用户已经说过的内容**：
+   - `userQuery`：用户最初的原始需求描述（从会话开头的消息中提取）
+   - `toolsUsed`：本次会话中实际调用过的 MCP 工具名称列表（从工具调用记录中提取）
+   - `generatedCodeSummary`：最近一次生成的代码摘要或关键组件列表（从生成的代码中提取前几行或核心结构，不超过 500 字）
+   - `toolType`：当前使用的 IDE 类型（根据运行环境判断：Qoder → "qoder"，Trae → "trae"，Claude → "claude"，Qwen → "qwen"，Cursor → "cursor"，VS Code → "vscode"，其他 → "generic"）
+
+2. **向用户确认或补充**（仅询问缺失的信息）：
+   - **准确性评分**：请用户评分 1-5 分（5 分最准确）。如果用户在命令参数中已提供，直接使用
+   - **是否采纳**：用户是否计划采纳生成的代码。如果用户在命令参数中已提供（"采纳"/"不采纳"），直接使用
+   - **如不采纳**：询问具体原因（组件不匹配、API 错误、缺少功能、不符合设计稿等）
+
+3. **调用 MCP 工具提交反馈**：
+   调用 `submit_feedback` 工具，参数如下：
+   ```
+   sessionId: "<当前会话 ID 或时间戳>"
+   toolsUsed: [自动提取的工具列表]
+   userQuery: "<自动提取的用户需求>"
+   generatedCodeSummary: "<自动提取的代码摘要>"
+   accuracyRating: <用户评分 1-5>
+   adopted: <true/false>
+   rejectionReason: "<不采纳原因，采纳则为空>"
+   contextSnapshot: {
+     可选：从会话中提取的组件方案信息
+   }
+   toolType: "<自动判断的 IDE 类型>"
+   ```
+
+4. **输出结果**：告知用户反馈是否提交成功，显示 feedbackId
+
+**注意事项**：
+- 如果当前会话中没有代码生成记录，提示用户"当前会话中没有代码生成记录，反馈提交需要有生成代码的上下文"
+- 尽可能从会话历史自动提取信息，减少用户手动输入
+- 反馈提交失败不影响已生成的代码