@qilitt-mickey/vue3-temp-skill 1.1.28 → 1.1.30
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 +8 -7
- package/SKILL.md +53 -16
- package/package.json +1 -1
- package/references/code-quality.md +53 -2
- package/references/core-kernel.md +2 -12
- package/references/design-handoff.md +795 -377
- package/references/design-system.md +1 -1
- package/references/design-verify.md +314 -0
- package/references/layout-theme.md +1 -1
- package/scripts/analyze-deps.mjs +1 -1
- package/scripts/generate-index.mjs +2 -2
- package/scripts/modules.json +11 -1
- package/scripts/validate.mjs +3 -3
|
@@ -1,377 +1,795 @@
|
|
|
1
|
-
---
|
|
2
|
-
skill: design-handoff
|
|
3
|
-
description: 收到 design-handoff/v1 JSON 后，按逐文件修改清单执行。配置→令牌→框架组件→样式→页面代码，5 步 51 项。
|
|
4
|
-
scope: project
|
|
5
|
-
tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist]
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# 设计落地修改清单
|
|
9
|
-
|
|
10
|
-
> 收到 `design-handoff/v1` JSON 后，AI 按本清单逐项执行修改。
|
|
11
|
-
> 每一项标注：JSON 来源 → 项目文件 → 修改内容 → 验证点。
|
|
12
|
-
> 模板源码保持出厂状态，所有修改在 AI 生成/修改代码时完成。
|
|
13
|
-
>
|
|
14
|
-
> 1:1 还原要求见下方 F1-F27（框架组件）和 P1-P7（页面代码）步骤。
|
|
15
|
-
|
|
16
|
-
##
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
|
103
|
-
|
|
104
|
-
|
|
|
105
|
-
|
|
|
106
|
-
|
|
|
107
|
-
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
|
124
|
-
|
|
125
|
-
|
|
|
126
|
-
|
|
|
127
|
-
|
|
|
128
|
-
|
|
|
129
|
-
|
|
|
130
|
-
|
|
|
131
|
-
|
|
|
132
|
-
|
|
|
133
|
-
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
|
154
|
-
|
|
|
155
|
-
|
|
|
156
|
-
|
|
|
157
|
-
|
|
|
158
|
-
|
|
|
159
|
-
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
###
|
|
177
|
-
|
|
178
|
-
|
|
|
179
|
-
|
|
180
|
-
|
|
|
181
|
-
|
|
|
182
|
-
|
|
|
183
|
-
|
|
|
184
|
-
|
|
|
185
|
-
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
|
193
|
-
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
>
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
|
247
|
-
|
|
248
|
-
|
|
|
249
|
-
|
|
|
250
|
-
|
|
|
251
|
-
|
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
|
256
|
-
|
|
257
|
-
|
|
|
258
|
-
|
|
|
259
|
-
|
|
|
260
|
-
|
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
|
274
|
-
|
|
275
|
-
|
|
|
276
|
-
|
|
|
277
|
-
|
|
|
278
|
-
|
|
|
279
|
-
|
|
280
|
-
###
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
3.
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
1.
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
|
312
|
-
|
|
313
|
-
|
|
|
314
|
-
|
|
|
315
|
-
|
|
|
316
|
-
|
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
|
321
|
-
|
|
322
|
-
|
|
|
323
|
-
|
|
|
324
|
-
|
|
|
325
|
-
|
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
###
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
1
|
+
---
|
|
2
|
+
skill: design-handoff
|
|
3
|
+
description: 收到 design-handoff/v1 JSON 后，按逐文件修改清单执行。配置→令牌→框架组件→样式→页面代码，5 步 51 项。
|
|
4
|
+
scope: project
|
|
5
|
+
tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist]
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# 设计落地修改清单
|
|
9
|
+
|
|
10
|
+
> 收到 `design-handoff/v1` JSON 后，AI 按本清单逐项执行修改。
|
|
11
|
+
> 每一项标注：JSON 来源 → 项目文件 → 修改内容 → 验证点。
|
|
12
|
+
> 模板源码保持出厂状态，所有修改在 AI 生成/修改代码时完成。
|
|
13
|
+
>
|
|
14
|
+
> 1:1 还原要求见下方 F1-F27（框架组件）和 P1-P7（页面代码）步骤。
|
|
15
|
+
|
|
16
|
+
## 设计产出落盘范围
|
|
17
|
+
|
|
18
|
+
> 硬约束：设计修改只落在业务代码中，违反即硬失败。
|
|
19
|
+
|
|
20
|
+
- ✅ 设计产出的 HTML 仅在对话中展示，作为参考对照，**不写入项目文件**
|
|
21
|
+
- ✅ 设计规范直接读取**设计技能**的 `references/` 文件，不另存到项目
|
|
22
|
+
- ✅ 所有修改只动 `src/`、`public/`、`platform-config.json` 等业务代码
|
|
23
|
+
- ❌ 不得把设计 HTML / 规范文档写入项目内非业务目录
|
|
24
|
+
|
|
25
|
+
## 双轨
|
|
26
|
+
|
|
27
|
+
| 场景 | 行为 |
|
|
28
|
+
|------|------|
|
|
29
|
+
| **未调用设计 / 无 handoff** | 保持模板出厂（主色 `#409EFF`、`Theme: light`=白侧栏、`ShowModel: chrome`、margin 8） |
|
|
30
|
+
| **有 design-handoff/v1 JSON** | 按本清单 5 步 51 项逐项执行；只改主色不改 Theme/Version = **落地失败** |
|
|
31
|
+
|
|
32
|
+
## 两种调用场景
|
|
33
|
+
|
|
34
|
+
> 以下「设计技能」泛指任何能输出 `design-handoff/v1` JSON 的设计类技能，不限定具体技能名称。
|
|
35
|
+
|
|
36
|
+
| 场景 | 触发时机 | 执行范围 | 关键规则 |
|
|
37
|
+
|------|---------|---------|---------|
|
|
38
|
+
| **先开发 → 后调设计** | 业务页面已用 vue3-temp-skill 开发完成，用户不满意效果，调设计技能输出 handoff JSON | C/T/F/S/P **全 5 步** | 页面组件保留业务逻辑（API/路由/状态/事件），**重写 `<template>` 和样式**，使页面结构与设计输出一致 |
|
|
39
|
+
| **先设计 → 后开发** | 新项目先调设计技能输出 handoff JSON，再调 vue3-temp-skill | 先执行 C/T/F/S（配置/令牌/框架/样式），后续业务开发时 P 步骤随页面生成同步落地 | 后续每个新页面开发都须遵循已落地设计规范，不以出厂样板覆盖设计输出 |
|
|
40
|
+
|
|
41
|
+
**两种场景均须执行完整 C/T/F/Co/S/P 流程，不可跳步。**
|
|
42
|
+
|
|
43
|
+
### 项目级模式 vs 单页模式
|
|
44
|
+
|
|
45
|
+
通过 `meta.transformScope` 字段识别改造范围：
|
|
46
|
+
|
|
47
|
+
| 模式 | transformScope 值 | 执行逻辑 |
|
|
48
|
+
|------|-------------------|---------|
|
|
49
|
+
| **单页模式**（默认） | `"single-page"` 或未设置 | 仅处理当前页面，C/T/F/Co/S 若已落地则跳过 |
|
|
50
|
+
| **项目级模式** | `"project"` | 全局执行 C/T/F/Co/S（一次），然后遍历所有路由页面逐一改造 |
|
|
51
|
+
|
|
52
|
+
**项目级模式执行要点**：
|
|
53
|
+
1. **Step 0 — 页面清单初始化**：扫描 `src/router/modules/` 所有路由文件，按页面类型（list/form/detail/dashboard 等）分组，构建待改造页面清单
|
|
54
|
+
2. **Step 1-5 — 全局层落地**：C/T/F/Co/S 五步是项目全局的，只执行一次（配置/令牌/框架/共享组件/样式）
|
|
55
|
+
3. **Step 6 — 全页面遍历**：按页面清单逐页执行 P1-P7，每页标记完成状态
|
|
56
|
+
4. **断点续改**：单次对话未完成全部页面时，记录已完成页面，用户说「继续」时从下一个 pending 页面开始
|
|
57
|
+
5. **完成性校验**：全部页面完成后，执行项目级完成性校验（见第九章末）
|
|
58
|
+
|
|
59
|
+
> ⚠️ 项目级模式下，**禁止在未完成全部页面前声称任务完成**。必须明确告知：已完成 X/Y 页面，剩余 Z 页面待改造，说「继续」即可继续。
|
|
60
|
+
|
|
61
|
+
## 设计为准原则
|
|
62
|
+
|
|
63
|
+
> 设计输出是页面结构和功能元素的**唯一视觉基准**，不是仅调整配色。
|
|
64
|
+
|
|
65
|
+
1. **设计输出中未体现的元素 → 隐藏或移除**（如模板有设置按钮但设计中没有 → 去掉）
|
|
66
|
+
2. **设计输出中有但模板没有的元素 → 新增**（如设计有页面标题区但模板没有 → 补上）
|
|
67
|
+
3. **设计输出覆盖的区域 → 严格按设计结构重写**，布局/元素/交互以设计为准
|
|
68
|
+
4. **设计输出未覆盖的区域 → 保持项目已有实现**，仅同步令牌（色彩/字体/圆角等）
|
|
69
|
+
5. **隐藏/移除功能性元素时**：在回复中明确列出被移除的元素，供用户确认是否需要补回
|
|
70
|
+
|
|
71
|
+
## 触发（自动，无需用户提及 JSON）
|
|
72
|
+
|
|
73
|
+
> 设计技能每次产出时**始终自动附加 `design-handoff/v1` JSON**。
|
|
74
|
+
> 本技能检测到 JSON 存在 → 自动触发完整 C/T/F/S/P 流程，用户无需提及「JSON」「handoff」「桥接」等技术词。
|
|
75
|
+
|
|
76
|
+
**触发条件**（满足任一）：
|
|
77
|
+
|
|
78
|
+
1. 会话中存在 `design-handoff/v1` JSON（设计技能自动产出）
|
|
79
|
+
2. 会话中存在设计技能的 HTML 产出 + 用户要求按设计结果适配工程代码
|
|
80
|
+
|
|
81
|
+
⚠️ 触发后 **必须执行完整 C/T/F/S/P 五步**，禁止只改主色或只改令牌。
|
|
82
|
+
|
|
83
|
+
## 规范识别回执（动手前必出）
|
|
84
|
+
|
|
85
|
+
```markdown
|
|
86
|
+
## 规范识别回执
|
|
87
|
+
- 来源形态：design-handoff/v1 JSON
|
|
88
|
+
- 主题：{themeName} / {themeId} / 主色 {brandPrimary}
|
|
89
|
+
- ShowModel：{shell.showModel}
|
|
90
|
+
- 几何：header {n} / tabs {n} / margin {n}
|
|
91
|
+
- 主色阶：完整 10 级
|
|
92
|
+
- 侧栏：{shell.sidebar}
|
|
93
|
+
- 结构要求：{structureRequirements.frameworkShell.header.length} 项
|
|
94
|
+
- 交互要求：{Object.keys(interactionSpecs).length} 类
|
|
95
|
+
- 将改文件：platform-config.json / design-tokens.scss / navbar / sidebar / tabs / app-main / element-plus.scss / dark.scss / 业务页面
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## 一、配置文件修改（C1-C8）
|
|
101
|
+
|
|
102
|
+
| # | JSON 来源 | 项目文件 | 修改内容 | 验证 |
|
|
103
|
+
|---|---------|---------|---------|------|
|
|
104
|
+
| C1 | `shell.sidebar` | `platform-config.json` → `Theme` | `dark-gradient` → `default`（深色侧栏）；仅明确要白菜单时 `light` | 侧栏背景为深色 |
|
|
105
|
+
| C2 | `shell.showModel` | `platform-config.json` → `ShowModel` | 设为 JSON 值（`line`/`card`/`chrome`/`smart`） | 页签风格与设计一致 |
|
|
106
|
+
| C3 | `shell.darkMode` | `platform-config.json` → `DarkMode` | `true`/`false` | 暗色模式开关 |
|
|
107
|
+
| C4 | `shell.contentMode` | `platform-config.json` → `OverallStyle` | `vertical`/`horizontal`/`mix` | 布局模式 |
|
|
108
|
+
| C5 | `shell.contentMargin` | `platform-config.json` → `contentMargin` | 按 JSON 值 | 内容区间距 |
|
|
109
|
+
| C6 | `tokens.brandPrimary` + `tokens.primaryScale` | `platform-config.json` → `EpThemeColor` + `PrimaryScale` | HEX 值 + 10 级色阶数组 | 主色全局生效；运行时优先用 PrimaryScale 精确色阶，不再走 chroma 计算 |
|
|
110
|
+
| C7 | `shell.dataTheme` | `platform-config.json` → `dataTheme` | 按 JSON 值 | 侧栏主题色 |
|
|
111
|
+
| C8 | — | `platform-config.json` → `Version` | **必须自增** | 否则 localStorage 缓存不刷新 |
|
|
112
|
+
|
|
113
|
+
**禁止**：把设计「浅色内容」写成 `Theme=light`。`contentMode=light` 与 `Theme=light` 不是一回事。深色侧栏 = `Theme=default`。
|
|
114
|
+
|
|
115
|
+
---
|
|
116
|
+
|
|
117
|
+
## 二、令牌文件修改（T1-T12）
|
|
118
|
+
|
|
119
|
+
写入 `src/styles/design-tokens.scss`，只改值，不改结构。
|
|
120
|
+
|
|
121
|
+
| # | JSON 段 | 令牌段 | 修改内容 | 验证 |
|
|
122
|
+
|---|---------|--------|---------|------|
|
|
123
|
+
| T1 | `tokens` | 颜色段 | `--brand-primary` / `--primary-0..9` / `--success-color` / `--warning-color` / `--error-color` / `--layout-bg` / `--component-bg` | 值与 JSON 一致；`primaryScale[5] === brandPrimary` |
|
|
124
|
+
| T2 | `typography` | 字体段 | `--font-family` / `--font-size-*` / `--font-weight-*` / `--line-height-*` | 值与 JSON 一致 |
|
|
125
|
+
| T3 | `spacing` | 间距段 | `--spacing-base` / `--spacing-xs..2xl` | 值与 JSON 一致 |
|
|
126
|
+
| T4 | `radius` | 圆角段 | `--radius-none..full` | 值与 JSON 一致 |
|
|
127
|
+
| T5 | `border` | 边框段 | `--border-width` / `--border-color` / `--border-color-light` / `--border-color-dark` / `--split-color` | 值与 JSON 一致 |
|
|
128
|
+
| T6 | `zIndex` | 层级段 | `--z-content` / `--z-header` / `--z-sider` / `--z-tabs` / `--z-dropdown` / `--z-modal` 等 | 值与 JSON 一致 |
|
|
129
|
+
| T7 | `responsive` | 响应式段 | `--breakpoint-xs..2xl` | 值与 JSON 一致 |
|
|
130
|
+
| T8 | `visual` | 视觉段 | `--shadow-card-rest` / `--shadow-card-hover` / `--shadow-button-hover` / `--shadow-input-focus` / `--shadow-dialog` / `--transition-base` / `--transform-button-hover` / `--table-header-border-bottom` / `--menu-active-border-right` | 值与 JSON 一致 |
|
|
131
|
+
| T9 | `layout` | 构图段 | `--page-header-margin` / `--filter-area-radius` / `--filter-area-padding-y/x` / `--action-bar-gap` / `--table-area-border-radius` / `--empty-state-padding` | 值与 JSON 一致 |
|
|
132
|
+
| T10 | `geometry` | 框架段 | `--header-height` / `--tabs-height` / `--sidebar-width` / `--sidebar-collapsed-width` / `--layout-content-padding` | 值与 JSON 一致 |
|
|
133
|
+
| T11 | `componentSize` | 控件段 | `--control-height-sm` / `--control-height` / `--control-height-lg` | 值与 JSON 一致 |
|
|
134
|
+
| T12 | `dataViz` | 可视化段 | `--chart-categorical-*` / `--chart-success` / `--chart-warning` 等 | 值与 JSON 一致 |
|
|
135
|
+
|
|
136
|
+
侧栏深色（`shell.sidebar === "dark-gradient"`）时追加写入 `design-tokens.scss` 的侧栏令牌段：
|
|
137
|
+
|
|
138
|
+
> 令牌变量名固定（`--sidebar-bg` / `--sidebar-logo-bg` / `--sidebar-menu-text` 等），**值来自 JSON `tokens` 或 `design-tokens.md` 侧栏令牌段**。
|
|
139
|
+
> 核心令牌：`--sidebar-bg`、`--sidebar-logo-bg`、`--sidebar-menu-text`、`--sidebar-menu-text-hover`、`--sidebar-menu-active-text`、`--sidebar-menu-hover-bg`、`--sidebar-menu-active-bg`（引用 `var(--primary-color)`）、`--sidebar-submenu-bg`、`--sidebar-active-indicator`（引用 `var(--primary-color)`）。
|
|
140
|
+
|
|
141
|
+
---
|
|
142
|
+
|
|
143
|
+
## 三、框架组件修改（F1-F27 · 1:1 还原核心）
|
|
144
|
+
|
|
145
|
+
> 此节实现 `structureRequirements` 和 `interactionSpecs` 的要求。
|
|
146
|
+
> 模板源码保持出厂，AI 获取 JSON 后逐项修改组件代码。
|
|
147
|
+
|
|
148
|
+
### 3.1 顶栏 navbar
|
|
149
|
+
|
|
150
|
+
| # | JSON 来源 | 项目文件 | 修改内容 | 验证 |
|
|
151
|
+
|---|---------|---------|---------|------|
|
|
152
|
+
| F1 | `structureRequirements.frameworkShell.header` | `src/layout/components/navbar/index.vue` | 顶栏组成：折叠按钮（左）+ 语言切换 + 功能图标组 + 分割线 + 欢迎区 + 头像（右）。**设计中未体现的元素必须移除**（设置/通知/全屏/搜索/面包屑等） | 元素与设计完全一致，不多不少 |
|
|
153
|
+
| F2 | `interactionSpecs.languageSwitch` | navbar/ 语言切换组件 | **改为内联文字**（中 / EN），竖线分隔。激活态品牌色文字，非激活次要色。**禁止下拉框** | 语言切换为内联文字 |
|
|
154
|
+
| F3 | `structureRequirements.frameworkShell.headerLayout` | navbar/index.vue | flex 两端对齐：左侧折叠按钮，右侧功能组 | 布局与设计一致 |
|
|
155
|
+
| F4 | `interactionSpecs.menuActive` → 头像区 | navbar/ 欢迎区 | 悬停态：头像微浮起 + 欢迎文字变品牌色 | hover 效果与设计一致 |
|
|
156
|
+
| F5 | `frameworkShell.header` 元素清单 | navbar/index.vue | **设置按钮**：设计无则 `display:none` 或删除组件引用 | 设置按钮不出现 |
|
|
157
|
+
| F6 | `frameworkShell.header` 元素清单 | navbar/index.vue | **通知/消息按钮**：设计无则隐藏 | 通知图标不出现 |
|
|
158
|
+
| F7 | `frameworkShell.header` 元素清单 | navbar/index.vue | **全屏按钮**：设计无则隐藏 | 全屏图标不出现 |
|
|
159
|
+
| F8 | `frameworkShell.header` 元素清单 | navbar/index.vue | **面包屑**：设计无则隐藏（统一框架默认无面包屑） | 顶栏无面包屑 |
|
|
160
|
+
| F9 | `frameworkShell.header` 元素清单 | navbar/index.vue | **搜索框**：设计无则隐藏（统一框架默认无搜索框） | 顶栏无搜索框 |
|
|
161
|
+
|
|
162
|
+
### 3.2 侧栏 sidebar
|
|
163
|
+
|
|
164
|
+
| # | JSON 来源 | 项目文件 | 修改内容 | 验证 |
|
|
165
|
+
|---|---------|---------|---------|------|
|
|
166
|
+
| F10 | `structureRequirements.frameworkShell.sidebar.logoArea` | `src/layout/components/sidebar/` | Logo 区：品牌色方块 + 白字首字（尺寸/圆角按 JSON 值），非默认彩色图标 | Logo 风格统一 |
|
|
167
|
+
| F11 | `structureRequirements.frameworkShell.sidebar.menuItemHeight` | sidebar/ + `element-plus.scss` | 菜单项高度按 JSON 值 | 间距有呼吸感 |
|
|
168
|
+
| F12 | `interactionSpecs.menuActive` | sidebar/ + `element-plus.scss` | **菜单激活态**：品牌色极浅底 + 右侧强调条 + 品牌色文字。**禁止纯蓝底白字** | 激活态视觉锚点清晰 |
|
|
169
|
+
| F13 | `structureRequirements.frameworkShell.sidebar.collapsed` | sidebar/ 折叠态 | 仅图标，宽度按 `geometry.siderCollapsedWidth` | 折叠宽度与设计一致 |
|
|
170
|
+
| F14 | `shell.sidebar` → 深色侧栏 | `theme.scss` / `sidebar.scss` | 侧栏背景色按 JSON/令牌库值（深色），非出厂白色 | 侧栏深色 |
|
|
171
|
+
| F15 | `frameworkShell.sidebar.collapseButtonPosition` | sidebar/ | **折叠按钮位置**：设计在顶部则放 Logo 区；设计在底部则放侧栏底部 | 折叠按钮位置与设计一致 |
|
|
172
|
+
| F16 | `frameworkShell.sidebar.bottomCollapse` | sidebar/ | **底部折叠按钮**：设计无则 **必须隐藏**（`display:none` 或删除底部触发器），折叠功能移至顶部 | 侧栏底部无折叠按钮 |
|
|
173
|
+
| F17 | `frameworkShell.sidebar.hoverCollapse` | sidebar/ | **菜单 hover 折叠功能**：设计无则 **必须禁用**（删除 `show-collapse-on-hover` 或等效逻辑） | 菜单 hover 不出现折叠提示 |
|
|
174
|
+
| F18 | `frameworkShell.sidebar.groupTitle` | sidebar/ | 菜单分组标题：设计无分组则移除分组标题 | 分组标题与设计一致 |
|
|
175
|
+
|
|
176
|
+
### 3.3 页签 tabs
|
|
177
|
+
|
|
178
|
+
| # | JSON 来源 | 项目文件 | 修改内容 | 验证 |
|
|
179
|
+
|---|---------|---------|---------|------|
|
|
180
|
+
| F19 | `shell.showModel` | `src/layout/components/tabs/` + `element-plus.scss` | 页签风格按设计值实现（line: 底部强调线；card: 卡片式；chrome: 谷歌式） | 风格与设计一致 |
|
|
181
|
+
| F20 | `structureRequirements.frameworkShell.tabs.homeTab` | tabs/ | 首页页签固定左侧，**不可关闭** | 首页页签行为正确 |
|
|
182
|
+
| F21 | `interactionSpecs.tabsActive` | `element-plus.scss` | 激活页签：品牌色文字 + 底部强调线（line 风格） | 激活态视觉与设计一致 |
|
|
183
|
+
| F22 | `interactionSpecs.tabsUnderline` | `element-plus.scss` | **页签下划线居中**：`line` 模式下激活下划线与文字等宽、严格居中，禁止偏左/偏右 | 横线视觉居中 |
|
|
184
|
+
| F23 | `frameworkShell.tabs.height` | tabs/ + `design-tokens.scss` | 页签高度严格按 `--tabs-height`，内部 flex 垂直居中 | 文字垂直居中 |
|
|
185
|
+
| F24 | `interactionSpecs.tabsClose` | `element-plus.scss` | 关闭按钮始终可见，hover 变色（按 JSON `interactionSpecs.tabsClose` 值） | 关闭按钮行为正确 |
|
|
186
|
+
| F25 | `frameworkShell.tabs.contextMenu` | tabs/ | 右键菜单：刷新/关闭/关闭其他/关闭左侧/关闭右侧/全部关闭 | 右键菜单项与设计一致 |
|
|
187
|
+
|
|
188
|
+
### 3.4 内容区 app-main
|
|
189
|
+
|
|
190
|
+
| # | JSON 来源 | 项目文件 | 修改内容 | 验证 |
|
|
191
|
+
|---|---------|---------|---------|------|
|
|
192
|
+
| F26 | `geometry.contentPadding` | `src/layout/components/app-main/` + `design-tokens.scss` | 内容区内边距按 JSON `geometry.contentPadding` 值，非出厂默认 | 间距有呼吸感 |
|
|
193
|
+
| F27 | `tokens.layoutBg` | app-main/ + `design-tokens.scss` | 内容区背景色按 JSON `tokens.layoutBg` 值 | 背景层次分明 |
|
|
194
|
+
|
|
195
|
+
---
|
|
196
|
+
|
|
197
|
+
## 三-B、共享组件级落地（Co1-Co12 · 一处修改全局生效）
|
|
198
|
+
|
|
199
|
+
> 设计 skill 的规范中定义了「表格工具栏」「操作列」等设计概念，但项目中的共享组件（Re* 系列）有自己的封装。
|
|
200
|
+
> 本章建立**设计概念 → 项目组件映射表**，AI 按此映射找到对应组件文件，逐一修改。
|
|
201
|
+
> 共享组件在 C/T/F 步骤之后、S 步骤之前统一修改（Co 步骤），**一处修改，全局生效**，不需要在每个页面重复处理。
|
|
202
|
+
|
|
203
|
+
### Co.0 设计概念 → 项目组件映射表
|
|
204
|
+
|
|
205
|
+
| 设计概念（设计 skill 中） | 设计规范来源 | 项目组件/文件 | 修改依据 |
|
|
206
|
+
|-------------------------|-------------|--------------|---------|
|
|
207
|
+
| 表格工具栏（刷新/密度/列设置） | list-page.md §4 工具栏 + §12 CSS 选择器 | `src/components/ReTableBar/src/bar.vue` | Co1-Co4 |
|
|
208
|
+
| 表格操作列（文字链接+分隔线+更多） | list-page.md §5 操作列 + component-spec.md §7 表格 | `src/components/ReTableOperate/src/index.vue` | Co5-Co7 |
|
|
209
|
+
| 分页组件 | list-page.md §7 分页 + component-spec.md §5 Pagination | `src/components/RePagination/` | Co8 |
|
|
210
|
+
| 顶栏导航栏（折叠按钮位置/设置按钮隐藏） | unified-framework.md §3 Header + §6 CSS 选择器 | `src/layout/components/lay-navbar/index.vue` | F1-F9（已在框架层覆盖，此处补充共享组件视角） |
|
|
211
|
+
| 侧栏菜单激活态 | unified-framework.md §2 Sider + color-library.md 主色 | `src/styles/sidebar.scss` | F10-F18（已在框架层覆盖） |
|
|
212
|
+
| 页签栏 line 模式激活态 | unified-framework.md §4 Tabs + component-spec.md §5 Tabs | `src/layout/components/lay-tag/index.vue` | F19-F25（已在框架层覆盖） |
|
|
213
|
+
| 内容区卡片（阴影/圆角/模块分割线） | list-page.md §2 卡片结构 + design-tokens.md 间距令牌 | `src/styles/element-plus.scss` + 页面 `.vts-*` 类 | S1（样式层） |
|
|
214
|
+
|
|
215
|
+
### Co.1 ReTableBar — 标题区改造
|
|
216
|
+
|
|
217
|
+
| 项 | 说明 |
|
|
218
|
+
|----|------|
|
|
219
|
+
| **文件** | `src/components/ReTableBar/src/bar.vue` |
|
|
220
|
+
| **设计规范** | 列表页的工具栏上方**没有「展示列表」等标题文字**（设计 spec 中标题区在卡片最上方，工具栏是独立区域） |
|
|
221
|
+
| **修改内容** | 1. `title` prop 的默认渲染改为「设计模式下不显示」（通过 CSS 类或 prop 控制）<br>2. 标题区域的 padding/margin 按设计 spec 调整（工具栏区域 padding: 20px 20px 8px） |
|
|
222
|
+
| **验证** | 设计模式下列表页工具栏上方无多余标题文字 |
|
|
223
|
+
|
|
224
|
+
> ⚠️ 注意：很多页面通过 `#title` slot 传入了「展示列表」+ 示例按钮（如「左侧按钮可以增加多个」），这些**都需要在页面层移除**，不是 ReTableBar 组件本身的问题。Co 步骤只改组件默认行为，页面层的清理在 P 步骤 + 元素隐藏清单中处理。
|
|
225
|
+
|
|
226
|
+
### Co.2 ReTableBar — 工具栏按钮样式（刷新/密度/列设置）
|
|
227
|
+
|
|
228
|
+
| 项 | 说明 |
|
|
229
|
+
|----|------|
|
|
230
|
+
| **文件** | `src/components/ReTableBar/src/bar.vue` |
|
|
231
|
+
| **设计规范** | list-page.md §4 工具栏 + §12 CSS 选择器 |
|
|
232
|
+
| **修改内容** | 1. **刷新按钮**：icon 尺寸 16px，点击区域 32×32px，hover 背景浅灰（`--el-fill-color-light`）<br>2. **密度按钮**：dropdown 形式，3 个选项（宽松/默认/紧凑），对应表格行高 55/47/39px<br>3. **列设置按钮**：popover 形式，面板宽度 200px，内含全选/重置 + 列复选框列表<br>4. **按钮间分隔线**：使用 `el-divider direction="vertical"`，颜色 `--border-color-secondary`（#F0F0F0）<br>5. **工具栏整体 padding**：`--action-bar-padding-y` 上下 8px，左右 20px |
|
|
233
|
+
| **验证** | 三个工具按钮都存在（刷新/密度/列设置），尺寸、间距、分隔线与设计规范一致 |
|
|
234
|
+
|
|
235
|
+
### Co.3 ReTableBar — 工具栏左右布局
|
|
236
|
+
|
|
237
|
+
| 项 | 说明 |
|
|
238
|
+
|----|------|
|
|
239
|
+
| **文件** | `src/components/ReTableBar/src/bar.vue` |
|
|
240
|
+
| **设计规范** | list-page.md §4 工具栏：左侧批量操作按钮，右侧工具按钮（刷新/密度/列设置） |
|
|
241
|
+
| **修改内容** | 1. 左侧区域：slot 或 prop 传入的批量操作按钮（如批量删除、批量导出）<br>2. 右侧区域：刷新 + 分隔线 + 密度 + 分隔线 + 列设置<br>3. 左右两侧通过 flex justify-between 布局<br>4. 左侧按钮间距 `--action-bar-gap`（8px） |
|
|
242
|
+
| **验证** | 工具栏左右布局正确，左批量操作、右工具按钮 |
|
|
243
|
+
|
|
244
|
+
### Co.4 ReTableBar — 分页集成
|
|
245
|
+
|
|
246
|
+
| 项 | 说明 |
|
|
247
|
+
|----|------|
|
|
248
|
+
| **文件** | `src/components/ReTableBar/src/bar.vue` + `src/components/RePagination/` |
|
|
249
|
+
| **设计规范** | list-page.md §7 分页 |
|
|
250
|
+
| **修改内容** | 1. 分页放在表格下方、卡片底部区域<br>2. 分页容器 padding: 8px 20px 20px<br>3. 默认每页 10 条，可选 10/20/50 条/页<br>4. 跳转输入框宽度 48px |
|
|
251
|
+
| **验证** | 分页位置、尺寸、可选条数与设计规范一致 |
|
|
252
|
+
|
|
253
|
+
### Co.5 ReTableOperate — 操作列按钮样式
|
|
254
|
+
|
|
255
|
+
| 项 | 说明 |
|
|
256
|
+
|----|------|
|
|
257
|
+
| **文件** | `src/components/ReTableOperate/src/index.vue` |
|
|
258
|
+
| **设计规范** | list-page.md §5 操作列 + component-spec.md §7 表格 |
|
|
259
|
+
| **修改内容** | 1. **按钮样式**：纯文字链接（`type="text"`），**无图标**<br>2. **按钮间分隔线**：1px × 14px 竖线，颜色 `--border-color`（#D9D9D9），位于两个按钮之间<br>3. **文字颜色**：默认 `--brand-primary`（品牌色），hover 加深为 `--brand-active`<br>4. **禁用态**：文字颜色 `--text-disabled`，无 hover 效果 |
|
|
260
|
+
| **验证** | 操作列按钮为纯文字链接，无图标，按钮间有竖分隔线，颜色符合规范 |
|
|
261
|
+
|
|
262
|
+
### Co.6 ReTableOperate — 「更多」下拉按钮
|
|
263
|
+
|
|
264
|
+
| 项 | 说明 |
|
|
265
|
+
|----|------|
|
|
266
|
+
| **文件** | `src/components/ReTableOperate/src/index.vue` |
|
|
267
|
+
| **设计规范** | list-page.md §5.3 「更多」按钮：唯一例外，必须有下拉箭头 |
|
|
268
|
+
| **修改内容** | 1. 「更多」按钮必须带 10px 下拉箭头图标（SVG 或 iconfont）<br>2. 下拉菜单挂载到 body，`position: fixed`，`z-index: 9999`<br>3. 下拉菜单项：左侧可选图标 + 文字，hover 背景 `--el-fill-color-light`<br>4. 危险操作项文字颜色 `--error-color` |
|
|
269
|
+
| **验证** | 「更多」按钮有下拉箭头，下拉菜单样式正确 |
|
|
270
|
+
|
|
271
|
+
### Co.7 ReTableOperate — 折叠阈值与列宽计算
|
|
272
|
+
|
|
273
|
+
| 项 | 说明 |
|
|
274
|
+
|----|------|
|
|
275
|
+
| **文件** | `src/components/ReTableOperate/src/index.vue` |
|
|
276
|
+
| **设计规范** | list-page.md §5.1 操作列布局：≥3 个操作折叠为「更多」 |
|
|
277
|
+
| **修改内容** | 1. `limit` prop 默认值：3（可见按钮总数阈值，含「更多」槽位）<br>2. ≤ limit：全部文字按钮平铺<br>3. > limit：前 `limit - 1` 个平铺，其余进「更多」下拉<br>4. 列宽通过 `resolveOperateColumnWidth` 动态计算，**禁止写死 `width="200px"`** |
|
|
278
|
+
| **验证** | 操作列折叠逻辑正确，列宽自适应 |
|
|
279
|
+
|
|
280
|
+
### Co.8 RePagination — 分页组件样式
|
|
281
|
+
|
|
282
|
+
| 项 | 说明 |
|
|
283
|
+
|----|------|
|
|
284
|
+
| **文件** | `src/components/RePagination/` |
|
|
285
|
+
| **设计规范** | list-page.md §7 分页 + component-spec.md §5 Pagination |
|
|
286
|
+
| **修改内容** | 1. 分页布局：左右两段式（左侧总数 + 每页条数选择；右侧页码 + 跳转）<br>2. 默认每页条数：10<br>3. 可选条数：10/20/50<br>4. 跳转输入框宽度 48px<br>5. 激活页按钮：品牌色背景 + 白色文字 |
|
|
287
|
+
| **验证** | 分页样式与设计规范一致 |
|
|
288
|
+
|
|
289
|
+
### Co.9 侧栏菜单激活态 — 实色底修正
|
|
290
|
+
|
|
291
|
+
| 项 | 说明 |
|
|
292
|
+
|----|------|
|
|
293
|
+
| **文件** | `src/styles/sidebar.scss` |
|
|
294
|
+
| **设计规范** | unified-framework.md §2 Sider：激活项为实色品牌底 + 左侧 3px 指示条 + 白色文字 |
|
|
295
|
+
| **修改内容** | 1. 激活态背景：`var(--sidebar-menu-active-bg, var(--brand-primary))`（实色，非 8% 透明）<br>2. 左侧指示条：`::before` 伪元素，width 3px，height 100%，背景 `var(--sidebar-active-indicator, var(--brand-primary))`<br>3. 激活态文字颜色：`var(--sidebar-menu-active-text, #fff)`（白色）<br>4. 确保 `--sidebar-menu-active-bg` 令牌值为实色，而非 `color-mix(... 8%, transparent)` |
|
|
296
|
+
| **验证** | 侧栏激活菜单项为实色品牌底 + 左侧 3px 指示条 + 白色文字 |
|
|
297
|
+
|
|
298
|
+
> ⚠️ 注意：当前模板 `sidebar.scss` 中激活态背景是 `color-mix(in srgb, var(--brand-primary) 8%, transparent)`，这与设计规范的「实色底」不符。Co9 步骤必须将其修正为实色。
|
|
299
|
+
|
|
300
|
+
### Co.10 navbar — 折叠按钮垂直居中
|
|
301
|
+
|
|
302
|
+
| 项 | 说明 |
|
|
303
|
+
|----|------|
|
|
304
|
+
| **文件** | `src/layout/components/lay-navbar/index.vue` |
|
|
305
|
+
| **设计规范** | unified-framework.md §3 Header：折叠按钮在顶栏左侧，垂直居中 |
|
|
306
|
+
| **修改内容** | 1. 折叠按钮容器：`display: flex; align-items: center; height: 100%;`<br>2. 按钮自身尺寸：40×40px<br>3. 确保按钮在 `--header-height`（54px）高度内垂直居中<br>4. 按钮与侧栏 Logo 区顶部对齐 |
|
|
307
|
+
| **验证** | 折叠按钮在顶栏中垂直居中，位置与设计一致 |
|
|
308
|
+
|
|
309
|
+
### Co.11 navbar — 设置按钮隐藏
|
|
310
|
+
|
|
311
|
+
| 项 | 说明 |
|
|
312
|
+
|----|------|
|
|
313
|
+
| **文件** | `src/layout/components/lay-navbar/index.vue` |
|
|
314
|
+
| **设计规范** | unified-framework.md §3 Header + 元素自查隐藏清单：设计中无设置按钮 |
|
|
315
|
+
| **修改内容** | 1. 设置按钮（`.set-icon`）添加 `v-if="false"` 或从模板中删除<br>2. 相邻的分隔线也一并删除<br>3. 确保顶栏右侧元素顺序为：语言切换 → 全屏 → 用户欢迎区 |
|
|
316
|
+
| **验证** | 顶栏右侧无设置按钮 |
|
|
317
|
+
|
|
318
|
+
### Co.12 内容区模块分割线间距
|
|
319
|
+
|
|
320
|
+
| 项 | 说明 |
|
|
321
|
+
|----|------|
|
|
322
|
+
| **文件** | `src/styles/element-plus.scss` + 列表页布局 |
|
|
323
|
+
| **设计规范** | list-page.md §2 单卡片架构：段间用 1px 分割线，各区域 padding 精确 |
|
|
324
|
+
| **修改内容** | 1. 卡片内各模块（标题区/筛选区/工具栏/表格区/分页区）之间用 1px `--border-color-secondary`（#F0F0F0）分割线分隔<br>2. 各区域 padding 严格按设计 spec：<br> - 页面标题区：20px<br> - 筛选区：20px（上下左右）<br> - 工具栏：20px 20px 8px（上/左右/下）<br> - 表格区：0 20px（上下/左右）<br> - 分页区：8px 20px 20px（上/左右/下）<br>3. 分割线位于两个区域的交界处，不占用区域内 padding |
|
|
325
|
+
| **验证** | 各模块分割线位置、间距与设计规范一致 |
|
|
326
|
+
|
|
327
|
+
---
|
|
328
|
+
|
|
329
|
+
## 四、元素自查隐藏清单（设计没有 → 必删）
|
|
330
|
+
|
|
331
|
+
> 设计输出（JSON `structureRequirements` 或设计稿图）中没有的元素，必须隐藏或移除。
|
|
332
|
+
> 以下为高频检查项，**逐项对照**，设计中没有的一律处理。
|
|
333
|
+
> 隐藏/移除功能性元素时，在最终回复的「设计落地」结果块中列出被移除项。
|
|
334
|
+
|
|
335
|
+
### 4.1 顶栏元素
|
|
336
|
+
|
|
337
|
+
| 元素 | 组件位置 | 默认状态 | 设计无则 |
|
|
338
|
+
|------|---------|---------|---------|
|
|
339
|
+
| 设置按钮 | navbar 右侧 | 显示 | `display:none` 或删除组件引用 |
|
|
340
|
+
| 通知/消息按钮 | navbar 右侧 | 显示 | 同上 |
|
|
341
|
+
| 全屏按钮 | navbar 右侧 | 显示 | 同上 |
|
|
342
|
+
| 搜索框 | navbar 左侧或中部 | 不显示 | 确认不显示 |
|
|
343
|
+
| 面包屑 | navbar 下方或内 | 不显示 | 确认不显示 |
|
|
344
|
+
| 语言切换下拉 | navbar 右侧 | 内联文字 | 确认是内联文字，非下拉框 |
|
|
345
|
+
|
|
346
|
+
### 4.2 侧栏元素
|
|
347
|
+
|
|
348
|
+
| 元素 | 组件位置 | 默认状态 | 设计无则 |
|
|
349
|
+
|------|---------|---------|---------|
|
|
350
|
+
| 底部折叠按钮 | sidebar 底部 | 显示 | 隐藏，折叠按钮移至顶部 Logo 区 |
|
|
351
|
+
| 菜单 hover 折叠提示 | sidebar 菜单 hover 时 | 显示 | 禁用（删 `show-collapse-on-hover` 或等效逻辑） |
|
|
352
|
+
| 菜单分组标题 | sidebar 菜单中 | 大写字母 | 设计无分组则移除 |
|
|
353
|
+
| 子菜单展开箭头 | sidebar 子菜单 | 显示 | 确认样式与设计一致 |
|
|
354
|
+
|
|
355
|
+
### 4.3 列表页元素
|
|
356
|
+
|
|
357
|
+
| 元素 | 组件位置 | 默认状态 | 设计无则 |
|
|
358
|
+
|------|---------|---------|---------|
|
|
359
|
+
| 密度切换按钮 | 表格工具栏 | 显示 | 设计无则隐藏 |
|
|
360
|
+
| 列设置按钮 | 表格工具栏 | 显示 | 设计无则隐藏 |
|
|
361
|
+
| 刷新按钮 | 表格工具栏 | 显示 | 设计无则隐藏 |
|
|
362
|
+
| 搜索框（表格内） | 表格头部 | 不显示 | 确认不显示 |
|
|
363
|
+
| 序号列 | 表格第一列 | 不显示 | 设计无则不加 |
|
|
364
|
+
| 展开行按钮 | 表格行首 | 不显示 | 设计无则不加 |
|
|
365
|
+
|
|
366
|
+
### 4.4 共享组件 & 页面级常见多余元素
|
|
367
|
+
|
|
368
|
+
> 以下是模板页面中常见的多余元素，设计规范中均不存在，**必须逐项检查并移除**。
|
|
369
|
+
> 不仅是隐藏 `display:none`，而是**从模板中删除**。
|
|
370
|
+
|
|
371
|
+
| 元素 | 所在位置 | 出现场景 | 处理方式 |
|
|
372
|
+
|------|---------|---------|---------|
|
|
373
|
+
| 「展示列表」标题文字 | 列表页 `#title` slot 或 ReTableBar title prop | 所有列表页（base/tree/vxe-table） | 从页面模板中删除 |
|
|
374
|
+
| 「左侧按钮可以增加多个」按钮 | 列表页 `#title` slot 内 | 列表页示例代码 | 从页面模板中删除 |
|
|
375
|
+
| 「增加一行可编辑数据」按钮 | 列表页 `#title` slot 内 | base/tree 表格页 | 从页面模板中删除 |
|
|
376
|
+
| 「表单提交」按钮 | 列表页 `#title` slot 内 | base/tree 表格页 | 从页面模板中删除 |
|
|
377
|
+
| 「右侧按钮可以增加多个」按钮 | 列表页工具栏右侧 slot | 部分列表页 | 从页面模板中删除 |
|
|
378
|
+
| 工具栏「展示列表」label | ReTableBar 左侧 title 区域 | 所有使用 ReTableBar 的页面 | 从组件默认模板或页面 slot 中删除 |
|
|
379
|
+
| 操作列图标 | ReTableOperate 按钮上 | 所有使用 ReTableOperate 的页面 | 移除按钮 icon，仅保留文字 |
|
|
380
|
+
| 「更多」按钮无下拉箭头 | ReTableOperate 「更多」按钮 | 所有使用 ReTableOperate 的页面 | 添加 10px 下拉箭头图标 |
|
|
381
|
+
| 顶栏设置按钮 | lay-navbar `.set-icon` | 全局 | `v-if="false"` 或删除 |
|
|
382
|
+
| 顶栏设置按钮旁分隔线 | lay-navbar `.navbar-divider` | 全局 | 随设置按钮一并删除 |
|
|
383
|
+
| 侧栏底部折叠按钮 | lay-sidebar 底部 | 全局 | 隐藏，折叠功能移至顶部 |
|
|
384
|
+
| 菜单 hover 折叠提示 | sidebar 菜单 hover | 全局 | 禁用该功能 |
|
|
385
|
+
| 页签栏「首页」可关闭 | lay-tag 首页页签 | 全局 | 设为不可关闭 |
|
|
386
|
+
|
|
387
|
+
### 4.5 移除后告知格式
|
|
388
|
+
|
|
389
|
+
隐藏/移除以上功能性元素时，在最终回复中追加：
|
|
390
|
+
|
|
391
|
+
```markdown
|
|
392
|
+
## 设计落地 — 已移除元素（设计中未体现）
|
|
393
|
+
|
|
394
|
+
- 顶栏设置按钮
|
|
395
|
+
- 侧栏底部折叠按钮（已移至 Logo 区）
|
|
396
|
+
- 表格密度切换按钮
|
|
397
|
+
- ...
|
|
398
|
+
```
|
|
399
|
+
|
|
400
|
+
---
|
|
401
|
+
|
|
402
|
+
## 五、样式文件修改（S1 · 机制 + 区域映射）
|
|
403
|
+
|
|
404
|
+
### 5.1 机制
|
|
405
|
+
|
|
406
|
+
1. 读取 JSON 的 `visual` + `interactionSpecs` 字段
|
|
407
|
+
2. 按「区域映射表」逐项将 JSON 值写入 `element-plus.scss` 对应 CSS 选择器
|
|
408
|
+
3. **所有值引用 `design-tokens.scss` 令牌变量**，不硬编码
|
|
409
|
+
4. JSON 无值时回退 `design-tokens.md` 默认值（设计技能令牌库）
|
|
410
|
+
5. `dark.scss` 对以上规则逐条提供暗色覆盖
|
|
411
|
+
|
|
412
|
+
### 5.2 原则（硬约束，不随设计变化而失效）
|
|
413
|
+
|
|
414
|
+
⚠️ **hover 禁止变淡**：所有 hover 状态的文字色必须加深或变色，禁止变淡/变透明/变浅灰。
|
|
415
|
+
⚠️ **下划线居中**：line 风格页签激活下划线与文字等宽、严格居中，禁止偏左偏右。
|
|
416
|
+
⚠️ **值不硬编码**：本表不指定具体 hex/px/时长值，一切值来自 JSON 或令牌库。
|
|
417
|
+
|
|
418
|
+
### 5.3 区域映射表（JSON 字段 → CSS 选择器）
|
|
419
|
+
|
|
420
|
+
> 本表只映射「哪个 JSON 字段 → 哪个 CSS 选择器 → 验证什么」，**不硬编码值**。
|
|
421
|
+
> 具体值由 JSON `visual` / `interactionSpecs` 驱动，令牌变量承载。
|
|
422
|
+
|
|
423
|
+
| 区域 | JSON 来源 | CSS 选择器 | 验证 |
|
|
424
|
+
|------|---------|-----------|------|
|
|
425
|
+
| 卡片静态 | `visual.shadowCardRest` | `.el-card` | 卡片有投影 |
|
|
426
|
+
| 卡片 hover | `visual.shadowCardHover` + `interactionSpecs.cardHover` | `.el-card:hover` | 卡片 hover 有浮起感 |
|
|
427
|
+
| 按钮 hover | `interactionSpecs.buttonHover` | `.el-button:hover` | 按钮 hover 有上浮感 |
|
|
428
|
+
| 输入框聚焦 | `interactionSpecs.inputFocus` | `.el-input__wrapper:focus-within` | 输入框聚焦有光环 |
|
|
429
|
+
| 表格行 hover | `interactionSpecs.tableRowHover` | `.el-table tbody tr:hover` | 行 hover 有品牌色感 |
|
|
430
|
+
| 表头 | `visual.tableHeaderBorderBottom` | `.el-table thead th` | 表头有层次感 |
|
|
431
|
+
| 菜单激活 | `visual.menuActiveBorderRight` | `.el-menu-item.is-active` | 菜单激活有锚点 |
|
|
432
|
+
| 分页激活 | `interactionSpecs.paginationActive` | `.el-pagination .is-active` | 分页激活页有品牌色 |
|
|
433
|
+
| 全局过渡 | `visual.transitionBase` | `*` (transition) | 交互有平滑感 |
|
|
434
|
+
| 暗色覆盖 | — | `html.dark` 下以上选择器 | 暗色模式完整 |
|
|
435
|
+
| 展开收起 hover | `interactionSpecs.collapseBtnHover` | `.vts-collapse-btn:hover` | hover 文字不变浅 |
|
|
436
|
+
| 操作列 hover | `interactionSpecs.actionBtnHover` | `.vts-table-area .el-button--text:hover` | 操作列 hover 文字加深 |
|
|
437
|
+
| 页签关闭 hover | `interactionSpecs.tabsCloseHover` | `.el-tabs__item .el-icon-close:hover` | 关闭按钮 hover 有反馈 |
|
|
438
|
+
| 页签下划线 | `interactionSpecs.tabsUnderline` | `.el-tabs__active-bar` | 横线居中 |
|
|
439
|
+
| 下拉选项 hover | `interactionSpecs.selectOptionHover` | `.el-select-dropdown__item.hover` | 下拉项 hover 有品牌色感 |
|
|
440
|
+
| 复选框 hover | `interactionSpecs.checkboxHover` | `.el-checkbox__inner:hover` | 复选框 hover 有反馈 |
|
|
441
|
+
| 开关过渡 | `interactionSpecs.switchTransition` | `.el-switch` | 开关切换有动画 |
|
|
442
|
+
| Tag hover | `interactionSpecs.tagHover` | `.el-tag:hover` | Tag hover 有反馈 |
|
|
443
|
+
|
|
444
|
+
> 设计技能输出更新时，JSON 值变化 → 令牌变量变化 → CSS 规则自动生效，**本表结构不动**。
|
|
445
|
+
|
|
446
|
+
---
|
|
447
|
+
|
|
448
|
+
## 六、页面代码修改（P1-P7）
|
|
449
|
+
|
|
450
|
+
| # | JSON 来源 | 项目文件 | 修改内容 | 验证 |
|
|
451
|
+
|---|---------|---------|---------|------|
|
|
452
|
+
| P1 | `pageStructure.regions` | 页面 .vue 文件 | 按 JSON 的 regions 列表实现页面区域，**不照抄 crud-pages 样板**，以 JSON 结构为准 | 区域完整且顺序正确 |
|
|
453
|
+
| P2 | `structureRequirements.moduleComposition.pageHeader` | 页面 .vue → `.vts-page-header` | 标题 + 描述 + 操作按钮，flex 两端对齐 | 有页面标题区 |
|
|
454
|
+
| P3 | `structureRequirements.moduleComposition.filterArea` | 页面 .vue → `.vts-filter-area` | 独立容器：背景 + 圆角 + 底部分隔线 | 筛选区有容器感 |
|
|
455
|
+
| P4 | `structureRequirements.moduleComposition.tableArea` | 页面 .vue → `.vts-table-area` | 圆角 + 边框包裹 | 表格区有包裹感 |
|
|
456
|
+
| P5 | `structureRequirements.moduleComposition.actionBar` | 页面 .vue → `.vts-action-bar` | 左侧批量操作 + 右侧工具按钮 | 操作栏布局正确 |
|
|
457
|
+
| P6 | `interactionSpecs.*` | 页面 .vue | 页面内交互行为按 interactionSpecs 实现 | 交互完整 |
|
|
458
|
+
| P7 | `tokens.*` | 页面 .vue | 所有值引用 CSS 变量，无硬编码 | 无裸值 |
|
|
459
|
+
|
|
460
|
+
### crud-pages.md 设计模式样板的使用方式
|
|
461
|
+
|
|
462
|
+
`crud-pages.md` 的设计模式样板是**起始模板**，不是最终代码。AI 使用时必须：
|
|
463
|
+
|
|
464
|
+
1. 以样板为基础结构
|
|
465
|
+
2. 读 JSON 的 `pageStructure.regions`，按实际区域调整（增/减/改顺序）
|
|
466
|
+
3. 读 JSON 的 `structureRequirements.moduleComposition`，按实际布局调整区域内部结构
|
|
467
|
+
4. 读 JSON 的 `interactionSpecs`，在页面代码中实现交互行为
|
|
468
|
+
5. Re* 组件（ReTableBar / RePagination / ReTableOperate / ReGrid）的使用方式不变
|
|
469
|
+
6. CSS 钩子类（`.vts-page-header` / `.vts-filter-area` / `.vts-table-area`）按 JSON `structureRequirements` 调整
|
|
470
|
+
|
|
471
|
+
---
|
|
472
|
+
|
|
473
|
+
## 七、执行顺序
|
|
474
|
+
|
|
475
|
+
### 单页模式
|
|
476
|
+
|
|
477
|
+
1. **配置修改**（C1-C8）→ `platform-config.json`
|
|
478
|
+
2. **令牌写入**（T1-T12）→ `design-tokens.scss`
|
|
479
|
+
3. **框架组件修改**（F1-F27）→ navbar / sidebar / tabs / app-main
|
|
480
|
+
4. **共享组件修改**（Co1-Co12）→ ReTableBar / ReTableOperate / RePagination 等
|
|
481
|
+
5. **元素自查隐藏**（第四章清单）→ 逐项对照，设计无则删
|
|
482
|
+
6. **样式修改**（S1 区域映射）→ `element-plus.scss` + `dark.scss`
|
|
483
|
+
7. **页面代码生成**（P1-P7）→ 业务页面 .vue
|
|
484
|
+
|
|
485
|
+
### 项目级模式
|
|
486
|
+
|
|
487
|
+
0. **页面清单初始化**（Step 0）→ 扫描路由 → 构建页面清单 → 输出待改造清单
|
|
488
|
+
1. **配置修改**（C1-C8）→ `platform-config.json`（全局一次）
|
|
489
|
+
2. **令牌写入**（T1-T12）→ `design-tokens.scss`（全局一次）
|
|
490
|
+
3. **框架组件修改**（F1-F27）→ navbar / sidebar / tabs / app-main（全局一次）
|
|
491
|
+
4. **共享组件修改**（Co1-Co12）→ ReTableBar / ReTableOperate / RePagination 等（全局一次）
|
|
492
|
+
5. **元素自查隐藏**（第四章清单）→ 逐项对照，设计无则删（全局一次）
|
|
493
|
+
6. **样式修改**（S1 区域映射）→ `element-plus.scss` + `dark.scss`（全局一次）
|
|
494
|
+
7. **全页面遍历**（Step 6）→ 按页面清单逐页执行 P1-P7，标记完成状态
|
|
495
|
+
8. **完成性校验**（Step 7）→ 全页面 + 共享组件 + 元素隐藏 全量校验
|
|
496
|
+
|
|
497
|
+
---
|
|
498
|
+
|
|
499
|
+
## 八、硬失败（任一项命中 = 落地失败，必须修正）
|
|
500
|
+
|
|
501
|
+
| 类别 | 条件 | 处理 |
|
|
502
|
+
|------|------|------|
|
|
503
|
+
| 配置 | 只改主色/tokens，未改 Theme / Version | 硬失败：补全 C1-C8 |
|
|
504
|
+
| 配置 | 设计 `sidebar=dark-gradient` 但 `Theme` 仍为 `light` | 硬失败：改为 `default` 并 `Version++` |
|
|
505
|
+
| 配置 | 未写入 `shell.showModel` | 硬失败：按 JSON 补写 |
|
|
506
|
+
| 配置 | `primaryScale` 未写入 `--primary-0..9` | 硬失败：补全 10 级色阶 |
|
|
507
|
+
| 令牌 | 用 EP 默认错误色 `#F56C6C` 而非令牌引用 | 硬失败：改为 `var(--error-color)` 或对应令牌值 |
|
|
508
|
+
| 令牌 | 壳层/弹窗写死 px | 硬失败：改 `var(--…)` |
|
|
509
|
+
| 令牌 | 改了 margin 后列表仍用 `100vh` 减顶栏 | 硬失败：迁 flex / `vts-page-card` |
|
|
510
|
+
| 框架-顶栏 | 顶栏元素与设计不一致（多了或少了） | 硬失败：按 `frameworkShell.header` 逐项对齐 |
|
|
511
|
+
| 框架-顶栏 | 语言切换为下拉框（非内联文字） | 硬失败：改为内联文字 |
|
|
512
|
+
| 框架-顶栏 | 设置按钮设计无但代码中还在 | 硬失败：删除或 `display:none` |
|
|
513
|
+
| 框架-侧栏 | 侧栏底部折叠按钮设计无但还在 | 硬失败：隐藏，折叠按钮移至顶部 |
|
|
514
|
+
| 框架-侧栏 | 菜单 hover 出现折叠功能设计无但还在 | 硬失败：禁用该功能 |
|
|
515
|
+
| 框架-侧栏 | 菜单激活态无品牌色底+强调条 | 硬失败：按 `interactionSpecs.menuActive` 补充 |
|
|
516
|
+
| 框架-页签 | 页签横线不居中 | 硬失败：调整下划线位置，确保与文字等宽居中 |
|
|
517
|
+
| 框架-页签 | 首页页签可关闭 | 硬失败：设为不可关闭 |
|
|
518
|
+
| 样式 | 展开收起按钮 hover 文字变浅 | 硬失败：hover 文字色加深或变色，**禁止变淡** |
|
|
519
|
+
| 样式 | 表格行 hover 无品牌色底 | 硬失败：补充 hover 背景色 |
|
|
520
|
+
| 样式 | 卡片/按钮 hover 无浮起效果 | 硬失败：补充 transform + shadow |
|
|
521
|
+
| 样式 | 输入框聚焦无光环 | 硬失败：补充 focus 阴影 |
|
|
522
|
+
| 页面 | 页面无标题区 / 筛选区无容器感 | 硬失败：按 `moduleComposition` 补充 |
|
|
523
|
+
| 页面 | 状态标签样式与设计规范不一致 | 硬失败：按 `component-spec.md` Tag 规范修正 |
|
|
524
|
+
| 页面 | 操作列按钮样式混乱（混用 button/文字链接） | 硬失败：统一为文字链接 + "更多"下拉 |
|
|
525
|
+
| 页面 | 设计中未体现的元素未隐藏 | 硬失败：按元素自查隐藏清单逐项处理 |
|
|
526
|
+
| 页面 | `structureRequirements` 或 `interactionSpecs` 段未实现 | 硬失败：按 F1-F27 / P1-P7 补充 |
|
|
527
|
+
| 共享组件 | ReTableBar 工具栏按钮样式与设计规范不一致（刷新/密度/列设置尺寸、间距、分隔线） | 硬失败：按 Co2 修正 |
|
|
528
|
+
| 共享组件 | ReTableOperate 操作列按钮有图标（设计规范为纯文字链接） | 硬失败：按 Co5 移除图标，添加竖分隔线 |
|
|
529
|
+
| 共享组件 | 「更多」按钮无下拉箭头（设计规范必须有） | 硬失败：按 Co6 添加下拉箭头 |
|
|
530
|
+
| 共享组件 | 侧栏菜单激活态为 8% 透明底（设计规范为实色底） | 硬失败：按 Co9 修正为实色底 |
|
|
531
|
+
| 共享组件 | 顶栏设置按钮设计无但代码中还在 | 硬失败：按 Co11 删除或 `v-if="false"` |
|
|
532
|
+
| 共享组件 | 折叠按钮未垂直居中 | 硬失败：按 Co10 修正 |
|
|
533
|
+
| 共享组件 | 模块分割线间距与设计规范不一致 | 硬失败：按 Co12 修正各区域 padding 和分割线位置 |
|
|
534
|
+
| 页面清理 | 列表页仍有「展示列表」等多余标题文字 | 硬失败：按 4.4 清单从模板中删除 |
|
|
535
|
+
| 页面清理 | 列表页仍有「左侧按钮可以增加多个」等示例按钮 | 硬失败：按 4.4 清单从模板中删除 |
|
|
536
|
+
| 项目级 | 项目级模式下未扫描全部路由即开始改造 | 硬失败：先完成 Step 0 页面清单初始化 |
|
|
537
|
+
| 项目级 | 项目级模式下未完成全部页面即声称完成 | 硬失败：必须告知进度和剩余页面 |
|
|
538
|
+
| 项目级 | 项目级模式下共享组件未按 Co 步骤修改 | 硬失败：按 Co1-Co12 逐一修正 |
|
|
539
|
+
| 设计落地 | 设计 HTML / 规范文档被写入项目非业务目录 | 硬失败：撤销，设计修改只落在 src/ 等业务代码 |
|
|
540
|
+
| 功能回归 | 样式改造后原有功能被破坏（按钮不能点、分页不工作、搜索失效等） | 硬失败：样式归样式功能归功能，改样式不得破坏原有功能，必须修复后重新验证 |
|
|
541
|
+
| 逐属性校验 | 10.8 逐属性 CSS 校验发现设计值与项目实际值不一致且未修复 | 硬失败：逐条修改至零差异，回读校验通过后才能声明完成 |
|
|
542
|
+
| 逐属性校验 | 设计源文件回读校验有未通过项（修改后未重新回读验证） | 硬失败：重新修复并回读，直到零差异 |
|
|
543
|
+
| 逐属性校验 | 设计变更同步后未执行全量回读校验（只验变更项未验全量） | 硬失败：必须全量回读，防止变更项误改未变项 |
|
|
544
|
+
|
|
545
|
+
---
|
|
546
|
+
|
|
547
|
+
## 九、落地完整性校验（code-quality 额外执行）
|
|
548
|
+
|
|
549
|
+
> 当 `design-handoff/v1` JSON 存在时，`code-quality` 必须额外执行以下校验。
|
|
550
|
+
> 任一项未通过 = 硬失败，必须修正后重新生成。
|
|
551
|
+
|
|
552
|
+
### 配置层
|
|
553
|
+
|
|
554
|
+
- [ ] `platform-config.json` 的 `EpThemeColor` 与 JSON `tokens.brandPrimary` 一致
|
|
555
|
+
- [ ] `Theme` 与 `shell.sidebar` 对应（`dark-gradient` → `default`）
|
|
556
|
+
- [ ] `ShowModel` 与 `shell.showModel` 一致
|
|
557
|
+
- [ ] `Version` 已自增
|
|
558
|
+
|
|
559
|
+
### 令牌层
|
|
560
|
+
|
|
561
|
+
- [ ] `design-tokens.scss` 的 `--primary-0` ~ `--primary-9` 全部写入
|
|
562
|
+
- [ ] `--primary-5` === `--brand-primary` === `brandPrimary`
|
|
563
|
+
- [ ] `--header-height` / `--tabs-height` / `--sidebar-width` / `--layout-content-padding` 与 JSON `geometry` 一致
|
|
564
|
+
- [ ] `--control-height*` 与 JSON `componentSize` 一致
|
|
565
|
+
- [ ] 无硬编码 hex 值出现在令牌以外的位置
|
|
566
|
+
|
|
567
|
+
### 框架层
|
|
568
|
+
|
|
569
|
+
- [ ] navbar 顶栏组成与 `structureRequirements.frameworkShell.header` 一致
|
|
570
|
+
- [ ] 语言切换为内联文字（非下拉框）
|
|
571
|
+
- [ ] sidebar Logo 区为品牌色方块 + 白字
|
|
572
|
+
- [ ] 菜单激活态有品牌色极浅底 + 右侧强调条
|
|
573
|
+
- [ ] 页签风格与 `shell.showModel` 一致
|
|
574
|
+
- [ ] 内容区内边距与 `geometry.contentPadding` 一致
|
|
575
|
+
|
|
576
|
+
### 样式层
|
|
577
|
+
|
|
578
|
+
- [ ] `element-plus.scss` 视觉规则按 S1 区域映射表逐项写入，值来自 JSON `visual` / `interactionSpecs`
|
|
579
|
+
- [ ] `dark.scss` 对以上视觉规则有暗色覆盖
|
|
580
|
+
|
|
581
|
+
### 共享组件层
|
|
582
|
+
|
|
583
|
+
- [ ] ReTableBar 工具栏按钮样式符合设计规范（刷新/密度/列设置：icon 16px、按钮 32px、分隔线 1px）
|
|
584
|
+
- [ ] ReTableBar 工具栏左右布局正确（左批量操作、右工具按钮）
|
|
585
|
+
- [ ] ReTableBar 标题区：设计模式下无多余标题文字
|
|
586
|
+
- [ ] ReTableOperate 操作列：纯文字链接，无图标，按钮间有 1px×14px 竖分隔线
|
|
587
|
+
- [ ] ReTableOperate「更多」按钮：带 10px 下拉箭头，下拉菜单样式正确
|
|
588
|
+
- [ ] ReTableOperate 折叠阈值：limit 默认 3，列宽动态计算
|
|
589
|
+
- [ ] RePagination 分页样式符合设计规范（两段式布局、可选条数、跳转输入框）
|
|
590
|
+
- [ ] 侧栏菜单激活态：实色品牌底 + 左侧 3px 指示条 + 白色文字（非 8% 透明底）
|
|
591
|
+
- [ ] 顶栏折叠按钮：垂直居中，40×40px
|
|
592
|
+
- [ ] 顶栏设置按钮：已隐藏/删除
|
|
593
|
+
- [ ] 内容区模块分割线：各区域间距与设计规范一致（标题 20px / 筛选 20px / 工具栏 20px 8px / 表格 0 20px / 分页 8px 20px 20px）
|
|
594
|
+
|
|
595
|
+
### 页面层
|
|
596
|
+
|
|
597
|
+
- [ ] 业务页面区域结构与 JSON `pageStructure.regions` 一致
|
|
598
|
+
- [ ] 页面有标题区（`.vts-page-header`）：标题 + 描述 + 操作按钮
|
|
599
|
+
- [ ] 筛选区有容器感（`.vts-filter-area`）：背景 + 圆角 + 底部分隔线
|
|
600
|
+
- [ ] 表格区有包裹感（`.vts-table-area`）：圆角 + 边框
|
|
601
|
+
- [ ] 页面内交互行为按 `interactionSpecs` 实现
|
|
602
|
+
- [ ] 所有样式值引用 CSS 变量，无裸值
|
|
603
|
+
- [ ] **未用出厂 CRUD 样板结构覆盖设计输出的页面结构**
|
|
604
|
+
- [ ] 页面无「展示列表」等多余标题文字
|
|
605
|
+
- [ ] 页面无「左侧按钮可以增加多个」等示例按钮
|
|
606
|
+
- [ ] 操作列统一为文字链接 + "更多"下拉（ReTableOperate）
|
|
607
|
+
|
|
608
|
+
### 项目级完成性校验（仅 transformScope=project 时执行）
|
|
609
|
+
|
|
610
|
+
- [ ] 已扫描全部路由模块（`src/router/modules/`），页面清单完整
|
|
611
|
+
- [ ] 所有列表页均已按设计规范改造（base/tree/vxe-table 等）
|
|
612
|
+
- [ ] 所有表单页均已按设计规范改造
|
|
613
|
+
- [ ] 所有详情页均已按设计规范改造
|
|
614
|
+
- [ ] 工作台/仪表盘等其他页面均已按设计规范改造
|
|
615
|
+
- [ ] 共享组件（ReTableBar/ReTableOperate/RePagination）已全局修改
|
|
616
|
+
- [ ] 框架组件（navbar/sidebar/tabs/app-main）已全局修改
|
|
617
|
+
- [ ] 元素隐藏清单（第四章 4.1-4.4）已逐项检查并处理
|
|
618
|
+
- [ ] 无遗漏页面（对照路由清单逐一核对）
|
|
619
|
+
- [ ] 所有页面的多余元素（「展示列表」「左侧按钮...」等）均已清除
|
|
620
|
+
|
|
621
|
+
|
|
622
|
+
---
|
|
623
|
+
|
|
624
|
+
## 十、设计还原度验证（加载 design-verify.md）
|
|
625
|
+
|
|
626
|
+
> C/T/F/Co/S/P 执行完毕后，加载 `references/design-verify.md` 按其流程逐项验证。
|
|
627
|
+
> 验证流程包含：区域级验证(10.1-10.7) → 逐属性CSS校验(10.8) → 设计变更同步(10.9)。
|
|
628
|
+
> **未通过项必须修正后才能进入第十一章功能完整性核查。**
|
|
629
|
+
|
|
630
|
+
---
|
|
631
|
+
|
|
632
|
+
## 十一、功能完整性核查（样式改造后必须验证）
|
|
633
|
+
|
|
634
|
+
> ⚠️ **硬约束：样式改造绝对不能破坏原有功能。** 改样式只改视觉表现，不改业务逻辑、不改组件 prop、不删事件绑定。
|
|
635
|
+
> 设计还原度验证通过 ≠ 任务完成，必须再过一遍功能完整性核查，确认页面功能一切正常。
|
|
636
|
+
|
|
637
|
+
### 11.1 核查原则
|
|
638
|
+
|
|
639
|
+
1. **样式归样式，功能归功能**：改样式只动 `<style>` 和与样式相关的 class / 内联样式 / CSS 变量。**不得**因为改样式而改动组件的 prop、事件绑定、v-if/v-show 逻辑、数据结构
|
|
640
|
+
2. **原有功能必须全部保留**：改造前页面有什么功能（搜索、刷新、分页、排序、操作按钮等），改造后必须还在，且能正常工作
|
|
641
|
+
3. **结构改动要慎重**：如果因为布局需要调整 DOM 结构，必须确保不影响事件冒泡、插槽分发、ref 引用等
|
|
642
|
+
4. **先功能后样式**：发现样式和功能冲突时，优先保证功能正常，再想办法在不破坏功能的前提下调整样式
|
|
643
|
+
5. **共享组件改造影响全局**：修改 ReTableBar / ReTableOperate 等共享组件后，必须确认所有使用该组件的页面功能不受影响
|
|
644
|
+
|
|
645
|
+
### 11.2 框架层功能核查
|
|
646
|
+
|
|
647
|
+
| 模块 | 核查项 | 常见风险 | 核查方法 |
|
|
648
|
+
|------|--------|---------|---------|
|
|
649
|
+
| **顶栏** | 折叠按钮点击可展开/收起侧栏 | 改折叠按钮样式时不小心删了 click 事件 | 检查 `@click` 事件是否存在，对应方法是否正确 |
|
|
650
|
+
| **顶栏** | 语言切换正常 | 调整顶栏元素顺序时不小心删了语言切换组件 | 检查语言切换组件是否在模板中，事件绑定是否正确 |
|
|
651
|
+
| **顶栏** | 全屏按钮正常 | 同上 | 检查全屏按钮组件和事件 |
|
|
652
|
+
| **顶栏** | 用户下拉菜单正常 | 同上 | 检查用户欢迎区和下拉菜单 |
|
|
653
|
+
| **侧栏** | 菜单点击可切换路由 | 改激活态样式时不小心覆盖了菜单的点击逻辑 | 检查 `el-menu` 的 `@select` 事件，菜单项 `index` 是否正确 |
|
|
654
|
+
| **侧栏** | 折叠后侧栏宽度变化，菜单项变为图标模式 | 改侧栏宽度时影响了折叠逻辑 | 检查 `collapse` 属性绑定是否正常 |
|
|
655
|
+
| **页签栏** | 点击页签可切换 | 改页签样式时影响了激活态逻辑 | 检查 tab 点击事件，`activeTab` 是否正常更新 |
|
|
656
|
+
| **页签栏** | 关闭页签正常 | 同上 | 检查关闭按钮的事件绑定 |
|
|
657
|
+
| **页签栏** | 右键菜单正常（如果有） | 改样式时不小心删了右键菜单逻辑 | 检查 `@contextmenu` 事件 |
|
|
658
|
+
| **面包屑** | 面包屑显示正确、可点击 | 调整顶栏元素时删了面包屑组件 | 检查面包屑组件和路由联动 |
|
|
659
|
+
|
|
660
|
+
### 11.3 共享组件功能核查
|
|
661
|
+
|
|
662
|
+
> 共享组件的改动影响所有使用它的页面，**必须重点核查**。
|
|
663
|
+
|
|
664
|
+
| 组件 | 核查项 | 常见风险 | 核查方法 |
|
|
665
|
+
|------|--------|---------|---------|
|
|
666
|
+
| **ReTableBar** | 刷新按钮点击触发刷新 | 改刷新按钮样式时删了 `@click` 事件 | 检查刷新按钮的 `@click` 绑定，对应 emit 事件是否正常 |
|
|
667
|
+
| **ReTableBar** | 密度切换正常（三档切换后表格行高变化） | 改密度按钮样式时改了 dropdown 的 option 值或事件 | 检查密度下拉的 `v-model` 绑定和 `@change` 事件 |
|
|
668
|
+
| **ReTableBar** | 列设置弹出正常，可勾选列显示/隐藏 | 改列设置按钮样式时影响了 popover 触发 | 检查列设置的 popover/dialog 组件，v-model 绑定是否正确 |
|
|
669
|
+
| **ReTableBar** | 搜索框输入正常（如果有） | 改工具栏布局时删了搜索组件 | 检查搜索框的 `v-model` 和 `@search` 事件 |
|
|
670
|
+
| **ReTableBar** | 左侧批量操作按钮点击正常 | 改工具栏布局时影响了左侧 slot | 检查左侧 slot 是否正确传递，按钮事件是否正常 |
|
|
671
|
+
| **ReTableBar** | 分页组件正常（翻页、每页条数、跳转） | 改分页集成时破坏了分页逻辑 | 检查 `currentPage` / `pageSize` 绑定，分页事件 emit |
|
|
672
|
+
| **ReTableOperate** | 操作按钮点击触发对应事件 | 改操作列按钮样式时删了 `@click` 或 `@on-*` 事件 | 检查每个操作按钮的事件绑定，emit 是否正常 |
|
|
673
|
+
| **ReTableOperate** | 「更多」下拉展开正常 | 改更多按钮样式时影响了 dropdown 触发 | 检查 dropdown 的 `v-model` 或 `trigger` 属性 |
|
|
674
|
+
| **ReTableOperate** | 「更多」菜单项点击正常 | 改下拉菜单样式时影响了菜单项的事件 | 检查下拉菜单项的 `@click` 事件 |
|
|
675
|
+
| **ReTableOperate** | 折叠逻辑正常（操作多时自动折叠） | 改折叠阈值 limit 时影响了计算逻辑 | 检查 `visibleBtns` 计算属性，`limit` prop 是否正常 |
|
|
676
|
+
| **RePagination** | 页码切换正常 | 改分页样式时破坏了页码点击逻辑 | 检查 `current-change` 事件 |
|
|
677
|
+
| **RePagination** | 每页条数切换正常 | 同上 | 检查 `size-change` 事件 |
|
|
678
|
+
| **RePagination** | 跳转输入正常 | 同上 | 检查跳转输入框的 `@keyup.enter` 事件 |
|
|
679
|
+
|
|
680
|
+
### 11.4 列表页功能核查
|
|
681
|
+
|
|
682
|
+
| 区域 | 核查项 | 常见风险 | 核查方法 |
|
|
683
|
+
|------|--------|---------|---------|
|
|
684
|
+
| **筛选区** | 输入框输入正常 | 改筛选区样式时破坏了 v-model | 检查每个输入框的 `v-model` 绑定 |
|
|
685
|
+
| **筛选区** | 下拉选择正常 | 同上 | 检查 select/el-select 的 v-model 和 options |
|
|
686
|
+
| **筛选区** | 搜索/查询按钮点击触发查询 | 改按钮样式时删了 click 事件 | 检查查询按钮的 `@click`，确认调用 `onSearch` |
|
|
687
|
+
| **筛选区** | 重置按钮点击重置表单 | 同上 | 检查重置按钮的 `@click`，确认调用 `reset` |
|
|
688
|
+
| **筛选区** | 展开/收起筛选条件正常 | 改筛选区布局时影响了展开收起逻辑 | 检查 `showFilter` 状态和展开收起按钮 |
|
|
689
|
+
| **表格** | 数据正常渲染 | 改表格结构时破坏了列定义或数据绑定 | 检查 `el-table` 的 `data` 属性，列的 `prop` 是否正确 |
|
|
690
|
+
| **表格** | 行选择（复选框）正常 | 改选择列宽度或样式时影响了选择功能 | 检查 `el-table-column type="selection"`，`@selection-change` 事件 |
|
|
691
|
+
| **表格** | 排序正常 | 改表头样式时影响了排序功能 | 检查 `sortable` 属性，`@sort-change` 事件 |
|
|
692
|
+
| **表格** | 分页翻页数据刷新 | 改分页样式时破坏了分页联动 | 检查分页 change 事件是否触发数据请求 |
|
|
693
|
+
| **表格** | 操作列按钮点击正常 | 改操作列样式时影响了按钮事件 | 检查操作列每个按钮的事件绑定 |
|
|
694
|
+
| **表格** | 横向滚动正常 | 改表格宽度或列宽时影响了滚动 | 检查表格是否设置了固定宽度或列宽总和 |
|
|
695
|
+
| **表格** | 空状态显示正常 | 改表格样式时空状态组件被覆盖或隐藏 | 检查空状态 slot 或 empty-text |
|
|
696
|
+
|
|
697
|
+
### 11.5 表单页功能核查（表单页改造时执行）
|
|
698
|
+
|
|
699
|
+
| 区域 | 核查项 | 常见风险 | 核查方法 |
|
|
700
|
+
|------|--------|---------|---------|
|
|
701
|
+
| **表单项** | 每个输入控件可正常输入/选择 | 改表单项样式时破坏了 v-model | 逐一检查每个 form-item 的 v-model 绑定 |
|
|
702
|
+
| **表单项** | 表单验证正常（必填、格式、自定义） | 改样式时删了 rules 或 prop | 检查 `el-form` 的 `rules`，每个 `el-form-item` 的 `prop` |
|
|
703
|
+
| **操作按钮** | 提交按钮点击提交表单 | 改按钮样式时删了 click 事件 | 检查提交按钮的 `@click`，确认调用提交方法 |
|
|
704
|
+
| **操作按钮** | 重置/返回按钮正常 | 同上 | 检查对应按钮的事件绑定 |
|
|
705
|
+
| **联动逻辑** | 表单项之间的联动（如选了A才显示B） | 改布局时影响了 v-if 条件 | 检查联动项的 v-if/v-show 逻辑 |
|
|
706
|
+
|
|
707
|
+
### 11.6 核查方法和流程
|
|
708
|
+
|
|
709
|
+
```
|
|
710
|
+
样式改造完成
|
|
711
|
+
↓
|
|
712
|
+
【设计还原度验证】（第十章）
|
|
713
|
+
↓ 通过
|
|
714
|
+
【功能完整性核查】（本章）
|
|
715
|
+
├─ 1. 框架层功能核查（顶栏/侧栏/页签）
|
|
716
|
+
├─ 2. 共享组件功能核查（ReTableBar/ReTableOperate/RePagination）
|
|
717
|
+
├─ 3. 页面级功能核查（列表/表单/详情，按页面类型选）
|
|
718
|
+
├─ 4. 发现问题 → 修正 → 重新走还原度 + 功能核查
|
|
719
|
+
└─ 5. 全部通过 → 进入 code-quality 闸门
|
|
720
|
+
```
|
|
721
|
+
|
|
722
|
+
**具体操作步骤**：
|
|
723
|
+
|
|
724
|
+
1. **梳理原有功能清单**：改造前先列出页面/组件有哪些功能点（搜索、刷新、分页、操作按钮等），作为核查基线
|
|
725
|
+
2. **改造中保持警觉**：改动 DOM 结构、组件 prop、事件绑定时，停下来确认是否会影响功能
|
|
726
|
+
3. **改造后逐项核查**：按 11.2-11.5 的清单，逐一检查功能是否正常
|
|
727
|
+
4. **问题修正**：发现功能问题立即修正，修正后重新验证样式还原度 + 功能完整性
|
|
728
|
+
5. **输出核查报告**：在最终回复中附加「功能完整性核查报告」（格式见下）
|
|
729
|
+
|
|
730
|
+
### 11.7 功能完整性核查报告（输出格式）
|
|
731
|
+
|
|
732
|
+
```markdown
|
|
733
|
+
## 功能完整性核查报告
|
|
734
|
+
|
|
735
|
+
### 整体评估
|
|
736
|
+
- 功能核查：X/Y 项通过
|
|
737
|
+
- 功能回归问题：0 项（如有，列出并说明修正方案）
|
|
738
|
+
- 结论：✅ 功能正常 / ⚠️ 有 N 项待修复
|
|
739
|
+
|
|
740
|
+
### 框架层（X/Y 通过）
|
|
741
|
+
- [x] 折叠按钮：点击可展开/收起侧栏
|
|
742
|
+
- [x] 语言切换：正常
|
|
743
|
+
- [x] 全屏按钮：正常
|
|
744
|
+
- [x] 用户菜单：下拉正常
|
|
745
|
+
- [x] 菜单点击：路由切换正常
|
|
746
|
+
- [x] 侧栏折叠：宽度变化正常
|
|
747
|
+
- [x] 页签切换：点击切换正常
|
|
748
|
+
- [x] 页签关闭：关闭功能正常
|
|
749
|
+
|
|
750
|
+
### 共享组件层（X/Y 通过）
|
|
751
|
+
- [x] ReTableBar - 刷新按钮：点击触发刷新
|
|
752
|
+
- [x] ReTableBar - 密度切换：三档切换正常，行高变化
|
|
753
|
+
- [x] ReTableBar - 列设置：弹出正常，可勾选显示/隐藏
|
|
754
|
+
- [x] ReTableBar - 搜索框：输入和搜索正常（如有）
|
|
755
|
+
- [x] ReTableBar - 批量操作：左侧按钮点击正常
|
|
756
|
+
- [x] ReTableBar - 分页：翻页/条数/跳转正常
|
|
757
|
+
- [x] ReTableOperate - 操作按钮：每个按钮点击触发对应事件
|
|
758
|
+
- [x] ReTableOperate - 更多下拉：展开/收起正常
|
|
759
|
+
- [x] ReTableOperate - 更多菜单项：点击正常
|
|
760
|
+
- [x] ReTableOperate - 折叠逻辑：操作多时自动折叠
|
|
761
|
+
|
|
762
|
+
### 页面层（X/Y 通过）
|
|
763
|
+
- [x] 筛选区：输入/选择正常
|
|
764
|
+
- [x] 筛选区：搜索/重置按钮点击正常
|
|
765
|
+
- [x] 筛选区：展开/收起正常（如有）
|
|
766
|
+
- [x] 表格：数据正常渲染
|
|
767
|
+
- [x] 表格：行选择正常
|
|
768
|
+
- [x] 表格：排序正常（如有）
|
|
769
|
+
- [x] 表格：分页翻页数据刷新
|
|
770
|
+
- [x] 表格：操作列按钮点击正常
|
|
771
|
+
- [x] 表格：横向滚动正常
|
|
772
|
+
- [x] 表格：空状态显示正常
|
|
773
|
+
|
|
774
|
+
### 发现的问题与修正
|
|
775
|
+
（如无则写「无功能回归问题」）
|
|
776
|
+
1. 问题描述 → 原因 → 修正方案 → 是否已修正
|
|
777
|
+
```
|
|
778
|
+
|
|
779
|
+
---
|
|
780
|
+
|
|
781
|
+
### 执行顺序（最终版）
|
|
782
|
+
|
|
783
|
+
1. **配置修改**（C1-C8）
|
|
784
|
+
2. **令牌写入**（T1-T12）
|
|
785
|
+
3. **框架组件修改**（F1-F27）
|
|
786
|
+
4. **共享组件修改**（Co1-Co12）
|
|
787
|
+
5. **元素自查隐藏**（第四章）
|
|
788
|
+
6. **样式修改**（S1）
|
|
789
|
+
7. **页面代码生成**（P1-P7）
|
|
790
|
+
8. **设计还原度验证** — 加载 `design-verify.md`，执行 10.1-10.7 区域级验证 + 10.8 逐属性 CSS 校验 + 10.9 设计变更同步（如有）
|
|
791
|
+
9. **功能完整性核查**（第十一章）—— 检查功能坏没坏
|
|
792
|
+
10. **code-quality 闸门**
|
|
793
|
+
11. **输出报告**（设计还原度验证报告 + 逐属性校验报告 + 功能完整性核查报告）
|
|
794
|
+
|
|
795
|
+
> ⚠️ **三条腿走路**：区域级还原度（10.1-10.7）+ 属性级逐条校验（10.8-10.9）+ 功能完整性（第十一章）缺一不可。只改对样式但功能坏了 = 失败；功能正常但样式有偏差 = 也失败；区域级通过但属性级有遗漏 = 同样失败。三者全部通过才算完成。
|