@szc-ft/mcp-szcd-client 0.21.0 → 0.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/agents/build.js +152 -130
  2. package/agents/opencode-extension/agents/szcd-component-expert.md +96 -12
  3. package/agents/platforms.json +17 -7
  4. package/agents/qwen-extension/agents/szcd-component-expert.md +95 -12
  5. package/agents/src/szcd-component-expert.md +169 -6
  6. package/agents/src/tools.json +10 -5
  7. package/agents/szcd-component-expert.md +97 -14
  8. package/agents/szcd-component-expert.qoder.md +185 -15
  9. package/agents/szcd-component-expert.trae.md +175 -13
  10. package/opencode-extension/agents/szcd-component-expert.md +96 -12
  11. package/opencode-extension/commands/szcd-mcp-api-config.md +48 -0
  12. package/opencode-extension/commands/szcd-mcp-auth.md +39 -0
  13. package/opencode-extension/commands/szcd-mcp-browser-test.md +57 -0
  14. package/opencode-extension/commands/szcd-mcp-coding-config.md +40 -0
  15. package/opencode-extension/commands/szcd-mcp-feedback.md +42 -0
  16. package/opencode-extension/commands/szcd-mcp-url.md +37 -0
  17. package/opencode-extension/opencode.json +15 -0
  18. package/opencode-extension/skills/local-api-tool/SKILL.md +246 -0
  19. package/opencode-extension/skills/local-browser-test/SKILL.md +249 -0
  20. package/opencode-extension/skills/szcd-component-helper/SKILL.md +523 -0
  21. package/opencode-extension/skills/szcd-design-to-code/SKILL.md +168 -0
  22. package/package.json +3 -2
  23. package/qwen-extension/QWEN.md +29 -8
  24. package/qwen-extension/agents/szcd-component-expert.md +95 -12
  25. package/qwen-extension/qwen-extension.json +6 -1
  26. package/qwen-extension/skills/szcd-component-helper/SKILL.md +81 -1
  27. package/qwen-extension/skills/szcd-design-to-code/SKILL.md +168 -0
  28. package/scripts/lib/claude-code.js +45 -1
  29. package/scripts/lib/common.js +17 -0
  30. package/scripts/lib/opencode.js +108 -12
  31. package/scripts/lib/qoder.js +42 -1
  32. package/scripts/lib/trae-cli.js +39 -1
  33. package/scripts/lib/trae-ide.js +40 -1
  34. package/scripts/postinstall.js +28 -0
  35. package/standard-skill/szcd-component-helper/SKILL.md +81 -1
  36. package/standard-skill/szcd-design-to-code/SKILL.md +168 -0
@@ -0,0 +1,523 @@
1
+ ---
2
+ name: szcd-component-helper
3
+ description: 帮助用户查询和了解 szcd 项目中的组件信息,包括 Cover 层组件、Wrapper 层组件、Ant Design 组件、ProComponents、ProPackages 以及复合组件。支持组件搜索、详情查询、使用示例搜索、设计稿分析、API 联调和文件读取。当用户需要了解 szcd 项目的组件结构、查看组件实现、寻找组件使用示例、根据设计稿生成代码时,应使用此技能。它是一个前端组件库,全名"@szc-ft/szcd"。这是一个客户端 skill,通过 MCP 协议(SSE 或 HTTP)连接到远程 MCP 服务器。
4
+ compatibility:
5
+ tools:
6
+ - web_search
7
+ - web_fetch
8
+ - run_command
9
+ - read
10
+ - write
11
+
12
+ ---
13
+
14
+ # szcd 组件助手技能(客户端)
15
+
16
+ ## 概述
17
+
18
+ 此技能提供对 szcd 项目组件的查询和分析能力,帮助用户快速了解项目中的组件结构、实现细节、使用示例、设计稿还原和后端 API 联调。
19
+
20
+ **重要说明**:这是一个客户端 skill,通过 MCP 协议(SSE 或 HTTP)连接到远程 MCP 服务器。服务器由管理员维护,包含源码和数据。
21
+
22
+ **版本**:v0.18.0 - 新增 MCP 鉴权支持:postinstall 自动同步 API Key 到 IDE 配置,szcd-mcp-auth 命令支持 set/clear 并自动更新所有 IDE 的 mcp.json
23
+
24
+ ## 架构说明
25
+
26
+ ```
27
+ ┌─────────────────────────────────────────────────────────────┐
28
+ │ 连接方式(三选一) │
29
+ ├─────────────────────────────────────────────────────────────┤
30
+ │ │
31
+ │ 方式1: 本地直连 (stdio) — 推荐 │
32
+ │ ┌─────────────┐ stdio ┌─────────────────────────┐│
33
+ │ │ IDE/AI │ ◄─────────────►│ szcd-mcp-server ││
34
+ │ │ Client │ │ (本地运行) ││
35
+ │ └─────────────┘ └─────────────────────────┘│
36
+ │ │
37
+ │ 方式2: Streamable HTTP 远程连接 — 推荐 │
38
+ │ ┌─────────────┐ HTTP ┌─────────────────────────┐ │
39
+ │ │ IDE/AI │ ◄───────────►│ MCP Server (HTTP 模式) │ │
40
+ │ │ Client │ POST /mcp │ 管理员机器 │ │
41
+ │ │ │ │ (源码 + 数据) │ │
42
+ │ └─────────────┘ └─────────────────────────┘ │
43
+ │ │
44
+ │ 方式2b: SSE 远程连接(旧客户端向后兼容) │
45
+ │ ┌─────────────┐ SSE ┌─────────────────────────┐│
46
+ │ │ IDE/AI │ ◄────────────►│ MCP Server (SSE 模式) ││
47
+ │ │ Client │ GET /sse │ 管理员机器 ││
48
+ │ │ │ POST /message│ (源码 + 数据) ││
49
+ │ └─────────────┘ └─────────────────────────┘│
50
+ │ │
51
+ │ 方式3: 代理桥接 (向后兼容) │
52
+ │ ┌─────────────┐ stdio ┌───────────┐ SSE/HTTP ┌─────┐│
53
+ │ │ IDE/AI │◄───────►│mcp-proxy │◄──────────►│Server││
54
+ │ │ Client │ │(桥接代理) │ │ ││
55
+ │ └─────────────┘ └───────────┘ └─────┘│
56
+ └─────────────────────────────────────────────────────────────┘
57
+ ```
58
+
59
+ ## 推荐工作流(页面生成类任务)
60
+
61
+ AI 助手在处理页面生成需求时,必须按以下流程使用工具:
62
+
63
+ ### 步骤1:架构认知 + 需求理解
64
+ - 调用 `get_architecture_overview(detail="summary")` 获取 7 层架构和模板组合模式
65
+ - 分析用户需求的页面布局类型、查询字段、操作按钮、表格列等
66
+
67
+ ### 步骤2:组件发现(优先语义搜索)
68
+ - 使用 `search_components_semantic(query="...", scope="all")` 进行语义搜索,比关键词匹配更精准
69
+ - 例如:"查询表单" → Query,"左树右表" → LeftTree + TableOrList + TemplateMode
70
+
71
+ ### 步骤3:一站式组件查询(替代多次调用)
72
+ - 使用 `get_component_full_profile(name, depth="deep")` 一次性获取:
73
+ - `name` 支持逗号分隔批量查询(如 `"Query,TableOrList"`)
74
+ - 基本信息 + Props(优先 mode-packages 文档)+ 透传机制
75
+ - 源码摘要(关键函数、架构、导航图)+ Props 链深度解析
76
+ - 依赖关系 + 使用示例 + 最佳实践 + 样式注入信息
77
+ - **返回值是紧凑 Markdown 格式,直接阅读即可**
78
+ - 如需样式注入细节,额外调用 `get_style_injection_guide`
79
+ - 如需组合最佳实践,额外调用 `get_best_practices(scenario="...")`
80
+
81
+ ### 步骤3.5:Sketch 文件解析(如有 .sketch 设计稿)
82
+ - **当用户提供 .sketch 文件时**,使用 `sketch-mcp-server`(独立 MCP Server,stdio 模式)解析,直接提取结构化数据,结合组件库架构推理组件方案,无需经过视觉模型和 `map_design_data`
83
+ - 工作流(4步直传):
84
+ 1. **解析 Sketch 结构**:`loadSketchByPath` → `listPages` → `listNodesByPage(type="artboard")` → `getNodeInfo`/`getPageStructure(maxDepth=2)` 提取结构
85
+ 2. **获取组件库架构**(复用步骤1结果):`get_architecture_overview` 的 `templatePatterns` 提供模板组合模式,`llmMappingHints` 提供常见错误修正
86
+ 3. **LLM 推理组件范围**:从 Sketch 结构化数据推断画板名称→`pageName`、区域分布→`layoutType`、图层类型→组件映射,对照 `templatePatterns` 选择最匹配的模板,输出组件候选列表
87
+ 4. **批量获取组件详情**:调用 `get_component_full_profile(name="Query,TableOrList,LeftTree,TemplateMode", depth="deep")` 一次性获取所有需要的组件 API
88
+
89
+ **Sketch → szcd 工作流(结构化直传,无需视觉模型)**:
90
+ ```
91
+ .sketch → loadSketchByPath → listPages → listNodesByPage(type=artboard)
92
+ → getNodeInfo/getPageStructure → [步骤1架构数据] → LLM推理组件
93
+ → get_component_full_profile(批量) → 编码
94
+ ```
95
+
96
+ **Sketch 结构 → 组件映射规则**:
97
+ | Sketch 特征 | 推断结果 | 依据 |
98
+ |---|---|---|
99
+ | 画板名称(如 "4.1-编目审核-待办") | `pageName` | 直接使用 |
100
+ | 左侧窄区域 + 树形图层 | `LeftTree` 组件 | templatePatterns.TreeQueryTable |
101
+ | 顶部输入框/下拉框/日期选择器 | `Query` 组件 | 搜索区域特征 |
102
+ | 中间表头 + 数据行图层 | `TableOrList` 组件 | 表格区域特征 |
103
+ | 弹窗/抽屉图层 | `ModelOrDrawer` 组件 | 弹窗交互特征 |
104
+ | 页面标题 + 返回箭头 | `TitleAndBack` 组件 | 标题栏特征 |
105
+ | 左右分区布局 | `TemplateMode(templateTpye="LeftRight")` | 区域分布 |
106
+ | 上下分区布局 | `TemplateMode(templateTpye="TopBottom")` | 区域分布 |
107
+
108
+ **提示**:
109
+ - 大型 .sketch 文件用 `getPageStructure(maxDepth=1-2)` 即可获取布局概况,避免深层递归超时
110
+ - `listNodesByPage(type="artboard")` 优先于 `getPageStructure`,更轻量
111
+ - 仅当结构化数据不足以判断视觉细节(颜色、间距、字体)时,才回退到 `renderNodeAsBase64` + `analyze_design_image`
112
+ - 如果 sketch-mcp-server 工具不可用,提示用户安装:`npm install -g sketch-mcp-server`
113
+
114
+ ### 步骤4:设计稿分析(如有)
115
+ - 使用 `analyze_design_image` 分析设计稿,建议 `outputFormat="restoration_code"` 直接输出还原代码
116
+ - 使用 `get_style_injection_guide` 处理 CSS 分配
117
+
118
+ ### 步骤5:代码生成 + 样式注入
119
+ - 生成代码时包含 ModeStyle / ConfigProvider 配置
120
+ - 参考 `get_best_practices(scenario="...")` 获取场景组合最佳实践
121
+
122
+ ### 步骤6:收集用户反馈(质量闭环)
123
+ - **必须**在代码输出后主动询问用户满意度
124
+ - 若用户表示不准确或不采纳,收集原因
125
+ - 调用 `submit_feedback` 将反馈提交到服务器
126
+
127
+ ## 可用工具(13 + 17 Sketch)
128
+
129
+ ### Sketch 文件解析工具(sketch-mcp-server,独立 MCP Server)
130
+
131
+ sketch-mcp-server 是社区版 MCP Server(npm: `sketch-mcp-server`),通过 stdio 模式运行,提供 .sketch 文件解析能力。
132
+
133
+ #### S1. loadSketchByPath
134
+ **功能**:从文件路径加载 .sketch 文件(本质是 ZIP 压缩包),自动解压解析。
135
+ **参数**:
136
+ - `path` (string, required): .sketch 文件的绝对路径
137
+
138
+ #### S2. listPages
139
+ **功能**:列出 .sketch 文件中所有页面,返回页面 ID、名称和图层计数。
140
+ **参数**:无必填参数
141
+
142
+ #### S3. getPageStructure
143
+ **功能**:获取页面的完整层级结构,包含 artboard、group、layer 等节点。
144
+ **参数**:
145
+ - `pageId` (string, required): 页面 ID(从 listPages 获取)
146
+ - `includeDetails` (boolean, optional, default: true): 是否包含详细信息
147
+ - `maxDepth` (number, optional, default: 10): 最大递归深度
148
+
149
+ #### S4. renderNodeAsBase64
150
+ **功能**:将节点渲染为 SVG 图片的 Base64 编码,可直接传入 analyze_design_image。
151
+ **参数**:
152
+ - `nodeId` (string, required): 节点 ID(artboard 级别效果最佳)
153
+ - `format` (enum, optional, default: "svg"): 输出格式,当前仅支持 svg
154
+
155
+ #### S5. getNodesSummary
156
+ **功能**:获取节点统计摘要,Token 消耗比完整信息减少 80-90%。
157
+ **参数**:
158
+ - `pageId` (string, optional): 页面 ID
159
+ - `groupBy` (enum, optional): type/style/position/size
160
+ - `includeStats` (boolean, optional, default: true)
161
+
162
+ #### S6. findNodesByName
163
+ **功能**:按名称搜索节点,支持模糊匹配。
164
+ **参数**:
165
+ - `name` (string, required): 搜索关键词
166
+ - `limit` (number, optional, default: 10): 最大返回数量
167
+
168
+ #### S7-S17. 其他 Sketch 工具
169
+ - `listNodes` / `listNodesByPage` — 列出节点(含过滤)
170
+ - `getNodeInfo` / `getMultipleNodeInfo` — 获取节点详情
171
+ - `getNodePosition` — 获取节点位置
172
+ - `getDocumentStructure` — 获取文档结构(支持字段过滤和摘要模式)
173
+ - `getSymbolMasters` / `getSymbolInstances` — Symbol 组件管理
174
+ - `getSymbolMasterBySymbolID` / `getSymbolInstanceStyles` — Symbol 详情
175
+
176
+ ### 复合组件工具
177
+
178
+ #### 1. read_file
179
+ **功能**:读取仓库内文件(相对路径),支持路径自动纠错(node_modules → src、扩展名纠正、目录补全)。
180
+ **参数**:
181
+ - `path` (string, required): 文件相对路径
182
+ - `maxChars` (number, optional, default: 20000): 最大字符数 200-200000
183
+
184
+ ### Cover 层组件工具
185
+
186
+ ### Ant Design 组件工具
187
+
188
+ #### 2. get_antd_component
189
+ **功能**:获取 Ant Design 组件的详细信息,包括中文名、描述、API 文档链接和 Props 列表。
190
+ **参数**:
191
+ - `name` (string, required): 组件名称
192
+
193
+ ### ProComponents 组件工具
194
+
195
+ #### 3. get_pro_component
196
+ **功能**:获取 ProComponents 组件的详细信息,包括特性说明、API 文档和 Props 列表。
197
+ **参数**:
198
+ - `name` (string, required): 组件名称
199
+
200
+ ### 全局搜索与架构工具
201
+
202
+ #### 4. get_architecture_overview
203
+ **功能**:查看 7 层架构(AntD→Cover→Wrapper→ProPackage→复合组件→模板)、层级关系和推荐使用顺序。含 LLM 映射修正提示。
204
+ **参数**:
205
+ - `detail` (enum, optional, default: "summary"): summary=层级概览+模板模式+LLM提示;full=含所有层组件列表详情
206
+
207
+ ### Props 深度解析工具
208
+
209
+ ### 设计稿分析工具
210
+
211
+ #### 5. analyze_design_image
212
+ **功能**:分析 UI 设计稿图片,提取 Token 配置、CSS 覆盖样式、视觉细节。支持 base64/URL/文件路径,pixel_perfect 模式最高还原度。
213
+ **参数**:
214
+ - `imageSource` (string, required): 图片数据(base64/URL/文件路径)
215
+ - `sourceType` (enum, optional, default: "file_path"): base64/url/file_path
216
+ - `analysisType` (enum, optional, default: "full"): layout/components/tokens/full/pixel_perfect
217
+ - `pageContext` (string, optional): 页面业务上下文
218
+ - `targetLibrary` (enum, optional, default: "auto"): szcd/antd/pro-components/auto
219
+ - `outputFormat` (enum, optional, default: "markdown"): markdown/json/structured_text/restoration_code
220
+
221
+ **重要提示**:远程 SSE/HTTP 连接时优先使用 base64;本地 stdio 可用 file_path。
222
+
223
+ ### 样式注入指南工具
224
+
225
+ #### 6. get_style_injection_guide
226
+ **功能**:查询复合组件的样式注入方法:可用样式 props、注入方式、代码示例、嵌套 CSS 穿透路径和智能分配策略。
227
+ **参数**:
228
+ - `componentNames` (string[], optional): 组件名列表
229
+ - `includeNesting` (boolean, optional, default: true): 是否包含嵌套注入指南
230
+ - `includeSmartDistribute` (boolean, optional, default: false): 是否包含智能 CSS 分配
231
+ - `cssOverrides` (array, optional): CSS 覆盖列表(用于智能分配)
232
+ - `includeDeepStyleKnowledge` (enum, optional, default: "off"): off/summary/full/examples
233
+ - `outputFormat` (enum, optional, default: "markdown"): markdown/json/text
234
+
235
+ ### Swagger 联调工具
236
+
237
+ ### CODING Issue 工具
238
+
239
+ #### 7. coding_fetch_issue
240
+ **功能**:获取 CODING Issue 详情。支持直接粘贴 Issue URL 自动解析,也支持 Cookie(推荐)或账号密码认证。支持从配置文件读取默认参数。
241
+ **参数**:
242
+ - `url` (string, optional): 完整 Issue URL,如 http://xxx/p/p-nkdq3ke/all/issues/46269。提供后自动解析 projectName 和 issueCode
243
+ - `issueCode` (string, optional): Issue 编号,如 6249
244
+ - `baseUrl` (string, optional): CODING 基础地址(可从配置文件读取)
245
+ - `projectId` (string, optional): 项目 ID(可从配置文件读取)
246
+ - `projectName` (string, optional): 项目名(如 p-nkdq3ke),提供后自动解析为 projectId
247
+ - `cookies` (string, optional): 浏览器 Cookie 字符串
248
+ - `account` (string, optional): CODING 账号
249
+ - `password` (string, optional): CODING 密码
250
+ - `withDescriptionMarkup` (boolean, optional, default: true): 是否返回富文本格式
251
+
252
+ #### 8. coding_config
253
+ **功能**:查看/设置 CODING 默认配置(baseUrl/projectId/账号/Cookie)。
254
+ **参数**:
255
+ - `action` (enum, optional, default: "get"): get/set/clear
256
+ - `baseUrl`, `projectId`, `account`, `cookies`, `password` (optional, set 时生效)
257
+
258
+ ### API 工具
259
+
260
+ #### 9. api_tool
261
+ **功能**:统一 API 工具,自动识别 YApi/Swagger 拉取 API 文档、联调测试、配置管理、解析本地 Swagger JSON。
262
+ **参数**:
263
+ - `action` (enum, required): fetch=拉取API文档, test=联调测试, config=配置管理, parse_swagger_json=解析本地curl获取的Swagger JSON
264
+ - `url` (string, optional): API文档地址(fetch时)/ 请求地址(test时)
265
+ - `method` (enum, optional, default: "GET"): GET/POST/PUT/DELETE/PATCH(test时)
266
+ - `data` (object, optional, default: {}): 请求参数(test时)
267
+ - `headers` (object, optional, default: {}): 请求头(test时)
268
+ - `username` / `password` / `account` / `cookies` (string, optional): 鉴权信息
269
+ - `yapiBaseUrl` / `yapiAccount` / `yapiPassword` / `yapiCookies` (string, optional): YApi 配置(config set 时生效)
270
+ - `swaggerJson` (string, optional): 客户端本地 curl 获取的 Swagger JSON 字符串(parse_swagger_json 时必填)
271
+ - `swaggerSourceUrl` (string, optional): 原始 Swagger URL(parse_swagger_json 时可选,用于补充元数据)
272
+
273
+ **10段网段本地执行**:当 fetch/test 遇到 `10.x.x.x` 网段地址时,服务端返回 `LOCAL_NETWORK_UNREACHABLE`,此时应使用 `local-api-tool` 技能在用户本地执行 curl,再调用 `parse_swagger_json` 解析。详见 `local-api-tool` 技能。
274
+
275
+ ### Repowiki 增强工具(推荐优先使用)
276
+
277
+ #### 10. get_component_full_profile
278
+ **功能**:一站式获取组件完整画像:基本信息、Props(优先 mode-packages 文档)、源码摘要、示例、最佳实践、依赖、样式注入。支持逗号分隔批量查询,返回值是紧凑 Markdown 格式。
279
+ **参数**:
280
+ - `name` (string, required): 组件名称,支持逗号分隔批量查询(如 `"Query,TableOrList"`)
281
+ - `depth` (enum, optional, default: "standard"): quick=基本信息+核心Props;standard=完整画像;deep=含Props链解析+源码摘要
282
+
283
+ **推荐使用场景**:替代多次单独查询,一次获取组件的全部信息。
284
+
285
+ #### 11. search_components_semantic
286
+ **功能**:语义搜索组件,支持中文关键词和场景描述。如"查询表单"→Query,"树形导航"→LeftTree。
287
+ **参数**:
288
+ - `query` (string, required): 自然语言查询
289
+ - `scope` (enum, optional, default: "all"): all/template/cover/wrapper/pro/chart
290
+ - `maxResults` (number, optional, default: 10): 最大结果数 1-30
291
+
292
+ **推荐使用场景**:组件初筛首选,语义匹配比关键词搜索更精准。
293
+
294
+ #### 12. get_best_practices
295
+ **功能**:获取组件使用最佳实践和常见错误修正。指定 scenario 可获取组合最佳实践。
296
+ **参数**:
297
+ - `componentName` (string, optional): 组件名称
298
+ - `scenario` (string, optional): 场景描述,如"左树右表页面"
299
+
300
+ ### 反馈收集工具
301
+
302
+ #### 13. submit_feedback
303
+ **功能**:提交用户对本次 AI 生成结果的反馈。AI 助手在生成代码后应主动询问用户满意度,若用户表示不准确或不采纳,则收集原因并通过此工具提交到服务器,用于持续优化 MCP 工具质量。
304
+ **参数**:
305
+ - `sessionId` (string, required): 会话 ID
306
+ - `toolsUsed` (string[], optional): 本次使用的工具列表
307
+ - `userQuery` (string, optional): 用户原始需求
308
+ - `generatedCodeSummary` (string, optional): 生成代码摘要
309
+ - `accuracyRating` (number, optional): 准确性评分 1-5
310
+ - `adopted` (boolean, required): 是否采纳
311
+ - `rejectionReason` (string, optional): 未采纳原因
312
+ - `contextSnapshot` (object, optional): 额外上下文
313
+ - `toolType` (string, optional): IDE 类型 trae/claude/qwen/cursor/vscode/generic
314
+
315
+ ## 工具使用优先级
316
+
317
+ | 优先级 | 工具 | 用途 |
318
+ |--------|------|------|
319
+ | P0 | `get_architecture_overview` | 首次使用时获取架构全局视图 |
320
+ | P0 | `search_components_semantic` | 语义搜索,比关键词搜索更精准 |
321
+ | P0 | `get_component_full_profile` | 一站式查询,支持批量,返回 Markdown |
322
+ | P1 | `get_best_practices` | 获取场景组合最佳实践 |
323
+ | P1 | `analyze_design_image` | 设计稿分析 |
324
+ | P1 | `get_style_injection_guide` | 样式注入配置 |
325
+ | P2 | `api_tool` | API 文档拉取 / 联调测试(YApi/Swagger) |
326
+ | P2 | `read_file` | 读取源码文件确认行为 |
327
+ | P2 | `get_antd_component` / `get_pro_component` | 底层组件详情 |
328
+ | P3 | `coding_fetch_issue` / `coding_config` | 需求追踪 / 配置管理 |
329
+ | - | `submit_feedback` | **代码生成后必做:收集反馈** |
330
+
331
+ ## 旧工具迁移映射
332
+
333
+ | 已移除的旧工具 | 替代方案 |
334
+ |---|---|
335
+ | `list_other_components` | `search_components_semantic` 或 `get_component_full_profile` |
336
+ | `get_other_component` | `get_component_full_profile` |
337
+ | `search_component_examples` | `get_component_full_profile`(含示例) |
338
+ | `list_cover_components` | `search_components_semantic(scope="cover")` |
339
+ | `get_cover_component` | `get_component_full_profile` |
340
+ | `list_wrapper_components` | `search_components_semantic(scope="wrapper")` |
341
+ | `list_pro_package_components` | `search_components_semantic(scope="pro")` |
342
+ | `list_antd_components` / `list_antd_components_by_category` | `search_components_semantic` |
343
+ | `list_pro_components` / `list_pro_components_by_category` | `search_components_semantic` |
344
+ | `search_all_components` | `search_components_semantic` |
345
+ | `get_component_library_overview` | `get_architecture_overview` |
346
+ | `get_accurate_component_doc` | `get_component_full_profile(depth="deep")` |
347
+ | `resolve_props_chain` | `get_component_full_profile(depth="deep")` |
348
+ | `get_component_dependencies` | `get_component_full_profile`(含依赖) |
349
+ | `swagger_fetch_apis` / `swagger_test_api` | `api_tool(action="fetch")` / `api_tool(action="test")` |
350
+ | `refresh_component_docs` / `regenerate_accurate_docs` | 已移除(管理操作转 REST API) |
351
+
352
+ ## 安装方式
353
+
354
+ ### 通过 npm 安装
355
+
356
+ ```bash
357
+ npm install @szc-ft/mcp-szcd-component-helper
358
+ ```
359
+
360
+ 安装后会自动:
361
+ - 安装 MCP 代理脚本
362
+ - 自动配置 skill 到 `~/.trae-cn/skills/szcd-component-helper/`
363
+ - 创建配置文件模板 `~/.szcd-mcp-config.json`
364
+
365
+ ## 配置步骤
366
+
367
+ ### 步骤1:安装客户端包
368
+
369
+ ```bash
370
+ npm install @szc-ft/mcp-szcd-component-helper
371
+ ```
372
+
373
+ ### 步骤2:配置服务器地址
374
+
375
+ 编辑配置文件 `~/.szcd-mcp-config.json`:
376
+
377
+ ```json
378
+ {
379
+ "MCP_SERVER_URL": "http://localhost:3456",
380
+ "MCP_TIMEOUT": 30000,
381
+ "MCP_API_KEY": ""
382
+ }
383
+ ```
384
+
385
+ ### 步骤3:在 IDE 配置中设置
386
+
387
+ **Trae CLI Streamable HTTP 直连(推荐)**
388
+
389
+ 在 `~/.trae/trae_cli.yaml` 中配置:
390
+
391
+ ```yaml
392
+ mcp_servers:
393
+ - name: szcd-component-helper
394
+ url: http://localhost:3456/mcp
395
+ type: http
396
+ ```
397
+
398
+ **本地直连 stdio(推荐,无需远程服务器)**
399
+
400
+ ```json
401
+ {
402
+ "mcpServers": {
403
+ "szcd-component-helper": {
404
+ "command": "npx",
405
+ "args": ["szcd-mcp-server", "--stdio"]
406
+ }
407
+ }
408
+ }
409
+ ```
410
+
411
+ **Qwen Code / Qoder CLI Streamable HTTP 直连(推荐)**
412
+
413
+ 在 `~/.qwen/settings.json` 中配置:
414
+
415
+ ```json
416
+ {
417
+ "mcpServers": {
418
+ "szcd-component-helper": {
419
+ "httpUrl": "http://localhost:3456/mcp",
420
+ "timeout": 30000
421
+ }
422
+ }
423
+ }
424
+ ```
425
+
426
+ **Qwen Code / Qoder CLI 本地直连 stdio(推荐,无需远程服务器)**
427
+
428
+ ```json
429
+ {
430
+ "mcpServers": {
431
+ "szcd-component-helper": {
432
+ "command": "npx",
433
+ "args": ["szcd-mcp-server", "--stdio"]
434
+ }
435
+ }
436
+ }
437
+ ```
438
+
439
+ **Claude Code 配置**
440
+
441
+ ```json
442
+ {
443
+ "mcpServers": {
444
+ "szcd-component-helper": {
445
+ "command": "npx",
446
+ "args": ["szcd-mcp-server", "--stdio"]
447
+ }
448
+ }
449
+ }
450
+ ```
451
+
452
+ ### 步骤4:验证配置
453
+
454
+ ```bash
455
+ curl http://localhost:3456/health
456
+ npx szcd-mcp-proxy --test
457
+ ```
458
+
459
+ ## 反馈收集(质量闭环)
460
+
461
+ ### 触发时机
462
+
463
+ 当 AI 助手完成以下任一任务后,**必须**主动询问用户反馈:
464
+ - 生成了基于 szcd 组件库的页面代码
465
+ - 推荐了组件方案并生成代码
466
+ - 根据设计稿分析结果生成还原代码
467
+
468
+ ### 反馈问题
469
+
470
+ AI 助手应在代码输出后询问:
471
+
472
+ 1. "代码是否准确满足您的需求?(1-5分)"
473
+ 2. "您是否计划采纳这段代码?"
474
+ 3. 如果用户表示不准确或不采纳:
475
+ - "请问哪里不准确?是组件选择、Props 用法、还是布局结构?"
476
+ - "请描述您的预期,以便我改进。"
477
+
478
+ ### 提交反馈
479
+
480
+ 收集到用户反馈后,AI 助手应调用 `submit_feedback` MCP 工具将反馈提交到服务器:
481
+
482
+ ```json
483
+ {
484
+ "sessionId": "<当前会话ID或生成UUID>",
485
+ "toolsUsed": ["search_components_semantic", "get_component_full_profile", "get_best_practices"],
486
+ "userQuery": "用户原始需求",
487
+ "generatedCodeSummary": "生成代码的首行/核心结构摘要",
488
+ "accuracyRating": 3,
489
+ "adopted": false,
490
+ "rejectionReason": "用户描述的不准确之处",
491
+ "contextSnapshot": {
492
+ "selectedComponents": ["Query", "TableOrList"],
493
+ "templateType": "LeftRight"
494
+ },
495
+ "toolType": "trae"
496
+ }
497
+ ```
498
+
499
+ ### 提交时机
500
+
501
+ - 用户明确表示不采纳 → 立即提交
502
+ - 用户给出修改意见 → 先修改代码,若仍不采纳则提交
503
+ - 用户未回复反馈问题 → 在对话结束时自动提交(adopted 建议设为 false,rejectionReason 为"用户未反馈")
504
+
505
+ ## 注意事项
506
+
507
+ - 所有路径都是相对于项目根目录的相对路径
508
+ - **优先使用语义搜索 `search_components_semantic` 和一站式查询 `get_component_full_profile`**,减少工具调用次数
509
+ - `get_component_library_overview`、`list_other_components`、`search_all_components` 等旧工具已移除,请使用 `get_architecture_overview` 和 `search_components_semantic` 替代
510
+ - **需要确保 MCP 服务器正在运行,否则无法查询数据**
511
+ - **设计稿分析功能需要配置视觉模型 API Key**,未配置时 analyze_design_image 工具会返回错误
512
+ - **反馈收集是可选但强烈建议的功能**,有助于持续优化 MCP 工具质量
513
+
514
+ ## 故障排除
515
+
516
+ ### 连接失败
517
+
518
+ 1. 检查服务器是否运行:`curl ${MCP_SERVER_URL}/health`
519
+ 2. 检查防火墙设置
520
+ 3. 检查网络连接
521
+ 4. 确认 `MCP_SERVER_URL` 配置正确
522
+ 5. 检查环境变量是否正确设置
523
+ 6. 检查配置文件 `~/.szcd-mcp-config.json` 是否存在