@szc-ft/mcp-szcd-client 0.26.0 → 0.27.1

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

@@ -42,7 +42,7 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 **在正式开始之前，获取项目架构全局视图，同时验证 MCP 连接。**
 
 执行动作：
-1. 调用 `get_architecture_overview`（detail="summary"）获取7层架构图、模板组合模式、推荐使用顺序和 LLM 映射错误提示
+1. 调用 `get_architecture_overview`（detail="full"）一次性获取：7 层架构图、模板组合模式、推荐使用顺序、LLM 映射错误提示，**以及 `componentSummary`（全量组件 + 设计元信息：layoutRole/variantProps/styleInjection/useCases，other/echarts 层附带 compositionSlots/requiredHooks/chartType/sketchSignals）+ `styleMapping`（节点样式映射）+ `assetExtraction`（图标/位图/图表色提取规则）**——这些是步骤 3.5 推理组件候选和步骤 5 样式注入的核心依据
 2. 如果连接失败，**立即停止并返回错误信息**，告知用户需要先配置 MCP 服务器
 3. 如果成功，根据返回的 `templatePatterns` 初步判断用户需求匹配哪个模板
 
@@ -370,6 +370,7 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 
 **输入**：
 - 步骤 1 的 `get_architecture_overview` 返回的 `templatePatterns`（TreeQueryTable / QueryTabsTables / LeftRight / UpDown）
+- 步骤 1 的 `componentSummary`：全量组件 + 设计元信息（layoutRole/variantProps/styleInjection/useCases，other/echarts 层附带 compositionSlots/requiredHooks/chartType/sketchSignals）—— **推理组件候选的权威目录，长尾场景按 layoutRole / useCases / sketchSignals 直接反查**
 - 步骤 1 的 `llmMappingHints.commonMistakes`（避免 LLM 常见映射错误）
 - 步骤 2.5 的 Sketch 节点结构 + 样式 Token
 - 或步骤 3 的图片分析描述
@@ -383,38 +384,15 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 - ❌ 在步骤 3 内部推理组件候选列表（应只产出图片描述）
 - ❌ 跳过此环节直接调 `get_component_full_profile`（必须先有候选列表）
 
-**推理时使用映射规则**（**此表为本步骤专用，仅含核心高频场景**）：
+**推理依据**：步骤 1 返回的 `componentSummary` 是组件候选的权威目录（由组件库源码动态生成），每项含 `layoutRole` / `variantProps` / `useCases` / `sketchSignals`（图表层）。按以下顺序反查：
 
-*页面级布局*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 画板名称（如 "4.1-编目审核-待办"） | `pageName` | 直接使用 |
-| 左右分区布局 | `TemplateMode(templateTpye="LeftRight")` | 区域分布 |
-| 上下分区布局 | `TemplateMode(templateTpye="TopBottom")` | 区域分布 |
-| 标签页(Tabs) + 每个 Tab 内有表格 | `QueryTabsTables` 或 `TemplateMode` + Tabs | templatePatterns.QueryTabsTables |
+1. **画板名称** → 直接作为 `pageName`
+2. **大区切分** → 看 `componentSummary.other` 里 `layoutRole === '页面定位'` 的组件（如 TemplateMode），结合 `variantProps.templateType`（LeftRight / TopBottom）和 `templatePatterns`（TreeQueryTable / QueryTabsTables）选模板
+3. **区域容器** → `layoutRole === '区域容器'` 的组件（LeftTree / Query / TableOrList / ModelOrDrawer / TitleAndBack / FormItemOrDetailItem 等），按 `useCases` 描述匹配 Sketch 区域语义
+4. **图表组件** → `componentSummary.echarts[*].sketchSignals` 反查 `chartType`，锁定 Line / Bar / Pie / Scatter 等
+5. **变体选择** → 同一组件的子类型（如 TableOrList 的 ProTable / ProList / EditableProTable）查 `variantProps` 配合 useCases
 
-*区域级组件*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 左侧窄区域 + 树形图层 | `LeftTree` 组件 | templatePatterns.TreeQueryTable |
-| 顶部输入框/下拉框/日期选择器 | `Query` 组件 | 搜索区域特征 |
-| 中间表头 + 数据行图层 | `TableOrList` 组件 | 表格区域特征 |
-| 弹窗/抽屉图层 | `ModelOrDrawer` 组件 | 弹窗交互特征 |
-| 页面标题 + 返回箭头 | `TitleAndBack` 组件 | 标题栏特征 |
-| 详情展示区域（只读字段） | `FormItemOrDetailItem(type="detail")` | 详情区特征 |
-
-*数据可视化（核心 3 类）*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 折线趋势图/时间序列图 | `Line` | ECharts 层图表组件 |
-| 柱状对比图/条形图 | `Bar` | ECharts 层图表组件 |
-| 饼图/环形图/占比图 | `Pie` | ECharts 层图表组件 |
-
-*表格子类型（核心 2 类）*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 可编辑表格（单元格直接输入） | `TableOrList(componentType="EditableProTable")` | 可编辑表格特征 |
-| 卡片列表（非表格式数据卡片） | `TableOrList(componentType="ProList")` | 卡片布局特征 |
+不要硬编码任何「Sketch 特征 → 组件」对照表——`componentSummary` 是唯一可信源，硬编码表会和服务端动态扫描结果漂移。
 
 #### ⚠️ TemplateMode 槽位传参铁律（高频踩坑）
 

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

@@ -38,7 +38,7 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 **在正式开始之前，获取项目架构全局视图，同时验证 MCP 连接。**
 
 执行动作：
-1. 调用 `get_architecture_overview`（detail="summary"）获取7层架构图、模板组合模式、推荐使用顺序和 LLM 映射错误提示
+1. 调用 `get_architecture_overview`（detail="full"）一次性获取：7 层架构图、模板组合模式、推荐使用顺序、LLM 映射错误提示，**以及 `componentSummary`（全量组件 + 设计元信息：layoutRole/variantProps/styleInjection/useCases，other/echarts 层附带 compositionSlots/requiredHooks/chartType/sketchSignals）+ `styleMapping`（节点样式映射）+ `assetExtraction`（图标/位图/图表色提取规则）**——这些是步骤 3.5 推理组件候选和步骤 5 样式注入的核心依据
 2. 如果连接失败，**立即停止并返回错误信息**，告知用户需要先配置 MCP 服务器
 3. 如果成功，根据返回的 `templatePatterns` 初步判断用户需求匹配哪个模板
 
@@ -366,6 +366,7 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 
 **输入**：
 - 步骤 1 的 `get_architecture_overview` 返回的 `templatePatterns`（TreeQueryTable / QueryTabsTables / LeftRight / UpDown）
+- 步骤 1 的 `componentSummary`：全量组件 + 设计元信息（layoutRole/variantProps/styleInjection/useCases，other/echarts 层附带 compositionSlots/requiredHooks/chartType/sketchSignals）—— **推理组件候选的权威目录，长尾场景按 layoutRole / useCases / sketchSignals 直接反查**
 - 步骤 1 的 `llmMappingHints.commonMistakes`（避免 LLM 常见映射错误）
 - 步骤 2.5 的 Sketch 节点结构 + 样式 Token
 - 或步骤 3 的图片分析描述
@@ -379,38 +380,15 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 - ❌ 在步骤 3 内部推理组件候选列表（应只产出图片描述）
 - ❌ 跳过此环节直接调 `get_component_full_profile`（必须先有候选列表）
 
-**推理时使用映射规则**（**此表为本步骤专用，仅含核心高频场景**）：
+**推理依据**：步骤 1 返回的 `componentSummary` 是组件候选的权威目录（由组件库源码动态生成），每项含 `layoutRole` / `variantProps` / `useCases` / `sketchSignals`（图表层）。按以下顺序反查：
 
-*页面级布局*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 画板名称（如 "4.1-编目审核-待办"） | `pageName` | 直接使用 |
-| 左右分区布局 | `TemplateMode(templateTpye="LeftRight")` | 区域分布 |
-| 上下分区布局 | `TemplateMode(templateTpye="TopBottom")` | 区域分布 |
-| 标签页(Tabs) + 每个 Tab 内有表格 | `QueryTabsTables` 或 `TemplateMode` + Tabs | templatePatterns.QueryTabsTables |
+1. **画板名称** → 直接作为 `pageName`
+2. **大区切分** → 看 `componentSummary.other` 里 `layoutRole === '页面定位'` 的组件（如 TemplateMode），结合 `variantProps.templateType`（LeftRight / TopBottom）和 `templatePatterns`（TreeQueryTable / QueryTabsTables）选模板
+3. **区域容器** → `layoutRole === '区域容器'` 的组件（LeftTree / Query / TableOrList / ModelOrDrawer / TitleAndBack / FormItemOrDetailItem 等），按 `useCases` 描述匹配 Sketch 区域语义
+4. **图表组件** → `componentSummary.echarts[*].sketchSignals` 反查 `chartType`，锁定 Line / Bar / Pie / Scatter 等
+5. **变体选择** → 同一组件的子类型（如 TableOrList 的 ProTable / ProList / EditableProTable）查 `variantProps` 配合 useCases
 
-*区域级组件*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 左侧窄区域 + 树形图层 | `LeftTree` 组件 | templatePatterns.TreeQueryTable |
-| 顶部输入框/下拉框/日期选择器 | `Query` 组件 | 搜索区域特征 |
-| 中间表头 + 数据行图层 | `TableOrList` 组件 | 表格区域特征 |
-| 弹窗/抽屉图层 | `ModelOrDrawer` 组件 | 弹窗交互特征 |
-| 页面标题 + 返回箭头 | `TitleAndBack` 组件 | 标题栏特征 |
-| 详情展示区域（只读字段） | `FormItemOrDetailItem(type="detail")` | 详情区特征 |
-
-*数据可视化（核心 3 类）*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 折线趋势图/时间序列图 | `Line` | ECharts 层图表组件 |
-| 柱状对比图/条形图 | `Bar` | ECharts 层图表组件 |
-| 饼图/环形图/占比图 | `Pie` | ECharts 层图表组件 |
-
-*表格子类型（核心 2 类）*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 可编辑表格（单元格直接输入） | `TableOrList(componentType="EditableProTable")` | 可编辑表格特征 |
-| 卡片列表（非表格式数据卡片） | `TableOrList(componentType="ProList")` | 卡片布局特征 |
+不要硬编码任何「Sketch 特征 → 组件」对照表——`componentSummary` 是唯一可信源，硬编码表会和服务端动态扫描结果漂移。
 
 #### ⚠️ TemplateMode 槽位传参铁律（高频踩坑）
 

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

@@ -88,7 +88,7 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 **在正式开始之前，获取项目架构全局视图，同时验证 MCP 连接。**
 
 执行动作：
-1. 调用 `{{TOOL:get_architecture_overview}}`（detail="summary"）获取7层架构图、模板组合模式、推荐使用顺序和 LLM 映射错误提示
+1. 调用 `{{TOOL:get_architecture_overview}}`（detail="full"）一次性获取：7 层架构图、模板组合模式、推荐使用顺序、LLM 映射错误提示，**以及 `componentSummary`（全量组件 + 设计元信息：layoutRole/variantProps/styleInjection/useCases，other/echarts 层附带 compositionSlots/requiredHooks/chartType/sketchSignals）+ `styleMapping`（节点样式映射）+ `assetExtraction`（图标/位图/图表色提取规则）**——这些是步骤 3.5 推理组件候选和步骤 5 样式注入的核心依据
 2. 如果连接失败，**立即停止并返回错误信息**，告知用户需要先配置 MCP 服务器
 3. 如果成功，根据返回的 `templatePatterns` 初步判断用户需求匹配哪个模板
 
@@ -457,6 +457,7 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 
 **输入**：
 - 步骤 1 的 `{{TOOL:get_architecture_overview}}` 返回的 `templatePatterns`（TreeQueryTable / QueryTabsTables / LeftRight / UpDown）
+- 步骤 1 的 `componentSummary`：全量组件 + 设计元信息（layoutRole/variantProps/styleInjection/useCases，other/echarts 层附带 compositionSlots/requiredHooks/chartType/sketchSignals）—— **推理组件候选的权威目录，长尾场景按 layoutRole / useCases / sketchSignals 直接反查**
 - 步骤 1 的 `llmMappingHints.commonMistakes`（避免 LLM 常见映射错误）
 - 步骤 2.5 的 Sketch 节点结构 + 样式 Token
 - 或步骤 3 的图片分析描述
@@ -470,38 +471,15 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 - ❌ 在步骤 3 内部推理组件候选列表（应只产出图片描述）
 - ❌ 跳过此环节直接调 `get_component_full_profile`（必须先有候选列表）
 
-**推理时使用映射规则**（**此表为本步骤专用，仅含核心高频场景**）：
+**推理依据**：步骤 1 返回的 `componentSummary` 是组件候选的权威目录（由组件库源码动态生成），每项含 `layoutRole` / `variantProps` / `useCases` / `sketchSignals`（图表层）。按以下顺序反查：
 
-*页面级布局*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 画板名称（如 "4.1-编目审核-待办"） | `pageName` | 直接使用 |
-| 左右分区布局 | `TemplateMode(templateTpye="LeftRight")` | 区域分布 |
-| 上下分区布局 | `TemplateMode(templateTpye="TopBottom")` | 区域分布 |
-| 标签页(Tabs) + 每个 Tab 内有表格 | `QueryTabsTables` 或 `TemplateMode` + Tabs | templatePatterns.QueryTabsTables |
+1. **画板名称** → 直接作为 `pageName`
+2. **大区切分** → 看 `componentSummary.other` 里 `layoutRole === '页面定位'` 的组件（如 TemplateMode），结合 `variantProps.templateType`（LeftRight / TopBottom）和 `templatePatterns`（TreeQueryTable / QueryTabsTables）选模板
+3. **区域容器** → `layoutRole === '区域容器'` 的组件（LeftTree / Query / TableOrList / ModelOrDrawer / TitleAndBack / FormItemOrDetailItem 等），按 `useCases` 描述匹配 Sketch 区域语义
+4. **图表组件** → `componentSummary.echarts[*].sketchSignals` 反查 `chartType`，锁定 Line / Bar / Pie / Scatter 等
+5. **变体选择** → 同一组件的子类型（如 TableOrList 的 ProTable / ProList / EditableProTable）查 `variantProps` 配合 useCases
 
-*区域级组件*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 左侧窄区域 + 树形图层 | `LeftTree` 组件 | templatePatterns.TreeQueryTable |
-| 顶部输入框/下拉框/日期选择器 | `Query` 组件 | 搜索区域特征 |
-| 中间表头 + 数据行图层 | `TableOrList` 组件 | 表格区域特征 |
-| 弹窗/抽屉图层 | `ModelOrDrawer` 组件 | 弹窗交互特征 |
-| 页面标题 + 返回箭头 | `TitleAndBack` 组件 | 标题栏特征 |
-| 详情展示区域（只读字段） | `FormItemOrDetailItem(type="detail")` | 详情区特征 |
-
-*数据可视化（核心 3 类）*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 折线趋势图/时间序列图 | `Line` | ECharts 层图表组件 |
-| 柱状对比图/条形图 | `Bar` | ECharts 层图表组件 |
-| 饼图/环形图/占比图 | `Pie` | ECharts 层图表组件 |
-
-*表格子类型（核心 2 类）*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 可编辑表格（单元格直接输入） | `TableOrList(componentType="EditableProTable")` | 可编辑表格特征 |
-| 卡片列表（非表格式数据卡片） | `TableOrList(componentType="ProList")` | 卡片布局特征 |
+不要硬编码任何「Sketch 特征 → 组件」对照表——`componentSummary` 是唯一可信源，硬编码表会和服务端动态扫描结果漂移。
 
 #### ⚠️ TemplateMode 槽位传参铁律（高频踩坑）
 

package/agents/src/tools.json

@@ -1,8 +1,8 @@
 [
     {
         "name": "get_architecture_overview",
-        "description": "获取7层架构图、模板组合模式、LLM映射错误提示",
-        "whenToUse": "步骤1：架构认知"
+        "description": "获取7层架构图、模板组合模式、LLM映射错误提示。detail=full 额外返回 componentSummary（全量组件+设计元信息：layoutRole/variantProps/styleInjection/useCases/chartType/sketchSignals）+ styleMapping（节点样式映射）+ assetExtraction（图标/位图/图表色提取规则），设计稿→代码场景必选 full",
+        "whenToUse": "步骤1：架构认知（设计稿场景用 detail=full 一次拿全）"
     },
     {
         "name": "search_components_semantic",

package/agents/szcd-component-expert.md

@@ -42,7 +42,7 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 **在正式开始之前，获取项目架构全局视图，同时验证 MCP 连接。**
 
 执行动作：
-1. 调用 `get_architecture_overview`（detail="summary"）获取7层架构图、模板组合模式、推荐使用顺序和 LLM 映射错误提示
+1. 调用 `get_architecture_overview`（detail="full"）一次性获取：7 层架构图、模板组合模式、推荐使用顺序、LLM 映射错误提示，**以及 `componentSummary`（全量组件 + 设计元信息：layoutRole/variantProps/styleInjection/useCases，other/echarts 层附带 compositionSlots/requiredHooks/chartType/sketchSignals）+ `styleMapping`（节点样式映射）+ `assetExtraction`（图标/位图/图表色提取规则）**——这些是步骤 3.5 推理组件候选和步骤 5 样式注入的核心依据
 2. 如果连接失败，**立即停止并返回错误信息**，告知用户需要先配置 MCP 服务器
 3. 如果成功，根据返回的 `templatePatterns` 初步判断用户需求匹配哪个模板
 
@@ -370,6 +370,7 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 
 **输入**：
 - 步骤 1 的 `get_architecture_overview` 返回的 `templatePatterns`（TreeQueryTable / QueryTabsTables / LeftRight / UpDown）
+- 步骤 1 的 `componentSummary`：全量组件 + 设计元信息（layoutRole/variantProps/styleInjection/useCases，other/echarts 层附带 compositionSlots/requiredHooks/chartType/sketchSignals）—— **推理组件候选的权威目录，长尾场景按 layoutRole / useCases / sketchSignals 直接反查**
 - 步骤 1 的 `llmMappingHints.commonMistakes`（避免 LLM 常见映射错误）
 - 步骤 2.5 的 Sketch 节点结构 + 样式 Token
 - 或步骤 3 的图片分析描述
@@ -383,38 +384,15 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 - ❌ 在步骤 3 内部推理组件候选列表（应只产出图片描述）
 - ❌ 跳过此环节直接调 `get_component_full_profile`（必须先有候选列表）
 
-**推理时使用映射规则**（**此表为本步骤专用，仅含核心高频场景**）：
+**推理依据**：步骤 1 返回的 `componentSummary` 是组件候选的权威目录（由组件库源码动态生成），每项含 `layoutRole` / `variantProps` / `useCases` / `sketchSignals`（图表层）。按以下顺序反查：
 
-*页面级布局*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 画板名称（如 "4.1-编目审核-待办"） | `pageName` | 直接使用 |
-| 左右分区布局 | `TemplateMode(templateTpye="LeftRight")` | 区域分布 |
-| 上下分区布局 | `TemplateMode(templateTpye="TopBottom")` | 区域分布 |
-| 标签页(Tabs) + 每个 Tab 内有表格 | `QueryTabsTables` 或 `TemplateMode` + Tabs | templatePatterns.QueryTabsTables |
+1. **画板名称** → 直接作为 `pageName`
+2. **大区切分** → 看 `componentSummary.other` 里 `layoutRole === '页面定位'` 的组件（如 TemplateMode），结合 `variantProps.templateType`（LeftRight / TopBottom）和 `templatePatterns`（TreeQueryTable / QueryTabsTables）选模板
+3. **区域容器** → `layoutRole === '区域容器'` 的组件（LeftTree / Query / TableOrList / ModelOrDrawer / TitleAndBack / FormItemOrDetailItem 等），按 `useCases` 描述匹配 Sketch 区域语义
+4. **图表组件** → `componentSummary.echarts[*].sketchSignals` 反查 `chartType`，锁定 Line / Bar / Pie / Scatter 等
+5. **变体选择** → 同一组件的子类型（如 TableOrList 的 ProTable / ProList / EditableProTable）查 `variantProps` 配合 useCases
 
-*区域级组件*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 左侧窄区域 + 树形图层 | `LeftTree` 组件 | templatePatterns.TreeQueryTable |
-| 顶部输入框/下拉框/日期选择器 | `Query` 组件 | 搜索区域特征 |
-| 中间表头 + 数据行图层 | `TableOrList` 组件 | 表格区域特征 |
-| 弹窗/抽屉图层 | `ModelOrDrawer` 组件 | 弹窗交互特征 |
-| 页面标题 + 返回箭头 | `TitleAndBack` 组件 | 标题栏特征 |
-| 详情展示区域（只读字段） | `FormItemOrDetailItem(type="detail")` | 详情区特征 |
-
-*数据可视化（核心 3 类）*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 折线趋势图/时间序列图 | `Line` | ECharts 层图表组件 |
-| 柱状对比图/条形图 | `Bar` | ECharts 层图表组件 |
-| 饼图/环形图/占比图 | `Pie` | ECharts 层图表组件 |
-
-*表格子类型（核心 2 类）*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 可编辑表格（单元格直接输入） | `TableOrList(componentType="EditableProTable")` | 可编辑表格特征 |
-| 卡片列表（非表格式数据卡片） | `TableOrList(componentType="ProList")` | 卡片布局特征 |
+不要硬编码任何「Sketch 特征 → 组件」对照表——`componentSummary` 是唯一可信源，硬编码表会和服务端动态扫描结果漂移。
 
 #### ⚠️ TemplateMode 槽位传参铁律（高频踩坑）
 

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

@@ -51,7 +51,7 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 
 | 工具名 | 功能 | 何时使用 |
 |--------|------|---------|
-| `get_architecture_overview` | 获取7层架构图、模板组合模式、LLM映射错误提示 | 步骤1：架构认知 |
+| `get_architecture_overview` | 获取7层架构图、模板组合模式、LLM映射错误提示。detail=full 额外返回 componentSummary（全量组件+设计元信息：layoutRole/variantProps/styleInjection/useCases/chartType/sketchSignals）+ styleMapping（节点样式映射）+ assetExtraction（图标/位图/图表色提取规则），设计稿→代码场景必选 full | 步骤1：架构认知（设计稿场景用 detail=full 一次拿全） |
 | `search_components_semantic` | 基于Repowiki知识库的语义搜索，用自然语言描述匹配最适合的组件 | 步骤4：语义搜索匹配 |
 | `get_component_full_profile` | 一站式获取组件全景画像。name支持逗号分隔批量查询，depth=deep获取Props链+源码摘要+样式注入，返回值是紧凑Markdown格式 | 步骤4：批量获取全景画像 |
 | `get_best_practices` | 获取组件使用最佳实践和常见错误修正，指定scenario可获取组合最佳实践 | 步骤4：组合最佳实践 |
@@ -86,7 +86,7 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 **在正式开始之前，获取项目架构全局视图，同时验证 MCP 连接。**
 
 执行动作：
-1. 调用 `get_architecture_overview`（detail="summary"）获取7层架构图、模板组合模式、推荐使用顺序和 LLM 映射错误提示
+1. 调用 `get_architecture_overview`（detail="full"）一次性获取：7 层架构图、模板组合模式、推荐使用顺序、LLM 映射错误提示，**以及 `componentSummary`（全量组件 + 设计元信息：layoutRole/variantProps/styleInjection/useCases，other/echarts 层附带 compositionSlots/requiredHooks/chartType/sketchSignals）+ `styleMapping`（节点样式映射）+ `assetExtraction`（图标/位图/图表色提取规则）**——这些是步骤 3.5 推理组件候选和步骤 5 样式注入的核心依据
 2. 如果连接失败，**立即停止并返回错误信息**，告知用户需要先配置 MCP 服务器
 3. 如果成功，根据返回的 `templatePatterns` 初步判断用户需求匹配哪个模板
 
@@ -429,6 +429,7 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 
 **输入**：
 - 步骤 1 的 `get_architecture_overview` 返回的 `templatePatterns`（TreeQueryTable / QueryTabsTables / LeftRight / UpDown）
+- 步骤 1 的 `componentSummary`：全量组件 + 设计元信息（layoutRole/variantProps/styleInjection/useCases，other/echarts 层附带 compositionSlots/requiredHooks/chartType/sketchSignals）—— **推理组件候选的权威目录，长尾场景按 layoutRole / useCases / sketchSignals 直接反查**
 - 步骤 1 的 `llmMappingHints.commonMistakes`（避免 LLM 常见映射错误）
 - 步骤 2.5 的 Sketch 节点结构 + 样式 Token
 - 或步骤 3 的图片分析描述
@@ -442,38 +443,15 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 - ❌ 在步骤 3 内部推理组件候选列表（应只产出图片描述）
 - ❌ 跳过此环节直接调 `get_component_full_profile`（必须先有候选列表）
 
-**推理时使用映射规则**（**此表为本步骤专用，仅含核心高频场景**）：
+**推理依据**：步骤 1 返回的 `componentSummary` 是组件候选的权威目录（由组件库源码动态生成），每项含 `layoutRole` / `variantProps` / `useCases` / `sketchSignals`（图表层）。按以下顺序反查：
 
-*页面级布局*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 画板名称（如 "4.1-编目审核-待办"） | `pageName` | 直接使用 |
-| 左右分区布局 | `TemplateMode(templateTpye="LeftRight")` | 区域分布 |
-| 上下分区布局 | `TemplateMode(templateTpye="TopBottom")` | 区域分布 |
-| 标签页(Tabs) + 每个 Tab 内有表格 | `QueryTabsTables` 或 `TemplateMode` + Tabs | templatePatterns.QueryTabsTables |
+1. **画板名称** → 直接作为 `pageName`
+2. **大区切分** → 看 `componentSummary.other` 里 `layoutRole === '页面定位'` 的组件（如 TemplateMode），结合 `variantProps.templateType`（LeftRight / TopBottom）和 `templatePatterns`（TreeQueryTable / QueryTabsTables）选模板
+3. **区域容器** → `layoutRole === '区域容器'` 的组件（LeftTree / Query / TableOrList / ModelOrDrawer / TitleAndBack / FormItemOrDetailItem 等），按 `useCases` 描述匹配 Sketch 区域语义
+4. **图表组件** → `componentSummary.echarts[*].sketchSignals` 反查 `chartType`，锁定 Line / Bar / Pie / Scatter 等
+5. **变体选择** → 同一组件的子类型（如 TableOrList 的 ProTable / ProList / EditableProTable）查 `variantProps` 配合 useCases
 
-*区域级组件*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 左侧窄区域 + 树形图层 | `LeftTree` 组件 | templatePatterns.TreeQueryTable |
-| 顶部输入框/下拉框/日期选择器 | `Query` 组件 | 搜索区域特征 |
-| 中间表头 + 数据行图层 | `TableOrList` 组件 | 表格区域特征 |
-| 弹窗/抽屉图层 | `ModelOrDrawer` 组件 | 弹窗交互特征 |
-| 页面标题 + 返回箭头 | `TitleAndBack` 组件 | 标题栏特征 |
-| 详情展示区域（只读字段） | `FormItemOrDetailItem(type="detail")` | 详情区特征 |
-
-*数据可视化（核心 3 类）*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 折线趋势图/时间序列图 | `Line` | ECharts 层图表组件 |
-| 柱状对比图/条形图 | `Bar` | ECharts 层图表组件 |
-| 饼图/环形图/占比图 | `Pie` | ECharts 层图表组件 |
-
-*表格子类型（核心 2 类）*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 可编辑表格（单元格直接输入） | `TableOrList(componentType="EditableProTable")` | 可编辑表格特征 |
-| 卡片列表（非表格式数据卡片） | `TableOrList(componentType="ProList")` | 卡片布局特征 |
+不要硬编码任何「Sketch 特征 → 组件」对照表——`componentSummary` 是唯一可信源，硬编码表会和服务端动态扫描结果漂移。
 
 #### ⚠️ TemplateMode 槽位传参铁律（高频踩坑）
 

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

@@ -56,7 +56,7 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 **在正式开始之前，获取项目架构全局视图，同时验证 MCP 连接。**
 
 执行动作：
-1. 调用 `mcp__szcd-component-helper__get_architecture_overview`（detail="summary"）获取7层架构图、模板组合模式、推荐使用顺序和 LLM 映射错误提示
+1. 调用 `mcp__szcd-component-helper__get_architecture_overview`（detail="full"）一次性获取：7 层架构图、模板组合模式、推荐使用顺序、LLM 映射错误提示，**以及 `componentSummary`（全量组件 + 设计元信息：layoutRole/variantProps/styleInjection/useCases，other/echarts 层附带 compositionSlots/requiredHooks/chartType/sketchSignals）+ `styleMapping`（节点样式映射）+ `assetExtraction`（图标/位图/图表色提取规则）**——这些是步骤 3.5 推理组件候选和步骤 5 样式注入的核心依据
 2. 如果连接失败，**立即停止并返回错误信息**，告知用户需要先配置 MCP 服务器
 3. 如果成功，根据返回的 `templatePatterns` 初步判断用户需求匹配哪个模板
 
@@ -392,6 +392,7 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 
 **输入**：
 - 步骤 1 的 `mcp__szcd-component-helper__get_architecture_overview` 返回的 `templatePatterns`（TreeQueryTable / QueryTabsTables / LeftRight / UpDown）
+- 步骤 1 的 `componentSummary`：全量组件 + 设计元信息（layoutRole/variantProps/styleInjection/useCases，other/echarts 层附带 compositionSlots/requiredHooks/chartType/sketchSignals）—— **推理组件候选的权威目录，长尾场景按 layoutRole / useCases / sketchSignals 直接反查**
 - 步骤 1 的 `llmMappingHints.commonMistakes`（避免 LLM 常见映射错误）
 - 步骤 2.5 的 Sketch 节点结构 + 样式 Token
 - 或步骤 3 的图片分析描述
@@ -405,38 +406,15 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 - ❌ 在步骤 3 内部推理组件候选列表（应只产出图片描述）
 - ❌ 跳过此环节直接调 `get_component_full_profile`（必须先有候选列表）
 
-**推理时使用映射规则**（**此表为本步骤专用，仅含核心高频场景**）：
+**推理依据**：步骤 1 返回的 `componentSummary` 是组件候选的权威目录（由组件库源码动态生成），每项含 `layoutRole` / `variantProps` / `useCases` / `sketchSignals`（图表层）。按以下顺序反查：
 
-*页面级布局*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 画板名称（如 "4.1-编目审核-待办"） | `pageName` | 直接使用 |
-| 左右分区布局 | `TemplateMode(templateTpye="LeftRight")` | 区域分布 |
-| 上下分区布局 | `TemplateMode(templateTpye="TopBottom")` | 区域分布 |
-| 标签页(Tabs) + 每个 Tab 内有表格 | `QueryTabsTables` 或 `TemplateMode` + Tabs | templatePatterns.QueryTabsTables |
+1. **画板名称** → 直接作为 `pageName`
+2. **大区切分** → 看 `componentSummary.other` 里 `layoutRole === '页面定位'` 的组件（如 TemplateMode），结合 `variantProps.templateType`（LeftRight / TopBottom）和 `templatePatterns`（TreeQueryTable / QueryTabsTables）选模板
+3. **区域容器** → `layoutRole === '区域容器'` 的组件（LeftTree / Query / TableOrList / ModelOrDrawer / TitleAndBack / FormItemOrDetailItem 等），按 `useCases` 描述匹配 Sketch 区域语义
+4. **图表组件** → `componentSummary.echarts[*].sketchSignals` 反查 `chartType`，锁定 Line / Bar / Pie / Scatter 等
+5. **变体选择** → 同一组件的子类型（如 TableOrList 的 ProTable / ProList / EditableProTable）查 `variantProps` 配合 useCases
 
-*区域级组件*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 左侧窄区域 + 树形图层 | `LeftTree` 组件 | templatePatterns.TreeQueryTable |
-| 顶部输入框/下拉框/日期选择器 | `Query` 组件 | 搜索区域特征 |
-| 中间表头 + 数据行图层 | `TableOrList` 组件 | 表格区域特征 |
-| 弹窗/抽屉图层 | `ModelOrDrawer` 组件 | 弹窗交互特征 |
-| 页面标题 + 返回箭头 | `TitleAndBack` 组件 | 标题栏特征 |
-| 详情展示区域（只读字段） | `FormItemOrDetailItem(type="detail")` | 详情区特征 |
-
-*数据可视化（核心 3 类）*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 折线趋势图/时间序列图 | `Line` | ECharts 层图表组件 |
-| 柱状对比图/条形图 | `Bar` | ECharts 层图表组件 |
-| 饼图/环形图/占比图 | `Pie` | ECharts 层图表组件 |
-
-*表格子类型（核心 2 类）*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 可编辑表格（单元格直接输入） | `TableOrList(componentType="EditableProTable")` | 可编辑表格特征 |
-| 卡片列表（非表格式数据卡片） | `TableOrList(componentType="ProList")` | 卡片布局特征 |
+不要硬编码任何「Sketch 特征 → 组件」对照表——`componentSummary` 是唯一可信源，硬编码表会和服务端动态扫描结果漂移。
 
 #### ⚠️ TemplateMode 槽位传参铁律（高频踩坑）
 

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

@@ -42,7 +42,7 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 **在正式开始之前，获取项目架构全局视图，同时验证 MCP 连接。**
 
 执行动作：
-1. 调用 `get_architecture_overview`（detail="summary"）获取7层架构图、模板组合模式、推荐使用顺序和 LLM 映射错误提示
+1. 调用 `get_architecture_overview`（detail="full"）一次性获取：7 层架构图、模板组合模式、推荐使用顺序、LLM 映射错误提示，**以及 `componentSummary`（全量组件 + 设计元信息：layoutRole/variantProps/styleInjection/useCases，other/echarts 层附带 compositionSlots/requiredHooks/chartType/sketchSignals）+ `styleMapping`（节点样式映射）+ `assetExtraction`（图标/位图/图表色提取规则）**——这些是步骤 3.5 推理组件候选和步骤 5 样式注入的核心依据
 2. 如果连接失败，**立即停止并返回错误信息**，告知用户需要先配置 MCP 服务器
 3. 如果成功，根据返回的 `templatePatterns` 初步判断用户需求匹配哪个模板
 
@@ -370,6 +370,7 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 
 **输入**：
 - 步骤 1 的 `get_architecture_overview` 返回的 `templatePatterns`（TreeQueryTable / QueryTabsTables / LeftRight / UpDown）
+- 步骤 1 的 `componentSummary`：全量组件 + 设计元信息（layoutRole/variantProps/styleInjection/useCases，other/echarts 层附带 compositionSlots/requiredHooks/chartType/sketchSignals）—— **推理组件候选的权威目录，长尾场景按 layoutRole / useCases / sketchSignals 直接反查**
 - 步骤 1 的 `llmMappingHints.commonMistakes`（避免 LLM 常见映射错误）
 - 步骤 2.5 的 Sketch 节点结构 + 样式 Token
 - 或步骤 3 的图片分析描述
@@ -383,38 +384,15 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 - ❌ 在步骤 3 内部推理组件候选列表（应只产出图片描述）
 - ❌ 跳过此环节直接调 `get_component_full_profile`（必须先有候选列表）
 
-**推理时使用映射规则**（**此表为本步骤专用，仅含核心高频场景**）：
+**推理依据**：步骤 1 返回的 `componentSummary` 是组件候选的权威目录（由组件库源码动态生成），每项含 `layoutRole` / `variantProps` / `useCases` / `sketchSignals`（图表层）。按以下顺序反查：
 
-*页面级布局*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 画板名称（如 "4.1-编目审核-待办"） | `pageName` | 直接使用 |
-| 左右分区布局 | `TemplateMode(templateTpye="LeftRight")` | 区域分布 |
-| 上下分区布局 | `TemplateMode(templateTpye="TopBottom")` | 区域分布 |
-| 标签页(Tabs) + 每个 Tab 内有表格 | `QueryTabsTables` 或 `TemplateMode` + Tabs | templatePatterns.QueryTabsTables |
+1. **画板名称** → 直接作为 `pageName`
+2. **大区切分** → 看 `componentSummary.other` 里 `layoutRole === '页面定位'` 的组件（如 TemplateMode），结合 `variantProps.templateType`（LeftRight / TopBottom）和 `templatePatterns`（TreeQueryTable / QueryTabsTables）选模板
+3. **区域容器** → `layoutRole === '区域容器'` 的组件（LeftTree / Query / TableOrList / ModelOrDrawer / TitleAndBack / FormItemOrDetailItem 等），按 `useCases` 描述匹配 Sketch 区域语义
+4. **图表组件** → `componentSummary.echarts[*].sketchSignals` 反查 `chartType`，锁定 Line / Bar / Pie / Scatter 等
+5. **变体选择** → 同一组件的子类型（如 TableOrList 的 ProTable / ProList / EditableProTable）查 `variantProps` 配合 useCases
 
-*区域级组件*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 左侧窄区域 + 树形图层 | `LeftTree` 组件 | templatePatterns.TreeQueryTable |
-| 顶部输入框/下拉框/日期选择器 | `Query` 组件 | 搜索区域特征 |
-| 中间表头 + 数据行图层 | `TableOrList` 组件 | 表格区域特征 |
-| 弹窗/抽屉图层 | `ModelOrDrawer` 组件 | 弹窗交互特征 |
-| 页面标题 + 返回箭头 | `TitleAndBack` 组件 | 标题栏特征 |
-| 详情展示区域（只读字段） | `FormItemOrDetailItem(type="detail")` | 详情区特征 |
-
-*数据可视化（核心 3 类）*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 折线趋势图/时间序列图 | `Line` | ECharts 层图表组件 |
-| 柱状对比图/条形图 | `Bar` | ECharts 层图表组件 |
-| 饼图/环形图/占比图 | `Pie` | ECharts 层图表组件 |
-
-*表格子类型（核心 2 类）*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 可编辑表格（单元格直接输入） | `TableOrList(componentType="EditableProTable")` | 可编辑表格特征 |
-| 卡片列表（非表格式数据卡片） | `TableOrList(componentType="ProList")` | 卡片布局特征 |
+不要硬编码任何「Sketch 特征 → 组件」对照表——`componentSummary` 是唯一可信源，硬编码表会和服务端动态扫描结果漂移。
 
 #### ⚠️ TemplateMode 槽位传参铁律（高频踩坑）
 

package/opencode-extension/skills/local-browser-test/SKILL.md

@@ -12,7 +12,7 @@ compatibility:
 ## 触发条件
 
 当用户说出以下关键词时启动浏览器测试：
-- "测试一下"、"帮我验证"、"浏览器测试"
+- "测试一下"、"帮我验证"、"浏览器测试"、"接管浏览器"
 - "对比设计稿"、"还原度"、"看看效果"
 - "功能测试"、"能不能正常用"
 - "检查页面"、"页面渲染"
@@ -159,32 +159,89 @@ wujie 微前端子应用渲染在 blob URL iframe 中，**坐标点击无法到
 - `~#myId` → 自动转为 `[id*="myId"]`
 - 普通选择器（如 `.my-class`）保持精确匹配
 
-### puppeteer-core v22 注意事项
+## 实战经验补充
+
+### wujie 微前端诊断要点
+
+1. **子应用渲染在 blob URL iframe 中**，puppeteer 的 `page.frames()` 可以访问
+2. **iframe 内的 console 监听**：不要用 `frame.page().on()`（puppeteer-core 无此方法），改用 `page.on('console')` + `msg.frame().url()` 判断来源
+3. **生产环境 console 被屏蔽**：代码中 `console.log = () => {}` 导致 0 条消息。需提前注入 `localStorage.setItem('showConsoleLog', 'true')`
+4. **pageerror 事件是关键**：未捕获的 JS 异常不会出现在 console 中，必须监听 `page.on('pageerror')`
+5. **API 404/403 检查**：刷新页面后监听 `page.on('response')`，过滤 `resourceType === 'xhr'` 检查后端接口状态
+
+### 常见诊断流程
+
+```
+1. --action list-pages     确认目标页面存在
+2. --action diagnose       全面诊断（JS错误 + 网络 + 资源 + iframe）
+3. --action api-check      专门检查 API 请求（含 iframe 内的请求）
+4. 根据结果定位问题
+```
+
+### puppeteer-core 注意事项
+- **连接时必须设 `defaultViewport: null`**，否则浏览器窗口会被强制缩放到指定尺寸：
+  ```js
+  // 正确：保持浏览器原始窗口大小
+  puppeteer.connect({ browserURL: 'http://localhost:9222', defaultViewport: null })
+  // 错误：会把浏览器视口改成 1440x900
+  puppeteer.connect({ browserURL: '...', defaultViewport: { width: 1440, height: 900 } })
+  ```
 - `page.$x()` 已移除，用 `evaluate` + `querySelectorAll` 替代
 - SVG 元素的 `className` 是 `SVGAnimatedString` 对象而非字符串，需先检查 `typeof`
 - 所有 `evaluate` 调用内部使用 `safeEval` 包装，自动处理 context destroyed 错误
 
 ## 执行命令
 
+### 快速诊断（最常用）
+```bash
+NODE_PATH=~/.szcd-mcp/deps/node_modules node {skill_path}/local-browser-executor.cjs \
+  --action diagnose \
+  --url-contains "platform.aicityos.com" \
+  --wait 15000 \
+  --output-dir /tmp/browser-test-diagnose
+```
+
+### 列出所有标签页
+```bash
+NODE_PATH=~/.szcd-mcp/deps/node_modules node {skill_path}/local-browser-executor.cjs \
+  --action list-pages
+```
+
+### 检查 API 请求状态
+```bash
+NODE_PATH=~/.szcd-mcp/deps/node_modules node {skill_path}/local-browser-executor.cjs \
+  --action api-check \
+  --url-contains "platform.aicityos.com" \
+  --wait 15000
+```
+
+### 截图
 ```bash
-node {client_install_path}/local-browser-executor.js \
-  --plan '<测试计划JSON>' \
-  --output /tmp/browser-test-result.json \
-  --base-url http://localhost:8088
+NODE_PATH=~/.szcd-mcp/deps/node_modules node {skill_path}/local-browser-executor.cjs \
+  --action screenshot \
+  --url-contains "platform.aicityos.com" \
+  --filename current-page.png \
+  --output-dir /tmp/browser-test
 ```
 
-也支持从文件读取计划：
+### 执行测试计划 JSON
 ```bash
-node {client_install_path}/local-browser-executor.js \
+NODE_PATH=~/.szcd-mcp/deps/node_modules node {skill_path}/local-browser-executor.cjs \
+  --action plan \
   --plan-file /tmp/test-plan.json \
-  --output /tmp/browser-test-result.json \
-  --base-url http://localhost:8088
+  --output /tmp/browser-test-result.json
 ```
 
 ### 可选参数
 
-- `--cdp-url http://localhost:9223`：指定非默认的 CDP 端口
-- `--page-url http://xxx/page`：connect 模式下指定目标页面
+- `--cdp-url http://localhost:9222`：CDP 地址（默认 9222）
+- `--url <url>`：目标页面 URL（不存在则导航）
+- `--url-contains <keyword>`：按关键词查找已打开的页面
+- `--wait <ms>`：额外等待时间（默认 5000ms，微前端建议 15000）
+- `--output <path>`：JSON 结果输出路径
+- `--output-dir <dir>`：截图/产物目录
+- `--filename <name>`：截图文件名
+- `--full-page`：全页截图
 
 ## AI 语义断言（aiAssert）
 
@@ -216,7 +273,7 @@ node {client_install_path}/local-browser-executor.js \
 - 后续所有项目共享复用，无需重复安装
 - 如果自动安装失败，引导用户手动执行：
 ```bash
-cd ~/.szcd-mcp/deps && npm install puppeteer-core pixelmatch pngjs sharp --registry=https://npmmirror.com
+cd ~/.szcd-mcp/deps && npm install puppeteer-core pixelmatch pngjs sharp --registry=https://registry.npmmirror.com
 ```
 
 ## 结果解读