@qilitt-mickey/vue3-temp-skill 1.1.39 → 1.1.41
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/SKILL.md +10 -0
- package/mapping/component/button.json +36 -10
- package/mapping/component/tag.json +3 -3
- package/mapping/scenes/admin/content.json +10 -9
- package/mapping/scenes/admin/layout.json +50 -22
- package/package.json +1 -1
- package/parser/fixtures/changeset-fullpage-restore.json +1 -0
- package/parser/index.js +5 -5
- package/references/design-apply.md +58 -14
package/SKILL.md
CHANGED
|
@@ -8,6 +8,8 @@ tags: [vue3, typescript, element-plus, pinia, vite, unocss, crud, demo, code-qua
|
|
|
8
8
|
|
|
9
9
|
# Vue 3 项目开发技能
|
|
10
10
|
|
|
11
|
+
> **体系版本:1.0.0**(双 Skill 唯一版本声明点之一;设计侧 project-ui-design 同版)。版本恒定策略:双侧始终同版,不随内容修改递增,仅协议破坏性变更时双侧同步升版。mapping/*.json 的 `meta.version` 与变更集校验均恒为 `1.0.0`,不单独演进。
|
|
12
|
+
|
|
11
13
|
## 目标
|
|
12
14
|
|
|
13
15
|
把产品点子快速落到真实 Vue 3 项目中,先形成客户可看的完整 Demo,再保留后续正式开发所需的代码边界。页面可以使用 mock 和最小数据,但不得使用模板演示噪音、虚构项目能力或堆叠无法维护的代码。
|
|
@@ -91,6 +93,14 @@ tags: [vue3, typescript, element-plus, pinia, vite, unocss, crud, demo, code-qua
|
|
|
91
93
|
- 在目标项目执行 `pnpm lint:fix`、`pnpm type-check`;改动构建配置时再执行 `pnpm build`。
|
|
92
94
|
- 最终说明:命中能力组、修改文件、功能验证、命令结果、未解决问题和下一步。
|
|
93
95
|
|
|
96
|
+
## 出厂中性 · 变更集驱动(design-apply 架构红线)
|
|
97
|
+
|
|
98
|
+
目标项目源码 = **中性初始化**,只提供能力通道(CSS 变量的消费者挂载点、form 枚举、DOM/属性钩子、正确的层叠优先级),**不预置任何具体设计的结论**(某个颜色、某句问候语、某个方位的指示条、某个硬编码尺寸)。
|
|
99
|
+
|
|
100
|
+
- 一切设计决策由设计变更集驱动,经 `design-apply` 动态落到「设计层文件 `src/styles/design-shell.scss` / 页面级 scoped 样式 / DOM 属性与配置」,不落到出厂样式文件与出厂组件里。
|
|
101
|
+
- 判据:换一张效果图只需换变更集、不必改源码 ⇒ 架构正确;需要改源码才能换 ⇒ 设计结论被烧进源码,必须回退为通道。
|
|
102
|
+
- 出厂文件仅在「通道缺失」时可动(补变量消费者 / 补 form 枚举 / 修层叠优先级),且必须在交付说明中单列「补通道」条目写明缺失点。
|
|
103
|
+
|
|
94
104
|
## 项目事实优先级
|
|
95
105
|
|
|
96
106
|
`目标项目当前源码` > `目标项目 package.json / 锁文件` > `本 Skill reference` > `通用 Vue 习惯`。
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"$comment": "全局原子层 · 按钮组件映射(EP 原生)。css_vars
|
|
2
|
+
"$comment": "全局原子层 · 按钮组件映射(EP 原生)。EP el-button 无 --el-button-primary-*/--el-button-danger-* 命名空间变量:variant 类(.el-button--primary/--danger)= 给通用变量 --el-button-* 赋语义色值(theme-chalk 源码实证),故 primary/danger 的 css_vars 均指向通用变量,semantic_source 标注该 variant 的语义色源。版本恒 1.0.0(由 SKILL.md 体系版本统一管理)。",
|
|
3
3
|
"meta": {
|
|
4
4
|
"layer": "basic",
|
|
5
5
|
"domain": "component_button",
|
|
@@ -12,20 +12,22 @@
|
|
|
12
12
|
"type": "global_component",
|
|
13
13
|
"component": "ElButton",
|
|
14
14
|
"default_props": { "type": "primary" },
|
|
15
|
-
"style_scope": ":root",
|
|
15
|
+
"style_scope": ".el-button--primary(variant 类作用域;禁止裸写 :root——通用变量全按钮共享,作用域纪律是硬约束)",
|
|
16
16
|
"css_vars": {
|
|
17
|
-
"bg_color": "--el-button-
|
|
18
|
-
"text_color": "--el-button-
|
|
19
|
-
"border_color": "--el-button-
|
|
20
|
-
"hover_bg_color": "--el-button-
|
|
21
|
-
"active_bg_color": "--el-button-
|
|
22
|
-
"disabled_bg_color": "--el-button-
|
|
17
|
+
"bg_color": "--el-button-bg-color",
|
|
18
|
+
"text_color": "--el-button-text-color",
|
|
19
|
+
"border_color": "--el-button-border-color",
|
|
20
|
+
"hover_bg_color": "--el-button-hover-bg-color",
|
|
21
|
+
"active_bg_color": "--el-button-active-bg-color",
|
|
22
|
+
"disabled_bg_color": "--el-button-disabled-bg-color",
|
|
23
|
+
"semantic_source": "--el-color-primary"
|
|
23
24
|
},
|
|
24
25
|
"custom_style_map": {
|
|
25
26
|
"font_weight": "font-weight",
|
|
26
27
|
"padding_x": "padding-inline",
|
|
27
28
|
"shadow": "box-shadow"
|
|
28
|
-
}
|
|
29
|
+
},
|
|
30
|
+
"$note": "EP 实证:.el-button--primary 类 = 给通用变量 --el-button-* 赋 --el-color-primary 系列值,无 --el-button-primary-* 独立变量。AI 施工必须以 .el-button--primary 限定选择器作用域(禁止裸写 :root);设计侧调主题主色优先动 --el-color-primary,按钮自动跟随。未列变量(hover-border/outline 等)按同规则推导"
|
|
29
31
|
},
|
|
30
32
|
"component.button.default": {
|
|
31
33
|
"type": "global_component",
|
|
@@ -43,7 +45,31 @@
|
|
|
43
45
|
"custom_style_map": {
|
|
44
46
|
"font_weight": "font-weight",
|
|
45
47
|
"padding_x": "padding-inline"
|
|
46
|
-
}
|
|
48
|
+
},
|
|
49
|
+
"$note": "default 按钮直接消费通用变量本体,无 variant 类覆写;primary/danger 与本条目共用通用变量,靠 variant 类作用域隔离"
|
|
50
|
+
},
|
|
51
|
+
"component.button.danger": {
|
|
52
|
+
"type": "global_component",
|
|
53
|
+
"component": "ElButton",
|
|
54
|
+
"default_props": { "type": "danger" },
|
|
55
|
+
"style_scope": ".el-button--danger(variant 类作用域;禁止裸写 :root——通用变量全按钮共享,作用域纪律是硬约束)",
|
|
56
|
+
"css_vars": {
|
|
57
|
+
"bg_color": "--el-button-bg-color",
|
|
58
|
+
"text_color": "--el-button-text-color",
|
|
59
|
+
"border_color": "--el-button-border-color",
|
|
60
|
+
"hover_bg_color": "--el-button-hover-bg-color",
|
|
61
|
+
"hover_text_color": "--el-button-hover-text-color",
|
|
62
|
+
"hover_border_color": "--el-button-hover-border-color",
|
|
63
|
+
"active_bg_color": "--el-button-active-bg-color",
|
|
64
|
+
"disabled_bg_color": "--el-button-disabled-bg-color",
|
|
65
|
+
"semantic_source": "--el-color-danger"
|
|
66
|
+
},
|
|
67
|
+
"custom_style_map": {
|
|
68
|
+
"font_weight": "font-weight",
|
|
69
|
+
"padding_x": "padding-inline",
|
|
70
|
+
"radius": "border-radius"
|
|
71
|
+
},
|
|
72
|
+
"$note": "承接批量删除等危险操作按钮(admin.content.table.operation_bar 引用)。EP 实证:.el-button--danger 类 = 给通用变量 --el-button-* 赋 --el-color-danger 系列值,无 --el-button-danger-* 独立变量。AI 施工必须以 .el-button--danger 限定选择器作用域(禁止裸写 :root);调红的深浅优先动 --el-color-danger"
|
|
47
73
|
},
|
|
48
74
|
"component.button.height": {
|
|
49
75
|
"type": "global_token",
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
|
-
"$comment": "全局原子层 · 状态标签组件映射(EP 原生 el-tag)。对应设计侧 list-page §7 状态标签(filled 默认变体)与 component-spec 3.4
|
|
2
|
+
"$comment": "全局原子层 · 状态标签组件映射(EP 原生 el-tag)。对应设计侧 list-page §7 状态标签(filled 默认变体)与 component-spec 3.4 状态色映射。版本恒 1.0.0(由 SKILL.md 体系版本统一管理)。",
|
|
3
3
|
"meta": {
|
|
4
4
|
"layer": "basic",
|
|
5
5
|
"domain": "component_tag",
|
|
6
|
-
"version": "1.
|
|
6
|
+
"version": "1.0.0",
|
|
7
7
|
"scene": "global",
|
|
8
8
|
"tech_stack": "vue3 + element-plus"
|
|
9
9
|
},
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"font_size": "font-size",
|
|
31
31
|
"padding_x": "padding"
|
|
32
32
|
},
|
|
33
|
-
"$note": "状态语义色走 EP 功能色变量:success=--el-color-success / processing=--el-color-primary / warning=--el-color-warning / error=--el-color-danger
|
|
33
|
+
"$note": "状态语义色走 EP 功能色变量:success=--el-color-success / processing=--el-color-primary / warning=--el-color-warning / error=--el-color-danger。列级声明机制:component.tag.status 是 :root 全局默认,逐列差异必须声明为内容点位(admin.content.table.cell_tag.<列语义> 走 pending/L3,或写入该列 notes),禁止对全局 ID 声明多份互相覆盖的 form"
|
|
34
34
|
},
|
|
35
35
|
"component.tag.size": {
|
|
36
36
|
"type": "global_token",
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
|
-
"$comment": "admin 场景 · 内容区功能点位映射。admin.content.container
|
|
2
|
+
"$comment": "admin 场景 · 内容区功能点位映射。admin.content.container 为壳层高度模式通道(lay-content/index.vue 实证);其余为页面构图点位:类名为 vue3-temp-skill crud-pages.md L1-L9 标准样板约定,样式规则与令牌已落地(element-plus.scss 消费 design-tokens.scss 构图令牌,dark.scss 消费 vts-filter-area),存量表格 demo(views/table/{base,treeTable,vxe-table})已对齐样板;pagination 为 Element Plus 实证类(RePagination 根节点即 el-pagination)。版本恒 1.0.0(由 SKILL.md 体系版本统一管理)。",
|
|
3
3
|
"meta": {
|
|
4
4
|
"layer": "scene",
|
|
5
5
|
"scene": "admin",
|
|
6
6
|
"domain": "content",
|
|
7
|
-
"version": "1.
|
|
7
|
+
"version": "1.0.0",
|
|
8
8
|
"tech_stack": "vue3 + element-plus + vue3-web-temp"
|
|
9
9
|
},
|
|
10
10
|
"mappings": {
|
|
@@ -27,7 +27,8 @@
|
|
|
27
27
|
"fixed": "data-content-mode='fixed':display:flex; flex:1 1 auto; height:100%; min-height:0; overflow:hidden(收回 el-scrollbar__view/.grow 祖先链)",
|
|
28
28
|
"scroll": "data-content-mode='scroll':flex:0 0 auto; min-height:100%; overflow:visible(整页滚动)",
|
|
29
29
|
"auto": ":has(.vts-page-card|.vts-page-fill) 自动定高;未标记且无钩子类 → 滚动页(向后兼容)"
|
|
30
|
-
}
|
|
30
|
+
},
|
|
31
|
+
"$note": "⚠列表区保命通道:壳层 lay-content 禁止硬编码 data-content-mode(曾因壳层代打 scroll 压掉 :has() 自动探测,vts-page-card 列表页定高链断裂、useTableSearch 高度失准、列表区整体崩坏——已实证回退)。form=scroll 仅当设计侧显式声明整页滚动时,落到页面根节点属性;列表页默认 auto 自动定高。⚠层叠优先级(已修的出厂通道缺陷):显式模式规则体必须排在 :has() 自动探测**之后**——同特异性下后置规则胜,写在前面会被 :has() 反压导致 form=scroll 失效;同时自动兜底分支已加 :not([data-content-mode]),与显式模式互斥。出厂 DOM 不带任何模式属性(中性),换设计只换页面根节点的声明值。"
|
|
31
32
|
},
|
|
32
33
|
"admin.content.page_header": {
|
|
33
34
|
"type": "element",
|
|
@@ -79,12 +80,12 @@
|
|
|
79
80
|
"batch_delete_bg": "background-color",
|
|
80
81
|
"batch_disabled_opacity": "opacity"
|
|
81
82
|
},
|
|
82
|
-
"$note": "
|
|
83
|
+
"$note": "设计意图(list-page §4/§11.25-11.36):flex 两端对齐、pad 20px 20px 8px、左侧批量(未选中置灰 opacity 0.4 + not-allowed)、右侧工具三件套缺一不可。分工:本条目管容器布局与置灰;批量删除红色按钮本体走 component.button.danger。demo 噪音按钮去留属业务层,交付说明申报后由项目侧业务闭环移除"
|
|
83
84
|
},
|
|
84
85
|
"admin.content.table.operation_column": {
|
|
85
86
|
"type": "element",
|
|
86
|
-
"selector": ".vts-table-area .el-table__cell.re-table-operate, .vts-table-area .el-table-fixed-column--right",
|
|
87
|
-
"file": "业务 views(ReTableOperate
|
|
87
|
+
"selector": ".vts-table-area .el-table__cell:has(.re-table-operate), .vts-table-area .el-table-fixed-column--right",
|
|
88
|
+
"file": "业务 views(ReTableOperate 渲染于默认插槽,无列语义类;单元格命中靠 :has(.re-table-operate))",
|
|
88
89
|
"style_scope": ".vts-page-card",
|
|
89
90
|
"forms": {
|
|
90
91
|
"text_link": "纯文字链接无图标(对应设计 list-table-action-no-icon=true;ReTableOperate text 档位)",
|
|
@@ -104,7 +105,7 @@
|
|
|
104
105
|
"divider_height": "height",
|
|
105
106
|
"more_arrow_size": "font-size"
|
|
106
107
|
},
|
|
107
|
-
"$note": "
|
|
108
|
+
"$note": "设计意图(list-page §5/§26.14):纯文字链接无图标、短分割线隔离(1px×14px)、≥3 个折叠到更多(带箭头)、列宽 160px + nowrap 禁止换行。落地断言:form 即结构意图(design-apply 底线二豁免)——form=text_link 时必须删除业务页列定义 operateButtons 各项的 icon 字段,禁止只改 CSS 保留图标冒充落地;设计侧未声明 min_width/column_width 时 AI 施工必须回填出厂值 160px/nowrap 并在交付说明注明,禁止留空导致按钮换行"
|
|
108
109
|
},
|
|
109
110
|
"admin.content.table.cell_amount": {
|
|
110
111
|
"type": "element",
|
|
@@ -116,7 +117,7 @@
|
|
|
116
117
|
"align": "text-align",
|
|
117
118
|
"font_variant_numeric": "font-variant-numeric"
|
|
118
119
|
},
|
|
119
|
-
"$note": "
|
|
120
|
+
"$note": "设计意图(§11.110 col-price):右对齐 + tabular-nums 等宽数字。落地手段:列定义加 class-name=col-price + align=right;「等宽数字」译为 font-variant-numeric: tabular-nums"
|
|
120
121
|
},
|
|
121
122
|
"admin.content.table.cell_thumb": {
|
|
122
123
|
"type": "element",
|
|
@@ -130,7 +131,7 @@
|
|
|
130
131
|
"thumb_radius": "border-radius",
|
|
131
132
|
"column_width": "width"
|
|
132
133
|
},
|
|
133
|
-
"$note": "
|
|
134
|
+
"$note": "设计意图(§11.108-11.109):列宽 72px 居中,缩略盒 40×40 圆角 6px。落地手段:列 className=col-thumb + el-image 40×40"
|
|
134
135
|
},
|
|
135
136
|
"admin.content.table.area": {
|
|
136
137
|
"type": "component",
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
|
-
"$comment": "admin 场景 · 布局模块语义 ID 全属性映射(vue3-web-temp 框架组件实证)。每条含结构定位(selector/file)、形态切换(forms)、样式映射(css_vars 优先 + custom_style_map 兜底)。style_scope 为样式必须包裹的容器类名;:root
|
|
2
|
+
"$comment": "admin 场景 · 布局模块语义 ID 全属性映射(vue3-web-temp 框架组件实证)。每条含结构定位(selector/file)、形态切换(forms)、样式映射(css_vars 优先 + custom_style_map 兜底)。style_scope 为样式必须包裹的容器类名;:root 表示全局令牌层。版本恒 1.0.0(由 SKILL.md 体系版本统一管理,不单独演进)。",
|
|
3
3
|
"meta": {
|
|
4
4
|
"layer": "scene",
|
|
5
5
|
"scene": "admin",
|
|
6
6
|
"domain": "layout",
|
|
7
|
-
"version": "1.
|
|
7
|
+
"version": "1.0.0",
|
|
8
8
|
"tech_stack": "vue3 + element-plus + vue3-web-temp"
|
|
9
9
|
},
|
|
10
10
|
"mappings": {
|
|
@@ -53,6 +53,13 @@
|
|
|
53
53
|
"selector": ".sidebar-container .el-menu",
|
|
54
54
|
"file": "src/layout/components/lay-sidebar/NavVertical.vue",
|
|
55
55
|
"style_scope": ".sidebar-container",
|
|
56
|
+
"forms": {
|
|
57
|
+
"pill": "出厂默认:整块胶囊底色高亮(sidebar.scss 消费 --vts-theme-menu-active-bg,带 !important)",
|
|
58
|
+
"indicator_left": "左侧竖条指示:先在本作用域覆写 --vts-theme-menu-active-bg: transparent 关胶囊,再于设计层新建 ::after 竖条(left:0)消费 --vts-theme-menu-active-before",
|
|
59
|
+
"indicator_right": "右侧竖条指示:同上关胶囊后 ::after 挂 right:0;不要用 factory 残留锚点 --menu-active-border-right(出厂未定义该令牌)",
|
|
60
|
+
"indicator_underline": "底部横线指示:关胶囊后 ::after 挂 bottom:0(宽取 100% 或指定宽度,厚取 indicator_thickness)",
|
|
61
|
+
"none": "无指示:胶囊与竖条均关闭,仅文字变色"
|
|
62
|
+
},
|
|
56
63
|
"css_vars": {
|
|
57
64
|
"menu_bg": "--vts-theme-menu-bg",
|
|
58
65
|
"menu_text": "--vts-theme-menu-text",
|
|
@@ -67,9 +74,10 @@
|
|
|
67
74
|
},
|
|
68
75
|
"custom_style_map": {
|
|
69
76
|
"active_indicator_width": "width",
|
|
77
|
+
"active_indicator_thickness": "height",
|
|
70
78
|
"active_indicator_style": "border-radius"
|
|
71
79
|
},
|
|
72
|
-
"$note": "侧栏配色挂载点为 html[data-theme='xxx'](theme.scss 8 套预设);设计输出深色侧栏 → Theme=default + Version++(useTheme 规则),浅色 → Theme=light
|
|
80
|
+
"$note": "侧栏配色挂载点为 html[data-theme='xxx'](theme.scss 8 套预设);设计输出深色侧栏 → Theme=default + Version++(useTheme 规则),浅色 → Theme=light。⚠文本完整性红线:菜单项名称必须完整显示(el-menu 自带 ellipsis 折叠溢出菜单),禁止改 menu 文本截断/隐藏策略;item_height 加大时确认行高不挤压文字。宽度类改动(--sidebar-width)后必须目视验证长菜单名显示。⚠激活态出厂中性基线(禁止把某张图的结论写进源码):出厂形态 = pill 胶囊高亮;--vts-theme-menu-active-before 出厂默认 transparent 且**全项目无消费者**(死通道)。因此 form=indicator_* 时必须在本条目 style_scope 内成对落地两件事才算施工完成——① 覆写 --vts-theme-menu-active-bg: transparent 关胶囊;② 在设计层文件(不可写出厂 sidebar.scss)新建 ::after 消费者引用 var(--vts-theme-menu-active-before)。缺任一项 = 「映射了却没效果」。所有几何参数(方位/粗细/长度/圆角/内缩)取自变更集 style 字段,禁止写死 left:0 / 3px 等常量。"
|
|
73
81
|
},
|
|
74
82
|
"admin.layout.sidebar.collapse_trigger": {
|
|
75
83
|
"type": "element",
|
|
@@ -148,7 +156,7 @@
|
|
|
148
156
|
"style_scope": ".navbar",
|
|
149
157
|
"forms": {
|
|
150
158
|
"icon_only": "出厂现状:纯图标触发器(.language-trigger > .language-icon),下拉菜单选语言",
|
|
151
|
-
"inline_switch": "
|
|
159
|
+
"inline_switch": "并排切换形态(下拉项平铺为触发器旁的切换组)"
|
|
152
160
|
},
|
|
153
161
|
"css_vars": {
|
|
154
162
|
"icon_color": "--el-text-color-regular",
|
|
@@ -163,7 +171,7 @@
|
|
|
163
171
|
"gap": "gap",
|
|
164
172
|
"text_font_size": "font-size"
|
|
165
173
|
},
|
|
166
|
-
"$note": "inline_switch
|
|
174
|
+
"$note": "inline_switch 并排切换形态:下拉项平铺为触发器旁切换组,按 v-if 保形切换增量插入,不删原代码"
|
|
167
175
|
},
|
|
168
176
|
"admin.layout.header.collapse_trigger": {
|
|
169
177
|
"type": "element",
|
|
@@ -171,7 +179,7 @@
|
|
|
171
179
|
"file": "src/layout/components/lay-navbar/index.vue(顶栏内嵌形态为增量插入;出厂折叠按钮位于侧栏,见 admin.layout.sidebar.collapse_trigger)",
|
|
172
180
|
"style_scope": ".navbar",
|
|
173
181
|
"forms": {
|
|
174
|
-
"header_inline": "
|
|
182
|
+
"header_inline": "顶栏内嵌折叠按钮:40×40 纯图标、与首页页签左对齐、hover 仅文字加深(出厂无此元素,v-if 保形插入机制落地)",
|
|
175
183
|
"sidebar_bottom": "出厂现状:侧栏底部折叠条(SidebarLeftCollapse)",
|
|
176
184
|
"sidebar_center": "侧栏侧缘中点(SidebarCenterCollapse)"
|
|
177
185
|
},
|
|
@@ -185,7 +193,7 @@
|
|
|
185
193
|
"icon_size": "font-size",
|
|
186
194
|
"border_radius": "border-radius"
|
|
187
195
|
},
|
|
188
|
-
"$note": "
|
|
196
|
+
"$note": "form=header_inline 时 AI 增量插入顶栏按钮片段(useApp isCollapse 切换),样式全部走 custom_style_map 生成的 :deep 隔离规则;出厂 sidebar_bottom 形态代码保留不删(显隐≠删除),设计侧 visible:false 时隐藏侧栏折叠条避免双按钮并存"
|
|
189
197
|
},
|
|
190
198
|
"admin.layout.header.fullscreen": {
|
|
191
199
|
"type": "component",
|
|
@@ -206,13 +214,15 @@
|
|
|
206
214
|
"selector": ".set-icon",
|
|
207
215
|
"file": "src/layout/components/lay-navbar/index.vue",
|
|
208
216
|
"style_scope": ".navbar",
|
|
217
|
+
"visible_prop": "无出厂配置开关(出厂常显)",
|
|
209
218
|
"css_vars": {
|
|
210
219
|
"height": "--vts-bar-height"
|
|
211
220
|
},
|
|
212
221
|
"custom_style_map": {
|
|
213
222
|
"icon_size": "font-size",
|
|
214
223
|
"width": "width"
|
|
215
|
-
}
|
|
224
|
+
},
|
|
225
|
+
"$note": "存在性收口默认对象:效果图未出现该按钮时,变更集以 visible:false 声明 → 落地为设计层文件内 .navbar .set-icon { display:none }(禁止删出厂代码行、禁止直接改 lay-navbar/index.vue 表达「这张图不要按钮」)。反向:设计需要该按钮时不声明即可(出厂已常显)。同一 DOM(含 v-tippy 提示)通用,图标/尺寸经本条目 style 字段动态覆盖。"
|
|
216
226
|
},
|
|
217
227
|
"admin.layout.header.user_profile": {
|
|
218
228
|
"type": "component",
|
|
@@ -220,8 +230,15 @@
|
|
|
220
230
|
"selector": ".navbar-right .el-dropdown-link",
|
|
221
231
|
"file": "src/layout/components/lay-navbar/index.vue",
|
|
222
232
|
"style_scope": ".navbar",
|
|
233
|
+
"forms": {
|
|
234
|
+
"avatar_name": "出厂默认:22×22 头像 + 用户名(window.userName),无问候语",
|
|
235
|
+
"greeting_avatar_name": "问候语 + 用户名 + 头像(问候节点出厂不存在 → 由 AI 按本 form 在 lay-navbar 用户区增量插入,属结构通道施工)",
|
|
236
|
+
"greeting_name": "问候语 + 用户名,无头像",
|
|
237
|
+
"avatar_only": "仅头像",
|
|
238
|
+
"name_only": "仅用户名"
|
|
239
|
+
},
|
|
223
240
|
"sub_selectors": {
|
|
224
|
-
"$comment": "avatar/name 为点位内部部件,不设独立语义 ID(符合 4 段 ID
|
|
241
|
+
"$comment": "avatar/name 为点位内部部件,不设独立语义 ID(符合 4 段 ID 上限);样式字段按前缀路由到对应选择器。form 含 greeting 时新增节点统一用 class 前缀 vts-header-greeting / vts-header-username(插入前先查重名)",
|
|
225
242
|
"avatar": ".navbar-right .el-dropdown-link img",
|
|
226
243
|
"name": ".navbar-right .el-dropdown-link p"
|
|
227
244
|
},
|
|
@@ -235,8 +252,11 @@
|
|
|
235
252
|
"avatar_radius": "border-radius",
|
|
236
253
|
"name_font_size": "font-size",
|
|
237
254
|
"name_font_weight": "font-weight",
|
|
255
|
+
"greeting_font_size": "font-size",
|
|
256
|
+
"greeting_font_weight": "font-weight",
|
|
238
257
|
"gap": "gap"
|
|
239
|
-
}
|
|
258
|
+
},
|
|
259
|
+
"$note": "⚠出厂中性基线:出厂 DOM 只有「头像 img + 用户名 p」,**没有任何问候语节点**(词典曾误记 .header-welcome 已实现,属虚假前提)。因此 form 含 greeting 时必须走结构增量新增 DOM,且节点文案模板(时段问候语 + 用户名)由业务层提供,本点位只承载组合形态与样式——禁止把具体问候文案写进组件。反向同理:设计只要纯头像/纯用户名时以 form=avatar_only/name_only 声明,出厂多余节点同样按收口处理(隐藏不删)。"
|
|
240
260
|
},
|
|
241
261
|
"admin.layout.tabs": {
|
|
242
262
|
"type": "module",
|
|
@@ -270,10 +290,14 @@
|
|
|
270
290
|
},
|
|
271
291
|
"admin.layout.tabs.home_tab": {
|
|
272
292
|
"type": "element",
|
|
273
|
-
"selector": ".tags-view .
|
|
274
|
-
"file": "src/layout/components/lay-tag/index.vue
|
|
293
|
+
"selector": ".tags-view .scroll-item:nth-child(1)",
|
|
294
|
+
"file": "src/layout/components/lay-tag/index.vue(首页页签 = multiTags 首项;真实 DOM 无 .home-item 类)",
|
|
275
295
|
"style_scope": ".tags-view",
|
|
276
|
-
"
|
|
296
|
+
"forms": {
|
|
297
|
+
"icon_only": "出厂默认:首位渲染 home 图标(meta.icon 缺省回退 'home'),无标题文字",
|
|
298
|
+
"text": "纯文字首位页签(隐藏图标且不占位)"
|
|
299
|
+
},
|
|
300
|
+
"$comment": "真实 DOM:.scroll-item(首项)> .card-tab,图标经 resolveCardTabIcon 渲染 svg-icon.card-tab-icon。出厂解析规则是数据驱动的:index===0 回退 'home',其余按 meta.icon 有无渲染(空则不渲染不占位)——因此「有无图标」是-menu 数据/变更集可动态决定的,不是源码常量。尺寸类意图(如 40×40)由变更集 style 字段给出,词典不预设具体设计值。",
|
|
277
301
|
"css_vars": {
|
|
278
302
|
"width": "--vts-tag-card-height",
|
|
279
303
|
"height": "--vts-tag-card-height"
|
|
@@ -283,14 +307,18 @@
|
|
|
283
307
|
"icon_color": "color",
|
|
284
308
|
"divider_color": "border-left-color"
|
|
285
309
|
},
|
|
286
|
-
"$note": "divider(首页页签与首个业务页签间的 1px 竖线分割)属子元素结构样式,设计侧通过 divider_color
|
|
310
|
+
"$note": "divider(首页页签与首个业务页签间的 1px 竖线分割)属子元素结构样式,设计侧通过 divider_color 表达视觉意图。落地口径:首页页签项宽=高=--vts-tag-card-height(40px) 居中,经 .tags-view .scroll-item:nth-child(1) 覆写 padding 实现正方形图标钮"
|
|
287
311
|
},
|
|
288
312
|
"admin.layout.tabs.item": {
|
|
289
313
|
"type": "element",
|
|
290
|
-
"selector": ".tags-view .
|
|
291
|
-
"file": "src/layout/components/lay-tag/index.vue
|
|
314
|
+
"selector": ".tags-view .scroll-item:not(:nth-child(1))",
|
|
315
|
+
"file": "src/layout/components/lay-tag/index.vue(业务页签 = multiTags 非首项;真实 DOM 无 .tags-view-item 类)",
|
|
292
316
|
"style_scope": ".tags-view",
|
|
293
|
-
"
|
|
317
|
+
"forms": {
|
|
318
|
+
"text_only": "出厂默认:业务页签纯文字(meta.icon 为空 → 不渲染不占位)",
|
|
319
|
+
"with_icon": "业务页签带图标(由路由 meta.icon 驱动显示)"
|
|
320
|
+
},
|
|
321
|
+
"$comment": "真实 DOM:.scroll-item.is-closable > .card-tab(title + el-icon-close),激活态类 .is-active。⚠出厂中性基线:图标显隐由 resolveCardTabIcon 按 meta.icon 数据驱动,不是源码写死;「某张图要求业务页签无图标」必须以 form=text_only 显式声明后由变更集落地(隐藏 .card-tab-icon 且不占位),词典不预置任何设计的结论。间距/关闭钮尺寸/激活态表现等参数一律由当次变更集 style 字段给出。",
|
|
294
322
|
"css_vars": {
|
|
295
323
|
"card_height": "--vts-tag-card-height",
|
|
296
324
|
"card_radius": "--vts-tag-card-radius",
|
|
@@ -312,10 +340,10 @@
|
|
|
312
340
|
},
|
|
313
341
|
"admin.layout.tabs.context_menu": {
|
|
314
342
|
"type": "element",
|
|
315
|
-
"selector": ".tags-view .
|
|
316
|
-
"file": "src/layout/components/lay-tag/index.vue
|
|
317
|
-
"style_scope": ".
|
|
318
|
-
"$comment": "
|
|
343
|
+
"selector": ".tags-view .el-dropdown-menu(页签栏右侧 arrow-down 触发的下拉菜单;el-dropdown 挂 body)",
|
|
344
|
+
"file": "src/layout/components/lay-tag/index.vue(右侧功能按钮 el-dropdown @command=handleCommand)",
|
|
345
|
+
"style_scope": ":global(popper 挂 body,需全局作用域 + .translation 类限定)",
|
|
346
|
+
"$comment": "真实 DOM:el-dropdown(trigger=click placement=bottom-end)+ el-dropdown-menu(class=translation)。设计意图:宽 160px、圆角 8px",
|
|
319
347
|
"css_vars": {
|
|
320
348
|
"radius": "--el-popper-border-radius",
|
|
321
349
|
"item_height": "--el-dropdown-menuItem-height"
|
|
@@ -325,7 +353,7 @@
|
|
|
325
353
|
"bg": "background-color",
|
|
326
354
|
"item_font_size": "font-size"
|
|
327
355
|
},
|
|
328
|
-
"$note": "item_height 若 EP 未暴露 popper 级变量,AI 施工时以 .
|
|
356
|
+
"$note": "item_height 若 EP 未暴露 popper 级变量,AI 施工时以 .translation.el-dropdown-menu li { height } 自定义实现并回写本条目——两层机制天然兜底。作用域注意:dropdown 挂 body,样式不得写 scoped,需全局样式 + .translation 类限定防泄漏"
|
|
329
357
|
},
|
|
330
358
|
"admin.layout.content": {
|
|
331
359
|
"type": "module",
|
package/package.json
CHANGED
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
{ "id": "admin.content.table.cell_amount", "style": { "align": "right", "font_variant_numeric": "等宽数字" } },
|
|
54
54
|
{ "id": "admin.content.table.cell_thumb", "style": { "thumb_width": "40px", "thumb_height": "40px", "thumb_radius": "小圆角" } },
|
|
55
55
|
{ "id": "component.tag.status", "form": "filled", "style": { "height": "24px", "radius": "小圆角" } },
|
|
56
|
+
{ "id": "component.button.danger", "style": { "bg_color": "错误色", "border_color": "错误色", "text_color": "#FFFFFF" } },
|
|
56
57
|
{ "id": "admin.content.pagination", "style": { "active_bg": "钴蓝-5", "active_color": "#FFFFFF" } }
|
|
57
58
|
],
|
|
58
59
|
"pending": [
|
package/parser/index.js
CHANGED
|
@@ -189,20 +189,20 @@ function matchOne(file, dataset, batchSummary) {
|
|
|
189
189
|
console.warn(` ⚠ schema "${changeset.schema}" 为历史值,建议设计侧升级为 "design.changeset/1.0"`);
|
|
190
190
|
}
|
|
191
191
|
|
|
192
|
-
// 版本校验(
|
|
192
|
+
// 版本校验(mapping_version 缺失或不匹配 → 拒绝。版本恒定 1.0.0,此校验为破坏性升级保险丝:仅双侧同步升版时才会拦截)
|
|
193
193
|
const versions = new Set(
|
|
194
194
|
Object.values(dataset.files).map(d => d.meta?.version).filter(Boolean),
|
|
195
195
|
);
|
|
196
196
|
const required = changeset.mapping_version;
|
|
197
197
|
if (!required) {
|
|
198
|
-
console.error(`✖ 缺少 mapping_version(v1.0
|
|
198
|
+
console.error(`✖ 缺少 mapping_version(v1.0 协议必填;恒填 "1.0.0"——词典版本恒定策略)`);
|
|
199
199
|
batchSummary?.invalid.push(path.basename(file));
|
|
200
200
|
if (!batchSummary)
|
|
201
201
|
process.exit(1);
|
|
202
202
|
return;
|
|
203
203
|
}
|
|
204
204
|
if (!versions.has(required)) {
|
|
205
|
-
console.error(`✖ 变更集依赖映射表版本 ${required},当前映射集版本为 ${[...versions].join("/")},不兼容 →
|
|
205
|
+
console.error(`✖ 变更集依赖映射表版本 ${required},当前映射集版本为 ${[...versions].join("/")},不兼容 → 拒绝执行(正常应恒填 "1.0.0";出现此错误通常意味着词典已发生破坏性协议升级,请与项目侧核对)`);
|
|
206
206
|
batchSummary?.invalid.push(path.basename(file));
|
|
207
207
|
if (!batchSummary)
|
|
208
208
|
process.exit(1);
|
|
@@ -527,9 +527,9 @@ function cmdList(args, dataset) {
|
|
|
527
527
|
const index = buildMergedIndex(dataset);
|
|
528
528
|
const ids = Object.keys(index).sort();
|
|
529
529
|
const filtered = scene ? ids.filter(id => id.startsWith(`${scene}.`) || !/^(admin|portal|dashboard)\./.test(id)) : ids;
|
|
530
|
-
// v1.0
|
|
530
|
+
// v1.0:头部输出映射集版本(版本恒定 1.0.0,由 SKILL.md 体系版本统一管理;此处仅健康检查展示)
|
|
531
531
|
const versions = [...new Set(Object.values(dataset.files).map(d => d.meta?.version).filter(Boolean))];
|
|
532
|
-
console.log(`映射集版本:${versions.join(" / ")}(变更集 mapping_version
|
|
532
|
+
console.log(`映射集版本:${versions.join(" / ")}(变更集 mapping_version 恒填 1.0.0)`);
|
|
533
533
|
console.log(`共 ${filtered.length} 条语义 ID${scene ? `(scene=${scene} + 全局)` : ""}:`);
|
|
534
534
|
for (const id of filtered) {
|
|
535
535
|
const e = index[id];
|
|
@@ -9,7 +9,7 @@ tags: [design-apply, changeset, semantic-id, mapping, parser, theme, layout]
|
|
|
9
9
|
|
|
10
10
|
## 定位
|
|
11
11
|
|
|
12
|
-
本能力组是**双 Skill 链路的项目侧执行端**:统一获取上游设计技能产出的「语义 ID 变更集」JSON(`design.changeset/1.0`,协议技术栈中立),由本 Skill 负责翻译并落地到目标项目(vue3-web-temp 及派生项目)。上游设计技能为 **project-ui-design
|
|
12
|
+
本能力组是**双 Skill 链路的项目侧执行端**:统一获取上游设计技能产出的「语义 ID 变更集」JSON(`design.changeset/1.0`,协议技术栈中立),由本 Skill 负责翻译并落地到目标项目(vue3-web-temp 及派生项目)。上游设计技能为 **project-ui-design**,协议文档见其 `references/changeset-schema.md`。
|
|
13
13
|
|
|
14
14
|
```
|
|
15
15
|
设计变更集 JSON(设计技能产出,中立协议)
|
|
@@ -26,17 +26,39 @@ parser match(确定性翻译)→ 施工坐标 → AI 按坐标改代码 →
|
|
|
26
26
|
变更集输入有两条来路,处理方式相同:
|
|
27
27
|
|
|
28
28
|
1. **直接输入**:用户/上游直接给出变更集 JSON 文件或内容。
|
|
29
|
-
2. **设计技能产出**:用户在设计会话产出变更集后转来落地。若用户尚未产出,可先**下发词汇约束**提升命中率——把 `node parser/index.js list --verbose` 的点位清单(ID + 字段 +
|
|
29
|
+
2. **设计技能产出**:用户在设计会话产出变更集后转来落地。若用户尚未产出,可先**下发词汇约束**提升命中率——把 `node parser/index.js list --verbose` 的点位清单(ID + 字段 + 形态枚举)一并提供给设计侧(`mapping_version` 恒为 `1.0.0`,设计侧无需查询版本),设计侧按约束输出(约束外意图走其 pending 通道,落地时按 L3 处理)。
|
|
30
30
|
|
|
31
31
|
无论哪条来路,落地流程一律走下文「执行流程」。
|
|
32
32
|
|
|
33
|
+
## 出厂中性 · 变更集驱动(架构红线,违反即返工)
|
|
34
|
+
|
|
35
|
+
**同一份模板源码,换一份变更集 = 换一套外观。** 任何「本次设计的结论」都不许固化进源码:
|
|
36
|
+
|
|
37
|
+
| | 允许 | 禁止 |
|
|
38
|
+
|---|---|---|
|
|
39
|
+
| 模板源码 | 只提供**能力通道**:CSS 变量的消费者挂载点、form 枚举、DOM/属性钩子、正确的层叠优先级 | 预置**设计结论**:某个具体颜色、某句问候语、某个方位的指示条、某个硬编码尺寸 |
|
|
40
|
+
| 设计产出 | AI 按本协议写入**设计层文件 / 页面级 scoped 样式 / DOM 属性与配置** | 为表达某张效果图而改写出厂样式文件与出厂组件(换设计即失效,且污染模板) |
|
|
41
|
+
|
|
42
|
+
**判据(一句话)**:换一张效果图只需要换变更集、不需要改源码 ⇒ 架构正确;需要改源码才能换 ⇒ 设计结论被烧进了源码,必须回退为通道。
|
|
43
|
+
|
|
44
|
+
- ❌ 反例:把「菜单激活指示条 = 左侧 3px」写死进 `sidebar.scss` / `element-plus.scss`;把问候语 DOM 直接加进 `lay-navbar/index.vue`;出厂 `<component>` 上硬编码 `data-content-mode="scroll"`。
|
|
45
|
+
- ✅ 正例:`admin.layout.sidebar.menu` 暴露 `forms`(pill/indicator_left/indicator_right/indicator_underline/none)+ 几何字段,方位与粗细由变更集驱动;高度模式出厂不带任何属性,由页面根节点按变更集声明。
|
|
46
|
+
|
|
47
|
+
**落地三落点判据**(每个变更字段先判落点再动手):
|
|
48
|
+
|
|
49
|
+
1. **有非样式通道**(DOM 属性 / 组件配置 / `platform-config.json`)→ 必须走该通道(form=scroll/fixed → 页面根节点 `data-content-mode`;form=card → `ShowModel`)。降级写成 SCSS = 未施工。
|
|
50
|
+
2. **无通道且需改 DOM**(新增节点,如问候语欢迎区)→ 结构增量施工(AI 在组件模板内按 `form` 插入,保形插入、不删原代码)。
|
|
51
|
+
3. **纯视觉表达**(颜色/圆角/间距/指示条几何)→ 设计层文件(见第 3 步)。
|
|
52
|
+
|
|
53
|
+
**出厂文件仅在「通道缺失」时才可改动**,且须同时满足:① 补的是能力不是结论(补变量消费者、补 form 枚举、修层叠优先级);② 在交付说明中单列「补通道」条目写明缺失点与修复内容。
|
|
54
|
+
|
|
33
55
|
## 输入契约(变更集 Schema v1.0)
|
|
34
56
|
|
|
35
57
|
```jsonc
|
|
36
58
|
{
|
|
37
59
|
"schema": "design.changeset/1.0", // 协议版本(parser 兼容历史值 design-changeset/v1,新输出一律用 1.0)
|
|
38
|
-
"changeset_version": "1.0.0", //
|
|
39
|
-
"mapping_version": "1.0.0", //
|
|
60
|
+
"changeset_version": "1.0.0", // 恒填 "1.0.0"
|
|
61
|
+
"mapping_version": "1.0.0", // 恒填 "1.0.0":版本由双侧 SKILL.md 体系版本统一管理,词典不单独演进。parser 校验口径 = 变更集值 ∈ 词典版本集合(恒通过);仅协议破坏性升级时双侧同步升版
|
|
40
62
|
"scene": "admin", // 场景前缀,须与 mapping 场景域一致
|
|
41
63
|
"layout_type": "vertical", // 标准布局枚举:vertical / horizontal / mix(字段名固定 layout_type,非 layout)
|
|
42
64
|
"global": { "brand_primary": "钴蓝-5" }, // 可选:全局令牌通道(整套主题切换优先走此节点;值 = 语义名或临时主题 hex)
|
|
@@ -60,8 +82,8 @@ parser match(确定性翻译)→ 施工坐标 → AI 按坐标改代码 →
|
|
|
60
82
|
- `style` 字段为**抽象视觉语义**(`menu_bg`、`radius`),不得出现 CSS 变量名、选择器、`!important`、技术栈词汇。值口径:官方 5 套主题用语义名(`钴蓝-5`,译表见 `mapping/basic/semantic-values.json`);库外临时主题直接 hex + `notes` 申报派生口径。
|
|
61
83
|
- `position` 用相对方位词,不用像素坐标。
|
|
62
84
|
- `visible: false` 只做隐藏,**永不删除代码**。
|
|
63
|
-
- `pending` 数组声明的是设计侧新点位,直接归入 L3
|
|
64
|
-
- parser
|
|
85
|
+
- `pending` 数组声明的是设计侧新点位,直接归入 L3 处理(不是错误)。**注意:pending 不是施工指令**——L3 施工的内容以 `changes[]` 中同 ID 新条目声明的意图为准;设计侧只登记 pending、未在 changes[] 声明意图的点位,落地时按出厂现状处理并在待补充清单中反馈「该点位设计意图缺失」。
|
|
86
|
+
- parser 校验已实现:schema 硬校验、mapping_version 缺失/不匹配拒绝、禁词与 hex 位置校验、语义 ID 命名校验。
|
|
65
87
|
|
|
66
88
|
## 执行流程(按序,禁止跳步)
|
|
67
89
|
|
|
@@ -95,11 +117,16 @@ node parser/index.js match --batch <changesets-dir>
|
|
|
95
117
|
- `visible: false` → 按条目 `visible_prop`(如 `platform-config.json` 的 `HideTabs`)或组件 `v-if` 隐藏;无现成通道时 `display: none`,作用域限定在条目 `style_scope` 内。**不删除任何代码行。**
|
|
96
118
|
- `position` → 优先用 flex 顺序(`order` / DOM 位置调整),禁止绝对定位像素坐标。
|
|
97
119
|
- `form` → 按条目 `forms` 枚举切换(如 tabs 的 `chrome`/`card` 走 `platform-config.json ShowModel`;内容区滚动模式走 `admin.content.container` 的 form(`fixed`/`scroll`/`auto` → 路由组件根节点 `data-content-mode` 属性,`auto` 为省略即钩子类探测)。枚举外的形态 → 报告,不猜。
|
|
120
|
+
- `form` 的落点按上文「落地三落点判据」执行:**有 DOM/配置通道走通道,无通道需新节点走结构增量,纯视觉形态走设计层样式文件**。当某形态在本项目只有样式表达(如菜单指示条方位)时,该 form 允许落到样式层——这与「禁止把内容区高度模式降级成 SCSS」不冲突,判据是**该形态有没有非样式通道**。
|
|
98
121
|
- `layout_type` → 改 `platform-config.json Layout` 字段,值域 `vertical/horizontal/mix`。**大屏全屏沉浸式等独立页不走此通道**(设计侧不填 `layout_type`,点位走 L3 落地)。
|
|
99
122
|
|
|
123
|
+
**存在性收口(通用机制,第 2 步随结构处理)**:变更集未声明的**出厂多余元素**(设计效果图上不存在的按钮/图标/入口,如顶栏设置按钮)→ 按各条目口径处理:有条目者在对应点位上以 `visible:false` 收口(代码保留,`v-if`/`display:none`);无条目者列入待补充清单申报「设计侧未声明,按无此元素收口」,同样以隐藏通道落地。禁止既不声明也不收口、让出厂元素顶替设计效果(顶栏设置按钮漏收口已实证:效果图无此按钮,落地后仍显示)。反向同理:**设计声明了而出厂没有的元素**(如欢迎区问候语)必须按条目 `$note`/设计规范补齐结构(结构通道豁免底线二),缺失 = 未交付。
|
|
124
|
+
|
|
125
|
+
**结构/样式图层分工**:`form`(高度模式、形态枚举)是**结构意图**,必须落到 DOM 属性/组件开关/配置字段(如 `data-content-mode`、`ShowModel`);**禁止把结构意图降级翻译成 SCSS 变量写进样式文件**(form=scroll 只写 `--vts-margin` = 未施工,已实证)。样式文件(如 design-shell.scss)只承载 css_vars/custom_style_map 翻译产物;壳层通用文件禁止代打页面级结构属性(lay-content 硬编码 `data-content-mode="scroll"` 曾压掉 `:has()` 自动定高探测,useTableSearch 高度链断裂致列表区整体崩坏——已回退,禁止复活)。
|
|
126
|
+
|
|
100
127
|
### 第 3 步 · 样式落地(两层转换 + 语义值译表)
|
|
101
128
|
|
|
102
|
-
对每个 `style` 字段,按 parser 转换指令执行(parser 已把语义值解析为精确值,如 `钴蓝-5` → `#245BFF
|
|
129
|
+
对每个 `style` 字段,按 parser 转换指令执行(parser 已把语义值解析为精确值,如 `钴蓝-5` → `#245BFF`)。**冲突裁决规则(免问):凡变更集声明与项目出厂现状/模板既有口径冲突,一律按变更集执行——变更集是唯一施工依据,不反问、不逐次确认。**
|
|
103
130
|
|
|
104
131
|
1. **css_vars 层(优先)**:在条目 `style_scope` 作用域内覆盖该 CSS 变量。
|
|
105
132
|
```scss
|
|
@@ -119,6 +146,17 @@ node parser/index.js match --batch <changesets-dir>
|
|
|
119
146
|
|
|
120
147
|
全局令牌(`global` 字段,**整套主题切换优先通道**)→ `design-tokens.scss` 对应变量(`basic/` 词典翻译,语义值走 `mapping/basic/semantic-values.json` 译表),主色走 `setEpThemeColor()` 链路。**壳层模块底色注意**:顶栏底色不走 global(无独立令牌),须以 `{"id": "admin.layout.header", "style": {"bg": "<值>"}}` 场景条目声明(scoped 覆盖 .navbar 底色);侧栏底色两者皆可——global 走 `sidebar_bg`(--sidebar-bg 令牌链),场景条目走 `admin.layout.sidebar` 的 `bg`(--vts-theme-menu-bg)。
|
|
121
148
|
|
|
149
|
+
### 第 3 步附加 · 设计层落点文件(强制)
|
|
150
|
+
|
|
151
|
+
所有「新增的 CSS 规则」一律写入 **`src/styles/design-shell.scss`**(出厂空文件,经 `index.scss` 末位 `@use` 加载 → 后置压出厂,无需 `!important`),或写入页面级 `<style scoped>`;**不得**写进 `sidebar.scss` / `element-plus.scss` / `theme.scss` / `lay-*.vue` 等出厂文件去表达某张效果图的结论。
|
|
152
|
+
|
|
153
|
+
写入纪律:
|
|
154
|
+
|
|
155
|
+
- 每条规则带来源标注(`/* <语义 ID> · <变更条目> */`),换设计时整段可替换;
|
|
156
|
+
- 本文件内新增的 CSS 变量必须**定义 + 引用成对出现**(出厂已有消费者也算),避免死通道;
|
|
157
|
+
- 出厂元素需关闭时(存在性收口)也在这里做:令牌置 `transparent` 或 `display:none`,**绝不删出厂代码行**;
|
|
158
|
+
- 出厂 `--vts-theme-menu-active-before` 默认 `transparent` 且无消费者 → 声明 `form=indicator_*` 时必须在此文件内**同时**落地「关胶囊令牌 `menu_active_bg: transparent`」与「新建 `::after` 消费者」,缺一即未施工成功。
|
|
159
|
+
|
|
122
160
|
### 第 4 步 · L3 新模块处理(分级布局)
|
|
123
161
|
|
|
124
162
|
- 新模块按「定制布局」三步走:① 基于全局规范生成结构(继承命名/作用域/组件规范)② 原子层字段(色彩/圆角/组件级)从 `basic/` + `component/` 词典借力 ③ 场景专属点位生成后**立即写入 mapping/ 对应场景域**(临时映射),累计复用 ≥3 次建议升级标准(由人工评审)。
|
|
@@ -135,13 +173,19 @@ node parser/index.js match --batch <changesets-dir>
|
|
|
135
173
|
- [ ] 未改动业务逻辑层(API/状态/事件——**底线二**;样式与结构通道内的 DOM 调整除外)
|
|
136
174
|
- [ ] 两层样式全部落在 `style_scope` 作用域内,无全局泄漏
|
|
137
175
|
- [ ] **类名冲突检查(AI 施工硬性步骤)**:新增 class 之前先在目标文件与同作用域全局样式中检索同名类——已存在时禁止直接追加重复定义,按三选一处理并在交付说明申报:① 语义相同 → **合并**进既有规则;② 语义不同 → 改用带点位前缀的新类名(如 `vts-<语义id末段>`);③ 确需覆盖 → 走作用域内更高优先级(不写 `!important`)。重复类名(尤其跨 `<style>` 块的 scoped 样式重复定义)会触发编辑器/构建报错,**本项不通过不得交付**
|
|
176
|
+
- [ ] **出厂中性检查(架构红线,不通过必须回退重做)**:diff 中不得出现「为表达本次设计而改写出厂文件」的产物——典型症状:把指示条方位/问候语 DOM/某个具体尺寸直接写进 `sidebar.scss`、`element-plus.scss`、`lay-navbar/index.vue`、`lay-content/index.vue` 等出厂载体;在出厂 `<component>` 上硬编码 `data-content-mode`/样式钩子。出厂文件若被改动,只能是「补通道」(补变量消费者 / 补 form 枚举 / 修层叠优先级,如已修的 `:has()` 与显式模式优先级反转),且必须在交付说明单列「补通道」条目写明缺失点;非此情形一律回退,改由 `design-shell.scss` + 变更集驱动
|
|
138
177
|
- [ ] **文本溢出回归检查**:改动侧栏菜单/顶栏/页签等含文字的模块后,必须确认「长文本显示」未被破坏(菜单项名称完整可见,必要时保留 ellipsis 溢出策略而不是隐藏/截断);宽度相关字段(width/min-width/padding)改动后逐项目视验证
|
|
139
|
-
- [ ]
|
|
178
|
+
- [ ] **形态与存在性目视验证(历史漏还原高发区,声明即必须验证,没做视同未交付)**:变更集声明了以下意图时,逐项在页面上确认真实生效——
|
|
140
179
|
- 语言切换 form=inline_switch → 顶栏出现「中|EN」并排文字(不再是纯图标)
|
|
141
|
-
- 折叠按钮 form=header_inline → 顶栏最左出现 40×40
|
|
180
|
+
- 折叠按钮 form=header_inline → 顶栏最左出现 40×40 折叠按钮且与首页页签左对齐;**同时侧栏底部出厂折叠条按设计隐藏(visible:false 声明时)**,避免双折叠按钮并存
|
|
181
|
+
- 侧栏 `menu_active_*` / `form=indicator_*` → **按变更集声明的 form 逐项核对**(indicator_left → 左侧竖条;indicator_right → 右侧竖条;indicator_underline → 底部横线;pill → 胶囊底色;none → 无指示):方位/粗细/长度/圆角与变更集 style 字段一致,且出厂胶囊已关闭(`--vts-theme-menu-active-bg: transparent`)、`--vts-theme-menu-active-before` 消费者真实建成。**禁止用「左侧 3px」这类历史/词典结论替代当次声明**——设计换了就必须是新的方位与数值
|
|
182
|
+
- 顶栏未声明点位(设置按钮等)→ 已收口不显示;用户区 → 按 `form` 核对组合形态(`avatar_name` / `greeting_avatar_name` / `greeting_name` / `avatar_only` / `name_only`),其中 greeting 为结构增量节点(出厂无此 DOM,需 AI 按 form 插入后再验)
|
|
183
|
+
- 页签图标 → 按 `form` 核对(item 的 `text_only`/`with_icon`,home_tab 的 `icon_only`/`text`),出处是路由 `meta.icon` 数据或本次隐藏规则,不是源码常量
|
|
184
|
+
- 内容区 form=scroll/fixed → `data-content-mode` 属性落在页面根节点(不是样式文件),列表页 `:has(.vts-page-card)` 自动定高未被压掉——**列表页必验:表头/行/分页在视口内、表格高度正常(无拉伸/塌陷/双滚动条)**
|
|
142
185
|
- 操作栏 form=with_tools/left_batch → 刷新/密度/列设置三件套齐全;批量删除红底/导出白底/未选中置灰
|
|
143
|
-
-
|
|
144
|
-
- tabs form → 页签形态切换生效(chrome/card
|
|
186
|
+
- 操作列 form=text_link → **业务列定义的 icon 字段已移除**(纯文字无图标,只改 CSS 保留图标 = 未还原);按钮单行不换行(列宽 ≥160px + nowrap);删除项红色;≥3 个折叠「更多」带箭头
|
|
187
|
+
- tabs form → 页签形态切换生效(chrome/card);激活态表现(有无下划线 / 是否仅文字变色 / 字重)按当次变更集 style 字段核对,**不以历史设计稿口径为准**
|
|
188
|
+
- [ ] **映射通道活性检查(杂必查)**:样式落地引用的每个 CSS 变量必须在项目样式中**存在消费者**(`变量名` 有 `var(--xxx)` 引用点);只定义不消费的变量 = 通道死路,翻译再准也不生效(menu_active_indicator 曾因 --vts-theme-menu-active-before 无消费者而「映射了却没效果」)。施工时 grep 核对,无消费者时改走消费者存在的作用域或补挂载点并申报。
|
|
145
189
|
- [ ] **dark.scss 暗色同步**:新增视觉规则在 `html.dark` 有对应覆盖
|
|
146
190
|
- [ ] 待补充清单已如实反馈(含点位 ID + 缺失字段名),未擅自补映射
|
|
147
191
|
- [ ] `node parser/index.js build --dry` 通过(mapping 若有临时新增)
|
|
@@ -181,6 +225,6 @@ node parser/index.js build --dry # I. 产物链自检
|
|
|
181
225
|
|
|
182
226
|
## 配套工具(作者/维护侧)
|
|
183
227
|
|
|
184
|
-
- **watch
|
|
185
|
-
- **业务级覆写 API
|
|
186
|
-
- **mapping
|
|
228
|
+
- **watch 模式**:`node parser/watch.js` 或 `npm run mapping:watch`——监听 mapping/ 下 JSON 变更,自动「校验 + 重编 dist/」;校验失败不杀进程,修正后自动重试。
|
|
229
|
+
- **业务级覆写 API**:`import { themeVars, overrideMapping } from '<skill>/dist/theme-vars.js'`——仅覆写指定字段,不改动基础映射;strict 模式下覆写词典外字段直接报错(防拼错静默失效)。当前 vue3-web-temp 不引入,服务于未来空白项目。
|
|
230
|
+
- **mapping 版本流程**:所有 mapping/*.json 的 `meta.version` 恒为 `1.0.0`(由 SKILL.md 体系版本统一管理);`release.js` 发版前自动执行 `parser build` 刷新 dist/,产物随 NPM 包发布。
|