@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,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
skill: design-system
|
|
3
|
-
description: 项目设计系统静态说明。描述令牌体系、主题系统、暗色模式、布局框架、EP 定制规则、加载顺序和禁止清单,供 AI 查阅。落地流程见 design-handoff.md。
|
|
3
|
+
description: 项目设计系统静态说明。描述令牌体系、主题系统、暗色模式、布局框架、EP 定制规则、加载顺序和禁止清单,供 AI 查阅。落地流程见 design-handoff.md,还原度验证见 design-verify.md。
|
|
4
4
|
scope: project
|
|
5
5
|
tags: [design-system, design-tokens, element-plus, theme, css-variables, dark-mode]
|
|
6
6
|
---
|
|
@@ -0,0 +1,314 @@
|
|
|
1
|
+
---
|
|
2
|
+
skill: design-verify
|
|
3
|
+
description: 设计还原度验证 — 区域级验证(10.1-10.7) + 逐属性CSS校验(10.8) + 设计变更增量同步(10.9)。C/T/F/Co/S/P 执行完成后按本文件逐项验证。
|
|
4
|
+
scope: project
|
|
5
|
+
tags: [handoff, verify, css-audit, design-sync, hard-fail]
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# 设计还原度验证
|
|
9
|
+
|
|
10
|
+
> 本文件由 `design-handoff.md` 执行流程第 8 步加载。
|
|
11
|
+
> C/T/F/Co/S/P 改造执行完毕后,按本文件逐项验证还原度。
|
|
12
|
+
> **未通过项必须修正后才能进入功能完整性核查和 code-quality 闸门。**
|
|
13
|
+
|
|
14
|
+
## 验证流程总览
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
10.1-10.2 框架层验证(顶栏/侧栏/页签/内容区)
|
|
18
|
+
↓
|
|
19
|
+
10.3 页面层验证(列表页 8 区域,其他页面类型参照对应设计规范)
|
|
20
|
+
↓
|
|
21
|
+
10.4 组件级验证(按钮/输入框/Tag/下拉/分页/空状态)
|
|
22
|
+
↓
|
|
23
|
+
10.5 细节验证(15 项易遗漏精细节)
|
|
24
|
+
↓
|
|
25
|
+
10.6-10.7 验证方法 + 区域级验证报告输出
|
|
26
|
+
↓
|
|
27
|
+
10.8 逐属性 CSS 校验(从设计源文件提取属性 → 逐条比对项目代码 → 回读校验)
|
|
28
|
+
↓
|
|
29
|
+
10.9 设计变更增量同步(仅设计变更时执行)
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
---
|
|
33
|
+
|
|
34
|
+
## 10.1 验证原则
|
|
35
|
+
|
|
36
|
+
1. **对照设计规范,不凭感觉**:每一项都有对应的设计规范来源(unified-framework.md / list-page.md / component-spec.md / design-tokens.md),禁止「大概差不多」
|
|
37
|
+
2. **逐区域对照**:从外到内——框架 → 页面区域 → 组件 → 细节元素,逐层验证
|
|
38
|
+
3. **设计为准**:凡是设计规范有明确定义的,以设计为准,覆盖模板默认值
|
|
39
|
+
4. **令牌为桥**:所有颜色/尺寸/间距都通过 CSS 变量令牌传递,验证时检查「令牌值是否正确」+「组件是否引用了正确的令牌」
|
|
40
|
+
|
|
41
|
+
## 10.2 框架层还原度验证(6 类)
|
|
42
|
+
|
|
43
|
+
| 验证项 | 设计规范来源 | 验证方法 | 预期结果 |
|
|
44
|
+
|--------|-------------|---------|---------|
|
|
45
|
+
| 顶栏高度 | unified-framework.md §3 | 检查 `--header-height` 令牌值 + navbar 实际高度 | 54px |
|
|
46
|
+
| 顶栏元素组成 | unified-framework.md §3 + F1-F9 | 对照设计稿/设计 spec,逐个元素检查存在性和顺序 | 左:折叠按钮;右:语言/全屏/用户(无设置/通知/搜索/面包屑) |
|
|
47
|
+
| 折叠按钮位置 | unified-framework.md §3 | 检查折叠按钮是否垂直居中,尺寸是否 40×40px | 垂直居中,40×40px |
|
|
48
|
+
| 侧栏宽度 | unified-framework.md §2 | 检查 `--sidebar-width` / `--sidebar-collapsed-width` | 展开 208px / 折叠 64px |
|
|
49
|
+
| 侧栏背景色 | unified-framework.md §2 | 检查侧栏背景色令牌值 | 深色 #001529 |
|
|
50
|
+
| 侧栏激活态 | unified-framework.md §2 + list-page.md §12 | 检查激活菜单项的背景、文字、指示条 | 实色品牌底 + 白色文字 + 左侧 3px 指示条 |
|
|
51
|
+
| 页签高度 | unified-framework.md §4 | 检查 `--tabs-height` + tabs 实际高度 | 40px |
|
|
52
|
+
| 页签激活态 | unified-framework.md §4 + component-spec.md §5 | line 模式下检查激活页签样式 | 文字品牌色 + font-weight 500 + 底部 2px 强调线,无背景变化 |
|
|
53
|
+
| 内容区背景色 | unified-framework.md §5 | 检查内容区背景色 | #F5F5F5(灰底) |
|
|
54
|
+
| 内容区内边距 | unified-framework.md §5 | 检查 `--layout-content-padding` | 24px |
|
|
55
|
+
|
|
56
|
+
## 10.3 列表页还原度验证(8 区域)
|
|
57
|
+
|
|
58
|
+
> 以列表页为例,其他页面类型参照对应设计规范文件执行。
|
|
59
|
+
> 按页面区域从上到下逐一验证。
|
|
60
|
+
|
|
61
|
+
| 区域 | 验证项 | 设计规范来源 | 预期结果 |
|
|
62
|
+
|------|--------|-------------|---------|
|
|
63
|
+
| **卡片整体** | 阴影、圆角、边框 | list-page.md §2 | shadow + 8px 圆角 + 无边框 |
|
|
64
|
+
| **页面标题区** | 标题字号/字重、描述文字、操作按钮、padding | list-page.md §3 + design-tokens.md §26 | 标题 20px/600、描述 13px/三级文字、右操作按钮、padding 20px |
|
|
65
|
+
| **筛选区** | 背景、圆角、底部分隔线、内边距 | list-page.md §3 + §12 | 白底、6px 圆角、底部 1px #F0F0F0 分隔线、padding 20px |
|
|
66
|
+
| **筛选区控件** | 输入框高度、圆角、focus 效果 | component-spec.md §1 | 高度 32px、圆角 6px、focus 有品牌色光环 |
|
|
67
|
+
| **工具栏** | 左右布局、批量操作按钮、工具按钮(刷新/密度/列设置) | list-page.md §4 | 左批量操作、右工具按钮;3 个工具按钮都存在;按钮间 1px 竖分隔线 |
|
|
68
|
+
| **工具栏细节** | 刷新图标大小、密度选项、列设置面板宽度 | list-page.md §4 + §12 | icon 16px;3 档密度(宽松/默认/紧凑);列设置面板 200px |
|
|
69
|
+
| **表格表头** | 高度、背景色、文字色、字重、底部分隔线 | list-page.md §6 + §12 | 高度 48px、浅灰底、文字 600、底部 1px #F0F0F0 |
|
|
70
|
+
| **表格行** | 行高、hover 效果、边框 | list-page.md §6 + §12 | 默认 47px(middle);hover 品牌色极浅底;行间 1px 分隔线 |
|
|
71
|
+
| **操作列** | 按钮样式、分隔线、更多按钮、sticky | list-page.md §5 + component-spec.md §7 | 纯文字链接、无图标、1px×14px 竖分隔线、更多按钮有箭头、sticky 右侧 |
|
|
72
|
+
| **分页区** | 布局、默认条数、可选条数、跳转框 | list-page.md §7 | 左右两段式、默认 10 条/页、可选 10/20/50、跳转框 48px |
|
|
73
|
+
| **模块分割线** | 各区域之间的分割线位置和颜色 | list-page.md §2 + §12 | 区域交界处 1px #F0F0F0 分割线 |
|
|
74
|
+
| **模块间距** | 各区域 padding 值 | list-page.md §2 + design-tokens.md §26 | 标题 20px / 筛选 20px / 工具栏 20px 8px / 表格 0 20px / 分页 8px 20px 20px |
|
|
75
|
+
|
|
76
|
+
## 10.4 组件级还原度验证(核心组件)
|
|
77
|
+
|
|
78
|
+
| 组件 | 验证项 | 设计规范来源 | 预期结果 |
|
|
79
|
+
|------|--------|-------------|---------|
|
|
80
|
+
| **按钮** | 高度、圆角、主色按钮颜色/hover/active | component-spec.md §2 | 高度 32px、圆角 6px、主色 #245BFF、hover #407BFF、active #1546E0 |
|
|
81
|
+
| **输入框** | 高度、圆角、focus 光环 | component-spec.md §1 | 高度 32px、圆角 6px、focus 外阴影 0 0 0 2px #E8F0FF |
|
|
82
|
+
| **Tag/标签** | 样式、5 种状态色 | component-spec.md §3 | 按列分配 filled/outlined/solid 样式;成功/警告/错误/信息/默认色正确 |
|
|
83
|
+
| **下拉菜单** | 菜单项高度、hover 效果 | component-spec.md §8 | 菜单项 32px、hover 品牌色极浅底 |
|
|
84
|
+
| **分页** | 激活态样式、按钮尺寸 | component-spec.md §5 | 激活页品牌色底+白字;按钮 32px |
|
|
85
|
+
| **空状态** | padding、图标大小、文字大小 | component-spec.md §4 | padding 48px 0、图标 64px、标题 16px、描述 14px |
|
|
86
|
+
|
|
87
|
+
## 10.5 细节还原度验证(容易遗漏的精细节)
|
|
88
|
+
|
|
89
|
+
> 以下是最容易被忽略、但严重影响还原度的细节项。**必须逐项检查。**
|
|
90
|
+
|
|
91
|
+
| # | 验证项 | 常见问题 | 设计规范依据 |
|
|
92
|
+
|---|--------|---------|-------------|
|
|
93
|
+
| 1 | 图标大小是否统一 16px | 工具栏图标大小不一致(有的 14px、有的 20px) | list-page.md §12 工具栏按钮 |
|
|
94
|
+
| 2 | 分隔线颜色是否为 #F0F0F0 | 用了 #D9D9D9 或更深的颜色 | design-tokens.md §7 / list-page.md §12 |
|
|
95
|
+
| 3 | hover 状态的文字是否加深 | hover 文字变浅或变透明(违反硬约束) | design-handoff.md §5.2 硬约束 |
|
|
96
|
+
| 4 | 行高是否与设计一致 | 表格行太高或太矮 | list-page.md §6 三档密度 |
|
|
97
|
+
| 5 | 字重是否正确 | 标题/表头字重不够 | design-tokens.md §9 字体令牌 |
|
|
98
|
+
| 6 | 圆角是否统一 | 有的 4px 有的 8px | design-tokens.md §11 圆角令牌 |
|
|
99
|
+
| 7 | 阴影是否自然 | 阴影太重或太轻 | design-tokens.md §12 阴影令牌 |
|
|
100
|
+
| 8 | 过渡动画时长是否一致 | 有的 0.3s 有的 0.2s | design-tokens.md §20 动画令牌 |
|
|
101
|
+
| 9 | 「更多」按钮是否有下拉箭头 | 「更多」只有文字没有箭头 | list-page.md §5.3 |
|
|
102
|
+
| 10 | 操作列按钮间是否有竖分隔线 | 按钮之间只有间距没有分隔线 | list-page.md §5.1 |
|
|
103
|
+
| 11 | 页签下划线是否与文字等宽居中 | 下划线偏左/偏右或太宽/太窄 | unified-framework.md §4 |
|
|
104
|
+
| 12 | 表格操作列是否 sticky 右侧 | 操作列随横向滚动消失 | list-page.md §5.4 |
|
|
105
|
+
| 13 | 表格左侧选择列宽度是否 48px | 选择列太宽或太窄 | list-page.md §6.1 |
|
|
106
|
+
| 14 | 状态标签颜色是否正确对应状态 | 成功用了蓝色、警告用了红色 | component-spec.md §3 Tag 规范 |
|
|
107
|
+
| 15 | 内容区卡片是否有阴影 | 卡片只有边框没有阴影 | list-page.md §2 单卡片架构 |
|
|
108
|
+
|
|
109
|
+
## 10.6 验证方法
|
|
110
|
+
|
|
111
|
+
AI 在执行设计还原度验证时,按以下步骤操作:
|
|
112
|
+
|
|
113
|
+
1. **打开设计规范参考文件**:根据页面类型,加载对应的设计规范文件(列表页→list-page.md,表单页→component-spec.md 等)
|
|
114
|
+
2. **逐区域对照**:按 10.2/10.3/10.4/10.5 的顺序,逐项检查代码实现与设计规范是否一致
|
|
115
|
+
3. **令牌溯源**:对于颜色/尺寸/间距,检查是否通过 CSS 变量传递,变量值是否与 design-tokens.md 一致
|
|
116
|
+
4. **记录偏差**:发现不一致的地方,记录「实际值 → 期望值 → 偏差原因」
|
|
117
|
+
5. **修正后重新验证**:修正所有偏差项后,重新走一遍验证流程,确认全部通过
|
|
118
|
+
6. **输出验证报告**:在最终回复中附加「设计还原度验证报告」(格式见 10.7)
|
|
119
|
+
|
|
120
|
+
## 10.7 设计还原度验证报告(输出格式)
|
|
121
|
+
|
|
122
|
+
代码生成 + 验证完成后,最终回复中必须包含以下格式的验证报告:
|
|
123
|
+
|
|
124
|
+
```markdown
|
|
125
|
+
## 设计还原度验证报告
|
|
126
|
+
|
|
127
|
+
### 整体评估
|
|
128
|
+
- 还原度:XX%(通过项 / 总项数)
|
|
129
|
+
- 硬失败项:0 项(如有,列出)
|
|
130
|
+
- 偏差项:X 项(已修正 / 待确认)
|
|
131
|
+
|
|
132
|
+
### 框架层(X/Y 通过)
|
|
133
|
+
- [x] 顶栏:高度 54px、元素组成正确、折叠按钮居中
|
|
134
|
+
- [x] 侧栏:宽度 208px、深色背景、激活态实色底+指示条
|
|
135
|
+
- [x] 页签:高度 40px、line 模式、激活态文字变色+下划线
|
|
136
|
+
- [x] 内容区:灰底 #F5F5F5、padding 24px
|
|
137
|
+
- [ ] (未通过项列出,说明原因和修正方案)
|
|
138
|
+
|
|
139
|
+
### 页面层(X/Y 通过)
|
|
140
|
+
- [x] 页面标题区:标题+描述+操作按钮、padding 20px
|
|
141
|
+
- [x] 筛选区:白底+圆角+底部分隔线、padding 20px
|
|
142
|
+
- [x] 工具栏:左右布局、3 个工具按钮齐全、分隔线正确
|
|
143
|
+
- [x] 表格:表头 48px、行高正确、hover 效果正确
|
|
144
|
+
- [x] 操作列:纯文字链接+竖分隔线+更多箭头、sticky 右侧
|
|
145
|
+
- [x] 分页:两段式布局、默认 10 条/页
|
|
146
|
+
- [x] 模块分割线:位置正确、颜色 #F0F0F0
|
|
147
|
+
- [x] 模块间距:各区域 padding 与设计一致
|
|
148
|
+
|
|
149
|
+
### 共享组件层(X/Y 通过)
|
|
150
|
+
- [x] ReTableBar:工具栏按钮样式/布局/间距正确
|
|
151
|
+
- [x] ReTableOperate:文字链接/分隔线/更多箭头/折叠逻辑正确
|
|
152
|
+
- [x] RePagination:样式与设计规范一致
|
|
153
|
+
|
|
154
|
+
### 细节项(X/Y 通过)
|
|
155
|
+
- [x] 图标大小统一 16px
|
|
156
|
+
- [x] 分隔线颜色 #F0F0F0
|
|
157
|
+
- [x] hover 文字加深不变浅
|
|
158
|
+
- [x] 圆角统一 6px(按钮/输入框)
|
|
159
|
+
- [x] 「更多」按钮有下拉箭头
|
|
160
|
+
- [ ] (未通过项列出)
|
|
161
|
+
|
|
162
|
+
### 元素清理
|
|
163
|
+
- [x] 顶栏设置按钮已移除
|
|
164
|
+
- [x] 「展示列表」标题已清除
|
|
165
|
+
- [x] 「左侧按钮可以增加多个」等示例按钮已清除
|
|
166
|
+
- [x] 操作列多余图标已移除
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
---
|
|
170
|
+
|
|
171
|
+
## 10.8 逐属性 CSS 校验(设计源文件回读 — 硬失败闸门)
|
|
172
|
+
|
|
173
|
+
> 10.2-10.7 是「区域级」验证(检查"顶栏高度对不对""筛选区有没有")。
|
|
174
|
+
> 本节是「属性级」验证——从设计 reference 源文件中逐行提取每个 CSS 属性,与项目代码逐条比对。
|
|
175
|
+
> **这是消除精度偏差的核心闸门,10.1-10.7 验证通过后必须执行本节,不可跳过。**
|
|
176
|
+
|
|
177
|
+
### 10.8.1 动态发现设计源文件
|
|
178
|
+
|
|
179
|
+
**不硬编码任何文件名。** 设计技能增删改 reference 文件,项目技能自动适应,无需修改任何配置。
|
|
180
|
+
|
|
181
|
+
1. 从 handoff JSON 的 `meta.skillPath` 或调用上下文获得设计技能根路径
|
|
182
|
+
- 若未提供,在会话中向用户确认设计技能路径
|
|
183
|
+
2. 扫描 `{design-skill-path}/references/*.md`,列出全部 `.md` 文件
|
|
184
|
+
3. 将发现的文件列表作为待读取清单
|
|
185
|
+
|
|
186
|
+
### 10.8.2 逐文件提取 CSS 属性清单
|
|
187
|
+
|
|
188
|
+
对发现的每个 `.md` 文件,按以下规则提取:
|
|
189
|
+
|
|
190
|
+
1. **定位参数表**:搜索所有 `###` 子节标题(格式如 `### 6.3 .sider-container` 或 `### 12.52 .list-table-action-link`),读取其后的 Markdown 表格
|
|
191
|
+
2. **识别列结构**:表格格式为 `| 属性 | 值 |` 或 `| 属性 | 值 | 说明 |`,取第一列为属性名、第二列为值
|
|
192
|
+
3. **提取条目**:每行提取三元组 → `[选择器, 属性名, 值]`
|
|
193
|
+
4. **解析 token 引用**:值中的描述性 token(如"主色-5""品牌色8%""color-bg-layout"),用 handoff JSON 的 `theme` + `tokens` 映射为具体值
|
|
194
|
+
5. **汇总清单**:全部文件的提取结果合并为一个扁平列表
|
|
195
|
+
|
|
196
|
+
提取结果示例:
|
|
197
|
+
|
|
198
|
+
| 选择器 | 属性 | 设计值 | 解析值 | 来源 |
|
|
199
|
+
|--------|------|--------|--------|------|
|
|
200
|
+
| .el-menu-item.is-active | background | 品牌色8% | #E8F0FF | unified-framework.md §6.x |
|
|
201
|
+
| .el-menu-item.is-active | border-right | 无 | none | unified-framework.md §6.x |
|
|
202
|
+
| .el-menu-item.is-active | color | 品牌色 | #245BFF | unified-framework.md §6.x |
|
|
203
|
+
| .list-table-action-link | color | 主色-5 | #245BFF | list-page.md §12.52 |
|
|
204
|
+
| .list-table-action-link | background | transparent | transparent | list-page.md §12.52 |
|
|
205
|
+
| .list-table-action-link | border | none | none | list-page.md §12.52 |
|
|
206
|
+
|
|
207
|
+
### 10.8.3 逐条比对项目代码
|
|
208
|
+
|
|
209
|
+
对清单中每一条设计点,执行以下操作:
|
|
210
|
+
|
|
211
|
+
1. **定位选择器**:在项目的 `src/**/*.scss`、`src/**/*.vue`、`src/**/*.css` 文件中搜索该选择器
|
|
212
|
+
2. **读取属性值**:找到该选择器后,读出对应属性的实际值
|
|
213
|
+
3. **比对**:
|
|
214
|
+
- ✅ **一致** → 设计值与实际值匹配(含 token 引用解析后等价)→ 跳过
|
|
215
|
+
- ❌ **不一致** → 实际值与设计值不同 → **立即修改代码**使其与设计值一致
|
|
216
|
+
- ⚠️ **选择器未找到** → 项目中无此选择器 → 标记"待确认",在报告中列出
|
|
217
|
+
- ⚠️ **属性未找到** → 选择器存在但无该属性 → 若设计值为 `none/transparent/0` 则视为一致;否则标记需补充
|
|
218
|
+
|
|
219
|
+
**比对等价规则**:
|
|
220
|
+
- token 引用与具体值等价:`var(--brand-primary)` === `#245BFF`(当令牌值匹配时)
|
|
221
|
+
- `none` 与未声明等价:设计值 `none`,代码中该属性不存在 → 视为一致
|
|
222
|
+
- 描述性值需语义匹配:"无" = `none`;"品牌色8%" = `color-mix(in srgb, var(--brand-primary) 8%, transparent)` 或对应 hex
|
|
223
|
+
|
|
224
|
+
### 10.8.4 回读校验
|
|
225
|
+
|
|
226
|
+
**修改完成后必须重新读取修改过的文件**,对全部清单逐条验证:
|
|
227
|
+
|
|
228
|
+
1. 修改项:实际值是否已改为设计值
|
|
229
|
+
2. 未修改项:实际值是否仍与设计值一致(防止修改 A 时误改了 B)
|
|
230
|
+
3. 新增项:补充的属性是否正确写入
|
|
231
|
+
|
|
232
|
+
**任何一条不匹配 = 硬失败,必须当场修复后重新回读,直到零差异。**
|
|
233
|
+
|
|
234
|
+
### 10.8.5 逐属性校验报告(输出格式)
|
|
235
|
+
|
|
236
|
+
代码修改 + 回读校验完成后,在最终回复中附加以下报告:
|
|
237
|
+
|
|
238
|
+
```markdown
|
|
239
|
+
## 逐属性 CSS 校验报告
|
|
240
|
+
|
|
241
|
+
### 校验范围
|
|
242
|
+
- 设计源文件:{N} 个({文件名列表})
|
|
243
|
+
- 提取设计点:{total} 条
|
|
244
|
+
- 项目比对覆盖:{matched}/{total}
|
|
245
|
+
|
|
246
|
+
### 校验结果
|
|
247
|
+
- ✅ 一致:{pass} 条
|
|
248
|
+
- ❌ 已修复:{fixed} 条
|
|
249
|
+
- ⚠️ 待确认:{pending} 条
|
|
250
|
+
|
|
251
|
+
### 偏差明细(仅列出不一致项,已修复)
|
|
252
|
+
| 选择器 | 属性 | 设计值 | 修改前实际值 | 修改后实际值 | 来源 | 结果 |
|
|
253
|
+
|--------|------|--------|------------|------------|------|------|
|
|
254
|
+
| .el-menu-item.is-active | border-right | none | 3px solid #245bff | none | unified-framework.md §6.x | ❌→✅ |
|
|
255
|
+
| .list-table-action-link | padding | 0 | 0 8px | 0 | list-page.md §12.52 | ❌→✅ |
|
|
256
|
+
|
|
257
|
+
### 待确认项(项目中未找到对应选择器)
|
|
258
|
+
| 选择器 | 属性 | 设计值 | 说明 |
|
|
259
|
+
|--------|------|--------|------|
|
|
260
|
+
| .some-design-selector | color | #xxx | 项目中无此选择器,可能需新增 |
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
---
|
|
264
|
+
|
|
265
|
+
## 10.9 设计变更增量同步
|
|
266
|
+
|
|
267
|
+
> 当设计技能产出新版 handoff JSON(V2),且项目中已有旧版(V1)落地结果时,按本节流程执行增量同步。
|
|
268
|
+
> **不需要重新执行 C/T/F/Co/S/P 全流程,只处理变更项。**
|
|
269
|
+
|
|
270
|
+
### 10.9.1 变更识别
|
|
271
|
+
|
|
272
|
+
1. 读取旧版 handoff JSON(V1)和新版 handoff JSON(V2)
|
|
273
|
+
2. 按 10.8.2 的方法,从设计 reference 文件提取最新 CSS 属性清单
|
|
274
|
+
3. 逐条 diff V1 清单 vs V2 清单,输出变更清单:
|
|
275
|
+
|
|
276
|
+
| 变更类型 | 判定条件 | 操作 |
|
|
277
|
+
|---------|---------|------|
|
|
278
|
+
| **新增属性** | V2 有、V1 无 | 需在项目代码中新增 |
|
|
279
|
+
| **移除属性** | V1 有、V2 无 | 需从项目代码中移除(置 none 或删声明) |
|
|
280
|
+
| **修改属性** | V1 和 V2 都有但值不同 | 需修改项目代码 |
|
|
281
|
+
| **未变属性** | V1 和 V2 一致 | 跳过,不动 |
|
|
282
|
+
|
|
283
|
+
### 10.9.2 增量执行
|
|
284
|
+
|
|
285
|
+
只对"新增/移除/修改"项执行代码改动,未变项不动。
|
|
286
|
+
|
|
287
|
+
### 10.9.3 回读校验
|
|
288
|
+
|
|
289
|
+
变更执行完成后,按 10.8.4 流程**全量回读校验**(不仅是变更项),确保:
|
|
290
|
+
- 变更项已正确落地
|
|
291
|
+
- 未变项未被误改
|
|
292
|
+
|
|
293
|
+
### 10.9.4 同步报告
|
|
294
|
+
|
|
295
|
+
```markdown
|
|
296
|
+
## 设计变更同步报告
|
|
297
|
+
|
|
298
|
+
### 变更摘要
|
|
299
|
+
- 新增属性:{N} 项
|
|
300
|
+
- 移除属性:{N} 项
|
|
301
|
+
- 修改属性:{N} 项
|
|
302
|
+
- 未变属性:{N} 项(跳过)
|
|
303
|
+
|
|
304
|
+
### 变更明细
|
|
305
|
+
| 选择器 | 属性 | V1 值 | V2 值 | 操作 | 结果 |
|
|
306
|
+
|--------|------|-------|-------|------|------|
|
|
307
|
+
| .el-menu-item.is-active | border-right | 3px solid #245bff | none | 修改 | ✅ |
|
|
308
|
+
| .new-selector | padding | — | 20px | 新增 | ✅ |
|
|
309
|
+
|
|
310
|
+
### 全量回读校验
|
|
311
|
+
- 全量校验:{total} 条
|
|
312
|
+
- 通过:{pass} 条
|
|
313
|
+
- 硬失败:{fail} 条
|
|
314
|
+
```
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
skill: layout-theme
|
|
3
|
-
description: 布局、主题色、暗黑模式、侧栏配色、Design Tokens、UnoCSS、响应式。修改布局/主题/颜色时加载。上游设计产出落地见 design-handoff / design-system。
|
|
3
|
+
description: 布局、主题色、暗黑模式、侧栏配色、Design Tokens、UnoCSS、响应式。修改布局/主题/颜色时加载。上游设计产出落地见 design-handoff / design-verify / design-system。
|
|
4
4
|
scope: project
|
|
5
5
|
tags: [vue3, layout, theme, dark-mode, css-variables, design-tokens, element-plus, vant, dual-ui, unocss, chroma-js, 标签页, 面包屑, tabs, breadcrumb]
|
|
6
6
|
---
|
package/scripts/analyze-deps.mjs
CHANGED
|
@@ -44,7 +44,7 @@ const c = {
|
|
|
44
44
|
// ── 已知模块列表 ───────────────────────────────────────────
|
|
45
45
|
const KNOWN_MODULES = [
|
|
46
46
|
"core-kernel", "code-quality", "project-inventory", "addon-enable",
|
|
47
|
-
"design-handoff", "design-system", "http-api", "crud-pages",
|
|
47
|
+
"design-handoff", "design-verify", "design-system", "http-api", "crud-pages",
|
|
48
48
|
"detail-page", "data-writeback", "permission-auth", "layout-theme",
|
|
49
49
|
"icons", "feedback-loading", "base-code-dict", "api-check",
|
|
50
50
|
"ui-components", "tree-table", "table-vxe", "form-advanced",
|
|
@@ -35,7 +35,7 @@ const c = {
|
|
|
35
35
|
|
|
36
36
|
// ── 分类定义 ───────────────────────────────────────────────
|
|
37
37
|
const ALWAYS_LOAD = ["core-kernel"];
|
|
38
|
-
const ON_DEMAND = ["project-inventory", "addon-enable", "code-quality", "design-handoff", "design-system"];
|
|
38
|
+
const ON_DEMAND = ["project-inventory", "addon-enable", "code-quality", "design-handoff", "design-verify", "design-system"];
|
|
39
39
|
const STANDARD_BUSINESS = [
|
|
40
40
|
"http-api", "crud-pages", "detail-page", "data-writeback",
|
|
41
41
|
"permission-auth", "layout-theme", "design-system", "icons",
|
|
@@ -52,7 +52,7 @@ const SPECIALIZED = [
|
|
|
52
52
|
|
|
53
53
|
// ── frontmatter 解析 ────────────────────────────────────────
|
|
54
54
|
function parseFrontmatter(content) {
|
|
55
|
-
const fmMatch = content.match(/^---\r?\n([\s\S]*?)\r?\n---/);
|
|
55
|
+
const fmMatch = content.replace(/^\uFEFF/, "").match(/^---\r?\n([\s\S]*?)\r?\n---/);
|
|
56
56
|
if (!fmMatch) return null;
|
|
57
57
|
const fm = {};
|
|
58
58
|
for (const line of fmMatch[1].split(/\r?\n/)) {
|
package/scripts/modules.json
CHANGED
|
@@ -283,7 +283,17 @@
|
|
|
283
283
|
"description": "收到 design-handoff/v1 JSON 后执行逐文件修改清单",
|
|
284
284
|
"category": "on-demand",
|
|
285
285
|
"keywords": ["设计交接", "design-handoff", "令牌产出"],
|
|
286
|
-
"co_load": [
|
|
286
|
+
"co_load": [
|
|
287
|
+
{ "module": "design-system", "condition": "设计规范落地" },
|
|
288
|
+
{ "module": "design-verify", "condition": "handoff 落地后还原度验证" }
|
|
289
|
+
],
|
|
290
|
+
"quality_gates": []
|
|
291
|
+
},
|
|
292
|
+
"design-verify": {
|
|
293
|
+
"description": "设计还原度验证 — 区域级验证 + 逐属性CSS校验 + 设计变更同步",
|
|
294
|
+
"category": "on-demand",
|
|
295
|
+
"keywords": ["还原度验证", "逐属性校验", "设计变更同步", "design-verify"],
|
|
296
|
+
"co_load": [],
|
|
287
297
|
"quality_gates": []
|
|
288
298
|
},
|
|
289
299
|
"i18n-localization": {
|
package/scripts/validate.mjs
CHANGED
|
@@ -38,7 +38,7 @@ const c = {
|
|
|
38
38
|
|
|
39
39
|
// ── frontmatter 解析 ────────────────────────────────────────
|
|
40
40
|
function parseFrontmatter(content) {
|
|
41
|
-
const fmMatch = content.match(/^---\r?\n([\s\S]*?)\r?\n---/);
|
|
41
|
+
const fmMatch = content.replace(/^\uFEFF/, "").match(/^---\r?\n([\s\S]*?)\r?\n---/);
|
|
42
42
|
if (!fmMatch) return null;
|
|
43
43
|
const fm = {};
|
|
44
44
|
const lines = fmMatch[1].split(/\r?\n/);
|
|
@@ -90,7 +90,7 @@ function extractRoutedModules(skillContent) {
|
|
|
90
90
|
// Pattern 2: 模块名直接出现(无路径形式)
|
|
91
91
|
const moduleNames = [
|
|
92
92
|
"core-kernel", "code-quality", "project-inventory", "addon-enable",
|
|
93
|
-
"design-handoff", "design-system", "http-api", "crud-pages",
|
|
93
|
+
"design-handoff", "design-verify", "design-system", "http-api", "crud-pages",
|
|
94
94
|
"detail-page", "data-writeback", "permission-auth", "layout-theme",
|
|
95
95
|
"icons", "feedback-loading", "base-code-dict", "api-check",
|
|
96
96
|
"ui-components", "tree-table", "table-vxe", "form-advanced",
|
|
@@ -116,7 +116,7 @@ function extractCrossRefs(content) {
|
|
|
116
116
|
const pattern = /→?\s*`?([a-z][a-z0-9-]+)`?/g;
|
|
117
117
|
const knownModules = [
|
|
118
118
|
"core-kernel", "code-quality", "project-inventory", "addon-enable",
|
|
119
|
-
"design-handoff", "design-system", "http-api", "crud-pages",
|
|
119
|
+
"design-handoff", "design-verify", "design-system", "http-api", "crud-pages",
|
|
120
120
|
"detail-page", "data-writeback", "permission-auth", "layout-theme",
|
|
121
121
|
"icons", "feedback-loading", "base-code-dict", "api-check",
|
|
122
122
|
"ui-components", "tree-table", "table-vxe", "form-advanced",
|