@qilitt-mickey/vue3-temp-skill 1.1.27 → 1.1.28
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 +1 -0
- package/SKILL.md +25 -23
- package/package.json +1 -1
- package/references/code-quality.md +49 -11
- package/references/core-kernel.md +11 -1
- package/references/crud-pages.md +46 -10
- package/references/design-handoff.md +174 -74
package/README.md
CHANGED
package/SKILL.md
CHANGED
|
@@ -7,24 +7,24 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
|
|
|
7
7
|
|
|
8
8
|
# Vue 3 项目开发规范技能包
|
|
9
9
|
|
|
10
|
-
执行顺序：运行 `python scripts/match.py "<需求>"` 获取精确匹配 → 按 `load_files` 读参考文件 → 生成 → 按 `quality_gates` 检查 → 执行 `code-quality` → 回复含审查结果块。
|
|
11
|
-
|
|
12
|
-
> **模块路由优先用脚本**：`python scripts/match.py "需求描述"` 输出 JSON，含命中模块、同批加载、闸门项、加载文件清单。AI 按此结果加载文件，不自行推理匹配。无 Python 环境时回退至下方路由表手动匹配。
|
|
13
|
-
|
|
14
|
-
### 脚本工具
|
|
15
|
-
|
|
16
|
-
| 命令 | 用途 |
|
|
17
|
-
|------|------|
|
|
18
|
-
| `python scripts/match.py "<需求>"` | **运行时匹配器**（AI 调用）：输出命中模块、同批加载、闸门项、文件清单 |
|
|
19
|
-
| `python scripts/match.py --batch` | 批量测试 15 个典型场景 |
|
|
20
|
-
| `npm run check` | **发布前全量检查**（5 项任一失败即中断） |
|
|
21
|
-
| `npm run validate` | 结构校验：frontmatter、路由表一致性、孤立模块、交叉引用 |
|
|
22
|
-
| `npm run audit` | 命中精度审计：关键词重叠、盲区、模块评分、边界冲突 |
|
|
23
|
-
| `npm run content` | 内容可用性审计：样板完整性、Must-do 清单 |
|
|
24
|
-
| `npm run deps` | 依赖图分析：断链、循环依赖、引用热度 |
|
|
25
|
-
| `npm run match:batch` | 批量测试（npm 封装） |
|
|
26
|
-
| `node scripts/cli.mjs --list` | 列出所有可用命令 |
|
|
27
|
-
|
|
10
|
+
执行顺序：运行 `python scripts/match.py "<需求>"` 获取精确匹配 → 按 `load_files` 读参考文件 → 生成 → 按 `quality_gates` 检查 → 执行 `code-quality` → 回复含审查结果块。
|
|
11
|
+
|
|
12
|
+
> **模块路由优先用脚本**：`python scripts/match.py "需求描述"` 输出 JSON，含命中模块、同批加载、闸门项、加载文件清单。AI 按此结果加载文件，不自行推理匹配。无 Python 环境时回退至下方路由表手动匹配。
|
|
13
|
+
|
|
14
|
+
### 脚本工具
|
|
15
|
+
|
|
16
|
+
| 命令 | 用途 |
|
|
17
|
+
|------|------|
|
|
18
|
+
| `python scripts/match.py "<需求>"` | **运行时匹配器**（AI 调用）：输出命中模块、同批加载、闸门项、文件清单 |
|
|
19
|
+
| `python scripts/match.py --batch` | 批量测试 15 个典型场景 |
|
|
20
|
+
| `npm run check` | **发布前全量检查**（5 项任一失败即中断） |
|
|
21
|
+
| `npm run validate` | 结构校验：frontmatter、路由表一致性、孤立模块、交叉引用 |
|
|
22
|
+
| `npm run audit` | 命中精度审计：关键词重叠、盲区、模块评分、边界冲突 |
|
|
23
|
+
| `npm run content` | 内容可用性审计：样板完整性、Must-do 清单 |
|
|
24
|
+
| `npm run deps` | 依赖图分析：断链、循环依赖、引用热度 |
|
|
25
|
+
| `npm run match:batch` | 批量测试（npm 封装） |
|
|
26
|
+
| `node scripts/cli.mjs --list` | 列出所有可用命令 |
|
|
27
|
+
|
|
28
28
|
> `npm run release` 会自动先执行全量检查，通过后才升版本、提交、发布。
|
|
29
29
|
|
|
30
30
|
## 术语约定
|
|
@@ -44,10 +44,11 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
|
|
|
44
44
|
|
|
45
45
|
- 面向由 **vue3-web-temp** 脚手架搭出的业务项目（目录名/安装路径因人而异，以当前工作区为准）
|
|
46
46
|
- **文档分工**：人类读模板 `README.md`；AI 读模板 `AGENTS.md` + 本 Skill；样板与细则在本包 `references/`
|
|
47
|
+
- **`docs/` 只读边界**：模板仓库 `docs/**`（如 `docs/style-templates/`）为**静态文档/演示说明**，仅供人类预览与沟通参考；**禁止**在业务开发、设计落地、重构、联调等场景中同步修改其中的文件。`docs/` 内示例代码**不跟随** `src/` 等业务代码联动更新；仅当用户**明确要求**维护文档本身时方可改动
|
|
47
48
|
- **精简出厂**：模板 `views/` 仅保留登录/首页等壳页面；**业务标准样板**在本包 `references/`（如 `crud-pages`、`detail-page`）
|
|
48
49
|
- **依赖分层**：`package.json` 仅 **core**；**addon** 默认不装；缺包时装依赖后须按 `addon-enable.md` **逐文件恢复配置**（非自动）
|
|
49
50
|
- 壳层行为（顶部 tag / 侧栏 / keep-alive / `useDetail`）以**当前项目**已有实现为准
|
|
50
|
-
- **双轨**：无设计 handoff → 保持模版出厂；有设计落地 → 读 `design-handoff.md` 逐文件修改清单（含 1:1 还原要求 F1-F14 / P1-P7）
|
|
51
|
+
- **双轨**：无设计 handoff → 保持模版出厂；有设计落地 → 读 `design-handoff.md` 逐文件修改清单（含 1:1 还原要求 F1-F14 / P1-P7）
|
|
51
52
|
- **设计优先级**：当设计技能产出（`design-handoff/v1` JSON）存在时，视觉层面（布局/间距/圆角/阴影/色彩/组件结构）以设计技能产出为准，本技能出厂默认值按设计产出替换。详见下方「设计优先级与 handoff 强制执行」段
|
|
52
53
|
|
|
53
54
|
## 使用方式
|
|
@@ -64,6 +65,7 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
|
|
|
64
65
|
4. 无对应能力 → 标注「待确认」，未经同意不引入新依赖
|
|
65
66
|
5. 权威性优先级：`仓库已有封装` > `本 Skill 示例` > 通用 Vue 习惯
|
|
66
67
|
6. 命中 addon / 缺依赖：读 `project-inventory` 第九/十节 + **`addon-enable.md`**（逐文件恢复代码）；精确版本安装，禁止 `@latest`
|
|
68
|
+
7. **`docs/**` 不参与业务落盘**：模板 `docs/` 为静态文档/演示说明，禁止随 `src/` 等业务改动同步修改；仅用户明确要求维护文档时才改
|
|
67
69
|
|
|
68
70
|
## 完整性守则（全模块强制）
|
|
69
71
|
|
|
@@ -76,7 +78,7 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
|
|
|
76
78
|
|
|
77
79
|
## 设计落地（handoff）
|
|
78
80
|
|
|
79
|
-
|
|
81
|
+
设计技能（project-ui-design）每次产出时**始终自动附加 `design-handoff/v1` JSON**。本技能检测到 JSON 后**强制加载** `references/design-handoff.md`，按 C/T/F/S/P 五步全流程执行（配置→令牌→框架→样式→页面），**任一步跳过 = 硬失败**。设计产出优先级高于本技能出厂默认值，页面保留业务逻辑、重写视觉结构。用户无需提及「JSON」或「handoff」——这是两技能间的自动协议。完整规则与逐项清单见 `design-handoff.md`。
|
|
80
82
|
|
|
81
83
|
## 模块路由表
|
|
82
84
|
|
|
@@ -93,7 +95,7 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
|
|
|
93
95
|
| addon / 查 Re* 名 / 装依赖 | `references/project-inventory.md` |
|
|
94
96
|
| **启用精简模板已删的 addon（装包 + 改配置）** | `references/addon-enable.md`（与功能模块同读） |
|
|
95
97
|
| 写完代码后（闸门，非功能命中） | `references/code-quality.md` |
|
|
96
|
-
| 设计交接块 / **design-handoff/v1 JSON** / 上游令牌产出落地 | `references/design-handoff.md`（逐文件修改清单）+ `design-system.md`（项目设计系统说明） |
|
|
98
|
+
| 设计交接块 / **design-handoff/v1 JSON** / 上游令牌产出落地 | `references/design-handoff.md`（逐文件修改清单）+ `design-system.md`（项目设计系统说明） |
|
|
97
99
|
| **设计模式**（设计 Skill 产出存在时触发） | `crud-pages.md` 设计模式样板 + `design-handoff.md` 1:1 还原要求（F1-F14 / P1-P7） |
|
|
98
100
|
|
|
99
101
|
### 标准业务面
|
|
@@ -147,7 +149,7 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
|
|
|
147
149
|
1. 单模块 → 该模块 + `core-kernel`；结束后执行 `code-quality`
|
|
148
150
|
2. 多模块 → 同时加载（例：客户列表 = `crud-pages` + `permission-auth` + `http-api`）
|
|
149
151
|
3. 未命中模块 → 仅 `core-kernel`，向用户确认是否专项
|
|
150
|
-
4. 默认不改 `vite.config.ts` / `build
|
|
152
|
+
4. 默认不改 `vite.config.ts` / `build/**` / **`docs/**`**；**例外**：按 `addon-enable.md` 恢复 FileViewer / VantResolver / Vconsole 等占位插件时允许改 `build/plugins/*`；`docs/**` 无例外，须用户明确要求才改
|
|
151
153
|
5. 效果匹配：
|
|
152
154
|
- 启用 echarts / vant / file-viewer / 富文本等已删 addon → 功能模块 + **`addon-enable`**
|
|
153
155
|
- 弹窗、对话框、抽屉 → `form-advanced`
|
|
@@ -196,7 +198,7 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
|
|
|
196
198
|
2. **加载**：`core-kernel` + 命中模块；addon/缺包时加读 `project-inventory` + **`addon-enable`**；**检测 design-handoff/v1 JSON 是否存在** — 若存在，强制加载 `design-handoff`（逐文件修改清单，含 C/T/F/S/P 全流程）+ `design-system.md`，并按设计产出优先级执行
|
|
197
199
|
3. **依赖**：缺包按 inventory 第九节精确版本，确认后安装；**再按 `addon-enable` 对应章节改配置**
|
|
198
200
|
4. **探查**：复用仓库 `Re*` / Hook / utils
|
|
199
|
-
5.
|
|
201
|
+
5. **生成**：可运行代码落盘至 `src/` 等业务目录；**禁止**同步修改 `docs/**`（除非用户明确要求维护文档）；**有 handoff JSON 时，页面结构以设计输出为准，保留业务逻辑**
|
|
200
202
|
6. **code-quality**：按 `references/code-quality.md` 执行；**有 handoff JSON 时，额外执行 handoff 落地完整性校验**（见 `design-handoff.md` 末尾）
|
|
201
203
|
7. **输出**：变更说明（含已改配置文件列表）+ 待确认项
|
|
202
204
|
|
package/package.json
CHANGED
|
@@ -49,17 +49,55 @@ lint / type-check **过了也不能放过**下列项。发现即改代码，禁
|
|
|
49
49
|
| `element-plus.scss` 内视觉规则（shadow/hover/transition） | 出现非令牌引用的裸 hex / px / rgba 值 | 全部改为 `var()` 引用令牌 |
|
|
50
50
|
| 视觉规则新增 | `dark.scss` 缺少对应暗色覆盖 | 每条新规则在 `html.dark` 内有对应覆盖 |
|
|
51
51
|
|
|
52
|
-
### 设计模式专项检查（设计 Skill
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
52
|
+
### 设计模式专项检查（设计 Skill 产出或指定设计规范时强制执行）
|
|
53
|
+
|
|
54
|
+
> 任一项未通过 = 硬失败，必须修正后重新生成。
|
|
55
|
+
> 对照 `design-handoff.md` 硬失败表 + 元素自查隐藏清单逐项核查。
|
|
56
|
+
|
|
57
|
+
#### 配置层（4 项）
|
|
58
|
+
|
|
59
|
+
- [ ] `platform-config.json` 的 `EpThemeColor` 与设计主色一致
|
|
60
|
+
- [ ] `Theme` 与侧栏风格对应（`dark-gradient` → `default`）
|
|
61
|
+
- [ ] `ShowModel` 与页签风格一致
|
|
62
|
+
- [ ] `Version` 已自增
|
|
63
|
+
|
|
64
|
+
#### 令牌层（5 项）
|
|
65
|
+
|
|
66
|
+
- [ ] `--primary-0` ~ `--primary-9` 完整 10 级色阶
|
|
67
|
+
- [ ] 几何尺寸令牌与设计一致（header/tabs/sidebar/margin）
|
|
68
|
+
- [ ] 控件高度令牌与设计一致（`--control-height*`）
|
|
69
|
+
- [ ] 视觉令牌完整（shadow/transition/transform）
|
|
70
|
+
- [ ] 无硬编码 hex 值出现在令牌以外的位置
|
|
71
|
+
|
|
72
|
+
#### 框架层（7 项）
|
|
73
|
+
|
|
74
|
+
- [ ] 顶栏元素组成与设计一致（不多不少：设置/通知/全屏/搜索/面包屑）
|
|
75
|
+
- [ ] 语言切换为内联文字（非下拉框）
|
|
76
|
+
- [ ] 侧栏底部折叠按钮设计无则已隐藏（折叠按钮移至顶部）
|
|
77
|
+
- [ ] 菜单 hover 折叠功能设计无则已禁用
|
|
78
|
+
- [ ] 菜单激活态：品牌色极浅底 + 右侧强调条（非纯蓝底白字）
|
|
79
|
+
- [ ] 页签横线居中，关闭按钮行为正确
|
|
80
|
+
- [ ] Logo 区：品牌色方块 + 白字首字（非默认彩色图标）
|
|
81
|
+
|
|
82
|
+
#### 样式层（6 项）
|
|
83
|
+
|
|
84
|
+
- [ ] 卡片 hover 有浮起效果（transform + shadow）
|
|
85
|
+
- [ ] 按钮 hover 有上浮效果（位移 + 阴影）
|
|
86
|
+
- [ ] 输入框聚焦有光环（品牌色边框 + 外阴影）
|
|
87
|
+
- [ ] 表格行 hover 有品牌色底
|
|
88
|
+
- [ ] 展开收起按钮 hover 文字不变淡（加深为品牌色）
|
|
89
|
+
- [ ] 所有视觉规则在暗色模式下有对应覆盖
|
|
90
|
+
|
|
91
|
+
#### 页面层（8 项）
|
|
92
|
+
|
|
93
|
+
- [ ] 页面有标题区（`.vts-page-header`：标题 + 描述 + 操作按钮）
|
|
94
|
+
- [ ] 筛选区有容器感（`.vts-filter-area`：背景 + 底部分割线）
|
|
95
|
+
- [ ] 操作栏存在（`.vts-action-bar`：批量操作 + 工具按钮）
|
|
96
|
+
- [ ] 表格区有包裹感（`.vts-table-area`）
|
|
97
|
+
- [ ] 状态标签样式符合规范（filled/outlined/solid 按列分配）
|
|
98
|
+
- [ ] 操作列统一为文字链接 + "更多"下拉（ReTableOperate）
|
|
99
|
+
- [ ] 设计中未体现的元素已隐藏/移除（对照元素自查隐藏清单）
|
|
100
|
+
- [ ] 所有样式值引用 CSS 变量，无裸 hex/px 值
|
|
63
101
|
|
|
64
102
|
## 选型与硬约束
|
|
65
103
|
|
|
@@ -27,6 +27,7 @@ tags: [vue3, kernel, conventions, layout, router, http, crud, inventory]
|
|
|
27
27
|
| 12 | 列表布局按 **`crud-pages` 标准样板**（`el-card.vts-page-card`+`content`、无 `100vh` 减顶栏定高、`tableHeight`、`otherRef`、分页在 ReTableBar 内；仅表格体内滚动） |
|
|
28
28
|
| 13 | addon 按 `project-inventory` 第九节精确版本安装；禁止 `@latest` |
|
|
29
29
|
| 14 | 样式契约见下文「样式契约」 |
|
|
30
|
+
| 15 | **`docs/**` 禁止随业务改动**：模板 `docs/` 为静态文档/演示（如 `style-templates/`），不参与业务落盘；除非用户明确要求维护文档，否则不得修改、同步或「对齐」其中文件 |
|
|
30
31
|
|
|
31
32
|
## 二、应用壳
|
|
32
33
|
|
|
@@ -156,7 +157,16 @@ export function getCustomerList(data: CustomerQuery, url: string) {
|
|
|
156
157
|
| addon 构建 | FileViewer / vConsole 等在精简模板中为占位；安装后按对应模块恢复 `build/plugins/*` |
|
|
157
158
|
| addon 类型检查 | 未装 addon 时相关路径在 `tsconfig exclude`；**装包后须手动移除**对应项 → 见 `project-inventory` **第十节**（非自动） |
|
|
158
159
|
|
|
159
|
-
非用户要求不改 `vite.config.ts` / `build
|
|
160
|
+
非用户要求不改 `vite.config.ts` / `build/**` / **`docs/**`**。
|
|
161
|
+
|
|
162
|
+
### docs/ 目录（只读）
|
|
163
|
+
|
|
164
|
+
| 项 | 说明 |
|
|
165
|
+
|----|------|
|
|
166
|
+
| 用途 | 人类可读文档、UI 风格演示页（`docs/style-templates/`）等 |
|
|
167
|
+
| 与业务关系 | **不参与**业务开发落盘；其中示例代码**不跟随** `src/` 等业务实现同步修改 |
|
|
168
|
+
| AI 行为 | 默认**不读、不改、不引用为落盘目标**；仅用户明确要求更新文档本身时可改 |
|
|
169
|
+
| 参考方式 | 风格选型可**只读浏览**演示页后与用户沟通；中后台功能页仍按 Skill 标准样板在 `src/` 实现 |
|
|
160
170
|
|
|
161
171
|
## 八、环境变量
|
|
162
172
|
|
package/references/crud-pages.md
CHANGED
|
@@ -492,18 +492,54 @@ function handleSizeChange(size: number) {
|
|
|
492
492
|
</template>
|
|
493
493
|
```
|
|
494
494
|
|
|
495
|
-
**设计模式与出厂模式的关键差异**：
|
|
496
|
-
|
|
497
|
-
| 差异点 | 出厂模式 | 设计模式 | JSON 来源 |
|
|
498
|
-
|--------|---------|---------|-----------|
|
|
499
|
-
| 页面标题 | 无 | `.vts-page-header` 含标题+描述+操作 | `structureRequirements.pageRegions.header` |
|
|
500
|
-
| 筛选区 | `bg-bg_color p-5` | `.vts-filter-area`（容器感+分隔线） | `structureRequirements.pageRegions.filter` |
|
|
501
|
-
| 主操作按钮位置 | `ReTableBar #buttons` | `.vts-page-header__actions` | `structureRequirements.pageRegions.header.actions` |
|
|
502
|
-
|
|
|
503
|
-
|
|
|
504
|
-
|
|
|
495
|
+
**设计模式与出厂模式的关键差异**：
|
|
496
|
+
|
|
497
|
+
| 差异点 | 出厂模式 | 设计模式 | JSON 来源 |
|
|
498
|
+
|--------|---------|---------|-----------|
|
|
499
|
+
| 页面标题 | 无 | `.vts-page-header` 含标题+描述+操作 | `structureRequirements.pageRegions.header` |
|
|
500
|
+
| 筛选区 | `bg-bg_color p-5` | `.vts-filter-area`（容器感+分隔线） | `structureRequirements.pageRegions.filter` |
|
|
501
|
+
| 主操作按钮位置 | `ReTableBar #buttons` | `.vts-page-header__actions` | `structureRequirements.pageRegions.header.actions` |
|
|
502
|
+
| 操作栏 | 无独立操作栏 | `.vts-action-bar`（批量操作 + 工具按钮） | `structureRequirements.pageRegions.actionBar` |
|
|
503
|
+
| 表格区 | 无包裹 | `.vts-table-area`（圆角边框） | `structureRequirements.pageRegions.table` |
|
|
504
|
+
| 表头底色 | EP 默认浅灰 | 品牌色浅底 + 强调线（element-plus.scss 全局） | `visual.tableHeader` |
|
|
505
|
+
| 行 hover | EP 默认灰色 | 品牌色极浅底（element-plus.scss 全局） | `visual.rowHover` |
|
|
506
|
+
| 状态标签 | 无规范 | filled/outlined/solid 按列分配 | `component-spec.md` Tag 规范 |
|
|
505
507
|
| 交互行为 | EP 默认 | 按 JSON `interactionSpecs` 实现 | `interactionSpecs` |
|
|
506
508
|
|
|
509
|
+
### 设计模式 CSS 类速查
|
|
510
|
+
|
|
511
|
+
| CSS 类 | 作用 | 对应令牌 |
|
|
512
|
+
|--------|------|---------|
|
|
513
|
+
| `.vts-page-header` | 页面标题区容器 | `--page-header-padding-y/x` |
|
|
514
|
+
| `.vts-page-header__title-text` | 标题文字 | `--page-header-title-size` / `--page-header-title-weight` |
|
|
515
|
+
| `.vts-page-header__subtitle` | 副标题文字 | `--page-header-subtitle-size` / `--page-header-subtitle-color` |
|
|
516
|
+
| `.vts-page-header__actions` | 标题区右侧操作按钮组 | — |
|
|
517
|
+
| `.vts-filter-area` | 筛选区容器（带底部分割线） | `--filter-area-padding` / `--filter-area-border-bottom` |
|
|
518
|
+
| `.vts-action-bar` | 操作栏容器（批量 + 工具按钮） | `--action-bar-padding-y/x` |
|
|
519
|
+
| `.vts-table-area` | 表格区包裹 | `--table-area-border-radius` / `--table-area-border` |
|
|
520
|
+
| `.vts-thumb-circle` | 缩略图圆形首字 | `--thumb-size` / `--thumb-bg` / `--thumb-color` |
|
|
521
|
+
| `.vts-collapse-btn` | 展开收起按钮 | 文字色 + 箭头色 hover 时**加深为品牌色，禁止变淡** |
|
|
522
|
+
|
|
523
|
+
### 设计模式状态标签规范
|
|
524
|
+
|
|
525
|
+
- 状态列默认使用 **filled** 变体（浅色背景 + 语义色文字 + 浅边框）
|
|
526
|
+
- 分类/类型列使用 **outlined** 变体（透明背景 + 语义色边框 + 语义色文字）
|
|
527
|
+
- 关键标记列使用 **solid** 变体（纯色填充 + 白字）
|
|
528
|
+
- **≥3 个 Tag 列时**：四选二（filled + outlined 为推荐搭配），同一列内样式一致
|
|
529
|
+
- 完整规则见 `component-spec.md` 7.9 节 + `list-page.md` 第 7-8 节
|
|
530
|
+
|
|
531
|
+
### 设计模式缩略图列
|
|
532
|
+
|
|
533
|
+
- 商品/用户/文件等有标识的列表首列使用圆形首字缩略图
|
|
534
|
+
- 尺寸：32×32px，`border-radius: 50%`，品牌色浅底 + 品牌色文字
|
|
535
|
+
- 文字：名称首字（中文取首字，英文取首字母大写）
|
|
536
|
+
|
|
537
|
+
### 展开收起按钮 hover 强制规则
|
|
538
|
+
|
|
539
|
+
⚠️ **展开收起按钮 hover 时文字色必须加深（品牌色），禁止变淡/变透明/变浅灰。**
|
|
540
|
+
- 使用自定义 `.vts-collapse-btn` 类，不依赖 `el-button link`（EP link 按钮 hover 会变淡）
|
|
541
|
+
- 箭头图标同步变品牌色，旋转过渡 `0.2s`
|
|
542
|
+
|
|
507
543
|
## 操作列按钮过多（ReTableOperate · 强制）
|
|
508
544
|
|
|
509
545
|
落点：`src/components/ReTableOperate`。列表行操作**必须**用本组件，禁止手写一排 `el-button` / 自造「更多」菜单。
|
|
@@ -11,7 +11,7 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
|
|
|
11
11
|
> 每一项标注：JSON 来源 → 项目文件 → 修改内容 → 验证点。
|
|
12
12
|
> 模板源码保持出厂状态，所有修改在 AI 生成/修改代码时完成。
|
|
13
13
|
>
|
|
14
|
-
> 1:1 还原要求见下方 F1-
|
|
14
|
+
> 1:1 还原要求见下方 F1-F27（框架组件）和 P1-P7（页面代码）步骤。
|
|
15
15
|
|
|
16
16
|
## 双轨
|
|
17
17
|
|
|
@@ -41,11 +41,17 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
|
|
|
41
41
|
4. **设计输出未覆盖的区域 → 保持项目已有实现**，仅同步令牌（色彩/字体/圆角等）
|
|
42
42
|
5. **隐藏/移除功能性元素时**：在回复中明确列出被移除的元素，供用户确认是否需要补回
|
|
43
43
|
|
|
44
|
-
##
|
|
44
|
+
## 触发（自动，无需用户提及 JSON）
|
|
45
45
|
|
|
46
|
-
-
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
> 设计技能（project-ui-design）每次产出时**始终自动附加 `design-handoff/v1` JSON**。
|
|
47
|
+
> 本技能检测到 JSON 存在 → 自动触发完整 C/T/F/S/P 流程，用户无需提及「JSON」「handoff」「桥接」等技术词。
|
|
48
|
+
|
|
49
|
+
**触发条件**（满足任一）：
|
|
50
|
+
|
|
51
|
+
1. 会话中存在 `design-handoff/v1` JSON（设计技能自动产出）
|
|
52
|
+
2. 会话中存在设计技能的 HTML 产出 + 用户要求按设计结果适配工程代码
|
|
53
|
+
|
|
54
|
+
⚠️ 触发后 **必须执行完整 C/T/F/S/P 五步**，禁止只改主色或只改令牌。
|
|
49
55
|
|
|
50
56
|
## 规范识别回执（动手前必出）
|
|
51
57
|
|
|
@@ -68,14 +74,14 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
|
|
|
68
74
|
|
|
69
75
|
| # | JSON 来源 | 项目文件 | 修改内容 | 验证 |
|
|
70
76
|
|---|---------|---------|---------|------|
|
|
71
|
-
| C1 | `shell.sidebar` | `platform-config.json` → `Theme` | `dark-gradient` → `default`（深色侧栏）；仅明确要白菜单时 `light` |
|
|
77
|
+
| C1 | `shell.sidebar` | `platform-config.json` → `Theme` | `dark-gradient` → `default`（深色侧栏）；仅明确要白菜单时 `light` | 侧栏背景为深色 |
|
|
72
78
|
| C2 | `shell.showModel` | `platform-config.json` → `ShowModel` | 设为 JSON 值（`line`/`card`/`chrome`/`smart`） | 页签风格与设计一致 |
|
|
73
79
|
| C3 | `shell.darkMode` | `platform-config.json` → `DarkMode` | `true`/`false` | 暗色模式开关 |
|
|
74
80
|
| C4 | `shell.contentMode` | `platform-config.json` → `OverallStyle` | `vertical`/`horizontal`/`mix` | 布局模式 |
|
|
75
|
-
| C5 | `shell.contentMargin` | `platform-config.json` → `contentMargin` |
|
|
81
|
+
| C5 | `shell.contentMargin` | `platform-config.json` → `contentMargin` | 按 JSON 值 | 内容区间距 |
|
|
76
82
|
| C6 | `tokens.brandPrimary` + `tokens.primaryScale` | `platform-config.json` → `EpThemeColor` + `PrimaryScale` | HEX 值 + 10 级色阶数组 | 主色全局生效；运行时优先用 PrimaryScale 精确色阶，不再走 chroma 计算 |
|
|
77
|
-
| C7 | `shell.dataTheme` | `platform-config.json` → `dataTheme` |
|
|
78
|
-
| C8 | — | `platform-config.json` → `Version` |
|
|
83
|
+
| C7 | `shell.dataTheme` | `platform-config.json` → `dataTheme` | 按 JSON 值 | 侧栏主题色 |
|
|
84
|
+
| C8 | — | `platform-config.json` → `Version` | **必须自增** | 否则 localStorage 缓存不刷新 |
|
|
79
85
|
|
|
80
86
|
**禁止**：把设计「浅色内容」写成 `Theme=light`。`contentMode=light` 与 `Theme=light` 不是一回事。深色侧栏 = `Theme=default`。
|
|
81
87
|
|
|
@@ -100,24 +106,14 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
|
|
|
100
106
|
| T11 | `componentSize` | 控件段 | `--control-height-sm` / `--control-height` / `--control-height-lg` | 值与 JSON 一致 |
|
|
101
107
|
| T12 | `dataViz` | 可视化段 | `--chart-categorical-*` / `--chart-success` / `--chart-warning` 等 | 值与 JSON 一致 |
|
|
102
108
|
|
|
103
|
-
侧栏深色（`shell.sidebar === "dark-gradient"`）时追加写入 `design-tokens.scss
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
--sidebar-bg
|
|
107
|
-
--sidebar-logo-bg: #002140;
|
|
108
|
-
--sidebar-border-color: transparent;
|
|
109
|
-
--sidebar-menu-text: rgb(255 255 255 / 65%);
|
|
110
|
-
--sidebar-menu-text-hover: #fff;
|
|
111
|
-
--sidebar-menu-active-text: #fff;
|
|
112
|
-
--sidebar-menu-hover-bg: rgb(255 255 255 / 8%);
|
|
113
|
-
--sidebar-menu-active-bg: var(--primary-color);
|
|
114
|
-
--sidebar-submenu-bg: color-mix(in srgb, #001529 82%, #000);
|
|
115
|
-
--sidebar-active-indicator: var(--primary-color);
|
|
116
|
-
```
|
|
109
|
+
侧栏深色（`shell.sidebar === "dark-gradient"`）时追加写入 `design-tokens.scss` 的侧栏令牌段：
|
|
110
|
+
|
|
111
|
+
> 令牌变量名固定（`--sidebar-bg` / `--sidebar-logo-bg` / `--sidebar-menu-text` 等），**值来自 JSON `tokens` 或 `design-tokens.md` 侧栏令牌段**。
|
|
112
|
+
> 核心令牌：`--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)`）。
|
|
117
113
|
|
|
118
114
|
---
|
|
119
115
|
|
|
120
|
-
## 三、框架组件修改（F1-
|
|
116
|
+
## 三、框架组件修改（F1-F27 · 1:1 还原核心）
|
|
121
117
|
|
|
122
118
|
> 此节实现 `structureRequirements` 和 `interactionSpecs` 的要求。
|
|
123
119
|
> 模板源码保持出厂，AI 获取 JSON 后逐项修改组件代码。
|
|
@@ -126,60 +122,150 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
|
|
|
126
122
|
|
|
127
123
|
| # | JSON 来源 | 项目文件 | 修改内容 | 验证 |
|
|
128
124
|
|---|---------|---------|---------|------|
|
|
129
|
-
| F1 | `structureRequirements.frameworkShell.header` | `src/layout/components/navbar/index.vue` | 顶栏组成：折叠按钮（左）+ 语言切换 + 功能图标组 + 分割线 + 欢迎区 +
|
|
125
|
+
| F1 | `structureRequirements.frameworkShell.header` | `src/layout/components/navbar/index.vue` | 顶栏组成：折叠按钮（左）+ 语言切换 + 功能图标组 + 分割线 + 欢迎区 + 头像（右）。**设计中未体现的元素必须移除**（设置/通知/全屏/搜索/面包屑等） | 元素与设计完全一致，不多不少 |
|
|
130
126
|
| F2 | `interactionSpecs.languageSwitch` | navbar/ 语言切换组件 | **改为内联文字**（中 / EN），竖线分隔。激活态品牌色文字，非激活次要色。**禁止下拉框** | 语言切换为内联文字 |
|
|
131
127
|
| F3 | `structureRequirements.frameworkShell.headerLayout` | navbar/index.vue | flex 两端对齐：左侧折叠按钮，右侧功能组 | 布局与设计一致 |
|
|
132
128
|
| F4 | `interactionSpecs.menuActive` → 头像区 | navbar/ 欢迎区 | 悬停态：头像微浮起 + 欢迎文字变品牌色 | hover 效果与设计一致 |
|
|
129
|
+
| F5 | `frameworkShell.header` 元素清单 | navbar/index.vue | **设置按钮**：设计无则 `display:none` 或删除组件引用 | 设置按钮不出现 |
|
|
130
|
+
| F6 | `frameworkShell.header` 元素清单 | navbar/index.vue | **通知/消息按钮**：设计无则隐藏 | 通知图标不出现 |
|
|
131
|
+
| F7 | `frameworkShell.header` 元素清单 | navbar/index.vue | **全屏按钮**：设计无则隐藏 | 全屏图标不出现 |
|
|
132
|
+
| F8 | `frameworkShell.header` 元素清单 | navbar/index.vue | **面包屑**：设计无则隐藏（统一框架默认无面包屑） | 顶栏无面包屑 |
|
|
133
|
+
| F9 | `frameworkShell.header` 元素清单 | navbar/index.vue | **搜索框**：设计无则隐藏（统一框架默认无搜索框） | 顶栏无搜索框 |
|
|
133
134
|
|
|
134
135
|
### 3.2 侧栏 sidebar
|
|
135
136
|
|
|
136
137
|
| # | JSON 来源 | 项目文件 | 修改内容 | 验证 |
|
|
137
138
|
|---|---------|---------|---------|------|
|
|
138
|
-
|
|
|
139
|
-
|
|
|
140
|
-
|
|
|
141
|
-
|
|
|
142
|
-
|
|
|
139
|
+
| F10 | `structureRequirements.frameworkShell.sidebar.logoArea` | `src/layout/components/sidebar/` | Logo 区：品牌色方块 + 白字首字（尺寸/圆角按 JSON 值），非默认彩色图标 | Logo 风格统一 |
|
|
140
|
+
| F11 | `structureRequirements.frameworkShell.sidebar.menuItemHeight` | sidebar/ + `element-plus.scss` | 菜单项高度按 JSON 值 | 间距有呼吸感 |
|
|
141
|
+
| F12 | `interactionSpecs.menuActive` | sidebar/ + `element-plus.scss` | **菜单激活态**：品牌色极浅底 + 右侧强调条 + 品牌色文字。**禁止纯蓝底白字** | 激活态视觉锚点清晰 |
|
|
142
|
+
| F13 | `structureRequirements.frameworkShell.sidebar.collapsed` | sidebar/ 折叠态 | 仅图标，宽度按 `geometry.siderCollapsedWidth` | 折叠宽度与设计一致 |
|
|
143
|
+
| F14 | `shell.sidebar` → 深色侧栏 | `theme.scss` / `sidebar.scss` | 侧栏背景色按 JSON/令牌库值（深色），非出厂白色 | 侧栏深色 |
|
|
144
|
+
| F15 | `frameworkShell.sidebar.collapseButtonPosition` | sidebar/ | **折叠按钮位置**：设计在顶部则放 Logo 区；设计在底部则放侧栏底部 | 折叠按钮位置与设计一致 |
|
|
145
|
+
| F16 | `frameworkShell.sidebar.bottomCollapse` | sidebar/ | **底部折叠按钮**：设计无则 **必须隐藏**（`display:none` 或删除底部触发器），折叠功能移至顶部 | 侧栏底部无折叠按钮 |
|
|
146
|
+
| F17 | `frameworkShell.sidebar.hoverCollapse` | sidebar/ | **菜单 hover 折叠功能**：设计无则 **必须禁用**（删除 `show-collapse-on-hover` 或等效逻辑） | 菜单 hover 不出现折叠提示 |
|
|
147
|
+
| F18 | `frameworkShell.sidebar.groupTitle` | sidebar/ | 菜单分组标题：设计无分组则移除分组标题 | 分组标题与设计一致 |
|
|
143
148
|
|
|
144
149
|
### 3.3 页签 tabs
|
|
145
150
|
|
|
146
151
|
| # | JSON 来源 | 项目文件 | 修改内容 | 验证 |
|
|
147
152
|
|---|---------|---------|---------|------|
|
|
148
|
-
|
|
|
149
|
-
|
|
|
150
|
-
|
|
|
153
|
+
| F19 | `shell.showModel` | `src/layout/components/tabs/` + `element-plus.scss` | 页签风格按设计值实现（line: 底部强调线；card: 卡片式；chrome: 谷歌式） | 风格与设计一致 |
|
|
154
|
+
| F20 | `structureRequirements.frameworkShell.tabs.homeTab` | tabs/ | 首页页签固定左侧，**不可关闭** | 首页页签行为正确 |
|
|
155
|
+
| F21 | `interactionSpecs.tabsActive` | `element-plus.scss` | 激活页签：品牌色文字 + 底部强调线（line 风格） | 激活态视觉与设计一致 |
|
|
156
|
+
| F22 | `interactionSpecs.tabsUnderline` | `element-plus.scss` | **页签下划线居中**：`line` 模式下激活下划线与文字等宽、严格居中，禁止偏左/偏右 | 横线视觉居中 |
|
|
157
|
+
| F23 | `frameworkShell.tabs.height` | tabs/ + `design-tokens.scss` | 页签高度严格按 `--tabs-height`，内部 flex 垂直居中 | 文字垂直居中 |
|
|
158
|
+
| F24 | `interactionSpecs.tabsClose` | `element-plus.scss` | 关闭按钮始终可见，hover 变色（按 JSON `interactionSpecs.tabsClose` 值） | 关闭按钮行为正确 |
|
|
159
|
+
| F25 | `frameworkShell.tabs.contextMenu` | tabs/ | 右键菜单：刷新/关闭/关闭其他/关闭左侧/关闭右侧/全部关闭 | 右键菜单项与设计一致 |
|
|
151
160
|
|
|
152
161
|
### 3.4 内容区 app-main
|
|
153
162
|
|
|
154
163
|
| # | JSON 来源 | 项目文件 | 修改内容 | 验证 |
|
|
155
164
|
|---|---------|---------|---------|------|
|
|
156
|
-
|
|
|
157
|
-
|
|
|
165
|
+
| F26 | `geometry.contentPadding` | `src/layout/components/app-main/` + `design-tokens.scss` | 内容区内边距按 JSON `geometry.contentPadding` 值，非出厂默认 | 间距有呼吸感 |
|
|
166
|
+
| F27 | `tokens.layoutBg` | app-main/ + `design-tokens.scss` | 内容区背景色按 JSON `tokens.layoutBg` 值 | 背景层次分明 |
|
|
158
167
|
|
|
159
168
|
---
|
|
160
169
|
|
|
161
|
-
##
|
|
170
|
+
## 四、元素自查隐藏清单（设计没有 → 必删）
|
|
162
171
|
|
|
163
|
-
|
|
172
|
+
> 设计输出（JSON `structureRequirements` 或设计稿图）中没有的元素，必须隐藏或移除。
|
|
173
|
+
> 以下为高频检查项，**逐项对照**，设计中没有的一律处理。
|
|
174
|
+
> 隐藏/移除功能性元素时，在最终回复的「设计落地」结果块中列出被移除项。
|
|
164
175
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
|
168
|
-
|
|
169
|
-
|
|
|
170
|
-
|
|
|
171
|
-
|
|
|
172
|
-
|
|
|
173
|
-
|
|
|
174
|
-
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
176
|
+
### 4.1 顶栏元素
|
|
177
|
+
|
|
178
|
+
| 元素 | 组件位置 | 默认状态 | 设计无则 |
|
|
179
|
+
|------|---------|---------|---------|
|
|
180
|
+
| 设置按钮 | navbar 右侧 | 显示 | `display:none` 或删除组件引用 |
|
|
181
|
+
| 通知/消息按钮 | navbar 右侧 | 显示 | 同上 |
|
|
182
|
+
| 全屏按钮 | navbar 右侧 | 显示 | 同上 |
|
|
183
|
+
| 搜索框 | navbar 左侧或中部 | 不显示 | 确认不显示 |
|
|
184
|
+
| 面包屑 | navbar 下方或内 | 不显示 | 确认不显示 |
|
|
185
|
+
| 语言切换下拉 | navbar 右侧 | 内联文字 | 确认是内联文字，非下拉框 |
|
|
186
|
+
|
|
187
|
+
### 4.2 侧栏元素
|
|
188
|
+
|
|
189
|
+
| 元素 | 组件位置 | 默认状态 | 设计无则 |
|
|
190
|
+
|------|---------|---------|---------|
|
|
191
|
+
| 底部折叠按钮 | sidebar 底部 | 显示 | 隐藏，折叠按钮移至顶部 Logo 区 |
|
|
192
|
+
| 菜单 hover 折叠提示 | sidebar 菜单 hover 时 | 显示 | 禁用（删 `show-collapse-on-hover` 或等效逻辑） |
|
|
193
|
+
| 菜单分组标题 | sidebar 菜单中 | 大写字母 | 设计无分组则移除 |
|
|
194
|
+
| 子菜单展开箭头 | sidebar 子菜单 | 显示 | 确认样式与设计一致 |
|
|
195
|
+
|
|
196
|
+
### 4.3 列表页元素
|
|
197
|
+
|
|
198
|
+
| 元素 | 组件位置 | 默认状态 | 设计无则 |
|
|
199
|
+
|------|---------|---------|---------|
|
|
200
|
+
| 密度切换按钮 | 表格工具栏 | 显示 | 设计无则隐藏 |
|
|
201
|
+
| 列设置按钮 | 表格工具栏 | 显示 | 设计无则隐藏 |
|
|
202
|
+
| 刷新按钮 | 表格工具栏 | 显示 | 设计无则隐藏 |
|
|
203
|
+
| 搜索框（表格内） | 表格头部 | 不显示 | 确认不显示 |
|
|
204
|
+
| 序号列 | 表格第一列 | 不显示 | 设计无则不加 |
|
|
205
|
+
| 展开行按钮 | 表格行首 | 不显示 | 设计无则不加 |
|
|
206
|
+
|
|
207
|
+
### 4.4 移除后告知格式
|
|
208
|
+
|
|
209
|
+
隐藏/移除以上功能性元素时，在最终回复中追加：
|
|
210
|
+
|
|
211
|
+
```markdown
|
|
212
|
+
## 设计落地 — 已移除元素（设计中未体现）
|
|
213
|
+
|
|
214
|
+
- 顶栏设置按钮
|
|
215
|
+
- 侧栏底部折叠按钮（已移至 Logo 区）
|
|
216
|
+
- 表格密度切换按钮
|
|
217
|
+
- ...
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
---
|
|
221
|
+
|
|
222
|
+
## 五、样式文件修改（S1 · 机制 + 区域映射）
|
|
223
|
+
|
|
224
|
+
### 5.1 机制
|
|
225
|
+
|
|
226
|
+
1. 读取 JSON 的 `visual` + `interactionSpecs` 字段
|
|
227
|
+
2. 按「区域映射表」逐项将 JSON 值写入 `element-plus.scss` 对应 CSS 选择器
|
|
228
|
+
3. **所有值引用 `design-tokens.scss` 令牌变量**，不硬编码
|
|
229
|
+
4. JSON 无值时回退 `design-tokens.md` 默认值（设计技能令牌库）
|
|
230
|
+
5. `dark.scss` 对以上规则逐条提供暗色覆盖
|
|
231
|
+
|
|
232
|
+
### 5.2 原则（硬约束，不随设计变化而失效）
|
|
233
|
+
|
|
234
|
+
⚠️ **hover 禁止变淡**：所有 hover 状态的文字色必须加深或变色，禁止变淡/变透明/变浅灰。
|
|
235
|
+
⚠️ **下划线居中**：line 风格页签激活下划线与文字等宽、严格居中，禁止偏左偏右。
|
|
236
|
+
⚠️ **值不硬编码**：本表不指定具体 hex/px/时长值，一切值来自 JSON 或令牌库。
|
|
237
|
+
|
|
238
|
+
### 5.3 区域映射表（JSON 字段 → CSS 选择器）
|
|
239
|
+
|
|
240
|
+
> 本表只映射「哪个 JSON 字段 → 哪个 CSS 选择器 → 验证什么」，**不硬编码值**。
|
|
241
|
+
> 具体值由 JSON `visual` / `interactionSpecs` 驱动，令牌变量承载。
|
|
242
|
+
|
|
243
|
+
| 区域 | JSON 来源 | CSS 选择器 | 验证 |
|
|
244
|
+
|------|---------|-----------|------|
|
|
245
|
+
| 卡片静态 | `visual.shadowCardRest` | `.el-card` | 卡片有投影 |
|
|
246
|
+
| 卡片 hover | `visual.shadowCardHover` + `interactionSpecs.cardHover` | `.el-card:hover` | 卡片 hover 有浮起感 |
|
|
247
|
+
| 按钮 hover | `interactionSpecs.buttonHover` | `.el-button:hover` | 按钮 hover 有上浮感 |
|
|
248
|
+
| 输入框聚焦 | `interactionSpecs.inputFocus` | `.el-input__wrapper:focus-within` | 输入框聚焦有光环 |
|
|
249
|
+
| 表格行 hover | `interactionSpecs.tableRowHover` | `.el-table tbody tr:hover` | 行 hover 有品牌色感 |
|
|
250
|
+
| 表头 | `visual.tableHeaderBorderBottom` | `.el-table thead th` | 表头有层次感 |
|
|
251
|
+
| 菜单激活 | `visual.menuActiveBorderRight` | `.el-menu-item.is-active` | 菜单激活有锚点 |
|
|
252
|
+
| 分页激活 | `interactionSpecs.paginationActive` | `.el-pagination .is-active` | 分页激活页有品牌色 |
|
|
253
|
+
| 全局过渡 | `visual.transitionBase` | `*` (transition) | 交互有平滑感 |
|
|
254
|
+
| 暗色覆盖 | — | `html.dark` 下以上选择器 | 暗色模式完整 |
|
|
255
|
+
| 展开收起 hover | `interactionSpecs.collapseBtnHover` | `.vts-collapse-btn:hover` | hover 文字不变浅 |
|
|
256
|
+
| 操作列 hover | `interactionSpecs.actionBtnHover` | `.vts-table-area .el-button--text:hover` | 操作列 hover 文字加深 |
|
|
257
|
+
| 页签关闭 hover | `interactionSpecs.tabsCloseHover` | `.el-tabs__item .el-icon-close:hover` | 关闭按钮 hover 有反馈 |
|
|
258
|
+
| 页签下划线 | `interactionSpecs.tabsUnderline` | `.el-tabs__active-bar` | 横线居中 |
|
|
259
|
+
| 下拉选项 hover | `interactionSpecs.selectOptionHover` | `.el-select-dropdown__item.hover` | 下拉项 hover 有品牌色感 |
|
|
260
|
+
| 复选框 hover | `interactionSpecs.checkboxHover` | `.el-checkbox__inner:hover` | 复选框 hover 有反馈 |
|
|
261
|
+
| 开关过渡 | `interactionSpecs.switchTransition` | `.el-switch` | 开关切换有动画 |
|
|
262
|
+
| Tag hover | `interactionSpecs.tagHover` | `.el-tag:hover` | Tag hover 有反馈 |
|
|
263
|
+
|
|
264
|
+
> 设计技能输出更新时，JSON 值变化 → 令牌变量变化 → CSS 规则自动生效，**本表结构不动**。
|
|
179
265
|
|
|
180
266
|
---
|
|
181
267
|
|
|
182
|
-
##
|
|
268
|
+
## 六、页面代码修改（P1-P7）
|
|
183
269
|
|
|
184
270
|
| # | JSON 来源 | 项目文件 | 修改内容 | 验证 |
|
|
185
271
|
|---|---------|---------|---------|------|
|
|
@@ -204,35 +290,49 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
|
|
|
204
290
|
|
|
205
291
|
---
|
|
206
292
|
|
|
207
|
-
##
|
|
293
|
+
## 七、执行顺序
|
|
208
294
|
|
|
209
295
|
1. **配置修改**（C1-C8）→ `platform-config.json`
|
|
210
296
|
2. **令牌写入**（T1-T12）→ `design-tokens.scss`
|
|
211
|
-
3. **框架组件修改**（F1-
|
|
212
|
-
4.
|
|
213
|
-
5.
|
|
297
|
+
3. **框架组件修改**（F1-F27）→ navbar / sidebar / tabs / app-main
|
|
298
|
+
4. **元素自查隐藏**（第四章清单）→ 逐项对照，设计无则删
|
|
299
|
+
5. **样式修改**（S1 区域映射）→ `element-plus.scss` + `dark.scss`
|
|
300
|
+
6. **页面代码生成**（P1-P7）→ 业务页面 .vue
|
|
214
301
|
|
|
215
302
|
---
|
|
216
303
|
|
|
217
|
-
##
|
|
218
|
-
|
|
219
|
-
| 条件 | 处理 |
|
|
220
|
-
|
|
221
|
-
|
|
|
222
|
-
|
|
|
223
|
-
| 未写入 `shell.showModel` | 硬失败：按 JSON 补写 |
|
|
224
|
-
| `primaryScale` 未写入 `--primary-0..9` |
|
|
225
|
-
| 用 `#F56C6C`
|
|
226
|
-
|
|
|
227
|
-
|
|
|
228
|
-
|
|
|
229
|
-
|
|
|
230
|
-
|
|
|
231
|
-
|
|
|
304
|
+
## 八、硬失败（任一项命中 = 落地失败，必须修正）
|
|
305
|
+
|
|
306
|
+
| 类别 | 条件 | 处理 |
|
|
307
|
+
|------|------|------|
|
|
308
|
+
| 配置 | 只改主色/tokens，未改 Theme / Version | 硬失败：补全 C1-C8 |
|
|
309
|
+
| 配置 | 设计 `sidebar=dark-gradient` 但 `Theme` 仍为 `light` | 硬失败：改为 `default` 并 `Version++` |
|
|
310
|
+
| 配置 | 未写入 `shell.showModel` | 硬失败：按 JSON 补写 |
|
|
311
|
+
| 配置 | `primaryScale` 未写入 `--primary-0..9` | 硬失败：补全 10 级色阶 |
|
|
312
|
+
| 令牌 | 用 EP 默认错误色 `#F56C6C` 而非令牌引用 | 硬失败：改为 `var(--error-color)` 或对应令牌值 |
|
|
313
|
+
| 令牌 | 壳层/弹窗写死 px | 硬失败：改 `var(--…)` |
|
|
314
|
+
| 令牌 | 改了 margin 后列表仍用 `100vh` 减顶栏 | 硬失败：迁 flex / `vts-page-card` |
|
|
315
|
+
| 框架-顶栏 | 顶栏元素与设计不一致（多了或少了） | 硬失败：按 `frameworkShell.header` 逐项对齐 |
|
|
316
|
+
| 框架-顶栏 | 语言切换为下拉框（非内联文字） | 硬失败：改为内联文字 |
|
|
317
|
+
| 框架-顶栏 | 设置按钮设计无但代码中还在 | 硬失败：删除或 `display:none` |
|
|
318
|
+
| 框架-侧栏 | 侧栏底部折叠按钮设计无但还在 | 硬失败：隐藏，折叠按钮移至顶部 |
|
|
319
|
+
| 框架-侧栏 | 菜单 hover 出现折叠功能设计无但还在 | 硬失败：禁用该功能 |
|
|
320
|
+
| 框架-侧栏 | 菜单激活态无品牌色底+强调条 | 硬失败：按 `interactionSpecs.menuActive` 补充 |
|
|
321
|
+
| 框架-页签 | 页签横线不居中 | 硬失败：调整下划线位置，确保与文字等宽居中 |
|
|
322
|
+
| 框架-页签 | 首页页签可关闭 | 硬失败：设为不可关闭 |
|
|
323
|
+
| 样式 | 展开收起按钮 hover 文字变浅 | 硬失败：hover 文字色加深或变色，**禁止变淡** |
|
|
324
|
+
| 样式 | 表格行 hover 无品牌色底 | 硬失败：补充 hover 背景色 |
|
|
325
|
+
| 样式 | 卡片/按钮 hover 无浮起效果 | 硬失败：补充 transform + shadow |
|
|
326
|
+
| 样式 | 输入框聚焦无光环 | 硬失败：补充 focus 阴影 |
|
|
327
|
+
| 页面 | 页面无标题区 / 筛选区无容器感 | 硬失败：按 `moduleComposition` 补充 |
|
|
328
|
+
| 页面 | 状态标签样式与设计规范不一致 | 硬失败：按 `component-spec.md` Tag 规范修正 |
|
|
329
|
+
| 页面 | 操作列按钮样式混乱（混用 button/文字链接） | 硬失败：统一为文字链接 + "更多"下拉 |
|
|
330
|
+
| 页面 | 设计中未体现的元素未隐藏 | 硬失败：按元素自查隐藏清单逐项处理 |
|
|
331
|
+
| 页面 | `structureRequirements` 或 `interactionSpecs` 段未实现 | 硬失败：按 F1-F27 / P1-P7 补充 |
|
|
232
332
|
|
|
233
333
|
---
|
|
234
334
|
|
|
235
|
-
##
|
|
335
|
+
## 九、落地完整性校验（code-quality 额外执行）
|
|
236
336
|
|
|
237
337
|
> 当 `design-handoff/v1` JSON 存在时，`code-quality` 必须额外执行以下校验。
|
|
238
338
|
> 任一项未通过 = 硬失败，必须修正后重新生成。
|
|
@@ -257,13 +357,13 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
|
|
|
257
357
|
- [ ] navbar 顶栏组成与 `structureRequirements.frameworkShell.header` 一致
|
|
258
358
|
- [ ] 语言切换为内联文字（非下拉框）
|
|
259
359
|
- [ ] sidebar Logo 区为品牌色方块 + 白字
|
|
260
|
-
- [ ] 菜单激活态有品牌色极浅底 +
|
|
360
|
+
- [ ] 菜单激活态有品牌色极浅底 + 右侧强调条
|
|
261
361
|
- [ ] 页签风格与 `shell.showModel` 一致
|
|
262
362
|
- [ ] 内容区内边距与 `geometry.contentPadding` 一致
|
|
263
363
|
|
|
264
364
|
### 样式层
|
|
265
365
|
|
|
266
|
-
- [ ] `element-plus.scss`
|
|
366
|
+
- [ ] `element-plus.scss` 视觉规则按 S1 区域映射表逐项写入，值来自 JSON `visual` / `interactionSpecs`
|
|
267
367
|
- [ ] `dark.scss` 对以上视觉规则有暗色覆盖
|
|
268
368
|
|
|
269
369
|
### 页面层
|