@agile-team/wl-skills-kit 2.3.1 → 2.3.3
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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,39 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [2.3.3] - 2026-04-28
|
|
4
|
+
|
|
5
|
+
### 📝 README 大幅重写 + Skill 状态校正
|
|
6
|
+
|
|
7
|
+
#### README 新增核心章节
|
|
8
|
+
- **文档地图 & 架构导读**:按角色(设计师/业务分析师/后端/前端/维护者)列出各自入口;各目录职责一览;“读哪个 README”导航表
|
|
9
|
+
- **设计理念**:三层分工结构(SKILL.md 语义层 / MCP tools 执行层 / HTTP API 数据层)
|
|
10
|
+
- **当前能力全景**:完整的从输入到输出的流程图,包括 MCP 工具层在链路中的位置
|
|
11
|
+
- **Roadmap**:按优先级列出 permission-sync 等待做事项
|
|
12
|
+
- **未来设想**:完整自动化链路展望
|
|
13
|
+
|
|
14
|
+
#### Skill 状态校正
|
|
15
|
+
- `dict-sync`:已有完整 SKILL.md,从 ⏳ PLANNED 改为 ✅ 启用
|
|
16
|
+
- `code-fix`:已有完整 SKILL.md,从 ⏳ PLANNED 改为 ✅ 启用
|
|
17
|
+
- `permission-sync`:仍是 SKILL.draft.md,保持 ⏳ PLANNED
|
|
18
|
+
- Skills 总数更新:6 → 8 个已启用,1 个 PLANNED(两处描述同步更新)
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## [2.3.2] - 2026-04-28
|
|
23
|
+
|
|
24
|
+
### 📝 输入规范文档体系 + README/目录结构优化
|
|
25
|
+
|
|
26
|
+
#### 新增 docs/ 输入规范文档(仅仓库可见,不随包分发)
|
|
27
|
+
- **`docs/input-spec-prototype.md`**: 原型输入规范——面向设计师/产品,含合格原型自检清单、按鈕颜色规范、Tab/视角切换标注要求、精度对比表
|
|
28
|
+
- **`docs/input-spec-detailed-design.md`**: 详设文档输入规范——面向业务分析师,含可直接复制的 Markdown 表格模板、字段英文名+字典 code 对精度的量化影响说明
|
|
29
|
+
- **`docs/input-spec-api.md`**: API 契约确认规范——面向后端开发者,含接口 URL 命名规范、api.md 两步确认工作流、常见问题答疑
|
|
30
|
+
- **`docs/input-spec-page-spec.md`**: page-spec JSON 参考手册——面向前端开发者,含每个字段详细注释、自检清单、手写 spec 场景指南
|
|
31
|
+
|
|
32
|
+
#### 结构和文档优化
|
|
33
|
+
- `README.md`: 版本读数更新为 v2.3,仓库结构图补充 `docs/` 目录说明,“进一步阅读”章节补充输入规范入口
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
3
37
|
## [2.3.1] - 2026-04-27
|
|
4
38
|
|
|
5
39
|
### 🔧 组件三文件分离规范补全 + 文档精准化
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @agile-team/wl-skills-kit
|
|
2
2
|
|
|
3
|
-
**AI Skill 模板包 v2.
|
|
3
|
+
**AI Skill 模板包 v2.3** — 一条命令将 13 条编码规范、8 个 AI Skill、MCP 工具层、组件文档、领域样例导入 Vue 3 项目。
|
|
4
4
|
|
|
5
5
|
让 AI 编辑器(Copilot / Cursor / Windsurf / Claude Code / Cline / Kiro / Trae / 通用 Agents)**真正理解项目规范**,从原型/详设到完整页面代码全流程自动化。
|
|
6
6
|
|
|
@@ -41,6 +41,135 @@ reports/AUDIT_AI_*.md + AUDIT_HUMAN_*.md
|
|
|
41
41
|
|
|
42
42
|
---
|
|
43
43
|
|
|
44
|
+
## 文档地图 — 谁该读什么
|
|
45
|
+
|
|
46
|
+
> 这个项目覆盖了多个角色和多层目录,先花 30 秒定位自己,再按需深入。
|
|
47
|
+
|
|
48
|
+
### 按角色找入口
|
|
49
|
+
|
|
50
|
+
| 你的身份 | 你要做的事 | 从这里开始 |
|
|
51
|
+
|---|---|---|
|
|
52
|
+
| **业务团队(首次接入)** | 安装、跑通 AI 代码生成流程 | 本文档 → CLI 命令 → 业务项目内 `.github/guides/usage.md` |
|
|
53
|
+
| **设计师 / 产品经理** | 了解如何制作让 AI 精确识别的原型 | [docs/input-spec-prototype.md](docs/input-spec-prototype.md) |
|
|
54
|
+
| **业务分析师** | 了解详设文档需要提供哪些结构化内容 | [docs/input-spec-detailed-design.md](docs/input-spec-detailed-design.md) |
|
|
55
|
+
| **后端开发者** | 了解接口命名/响应格式规范,如何确认 api.md | [docs/input-spec-api.md](docs/input-spec-api.md) |
|
|
56
|
+
| **前端开发者** | 理解 page-spec JSON 结构,手写或校验 | [docs/input-spec-page-spec.md](docs/input-spec-page-spec.md) |
|
|
57
|
+
| **wl-skills-kit 维护者** | 修改规范、Skill、模板、CLI | [kit-internal/README.md](kit-internal/README.md) |
|
|
58
|
+
|
|
59
|
+
### 各目录职责一览
|
|
60
|
+
|
|
61
|
+
```
|
|
62
|
+
wl-skills-kit/
|
|
63
|
+
│
|
|
64
|
+
├── files/ ← ★ 打包分发给业务项目的全部内容
|
|
65
|
+
│ ├── .github/ AI 指令体系(规范+Skill+适配层+报告模板)
|
|
66
|
+
│ ├── docs/ 随包分发的组件 API 文档(12 个组件)
|
|
67
|
+
│ └── demo/ 领域样例代码(供 AI 参考学习)
|
|
68
|
+
│
|
|
69
|
+
├── mcp/ ← ★ MCP Server(随包分发,Cursor 自动注册)
|
|
70
|
+
│ 4 个工具:菜单查询/写入 + 字典查询/写入
|
|
71
|
+
│
|
|
72
|
+
├── bin/ ← CLI 实现(init / update / clean)
|
|
73
|
+
│
|
|
74
|
+
├── docs/ ← 仅本仓库可见(不分发)
|
|
75
|
+
│ 输入规范文档系列(面向团队各角色)
|
|
76
|
+
│
|
|
77
|
+
└── kit-internal/ ← 仅本仓库可见(不分发)
|
|
78
|
+
维护者文档(架构 ADR、贡献流程、踩坑记录)
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### 读哪个 README
|
|
82
|
+
|
|
83
|
+
| README 文件 | 内容 | 读者 |
|
|
84
|
+
|---|---|---|
|
|
85
|
+
| 本文件(根 README.md) | 包概述、安装使用、Skill 全景 | 所有人 |
|
|
86
|
+
| `kit-internal/README.md` | 维护者工作空间总览 | 维护者 |
|
|
87
|
+
| `files/.github/guides/usage.md` | 业务项目安装后的完整使用流程 | 业务团队 |
|
|
88
|
+
| `files/.github/guides/architecture.md` | AI 体系架构与设计决策 | 想深入了解的技术同学 |
|
|
89
|
+
| `files/.github/skills/*/USAGE.md` | 每个 Skill 的触发方式和效果说明 | 业务团队按需查阅 |
|
|
90
|
+
| `docs/input-spec-*.md` | 各角色的输入规范最佳实践 | 设计/分析/后端/前端 |
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
## 设计理念 & 演进路线
|
|
95
|
+
|
|
96
|
+
### 核心设计理念
|
|
97
|
+
|
|
98
|
+
**"一次写好 Skill,人人获益"** — wl-skills-kit 不是项目脚手架,而是一套 **AI 行为规范体系**。
|
|
99
|
+
|
|
100
|
+
通过将团队的编码规范、业务模式、设计决策编码到 SKILL.md 中,让每一个 AI 编辑器在每一次对话里都能遵守相同的规范——无论是 Copilot、Cursor 还是 Claude Code,无论是老成员还是新同学,AI 的行为都是可预期的、一致的。
|
|
101
|
+
|
|
102
|
+
**三层分工**:
|
|
103
|
+
|
|
104
|
+
```
|
|
105
|
+
SKILL.md(语义层) AI 编辑器理解"该怎么做"
|
|
106
|
+
│
|
|
107
|
+
▼
|
|
108
|
+
MCP tools / CLI(执行层) 跨越 AI 上下文边界,调用真实系统
|
|
109
|
+
│
|
|
110
|
+
▼
|
|
111
|
+
mcp/api/ / 后端 HTTP API 实际的数据读写
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
- **SKILL.md** — 静态知识,放在 AI 编辑器的上下文里,零运行时开销
|
|
115
|
+
- **MCP 工具** — 当 Skill 需要读写真实系统(菜单树/字典表)时,通过 MCP 调用,跨越 AI 上下文边界
|
|
116
|
+
- **纯查询/生成类 Skill**(如 page-codegen / convention-audit)不需要 MCP,SKILL.md 直接驱动
|
|
117
|
+
|
|
118
|
+
### 当前能力全景(v2.3)
|
|
119
|
+
|
|
120
|
+
```
|
|
121
|
+
输入层 AI 推理层 输出层
|
|
122
|
+
───────── ───────────────────── ─────────────────
|
|
123
|
+
Axure HTML 原型 → prototype-scan → page-spec JSON
|
|
124
|
+
详设 Markdown 表 → prototype-scan → page-spec JSON
|
|
125
|
+
口述需求 → prototype-scan (推断) → page-spec JSON
|
|
126
|
+
│
|
|
127
|
+
▼
|
|
128
|
+
api-contract → api.md(逐页面)
|
|
129
|
+
│
|
|
130
|
+
▼
|
|
131
|
+
page-codegen → data.ts + index.vue
|
|
132
|
+
(8 种内置模板) + index.scss + pages.ts
|
|
133
|
+
│
|
|
134
|
+
▼
|
|
135
|
+
convention-audit → AUDIT_AI.md(AI 自查)
|
|
136
|
+
AUDIT_HUMAN.md(人工检查)
|
|
137
|
+
│
|
|
138
|
+
▼
|
|
139
|
+
code-fix → 受控自动整改偏差
|
|
140
|
+
│
|
|
141
|
+
▼
|
|
142
|
+
menu-sync (MCP) → 线上菜单注册完毕
|
|
143
|
+
dict-sync (MCP) → 线上字典同步完毕
|
|
144
|
+
│
|
|
145
|
+
▼
|
|
146
|
+
template-extract → 领域模板沉淀复用
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
### 下一步计划(Roadmap)
|
|
150
|
+
|
|
151
|
+
| 优先级 | 功能 | 状态 |
|
|
152
|
+
|---|---|---|
|
|
153
|
+
| 🔴 高 | `permission-sync` — 页面级/按钮级权限批量注册 | ⏳ SKILL.draft.md 已有设计 |
|
|
154
|
+
| 🟡 中 | `domain/` 领域模板扩展 — 补充 sale / hrms 等领域样例 | ⏳ 规划中 |
|
|
155
|
+
| 🟡 中 | `page-codegen` 支持更多 Template 组件(cx-ui-produce 的配置驱动页面)| ⏳ 持续补充 |
|
|
156
|
+
| 🟢 低 | MCP 增加 permission 工具(`wls_permission_query/upsert`)| ⏳ 依赖 permission-sync Skill |
|
|
157
|
+
| 🟢 低 | `code-fix` 完善 — 覆盖更多自动修复场景 | ⏳ 持续完善 |
|
|
158
|
+
|
|
159
|
+
### 未来设想
|
|
160
|
+
|
|
161
|
+
当 permission-sync 完成后,一个新页面从 0 到线上可访问的完整链路将全自动化:
|
|
162
|
+
|
|
163
|
+
```
|
|
164
|
+
原型 → AI 生成代码 → convention-audit 验收 → menu-sync 注册菜单
|
|
165
|
+
→ dict-sync 同步字典
|
|
166
|
+
→ permission-sync 注册权限
|
|
167
|
+
↓
|
|
168
|
+
UI 可访问,权限可分配
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
---
|
|
172
|
+
|
|
44
173
|
## ⚠️ 仓库结构 vs 业务项目安装结构(**必看**)
|
|
45
174
|
|
|
46
175
|
`wl-skills-kit` 是一个 **npm 模板包**:仓库本身的结构 ≠ 你 `npx` 之后业务项目里看到的结构。两者**严格区分**:
|
|
@@ -66,6 +195,13 @@ wl-skills-kit/ ← 你正看的这个仓库
|
|
|
66
195
|
│ ├── docs/ 组件 API 文档
|
|
67
196
|
│ └── demo/ 领域样例
|
|
68
197
|
│
|
|
198
|
+
├── docs/ ★★ 仅仓库可见,不会安装到业务项目 ★★
|
|
199
|
+
│ ├── mcp建议.md MCP 进化路线与三层架构建议
|
|
200
|
+
│ ├── input-spec-prototype.md 原型输入规范(面向设计师/产品)
|
|
201
|
+
│ ├── input-spec-detailed-design.md 详设文档输入规范(面向业务分析师)
|
|
202
|
+
│ ├── input-spec-api.md API 契约确认规范(面向后端开发者)
|
|
203
|
+
│ └── input-spec-page-spec.md page-spec JSON 参考手册(面向前端开发者)
|
|
204
|
+
│
|
|
69
205
|
├── kit-internal/ ★★ 仅仓库可见,不会安装到业务项目 ★★
|
|
70
206
|
│ ├── README.md 维护者首页
|
|
71
207
|
│ ├── architecture.md 架构总览
|
|
@@ -97,7 +233,7 @@ wl-skills-kit/ ← 你正看的这个仓库
|
|
|
97
233
|
│ │ ├── 02-code-structure.md
|
|
98
234
|
│ │ ├── ... (共 13 条)
|
|
99
235
|
│ │ └── 13-platform-components.md
|
|
100
|
-
│ ├── skills/
|
|
236
|
+
│ ├── skills/ 8 个启用 Skill + 1 个 PLANNED 草稿
|
|
101
237
|
│ │ ├── _registry.md ★ 触发词 → SKILL 路径单一数据源
|
|
102
238
|
│ │ ├── _compat/ 多 AI 编辑器适配(配置 + headers)
|
|
103
239
|
│ │ ├── core/ 核心通用 Skill
|
|
@@ -108,10 +244,10 @@ wl-skills-kit/ ← 你正看的这个仓库
|
|
|
108
244
|
│ │ │ └── template-extract/ { SKILL.md, USAGE.md }
|
|
109
245
|
│ │ ├── sync/ 数据同步类
|
|
110
246
|
│ │ │ ├── menu-sync/ { SKILL.md, USAGE.md, env/ }
|
|
111
|
-
│ │ │ ├── dict-sync/
|
|
112
|
-
│ │ │ └── permission-sync/ [PLANNED] SKILL.draft.md
|
|
247
|
+
│ │ │ ├── dict-sync/ { SKILL.md } 已启用
|
|
248
|
+
│ │ │ └── permission-sync/ [PLANNED] SKILL.draft.md 设计中
|
|
113
249
|
│ │ ├── ops/ 运维类
|
|
114
|
-
│ │ │ └── code-fix/
|
|
250
|
+
│ │ │ └── code-fix/ { SKILL.md } 已启用
|
|
115
251
|
│ │ └── domain/ 领域专属(按需创建)
|
|
116
252
|
│ ├── guides/ 人读指南(usage.md / architecture.md)
|
|
117
253
|
│ └── reports/ AI 生成报告(追加不覆盖)
|
|
@@ -194,10 +330,10 @@ npx @agile-team/wl-skills-kit update
|
|
|
194
330
|
| `page-codegen` | ✅ 启用 | `skills/core/page-codegen/` | 4 文件骨架生成 + 模板调度 |
|
|
195
331
|
| `convention-audit` | ✅ 启用 | `skills/core/convention-audit/` | 13 条规范扫描 + 双报告 |
|
|
196
332
|
| `template-extract` | ✅ 启用 | `skills/core/template-extract/` | 现有页面 → 领域模板 |
|
|
197
|
-
| `menu-sync` | ✅ 启用 | `skills/sync/menu-sync/` | 菜单基线 ↔
|
|
198
|
-
| `dict-sync` |
|
|
199
|
-
| `
|
|
200
|
-
| `
|
|
333
|
+
| `menu-sync` | ✅ 启用 | `skills/sync/menu-sync/` | 菜单基线 ↔ 后端接口(MCP) |
|
|
334
|
+
| `dict-sync` | ✅ 启用 | `skills/sync/dict-sync/` | 字典基线 ↔ 后端接口(MCP) |
|
|
335
|
+
| `code-fix` | ✅ 启用 | `skills/ops/code-fix/` | 受控自动修复偏差 |
|
|
336
|
+
| `permission-sync` | ⏳ PLANNED | `skills/sync/permission-sync/` | 权限基线 ↔ 后端接口(设计中) |
|
|
201
337
|
|
|
202
338
|
每个启用 Skill 同目录都有 **`SKILL.md`(AI 触发用)+ `USAGE.md`(团队成员阅读)**。
|
|
203
339
|
|
|
@@ -240,6 +376,7 @@ npx @agile-team/wl-skills-kit update
|
|
|
240
376
|
- 🔧 维护者文档:[kit-internal/README.md](kit-internal/README.md)(仅本仓库)
|
|
241
377
|
- 🤖 多编辑器适配机制:[files/.github/skills/_compat/README.md](files/.github/skills/_compat/README.md)
|
|
242
378
|
- 🛠️ Jenkins 流水线参考:[kit-internal/jenkins-pipeline.md](kit-internal/jenkins-pipeline.md)
|
|
379
|
+
- 📝 输入规范(如何提供高精度输入):[docs/](docs/)
|
|
243
380
|
|
|
244
381
|
---
|
|
245
382
|
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
| DETAIL_TABS | `templates/universal/TPL-DETAIL-TABS.md` | 详情 Tab 页(上方表单 + 下方 Tab 子表) |
|
|
16
16
|
| CHANGE_HISTORY | `templates/universal/TPL-CHANGE-HISTORY.md` | 变更历史比对页(时间线 + 字段差异) |
|
|
17
17
|
| RECORD_FORM | `templates/universal/TPL-RECORD-FORM.md` | 录入型实绩页(无分页,查询 + 内联表单) |
|
|
18
|
-
| TEMPLATE_DRIVEN | `templates/universal/TPL-DRIVEN.md` |
|
|
18
|
+
| TEMPLATE_DRIVEN | `templates/universal/TPL-DRIVEN.md` | 配置驱动页面(项目已有 Template 组件,data.ts 只需 config 对象,index.vue 3~5 行) |
|
|
19
19
|
|
|
20
20
|
---
|
|
21
21
|
|
|
@@ -1,27 +1,212 @@
|
|
|
1
|
-
# TEMPLATE_DRIVEN
|
|
1
|
+
# TPL-DRIVEN:配置驱动模板页(TEMPLATE_DRIVEN 模式代码生成模板)
|
|
2
2
|
|
|
3
|
-
>
|
|
4
|
-
>
|
|
3
|
+
> **本文件是 page-codegen 的正式代码生成模板。**
|
|
4
|
+
> 适用场景:项目中已有可复用的 Template 组件(如 `FinishingAchievementTemplate`),
|
|
5
|
+
> 当前页面的交互骨架与该组件完全一致时,`data.ts` 只需导出 config 对象,`index.vue` 极简到 3~5 行。
|
|
5
6
|
|
|
6
7
|
---
|
|
7
8
|
|
|
8
|
-
##
|
|
9
|
+
## 核心模式:config-only + 3 行 index.vue
|
|
9
10
|
|
|
10
|
-
|
|
11
|
+
这类页面的代码精简到极致:
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
data.ts → 只导出一个 xxxConfig 常量(纯 TypeScript 对象,无任何业务逻辑)
|
|
15
|
+
index.vue → 只有 <XxxTemplate :config="config" />,总计 3~5 行
|
|
16
|
+
index.scss → 空文件或极少样式(模板组件内部已处理样式)
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
所有业务逻辑(查询、表格列、API 调用、确认框、刷新等)全部在 Template 组件内部处理。
|
|
20
|
+
页面文件只是向模板传递"这个页面的具体配置"。
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## 通用生成规范(适用于任意 Template 组件)
|
|
25
|
+
|
|
26
|
+
### 步骤 1:确认 Template 组件的 types.ts
|
|
27
|
+
|
|
28
|
+
生成 config 对象前,必须先读取该模板的类型定义文件:
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
src/components/template/{XxxTemplate}/types.ts
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
`data.ts` 的 config 对象结构必须完全遵循 `types.ts` 的 interface 定义,不得猜测字段。
|
|
35
|
+
|
|
36
|
+
### 步骤 2:生成 data.ts(纯 config 对象)
|
|
37
|
+
|
|
38
|
+
```typescript
|
|
39
|
+
// src/views/[域]/[模块]/[子模块]/[kebab-页面名]/data.ts
|
|
40
|
+
import type { XxxTemplateConfig } from "@/components/template/XxxTemplate/types";
|
|
41
|
+
|
|
42
|
+
export const [camelPageName]Config: XxxTemplateConfig = {
|
|
43
|
+
// 按 types.ts 的 interface 逐字段填写
|
|
44
|
+
// 所有 API path 格式:"/[服务缩写]/[资源名]/[操作]"
|
|
45
|
+
api: {
|
|
46
|
+
list: "/[svc]/[resource]/list",
|
|
47
|
+
// ... 其余 API 按 types.ts 定义
|
|
48
|
+
},
|
|
49
|
+
|
|
50
|
+
// 其他配置字段按 types.ts 补全
|
|
51
|
+
};
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
> **严格约束**:
|
|
55
|
+
> - ❌ 禁止在 data.ts 中写任何函数、class、ref、reactive
|
|
56
|
+
> - ❌ 禁止导入 `AbstractPageQueryHook` 或任何 hook 基类
|
|
57
|
+
> - ✅ 只有 import type + export const
|
|
58
|
+
|
|
59
|
+
### 步骤 3:生成 index.vue(3~5 行)
|
|
11
60
|
|
|
12
61
|
```vue
|
|
62
|
+
<!-- src/views/[域]/[模块]/[子模块]/[kebab-页面名]/index.vue -->
|
|
13
63
|
<template>
|
|
14
|
-
<
|
|
15
|
-
<XxxTemplate :config="xxxConfig" />
|
|
16
|
-
</div>
|
|
64
|
+
<XxxTemplate :config="[camelPageName]Config" />
|
|
17
65
|
</template>
|
|
18
66
|
|
|
19
67
|
<script setup lang="ts">
|
|
20
|
-
import
|
|
68
|
+
import XxxTemplate from "@/components/template/XxxTemplate/index.vue";
|
|
69
|
+
import { [camelPageName]Config } from "./data";
|
|
21
70
|
</script>
|
|
22
71
|
```
|
|
23
72
|
|
|
24
|
-
|
|
73
|
+
> ⚠️ 注意:模板组件自身已包含 `app-container app-page-container` 外层,
|
|
74
|
+
> index.vue **不要再套一层 div**,避免双层容器导致布局错位。
|
|
75
|
+
> 若不确定,读模板组件的 index.vue 确认其根元素结构。
|
|
76
|
+
|
|
77
|
+
### 步骤 4:生成 index.scss
|
|
78
|
+
|
|
79
|
+
通常为空文件或只有极少页面级样式覆盖:
|
|
80
|
+
|
|
81
|
+
```scss
|
|
82
|
+
// src/views/[域]/[模块]/[子模块]/[kebab-页面名]/index.scss
|
|
83
|
+
// 如无特殊覆盖样式,保留空文件即可
|
|
84
|
+
// 模板组件内部已处理所有通用样式
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### 步骤 5:pages.ts 注册(与其他模式相同)
|
|
88
|
+
|
|
89
|
+
```typescript
|
|
90
|
+
// router/pages.ts 追加
|
|
91
|
+
["[kebab-页面名]", "[页面中文名]"],
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
---
|
|
95
|
+
|
|
96
|
+
## 何时使用 TEMPLATE_DRIVEN(识别规则)
|
|
97
|
+
|
|
98
|
+
**必须同时满足以下两个条件**:
|
|
99
|
+
|
|
100
|
+
1. 项目 `src/components/template/` 目录下已存在可复用的 Template 组件
|
|
101
|
+
2. 当前页面与该模板的交互骨架**完全一致**(查询/操作/表格结构均与模板期望的 config 结构匹配)
|
|
102
|
+
|
|
103
|
+
**不确定时的决策**:
|
|
104
|
+
|
|
105
|
+
```
|
|
106
|
+
✅ 交互完全一致,template/types.ts 字段全部能对应 → 使用 TEMPLATE_DRIVEN
|
|
107
|
+
⚠️ 交互相似但有额外自定义逻辑 → 使用 LIST(更安全,不要强套模板)
|
|
108
|
+
❌ 项目无 Template 组件 → 不适用,直接用 LIST/DETAIL_TABS 等标准模板
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## 已知配置驱动模板一览(cx-ui-produce 项目特定)
|
|
114
|
+
|
|
115
|
+
> ⚠️ 以下是 cx-ui-produce 项目已有的 Template 组件,仅在该项目中适用。
|
|
116
|
+
> 其他项目需根据自己项目的 `src/components/template/` 目录确认。
|
|
117
|
+
|
|
118
|
+
### 1. ResultQueryTemplate(轧钢实绩查询类)
|
|
119
|
+
|
|
120
|
+
**适用范围**:`production-mmwr/sjtj/` 下的各工序实绩查询页(查询+表格+导出,无新增/编辑/删除)
|
|
121
|
+
|
|
122
|
+
**识别特征**:
|
|
123
|
+
- 原型中只有查询区 + 数据表格 + 导出按钮
|
|
124
|
+
- 无 CRUD 操作,纯查询
|
|
125
|
+
- 字段较多,表格列数 10+
|
|
126
|
+
|
|
127
|
+
**生成规则**:
|
|
128
|
+
|
|
129
|
+
```typescript
|
|
130
|
+
// data.ts — 只导出一个 config 对象
|
|
131
|
+
import type { ResultQueryConfig } from "@/components/template/ResultQueryTemplate/types";
|
|
132
|
+
import { BusLogicDataType } from "@/types/page";
|
|
133
|
+
|
|
134
|
+
export const [pageName]Config: ResultQueryConfig = {
|
|
135
|
+
api: {
|
|
136
|
+
list: "/[服务缩写]/[资源名]/list",
|
|
137
|
+
export: "/[服务缩写]/[资源名]/export" // 有导出时才加
|
|
138
|
+
},
|
|
139
|
+
queryItems: [
|
|
140
|
+
{ name: "[field]", label: "[中文名]", placeholder: "请输入" },
|
|
141
|
+
{
|
|
142
|
+
name: "[dateField]",
|
|
143
|
+
type: "range",
|
|
144
|
+
startName: "[startDate]",
|
|
145
|
+
endName: "[endDate]",
|
|
146
|
+
label: "[日期名]",
|
|
147
|
+
logicType: BusLogicDataType.date,
|
|
148
|
+
rangeSeparator: "至"
|
|
149
|
+
}
|
|
150
|
+
],
|
|
151
|
+
columns: [
|
|
152
|
+
{ label: "[列名]", name: "[fieldName]", minWidth: 120 }
|
|
153
|
+
]
|
|
154
|
+
};
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
```vue
|
|
158
|
+
<!-- index.vue -->
|
|
159
|
+
<template>
|
|
160
|
+
<ResultQueryTemplate :config="[pageName]Config" />
|
|
161
|
+
</template>
|
|
162
|
+
|
|
163
|
+
<script setup lang="ts">
|
|
164
|
+
import ResultQueryTemplate from "@/components/template/ResultQueryTemplate/index.vue";
|
|
165
|
+
import { [pageName]Config } from "./data";
|
|
166
|
+
</script>
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
---
|
|
170
|
+
|
|
171
|
+
### 2. FinishingAchievementTemplate(精整实绩类)
|
|
172
|
+
|
|
173
|
+
**适用范围**:`production-mmwr/jzsj/` 下的各精整工序实绩管理页(喷砂、倒棱、矫直、剥皮、检验、酸洗、包装)
|
|
174
|
+
|
|
175
|
+
**识别特征**:
|
|
176
|
+
- 原型标题含"实绩"二字且在精整工序列表中
|
|
177
|
+
- 有固定的查询区 + 实绩录入 + 汇总数据结构
|
|
178
|
+
- 字段结构高度统一(同一套模板 7 个页面共用)
|
|
179
|
+
|
|
180
|
+
**生成规则**:读 `src/components/template/FinishingAchievementTemplate/types.ts`,按 `FinishingAchievementConfig` interface 生成 config 对象。
|
|
181
|
+
|
|
182
|
+
---
|
|
183
|
+
|
|
184
|
+
### 3. ApplicationDeterminationTemplate(申请判定类)
|
|
185
|
+
|
|
186
|
+
**适用范围**:`production-mmwr/` 下的申请判定类页面(如 mmwr-application-determination-jz)
|
|
187
|
+
|
|
188
|
+
**识别特征**:原型中有"申请"列表 + "判定"操作的双状态工作流页面
|
|
189
|
+
|
|
190
|
+
---
|
|
191
|
+
|
|
192
|
+
### 4. SamplingCommissionTemplate(取样委托类)
|
|
193
|
+
|
|
194
|
+
**适用范围**:`production-mmwr/jhgl/` 下的取样委托管理页
|
|
195
|
+
|
|
196
|
+
**识别特征**:原型中有"委托单"列表 + 取样记录结构
|
|
197
|
+
|
|
198
|
+
---
|
|
199
|
+
|
|
200
|
+
## AI 操作规范
|
|
201
|
+
|
|
202
|
+
1. **识别阶段**:page-spec 前置检查时,若页面落入以上任一范围或项目有对应 Template 组件,将交互模式标记为 `TEMPLATE_DRIVEN` 并注明具体模板名
|
|
203
|
+
2. **生成阶段**:只生成 `data.ts`(config 对象)+ `index.vue`(3~5行)+ `index.scss`(空或极少样式)
|
|
204
|
+
3. **禁止行为**:
|
|
205
|
+
- ❌ 不得手写 `createPage()` + `AbstractPageQueryHook` 结构
|
|
206
|
+
- ❌ 不得添加独立的 `BaseQuery` / `BaseTable` / `jh-pagination`(模板内部已处理)
|
|
207
|
+
- ❌ 不得将其他业务场景的页面识别为 TEMPLATE_DRIVEN 并强套 config 格式
|
|
208
|
+
4. **不确定时**:使用 LIST 模板代替,更安全
|
|
209
|
+
|
|
25
210
|
|
|
26
211
|
---
|
|
27
212
|
|