@szc-ft/mcp-szcd-client 0.13.0 → 0.13.2
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.
- package/package.json +1 -1
- package/qwen-extension/qwen-extension.json +1 -1
- package/qwen-extension/skills/szcd-component-helper/SKILL.md +231 -563
- package/scripts/lib/claude-code.js +15 -11
- package/scripts/lib/common.js +29 -5
- package/scripts/lib/qoder.js +15 -11
- package/scripts/lib/trae-cli.js +16 -11
- package/scripts/lib/trae-ide.js +15 -11
- package/scripts/postinstall.js +6 -4
- package/standard-skill/szcd-component-helper/SKILL.md +439 -0
- package/skill/SKILL.md +0 -827
- package/standard-skill/SKILL.md +0 -1509
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: szcd-component-helper
|
|
3
|
-
description: 帮助用户查询和了解 szcd 项目中的组件信息,包括 Cover 层组件、Wrapper 层组件、Ant Design 组件、ProComponents
|
|
3
|
+
description: 帮助用户查询和了解 szcd 项目中的组件信息,包括 Cover 层组件、Wrapper 层组件、Ant Design 组件、ProComponents、ProPackages 以及复合组件。支持组件搜索、详情查询、使用示例搜索、设计稿分析、API 联调和文件读取。当用户需要了解 szcd 项目的组件结构、查看组件实现、寻找组件使用示例、根据设计稿生成代码时,应使用此技能。它是一个前端组件库,全名"@szc-ft/szcd"。这是一个客户端 skill,通过 MCP 协议(SSE 或 HTTP)连接到远程 MCP 服务器。
|
|
4
4
|
compatibility:
|
|
5
5
|
tools:
|
|
6
6
|
- web_search
|
|
@@ -15,11 +15,11 @@ compatibility:
|
|
|
15
15
|
|
|
16
16
|
## 概述
|
|
17
17
|
|
|
18
|
-
此技能提供对 szcd
|
|
18
|
+
此技能提供对 szcd 项目组件的查询和分析能力,帮助用户快速了解项目中的组件结构、实现细节、使用示例、设计稿还原和后端 API 联调。
|
|
19
19
|
|
|
20
20
|
**重要说明**:这是一个客户端 skill,通过 MCP 协议(SSE 或 HTTP)连接到远程 MCP 服务器。服务器由管理员维护,包含源码和数据。
|
|
21
21
|
|
|
22
|
-
**版本**:v0.
|
|
22
|
+
**版本**:v0.13.0 - MCP 服务器架构重构,工具精简至13个;新增语义搜索、一站式组件画像、最佳实践、反馈收集等工具;Swagger/YApi 统一为 api_tool;CODING Issue 支持URL自动解析
|
|
23
23
|
|
|
24
24
|
## 架构说明
|
|
25
25
|
|
|
@@ -28,7 +28,7 @@ compatibility:
|
|
|
28
28
|
│ 连接方式(三选一) │
|
|
29
29
|
├─────────────────────────────────────────────────────────────┤
|
|
30
30
|
│ │
|
|
31
|
-
│ 方式1: 本地直连 (stdio)
|
|
31
|
+
│ 方式1: 本地直连 (stdio) — 推荐 │
|
|
32
32
|
│ ┌─────────────┐ stdio ┌─────────────────────────┐│
|
|
33
33
|
│ │ IDE/AI │ ◄─────────────►│ szcd-mcp-server ││
|
|
34
34
|
│ │ Client │ │ (本地运行) ││
|
|
@@ -56,412 +56,214 @@ compatibility:
|
|
|
56
56
|
└─────────────────────────────────────────────────────────────┘
|
|
57
57
|
```
|
|
58
58
|
|
|
59
|
-
##
|
|
59
|
+
## 推荐工作流(页面生成类任务)
|
|
60
60
|
|
|
61
|
-
|
|
61
|
+
AI 助手在处理页面生成需求时,推荐按以下流程使用工具:
|
|
62
62
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
- `name` (string, required): 组件名称
|
|
63
|
+
### 步骤1:架构认知 + 需求理解
|
|
64
|
+
- 调用 `get_architecture_overview(detail="summary")` 获取 7 层架构和模板组合模式
|
|
65
|
+
- 分析用户需求的页面布局类型、查询字段、操作按钮、表格列等
|
|
67
66
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
```
|
|
67
|
+
### 步骤2:组件发现(优先语义搜索)
|
|
68
|
+
- 使用 `search_components_semantic(query="...", scope="all")` 进行语义搜索,比关键词匹配更精准
|
|
69
|
+
- 例如:"查询表单" → Query,"左树右表" → LeftTree + TableOrList + TemplateMode
|
|
72
70
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
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="...")`
|
|
77
80
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
- `name` (string, required): 组件名称
|
|
82
|
-
- `maxResults` (number, optional, default: 20): 最大结果数,范围1-50
|
|
81
|
+
### 步骤4:设计稿分析(如有)
|
|
82
|
+
- 使用 `analyze_design_image` 分析设计稿,建议 `outputFormat="restoration_code"` 直接输出还原代码
|
|
83
|
+
- 使用 `get_style_injection_guide` 处理 CSS 分配
|
|
83
84
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
```
|
|
85
|
+
### 步骤5:代码生成 + 样式注入
|
|
86
|
+
- 生成代码时包含 ModeStyle / ConfigProvider 配置
|
|
87
|
+
- 参考 `get_best_practices(scenario="...")` 获取场景组合最佳实践
|
|
88
88
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
89
|
+
### 步骤6:收集用户反馈(质量闭环)
|
|
90
|
+
- **必须**在代码输出后主动询问用户满意度
|
|
91
|
+
- 若用户表示不准确或不采纳,收集原因
|
|
92
|
+
- 调用 `submit_feedback` 将反馈提交到服务器
|
|
93
93
|
|
|
94
|
-
|
|
94
|
+
## 可用工具(13个)
|
|
95
95
|
|
|
96
|
-
|
|
97
|
-
**功能**:获取 Cover 层组件的详细信息,包括实现路径、Props 定义、透传目标、准确Props文档、使用示例
|
|
98
|
-
**参数**:
|
|
99
|
-
- `name` (string, required): 组件名称
|
|
96
|
+
### 复合组件工具
|
|
100
97
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
请获取 Cover 层 Button 组件的详细信息。
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
##### Trae CLI 调用示例
|
|
107
|
-
```bash
|
|
108
|
-
trae -m 'Call MCP tool get_cover_component with name "Button"' --tool-allowance '*:*'
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
### Ant Design组件工具
|
|
112
|
-
|
|
113
|
-
#### 4. list_antd_components
|
|
114
|
-
**功能**:列出 Ant Design 组件的分类概览和各分类下的组件数量
|
|
115
|
-
**参数**:无
|
|
116
|
-
|
|
117
|
-
##### Claude Code / Qoder CLI 调用示例
|
|
118
|
-
```
|
|
119
|
-
请列出 Ant Design 组件的分类概览。
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
#### 5. list_antd_components_by_category
|
|
123
|
-
**功能**:按分类列出 Ant Design 组件(通用、布局、导航、数据录入、数据展示、反馈等)
|
|
98
|
+
#### 1. read_file
|
|
99
|
+
**功能**:读取仓库内文件(相对路径),支持路径自动纠错(node_modules → src、扩展名纠正、目录补全)。
|
|
124
100
|
**参数**:
|
|
125
|
-
- `
|
|
126
|
-
|
|
127
|
-
##### Claude Code / Qoder CLI 调用示例
|
|
128
|
-
```
|
|
129
|
-
请按分类列出 Ant Design 的数据录入组件。
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
#### 6. get_antd_component
|
|
133
|
-
**功能**:获取 Ant Design 组件的详细信息,包括中文名、描述、API 文档链接和 Props 列表
|
|
134
|
-
**参数**:
|
|
135
|
-
- `name` (string, required): 组件名称
|
|
136
|
-
|
|
137
|
-
##### Claude Code / Qoder CLI 调用示例
|
|
138
|
-
```
|
|
139
|
-
请获取 Ant Design Input 组件的详细信息。
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
### ProComponents组件工具
|
|
143
|
-
|
|
144
|
-
#### 7. list_pro_components
|
|
145
|
-
**功能**:列出 ProComponents 组件的分类概览,包括 ProTable、ProForm、ProLayout 等高级组件
|
|
146
|
-
**参数**:无
|
|
147
|
-
|
|
148
|
-
##### Claude Code / Qoder CLI 调用示例
|
|
149
|
-
```
|
|
150
|
-
请列出 ProComponents 的分类概览。
|
|
151
|
-
```
|
|
101
|
+
- `path` (string, required): 文件相对路径
|
|
102
|
+
- `maxChars` (number, optional, default: 20000): 最大字符数 200-200000
|
|
152
103
|
|
|
153
|
-
|
|
154
|
-
**功能**:按分类列出 ProComponents 组件(数据录入、数据展示、布局等)
|
|
155
|
-
**参数**:
|
|
156
|
-
- `category` (enum, optional, default: "数据录入"): 组件分类,可选值:数据录入、数据展示、布局、反馈
|
|
104
|
+
### Cover 层组件工具
|
|
157
105
|
|
|
158
|
-
|
|
159
|
-
```
|
|
160
|
-
请按分类列出 ProComponents 的数据展示组件。
|
|
161
|
-
```
|
|
106
|
+
### Ant Design 组件工具
|
|
162
107
|
|
|
163
|
-
####
|
|
164
|
-
**功能**:获取
|
|
108
|
+
#### 2. get_antd_component
|
|
109
|
+
**功能**:获取 Ant Design 组件的详细信息,包括中文名、描述、API 文档链接和 Props 列表。
|
|
165
110
|
**参数**:
|
|
166
111
|
- `name` (string, required): 组件名称
|
|
167
112
|
|
|
168
|
-
|
|
169
|
-
```
|
|
170
|
-
请获取 ProTable 组件的详细信息。
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
### 全局搜索工具
|
|
174
|
-
|
|
175
|
-
#### 10. search_all_components
|
|
176
|
-
**功能**:全局搜索所有层级的组件(Cover、Wrapper、AntD、ProComponents等),支持按类型筛选
|
|
177
|
-
**参数**:
|
|
178
|
-
- `keyword` (string, required): 搜索关键词
|
|
179
|
-
- `type` (enum, optional): 按类型筛选,可选值:cover、wrapper、pro-package、antd、pro-components、other
|
|
180
|
-
|
|
181
|
-
##### Claude Code / Qoder CLI 调用示例
|
|
182
|
-
```
|
|
183
|
-
请搜索包含"form"的 ProComponents 组件。
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
### 架构与依赖工具
|
|
187
|
-
|
|
188
|
-
#### 11. get_architecture_overview
|
|
189
|
-
**功能**:获取 szcd 组件库的分层架构图、层级关系、推荐使用顺序和模板组合模式。帮助理解项目从 Ant Design → Cover → Wrapper → ProPackage → 复合组件 → 模板 的7层封装架构,以及 TreeQueryTable/QueryTabsTables 等页面模板的组合方式。含 LLM 常见映射错误的修正提示
|
|
190
|
-
**参数**:
|
|
191
|
-
- `detail` (enum, optional, default: "summary"): 返回粒度
|
|
192
|
-
- `summary` — 层级概览+模板模式+LLM提示
|
|
193
|
-
- `full` — 含所有层组件列表详情
|
|
194
|
-
|
|
195
|
-
##### Claude Code / Qoder CLI 调用示例
|
|
196
|
-
```
|
|
197
|
-
请提供 szcd 组件库的架构概览。
|
|
198
|
-
```
|
|
199
|
-
|
|
200
|
-
```
|
|
201
|
-
请获取完整的组件库架构详情,包含所有层级的组件列表。
|
|
202
|
-
```
|
|
113
|
+
### ProComponents 组件工具
|
|
203
114
|
|
|
204
|
-
####
|
|
205
|
-
|
|
206
|
-
**参数**:
|
|
207
|
-
- `name` (string, required): 组件名称(如 TemplateMode, LeftTree, TableOrList, Query 等)
|
|
208
|
-
- `layer` (enum, optional): 组件所在层级,可选值:cover、wrapper、pro-package、other。不传时自动推测
|
|
209
|
-
- `direction` (enum, optional, default: "both"): 查询方向
|
|
210
|
-
- `depends-on` — 它依赖谁
|
|
211
|
-
- `depended-by` — 谁依赖它
|
|
212
|
-
- `both` — 双向
|
|
213
|
-
- `includeExternal` (boolean, optional, default: false): 是否包含外部依赖(antd/ProComponents/第三方库),默认仅返回 szcd 组件间关系
|
|
214
|
-
- `includeHooks` (boolean, optional, default: true): 是否包含 hooks 依赖关系(useLeftTree, useTable 等)
|
|
215
|
-
|
|
216
|
-
##### Claude Code / Qoder CLI 调用示例
|
|
217
|
-
```
|
|
218
|
-
请查询 TemplateMode 组件的依赖关系。
|
|
219
|
-
```
|
|
220
|
-
|
|
221
|
-
```
|
|
222
|
-
请查询谁依赖了 LeftTree 组件。
|
|
223
|
-
```
|
|
224
|
-
|
|
225
|
-
### 文件操作工具
|
|
226
|
-
|
|
227
|
-
#### 13. read_file
|
|
228
|
-
**功能**:读取仓库内文件(相对路径)
|
|
229
|
-
**参数**:
|
|
230
|
-
- `path` (string, required): 文件相对路径
|
|
231
|
-
- `maxChars` (number, optional, default: 20000): 最大字符数,范围200-200000
|
|
232
|
-
|
|
233
|
-
##### Claude Code / Qoder CLI 调用示例
|
|
234
|
-
```
|
|
235
|
-
请读取 src/other/components/Query/index.tsx 文件内容,最多5000个字符。
|
|
236
|
-
```
|
|
237
|
-
|
|
238
|
-
### 准确文档工具
|
|
239
|
-
|
|
240
|
-
#### 14. get_accurate_component_doc
|
|
241
|
-
**功能**:获取复合组件的准确Props文档,包含透传机制的详细说明(特别是Query组件的type/valueType双重透传机制)。同时返回 mode-packages 下的使用文档
|
|
115
|
+
#### 3. get_pro_component
|
|
116
|
+
**功能**:获取 ProComponents 组件的详细信息,包括特性说明、API 文档和 Props 列表。
|
|
242
117
|
**参数**:
|
|
243
118
|
- `name` (string, required): 组件名称
|
|
244
119
|
|
|
245
|
-
|
|
246
|
-
```
|
|
247
|
-
请获取 Query 组件的准确文档,包含透传机制说明。
|
|
248
|
-
```
|
|
120
|
+
### 全局搜索与架构工具
|
|
249
121
|
|
|
250
|
-
####
|
|
251
|
-
|
|
122
|
+
#### 4. get_architecture_overview
|
|
123
|
+
**功能**:查看 7 层架构(AntD→Cover→Wrapper→ProPackage→复合组件→模板)、层级关系和推荐使用顺序。含 LLM 映射修正提示。
|
|
252
124
|
**参数**:
|
|
253
|
-
- `
|
|
254
|
-
- `layer` (enum, optional, default: "other"): 组件所在层级,可选值:other、cover、wrapper、pro-package
|
|
255
|
-
- `maxDepth` (number, optional, default: 3): 最大递归深度,范围1-5
|
|
125
|
+
- `detail` (enum, optional, default: "summary"): summary=层级概览+模板模式+LLM提示;full=含所有层组件列表详情
|
|
256
126
|
|
|
257
|
-
|
|
258
|
-
```
|
|
259
|
-
请深度解析 Query 组件的 Props 链。
|
|
260
|
-
```
|
|
127
|
+
### Props 深度解析工具
|
|
261
128
|
|
|
262
|
-
|
|
263
|
-
请递归解析 FormItemOrDetailItem 的完整 Props 链,最大深度5。
|
|
264
|
-
```
|
|
129
|
+
### 设计稿分析工具
|
|
265
130
|
|
|
266
|
-
####
|
|
267
|
-
|
|
131
|
+
#### 5. analyze_design_image
|
|
132
|
+
**功能**:分析 UI 设计稿图片,提取 Token 配置、CSS 覆盖样式、视觉细节。支持 base64/URL/文件路径,pixel_perfect 模式最高还原度。
|
|
268
133
|
**参数**:
|
|
269
|
-
- `
|
|
270
|
-
- `
|
|
134
|
+
- `imageSource` (string, required): 图片数据(base64/URL/文件路径)
|
|
135
|
+
- `sourceType` (enum, optional, default: "file_path"): base64/url/file_path
|
|
136
|
+
- `analysisType` (enum, optional, default: "full"): layout/components/tokens/full/pixel_perfect
|
|
137
|
+
- `pageContext` (string, optional): 页面业务上下文
|
|
138
|
+
- `targetLibrary` (enum, optional, default: "auto"): szcd/antd/pro-components/auto
|
|
139
|
+
- `outputFormat` (enum, optional, default: "markdown"): markdown/json/structured_text/restoration_code
|
|
271
140
|
|
|
272
|
-
|
|
273
|
-
```
|
|
274
|
-
请重新生成 Query 组件的准确 Props 文档。
|
|
275
|
-
```
|
|
141
|
+
**重要提示**:远程 SSE/HTTP 连接时优先使用 base64;本地 stdio 可用 file_path。
|
|
276
142
|
|
|
277
|
-
|
|
278
|
-
请批量生成 other 层级所有组件的准确 Props 文档。
|
|
279
|
-
```
|
|
280
|
-
|
|
281
|
-
### 缓存管理工具
|
|
143
|
+
### 样式注入指南工具
|
|
282
144
|
|
|
283
|
-
####
|
|
284
|
-
|
|
145
|
+
#### 6. get_style_injection_guide
|
|
146
|
+
**功能**:查询复合组件的样式注入方法:可用样式 props、注入方式、代码示例、嵌套 CSS 穿透路径和智能分配策略。
|
|
285
147
|
**参数**:
|
|
286
|
-
- `
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
### 设计稿图片分析工具(兜底/代理)
|
|
294
|
-
|
|
295
|
-
> **核心定位**:此工具是**兜底机制**,专门解决"用户使用的 LLM 不支持图片理解"的问题。
|
|
296
|
-
>
|
|
297
|
-
> 当用户的 IDE/AI 是纯文本模型(无法直接看设计稿截图)时,由 MCP 服务器调用多模态模型代为"看图",将图片内容转化为结构化文本返回给用户 LLM,让用户 LLM 基于文字描述生成代码。如果用户的 LLM 本身支持图片输入(如 Claude 4、GPT-4o),则**不需要**使用此工具。
|
|
298
|
-
|
|
299
|
-
#### 18. analyze_design_image
|
|
300
|
-
**功能**:分析UI设计稿图片,将视觉设计转化为结构化文本描述。支持三通道提取,追求设计稿样式的高度还原:
|
|
148
|
+
- `componentNames` (string[], optional): 组件名列表
|
|
149
|
+
- `includeNesting` (boolean, optional, default: true): 是否包含嵌套注入指南
|
|
150
|
+
- `includeSmartDistribute` (boolean, optional, default: false): 是否包含智能 CSS 分配
|
|
151
|
+
- `cssOverrides` (array, optional): CSS 覆盖列表(用于智能分配)
|
|
152
|
+
- `includeDeepStyleKnowledge` (enum, optional, default: "off"): off/summary/full/examples
|
|
153
|
+
- `outputFormat` (enum, optional, default: "markdown"): markdown/json/text
|
|
301
154
|
|
|
302
|
-
|
|
303
|
-
- **通道2: CSS 覆盖层** — 提取 ConfigProvider Token 无法覆盖的样式属性(布局、伪元素、间距、边框、动画、字体族等),生成组件级 CSS 覆盖代码
|
|
304
|
-
- **通道3: 视觉细节** — 提取渐变色、滚动条、遮罩层、状态变体(hover/focus/active/disabled)等更细粒度的视觉信息,生成全局 CSS 覆盖代码
|
|
155
|
+
### Swagger 联调工具
|
|
305
156
|
|
|
306
|
-
|
|
307
|
-
- 服务器上的多模态模型(Claude/OpenAI)不可用时,自动降级为本地 PaddleOCR 文字识别
|
|
308
|
-
- OCR 降级模式下**不做任何组件推断**,仅返回识别到的原始文字,由用户 LLM 结合组件库 MCP 工具自行映射
|
|
309
|
-
- 可通过环境变量 `DESIGN_ANALYSIS_ORDER` 控制执行顺序(见下方环境变量说明)
|
|
157
|
+
### CODING Issue 工具
|
|
310
158
|
|
|
159
|
+
#### 7. coding_fetch_issue
|
|
160
|
+
**功能**:获取 CODING Issue 详情。支持直接粘贴 Issue URL 自动解析,也支持 Cookie(推荐)或账号密码认证。支持从配置文件读取默认参数。
|
|
311
161
|
**参数**:
|
|
312
|
-
- `
|
|
313
|
-
- `
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
- `tokens` — 布局+组件+样式Token(通道1)
|
|
325
|
-
- `full` — 完整分析,通道1+2
|
|
326
|
-
- `pixel_perfect` — 最高还原度,全部三通道+高分辨率+8K输出
|
|
327
|
-
- `pageContext` (string, optional): 页面业务上下文描述
|
|
328
|
-
- `targetLibrary` (enum, optional, default: "auto"): 期望匹配的组件库:szcd、antd、pro-components、auto
|
|
329
|
-
- `outputFormat` (enum, optional, default: "markdown"): 输出格式:
|
|
330
|
-
- `markdown` — 适合直接阅读
|
|
331
|
-
- `json` — 适合程序化使用
|
|
332
|
-
- `structured_text` — 结构化文本
|
|
333
|
-
- `restoration_code` — 一键输出完整还原代码(ConfigProvider + 组件级CSS + 全局CSS + 还原度评分)
|
|
334
|
-
|
|
335
|
-
**输出内容**(以 `full` 或 `pixel_perfect` 模式为例):
|
|
336
|
-
- 页面类型和布局结构
|
|
337
|
-
- 组件识别和 szcd 组件匹配
|
|
338
|
-
- **designTokens** — 对齐 tokenConfig.json 的全局 Token(色阶、字号阶梯、间距阶梯、圆角、阴影等)
|
|
339
|
-
- **componentStyleTokens** — 每个组件的 componentToken(如 Table.rowHoverBg、Button.colorPrimary 等)
|
|
340
|
-
- **themeDiff** — 与 szcd 默认值的差异对比 + 可直接粘贴的 ConfigProvider 代码
|
|
341
|
-
- **cssOverrides** — 组件级 CSS 覆盖(布局、伪元素、间距、边框、动画、字体等 token 无法覆盖的属性)
|
|
342
|
-
- **visualDetails** — 渐变、滚动条、遮罩、状态变体等视觉细节(仅 pixel_perfect 模式)
|
|
343
|
-
- **fidelityScore** — 还原度评分(0-100),含 Token 覆盖率、CSS 覆盖补充率、未覆盖场景清单
|
|
344
|
-
|
|
345
|
-
##### Claude Code / Qoder CLI 调用示例
|
|
346
|
-
```
|
|
347
|
-
请分析 docs/designs/user-list.png 这张设计稿,使用 pixel_perfect 模式,输出还原代码。
|
|
348
|
-
```
|
|
349
|
-
|
|
350
|
-
##### Trae CLI 调用示例
|
|
351
|
-
```bash
|
|
352
|
-
# 完整分析(通道1+2)
|
|
353
|
-
trae -m 'Call MCP tool analyze_design_image with imageSource "docs/designs/user-list.png" sourceType "file_path" analysisType "full" pageContext "用户管理列表页" targetLibrary "szcd"' --tool-allowance '*:*'
|
|
354
|
-
|
|
355
|
-
# 最高还原度(全部三通道)+ 一键输出还原代码
|
|
356
|
-
trae -m 'Call MCP tool analyze_design_image with imageSource "docs/designs/user-list.png" sourceType "file_path" analysisType "pixel_perfect" outputFormat "restoration_code" pageContext "用户管理列表页" targetLibrary "szcd"' --tool-allowance '*:*'
|
|
357
|
-
```
|
|
358
|
-
|
|
359
|
-
### 样式注入指南工具
|
|
360
|
-
|
|
361
|
-
#### 19. get_style_injection_guide
|
|
362
|
-
**功能**:查询 szcd 复合组件的样式注入方法。返回指定组件的可用样式 props、注入方式(ModeStyle/TreeBoxStyle/btnStyle/inline style等)、代码示例,以及组件嵌套时的 CSS 穿透路径和智能分配策略。
|
|
363
|
-
|
|
364
|
-
**适用场景**:
|
|
365
|
-
- 已有设计稿分析结果但需要知道如何将 CSS 注入到组件中
|
|
366
|
-
- 使用 Sketch/Figma MCP 获取了设计规范后需了解 szcd 组件的样式定制方式
|
|
367
|
-
- 开发时需要快速查询某个组件支持哪些样式 props
|
|
368
|
-
|
|
162
|
+
- `url` (string, optional): 完整 Issue URL,如 http://xxx/p/p-nkdq3ke/all/issues/46269。提供后自动解析 projectName 和 issueCode
|
|
163
|
+
- `issueCode` (string, optional): Issue 编号,如 6249
|
|
164
|
+
- `baseUrl` (string, optional): CODING 基础地址(可从配置文件读取)
|
|
165
|
+
- `projectId` (string, optional): 项目 ID(可从配置文件读取)
|
|
166
|
+
- `projectName` (string, optional): 项目名(如 p-nkdq3ke),提供后自动解析为 projectId
|
|
167
|
+
- `cookies` (string, optional): 浏览器 Cookie 字符串
|
|
168
|
+
- `account` (string, optional): CODING 账号
|
|
169
|
+
- `password` (string, optional): CODING 密码
|
|
170
|
+
- `withDescriptionMarkup` (boolean, optional, default: true): 是否返回富文本格式
|
|
171
|
+
|
|
172
|
+
#### 8. coding_config
|
|
173
|
+
**功能**:查看/设置 CODING 默认配置(baseUrl/projectId/账号/Cookie)。
|
|
369
174
|
**参数**:
|
|
370
|
-
- `
|
|
371
|
-
- `
|
|
372
|
-
- `includeSmartDistribute` (boolean, optional, default: false): 是否包含智能 CSS 分配建议(需要传入 cssOverrides 参数)
|
|
373
|
-
- `cssOverrides` (array, optional): CSS 覆盖列表(用于智能分配),格式与 analyze_design_image 返回的 cssOverrides.perComponent 一致
|
|
374
|
-
- `outputFormat` (enum, optional, default: "markdown"): 输出格式:markdown、json、text
|
|
375
|
-
|
|
376
|
-
**4种注入方式**:
|
|
377
|
-
- `modeStyle`: ModeStyle prop → styled-components 注入(Query, TableOrList, LeftTree, TitleAndBack, TemplateMode, ModeAvatar)
|
|
378
|
-
- `modeStyleTag`: ModeStyle prop → 动态 `<style>` 标签注入(ModelOrDrawer 专属)
|
|
379
|
-
- `inlineOnly`: 仅 inline style / 全局 CSS(FormItemOrDetailItem, CustomOption, TreeNode)
|
|
380
|
-
- `passthrough`: className/style prop 透传(IconfontWapper)
|
|
381
|
-
|
|
382
|
-
**嵌套场景**:
|
|
383
|
-
- TemplateMode 的 ModeStyle 可穿透到子组件(通过 `.leftContentBox` / `.rightContentBox_top` / `.rightContentBox_bottom` 定位)
|
|
384
|
-
- ModelOrDrawer DOM 挂载在 document.body,父级穿不透
|
|
385
|
-
|
|
386
|
-
##### Claude Code / Qoder CLI 调用示例
|
|
387
|
-
```
|
|
388
|
-
请查询 Query 组件的样式注入方法。
|
|
389
|
-
```
|
|
175
|
+
- `action` (enum, optional, default: "get"): get/set/clear
|
|
176
|
+
- `baseUrl`, `projectId`, `account`, `cookies`, `password` (optional, set 时生效)
|
|
390
177
|
|
|
391
|
-
|
|
392
|
-
请查询 TemplateMode 和 Query 组件的样式注入指南,包括嵌套场景。
|
|
393
|
-
```
|
|
178
|
+
### API 工具
|
|
394
179
|
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
180
|
+
#### 9. api_tool
|
|
181
|
+
**功能**:统一 API 工具,自动识别 YApi/Swagger 拉取 API 文档、联调测试、配置管理。
|
|
182
|
+
**参数**:
|
|
183
|
+
- `action` (enum, required): fetch=拉取API文档, test=联调测试, config=配置管理
|
|
184
|
+
- `url` (string, optional): API文档地址(fetch时)/ 请求地址(test时)
|
|
185
|
+
- `method` (enum, optional, default: "GET"): GET/POST/PUT/DELETE/PATCH(test时)
|
|
186
|
+
- `data` (object, optional, default: {}): 请求参数(test时)
|
|
187
|
+
- `headers` (object, optional, default: {}): 请求头(test时)
|
|
188
|
+
- `username` / `password` / `account` / `cookies` (string, optional): 鉴权信息
|
|
189
|
+
- `yapiBaseUrl` / `yapiAccount` / `yapiPassword` / `yapiCookies` (string, optional): YApi 配置(config set 时生效)
|
|
190
|
+
|
|
191
|
+
### Repowiki 增强工具(推荐优先使用)
|
|
192
|
+
|
|
193
|
+
#### 10. get_component_full_profile
|
|
194
|
+
**功能**:一站式获取组件完整画像:基本信息、Props(优先 mode-packages 文档)、源码摘要、示例、最佳实践、依赖、样式注入。支持逗号分隔批量查询,返回值是紧凑 Markdown 格式。
|
|
399
195
|
**参数**:
|
|
400
|
-
- `
|
|
401
|
-
- `
|
|
402
|
-
- `password` (string, optional, default: ""): 鉴权密码
|
|
196
|
+
- `name` (string, required): 组件名称,支持逗号分隔批量查询(如 `"Query,TableOrList"`)
|
|
197
|
+
- `depth` (enum, optional, default: "standard"): quick=基本信息+核心Props;standard=完整画像;deep=含Props链解析+源码摘要
|
|
403
198
|
|
|
404
|
-
|
|
405
|
-
```
|
|
406
|
-
请拉取 http://172.31.7.103:31689/dp-label/swagger-ui.html 的所有 API。
|
|
407
|
-
```
|
|
199
|
+
**推荐使用场景**:替代多次单独查询,一次获取组件的全部信息。
|
|
408
200
|
|
|
409
|
-
####
|
|
410
|
-
|
|
201
|
+
#### 11. search_components_semantic
|
|
202
|
+
**功能**:语义搜索组件,支持中文关键词和场景描述。如"查询表单"→Query,"树形导航"→LeftTree。
|
|
411
203
|
**参数**:
|
|
412
|
-
- `
|
|
413
|
-
- `
|
|
414
|
-
- `
|
|
415
|
-
- `headers` (object, optional, default: {}): 自定义请求头,如 { "Authorization": "Bearer xxx" }
|
|
204
|
+
- `query` (string, required): 自然语言查询
|
|
205
|
+
- `scope` (enum, optional, default: "all"): all/template/cover/wrapper/pro/chart
|
|
206
|
+
- `maxResults` (number, optional, default: 10): 最大结果数 1-30
|
|
416
207
|
|
|
417
|
-
|
|
418
|
-
```
|
|
419
|
-
请测试 POST http://172.31.7.103:31689/dp-label/api/user/list 接口,参数为 { "page": 1, "size": 10 }。
|
|
420
|
-
```
|
|
208
|
+
**推荐使用场景**:组件初筛首选,语义匹配比关键词搜索更精准。
|
|
421
209
|
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
#### 22. coding_fetch_issue
|
|
425
|
-
**功能**:获取 CODING Issue(缺陷/需求)详情。支持两种认证方式:1) Cookie 模式(推荐,从浏览器开发者工具复制 Cookie 字符串);2) 账号密码模式(自动模拟登录流程)。如果已在 ~/.szcd-mcp-config.json 中配置了 CODING_BASE_URL 和 CODING_DEFAULT_PROJECT_ID,则 baseUrl 和 projectId 参数可省略。
|
|
210
|
+
#### 12. get_best_practices
|
|
211
|
+
**功能**:获取组件使用最佳实践和常见错误修正。指定 scenario 可获取组合最佳实践。
|
|
426
212
|
**参数**:
|
|
427
|
-
- `
|
|
428
|
-
- `
|
|
429
|
-
- `projectId` (string, optional): 项目 ID(数字)。若 ~/.szcd-mcp-config.json 中配置了 CODING_DEFAULT_PROJECT_ID,可省略
|
|
430
|
-
- `cookies` (string, optional): 浏览器 Cookie 字符串(从开发者工具 Network 面板复制)。若提供则优先使用 Cookie 模式
|
|
431
|
-
- `account` (string, optional): CODING 账号(邮箱)。与 password 同时提供时尝试自动登录
|
|
432
|
-
- `password` (string, optional): CODING 密码。与 account 同时提供时尝试自动登录
|
|
433
|
-
- `withDescriptionMarkup` (boolean, optional, default: true): 是否返回描述的富文本格式(HTML)
|
|
434
|
-
|
|
435
|
-
##### Claude Code / Qoder CLI 调用示例
|
|
436
|
-
```
|
|
437
|
-
请获取 CODING Issue 6249 的详情。
|
|
438
|
-
```
|
|
213
|
+
- `componentName` (string, optional): 组件名称
|
|
214
|
+
- `scenario` (string, optional): 场景描述,如"左树右表页面"
|
|
439
215
|
|
|
440
|
-
|
|
441
|
-
请使用 Cookie 模式获取 CODING Issue 6249,Cookie 为 "session=xxx"。
|
|
442
|
-
```
|
|
216
|
+
### 反馈收集工具
|
|
443
217
|
|
|
444
|
-
####
|
|
445
|
-
|
|
218
|
+
#### 13. submit_feedback
|
|
219
|
+
**功能**:提交用户对本次 AI 生成结果的反馈。AI 助手在生成代码后应主动询问用户满意度,若用户表示不准确或不采纳,则收集原因并通过此工具提交到服务器,用于持续优化 MCP 工具质量。
|
|
446
220
|
**参数**:
|
|
447
|
-
- `
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
- `
|
|
452
|
-
- `
|
|
453
|
-
- `
|
|
454
|
-
- `
|
|
455
|
-
- `
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
221
|
+
- `sessionId` (string, required): 会话 ID
|
|
222
|
+
- `toolsUsed` (string[], optional): 本次使用的工具列表
|
|
223
|
+
- `userQuery` (string, optional): 用户原始需求
|
|
224
|
+
- `generatedCodeSummary` (string, optional): 生成代码摘要
|
|
225
|
+
- `accuracyRating` (number, optional): 准确性评分 1-5
|
|
226
|
+
- `adopted` (boolean, required): 是否采纳
|
|
227
|
+
- `rejectionReason` (string, optional): 未采纳原因
|
|
228
|
+
- `contextSnapshot` (object, optional): 额外上下文
|
|
229
|
+
- `toolType` (string, optional): IDE 类型 trae/claude/qwen/cursor/vscode/generic
|
|
230
|
+
|
|
231
|
+
## 工具使用优先级
|
|
232
|
+
|
|
233
|
+
| 优先级 | 工具 | 用途 |
|
|
234
|
+
|--------|------|------|
|
|
235
|
+
| P0 | `get_architecture_overview` | 首次使用时获取架构全局视图 |
|
|
236
|
+
| P0 | `search_components_semantic` | 语义搜索,比关键词搜索更精准 |
|
|
237
|
+
| P0 | `get_component_full_profile` | 一站式查询,支持批量,返回 Markdown |
|
|
238
|
+
| P1 | `get_best_practices` | 获取场景组合最佳实践 |
|
|
239
|
+
| P1 | `analyze_design_image` | 设计稿分析 |
|
|
240
|
+
| P1 | `get_style_injection_guide` | 样式注入配置 |
|
|
241
|
+
| P2 | `api_tool` | API 文档拉取 / 联调测试(YApi/Swagger) |
|
|
242
|
+
| P2 | `read_file` | 读取源码文件确认行为 |
|
|
243
|
+
| P2 | `get_antd_component` / `get_pro_component` | 底层组件详情 |
|
|
244
|
+
| P3 | `coding_fetch_issue` / `coding_config` | 需求追踪 / 配置管理 |
|
|
245
|
+
| - | `submit_feedback` | **代码生成后必做:收集反馈** |
|
|
246
|
+
|
|
247
|
+
## 旧工具迁移映射
|
|
248
|
+
|
|
249
|
+
| 已移除的旧工具 | 替代方案 |
|
|
250
|
+
|---|---|
|
|
251
|
+
| `list_other_components` | `search_components_semantic` 或 `get_component_full_profile` |
|
|
252
|
+
| `get_other_component` | `get_component_full_profile` |
|
|
253
|
+
| `search_component_examples` | `get_component_full_profile`(含示例) |
|
|
254
|
+
| `list_cover_components` | `search_components_semantic(scope="cover")` |
|
|
255
|
+
| `get_cover_component` | `get_component_full_profile` |
|
|
256
|
+
| `list_wrapper_components` | `search_components_semantic(scope="wrapper")` |
|
|
257
|
+
| `list_pro_package_components` | `search_components_semantic(scope="pro")` |
|
|
258
|
+
| `list_antd_components` / `list_antd_components_by_category` | `search_components_semantic` |
|
|
259
|
+
| `list_pro_components` / `list_pro_components_by_category` | `search_components_semantic` |
|
|
260
|
+
| `search_all_components` | `search_components_semantic` |
|
|
261
|
+
| `get_component_library_overview` | `get_architecture_overview` |
|
|
262
|
+
| `get_accurate_component_doc` | `get_component_full_profile(depth="deep")` |
|
|
263
|
+
| `resolve_props_chain` | `get_component_full_profile(depth="deep")` |
|
|
264
|
+
| `get_component_dependencies` | `get_component_full_profile`(含依赖) |
|
|
265
|
+
| `swagger_fetch_apis` / `swagger_test_api` | `api_tool(action="fetch")` / `api_tool(action="test")` |
|
|
266
|
+
| `refresh_component_docs` / `regenerate_accurate_docs` | 已移除(管理操作转 REST API) |
|
|
465
267
|
|
|
466
268
|
## 安装方式
|
|
467
269
|
|
|
@@ -510,36 +312,11 @@ export MCP_API_KEY="your-api-key"
|
|
|
510
312
|
$env:MCP_SERVER_URL="http://localhost:3456"
|
|
511
313
|
$env:MCP_TIMEOUT="30000"
|
|
512
314
|
$env:MCP_API_KEY="your-api-key"
|
|
513
|
-
|
|
514
|
-
# Windows (CMD)
|
|
515
|
-
set MCP_SERVER_URL=http://localhost:3456
|
|
516
|
-
set MCP_TIMEOUT=30000
|
|
517
|
-
set MCP_API_KEY=your-api-key
|
|
518
315
|
```
|
|
519
316
|
|
|
520
317
|
#### 方式3:在 IDE 配置中设置
|
|
521
318
|
|
|
522
|
-
**方式3a
|
|
523
|
-
|
|
524
|
-
编辑您的 IDE 配置文件(如 `.trae/config.json` 或 Claude Code 配置):
|
|
525
|
-
|
|
526
|
-
```json
|
|
527
|
-
{
|
|
528
|
-
"mcpServers": {
|
|
529
|
-
"szcd-component-helper": {
|
|
530
|
-
"command": "npx",
|
|
531
|
-
"args": ["szcd-mcp-proxy"],
|
|
532
|
-
"env": {
|
|
533
|
-
"MCP_SERVER_URL": "http://localhost:3456",
|
|
534
|
-
"MCP_TIMEOUT": "30000",
|
|
535
|
-
"MCP_API_KEY": ""
|
|
536
|
-
}
|
|
537
|
-
}
|
|
538
|
-
}
|
|
539
|
-
}
|
|
540
|
-
```
|
|
541
|
-
|
|
542
|
-
**方式3b:Trae CLI Streamable HTTP 直连(推荐)**
|
|
319
|
+
**方式3a:Trae CLI Streamable HTTP 直连(推荐)**
|
|
543
320
|
|
|
544
321
|
在 `~/.trae/trae_cli.yaml` 中配置:
|
|
545
322
|
|
|
@@ -550,7 +327,7 @@ mcp_servers:
|
|
|
550
327
|
type: http
|
|
551
328
|
```
|
|
552
329
|
|
|
553
|
-
**方式
|
|
330
|
+
**方式3b:本地直连 stdio(推荐,无需远程服务器)**
|
|
554
331
|
|
|
555
332
|
```json
|
|
556
333
|
{
|
|
@@ -563,9 +340,9 @@ mcp_servers:
|
|
|
563
340
|
}
|
|
564
341
|
```
|
|
565
342
|
|
|
566
|
-
**方式
|
|
343
|
+
**方式3c:Qwen Code / Qoder CLI Streamable HTTP 直连(推荐)**
|
|
567
344
|
|
|
568
|
-
在 `~/.
|
|
345
|
+
在 `~/.qwen/settings.json` 中配置:
|
|
569
346
|
|
|
570
347
|
```json
|
|
571
348
|
{
|
|
@@ -578,7 +355,20 @@ mcp_servers:
|
|
|
578
355
|
}
|
|
579
356
|
```
|
|
580
357
|
|
|
581
|
-
**方式
|
|
358
|
+
**方式3d:Qwen Code / Qoder CLI 本地直连 stdio(推荐,无需远程服务器)**
|
|
359
|
+
|
|
360
|
+
```json
|
|
361
|
+
{
|
|
362
|
+
"mcpServers": {
|
|
363
|
+
"szcd-component-helper": {
|
|
364
|
+
"command": "npx",
|
|
365
|
+
"args": ["szcd-mcp-server", "--stdio"]
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
}
|
|
369
|
+
```
|
|
370
|
+
|
|
371
|
+
**方式3e:Claude Code 配置**
|
|
582
372
|
|
|
583
373
|
```json
|
|
584
374
|
{
|
|
@@ -599,7 +389,7 @@ mcp_servers:
|
|
|
599
389
|
# 测试服务器连接
|
|
600
390
|
curl http://localhost:3456/health
|
|
601
391
|
|
|
602
|
-
#
|
|
392
|
+
# 测试代理脚本
|
|
603
393
|
npx szcd-mcp-proxy --test
|
|
604
394
|
```
|
|
605
395
|
|
|
@@ -608,17 +398,8 @@ npx szcd-mcp-proxy --test
|
|
|
608
398
|
地址获取的优先级顺序:
|
|
609
399
|
|
|
610
400
|
1. **环境变量**(最高优先级)
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
- `MCP_API_KEY`
|
|
614
|
-
|
|
615
|
-
2. **配置文件**(中等优先级)
|
|
616
|
-
- `~/.szcd-mcp-config.json`
|
|
617
|
-
|
|
618
|
-
3. **默认值**(最低优先级)
|
|
619
|
-
- `MCP_SERVER_URL`: `http://localhost:3456`
|
|
620
|
-
- `MCP_TIMEOUT`: `30000`
|
|
621
|
-
- `MCP_API_KEY`: ``
|
|
401
|
+
2. **配置文件** `~/.szcd-mcp-config.json`
|
|
402
|
+
3. **默认值** `http://localhost:3456`
|
|
622
403
|
|
|
623
404
|
## 环境变量说明
|
|
624
405
|
|
|
@@ -630,59 +411,71 @@ npx szcd-mcp-proxy --test
|
|
|
630
411
|
| `MCP_TIMEOUT` | 请求超时时间(毫秒) | `30000` | `60000` |
|
|
631
412
|
| `MCP_API_KEY` | MCP API 密钥(可选) | `` | `your-secret-key` |
|
|
632
413
|
|
|
633
|
-
### CODING 配置
|
|
634
|
-
|
|
635
|
-
| 变量 | 说明 | 默认值 | 示例 |
|
|
636
|
-
|------|------|--------|------|
|
|
637
|
-
| `CODING_BASE_URL` | CODING 基础地址 | `` | `http://e-kjr1wok.coding.smartcitysz.work` |
|
|
638
|
-
| `CODING_DEFAULT_PROJECT_ID` | 默认项目 ID | `` | `123` |
|
|
639
|
-
| `CODING_ACCOUNT` | 默认账号(邮箱) | `` | `user@example.com` |
|
|
640
|
-
| `CODING_COOKIES` | 浏览器 Cookie(敏感) | `` | `session=xxx` |
|
|
641
|
-
| `CODING_PASSWORD` | CODING 密码(敏感) | `` | `your-password` |
|
|
642
|
-
|
|
643
414
|
### 视觉模型配置(设计稿分析功能必需)
|
|
644
415
|
|
|
645
416
|
| 变量 | 说明 | 默认值 | 示例 |
|
|
646
417
|
|------|------|--------|------|
|
|
647
418
|
| `VISION_API_KEY` | 视觉模型 API 密钥 | 读取 `ANTHROPIC_API_KEY` 或 `OPENAI_API_KEY` | `sk-ant-...` |
|
|
648
|
-
| `ANTHROPIC_API_KEY` | Claude API 密钥(当使用 Anthropic 时) | `` | `sk-ant-...` |
|
|
649
|
-
| `OPENAI_API_KEY` | OpenAI API 密钥(当使用 OpenAI 时) | `` | `sk-...` |
|
|
650
419
|
| `VISION_PROVIDER` | 视觉模型提供商 | `anthropic` | `anthropic` / `openai` |
|
|
651
420
|
| `VISION_MODEL` | 视觉模型名称 | `claude-sonnet-4-6` | `gpt-4o` |
|
|
652
|
-
| `
|
|
653
|
-
| `DESIGN_ANALYSIS_ORDER` | 分析优先级:`vision_first` / `ocr_first` / `vision_only` / `ocr_only` | `vision_first` | `ocr_first` |
|
|
654
|
-
| `OCR_SCRIPT_PATH` | 本地 OCR 脚本路径(降级用) | `/usr/local/bin/ocr-image` | `/usr/local/bin/ocr-image` |
|
|
421
|
+
| `DESIGN_ANALYSIS_ORDER` | 分析优先级 | `vision_first` | `vision_first` / `ocr_first` / `vision_only` / `ocr_only` |
|
|
655
422
|
|
|
656
|
-
|
|
423
|
+
## 反馈收集(质量闭环)
|
|
657
424
|
|
|
658
|
-
|
|
659
|
-
|------|------|
|
|
660
|
-
| `vision_first`(默认) | 先调用多模态模型,失败后降级到本地 OCR |
|
|
661
|
-
| `ocr_first` | 先调用本地 OCR,识别不到文字再尝试多模态模型 |
|
|
662
|
-
| `vision_only` | 只用多模态模型,失败直接报错 |
|
|
663
|
-
| `ocr_only` | 只用本地 OCR,不调用多模态模型,返回原始文字 |
|
|
425
|
+
### 触发时机
|
|
664
426
|
|
|
665
|
-
|
|
427
|
+
当 AI 助手完成以下任一任务后,**必须**主动询问用户反馈:
|
|
428
|
+
- 生成了基于 szcd 组件库的页面代码
|
|
429
|
+
- 推荐了组件方案并生成代码
|
|
430
|
+
- 根据设计稿分析结果生成还原代码
|
|
666
431
|
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
432
|
+
### 反馈问题
|
|
433
|
+
|
|
434
|
+
AI 助手应在代码输出后询问:
|
|
435
|
+
|
|
436
|
+
1. "代码是否准确满足您的需求?(1-5分)"
|
|
437
|
+
2. "您是否计划采纳这段代码?"
|
|
438
|
+
3. 如果用户表示不准确或不采纳:
|
|
439
|
+
- "请问哪里不准确?是组件选择、Props 用法、还是布局结构?"
|
|
440
|
+
- "请描述您的预期,以便我改进。"
|
|
441
|
+
|
|
442
|
+
### 提交反馈
|
|
443
|
+
|
|
444
|
+
收集到用户反馈后,AI 助手应调用 `submit_feedback` MCP 工具将反馈提交到服务器:
|
|
445
|
+
|
|
446
|
+
```json
|
|
447
|
+
{
|
|
448
|
+
"sessionId": "<当前会话ID或生成UUID>",
|
|
449
|
+
"toolsUsed": ["search_components_semantic", "get_component_full_profile", "get_best_practices"],
|
|
450
|
+
"userQuery": "用户原始需求",
|
|
451
|
+
"generatedCodeSummary": "生成代码的首行/核心结构摘要",
|
|
452
|
+
"accuracyRating": 3,
|
|
453
|
+
"adopted": false,
|
|
454
|
+
"rejectionReason": "用户描述的不准确之处",
|
|
455
|
+
"contextSnapshot": {
|
|
456
|
+
"selectedComponents": ["Query", "TableOrList"],
|
|
457
|
+
"templateType": "LeftRight"
|
|
458
|
+
},
|
|
459
|
+
"toolType": "trae"
|
|
460
|
+
}
|
|
461
|
+
```
|
|
462
|
+
|
|
463
|
+
### 提交时机
|
|
464
|
+
|
|
465
|
+
- 用户明确表示不采纳 → 立即提交
|
|
466
|
+
- 用户给出修改意见 → 先修改代码,若仍不采纳则提交
|
|
467
|
+
- 用户未回复反馈问题 → 在对话结束时自动提交(adopted 建议设为 false,rejectionReason 为"用户未反馈")
|
|
672
468
|
|
|
673
469
|
## 注意事项
|
|
674
470
|
|
|
675
471
|
- 所有路径都是相对于项目根目录的相对路径
|
|
676
|
-
-
|
|
677
|
-
-
|
|
472
|
+
- **优先使用语义搜索 `search_components_semantic` 和一站式查询 `get_component_full_profile`**,减少工具调用次数
|
|
473
|
+
- `get_component_library_overview`、`list_other_components`、`search_all_components` 等旧工具已移除,请使用 `get_architecture_overview` 和 `search_components_semantic` 替代
|
|
678
474
|
- **需要确保 MCP 服务器正在运行,否则无法查询数据**
|
|
679
|
-
- **服务器地址从环境变量或配置文件动态获取,无需硬编码**
|
|
680
|
-
- **AI助手会自动处理MCP协议通信,用户无需手动调用API**
|
|
681
475
|
- **设计稿分析功能需要配置视觉模型 API Key**,未配置时 analyze_design_image 工具会返回错误
|
|
682
476
|
- **设计稿分析会调用外部多模态模型 API**,会产生额外费用(单张约 $0.03~0.05)
|
|
683
477
|
- **设计稿分析结果会自动缓存 24 小时**,同一图片重复查询不会重复计费
|
|
684
|
-
-
|
|
685
|
-
- **CODING 敏感信息(cookies、password)查看时会被脱敏显示**
|
|
478
|
+
- **反馈收集是可选但强烈建议的功能**,有助于持续优化 MCP 工具质量
|
|
686
479
|
|
|
687
480
|
## 故障排除
|
|
688
481
|
|
|
@@ -700,128 +493,3 @@ npx szcd-mcp-proxy --test
|
|
|
700
493
|
1. 检查配置文件路径:`~/.szcd-mcp-config.json`
|
|
701
494
|
2. 检查 JSON 格式是否正确
|
|
702
495
|
3. 检查文件权限
|
|
703
|
-
|
|
704
|
-
### CODING Issue 获取失败
|
|
705
|
-
|
|
706
|
-
1. 检查 baseUrl 和 projectId 是否正确
|
|
707
|
-
2. Cookie 可能已过期,需重新从浏览器复制
|
|
708
|
-
3. 使用 coding_config 工具设置默认值,避免每次手动传参
|
|
709
|
-
|
|
710
|
-
## 示例对话
|
|
711
|
-
|
|
712
|
-
### 示例 1:获取架构概览
|
|
713
|
-
|
|
714
|
-
**用户**:szcd 组件库的架构是什么样的?
|
|
715
|
-
**助手**:让我为您查询 szcd 组件库的架构概览。
|
|
716
|
-
|
|
717
|
-
[助手自动触发MCP工具调用:get_architecture_overview()]
|
|
718
|
-
|
|
719
|
-
**助手**:szcd 组件库采用7层封装架构:
|
|
720
|
-
1. Ant Design(基础层)
|
|
721
|
-
2. Cover 层(封装层)
|
|
722
|
-
3. Wrapper 层(业务包装层)
|
|
723
|
-
4. ProPackages(高级封装层)
|
|
724
|
-
5. 复合组件层
|
|
725
|
-
6. 模板层(TreeQueryTable/QueryTabsTables等)
|
|
726
|
-
7. AI 辅助层
|
|
727
|
-
|
|
728
|
-
### 示例 2:搜索组件
|
|
729
|
-
|
|
730
|
-
**用户**:搜索包含 "table" 的组件
|
|
731
|
-
**助手**:让我在整个组件库中搜索包含 "table" 的组件。
|
|
732
|
-
|
|
733
|
-
[助手自动触发MCP工具调用:search_all_components({"keyword": "table"})]
|
|
734
|
-
|
|
735
|
-
**助手**:搜索到以下包含 "table" 的组件:
|
|
736
|
-
- TableOrList(复合组件)
|
|
737
|
-
- ProTable(ProComponents)
|
|
738
|
-
- Table(Ant Design)
|
|
739
|
-
|
|
740
|
-
### 示例 3:获取组件详情
|
|
741
|
-
|
|
742
|
-
**用户**:获取 Query 组件的详情
|
|
743
|
-
**助手**:让我使用 get_other_component 工具来获取 Query 组件的详细信息。
|
|
744
|
-
|
|
745
|
-
[助手自动触发MCP工具调用:get_other_component({"name": "Query"})]
|
|
746
|
-
|
|
747
|
-
**助手**:Query 组件的详细信息如下:
|
|
748
|
-
- 实现文件:src/other/components/Query/index.tsx
|
|
749
|
-
- 导出位置:src/other/components/index.js
|
|
750
|
-
- 透传目标:Select、DatePicker、Input、ProFormText
|
|
751
|
-
|
|
752
|
-
### 示例 4:查询组件依赖
|
|
753
|
-
|
|
754
|
-
**用户**:TemplateMode 组件依赖了哪些 szcd 组件?
|
|
755
|
-
**助手**:让我查询 TemplateMode 的依赖关系。
|
|
756
|
-
|
|
757
|
-
[助手自动触发MCP工具调用:get_component_dependencies({"name": "TemplateMode", "direction": "depends-on"})]
|
|
758
|
-
|
|
759
|
-
**助手**:TemplateMode 依赖以下 szcd 组件:
|
|
760
|
-
- LeftTree(左侧树)
|
|
761
|
-
- TableOrList(表格/列表)
|
|
762
|
-
- Query(查询组件)
|
|
763
|
-
- ProCard(布局卡片)
|
|
764
|
-
|
|
765
|
-
### 示例 5:获取 CODING Issue
|
|
766
|
-
|
|
767
|
-
**用户**:请获取 CODING Issue 6249 的详情
|
|
768
|
-
**助手**:让我获取 CODING Issue 6249 的详细信息。
|
|
769
|
-
|
|
770
|
-
[助手自动触发MCP工具调用:coding_fetch_issue({"issueCode": "6249"})]
|
|
771
|
-
|
|
772
|
-
**助手**:Issue 6249 详情:
|
|
773
|
-
- 标题:xxx
|
|
774
|
-
- 类型:缺陷/需求
|
|
775
|
-
- 优先级:高
|
|
776
|
-
- 描述:...
|
|
777
|
-
|
|
778
|
-
### 示例 6:Swagger 联调
|
|
779
|
-
|
|
780
|
-
**用户**:请拉取 Swagger API 列表,地址是 http://172.31.7.103:31689/dp-label/swagger-ui.html
|
|
781
|
-
**助手**:让我获取该 Swagger 地址的所有 API。
|
|
782
|
-
|
|
783
|
-
[助手自动触发MCP工具调用:swagger_fetch_apis({"swaggerUrl": "http://172.31.7.103:31689/dp-label/swagger-ui.html"})]
|
|
784
|
-
|
|
785
|
-
**助手**:共获取到 xx 个 API 分组,yy 个接口...
|
|
786
|
-
|
|
787
|
-
### 示例 7:读取文件内容
|
|
788
|
-
|
|
789
|
-
**用户**:查看 Query 组件的实现代码
|
|
790
|
-
**助手**:让我使用 read_file 工具来读取 Query 组件的实现文件。
|
|
791
|
-
|
|
792
|
-
[助手自动触发MCP工具调用:read_file({"path": "src/other/components/Query/index.tsx"})]
|
|
793
|
-
|
|
794
|
-
**助手**:Query 组件的实现代码如下:
|
|
795
|
-
```tsx
|
|
796
|
-
// 这里显示 src/other/components/Query/index.tsx 的内容
|
|
797
|
-
```
|
|
798
|
-
|
|
799
|
-
### 示例 8:分析设计稿
|
|
800
|
-
|
|
801
|
-
**用户**:请分析 docs/designs/user-list.png 这张设计稿
|
|
802
|
-
**助手**:让我使用 analyze_design_image 工具来分析这张设计稿。
|
|
803
|
-
|
|
804
|
-
[助手自动触发MCP工具调用:analyze_design_image({"imageSource": "docs/designs/user-list.png", "analysisType": "full", "targetLibrary": "szcd"})]
|
|
805
|
-
|
|
806
|
-
**助手**:设计稿分析结果如下:
|
|
807
|
-
- 页面类型:列表页(带左侧树形导航)
|
|
808
|
-
- 推荐组件:Query + LeftTree + TableOrList
|
|
809
|
-
- 样式Token差异:...
|
|
810
|
-
- CSS覆盖建议:...
|
|
811
|
-
|
|
812
|
-
## AI助手与MCP服务交互详解
|
|
813
|
-
|
|
814
|
-
### 调用机制
|
|
815
|
-
|
|
816
|
-
AI助手通过 MCP 协议(Streamable HTTP 或 stdio)连接到 MCP 服务器。AI助手会根据用户自然语言请求自动识别并调用适当的MCP工具。
|
|
817
|
-
|
|
818
|
-
### 调用流程
|
|
819
|
-
|
|
820
|
-
当用户提出需求时,AI助手会:
|
|
821
|
-
|
|
822
|
-
1. **理解用户意图**:分析用户想要获取的信息类型
|
|
823
|
-
2. **选择适当工具**:从 MCP 服务器提供的工具中选择最合适的
|
|
824
|
-
3. **构建参数**:根据用户输入构建工具调用所需的参数
|
|
825
|
-
4. **发起 MCP 调用**:通过 MCP 协议发送工具调用请求到服务器
|
|
826
|
-
5. **处理响应**:接收服务器返回的 JSON 格式结果
|
|
827
|
-
6. **格式化输出**:将结果以易读的方式呈现给用户
|