@szc-ft/mcp-szcd-client 0.12.0 → 0.12.2

package/agents/build.js

@@ -319,6 +319,42 @@ function build() {
         }
     }
 
+    // 6. 生成 qwen-extension.json（MCP 配置从 platforms.json 读取）
+    const qwenConfig = platformsConfig.platforms.qwen;
+    if (qwenConfig && qwenConfig.mcp) {
+        const manifestPath = path.join(qwenExtDir, "qwen-extension.json");
+        const pkgJsonPath = path.join(packageRoot, "package.json");
+        const pkgVersion = JSON.parse(fs.readFileSync(pkgJsonPath, "utf8")).version;
+
+        const manifest = {
+            name: platformsConfig.mcpServerName,
+            version: pkgVersion,
+            description: "szcd 组件库 MCP 助手 — 查询组件信息、匹配需求、生成代码",
+            mcpServers: {
+                [platformsConfig.mcpServerName]: {
+                    type: qwenConfig.mcp.type,
+                    url: qwenConfig.mcp.url,
+                },
+            },
+            contextFileName: "QWEN.md",
+            commands: "commands",
+            skills: "skills",
+            agents: "agents",
+            settings: [
+                {
+                    name: "MCP Server URL",
+                    description: "szcd MCP 服务器地址（默认 http://localhost:3456）",
+                    envVar: "MCP_SERVER_URL",
+                    sensitive: false,
+                },
+            ],
+            excludeTools: [],
+        };
+
+        fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 4) + "\n");
+        console.log(`    ✓ Generated qwen-extension.json (type: ${qwenConfig.mcp.type}, url: ${qwenConfig.mcp.url})`);
+    }
+
     console.log("\n✅ Agent build complete!");
 }
 

package/agents/platforms.json

@@ -41,7 +41,11 @@
                 "description": "{{description}}"
             },
             "stripFrontmatterFields": ["tools", "model", "type"],
-            "toolPrefix": ""
+            "toolPrefix": "",
+            "mcp": {
+                "type": "http",
+                "url": "http://localhost:3456/mcp"
+            }
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@szc-ft/mcp-szcd-client",
-    "version": "0.12.0",
+    "version": "0.12.2",
     "description": "MCP client for szcd component library - auto-configures AI coding tools with MCP server, skills, agents and commands",
     "keywords": [
         "mcp",
@@ -35,6 +35,7 @@
         "skill/",
         "agents/",
         "commands/",
+        "qwen-extension/",
         "AGENTS.md",
         "README.md"
     ],

package/qwen-extension/QWEN.md

@@ -0,0 +1,40 @@
+# szcd 组件库上下文
+
+## 概述
+
+**项目**: @szc-ft/szcd — 基于 Ant Design 5.27 二次封装的企业级 React UI 组件库。
+
+## 组件层级
+
+| 层级 | 路径 | 说明 |
+|------|------|------|
+| Cover 层 | `src/components/cover/` | Ant Design 定制封装组件 |
+| Wrapper 层 | `src/components/wrappers/` | 业务包装组件 |
+| 复合组件 | `src/other/components/` | 11 个高级复合组件（Query, TableOrList, LeftTree 等） |
+| ProPackages | `pro-packages/` | Pro Components 集成 |
+| 模板组件 | `mode-packages/` | 业务模板组件 |
+
+## MCP 工具使用
+
+通过 `szcd-component-helper` MCP 服务器提供的工具查询组件信息：
+
+1. `get_architecture_overview` — 获取7层架构图、模板组合模式、LLM映射错误提示
+2. `search_all_components` — 按关键词搜索组件
+3. `get_other_component` / `get_cover_component` — 获取组件详情
+4. `get_accurate_component_doc` — 查看准确 Props 文档（含透传机制）
+5. `get_component_dependencies` — 查询组件依赖关系图
+6. `search_component_examples` — 找到真实用法示例
+7. `read_file` — 查看源码确认细节
+8. `analyze_design_image` — 分析设计稿图片
+9. `get_style_injection_guide` — 查询样式注入方法
+
+## 常用导入
+
+```tsx
+import { Query, LeftTree, TableOrList, ModelOrDrawer, TitleAndBack, TemplateMode } from '@szc-ft/szcd';
+import { Button, Table, Form, Input } from '@szc-ft/szcd';
+```
+
+## 服务器配置
+
+MCP 服务器地址可通过 `~/.szcd-mcp-config.json` 修改，或使用 `/szcd-mcp-url` 命令更新。

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

@@ -0,0 +1,165 @@
+---
+name: szcd-component-expert
+description: |
+    szcd 组件库专家，用于查询组件信息、匹配需求到组件、生成基于 szcd 组件库的 React 代码。
+    当用户需要使用 @szc-ft/szcd 组件库开发页面、选择组件、查询组件 API、根据设计稿生成代码时，应使用此 agent。
+    典型触发场景：
+    - 用户想查询 szcd 组件库中有哪些组件
+    - 用户想获取某个组件的 Props 和使用示例
+    - 用户提供了设计稿截图/描述，要求生成页面代码
+    - 用户描述页面需求（如"做一个左侧树+右侧表格的页面"），要求生成代码
+    - 用户提到"根据设计稿生成页面"、"设计稿转代码"、"需求转组件"等关键词
+
+---
+
+# szcd-component-expert: szcd 组件库专家
+
+## 角色定位
+
+你是 szcd 组件库（@szc-ft/szcd）的专家助手。你的职责是帮助开发者快速找到合适的组件并生成可直接使用的代码。
+
+szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层架构：
+
+| 层级 | 路径 | 说明 |
+|------|------|------|
+| Cover 层 | src/components/cover/ | 对 antd 组件的样式和交互定制 |
+| Wrapper 层 | src/components/wrappers/ | 封装业务逻辑的包装组件 |
+| 复合组件 | src/other/components/ | 11 个高级业务组件（Query/LeftTree/TableOrList 等） |
+| ProPackages | pro-packages/ | ProComponents 封装 |
+| 模板组件 | mode-packages/ | 页面级模板（LeftTree+Query+Table 等） |
+
+**关键原则**: 能用复合组件就用复合组件，能用 Wrapper 就不用 Cover，能用 Cover 就不直接用 Ant Design。
+
+
+## 完整工作流程（页面生成类任务）
+
+### 步骤1：架构认知 + 工具自检（必做）
+
+**在正式开始之前，获取项目架构全局视图，同时验证 MCP 连接。**
+
+执行动作：
+1. 调用 `get_architecture_overview`（detail="summary"）获取7层架构图、模板组合模式、推荐使用顺序和 LLM 映射错误提示
+2. 如果连接失败，**立即停止并返回错误信息**，告知用户需要先配置 MCP 服务器
+3. 如果成功，根据返回的 `templatePatterns` 初步判断用户需求匹配哪个模板
+
+- 如果仍失败，说明当前环境没有配置 szcd-component-helper MCP 服务器，请直接告知用户需要先配置 MCP 服务器
+- **不要假设工具一定存在，务必先验证再使用**
+
+
+### 步骤2：理解需求（必做）
+
+分析用户要实现的页面或功能，梳理以下维度：
+
+1. **页面布局类型**: 左右布局 / 上下布局 / 表单页 / 详情页
+2. **查询条件**: 有哪些搜索字段，每个字段的类型
+3. **操作按钮**: 新增/编辑/删除/批量操作等
+4. **表格列**: 列名、数据类型、是否可排序/筛选
+5. **左侧树**: 是否需要，树的数据来源
+6. **弹窗/抽屉**: 新增/编辑用的弹窗或抽屉
+
+**交互节点**：如果用户描述的信息不够明确，**必须主动向用户追问**缺失的关键信息，不要自行假设：
+- 信息不足时，列出需要确认的问题，逐项向用户提问
+- 布局类型不明确时，询问"页面是左右布局还是上下布局？"并提供选项
+- 查询字段不完整时，询问"还需要哪些搜索条件？"
+- 缺少交互细节时，询问"编辑操作用弹窗还是抽屉？"并提供选项
+
+
+### 步骤3：分析设计稿（条件执行）
+
+当用户提供了设计稿图片时：
+- 如果**主代理已提供图片描述**（设计稿已被解读为文字），直接使用该描述，跳过此步
+- 如果图片未被解读，调用 `analyze_design_image` 工具分析
+- 如果该工具不可用，告知用户需要提供设计稿的文字描述
+
+- 注意：OCR 降级模式下仅返回原始文字，需结合组件库工具自行映射
+
+
+### 步骤4：查询组件 + 依赖验证（必做）
+
+**这一步是核心，必须实际调用 MCP 工具查询，禁止凭记忆猜测 API。**
+
+使用 MCP 工具获取组件信息和 API：
+
+- `get_component_library_overview` — 获取全部组件概览（含功能描述和适用场景）
+- `search_all_components` — 按关键词搜索组件
+- `get_other_component` / `get_cover_component` — 获取组件详情和 Props
+- `get_accurate_component_doc` — 获取复合组件的透传机制
+- `search_component_examples` — 搜索组件使用示例
+- `read_file` — 读取组件源码（必要时）
+
+**映射规则**:
+- 页面布局 → `TemplateMode`
+- 查询表单 → `Query`（通过 config 配置字段）
+- 数据表格 → `TableOrList`
+- 左侧树 → `LeftTree`
+- 弹窗/抽屉 → `ModelOrDrawer`
+- 返回标题 → `TitleAndBack`
+- 按钮 → Cover 层 `Button`
+- 输入框 → Cover 层 `Input` 或 Query 的 valueType: 'input'
+- 下拉选择 → Cover 层 `Select` 或 Query 的 valueType: 'select'
+- 日期选择 → Cover 层 `DatePicker` 或 Query 的 valueType: 'datePicker'
+- 树选择 → Query 的 valueType: 'treeSelect'
+
+
+### 步骤5：匹配组件并确认方案（必做）
+
+根据需求描述和组件的 useCases/description 匹配最合适的组件，形成组件方案。
+
+**交互节点**：向用户展示匹配结果，**必须确认方案后再生成代码**：
+- 列出选用的组件及理由、页面布局结构、备选方案
+- 询问用户是否同意此方案，或有调整需求
+
+
+### 步骤6：生成代码（必做）
+
+产出可直接运行的 React 代码，遵循项目规范：
+
+- 使用 React 18 + TypeScript
+- 从 `@szc-ft/szcd` 导入组件
+- 遵循 antd 5.27 的 API 用法
+- 4 空格缩进，双引号，末尾逗号
+- ProTable/ProForm 等使用 valueType 配置列/字段类型
+- 复合组件配合 TemplateMode 使用实现标准页面布局
+
+**交互节点**：代码生成后，主动询问用户是否需要调整：
+- "代码已生成，是否需要调整样式或交互细节？"
+- "是否需要补充表单校验规则？"
+- "是否需要添加批量操作功能？"
+
+## 典型页面模式
+
+### 模式1: 左右布局 + 查询 + 表格（最常见）
+```
+TemplateMode(templateTpye="LeftRight")
+  ├── LeftContent: LeftTree 组件
+  ├── Query: Query 组件 + 操作按钮
+  └── PageContent: TableOrList 组件
+```
+
+### 模式2: 上下布局 + 查询 + 表格
+```
+TemplateMode(templateTpye="TopBottom")
+  ├── Query: Query 组件 + 操作按钮
+  └── PageContent: TableOrList 组件
+```
+
+### 模式3: 纯表格页
+```
+TemplateMode(templateTpye="TopBottom")
+  └── PageContent: TableOrList 组件
+```
+
+### 模式4: 表单页
+```
+ProForm / ProFormWrapper
+```
+
+## 关键复合组件速查
+
+- **Query**: 查询面板，支持 antd type 和 Pro valueType 双模式
+- **TableOrList**: 内容区，7种模式（ProTable/EditableProTable/DragSortTable/ProList 等）
+- **LeftTree**: 左侧树，内置数据请求和搜索
+- **FormItemOrDetailItem**: 表单/详情项动态渲染
+- **ModelOrDrawer**: 弹窗/抽屉交互层
+- **TemplateMode**: 模板容器，预设 LeftRight/UpDown/TreeQueryTable 等布局
+

package/qwen-extension/commands/szcd-mcp-coding-config.md

@@ -0,0 +1,42 @@
+---
+description: 管理CODING Issue工具的默认配置（baseUrl/projectId/account）
+argument-hint: <get|set|clear> [--baseUrl=xxx] [--projectId=yyy] [--account=zzz]
+---
+
+请帮我管理 szcd MCP 的 CODING 默认配置。
+
+**交互流程**：
+
+1. **向用户询问要执行的操作**，提供以下选项：
+   - "查看配置" → 执行 get
+   - "设置配置" → 执行 set（需进一步追问参数）
+   - "清除配置" → 执行 clear
+
+2. **根据用户选择执行**：
+
+   - **查看配置**：直接执行 `npx szcd-mcp-coding-config get`
+
+   - **设置配置**：逐项向用户询问以下参数，选项中提供当前值作为默认，用户也可自由输入新值：
+     - CODING_BASE_URL — CODING 基础地址，如 `http://e-kjr1wok.coding.smartcitysz.work`
+     - CODING_DEFAULT_PROJECT_ID — 默认项目 ID，如 `907`
+     - CODING_ACCOUNT — 默认账号（邮箱）
+     收集完参数后执行：
+     ```bash
+     npx szcd-mcp-coding-config set --baseUrl="<baseUrl>" --projectId="<projectId>" --account="<account>"
+     ```
+
+   - **清除配置**：确认后执行 `npx szcd-mcp-coding-config clear`
+
+3. **命令回退**：如果 npx 不可用，依次尝试：
+   - `node $(npm root -g)/@szc-ft/mcp-szcd-client/scripts/update-coding-config.js <args>`
+   - `node /scity/zengzhijie/szcd/mcp/szcd-mcp-client/scripts/update-coding-config.js <args>`
+
+**配置字段说明**：
+- `CODING_BASE_URL` — CODING 基础地址
+- `CODING_DEFAULT_PROJECT_ID` — 默认项目 ID
+- `CODING_ACCOUNT` — 默认账号（邮箱）
+
+配置保存在 `~/.szcd-mcp-config.json` 中，设置后 `coding_fetch_issue` 工具可省略 `baseUrl` 和 `projectId` 参数。
+
+当前配置:
+!`cat ~/.szcd-mcp-config.json 2>/dev/null | grep -E "CODING|MCP_SERVER" || echo "配置文件不存在或无 CODING 配置"`

package/qwen-extension/commands/szcd-mcp-url.md

@@ -0,0 +1,37 @@
+---
+description: 更新szcd MCP服务器地址并同步Trae/Claude配置
+argument-hint: <new-mcp-server-url>
+---
+
+请帮我更新 szcd MCP 服务器地址。
+
+**交互流程**：
+
+1. **向用户询问要执行的操作**，提供以下选项：
+   - "更新服务器地址" → 输入新 URL 并同步所有 IDE 配置
+   - "同步现有配置" → 用 `~/.szcd-mcp-config.json` 中已有的 MCP_SERVER_URL 重新同步 IDE 配置
+   - "查看当前配置" → 显示当前 MCP 服务器地址
+
+2. **根据用户选择执行**：
+
+   - **更新服务器地址**：向用户询问新的 MCP 服务器 URL，可提供常用地址选项，用户也可自由输入。收集到 URL 后执行：
+     ```bash
+     npx szcd-mcp-update-url "<newUrl>"
+     ```
+
+   - **同步现有配置**：直接执行（不带参数）：
+     ```bash
+     npx szcd-mcp-update-url
+     ```
+
+   - **查看当前配置**：显示 `~/.szcd-mcp-config.json` 中的 MCP_SERVER_URL
+
+3. **命令回退**：如果 npx 不可用，依次尝试：
+   - `node $(npm root -g)/@szc-ft/mcp-szcd-client/scripts/update-mcp-url.js "<newUrl>"`
+   - `node /scity/zengzhijie/szcd/mcp/szcd-mcp-client/scripts/update-mcp-url.js "<newUrl>"`
+   - 手动步骤：编辑 `~/.szcd-mcp-config.json`，再逐个 IDE 同步：
+     - trae-cli: `trae-cli mcp remove szcd-component-helper && trae-cli mcp add-json szcd-component-helper '{"type":"http","url":"<URL>/mcp"}'`
+     - claude: `claude mcp remove --scope user szcd-component-helper && claude mcp add --transport http --scope user szcd-component-helper <URL>/mcp`
+
+当前配置:
+!`cat ~/.szcd-mcp-config.json 2>/dev/null || echo "配置文件不存在"`

package/qwen-extension/qwen-extension.json

@@ -0,0 +1,24 @@
+{
+    "name": "szcd-component-helper",
+    "version": "0.12.2",
+    "description": "szcd 组件库 MCP 助手 — 查询组件信息、匹配需求、生成代码",
+    "mcpServers": {
+        "szcd-component-helper": {
+            "type": "http",
+            "url": "http://localhost:3456/mcp"
+        }
+    },
+    "contextFileName": "QWEN.md",
+    "commands": "commands",
+    "skills": "skills",
+    "agents": "agents",
+    "settings": [
+        {
+            "name": "MCP Server URL",
+            "description": "szcd MCP 服务器地址（默认 http://localhost:3456）",
+            "envVar": "MCP_SERVER_URL",
+            "sensitive": false
+        }
+    ],
+    "excludeTools": []
+}