@qilitt-mickey/vue3-temp-skill 1.1.11 → 1.1.13
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/README.md +22 -63
- package/SKILL.md +114 -273
- package/package.json +1 -1
- package/references/api-check.md +33 -313
- package/references/code-quality.md +63 -277
- package/references/core-kernel.md +76 -396
- package/references/crud-pages.md +252 -93
- package/references/data-writeback.md +2 -2
- package/references/design-handoff.md +92 -0
- package/references/design-system.md +70 -60
- package/references/detail-page.md +55 -72
- package/references/form-advanced.md +1 -2
- package/references/layout-theme.md +103 -180
- package/references/mobile-h5.md +11 -11
- package/references/project-inventory.md +9 -10
- package/references/table-vxe.md +7 -13
- package/references/tree-table.md +2 -2
- package/references/websocket-realtime.md +3 -3
package/README.md
CHANGED
|
@@ -1,19 +1,15 @@
|
|
|
1
1
|
# vue3-temp-skill
|
|
2
2
|
|
|
3
|
-
Vue 3 企业级中后台项目开发规范技能包 —
|
|
3
|
+
Vue 3 企业级中后台项目开发规范技能包 — 按团队规范生成代码并自动审查。
|
|
4
4
|
|
|
5
5
|
## 这是什么
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
`/vue3-temp-skill <需求>` → 命中模块 → 按约定生成 → `code-quality` 闸门。
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
- **Vite / 脚本 / 入口不单独成 Skill**（工程摘要在 core-kernel）
|
|
14
|
-
- **组件 / Hook 分核心与附加**，专项能力按需命中
|
|
15
|
-
- 按 `references/` 内完整示例编写；复用已有封装；选型表指定库勿擅自替换（新依赖须待确认）
|
|
16
|
-
- **addon 依赖**：`project-inventory` 第九节提供与模板 `package.json` 对齐的**精确版本** + `pnpm` 安装命令（含 Vite 插件 `-D`）；缺包须征得确认后再装
|
|
9
|
+
- **始终加载** `core-kernel`
|
|
10
|
+
- **按需** `project-inventory`（addon / 查 Re* / 装依赖）
|
|
11
|
+
- **生成后闸门** `code-quality`：清单 + `pnpm lint:fix` + `pnpm type-check` + 结果块
|
|
12
|
+
- 复用仓库已有封装；选型表指定库勿擅自替换；addon 精确版本见 inventory 第九节
|
|
17
13
|
|
|
18
14
|
## 使用方式
|
|
19
15
|
|
|
@@ -31,73 +27,36 @@ Vue 3 企业级中后台项目开发规范技能包 — 让 AI 按团队规范
|
|
|
31
27
|
|
|
32
28
|
## 模块一览
|
|
33
29
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
| 模块 | 覆盖 |
|
|
37
|
-
|------|------|
|
|
38
|
-
| core-kernel | 硬约束、壳、CRUD 积木、工程摘要 |
|
|
39
|
-
| project-inventory | 库精确版本 / 组件 / Hook / 选型对照 / **第九节安装表** |
|
|
40
|
-
|
|
41
|
-
### 生成后强制闸门
|
|
42
|
-
|
|
43
|
-
| 模块 | 覆盖 |
|
|
44
|
-
|------|------|
|
|
45
|
-
| code-quality | 清单自查 + `pnpm lint:fix` + `pnpm type-check` + 最终回复「代码质量审查」结果块 |
|
|
46
|
-
|
|
47
|
-
### 标准业务面
|
|
48
|
-
|
|
49
|
-
| 模块 | 覆盖 |
|
|
50
|
-
|------|------|
|
|
51
|
-
| http-api | 接口、加密、基础下载 |
|
|
52
|
-
| crud-pages | 列表/表单 CRUD（`onSearch`/`reset`） |
|
|
53
|
-
| detail-page / data-writeback | 详情跳转、回显 |
|
|
54
|
-
| permission-auth | 页面/按钮权限 |
|
|
55
|
-
| layout-theme | 布局主题、CSS 变量 |
|
|
56
|
-
| feedback-loading / base-code-dict / api-check | 反馈、字典、联调 |
|
|
57
|
-
| ui-components | 新封装 Re* |
|
|
58
|
-
|
|
59
|
-
### 专项能力
|
|
60
|
-
|
|
61
|
-
| 模块 | 覆盖 |
|
|
30
|
+
| 类型 | 模块 |
|
|
62
31
|
|------|------|
|
|
63
|
-
|
|
|
64
|
-
|
|
|
65
|
-
|
|
|
66
|
-
|
|
|
67
|
-
| verify-captcha
|
|
68
|
-
| particles | 粒子特效（tsParticles 登录/氛围背景） |
|
|
69
|
-
| data-compare / data-screen / directives-advanced | 对比、大屏、指令 |
|
|
32
|
+
| 始终 | core-kernel |
|
|
33
|
+
| 闸门 | code-quality |
|
|
34
|
+
| 按需资产 | project-inventory |
|
|
35
|
+
| 标准业务 | http-api、crud-pages、detail-page、data-writeback、permission-auth、layout-theme、design-system、design-handoff、icons、feedback-loading、base-code-dict、api-check、ui-components |
|
|
36
|
+
| 专项 | form-advanced、table-vxe、tree-table、chart-echarts、file-management、download-export、rich-text、graph-relation、workflow-bpmn、flowchart-g6、data-mapping、websocket-realtime、mobile-h5、wechat-js、verify-captcha、qrcode-barcode、feedback-ui、seamless-scroll、particles、data-compare、data-screen、directives-advanced |
|
|
70
37
|
|
|
71
38
|
## 安装
|
|
72
39
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
- Node.js >= 22.12.0
|
|
76
|
-
|
|
77
|
-
### 安装到 AI 工具
|
|
40
|
+
Node.js >= 22.12.0
|
|
78
41
|
|
|
79
42
|
```bash
|
|
80
43
|
npx @qilitt-mickey/vue3-temp-skill@latest install all
|
|
81
|
-
# 或指定：cursor / claude / universal / ...
|
|
82
44
|
```
|
|
83
45
|
|
|
84
|
-
| 目标 |
|
|
85
|
-
|
|
46
|
+
| 目标 | 路径示例 |
|
|
47
|
+
|------|----------|
|
|
86
48
|
| cursor | `~/.cursor/skills/vue3-temp-skill/` |
|
|
87
49
|
| claude | `~/.claude/skills/vue3-temp-skill/` |
|
|
88
50
|
| universal | `~/.agents/skills/vue3-temp-skill/` |
|
|
89
51
|
|
|
90
|
-
更多目标与 `--project` 见包内历史说明或 `bin/cli.js`。
|
|
91
|
-
|
|
92
52
|
## 生成工作流（AI）
|
|
93
53
|
|
|
94
|
-
1. 解析需求 →
|
|
95
|
-
2. 读 core-kernel + inventory
|
|
96
|
-
3.
|
|
97
|
-
4.
|
|
98
|
-
5.
|
|
99
|
-
6. **强制闸门 code-quality**：重读清单 → 自查刚改文件 → `pnpm lint:fix` + `pnpm type-check` → 修正 → 最终回复输出「代码质量审查」结果块（缺块 / 缺 lint:fix = 未完成）
|
|
54
|
+
1. 解析需求 → 命中功能模块
|
|
55
|
+
2. 读 `core-kernel` + 命中模块；addon 时加读 inventory；设计交接块时加读 `design-handoff`
|
|
56
|
+
3. 缺包按 inventory 第九节精确版本，确认后安装
|
|
57
|
+
4. 复用仓库 Re*/Hook/utils；按模块示例生成落盘
|
|
58
|
+
5. 执行 `code-quality` → 输出审查结果块 + 变更说明
|
|
100
59
|
|
|
101
|
-
##
|
|
60
|
+
## 与模版的关系
|
|
102
61
|
|
|
103
|
-
|
|
62
|
+
本 Skill 约定对齐 **vue3-web-temp** 脚手架；使用者在各自业务仓库中开发，不绑定某一固定本机目录。壳层以当前项目源码为准，规范以本包 `references/` 为准。
|
package/SKILL.md
CHANGED
|
@@ -7,299 +7,140 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
|
|
|
7
7
|
|
|
8
8
|
# Vue 3 项目开发规范技能包
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
> 1. 分析需求，按下方**模块路由表**命中功能模块（可多模块）
|
|
12
|
-
> 2. **始终加载** `core-kernel` + `project-inventory`（生成前必读）
|
|
13
|
-
> 3. 加载命中的功能模块详细规范（`references/`）
|
|
14
|
-
> 4. **以本 Skill 内示例为准编写代码**（复用已有封装；选型表指定的库勿擅自替换）
|
|
15
|
-
> 5. **生成完成后强制执行 `code-quality` 闸门**（见工作流第 6 步）：重读清单 → 对照刚改文件自查 → 必跑 `pnpm lint:fix` + `pnpm type-check` → 不通过就地修正 → 最终回复必须含「代码质量审查」结果块
|
|
16
|
-
> ⚠️ 仅在「命中模块」里写出 `code-quality` **不算**执行审查；没有审查结果块 = 任务未完成；只跑 type-check 未跑 lint:fix 也不算完成
|
|
10
|
+
执行顺序：命中模块 → 读 `core-kernel` → 读命中 `references/<模块>.md` → 生成 → 执行 `code-quality` → 回复含审查结果块。
|
|
17
11
|
|
|
18
|
-
|
|
12
|
+
## 模版约定
|
|
13
|
+
|
|
14
|
+
- 面向由 **vue3-web-temp** 脚手架搭出的业务项目（目录名/安装路径因人而异，以当前工作区为准）
|
|
15
|
+
- 业务写法以本包 `references/` 为准；壳层行为（顶部 tag / 侧栏 / keep-alive / `useDetail`）以**当前项目**已有实现为准
|
|
19
16
|
|
|
20
17
|
## 使用方式
|
|
21
18
|
|
|
22
19
|
```
|
|
23
|
-
/vue3-temp-skill
|
|
20
|
+
/vue3-temp-skill <自然语言需求>
|
|
24
21
|
```
|
|
25
22
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
##
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
|
58
|
-
|
|
59
|
-
| **
|
|
60
|
-
| **
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
|
65
|
-
|
|
66
|
-
| **
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
|
73
|
-
|
|
74
|
-
| **
|
|
75
|
-
| **
|
|
76
|
-
| **
|
|
77
|
-
| **
|
|
78
|
-
| **
|
|
79
|
-
| **
|
|
80
|
-
| **
|
|
81
|
-
| **
|
|
82
|
-
| **
|
|
83
|
-
| **
|
|
84
|
-
| **
|
|
85
|
-
| **
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
|
90
|
-
|
|
91
|
-
| **
|
|
92
|
-
| **
|
|
93
|
-
| **
|
|
94
|
-
| **data-compare** | 变更对比 | v-compare、变更汇总、compareStore |
|
|
95
|
-
| **file-management** | 附件 + 预览 | 附件、ReAttachment、ReFileViewer、预览 |
|
|
96
|
-
| **download-export** | 导出 blob | 导出、excel、blob、下载 |
|
|
97
|
-
| **rich-text** | 富文本 | 富文本、wangeditor、ReRichText |
|
|
98
|
-
| **chart-echarts** | 图表 | echarts、图表、ReEchart、词云 |
|
|
99
|
-
| **data-screen** | 数据大屏 | 大屏、dataScreen、scale |
|
|
100
|
-
| **graph-relation** | 关系图谱 | 图谱、relation-graph |
|
|
101
|
-
| **workflow-bpmn** | BPMN | bpmn、流程审批 |
|
|
102
|
-
| **flowchart-g6** | G6 流程图 | g6、流程图 |
|
|
103
|
-
| **data-mapping** | JsPlumb 映射 | jsplumb、字段映射 |
|
|
104
|
-
| **websocket-realtime** | WebSocket | websocket、ws、实时 |
|
|
105
|
-
| **mobile-h5** | 移动端 Vant | 移动端、H5、vant、vconsole |
|
|
106
|
-
| **wechat-js** | 微信 JS-SDK | 微信、weixin、wechat |
|
|
107
|
-
| **verify-captcha** | 验证码族 | 验证码、滑块、短信、sms |
|
|
108
|
-
| **qrcode-barcode** | 二维码/条形码 | 二维码、条形码、qrcode、barcode |
|
|
109
|
-
| **feedback-ui** | 通知栏/水印/时间轴等 | 通知栏、水印、时间轴、打字机 |
|
|
110
|
-
| **seamless-scroll** | 无缝滚动 | 无缝滚动、跑马灯 |
|
|
111
|
-
| **particles** | 粒子特效（登录/氛围背景） | 粒子、粒子特效、tsparticles、登录背景粒子、粒子动画、连线粒子 |
|
|
112
|
-
| **directives-advanced** | 文本一键复制、长标题字号随宽度变小等体验（用户说效果即可，无需知指令名） | 一键复制、点一下复制、不好抄、标题太长、显示不全、字号跟着变小、文字别截断、挤得下；内部映射 v-copy / v-auto-font |
|
|
23
|
+
## 项目优先
|
|
24
|
+
|
|
25
|
+
1. 先读 `references/core-kernel.md`
|
|
26
|
+
2. 复用仓库已有 `Re*` / Hook / utils；选型表指定库勿擅自替换
|
|
27
|
+
3. 按命中模块内完整示例编写
|
|
28
|
+
4. 无对应能力 → 标注「待确认」，未经同意不引入新依赖
|
|
29
|
+
5. 真相源：`仓库已有封装` > `本 Skill 示例` > 通用 Vue 习惯
|
|
30
|
+
6. 命中 addon / 缺依赖时再读 `project-inventory.md` 第九节；精确版本安装，禁止 `@latest`
|
|
31
|
+
|
|
32
|
+
## 模块路由表
|
|
33
|
+
|
|
34
|
+
### 始终加载
|
|
35
|
+
|
|
36
|
+
| 模块 | 文件 |
|
|
37
|
+
|------|------|
|
|
38
|
+
| **core-kernel** | `references/core-kernel.md` |
|
|
39
|
+
|
|
40
|
+
### 按需加载
|
|
41
|
+
|
|
42
|
+
| 时机 | 文件 |
|
|
43
|
+
|------|------|
|
|
44
|
+
| addon / 查 Re* 名 / 装依赖 | `references/project-inventory.md` |
|
|
45
|
+
| 写完代码后（闸门，非功能命中） | `references/code-quality.md` |
|
|
46
|
+
| 设计交接块 / 上游令牌产出落地 | `references/design-handoff.md`（+ `design-system`） |
|
|
47
|
+
|
|
48
|
+
### 标准业务面
|
|
49
|
+
|
|
50
|
+
| 模块 | 关键词 |
|
|
51
|
+
|------|--------|
|
|
52
|
+
| **http-api** | 接口、http、加密、API |
|
|
53
|
+
| **crud-pages** | 列表、表格、查询、管理、CRUD、新增编辑 |
|
|
54
|
+
| **detail-page** | 详情、编辑页、查看页、新开路由、toDetail、activePath、showLink、顶部 tag |
|
|
55
|
+
| **data-writeback** | 回显、回填、useFormCheck |
|
|
56
|
+
| **permission-auth** | 权限、v-auth、roles、ReAuth |
|
|
57
|
+
| **layout-theme** | 布局、主题、暗黑、`--vts-*`、UnoCSS |
|
|
58
|
+
| **design-system** | 设计规范、UI 规范、按 XX 规范适配、design-tokens、主题色系、设计交接块 |
|
|
59
|
+
| **icons** | 图标、svg-icon、Iconify、ReIconPicker、菜单图标 |
|
|
60
|
+
| **feedback-loading** | message、loading、确认框 |
|
|
61
|
+
| **base-code-dict** | 字典、baseCode、码表 |
|
|
62
|
+
| **api-check** | 联调、mock、契约、对接后端 |
|
|
63
|
+
| **ui-components** | Re组件、公共组件、type.ts |
|
|
64
|
+
|
|
65
|
+
### 专项能力包
|
|
66
|
+
|
|
67
|
+
| 模块 | 关键词 |
|
|
68
|
+
|------|--------|
|
|
69
|
+
| **tree-table** | 树表、ReTreeLine、handleTree |
|
|
70
|
+
| **table-vxe** | vxe、高性能表格 |
|
|
71
|
+
| **form-advanced** | 弹窗、ReDialog、ReDialogResize、锚点、卡片选择、地址解析、ReSelectQuery、级联 |
|
|
72
|
+
| **data-compare** | v-compare、变更汇总 |
|
|
73
|
+
| **file-management** | 附件、ReAttachment、ReFileViewer、预览、上传 |
|
|
74
|
+
| **download-export** | 导出、excel、blob、下载文件 |
|
|
75
|
+
| **rich-text** | 富文本、wangeditor、ReRichText |
|
|
76
|
+
| **chart-echarts** | echarts、图表、ReEchart |
|
|
77
|
+
| **data-screen** | 大屏、dataScreen |
|
|
78
|
+
| **graph-relation** | 图谱、relation-graph |
|
|
79
|
+
| **workflow-bpmn** | bpmn、流程审批 |
|
|
80
|
+
| **flowchart-g6** | g6、流程图 |
|
|
81
|
+
| **data-mapping** | jsplumb、字段映射 |
|
|
82
|
+
| **websocket-realtime** | websocket、ws、实时 |
|
|
83
|
+
| **mobile-h5** | 移动端、H5、vant、vconsole |
|
|
84
|
+
| **wechat-js** | 微信、weixin、wechat |
|
|
85
|
+
| **verify-captcha** | 验证码、滑块、短信 |
|
|
86
|
+
| **qrcode-barcode** | 二维码、条形码 |
|
|
87
|
+
| **feedback-ui** | 通知栏、水印、时间轴、打字机 |
|
|
88
|
+
| **seamless-scroll** | 无缝滚动、跑马灯 |
|
|
89
|
+
| **particles** | 粒子、tsparticles、登录背景粒子 |
|
|
90
|
+
| **directives-advanced** | 一键复制、标题太长字号变小 → `v-copy` / `v-auto-font` |
|
|
113
91
|
|
|
114
92
|
### 匹配规则
|
|
115
93
|
|
|
116
|
-
1.
|
|
117
|
-
2.
|
|
118
|
-
3. 兜底 →
|
|
119
|
-
4.
|
|
120
|
-
5.
|
|
121
|
-
-
|
|
122
|
-
-
|
|
123
|
-
-
|
|
124
|
-
-
|
|
125
|
-
-
|
|
126
|
-
-
|
|
127
|
-
-
|
|
128
|
-
-
|
|
129
|
-
-
|
|
130
|
-
-
|
|
131
|
-
6.
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
> addon 库精确版本与 `pnpm` 安装命令见 `references/project-inventory.md` 第九节。
|
|
153
|
-
|
|
154
|
-
```
|
|
155
|
-
src/
|
|
156
|
-
├── api/ components/ hooks/ store/ router/
|
|
157
|
-
├── utils/ styles/ views/ directives/ layout/ locales/
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
---
|
|
161
|
-
|
|
162
|
-
## 核心约定速查（生成时默记）
|
|
163
|
-
|
|
164
|
-
### HTTP
|
|
165
|
-
|
|
166
|
-
```typescript
|
|
167
|
-
import { http } from "@/utils/http";
|
|
168
|
-
|
|
169
|
-
export function getXxxListApi(data: XxxQuery) {
|
|
170
|
-
return http.request<Result<XxxPage>>(
|
|
171
|
-
"post",
|
|
172
|
-
`${import.meta.env.VITE_API_BASE_URL}/console/xxx/list`,
|
|
173
|
-
{ data },
|
|
174
|
-
);
|
|
175
|
-
}
|
|
176
|
-
```
|
|
177
|
-
|
|
178
|
-
- 方法以后端为准，**允许 GET / POST**；POST → `data`，GET → `params`。
|
|
179
|
-
- 真实地址用 `VITE_API_BASE_URL` 拼接；`/mock/...` 仅本地 Fake Server，**不是**前后端标准前缀；勿虚构统一 `/api`。
|
|
180
|
-
- `Result<T>` 为全局类型（`status` / `statusText` / `data`）；分页 `content` / `totalCount`。
|
|
181
|
-
- 字段驼峰；Java Long/BigDecimal → 前端 **`string`**。
|
|
182
|
-
- 加解密由 `VITE_ENCODE_SWITCH` 全局控制（无 `crypto: true`）。
|
|
183
|
-
|
|
184
|
-
### 列表页
|
|
185
|
-
|
|
186
|
-
```typescript
|
|
187
|
-
const { content, otherRef, pagination, loading, onSearch, reset, formRef, tableData, tableHeight, ... } =
|
|
188
|
-
useTableSearch(formQuery, getXxxListApi, `${import.meta.env.VITE_API_BASE_URL}/console/xxx/list`);
|
|
189
|
-
|
|
190
|
-
onSearch(); // 查询
|
|
191
|
-
reset(); // 重置（配合 formRef.resetFields）
|
|
192
|
-
```
|
|
193
|
-
|
|
194
|
-
- 方法名必须是 **`onSearch` / `reset`**，不是 handleSearch/handleReset。
|
|
195
|
-
- 配合 `ReGrid` / `ReGridItem` / `ReTableBar` / `RePagination` / `ReTableOperate`。
|
|
196
|
-
- **布局必须按 `core-kernel`「列表黄金样板」完整输出**（技能自包含，不依赖仓库 views 演示页）：
|
|
197
|
-
- `el-card ref="content"` + 固定 `height`（含 `headerHeight`），禁止只用 `minHeight` / `ref` 挂 `div`
|
|
198
|
-
- 查询区 `bg-bg_color p-5` + `ReGrid` `:gap="[0, 20]"` + 表单项 `w-[100%] !mr-0`；与 `ReTableBar` 展示区分开
|
|
199
|
-
- 表格绑 `tableHeight`；分页放在 `ReTableBar` 内，避免无数据时贴查询区
|
|
200
|
-
- 卡片内查询条件以外的模块（统计块/页签/提示条等）包一个根元素绑 `otherRef`，高度自动从 `tableHeight` 扣除，不绑则表格高度算错
|
|
201
|
-
|
|
202
|
-
### 路由
|
|
203
|
-
|
|
204
|
-
- 业务模块 **禁止** 再挂 `component: Layout`。
|
|
205
|
-
- 页面权限 `meta.roles`；按钮 `v-auth` / `ReAuth`。
|
|
206
|
-
|
|
207
|
-
### 组件 / i18n / 环境
|
|
208
|
-
|
|
209
|
-
- `<script setup lang="ts">` + `defineOptions({ name })`
|
|
210
|
-
- Re*：`type.ts` + 显式 import
|
|
211
|
-
- `$t('中文key')`；`import.meta.env.VITE_*`；禁止不可信 `v-html`
|
|
212
|
-
- **样式契约**：UnoCSS 连字符类名（`p-5`/`w-full`，禁 `p5`/`w100%`）+ 语义色变量（`bg-bg_color`，禁 `bg-[#fff] dark:bg-[#303030]`）+ 尺寸档位（查询/工具栏 `small`、表格 `:size="size"`、弹窗表单 default、整屏 `large`）；详见 `core-kernel`「四之二、样式契约」
|
|
213
|
-
|
|
214
|
-
---
|
|
215
|
-
|
|
216
|
-
## 代码生成工作流
|
|
217
|
-
|
|
218
|
-
### 1. 需求分析
|
|
219
|
-
|
|
220
|
-
提取字段、查询、交互；按路由表列出**功能**模块 ID（不含把 `code-quality` 当功能命中）。
|
|
221
|
-
|
|
222
|
-
### 2. 加载规范（生成前）
|
|
223
|
-
|
|
224
|
-
- 必读：`core-kernel.md`、`project-inventory.md`
|
|
225
|
-
- 加读：命中的功能模块 md
|
|
226
|
-
- 可顺带浏览 `code-quality.md` 约束，但**不能替代**第 6 步正式审查
|
|
227
|
-
|
|
228
|
-
### 3. 依赖与插件探查（命中 addon 时必做）
|
|
229
|
-
|
|
230
|
-
1. 打开业务项目 `package.json`，对照 `project-inventory` 第九节安装表。
|
|
231
|
-
2. 若缺失：列出精确版本安装命令（含 `-D` 的 Vite 插件）→ **等待用户确认** → 再执行 `pnpm add`。
|
|
232
|
-
3. 若涉及 FileViewer / vConsole / Vant / Mock：核对 `build/plugins/` 对应文件是否存在；模板已接线则勿改 Vite。
|
|
233
|
-
4. 完整模板已装齐时跳过本步，勿重复安装。
|
|
234
|
-
|
|
235
|
-
### 4. 项目探查
|
|
236
|
-
|
|
237
|
-
- 仓库若有对应 `Re*` / Hook / utils → 对齐仓库实现并复用。
|
|
238
|
-
- 按本 Skill 模块内完整示例编写；选型表已指定的库勿擅自替换。
|
|
239
|
-
|
|
240
|
-
### 5. 生成代码
|
|
241
|
-
|
|
242
|
-
完整可运行：类型、API、页面、路由片段（如需要）、样式约定。
|
|
243
|
-
**本步结束后不得直接结束对话**，必须进入第 6 步。
|
|
244
|
-
|
|
245
|
-
### 6. 自动质量审查闸门（强制 · 生成后）
|
|
246
|
-
|
|
247
|
-
> 目标：杜绝「命中了 code-quality 但没真正审查」的假完成。
|
|
248
|
-
|
|
249
|
-
按顺序执行（缺一不可）：
|
|
250
|
-
|
|
251
|
-
1. **重读** `references/code-quality.md`（生成后再读一次，不要只靠记忆）。
|
|
252
|
-
2. **对照刚写入/修改的文件**逐项过清单（尤其：选型、HTTP/`Result`、列表布局、权限、无多余 console）。
|
|
253
|
-
3. **跑命令**（在业务项目根目录，**两项均必跑**）：先 `pnpm lint:fix`（无则 `pnpm lint` / `pnpm exec eslint . --fix`），再 `pnpm type-check`（无则 `pnpm exec vue-tsc --noEmit`）。失败则修代码后重跑两条，直到全部通过或明确阻塞原因。禁止只跑 type-check 就收工。
|
|
254
|
-
4. **就地修正**：审查发现的问题必须改完再进入第 7 步；禁止带着已知规范 / lint 问题收工。
|
|
255
|
-
5. **写入最终回复的「代码质量审查」结果块**（格式见下）；无此块视为任务未完成。
|
|
256
|
-
|
|
257
|
-
#### 最终回复必含结构
|
|
94
|
+
1. 单模块 → 该模块 + `core-kernel`；结束后执行 `code-quality`
|
|
95
|
+
2. 多模块 → 同时加载（例：客户列表 = `crud-pages` + `permission-auth` + `http-api`）
|
|
96
|
+
3. 兜底 → 仅 `core-kernel`，询问是否专项
|
|
97
|
+
4. 默认不改 `vite.config.ts` / `build/**`
|
|
98
|
+
5. 效果匹配：
|
|
99
|
+
- 弹窗 → `form-advanced`
|
|
100
|
+
- 点一下复制 → `directives-advanced`（`v-copy`）
|
|
101
|
+
- 标题字跟着宽度变小 → `directives-advanced`（`v-auto-font`）
|
|
102
|
+
- 角色可见 → `permission-auth`
|
|
103
|
+
- 变更汇总 → `data-compare`
|
|
104
|
+
- 导出 Excel → `download-export`
|
|
105
|
+
- 菜单/本地图标 → `icons`
|
|
106
|
+
- 粒子背景 → `particles`
|
|
107
|
+
- 按 XX / UI 规范适配、设计交接块、整站风格重构 → `design-system` + `layout-theme`；有令牌/交接产出时加读 `design-handoff.md`
|
|
108
|
+
- 列表→独立详情/编辑页 → `crud-pages` + `detail-page`
|
|
109
|
+
6. 独立详情路由：跳转与 meta 见 `detail-page`（`toDetail` / `showLink` / `activePath` / `initToDetail`）
|
|
110
|
+
|
|
111
|
+
## 默记（细则见对应模块）
|
|
112
|
+
|
|
113
|
+
- HTTP：`import { http } from '@/utils/http'`；方法跟后端（允许 GET/POST）；`Result<T>`；`VITE_API_BASE_URL` → `http-api`
|
|
114
|
+
- 列表：`onSearch` / `reset` + 黄金样板 → `crud-pages`
|
|
115
|
+
- 独立详情：`toDetail` + 路由 meta → `detail-page`
|
|
116
|
+
- 不二次挂 Layout；`script setup` + `defineOptions({ name })`；`$t('中文')`；样式契约 → `core-kernel`
|
|
117
|
+
|
|
118
|
+
## 工作流
|
|
119
|
+
|
|
120
|
+
1. **需求分析**：列出功能模块 ID（不含 `code-quality`）
|
|
121
|
+
2. **加载**：`core-kernel` + 命中模块；addon 时加读 `project-inventory`；设计规范/交接产出时加读 `design-handoff` 并执行 design-system Step 0（与业务的先后按需求）
|
|
122
|
+
3. **依赖**：缺包按 inventory 第九节精确版本，确认后再装
|
|
123
|
+
4. **探查**：复用仓库 `Re*` / Hook / utils
|
|
124
|
+
5. **生成**：可运行代码落盘
|
|
125
|
+
6. **code-quality**：按 `references/code-quality.md` 执行（重读清单 → 对照改动 → `pnpm lint:fix` + `pnpm type-check` → 修正 → 结果块）
|
|
126
|
+
7. **输出**：变更说明 + 待确认项
|
|
127
|
+
|
|
128
|
+
### 最终回复结构
|
|
258
129
|
|
|
259
130
|
```markdown
|
|
260
131
|
## 命中模块
|
|
261
|
-
-
|
|
132
|
+
- <功能模块…>
|
|
262
133
|
|
|
263
134
|
## 代码质量审查
|
|
264
135
|
- 闸门：已执行 code-quality（生成后）
|
|
265
|
-
- 清单：选型 / 类型 / 组件 / API / 安全 / 业务 / 列表布局(如适用) / 风格 → 通过 | 已修正：…
|
|
266
|
-
- 命令：`pnpm lint:fix` →
|
|
136
|
+
- 清单：选型 / 类型 / 组件 / API / 安全 / 业务 / 列表→详情(如适用) / 列表布局(如适用) / 风格 → 通过 | 已修正：…
|
|
137
|
+
- 命令：`pnpm lint:fix` → …；`pnpm type-check` → …
|
|
267
138
|
- 待确认：…
|
|
268
139
|
|
|
269
140
|
## 变更说明
|
|
270
141
|
- …
|
|
271
142
|
```
|
|
272
143
|
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
在完成第 6 步结果块之后，再说明变更与待确认项（接口路径、字段类型、是否允许新依赖 / 是否已安装 addon）。
|
|
276
|
-
|
|
277
|
-
---
|
|
278
|
-
|
|
279
|
-
## 审查清单（摘要）
|
|
280
|
-
|
|
281
|
-
**0. 选型合规**
|
|
282
|
-
- [ ] 已读 core-kernel / project-inventory
|
|
283
|
-
- [ ] 复用已有 Re* / Hook / utils；未另起同能力实现
|
|
284
|
-
- [ ] 选型表指定库未擅自替换；新依赖已标注待确认
|
|
285
|
-
- [ ] addon 缺失时已按精确版本安装（或已征得确认）；未使用 `@latest` / 无版本号安装
|
|
286
|
-
- [ ] 使用 Skill 内示例约定的写法，而非自创方案
|
|
287
|
-
|
|
288
|
-
**1. 类型** — 避免无必要 `any`；Props/Emits/`Result<T>` 齐全
|
|
289
|
-
**2. 组件** — script setup、defineOptions、type.ts、`re-*` class
|
|
290
|
-
**3. API** — `@/utils/http`；方法跟后端（允许 GET/POST）；封装在 `src/api/`；`VITE_API_BASE_URL`；无虚构 `/api` / 无 `crypto: true`
|
|
291
|
-
**4. 安全** — 无危险 v-html；无硬编码密钥
|
|
292
|
-
**5. 业务** — `onSearch`/`reset`；提交 loading；权限；未二次 Layout
|
|
293
|
-
**5b. 列表布局** — `el-card`+`content`+固定 height；查询/展示分区；`tableHeight`；分页在 ReTableBar 内；查询条件外的模块绑 `otherRef`
|
|
294
|
-
**5c. 设计规范遵从（命中 design-system 时必查）** — 已输出识别回执且三点一致；令牌层（唯一新增）已建立、几何重写并入 element-plus.scss、文件名未漂移；第四节硬编码冲突清单逐条处理并回填；公共区域（侧栏/导航/壳变量）已适配；存量裸值扫描已执行；业务代码无裸控件高度/内边距/字号；验证清单全过
|
|
295
|
-
**5d. 样式契约（每次生成必查）** — UnoCSS 连字符形态（`p-5`/`w-full`；无 `p5`/`w100%`）；颜色语义变量（无 `bg-[#fff] dark:bg-[#303030]`）；组件尺寸档位（查询/工具栏 `small`、表格 `:size="size"`、弹窗表单 default、整屏 `large`）；间距 4px 基数；细则见 `core-kernel`「四之二」
|
|
296
|
-
**6. 风格** — 无多余 console；`$t('中文')`；`--vts-*` / UnoCSS；图标走 `svg-icon` / `icons` 约定
|
|
297
|
-
|
|
298
|
-
完整项见 `references/code-quality.md`。
|
|
299
|
-
|
|
300
|
-
---
|
|
301
|
-
|
|
302
|
-
## 各模块文件索引
|
|
144
|
+
## 文件索引
|
|
303
145
|
|
|
304
|
-
|
|
305
|
-
依赖安装命令统一以 `project-inventory.md` 第九节为准；各功能模块文首「依赖」节为摘要。
|
|
146
|
+
`references/<模块名>.md` 与路由表 ID 一一对应。依赖安装见 `project-inventory.md` 第九节。
|