@qilitt-mickey/vue3-temp-skill 1.1.45 → 1.1.47
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/mapping/scenes/admin/content.json +10 -6
- package/mapping/scenes/admin/layout.json +12 -7
- package/package.json +1 -1
- package/parser/index.js +62 -5
- package/references/code-quality.md +3 -1
- package/references/design-apply.md +50 -3
- package/references/cobalt-admin-restore.changeset.json +0 -468
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"admin.content.table.operation_bar": {
|
|
75
75
|
"type": "element",
|
|
76
76
|
"selector": ".vts-action-bar",
|
|
77
|
-
"file": "
|
|
77
|
+
"file": "条件通道:ReTableBar 内部工具栏行(标题/按钮/工具三件套所在行)是本条目的唯一合法挂载点;该行出厂**无语义类**,selector 命中前须按 structure_ops 给该行补挂 .vts-action-bar(属补通道,交付说明单列申报)。禁止挂到 ReTableBar 根节点(见 preconditions)。右侧工具三件套源码实证:刷新 svg-icon + el-dropdown 密度(宽松/默认/紧凑)+ el-popover 列设置",
|
|
78
78
|
"style_scope": ".vts-page-card",
|
|
79
79
|
"forms": {
|
|
80
80
|
"with_tools": "工具三件套(刷新/密度/列设置)齐全——设计规范 list-page §4 要求三件套缺一不可(ReTableBar 出厂已具备,此为默认形态)",
|
|
@@ -92,18 +92,19 @@
|
|
|
92
92
|
"batch_disabled_opacity": "opacity"
|
|
93
93
|
},
|
|
94
94
|
"anchors": [
|
|
95
|
-
{ "kind": "class", "layer": "
|
|
95
|
+
{ "kind": "class", "layer": "inner", "target": ".vts-action-bar" },
|
|
96
96
|
{ "kind": "class", "layer": "inner", "target": ".vts-action-bar .el-button" },
|
|
97
97
|
{ "kind": "css_var", "target": "--action-bar-gap" },
|
|
98
98
|
{ "kind": "css_var", "target": "--action-bar-padding-y" }
|
|
99
99
|
],
|
|
100
100
|
"preconditions": [
|
|
101
|
-
"
|
|
102
|
-
"
|
|
101
|
+
"挂载点唯一合法位置 = ReTableBar 内部工具栏行(出厂已挂 .vts-action-bar)。禁止把 .vts-action-bar 挂到 ReTableBar 根节点:根节点是「工具栏行 + 表格 + 分页」的纵向复合容器,而 .vts-action-bar 是 flex-direction: row —— 挂根节点会让工具栏与表格并排、表格被挤压、tableHeight 实测失准(已发生的事故,勿复发)。",
|
|
102
|
+
"本条目 sid 锚点只能落在 ReTableBar 根节点(页面透传 attrs 到根),样式落点是内层工具栏行 —— anchors 的 layer 必须区分 host / inner,verify 抽取按 anchors.target 而非 sid 所在节点。",
|
|
103
|
+
"gap / padding 的 CSS 变量必须在项目样式中存在消费者(var() 引用),只定义不消费 = 死通道。--action-bar-padding-y 供 padding-block,最多两个值(如 20px 8px),给三个值整条声明即失效。"
|
|
103
104
|
],
|
|
104
105
|
"priority": {
|
|
105
106
|
"strategy": "scope_qualified",
|
|
106
|
-
"reason": "
|
|
107
|
+
"reason": "出厂 .vts-action-bar 类位 1,作用域限定(html body .vts-table-area .vts-action-bar)即可覆盖;但不得把样式写到 ReTableBar 根节点上。"
|
|
107
108
|
},
|
|
108
109
|
"$note": "设计意图(list-page §4/§11.25-11.36):flex 两端对齐、pad 20px 20px 8px、左侧批量(未选中置灰 opacity 0.4 + not-allowed)、右侧工具三件套缺一不可。分工:本条目管容器布局与置灰;批量删除红色按钮本体走 component.button.danger。demo 噪音按钮去留属业务层,交付说明申报后由项目侧业务闭环移除"
|
|
109
110
|
},
|
|
@@ -119,8 +120,10 @@
|
|
|
119
120
|
"css_vars": {
|
|
120
121
|
"link_color": "--el-color-primary",
|
|
121
122
|
"danger_color": "--el-color-danger",
|
|
122
|
-
"divider_color": "--
|
|
123
|
+
"divider_color": "--re-op-divider-color",
|
|
124
|
+
"divider_gap": "--re-op-divider-gap"
|
|
123
125
|
},
|
|
126
|
+
"$note": "操作列分割线为**条件通道**:出厂组件当前**没有**分割线元素——声明 divider_color / divider_gap 时,必须先按 structure_ops 在 ReTableOperate 模板按钮间 add_node `<span class=\"re-table-operate__divider\">`(中性元素,几何与颜色全走令牌:width/height/gap/color 分别挂 --re-op-divider-width/height/gap/color,出厂缺省 0 不可见),并同步给 resolveOperateColumnWidth 公式补分割线占位((limit-1)×(width+2×gap)),否则最后按钮被裁——元素与公式缺一即申报补通道失败。列宽由组件公式推算,业务页禁止写死 width——列宽属业务层,设计侧不声明列宽(操作列除外)。",
|
|
124
127
|
"custom_style_map": {
|
|
125
128
|
"align": "text-align",
|
|
126
129
|
"min_width": "min-width",
|
|
@@ -180,6 +183,7 @@
|
|
|
180
183
|
],
|
|
181
184
|
"preconditions": [
|
|
182
185
|
"Element Plus 表头是「宿主 th.el-table__cell + 内层 .cell 文本盒」两层结构;EP 出厂给内层 .cell 写了 white-space: normal,因此 nowrap / text-overflow 这类文本控制必须落在 inner 层,写在宿主 th 上会被内层覆盖(这是「表头竖排换行」的根因)。高度 / padding / 背景落在 host 层。",
|
|
186
|
+
"几何语境随值迁移:EP 内层 .cell 出厂自带 padding 0 12px,设计的 16px 落到 host 后必须同步把内层 .cell 的 padding 归零,否则实际内边距 16+12=28px/侧 → 列宽被挤、表头标题被省略号截断(类…/包…/操…),视觉不适配常规。数据单元格(td)同理。",
|
|
183
187
|
"表头单元格可能被业务页用 :header-cell-style 注入行内样式,行内样式优先级高于一切类规则;使用本条目时须确认页面未在列上写死行内表头样式,若有则在页面侧移除、改由本条目承载。"
|
|
184
188
|
],
|
|
185
189
|
"priority": {
|
|
@@ -54,11 +54,11 @@
|
|
|
54
54
|
"file": "src/layout/components/lay-sidebar/NavVertical.vue",
|
|
55
55
|
"style_scope": ".sidebar-container",
|
|
56
56
|
"forms": {
|
|
57
|
-
"pill": "
|
|
58
|
-
"indicator_left": "左侧竖条指示:先在本作用域覆写 --vts-theme-menu-active-bg: transparent 关胶囊,再于设计层新建 ::after 竖条(left:0)消费 --vts-theme-menu-active-before",
|
|
59
|
-
"indicator_right": "右侧竖条指示:同上关胶囊后 ::after 挂 right:0
|
|
60
|
-
"indicator_underline": "底部横线指示:关胶囊后 ::after 挂 bottom:0(宽取 100% 或指定宽度,厚取 indicator_thickness
|
|
61
|
-
"none": "
|
|
57
|
+
"pill": "整块胶囊底色高亮(sidebar.scss 消费 --vts-theme-menu-active-bg,带 !important)。suppress 必含 right_indicator_legacy——出厂 element-plus.scss 的 .el-menu-item.is-active{border-right:var(--menu-active-border-right)} 是活通道,不收口会出现左右两根竖条并存",
|
|
58
|
+
"indicator_left": "左侧竖条指示:先在本作用域覆写 --vts-theme-menu-active-bg: transparent 关胶囊,再于设计层新建 ::after 竖条(left:0)消费 --vts-theme-menu-active-before。suppress 必含 right_indicator_legacy",
|
|
59
|
+
"indicator_right": "右侧竖条指示:同上关胶囊后 ::after 挂 right:0。出厂右竖条通道 --menu-active-border-right(element-plus.scss 消费、design-tokens.scss 定义为 3px solid 品牌色)是活通道,可复用也可收口后自建,二选一必须显式声明",
|
|
60
|
+
"indicator_underline": "底部横线指示:关胶囊后 ::after 挂 bottom:0(宽取 100% 或指定宽度,厚取 indicator_thickness)。suppress 必含 right_indicator_legacy",
|
|
61
|
+
"none": "无指示:胶囊与竖条均关闭,仅文字变色。suppress 必含 right_indicator_legacy"
|
|
62
62
|
},
|
|
63
63
|
"css_vars": {
|
|
64
64
|
"menu_bg": "--vts-theme-menu-bg",
|
|
@@ -69,6 +69,7 @@
|
|
|
69
69
|
"sub_menu_active_text": "--vts-theme-sub-menu-active-text",
|
|
70
70
|
"menu_active_bg": "--vts-theme-menu-active-bg",
|
|
71
71
|
"menu_active_indicator": "--vts-theme-menu-active-before",
|
|
72
|
+
"right_indicator_legacy": "--menu-active-border-right",
|
|
72
73
|
"sidebar_border": "--vts-sidebar-border-color",
|
|
73
74
|
"item_height": "--el-menu-item-height"
|
|
74
75
|
},
|
|
@@ -138,8 +139,12 @@
|
|
|
138
139
|
"bg": "background-color",
|
|
139
140
|
"box_shadow": "box-shadow",
|
|
140
141
|
"gap": "gap",
|
|
141
|
-
"border_color": "border-color"
|
|
142
|
-
|
|
142
|
+
"border_color": "border-color",
|
|
143
|
+
"align_items": "align-items"
|
|
144
|
+
},
|
|
145
|
+
"preconditions": [
|
|
146
|
+
"顶栏内容垂直居中:--header-height 变更(如 54px)后,宿主 .navbar 必须显式 align-items: center——出厂顶栏内元素高度不一(折叠钮 40px / 文字行 / 头像),不显式声明会整体偏上(历史缺口:折叠按钮不垂直居中)。"
|
|
147
|
+
]
|
|
143
148
|
},
|
|
144
149
|
"admin.layout.header.logo_area": {
|
|
145
150
|
"type": "element",
|
package/package.json
CHANGED
package/parser/index.js
CHANGED
|
@@ -103,7 +103,9 @@ function printHelp() {
|
|
|
103
103
|
node parser/index.js match --batch <dir> 项目级批量匹配:目录下全部变更集 + 跨文件汇总
|
|
104
104
|
node parser/index.js audit --project <dir> [<cs.json…>] 挂载点存在性 + 死通道静态审计(需目标项目源码)
|
|
105
105
|
node parser/index.js verify --oracle <o.json> --actual <a.json> [--sids a,b]
|
|
106
|
-
渲染态逐点验收:computed style 期望 vs 实测 diff
|
|
106
|
+
渲染态逐点验收:computed style 期望 vs 实测 diff
|
|
107
|
+
node parser/index.js verify … --from-theme 钴蓝 --to-theme 橘橙
|
|
108
|
+
同构异色复用:按语义槽位把效果图色值归一为本主题色值再比(配合 oracle.theme_mapping)
|
|
107
109
|
node parser/index.js registry <registry.json> [--verbose]
|
|
108
110
|
登记表通道核验:登记项 sid 是否在词典、dims 是否有落点()
|
|
109
111
|
node parser/index.js list [--scene admin] [--verbose] 列出全部语义 ID(--verbose 含字段与形态,供下发词汇约束)
|
|
@@ -675,8 +677,21 @@ function checkOracle(changeset, plan, valueDict) {
|
|
|
675
677
|
};
|
|
676
678
|
const declaredTheme = themeFromValue(changeset.global && changeset.global.brand_primary);
|
|
677
679
|
const mockupTheme = [...themes].find(t => mockup.includes(t)) || null;
|
|
678
|
-
|
|
679
|
-
|
|
680
|
+
|
|
681
|
+
// 同构异色复用:设计侧在 oracle 声明 theme_mapping { "from": "钴蓝", "to": "橘橙" } =
|
|
682
|
+
// 明确本变更集与效果图同场景 / 同页面 / 同角色集合,仅主题色板不同(语义槽位 -1..-10 一一对应)。
|
|
683
|
+
// 此时沿用 from 主题效果图是合法基线:verify 用 --from-theme/--to-theme 把色值归一到语义槽位再比,
|
|
684
|
+
// 几何 / 结构 / 字号等非色属性逐点照比 —— 不允许「只换个颜色就闭环不了」。
|
|
685
|
+
const tm = oracle.theme_mapping && typeof oracle.theme_mapping === "object" ? oracle.theme_mapping : null;
|
|
686
|
+
const declaredReuse = !!(tm && tm.from && tm.to
|
|
687
|
+
&& themes.has(tm.from) && themes.has(tm.to)
|
|
688
|
+
&& declaredTheme === tm.to && mockupTheme === tm.from);
|
|
689
|
+
|
|
690
|
+
if (declaredReuse) {
|
|
691
|
+
console.log(` ↺ 同构异色复用已声明:效果图「${tm.from}」→ 本主题「${tm.to}」(oracle.theme_mapping)。verify 需带 --from-theme ${tm.from} --to-theme ${tm.to} 做色值归一后比对。`);
|
|
692
|
+
}
|
|
693
|
+
else if (declaredTheme && mockupTheme && declaredTheme !== mockupTheme) {
|
|
694
|
+
issues.push(`主题错配:效果图是「${mockupTheme}」、本变更集主色是「${declaredTheme}」。同构异色(只换主题色板、场景/页面/角色集合不变)时,由设计侧在 oracle 声明 theme_mapping: { "from": "${mockupTheme}", "to": "${declaredTheme}" } 即可复用该效果图闭环;若结构 / 形态也变了,则必须换本主题自己的效果图。`);
|
|
680
695
|
}
|
|
681
696
|
if (!mockupTheme && mockup)
|
|
682
697
|
issues.push(`效果图文件名不含任何已知主题词(${[...themes].join("/")}),无法确认主题一致性 —— 请核对是否复用了其它主题的效果图。`);
|
|
@@ -684,8 +699,14 @@ function checkOracle(changeset, plan, valueDict) {
|
|
|
684
699
|
// ② 覆盖度(双向)
|
|
685
700
|
const declaredIds = plan.map(p => p.id);
|
|
686
701
|
const sidSet = new Set(sids);
|
|
702
|
+
// 仅 visible:false 的隐藏点位在效果图上没有可见元素可标 data-sid —— 豁免「无基线」判定
|
|
703
|
+
const hiddenOnly = new Set(
|
|
704
|
+
plan.filter(p => p.change && p.change.visible === false).map(p => p.id),
|
|
705
|
+
);
|
|
687
706
|
const sidNotDeclared = sids.filter(s => !declaredIds.includes(s));
|
|
688
|
-
const declaredWithoutSid = declaredIds.filter(id => !sidSet.has(id));
|
|
707
|
+
const declaredWithoutSid = declaredIds.filter(id => !sidSet.has(id) && !hiddenOnly.has(id));
|
|
708
|
+
if (hiddenOnly.size > 0)
|
|
709
|
+
console.log(` ℹ 隐藏点位(仅 visible:false)${hiddenOnly.size} 处豁免 sid 标注:${[...hiddenOnly].join("、")}`);
|
|
689
710
|
if (sidNotDeclared.length > 0)
|
|
690
711
|
issues.push(`欠声明 ${sidNotDeclared.length} 处:效果图里有、changes[] 未声明 → 该点位永远不可能被还原。\n ${sidNotDeclared.join("、")}`);
|
|
691
712
|
if (declaredWithoutSid.length > 0)
|
|
@@ -1350,6 +1371,41 @@ function cmdVerify(args) {
|
|
|
1350
1371
|
return s;
|
|
1351
1372
|
};
|
|
1352
1373
|
|
|
1374
|
+
// 同构异色主题归一:--from-theme 钴蓝 --to-theme 橘橙 时,把效果图的主题色族色值
|
|
1375
|
+
// 按语义译表的槽位(-1..-10)映射为本主题同槽位色值再比对;译表之外的值原样保留。
|
|
1376
|
+
const fromTheme = get("--from-theme");
|
|
1377
|
+
const toTheme = get("--to-theme");
|
|
1378
|
+
let themeAlias = null;
|
|
1379
|
+
if (fromTheme && toTheme) {
|
|
1380
|
+
try {
|
|
1381
|
+
const sv = JSON.parse(readFileSync(path.join(ROOT, "mapping", "basic", "semantic-values.json"), "utf-8"));
|
|
1382
|
+
const slotOf = {};
|
|
1383
|
+
const hexOf = {};
|
|
1384
|
+
for (const t of Object.values(sv.themes || {})) {
|
|
1385
|
+
for (const [name, hex] of Object.entries(t.values || {})) {
|
|
1386
|
+
const m = /^(.+?)-(\d+)$/.exec(name);
|
|
1387
|
+
if (!m)
|
|
1388
|
+
continue;
|
|
1389
|
+
const key = String(hex).toLowerCase();
|
|
1390
|
+
slotOf[`${t.label}|${key}`] = m[2];
|
|
1391
|
+
hexOf[`${t.label}|${m[2]}`] = key;
|
|
1392
|
+
}
|
|
1393
|
+
}
|
|
1394
|
+
themeAlias = (v) => {
|
|
1395
|
+
let s = String(v == null ? "" : v).toLowerCase();
|
|
1396
|
+
s = s.replace(/#([0-9a-f]{3})\b/g, (_, h) => `#${h[0]}${h[0]}${h[1]}${h[1]}${h[2]}${h[2]}`);
|
|
1397
|
+
return s.replace(/#[0-9a-f]{6}/g, (hex) => {
|
|
1398
|
+
const lvl = slotOf[`${fromTheme}|${hex}`];
|
|
1399
|
+
return lvl ? (hexOf[`${toTheme}|${lvl}`] || hex) : hex;
|
|
1400
|
+
});
|
|
1401
|
+
};
|
|
1402
|
+
console.log(`主题归一:效果图「${fromTheme}」→ 本主题「${toTheme}」(按语义槽位映射色值后比对,几何 / 结构照比)`);
|
|
1403
|
+
}
|
|
1404
|
+
catch (e) {
|
|
1405
|
+
console.log(`⚠ 主题译表读取失败(${e.message})—— 本轮不做主题色归一,色值类属性可能出现假缺口`);
|
|
1406
|
+
}
|
|
1407
|
+
}
|
|
1408
|
+
|
|
1353
1409
|
console.log(`渲染态验收(computed style 逐点比对)`);
|
|
1354
1410
|
console.log(`效果图基线:${path.resolve(oraclePath)}`);
|
|
1355
1411
|
console.log(`项目实测:${path.resolve(actualPath)}`);
|
|
@@ -1385,7 +1441,8 @@ function cmdVerify(args) {
|
|
|
1385
1441
|
attr.selector_miss++;
|
|
1386
1442
|
continue;
|
|
1387
1443
|
}
|
|
1388
|
-
|
|
1444
|
+
const expNorm = themeAlias ? themeAlias(expVal) : expVal;
|
|
1445
|
+
if (normValue(expNorm) === normValue(act[prop])) {
|
|
1389
1446
|
hitProps++;
|
|
1390
1447
|
continue;
|
|
1391
1448
|
}
|
|
@@ -55,6 +55,7 @@ lint / type-check **过了也不能放过**下列项。发现即改代码,禁
|
|
|
55
55
|
| 设计变更集落地(`design-apply`) | 声明已落地但节点无对应锚点(`anchor.kind` 目标不存在:类未绑 / 变量无消费者 / 属性未挂) | 先补锚点(属「补通道」申报);锚点缺失即为挂载点缺口,禁止用更宽选择器蒙混 |
|
|
56
56
|
| 同上 | `apply_via` 为 `class_name` / `attribute` / `slot_content` / `data_source` 之一,却只写了 CSS 而没改结构/绑定 | 按 `structure_ops` 施工(改模板 / 绑 `class-name` / 改 formatter / 挂 `data-*`),CSS 换不掉数据驱动点位 |
|
|
57
57
|
| 同上 | 全局覆写与组件 `scoped` 同权重生效失败(收口 `visible:false` / opacity / 几何覆盖不生效) | 按 `priority` 声明提权(`scope_qualified` / `self_plus_important` / `deep_qualified`),不得靠「后置加载」赌注入顺序 |
|
|
58
|
+
| 同上 | 容器语义类挂错节点:把「行/栏」语义类挂到**纵向复合容器**根节点(如把 `.vts-action-bar`(`flex-direction: row`)挂到 `ReTableBar` 根节点,而根节点是「工具栏行 + 表格 + 分页」) | 只能挂到该语义真正对应的那一层(工具栏行在 `ReTableBar` 组件内部);挂错会让兄弟节点并排、几何与 `tableHeight` 实测失准。修法是**移动挂载点**,不是给根节点补 `flex-direction: column` 打补丁 |
|
|
58
59
|
| 同上 | 词典 `selector` / `css_vars` 指向的选择器在真实 DOM 不存在(死通道 / 死令牌) | 跑 `node parser/index.js audit` 复核;死令牌双删、死通道补消费者挂载点 |
|
|
59
60
|
| 同上 | 变更集带登记表时 `C < A`(有规范子项未落进 `changes[]` / `visible` / `pending`)——组级台账过了但组内子项被静默丢失 | 跑 `node parser/index.js match --registry`;缺口逐条点名回流设计侧,**禁止采信自报的 `coverage` 数字**(parser 当场重算) |
|
|
60
61
|
|
|
@@ -153,7 +154,8 @@ lint / type-check **过了也不能放过**下列项。发现即改代码,禁
|
|
|
153
154
|
- [ ] **映射通道活性**:本轮用到的词典条目,其 `selector` / `css_vars` 在真实 DOM 可命中、CSS 变量有消费者(已跑 `audit` 或逐条核对,无死通道 / 死令牌)
|
|
154
155
|
- [ ] **锚点契约**:变更集 `anchor` 声明的锚点存在;`layer=inner` 的点位已解析到内层文本盒(`.cell` / 文本节点宿主),未错落在宿主盒上
|
|
155
156
|
- [ ] **结构施工**:`apply_via` 非 `style_override` 的点位已按 `structure_ops` 改结构/绑定(`class-name` / formatter / `data-*` / 渲染分支),未只用 CSS 冒充落地;申报了结构增量施工
|
|
156
|
-
- [ ]
|
|
157
|
+
- [ ] **出厂形态互斥收口(`suppress` 兑现)**:变更集每条带 `form` 的点位,其 `suppress` 清单逐通道收口完毕(优先令牌重映射),交付说明给出「通道 → 收口方式」对照;漏一条 = 出厂旧装饰残留(右竖条 / 旧激活底色块 / hover 才显关闭钮等都属此类)
|
|
158
|
+
- [ ] **覆写提权 / 同权重失效检查**:`priority` 声明的每条规则都**真数过权重**——写出特异度三元组 `(a,b,c)` **逐位比较(先 `b` 后 `c`)**:对手为组件 `<style scoped>` 时本条 `b` 必须严格更高(**平手即判失效**并提权);对手带 `!important` 时本条必须同样 `!important`;**`html` / `body` 只加 `c` 位,对手 `b` 更高时无效**(如出厂 `body[layout] .sidebar-container .el-menu-item` 为 `b=3`,本层 `html body .sidebar-container .el-menu-item` 只有 `b=2` → 一律失效,须靠**加祖先类**把 `b` 抬平)。**出厂用 `var(--vts-theme-*)` 间接设属性时,先走「令牌重映射」**(在令牌宿主作用域重声明令牌)而不是抢属性。收口(`display:none` 等)与几何覆盖必须实测生效,未被组件 `scoped` / 出厂全局规则反压
|
|
157
159
|
- [ ] **模板源码注释中性**:对模板文件的改动中,注释只描述「这段代码做什么」;语义 ID / 协议步骤号 / 缺口·自举·申报等面向 AI 的纪律条款不得写入模板源码注释(一律留在技能侧文档)
|
|
158
160
|
|
|
159
161
|
### 渲染态验收(变更集含 `oracle` / 效果图有 `data-sid` 时强制)
|
|
@@ -231,7 +231,15 @@ node parser/index.js registry <restore-registry.json> [--verbose] # 只
|
|
|
231
231
|
|
|
232
232
|
- 变更集给了 `layer` → 严格按 `layer` 从条目 `anchors` 取对应选择器(parser 已在转换计划里给出 `@ … · host/inner 层`)。
|
|
233
233
|
- 变更集**没给** `layer`、但条目 `preconditions` 指出必须落内层(如 EP 表头 `white-space`)→ 按 `preconditions` 落 inner 层,并在交付说明注明「设计侧未给 layer,按条目前置条件处理」。
|
|
234
|
+
- **内层盒属性族强制校验**:`white-space` / `text-overflow` / `overflow` / `word-break` / `text-align` / `line-height` / `vertical-align` 这组属性**只在内层文本盒生效**——逐字段核对 `layer`;未指认且条目前置条件也没说 → **退回设计侧补声明**,禁止默认落 host(历史缺口:表头「禁止换行」落 host 被内层默认 `normal` 吃掉 → 表头竖排、行高撑大、列内容被压)。
|
|
234
235
|
- 常规分工:高度 / 背景 / padding 落 host;文本换行、省略、对齐落 inner。
|
|
236
|
+
- **几何语境必须随值迁移(双重内边距,历史缺口:表头标题截断成 类…/包…/操…)**:出厂内层文本盒自带 padding 时(EP `.el-table .cell` 出厂 `padding: 0 12px`),把设计的 16px 落到 host 后**必须同步清零内层自带 padding**——否则实际内边距 = 16+12 = 28px/侧,列宽被挤、表头标题被省略号截断、视觉不适配常规。判据:**效果图的距离语义是「列缘到文字」的总距离;宿主/内层两层结构下必须拆成两段落地,两段之和等于设计值**。凡向 host 落 padding/border 类几何值,先查出厂内层盒的自带同族值再决定是否归零。
|
|
237
|
+
|
|
238
|
+
**B2. 出厂形态互斥收口 `suppress`(治「新形态上了、旧形态残留」)**——条目带 `suppress` 时,逐通道执行收口,**收口优先走令牌重映射**(在令牌宿主作用域重声明令牌,零权重战争),令牌不存在才写属性:
|
|
239
|
+
|
|
240
|
+
- 每条通道收口后必须在交付说明列出「通道名 → 收口方式 → 落点」,漏一条 = 出厂旧装饰残留。
|
|
241
|
+
- 实例:侧栏 `form=pill` → `suppress: ["右指示条通道"]` → 在侧栏作用域把出厂右竖条令牌重映射为 `none`(出厂 `.el-menu-item.is-active { border-right: var(--…) }` 与 `design-tokens` 的 `3px solid` 令牌都无需改动)。
|
|
242
|
+
- 页签 `form=flat` 属**多通道收口**:透明化激活底色块 + 去圆角间距 + 关闭钮常显 + 贯穿分割线 + 首页页签仅图标——必须逐通道列出并收口,漏任何一条 = 「整个样式和设计不一样」。
|
|
235
243
|
|
|
236
244
|
**C. 覆写优先级 `priority`(禁止逐点硬堆 `!important`)**——条目 `priority.strategy` 给出本点位该怎么赢:
|
|
237
245
|
|
|
@@ -278,8 +286,38 @@ node parser/index.js registry <restore-registry.json> [--verbose] # 只
|
|
|
278
286
|
|
|
279
287
|
每写一条新规则前,先按第 1 步输出的 `▸ 覆写优先级 priority` 判定对手类型与取胜方式(见下节)。
|
|
280
288
|
|
|
289
|
+
#### 特异度必须**逐位比较**(`html` / `body` 抬不动「类位」)
|
|
290
|
+
|
|
291
|
+
特异度写成三元组 `(a, b, c)`:`a` = id,`b` = **类 / 属性选择器 / 伪类**,`c` = 类型选择器 / 伪元素。比较顺序是**先比 `a` → 再比 `b` → 最后比 `c`**,`b` 位为 0 时 `c` 再大也没用。
|
|
292
|
+
|
|
293
|
+
- `html` / `body` 是**类型选择器**,只加 `c` 位。对手 `b` 位更高时,加 `html body` **完全无效**。
|
|
294
|
+
- 对手是组件 scoped(末元素 `[data-v-x]` 只加一个类,`b` 通常 ≤2)时,「抬一级作用域」有效;对手是 `body[layout='vertical'] .sidebar-container .el-menu-item`(属性 + 2 类 = `b=3`)时,`html body .sidebar-container .el-menu-item`(`b=2`)无论再加多少 `html`/`body` 都赢不了。
|
|
295
|
+
- 正确的抬法是**加类**:在祖先链上补稳定的语义类(如 `.el-menu`)把 `b` 抬到与对手相等,再靠 `c`(`html body`)胜出。
|
|
296
|
+
|
|
297
|
+
> **实例(已发生的回归)**:`sidebar.scss` 的 `body[layout='vertical'] .sidebar-container .el-menu-item { color: var(--vts-theme-menu-text) !important }`(`b=3`)压掉了设计层的 `html body .sidebar-container .el-menu-item { color: rgb(255 255 255 / 65%) !important }`(`b=2`)→ 菜单文字改用出厂令牌的**浅色主题值(黑)**落在设计强制的深色侧栏上 → **整栏菜单字全部消失**。规则没写错,是权重没算对。
|
|
298
|
+
|
|
299
|
+
#### 改通道(令牌)优先于抢属性
|
|
300
|
+
|
|
301
|
+
出厂用**语义令牌间接**设置属性时(`color: var(--vts-theme-menu-text)`、`background: var(--vts-theme-menu-bg)`…),**不要写同名属性去抢**,而是**在令牌宿主作用域重映射令牌**:
|
|
302
|
+
|
|
303
|
+
```scss
|
|
304
|
+
html body .sidebar-container { /* 令牌宿主 = 该令牌被消费的元素所在作用域 */
|
|
305
|
+
--vts-theme-menu-text: rgb(255 255 255 / 65%);
|
|
306
|
+
}
|
|
307
|
+
```
|
|
308
|
+
|
|
309
|
+
判据:**令牌在哪个元素上被声明,就在那个作用域重映射**。自定义属性按继承解析,出厂规则自己会消费新值 ⇒ **零权重战争**,也不受对手 `!important` 影响。适用范围:`--vts-theme-*` 全族。
|
|
310
|
+
|
|
311
|
+
只有在「出厂没有该令牌」或「令牌语义与设计不符(如胶囊几何 `inset`/`radius`)」时才回到抢属性,并按上一条逐位比较。
|
|
312
|
+
|
|
313
|
+
**统一顺序:① 先找令牌通道 → ② 无通道才抢属性(逐位比特异度)→ ③ 都不行才 `!important` + 注释对手。**
|
|
314
|
+
|
|
315
|
+
> 上例的正解就是①:在设计层把 `--vts-theme-menu-text/bg/hover/active-bg` 在 `.sidebar-container` 上重映射,出厂规则自己就画出白色的字与蓝色胶囊。
|
|
316
|
+
|
|
281
317
|
写入纪律:
|
|
282
318
|
|
|
319
|
+
- **本文件是产物,不是手改对象(流程红线)**:`design-shell.scss` 的每一行都必须由「变更集 + 词典」经本协议产出——发现缺规则时,正确动作是**补词典字段 / 前置条件 / 登记项**让下一次 design-apply 自动生成,**禁止绕过流程直接手写项目文件**。历史规则已落词典的(侧栏令牌 / suppress / 表头内层 nowrap / 双重内边距归零 / 分割线通道),重生成后会自动带出;仅「补通道」(变量消费者 / form 枚举 / 组件中性默认)允许动出厂源码并单列申报。
|
|
320
|
+
|
|
283
321
|
- 每条规则带来源标注(`/* <语义 ID> · <变更条目> */`),换设计时整段可替换;
|
|
284
322
|
- 本文件内新增的 CSS 变量必须**定义 + 引用成对出现**(出厂已有消费者也算),避免死通道;
|
|
285
323
|
- 出厂元素需关闭时(存在性收口)也在这里做:令牌置 `transparent` 或 `display:none`,**绝不删出厂代码行**;
|
|
@@ -292,7 +330,7 @@ node parser/index.js registry <restore-registry.json> [--verbose] # 只
|
|
|
292
330
|
|
|
293
331
|
| `priority.strategy` | 对手 | 必须的写法 | 自检判据 |
|
|
294
332
|
|---|---|---|---|
|
|
295
|
-
| `scope_qualified` |
|
|
333
|
+
| `scope_qualified` | 无,或出厂**全局样式**(`sidebar.scss` / `element-plus.scss` / `theme.scss`,注意它们也在 `index.scss` 的 `@use` 链里、可能带 `!important` 且 `b` 位更高) | 按词典 selector 原样落;**逐位比过对手**(先 b 后 c);出厂用 `var(--vts-theme-*)` 时优先重映射令牌 | 若实测仍被覆盖 → 升格按 `deep_qualified` 处理 |
|
|
296
334
|
| `deep_qualified` | 组件 `<style scoped>`(平手 + 后注入) | **禁止裸类名**。≥3 层作用域限定(如 `html .a .b`)或叠加属性/伪类;仍平手才对本条补 `!important` | 写前自问:这条与组件 scoped 谁特异度高?**平手即错** |
|
|
297
335
|
| `self_plus_important` | 出厂规则带 `!important` | 本条必须 `!important` + 注释写明「对手带 `!important`」;能改走通道变量时优先改通道 | 只抬特异度无效,别白费 |
|
|
298
336
|
|
|
@@ -309,6 +347,8 @@ html .navbar .navbar-breadcrumb-wrap {
|
|
|
309
347
|
|
|
310
348
|
### 第 4 步 · L3 新模块处理(分级布局)
|
|
311
349
|
|
|
350
|
+
- **列宽口径(业务层 / 设计层边界)**:表格**业务列宽度属业务层**,设计侧不声明、项目侧不按效果图硬套——效果图里的列宽只是其示例数据下的参考值。**唯一例外是操作列**:宽度由组件公式推算(`resolveOperateColumnWidth`,已含分割线占位),业务页禁止写死。**固定列自查(落完后必做,防「符合规范但不合常规」)**:操作列按钮不被裁、不换行、分割线居中可见;状态列标签完整;表头/单元格标题不被省略号截断——任何一项不满足即返工,禁止用「设计值就是对的」搪塞。
|
|
351
|
+
|
|
312
352
|
- **L3 是施工指令,不是待办**:词典未命中的点位一律当场落地、交付说明申报「补映射」,不留待确认。新模块按「定制布局」三步走:① 基于全局规范生成结构(继承命名/作用域/组件规范)② 原子层字段(色彩/圆角/组件级)从 `basic/` + `component/` 词典借力 ③ 场景专属点位生成后**立即写入 mapping/ 对应场景域**(临时映射),累计复用 ≥3 次建议升级标准(由人工评审)。
|
|
313
353
|
- 生成的新页面必须带构图钩子(`vts-page-card` / `vts-filter-area` / `vts-table-area` 等),保证后续变更集可命中。
|
|
314
354
|
|
|
@@ -341,8 +381,9 @@ html .navbar .navbar-breadcrumb-wrap {
|
|
|
341
381
|
- 表头 / 行 / 分页都在视口内,仅表格体内滚动,无外层滚动条、无拉伸 / 塌陷 / 双滚动条,`tableHeight > 0`;
|
|
342
382
|
- **结构层 diff 为空**:`lay-content/index.vue` 的 `.main-content[data-content-mode]` 与 `element-plus.scss` 的 `[data-fill]` 未被改动;同时确认没有「为保高度而放弃设计还原」(出厂卡片 / 内边距 / 内部排布原样未动而变更集声明了改动)——两个方向任一命中即返工
|
|
343
383
|
- [ ] **映射通道活性检查(杂必查)**:样式落地引用的每个 CSS 变量必须在项目样式中**存在消费者**(`变量名` 有 `var(--xxx)` 引用点);只定义不消费的变量 = 通道死路,翻译再准也不生效(menu_active_indicator 曾因 --vts-theme-menu-active-before 无消费者而「映射了却没效果」)。施工时 grep 核对,无消费者时改走消费者存在的作用域或补挂载点并申报。
|
|
344
|
-
- [ ]
|
|
345
|
-
- [ ]
|
|
384
|
+
- [ ] **结构施工兑现检查(structure_ops 逐条对账,与红线同级)**:变更集 `structure_ops[]` 的**每一条 op** 都必须在交付说明给出「op → 落在哪个文件 / 哪个节点 / 怎么落的」;`add_node` 必须真的新增了元素或渲染分支(模板 diff 可验),`bind_source` 必须真的改了绑定(`class-name` / `align` / `formatter`)。出现「声明了 op、代码里找不到对应改动」= 交付不完整,禁止只改 CSS 冒充结构施工(历史缺口:操作列分割线 `add_node` 声明了但从未施工 → 按钮间竖线一直缺失)
|
|
385
|
+
- [ ] **同权重失效检查( · 专查「写了不生效」)**:逐条核对设计层新增规则是否真能取胜——① 对手是组件 `<style scoped>` 时,本条特异度必须**严格高于**它(**平手即错**,因为组件样式在全局之后注入);② 对手带 `!important` 时本条必须同样 `!important`,或改走通道变量。**判定方法(必须真数,不许目测)**:对每条新规则与其对手分别写出特异度三元组 `(a,b,c)` 并**逐位比较(先 b 后 c)**,本条的 `b` 不大于对手即判为「失效」;`html` / `body` 只加 `c` 位,**对手 `b` 更高时加 `html body` 无效**,必须靠**加类**(祖先链补稳定语义类,如 `.el-menu`)把 `b` 抬到相等。同 `b` 时,`c` 更高者胜。③ **出厂用语义令牌间接设置该属性时(`var(--vts-theme-*)`),必须先走「令牌重映射」而不是抢属性**——在令牌宿主作用域重声明令牌即生效、零权重战争;只有无令牌或令牌语义不符时才抢属性。历史缺口全部命中本项:面包屑 `display:none`(与组件 scoped 同为 0,2,0)→ 照旧显示;页签关闭钮 `opacity`(同为 0,5,0)→ 仍要 hover 才显;页签项 `padding`(对手带 `!important`)→ 无论怎么抬特异度都改不动;**侧栏菜单 `color`(`b=2` 输给出厂 `b=3` + `!important`)→ 整栏菜单文字用浅色主题的黑色落在深色侧栏上、字全部消失**
|
|
386
|
+
- [ ] **oracle 基线可用性检查**:变更集带 `oracle` 时——① `oracle.mockup` 必须与**本次主题、本次页面**一致;**同构异色复用除外**:变更集声明 `oracle.theme_mapping: { "from": "<效果图主题>", "to": "<本次主题>" }`(同场景 / 同页面 / 同角色集合、仅主题色板不同)时,允许复用 from 主题效果图,verify 必须带 `--from-theme/--to-theme` 做色值归一,**不得因换主题色就判死闭环**;结构 / 形态有差异时禁止复用;② `oracle.sids` 与 `changes[]` **双向闭合**:效果图里有、changes[] 未声明 = **欠声明**(该点位永远不可能被还原);changes[] 已声明、效果图无 sid = **无基线**——**仅 `visible:false` 的隐藏点位豁免**(效果图上无可见元素可标 `data-sid`,parser 已自动豁免并打印清单)。其余两类出现即回流设计侧补齐,**不得直接开工**(`parser match` 已自动报出)
|
|
346
387
|
- [ ] **dark.scss 暗色同步**:新增视觉规则在 `html.dark` 有对应覆盖
|
|
347
388
|
- [ ] **缺口清单只含意图缺口**:清单每一项都必须是「设计侧未给值 / 值非法」且已注明「回流设计侧补齐」;能力缺口(词典缺 ID / 缺字段枚举 / 缺 form)不得出现在清单里——出现即把可落地项搁置
|
|
348
389
|
- [ ] **台账逐行兑现对账(对账闸门)**:把设计侧交付的提取台账逐行过一遍,每行必须有落地结论——已落地(写明落在哪个文件/选择器)或已入缺口清单(写明缺失字段)。存在「台账有行、落地无结论」的行 = 交付不完整,与红线同级
|
|
@@ -363,6 +404,8 @@ html .navbar .navbar-breadcrumb-wrap {
|
|
|
363
404
|
```bash
|
|
364
405
|
node parser/index.js verify --oracle oracle.json --actual actual.json
|
|
365
406
|
# 可选 --sids admin.content.table.header_cell,admin.layout.tabs.item 只验部分点位
|
|
407
|
+
# 同构异色复用(oracle.theme_mapping 已声明时必带)——效果图色值按语义槽位归一为本主题色值再比:
|
|
408
|
+
node parser/index.js verify --oracle oracle.json --actual actual.json --from-theme 钴蓝 --to-theme 橘橙
|
|
366
409
|
```
|
|
367
410
|
退出码:存在缺口 → `1`。
|
|
368
411
|
|
|
@@ -380,6 +423,10 @@ html .navbar .navbar-breadcrumb-wrap {
|
|
|
380
423
|
|
|
381
424
|
## 词典维护纪律
|
|
382
425
|
|
|
426
|
+
### 出厂状态漂移(词典假前提 = 事故源,落地前必查)
|
|
427
|
+
|
|
428
|
+
**项目可能随时被还原到出厂**(design-shell 回空壳、`.changeset/*` 消失、本体系此前补的通道全部消失)。因此词典里凡「出厂已具备 X」类表述必须满足:① X 是**真出厂能力**(对照出厂源码可验证);② 由本体系补建的通道一律写成**条件式**——「若缺失,按 structure_ops / 补通道流程补建并申报」,不写「已存在」。**落地前必须跑 `node parser/index.js audit --project <dir>`**:锚点/选择器/变量消费者存在性静态校验,会当场暴露词典假前提(曾发生:词典写「出厂已渲染分割线 / 工具栏行已挂语义类」,项目还原后全部失真 → 规则落空)。
|
|
429
|
+
|
|
383
430
|
- mapping/ 是唯一事实源:施工前 `parser query <id>` 精读条目,**不凭记忆施工**。
|
|
384
431
|
- **禁止编造的是「既有条目的映射」**(改既有 selector / css_vars / 变量指向 = 静默篡改,绝对禁止)。**词典缺 ID / 缺字段枚举不属编造**——那是新点位,按 L3 当场落地并写**新增的**临时映射条目,交付说明申报,等人工评审转正。
|
|
385
432
|
- 「宁可不做,不做错」只适用于**设计侧未给值 / 值非法**的意图缺口;用它搁置能力缺口 = 交付失败。
|
|
@@ -1,468 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"schema": "design.changeset/1.0",
|
|
3
|
-
"changeset_version": "1.0.0",
|
|
4
|
-
"mapping_version": "1.0.0",
|
|
5
|
-
"scene": "admin",
|
|
6
|
-
"layout_type": "vertical",
|
|
7
|
-
"global": {
|
|
8
|
-
"brand_primary": "钴蓝-5"
|
|
9
|
-
},
|
|
10
|
-
"changes": [
|
|
11
|
-
{
|
|
12
|
-
"id": "admin.layout.sidebar",
|
|
13
|
-
"style": {
|
|
14
|
-
"width": "208px",
|
|
15
|
-
"collapsed_width": "64px",
|
|
16
|
-
"bg": "#001529"
|
|
17
|
-
}
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
"id": "admin.layout.sidebar.logo_area",
|
|
21
|
-
"style": {
|
|
22
|
-
"height": "54px",
|
|
23
|
-
"title_font_size": "16px",
|
|
24
|
-
"title_font_weight": "中等",
|
|
25
|
-
"title_color": "#FFFFFF"
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
"id": "admin.layout.sidebar.menu",
|
|
30
|
-
"form": "pill",
|
|
31
|
-
"style": {
|
|
32
|
-
"padding_y": "8px",
|
|
33
|
-
"item_height": "40px",
|
|
34
|
-
"font_size": "14px",
|
|
35
|
-
"font_weight": "常规",
|
|
36
|
-
"text_color": "rgba(255,255,255,0.65)",
|
|
37
|
-
"menu_hover_bg": "rgba(255,255,255,0.08)",
|
|
38
|
-
"menu_active_bg": "钴蓝-5",
|
|
39
|
-
"menu_active_indicator": "钴蓝-5"
|
|
40
|
-
},
|
|
41
|
-
"priority": { "strategy": "deep_qualified" }
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
"id": "admin.layout.sidebar.collapse_trigger",
|
|
45
|
-
"visible": false
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
"id": "admin.layout.header",
|
|
49
|
-
"style": {
|
|
50
|
-
"height": "54px",
|
|
51
|
-
"padding_x": "24px",
|
|
52
|
-
"bg": "#FFFFFF",
|
|
53
|
-
"border_color": "#F0F0F0"
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
"id": "admin.layout.header.collapse_trigger",
|
|
58
|
-
"form": "header_inline",
|
|
59
|
-
"style": {
|
|
60
|
-
"btn_width": "40px",
|
|
61
|
-
"btn_height": "40px",
|
|
62
|
-
"icon_size": "16px",
|
|
63
|
-
"border_radius": "6px"
|
|
64
|
-
}
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
"id": "admin.layout.header.logo_area",
|
|
68
|
-
"visible": false
|
|
69
|
-
},
|
|
70
|
-
{
|
|
71
|
-
"id": "admin.layout.header.breadcrumb",
|
|
72
|
-
"visible": false,
|
|
73
|
-
"priority": { "strategy": "deep_qualified" }
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
"id": "admin.layout.header.lang_switch",
|
|
77
|
-
"form": "inline_switch",
|
|
78
|
-
"style": {
|
|
79
|
-
"gap": "2px",
|
|
80
|
-
"icon_size": "16px",
|
|
81
|
-
"text_color": "#000000A6"
|
|
82
|
-
}
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
"id": "admin.layout.header.fullscreen",
|
|
86
|
-
"style": {
|
|
87
|
-
"icon_size": "16px",
|
|
88
|
-
"width": "32px"
|
|
89
|
-
}
|
|
90
|
-
},
|
|
91
|
-
{
|
|
92
|
-
"id": "admin.layout.header.setting_button",
|
|
93
|
-
"style": {
|
|
94
|
-
"icon_size": "16px",
|
|
95
|
-
"hover_bg": "#FAFAFA",
|
|
96
|
-
"text_color": "#000000A6"
|
|
97
|
-
}
|
|
98
|
-
},
|
|
99
|
-
{
|
|
100
|
-
"id": "admin.layout.header.user_profile",
|
|
101
|
-
"form": "greeting_avatar_name",
|
|
102
|
-
"style": {
|
|
103
|
-
"avatar_width": "28px",
|
|
104
|
-
"avatar_height": "28px",
|
|
105
|
-
"avatar_radius": "9999px",
|
|
106
|
-
"name_font_size": "14px",
|
|
107
|
-
"name_font_weight": "中等",
|
|
108
|
-
"greeting_font_size": "14px",
|
|
109
|
-
"gap": "12px",
|
|
110
|
-
"text_color": "#000000E6",
|
|
111
|
-
"hover_bg": "#FAFAFA"
|
|
112
|
-
},
|
|
113
|
-
"structure_ops": [{ "op": "add_node", "node": "问候区" }]
|
|
114
|
-
},
|
|
115
|
-
{
|
|
116
|
-
"id": "admin.layout.tabs",
|
|
117
|
-
"form": "flat",
|
|
118
|
-
"style": {
|
|
119
|
-
"height": "40px",
|
|
120
|
-
"bg": "#FFFFFF",
|
|
121
|
-
"border_bottom": "1px solid #F0F0F0",
|
|
122
|
-
"padding_inline": "0px"
|
|
123
|
-
},
|
|
124
|
-
"priority": { "strategy": "deep_qualified" }
|
|
125
|
-
},
|
|
126
|
-
{
|
|
127
|
-
"id": "admin.layout.tabs.home_tab",
|
|
128
|
-
"form": "icon_only",
|
|
129
|
-
"style": {
|
|
130
|
-
"width": "40px",
|
|
131
|
-
"height": "40px",
|
|
132
|
-
"icon_size": "16px",
|
|
133
|
-
"icon_color": "钴蓝-5"
|
|
134
|
-
}
|
|
135
|
-
},
|
|
136
|
-
{
|
|
137
|
-
"id": "admin.layout.tabs.item",
|
|
138
|
-
"form": "text_only",
|
|
139
|
-
"style": {
|
|
140
|
-
"card_height": "40px",
|
|
141
|
-
"padding_x": "12px",
|
|
142
|
-
"title_gap": "6px",
|
|
143
|
-
"close_size": "12px",
|
|
144
|
-
"close_opacity": "0.45",
|
|
145
|
-
"close_hover_color": "#FF4D4F",
|
|
146
|
-
"divider_color": "#F0F0F0"
|
|
147
|
-
},
|
|
148
|
-
"priority": { "strategy": "deep_qualified" }
|
|
149
|
-
},
|
|
150
|
-
{
|
|
151
|
-
"id": "admin.layout.tabs.item_active",
|
|
152
|
-
"form": "text_color_only",
|
|
153
|
-
"style": {
|
|
154
|
-
"text_color": "钴蓝-5",
|
|
155
|
-
"font_weight": "中等"
|
|
156
|
-
}
|
|
157
|
-
},
|
|
158
|
-
{
|
|
159
|
-
"id": "admin.layout.tabs.divider",
|
|
160
|
-
"style": {
|
|
161
|
-
"width": "1px",
|
|
162
|
-
"height": "100%",
|
|
163
|
-
"bg": "#F0F0F0",
|
|
164
|
-
"opacity": "1"
|
|
165
|
-
}
|
|
166
|
-
},
|
|
167
|
-
{
|
|
168
|
-
"id": "admin.layout.tabs.context_menu",
|
|
169
|
-
"style": {
|
|
170
|
-
"width": "120px",
|
|
171
|
-
"border_color": "#F0F0F0",
|
|
172
|
-
"radius": "6px"
|
|
173
|
-
}
|
|
174
|
-
},
|
|
175
|
-
{
|
|
176
|
-
"id": "admin.content.container",
|
|
177
|
-
"form": "fixed"
|
|
178
|
-
},
|
|
179
|
-
{
|
|
180
|
-
"id": "admin.layout.content",
|
|
181
|
-
"style": {
|
|
182
|
-
"padding": "24px"
|
|
183
|
-
}
|
|
184
|
-
},
|
|
185
|
-
{
|
|
186
|
-
"id": "component.card.base",
|
|
187
|
-
"style": {
|
|
188
|
-
"bg_color": "#FFFFFF",
|
|
189
|
-
"radius": "8px",
|
|
190
|
-
"border_color": "transparent",
|
|
191
|
-
"box_shadow": "0 2px 8px rgba(0,0,0,0.06)",
|
|
192
|
-
"padding_x": "0px",
|
|
193
|
-
"padding_y": "0px"
|
|
194
|
-
}
|
|
195
|
-
},
|
|
196
|
-
{
|
|
197
|
-
"id": "admin.content.page_header",
|
|
198
|
-
"style": {
|
|
199
|
-
"margin_bottom": "1px solid #F0F0F0",
|
|
200
|
-
"title_size": "20px",
|
|
201
|
-
"title_weight": "加粗",
|
|
202
|
-
"desc_size": "14px",
|
|
203
|
-
"desc_color": "#000000A6",
|
|
204
|
-
"actions_gap": "8px",
|
|
205
|
-
"padding_x": "20px",
|
|
206
|
-
"padding_y": "20px"
|
|
207
|
-
}
|
|
208
|
-
},
|
|
209
|
-
{
|
|
210
|
-
"id": "admin.content.filter_area",
|
|
211
|
-
"style": {
|
|
212
|
-
"radius": "6px",
|
|
213
|
-
"padding_y": "20px",
|
|
214
|
-
"padding_x": "20px",
|
|
215
|
-
"margin_bottom": "1px solid #F0F0F0",
|
|
216
|
-
"bg": "#FFFFFF",
|
|
217
|
-
"border_color": "#F0F0F0",
|
|
218
|
-
"font_size": "14px",
|
|
219
|
-
"text_color": "#000000E6",
|
|
220
|
-
"text_align": "右对齐",
|
|
221
|
-
"icon_size": "16px",
|
|
222
|
-
"gap": "20px"
|
|
223
|
-
}
|
|
224
|
-
},
|
|
225
|
-
{
|
|
226
|
-
"id": "admin.content.table.operation_bar",
|
|
227
|
-
"style": {
|
|
228
|
-
"gap": "8px",
|
|
229
|
-
"padding_y": "20px 20px 8px",
|
|
230
|
-
"btn_height": "32px",
|
|
231
|
-
"btn_radius": "6px",
|
|
232
|
-
"btn_font_size": "14px",
|
|
233
|
-
"font_size": "14px",
|
|
234
|
-
"font_weight": "常规",
|
|
235
|
-
"text_color": "#000000E6"
|
|
236
|
-
}
|
|
237
|
-
},
|
|
238
|
-
{
|
|
239
|
-
"id": "admin.content.table.area",
|
|
240
|
-
"style": {
|
|
241
|
-
"radius": "8px",
|
|
242
|
-
"header_bg": "#FAFAFA",
|
|
243
|
-
"header_text": "#000000E6",
|
|
244
|
-
"row_hover_bg": "#FAFAFA",
|
|
245
|
-
"bg_color": "#FFFFFF"
|
|
246
|
-
}
|
|
247
|
-
},
|
|
248
|
-
{
|
|
249
|
-
"id": "admin.content.table.header_cell",
|
|
250
|
-
"layer": { "padding": "host", "text_align": "inner" },
|
|
251
|
-
"style": {
|
|
252
|
-
"height": "48px",
|
|
253
|
-
"padding": "16px",
|
|
254
|
-
"bg": "#FAFAFA",
|
|
255
|
-
"font_size": "14px",
|
|
256
|
-
"font_weight": "中等",
|
|
257
|
-
"text_color": "#000000E6",
|
|
258
|
-
"text_align": "左对齐",
|
|
259
|
-
"border_bottom": "1px solid #F0F0F0",
|
|
260
|
-
"nowrap": "禁止换行",
|
|
261
|
-
"gap": "8px",
|
|
262
|
-
"icon_size": "16px"
|
|
263
|
-
},
|
|
264
|
-
"priority": { "strategy": "self_plus_important" }
|
|
265
|
-
},
|
|
266
|
-
{
|
|
267
|
-
"id": "admin.content.table.cell",
|
|
268
|
-
"layer": "host",
|
|
269
|
-
"style": {
|
|
270
|
-
"padding": "16px",
|
|
271
|
-
"height": "55px",
|
|
272
|
-
"font_size": "14px",
|
|
273
|
-
"font_weight": "常规",
|
|
274
|
-
"text_color": "#000000E6",
|
|
275
|
-
"border_bottom": "1px solid #F0F0F0",
|
|
276
|
-
"vertical_align": "居中",
|
|
277
|
-
"nowrap": "禁止换行"
|
|
278
|
-
}
|
|
279
|
-
},
|
|
280
|
-
{
|
|
281
|
-
"id": "admin.content.table.cell_status",
|
|
282
|
-
"form": "filled",
|
|
283
|
-
"style": {
|
|
284
|
-
"bg": "#F6FFED",
|
|
285
|
-
"border_color": "#D9F7BE",
|
|
286
|
-
"text_color": "#52C41A",
|
|
287
|
-
"font_size": "12px",
|
|
288
|
-
"radius": "6px",
|
|
289
|
-
"icon_size": "16px"
|
|
290
|
-
},
|
|
291
|
-
"structure_ops": [{ "op": "render_branch", "node": "状态列" }]
|
|
292
|
-
},
|
|
293
|
-
{
|
|
294
|
-
"id": "admin.content.table.cell_amount",
|
|
295
|
-
"layer": "inner",
|
|
296
|
-
"style": {
|
|
297
|
-
"align": "右对齐"
|
|
298
|
-
},
|
|
299
|
-
"structure_ops": [{ "op": "bind_source", "node": "金额列", "source": "列类名" }]
|
|
300
|
-
},
|
|
301
|
-
{
|
|
302
|
-
"id": "admin.content.table.operation_column",
|
|
303
|
-
"style": {
|
|
304
|
-
"link_color": "钴蓝-5",
|
|
305
|
-
"danger_color": "#FF4D4F",
|
|
306
|
-
"divider_color": "#F0F0F0",
|
|
307
|
-
"align": "居中",
|
|
308
|
-
"min_width": "160px",
|
|
309
|
-
"column_width": "160px",
|
|
310
|
-
"nowrap": "禁止换行",
|
|
311
|
-
"bg": "#FFFFFF",
|
|
312
|
-
"box_shadow": "-2px 0 4px rgba(0,0,0,0.06)",
|
|
313
|
-
"font_size": "14px",
|
|
314
|
-
"gap": "8px",
|
|
315
|
-
"radius": "6px",
|
|
316
|
-
"vertical_align": "居中"
|
|
317
|
-
},
|
|
318
|
-
"structure_ops": [
|
|
319
|
-
{ "op": "render_branch", "node": "操作列图标" },
|
|
320
|
-
{ "op": "add_node", "node": "操作列分隔线" }
|
|
321
|
-
]
|
|
322
|
-
},
|
|
323
|
-
{
|
|
324
|
-
"id": "admin.content.pagination",
|
|
325
|
-
"style": {
|
|
326
|
-
"font_size": "14px",
|
|
327
|
-
"text_color": "#000000A6",
|
|
328
|
-
"gap": "8px",
|
|
329
|
-
"margin_bottom": "20px",
|
|
330
|
-
"padding_y": "8px 20px",
|
|
331
|
-
"active_bg": "钴蓝-5",
|
|
332
|
-
"active_color": "#FFFFFF",
|
|
333
|
-
"border_color": "#D9D9D9",
|
|
334
|
-
"hover_color": "钴蓝-5"
|
|
335
|
-
}
|
|
336
|
-
},
|
|
337
|
-
{
|
|
338
|
-
"id": "admin.content.empty_state",
|
|
339
|
-
"style": {
|
|
340
|
-
"font_size": "14px",
|
|
341
|
-
"text_color": "#000000A6",
|
|
342
|
-
"icon_size": "40px",
|
|
343
|
-
"padding": "40px"
|
|
344
|
-
}
|
|
345
|
-
},
|
|
346
|
-
{
|
|
347
|
-
"id": "component.button.primary",
|
|
348
|
-
"style": {
|
|
349
|
-
"bg_color": "钴蓝-5",
|
|
350
|
-
"text_color": "#FFFFFF",
|
|
351
|
-
"border_color": "钴蓝-5",
|
|
352
|
-
"font_weight": "常规",
|
|
353
|
-
"padding_x": "15px",
|
|
354
|
-
"height": "32px",
|
|
355
|
-
"radius": "6px"
|
|
356
|
-
}
|
|
357
|
-
},
|
|
358
|
-
{
|
|
359
|
-
"id": "component.button.default",
|
|
360
|
-
"style": {
|
|
361
|
-
"bg_color": "#FFFFFF",
|
|
362
|
-
"text_color": "#000000E6",
|
|
363
|
-
"border_color": "#D9D9D9",
|
|
364
|
-
"font_weight": "常规",
|
|
365
|
-
"padding_x": "15px",
|
|
366
|
-
"height": "32px",
|
|
367
|
-
"radius": "6px"
|
|
368
|
-
}
|
|
369
|
-
},
|
|
370
|
-
{
|
|
371
|
-
"id": "component.button.danger",
|
|
372
|
-
"style": {
|
|
373
|
-
"bg_color": "#FF4D4F",
|
|
374
|
-
"text_color": "#FFFFFF",
|
|
375
|
-
"border_color": "#FF4D4F",
|
|
376
|
-
"font_weight": "常规",
|
|
377
|
-
"padding_x": "12px",
|
|
378
|
-
"height": "32px",
|
|
379
|
-
"radius": "6px"
|
|
380
|
-
}
|
|
381
|
-
},
|
|
382
|
-
{
|
|
383
|
-
"id": "component.tag.status",
|
|
384
|
-
"form": "filled",
|
|
385
|
-
"style": {
|
|
386
|
-
"bg_color": "#F6FFED",
|
|
387
|
-
"text_color": "#52C41A",
|
|
388
|
-
"border_color": "#D9F7BE",
|
|
389
|
-
"font_size": "12px",
|
|
390
|
-
"radius": "6px",
|
|
391
|
-
"icon_size": "16px"
|
|
392
|
-
}
|
|
393
|
-
},
|
|
394
|
-
{
|
|
395
|
-
"id": "component.input.base",
|
|
396
|
-
"style": {
|
|
397
|
-
"bg_color": "#FFFFFF",
|
|
398
|
-
"text_color": "#000000E6",
|
|
399
|
-
"border_color": "#D9D9D9",
|
|
400
|
-
"radius": "6px",
|
|
401
|
-
"height": "32px",
|
|
402
|
-
"font_size": "14px",
|
|
403
|
-
"icon_size": "16px",
|
|
404
|
-
"padding_x": "12px"
|
|
405
|
-
}
|
|
406
|
-
},
|
|
407
|
-
{
|
|
408
|
-
"id": "component.pagination.base",
|
|
409
|
-
"style": {
|
|
410
|
-
"height": "32px",
|
|
411
|
-
"gap": "8px",
|
|
412
|
-
"radius": "6px",
|
|
413
|
-
"active_bg": "钴蓝-5",
|
|
414
|
-
"active_color": "#FFFFFF",
|
|
415
|
-
"border_color": "#D9D9D9",
|
|
416
|
-
"text_color": "#000000E6",
|
|
417
|
-
"hover_color": "钴蓝-5",
|
|
418
|
-
"icon_size": "16px"
|
|
419
|
-
}
|
|
420
|
-
}
|
|
421
|
-
],
|
|
422
|
-
"oracle": {
|
|
423
|
-
"mockup": "project-ui-design/references/page-specs/styles/default/scenes/admin/mockups/list-page/运单管理-钴蓝.html",
|
|
424
|
-
"sids": [
|
|
425
|
-
"admin.layout.sidebar",
|
|
426
|
-
"admin.layout.sidebar.logo_area",
|
|
427
|
-
"admin.layout.sidebar.menu",
|
|
428
|
-
"admin.layout.header",
|
|
429
|
-
"admin.layout.header.collapse_trigger",
|
|
430
|
-
"admin.layout.header.lang_switch",
|
|
431
|
-
"admin.layout.header.fullscreen",
|
|
432
|
-
"admin.layout.header.setting_button",
|
|
433
|
-
"admin.layout.header.user_profile",
|
|
434
|
-
"admin.layout.tabs",
|
|
435
|
-
"admin.layout.tabs.home_tab",
|
|
436
|
-
"admin.layout.tabs.item",
|
|
437
|
-
"admin.layout.tabs.item_active",
|
|
438
|
-
"admin.layout.tabs.divider",
|
|
439
|
-
"admin.layout.content",
|
|
440
|
-
"admin.content.container",
|
|
441
|
-
"component.card.base",
|
|
442
|
-
"admin.content.page_header",
|
|
443
|
-
"admin.content.filter_area",
|
|
444
|
-
"admin.content.table.operation_bar",
|
|
445
|
-
"admin.content.table.area",
|
|
446
|
-
"admin.content.table.header_cell",
|
|
447
|
-
"admin.content.table.cell",
|
|
448
|
-
"admin.content.table.cell_status",
|
|
449
|
-
"admin.content.table.cell_amount",
|
|
450
|
-
"admin.content.table.operation_column",
|
|
451
|
-
"admin.content.pagination",
|
|
452
|
-
"component.button.primary",
|
|
453
|
-
"component.button.default",
|
|
454
|
-
"component.button.danger",
|
|
455
|
-
"component.tag.status",
|
|
456
|
-
"component.input.base",
|
|
457
|
-
"component.pagination.base"
|
|
458
|
-
]
|
|
459
|
-
},
|
|
460
|
-
"coverage": {
|
|
461
|
-
"registry": "project-ui-design/references/page-specs/styles/default/scenes/admin/restore-registry.json",
|
|
462
|
-
"registrable": 186,
|
|
463
|
-
"applicable": 186,
|
|
464
|
-
"covered": 186,
|
|
465
|
-
"gaps": []
|
|
466
|
-
},
|
|
467
|
-
"notes": "钴蓝主题 admin 列表页完整还原变更集(首版,待 verify 验收)。值优先取效果图精确字面量;官方主色走语义值 钴蓝-5。侧栏为深色 #001529(钴蓝主题壳层约定)。cell_thumb 列本页未出现故未声明;sidebar.collapse_trigger / header.logo_area 按出厂中性收口(visible:false)。"
|
|
468
|
-
}
|