@qilitt-mickey/vue3-temp-skill 1.1.62 → 1.1.63
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 +135 -135
- package/mapping/component/overlay.json +1 -1
- package/mapping/scenes/admin/content.json +10 -10
- package/mapping/scenes/admin/layout.json +6 -6
- package/package.json +1 -1
- package/parser/index.js +2 -3
- package/references/design-apply.md +2 -2
- package/references/steps/step0-preflight.md +1 -1
- package/references/steps/step1-match.md +1 -1
- package/references/steps/step1b-audit.md +3 -3
- package/references/steps/step2-structure.md +4 -4
- package/references/steps/step3c-priority.md +1 -1
- package/references/steps/step5-gates.md +4 -4
- package/references/steps/step6-verify.md +4 -4
package/SKILL.md
CHANGED
|
@@ -1,136 +1,136 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: "vue3-temp-skill"
|
|
3
|
-
description: "Vue 3 企业级项目开发技能。面向 vue3-web-temp 及其派生项目,帮助产品经理和前端快速把点子做成可演示、可验证、可继续演进的 Demo;同时约束真实模板复用和代码质量。"
|
|
4
|
-
scope: project
|
|
5
|
-
agent_created: true
|
|
6
|
-
tags: [vue3, typescript, element-plus, pinia, vite, unocss, crud, demo, code-quality]
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
# Vue 3 项目开发技能
|
|
10
|
-
|
|
11
|
-
> **体系版本:1.0.0**(双 Skill 唯一版本声明点之一;设计侧 project-ui-design 同版)。版本恒定策略:双侧始终同版,不随内容修改递增,仅协议破坏性变更时双侧同步升版。mapping/*.json 的 `meta.version` 与变更集校验均恒为 `1.0.0`,不单独演进。
|
|
12
|
-
|
|
13
|
-
## 目标
|
|
14
|
-
|
|
15
|
-
把产品点子快速落到真实 Vue 3 项目中,先形成客户可看的完整 Demo,再保留后续正式开发所需的代码边界。页面可以使用 mock 和最小数据,但不得使用模板演示噪音、虚构项目能力或堆叠无法维护的代码。
|
|
16
|
-
|
|
17
|
-
## 触发方式
|
|
18
|
-
|
|
19
|
-
```text
|
|
20
|
-
/vue3-temp-skill <自然语言需求>
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
典型需求:
|
|
24
|
-
|
|
25
|
-
- 开发客户管理列表,支持搜索、分页、编辑和详情
|
|
26
|
-
- 做一个订单仪表盘,含统计卡片和趋势图
|
|
27
|
-
- 给现有 Demo 增加附件上传、导出或审批流
|
|
28
|
-
- 把一个页面从 mock 改成真实 API
|
|
29
|
-
- 「按这份设计方案改造全系统」/ 落地设计技能产出的设计文件(用户可能是小白,只会给文件路径或拖入文件;见 §3b)
|
|
30
|
-
|
|
31
|
-
## 运行时只保留三件事
|
|
32
|
-
|
|
33
|
-
1. **项目探查**:读取目标项目的 `package.json`、路由、页面、`Re*` 组件、Hooks、API 和样式;以源码事实为准。
|
|
34
|
-
2. **能力路由**:运行 `scripts/match.py "需求" --json`,**仅**按输出中的 `load_files` 阅读 reference;禁止自行展开全部 `references/`。无 Python 时按下方能力组表手动匹配。
|
|
35
|
-
3. **质量闸门**:代码完成后读取 `references/code-quality.md`,执行清单和项目命令。
|
|
36
|
-
|
|
37
|
-
## 能力组路由
|
|
38
|
-
|
|
39
|
-
| 能力组 | 覆盖内容 | 主要参考文件 |
|
|
40
|
-
|---|---|---|
|
|
41
|
-
| `page-crud` | 常规列表、筛选、分页、表格操作 | `crud-pages.md` |
|
|
42
|
-
| `page-detail` | 独立详情/编辑页、顶部标签、路由 meta | `detail-page.md` |
|
|
43
|
-
| `data-service` | HTTP、API、类型、mock、联调 | `http-api.md`、`api-check.md` |
|
|
44
|
-
| `forms` | 表单、弹窗、远程选择、回显、字典、反馈 | `form-advanced.md`、`data-writeback.md`、`base-code-dict.md`、`feedback-loading.md` |
|
|
45
|
-
| `access` | 权限、认证页面 | `permission-auth.md`、`auth-pages.md` |
|
|
46
|
-
| `theme-layout` | 布局、主题色、暗黑模式、侧栏配色、令牌 | `layout-theme.md` |
|
|
47
|
-
| `shared-ui` | Re*、图标、通用展示和指令 | `ui-components.md`、`icons.md`、`feedback-ui.md`、`directives-advanced.md` |
|
|
48
|
-
| `table-advanced` | 树表、VXE 表格 | `tree-table.md`、`table-vxe.md` |
|
|
49
|
-
| `visualization` | 图表、大屏、关系图谱 | `chart-echarts.md`、`data-screen.md`、`graph-relation.md` |
|
|
50
|
-
| `workflow` | BPMN、G6 流程图、字段映射 | `workflow-bpmn.md`、`flowchart-g6.md`、`data-mapping.md` |
|
|
51
|
-
| `files-and-editors` | 附件、预览、下载、富文本、二维码 | `file-management.md`、`download-export.md`、`rich-text.md`、`qrcode-barcode.md` |
|
|
52
|
-
| `realtime-and-mobile` | WebSocket、移动端、微信、验证码、动效 | 对应专项 reference |
|
|
53
|
-
| `data-compare` | 编辑页变更对比和汇总 | `data-compare.md` |
|
|
54
|
-
| `design-apply` | 设计变更集落地:语义 ID 三级匹配、结构/形态/两层样式转换、锚点与结构施工、覆写提权、渲染态验收、合规闸门。**主入口 `design-apply.md
|
|
55
|
-
|
|
56
|
-
## 工作流
|
|
57
|
-
|
|
58
|
-
### 1. 识别目标和范围
|
|
59
|
-
|
|
60
|
-
- 确认目标项目根目录;没有明确目标时先询问,不在技能仓库里写业务代码。
|
|
61
|
-
- 判断是 Demo 验证、功能增量还是正式业务开发。
|
|
62
|
-
- 保留目标项目当前初始化视觉,不让开发技能自行设计。
|
|
63
|
-
|
|
64
|
-
### 2. 读取事实
|
|
65
|
-
|
|
66
|
-
- 先读 `references/core-kernel.md`。
|
|
67
|
-
- 运行 `scripts/match.py "需求" --json`,按 `load_files` 阅读。
|
|
68
|
-
- 读取目标项目当前 `package.json` 和锁文件;不要根据“core/addon”标签猜依赖是否存在。
|
|
69
|
-
- 扫描已有 `Re*`、Hooks、`src/api`、路由和相关页面;已有封装优先于技能示例。
|
|
70
|
-
|
|
71
|
-
### 3. 实现闭环
|
|
72
|
-
|
|
73
|
-
- 页面、路由、API、类型、mock 和共享组件按一个业务闭环实现。
|
|
74
|
-
- 列表使用 `useTableSearch`、`ReTableBar`、`RePagination`;有独立详情时同步完成 `useDetail` 与路由 meta。
|
|
75
|
-
- HTTP 只经过 `@/utils/http`,响应按项目实际 `Result<T>` 约定处理。
|
|
76
|
-
- Demo 可以最小化数据和接口,但目录、类型、命名和组件边界要能承接后续开发。
|
|
77
|
-
- 新依赖先检查目标项目;缺失时说明精确版本、原因和构建接线,确认后再安装。
|
|
78
|
-
- 只有目标项目确实存在排除项、占位插件或缺失接线时,才读取 `addon-enable.md` 恢复配置。
|
|
79
|
-
- **输入为设计文件时**:用户给出设计技能(project-ui-design)产出的 JSON 文件(无论叫"设计方案/设计文件/变更集")→ 不走常规闭环,改走 `design-apply.md` 协议——先跑 `node parser/index.js audit` 复核锚点(挂载点/死通道),再按「结构先行(`structure_ops`)、样式两层转换、必要时覆写提权(`priority`)」落地,最后过变更集合规闸门。变更集新增三类声明维度:`apply_via`(落点通道)/ `layer`(`host` 宿主盒 / `inner` 内层文本盒)/ `structure_ops`(数据·结构驱动点位的结构操作);词典条目对应新增 `anchors` / `preconditions` / `priority`。
|
|
80
|
-
|
|
81
|
-
### 3b. 小白用户执行纪律(design-apply 场景)
|
|
82
|
-
|
|
83
|
-
使用者默认**不懂设计也不懂代码**,交互遵守四条:
|
|
84
|
-
|
|
85
|
-
1. **全自动默认**:识别为设计文件落地后**直接开始执行 parser match → 结构 → 样式 → 闸门全流程**,不等用户逐步确认,不询问"是否继续";唯一停顿点是文件缺失/版本不匹配/parser 报错——此时用大白话报告并给选择题。
|
|
86
|
-
**禁止以「待确认」搁置可落地项**:词典缺 ID / 缺字段枚举 / 缺 form 属**能力缺口**,当场补临时映射并落地(出厂文件仅在补通道时可动,交付说明单列申报);只有「设计侧没给值」才是**意图缺口**,去向是回流设计侧补齐,不是问用户要不要做。
|
|
87
|
-
2. **术语不对用户出现**:对用户不说"变更集/语义 ID/三级匹配/pending/令牌"——说"设计方案/设计点位/自动适配/新增点位/全局样式"。这些词只出现在内部文档与交付说明里。
|
|
88
|
-
3. **无文件时的引导**:用户说"全系统改成 XX 风格"但没给设计文件 → 提示一句话:"请先在设计助手(project-ui-design 技能)里说『我要 XX 风格的全系统设计』拿到设计文件,再回来发给我"。如果本机同时装有设计技能,可直接引导用户回到设计会话完成设计,再回本项目落地。
|
|
89
|
-
4. **交付话术**:完成后用大白话总结(改了哪些页面/哪些地方变了/怎么验收),不输出施工坐标等技术细节;验收引导统一为"运行 `pnpm dev` 打开页面对照看效果,哪里不满意直接说"。
|
|
90
|
-
|
|
91
|
-
### 4. 验证与交付
|
|
92
|
-
|
|
93
|
-
- 对照 `references/code-quality.md` 检查类型、组件复用、API、路由、权限、安全、异常反馈、响应式和可演进性。
|
|
94
|
-
- 在目标项目执行 `pnpm lint:fix`、`pnpm type-check`;改动构建配置时再执行 `pnpm build`。
|
|
95
|
-
- **设计文件落地时追加渲染态验收**:变更集含 `oracle`(或效果图带 `data-sid`)时,跑 `node parser/index.js verify`——抽取项目同名 `data-sid` 元素的 computed style,与效果图期望值逐点 diff;缺口按四类归因(选择器落空 / 权重被压 / 语境错位 / **存在性缺口 G12**:`oracle.absent` 点位仍可见)修正,禁止用 `!important` 掩盖。多轮迭代场景每轮动工前先 `--snapshot` 导快照、交付前 `--baseline` 比对——上轮命中本轮退步 = 基线漂移,先回归上轮修法。申报过的固有残差(`oracle.residual_accepted`)不计缺口。
|
|
96
|
-
- **设计文件落地时核对登记表覆盖率**:变更集带登记表(`coverage.registry` 或 `--registry`)时,跑 `node parser/index.js match <cs.json> --registry <restore-registry.json>`——`C = A` 且无缺口才可交付;parser **当场以登记表为权威重算**,设计侧自报的 `coverage` 数字不参与。单独核验登记表对词典的通道就绪度用 `node parser/index.js registry <restore-registry.json>`(硬缺口 exit 1、通道缺口列出待补字段)。
|
|
97
|
-
- 最终说明:命中能力组、修改文件、功能验证、命令结果、未解决问题和下一步。
|
|
98
|
-
|
|
99
|
-
## 出厂中性 · 变更集驱动(design-apply 架构红线)
|
|
100
|
-
|
|
101
|
-
目标项目源码 = **中性初始化**,只提供能力通道(CSS 变量的消费者挂载点、form 枚举、DOM/属性钩子、正确的层叠优先级),**不预置任何具体设计的结论**(某个颜色、某句问候语、某个方位的指示条、某个硬编码尺寸)。
|
|
102
|
-
|
|
103
|
-
- 一切设计决策由设计变更集驱动,经 `design-apply` 动态落到「设计层文件 `src/styles/design-shell.scss` / 页面级 scoped 样式 / DOM 属性与配置」,不落到出厂样式文件与出厂组件里。
|
|
1
|
+
---
|
|
2
|
+
name: "vue3-temp-skill"
|
|
3
|
+
description: "Vue 3 企业级项目开发技能。面向 vue3-web-temp 及其派生项目,帮助产品经理和前端快速把点子做成可演示、可验证、可继续演进的 Demo;同时约束真实模板复用和代码质量。"
|
|
4
|
+
scope: project
|
|
5
|
+
agent_created: true
|
|
6
|
+
tags: [vue3, typescript, element-plus, pinia, vite, unocss, crud, demo, code-quality]
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# Vue 3 项目开发技能
|
|
10
|
+
|
|
11
|
+
> **体系版本:1.0.0**(双 Skill 唯一版本声明点之一;设计侧 project-ui-design 同版)。版本恒定策略:双侧始终同版,不随内容修改递增,仅协议破坏性变更时双侧同步升版。mapping/*.json 的 `meta.version` 与变更集校验均恒为 `1.0.0`,不单独演进。
|
|
12
|
+
|
|
13
|
+
## 目标
|
|
14
|
+
|
|
15
|
+
把产品点子快速落到真实 Vue 3 项目中,先形成客户可看的完整 Demo,再保留后续正式开发所需的代码边界。页面可以使用 mock 和最小数据,但不得使用模板演示噪音、虚构项目能力或堆叠无法维护的代码。
|
|
16
|
+
|
|
17
|
+
## 触发方式
|
|
18
|
+
|
|
19
|
+
```text
|
|
20
|
+
/vue3-temp-skill <自然语言需求>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
典型需求:
|
|
24
|
+
|
|
25
|
+
- 开发客户管理列表,支持搜索、分页、编辑和详情
|
|
26
|
+
- 做一个订单仪表盘,含统计卡片和趋势图
|
|
27
|
+
- 给现有 Demo 增加附件上传、导出或审批流
|
|
28
|
+
- 把一个页面从 mock 改成真实 API
|
|
29
|
+
- 「按这份设计方案改造全系统」/ 落地设计技能产出的设计文件(用户可能是小白,只会给文件路径或拖入文件;见 §3b)
|
|
30
|
+
|
|
31
|
+
## 运行时只保留三件事
|
|
32
|
+
|
|
33
|
+
1. **项目探查**:读取目标项目的 `package.json`、路由、页面、`Re*` 组件、Hooks、API 和样式;以源码事实为准。
|
|
34
|
+
2. **能力路由**:运行 `scripts/match.py "需求" --json`,**仅**按输出中的 `load_files` 阅读 reference;禁止自行展开全部 `references/`。无 Python 时按下方能力组表手动匹配。
|
|
35
|
+
3. **质量闸门**:代码完成后读取 `references/code-quality.md`,执行清单和项目命令。
|
|
36
|
+
|
|
37
|
+
## 能力组路由
|
|
38
|
+
|
|
39
|
+
| 能力组 | 覆盖内容 | 主要参考文件 |
|
|
40
|
+
|---|---|---|
|
|
41
|
+
| `page-crud` | 常规列表、筛选、分页、表格操作 | `crud-pages.md` |
|
|
42
|
+
| `page-detail` | 独立详情/编辑页、顶部标签、路由 meta | `detail-page.md` |
|
|
43
|
+
| `data-service` | HTTP、API、类型、mock、联调 | `http-api.md`、`api-check.md` |
|
|
44
|
+
| `forms` | 表单、弹窗、远程选择、回显、字典、反馈 | `form-advanced.md`、`data-writeback.md`、`base-code-dict.md`、`feedback-loading.md` |
|
|
45
|
+
| `access` | 权限、认证页面 | `permission-auth.md`、`auth-pages.md` |
|
|
46
|
+
| `theme-layout` | 布局、主题色、暗黑模式、侧栏配色、令牌 | `layout-theme.md` |
|
|
47
|
+
| `shared-ui` | Re*、图标、通用展示和指令 | `ui-components.md`、`icons.md`、`feedback-ui.md`、`directives-advanced.md` |
|
|
48
|
+
| `table-advanced` | 树表、VXE 表格 | `tree-table.md`、`table-vxe.md` |
|
|
49
|
+
| `visualization` | 图表、大屏、关系图谱 | `chart-echarts.md`、`data-screen.md`、`graph-relation.md` |
|
|
50
|
+
| `workflow` | BPMN、G6 流程图、字段映射 | `workflow-bpmn.md`、`flowchart-g6.md`、`data-mapping.md` |
|
|
51
|
+
| `files-and-editors` | 附件、预览、下载、富文本、二维码 | `file-management.md`、`download-export.md`、`rich-text.md`、`qrcode-barcode.md` |
|
|
52
|
+
| `realtime-and-mobile` | WebSocket、移动端、微信、验证码、动效 | 对应专项 reference |
|
|
53
|
+
| `data-compare` | 编辑页变更对比和汇总 | `data-compare.md` |
|
|
54
|
+
| `design-apply` | 设计变更集落地:语义 ID 三级匹配、结构/形态/两层样式转换、锚点与结构施工、覆写提权、渲染态验收、合规闸门。**主入口 `design-apply.md`(红线+契约+步骤索引),各步骤明细见 `references/steps/`——做到哪一步读哪一份** | `design-apply.md`、`steps/`、`mapping/`、`parser/` |
|
|
55
|
+
|
|
56
|
+
## 工作流
|
|
57
|
+
|
|
58
|
+
### 1. 识别目标和范围
|
|
59
|
+
|
|
60
|
+
- 确认目标项目根目录;没有明确目标时先询问,不在技能仓库里写业务代码。
|
|
61
|
+
- 判断是 Demo 验证、功能增量还是正式业务开发。
|
|
62
|
+
- 保留目标项目当前初始化视觉,不让开发技能自行设计。
|
|
63
|
+
|
|
64
|
+
### 2. 读取事实
|
|
65
|
+
|
|
66
|
+
- 先读 `references/core-kernel.md`。
|
|
67
|
+
- 运行 `scripts/match.py "需求" --json`,按 `load_files` 阅读。
|
|
68
|
+
- 读取目标项目当前 `package.json` 和锁文件;不要根据“core/addon”标签猜依赖是否存在。
|
|
69
|
+
- 扫描已有 `Re*`、Hooks、`src/api`、路由和相关页面;已有封装优先于技能示例。
|
|
70
|
+
|
|
71
|
+
### 3. 实现闭环
|
|
72
|
+
|
|
73
|
+
- 页面、路由、API、类型、mock 和共享组件按一个业务闭环实现。
|
|
74
|
+
- 列表使用 `useTableSearch`、`ReTableBar`、`RePagination`;有独立详情时同步完成 `useDetail` 与路由 meta。
|
|
75
|
+
- HTTP 只经过 `@/utils/http`,响应按项目实际 `Result<T>` 约定处理。
|
|
76
|
+
- Demo 可以最小化数据和接口,但目录、类型、命名和组件边界要能承接后续开发。
|
|
77
|
+
- 新依赖先检查目标项目;缺失时说明精确版本、原因和构建接线,确认后再安装。
|
|
78
|
+
- 只有目标项目确实存在排除项、占位插件或缺失接线时,才读取 `addon-enable.md` 恢复配置。
|
|
79
|
+
- **输入为设计文件时**:用户给出设计技能(project-ui-design)产出的 JSON 文件(无论叫"设计方案/设计文件/变更集")→ 不走常规闭环,改走 `design-apply.md` 协议——先跑 `node parser/index.js audit` 复核锚点(挂载点/死通道),再按「结构先行(`structure_ops`)、样式两层转换、必要时覆写提权(`priority`)」落地,最后过变更集合规闸门。变更集新增三类声明维度:`apply_via`(落点通道)/ `layer`(`host` 宿主盒 / `inner` 内层文本盒)/ `structure_ops`(数据·结构驱动点位的结构操作);词典条目对应新增 `anchors` / `preconditions` / `priority`。
|
|
80
|
+
|
|
81
|
+
### 3b. 小白用户执行纪律(design-apply 场景)
|
|
82
|
+
|
|
83
|
+
使用者默认**不懂设计也不懂代码**,交互遵守四条:
|
|
84
|
+
|
|
85
|
+
1. **全自动默认**:识别为设计文件落地后**直接开始执行 parser match → 结构 → 样式 → 闸门全流程**,不等用户逐步确认,不询问"是否继续";唯一停顿点是文件缺失/版本不匹配/parser 报错——此时用大白话报告并给选择题。
|
|
86
|
+
**禁止以「待确认」搁置可落地项**:词典缺 ID / 缺字段枚举 / 缺 form 属**能力缺口**,当场补临时映射并落地(出厂文件仅在补通道时可动,交付说明单列申报);只有「设计侧没给值」才是**意图缺口**,去向是回流设计侧补齐,不是问用户要不要做。
|
|
87
|
+
2. **术语不对用户出现**:对用户不说"变更集/语义 ID/三级匹配/pending/令牌"——说"设计方案/设计点位/自动适配/新增点位/全局样式"。这些词只出现在内部文档与交付说明里。
|
|
88
|
+
3. **无文件时的引导**:用户说"全系统改成 XX 风格"但没给设计文件 → 提示一句话:"请先在设计助手(project-ui-design 技能)里说『我要 XX 风格的全系统设计』拿到设计文件,再回来发给我"。如果本机同时装有设计技能,可直接引导用户回到设计会话完成设计,再回本项目落地。
|
|
89
|
+
4. **交付话术**:完成后用大白话总结(改了哪些页面/哪些地方变了/怎么验收),不输出施工坐标等技术细节;验收引导统一为"运行 `pnpm dev` 打开页面对照看效果,哪里不满意直接说"。
|
|
90
|
+
|
|
91
|
+
### 4. 验证与交付
|
|
92
|
+
|
|
93
|
+
- 对照 `references/code-quality.md` 检查类型、组件复用、API、路由、权限、安全、异常反馈、响应式和可演进性。
|
|
94
|
+
- 在目标项目执行 `pnpm lint:fix`、`pnpm type-check`;改动构建配置时再执行 `pnpm build`。
|
|
95
|
+
- **设计文件落地时追加渲染态验收**:变更集含 `oracle`(或效果图带 `data-sid`)时,跑 `node parser/index.js verify`——抽取项目同名 `data-sid` 元素的 computed style,与效果图期望值逐点 diff;缺口按四类归因(选择器落空 / 权重被压 / 语境错位 / **存在性缺口 G12**:`oracle.absent` 点位仍可见)修正,禁止用 `!important` 掩盖。多轮迭代场景每轮动工前先 `--snapshot` 导快照、交付前 `--baseline` 比对——上轮命中本轮退步 = 基线漂移,先回归上轮修法。申报过的固有残差(`oracle.residual_accepted`)不计缺口。
|
|
96
|
+
- **设计文件落地时核对登记表覆盖率**:变更集带登记表(`coverage.registry` 或 `--registry`)时,跑 `node parser/index.js match <cs.json> --registry <restore-registry.json>`——`C = A` 且无缺口才可交付;parser **当场以登记表为权威重算**,设计侧自报的 `coverage` 数字不参与。单独核验登记表对词典的通道就绪度用 `node parser/index.js registry <restore-registry.json>`(硬缺口 exit 1、通道缺口列出待补字段)。
|
|
97
|
+
- 最终说明:命中能力组、修改文件、功能验证、命令结果、未解决问题和下一步。
|
|
98
|
+
|
|
99
|
+
## 出厂中性 · 变更集驱动(design-apply 架构红线)
|
|
100
|
+
|
|
101
|
+
目标项目源码 = **中性初始化**,只提供能力通道(CSS 变量的消费者挂载点、form 枚举、DOM/属性钩子、正确的层叠优先级),**不预置任何具体设计的结论**(某个颜色、某句问候语、某个方位的指示条、某个硬编码尺寸)。
|
|
102
|
+
|
|
103
|
+
- 一切设计决策由设计变更集驱动,经 `design-apply` 动态落到「设计层文件 `src/styles/design-shell.scss` / 页面级 scoped 样式 / DOM 属性与配置」,不落到出厂样式文件与出厂组件里。
|
|
104
104
|
- **效果图页面 = 设计角色坐标系,不是页面增量(G13 页面绑定闸)**:效果图页面(如「运单管理」)是设计侧为承载设计语言虚构的演示标题,**默认映射到项目已有页面**——落地动作恒为「在已有页面上同步结构与样式」,**禁止因效果图新增页面 / 路由 / 菜单项**;唯一例外是变更集 `page_bindings` 显式声明 `target:"new"` 且在 `notes` 申报。判据:换一张效果图不需要改项目的页面/路由/菜单清单 ⇒ 架构正确;需要新增页面才能换 ⇒ 设计演示页被误当业务增量,必须回退。
|
|
105
|
-
- **演示占位内容 = 效果的角色承载,不是还原目标(演示内容等价)**:项目演示页上为展示"此处可放控件"而写的占位说明文字 / 演示按钮,既不是效果图的角色、也不是设计意图。落地时必须把落在效果图对应角色上的演示占位**替换为设计对应内容**,或对效果图没有该位置的点位**收口隐藏**——**还原后的页面不得残留模板演示说明性文字与占位按钮**。判据:残留演示文案说明「效果 vs 内容」混淆——把模板演示内容当成设计还原,必须回退(详见 design-apply 第 2 步「出厂演示占位内容等价」)。
|
|
106
|
-
- 判据:换一张效果图只需换变更集、不必改源码 ⇒ 架构正确;需要改源码才能换 ⇒ 设计结论被烧进源码,必须回退为通道。
|
|
107
|
-
- 出厂文件仅在「通道缺失」时可动(补变量消费者 / 补 form 枚举 / 修层叠优先级),且必须在交付说明中单列「补通道」条目写明缺失点。
|
|
108
|
-
|
|
109
|
-
## 项目事实优先级
|
|
110
|
-
|
|
111
|
-
`目标项目当前源码` > `目标项目 package.json / 锁文件` > `本 Skill reference` > `通用 Vue 习惯`。
|
|
112
|
-
|
|
113
|
-
## 默认禁止
|
|
114
|
-
|
|
115
|
-
- 不在页面内直接使用 `axios` / `fetch`,不虚构 API 前缀。
|
|
116
|
-
- 不二次挂载 `Layout`,不把模板演示页原样当业务页面。
|
|
117
|
-
- 不使用裸 `v-if` 代替权限指令,不使用不可信 `v-html`。
|
|
118
|
-
- 不为了视觉效果引入未经确认的新 UI 框架或图表库。
|
|
119
|
-
- 不把 lint 通过当成业务闭环完成。
|
|
120
|
-
|
|
121
|
-
## 最终回复格式
|
|
122
|
-
|
|
123
|
-
```markdown
|
|
124
|
-
## 命中能力组
|
|
125
|
-
- page-crud / data-service / ...
|
|
126
|
-
|
|
127
|
-
## 变更说明
|
|
128
|
-
- `src/...`:...
|
|
129
|
-
|
|
130
|
-
## 验证结果
|
|
131
|
-
- 功能:...
|
|
132
|
-
- `pnpm lint:fix`:通过 | 失败(原因)
|
|
133
|
-
- `pnpm type-check`:通过 | 失败(原因)
|
|
134
|
-
- 设计验收:无 oracle 时 N/A | 逐点 diff 结果(命中 N / 缺口 M,归因与修正)
|
|
135
|
-
- 缺口回流:无 | 仅限「设计侧未给值」的维度(列出维度名,注明已回流设计侧补齐)
|
|
136
|
-
```
|
|
105
|
+
- **演示占位内容 = 效果的角色承载,不是还原目标(演示内容等价)**:项目演示页上为展示"此处可放控件"而写的占位说明文字 / 演示按钮,既不是效果图的角色、也不是设计意图。落地时必须把落在效果图对应角色上的演示占位**替换为设计对应内容**,或对效果图没有该位置的点位**收口隐藏**——**还原后的页面不得残留模板演示说明性文字与占位按钮**。判据:残留演示文案说明「效果 vs 内容」混淆——把模板演示内容当成设计还原,必须回退(详见 design-apply 第 2 步「出厂演示占位内容等价」)。
|
|
106
|
+
- 判据:换一张效果图只需换变更集、不必改源码 ⇒ 架构正确;需要改源码才能换 ⇒ 设计结论被烧进源码,必须回退为通道。
|
|
107
|
+
- 出厂文件仅在「通道缺失」时可动(补变量消费者 / 补 form 枚举 / 修层叠优先级),且必须在交付说明中单列「补通道」条目写明缺失点。
|
|
108
|
+
|
|
109
|
+
## 项目事实优先级
|
|
110
|
+
|
|
111
|
+
`目标项目当前源码` > `目标项目 package.json / 锁文件` > `本 Skill reference` > `通用 Vue 习惯`。
|
|
112
|
+
|
|
113
|
+
## 默认禁止
|
|
114
|
+
|
|
115
|
+
- 不在页面内直接使用 `axios` / `fetch`,不虚构 API 前缀。
|
|
116
|
+
- 不二次挂载 `Layout`,不把模板演示页原样当业务页面。
|
|
117
|
+
- 不使用裸 `v-if` 代替权限指令,不使用不可信 `v-html`。
|
|
118
|
+
- 不为了视觉效果引入未经确认的新 UI 框架或图表库。
|
|
119
|
+
- 不把 lint 通过当成业务闭环完成。
|
|
120
|
+
|
|
121
|
+
## 最终回复格式
|
|
122
|
+
|
|
123
|
+
```markdown
|
|
124
|
+
## 命中能力组
|
|
125
|
+
- page-crud / data-service / ...
|
|
126
|
+
|
|
127
|
+
## 变更说明
|
|
128
|
+
- `src/...`:...
|
|
129
|
+
|
|
130
|
+
## 验证结果
|
|
131
|
+
- 功能:...
|
|
132
|
+
- `pnpm lint:fix`:通过 | 失败(原因)
|
|
133
|
+
- `pnpm type-check`:通过 | 失败(原因)
|
|
134
|
+
- 设计验收:无 oracle 时 N/A | 逐点 diff 结果(命中 N / 缺口 M,归因与修正)
|
|
135
|
+
- 缺口回流:无 | 仅限「设计侧未给值」的维度(列出维度名,注明已回流设计侧补齐)
|
|
136
|
+
```
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"font_size": "font-size",
|
|
74
74
|
"max_width": "max-width"
|
|
75
75
|
},
|
|
76
|
-
"$note": "全局提示气泡。项目内提示有**两条来路**——Element Plus 原生 ElTooltip(继承 --el-tooltip-* 令牌,如 ReAvatars 的 el-tooltip)与 v-tippy 指令(ReTableBar / ReCollapsible / ReAnchor / lay-tag 等处使用,走 tippy 主题,**不自动继承 --el-* 令牌**)。本条目面向 ElTooltip;若设计要求覆盖 v-tippy 气泡,须先确认 tippy
|
|
76
|
+
"$note": "全局提示气泡。项目内提示有**两条来路**——Element Plus 原生 ElTooltip(继承 --el-tooltip-* 令牌,如 ReAvatars 的 el-tooltip)与 v-tippy 指令(ReTableBar / ReCollapsible / ReAnchor / lay-tag 等处使用,走 tippy 主题,**不自动继承 --el-* 令牌**)。本条目面向 ElTooltip;若设计要求覆盖 v-tippy 气泡,须先确认 tippy 主题变量与本节令牌的对应关系,未映射时按「补通道」补主题变量并在交付说明单列申报(**不得假设自动生效**)。"
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
}
|
|
@@ -28,7 +28,7 @@
|
|
|
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) 自动定高;未标记且无钩子类 → 滚动页(向后兼容)。自动分支带 :not([data-content-mode]) 守卫,与显式声明互斥"
|
|
30
30
|
},
|
|
31
|
-
"$note": "⚠列表区保命通道(**结构层**,设计还原禁止改写):**滚动归属** = 页面根节点 data-content-mode(fixed/scroll 优先;未声明走 :has() 自动探测兜底,自动分支带 :not([data-content-mode]) 守卫与显式声明互斥——显式 scroll 的页面内含 .vts-page-card 时定高分支不得反压,否则整页滚动断裂)。**填满剩余高度** = 中性属性 data-fill(element-plus.scss 已实现:display:flex; flex:1 1 auto; min-height:0; overflow:hidden;data-fill=\"row\" 横向分栏),从页面根到表格/画布容器之间**每个需填满的层级节点**都要挂。⚠**结构/视觉解耦(本通道存在的意义)**:定高链只认属性不认类名 ⇒ 视觉容器可被设计层整体替换(el-card.vts-page-card → 通栏 div / 自绘容器),换容器时把 data-fill 平移到新容器及其「体」层即可,高度链不断、useTableSearch 几何实测照常、表格自滚动正常。双向禁止:① 改写壳层结构层规则(lay-content 的 .main-content[data-content-mode]、element-plus.scss 的 [data-fill])来换还原效果;② 以「保高度」为由拒绝设计改容器/内边距/去卡片。⚠壳层 lay-content 禁止硬编码 data-content-mode
|
|
31
|
+
"$note": "⚠列表区保命通道(**结构层**,设计还原禁止改写):**滚动归属** = 页面根节点 data-content-mode(fixed/scroll 优先;未声明走 :has() 自动探测兜底,自动分支带 :not([data-content-mode]) 守卫与显式声明互斥——显式 scroll 的页面内含 .vts-page-card 时定高分支不得反压,否则整页滚动断裂)。**填满剩余高度** = 中性属性 data-fill(element-plus.scss 已实现:display:flex; flex:1 1 auto; min-height:0; overflow:hidden;data-fill=\"row\" 横向分栏),从页面根到表格/画布容器之间**每个需填满的层级节点**都要挂。⚠**结构/视觉解耦(本通道存在的意义)**:定高链只认属性不认类名 ⇒ 视觉容器可被设计层整体替换(el-card.vts-page-card → 通栏 div / 自绘容器),换容器时把 data-fill 平移到新容器及其「体」层即可,高度链不断、useTableSearch 几何实测照常、表格自滚动正常。双向禁止:① 改写壳层结构层规则(lay-content 的 .main-content[data-content-mode]、element-plus.scss 的 [data-fill])来换还原效果;② 以「保高度」为由拒绝设计改容器/内边距/去卡片。⚠壳层 lay-content 禁止硬编码 data-content-mode(若壳层代打 scroll 会压掉自动探测,导致 vts-page-card 列表页定高链断裂、useTableSearch 高度失准、列表区整体崩坏)。出厂 DOM 不带模式属性(中性),换设计只换页面根节点的声明值与 data-fill 挂载点。"
|
|
32
32
|
},
|
|
33
33
|
"admin.content.page_header": {
|
|
34
34
|
"type": "element",
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"admin.content.table.operation_bar": {
|
|
75
75
|
"type": "element",
|
|
76
76
|
"selector": ".vts-page-card .flex-between > .flex-end(ReTableBar 内部工具栏行右侧容器,bar.vue JSX 实证 div.flex-end)",
|
|
77
|
-
"file": "
|
|
77
|
+
"file": "条件通道实证:.vts-action-bar 类**全项目无模板挂载**(仅 element-plus.scss 有样式定义、无消费者)——若 selector 锚定 .vts-action-bar,属锚定「应该在」而非「实际在」的 DOM,会导致设计层规则全部落空。本 selector 锚定真实出厂 DOM;.vts-action-bar 作为可选增强通道保留在 element-plus.scss,页面按需自行挂载后设计层规则自动命中。右侧工具三件套源码实证:刷新 svg-icon + el-dropdown 密度(宽松/默认/紧凑)+ el-popover 列设置",
|
|
78
78
|
"style_scope": ".vts-page-card",
|
|
79
79
|
"forms": {
|
|
80
80
|
"with_tools": "工具三件套(刷新/密度/列设置)齐全——设计规范 list-page §4 要求三件套缺一不可(ReTableBar 出厂已具备,此为默认形态)",
|
|
@@ -121,7 +121,7 @@
|
|
|
121
121
|
"tool_btn": ".vts-page-card .flex-end .vts-tool-btn"
|
|
122
122
|
},
|
|
123
123
|
"preconditions": [
|
|
124
|
-
"
|
|
124
|
+
"挂载点实证:出厂右侧容器是 .flex-between > .flex-end(真实存在),而 .vts-action-bar 全项目无模板挂载(仅样式定义、零消费者)——设计层规则写到 .vts-action-bar 上会全部落空。词典 selector 必须锚定源码实证存在的 DOM;「应该在」的点位未经 structure_ops 补挂 = 不存在。",
|
|
125
125
|
"本条目样式落点是 ReTableBar 内部工具栏行内容器——禁止把容器级样式(flex-direction 等)写到 ReTableBar 根节点:根节点是「工具栏行 + 表格 + 分页」的纵向复合容器,写根节点会让工具栏与表格并排、表格被挤压、tableHeight 实测失准(已发生的事故,勿复发)。",
|
|
126
126
|
"gap / padding 的 CSS 变量必须在项目样式中存在消费者(var() 引用),只定义不消费 = 死通道。--action-bar-padding-y 供 padding-block,最多两个值(如 20px 8px),给三个值整条声明即失效。"
|
|
127
127
|
],
|
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
"slot_width": ["text_link", "icon_text"]
|
|
151
151
|
},
|
|
152
152
|
"data_channels": {
|
|
153
|
-
"slot_width": "
|
|
153
|
+
"slot_width": "等宽槽宽度通道(动态优先):**槽宽默认由组件按按钮文案动态自适应**(ReTableOperate 的 --re-op-slot-w 在 slotMinWidth 省略时走 resolveOperateSlotWidthPx 自动推算),变更集**不声明 slot_width、业务页不传 slot-min-width** ——设计只声明 divider 几何(width/height/margin_x),槽宽随内容走、divider_margin_x 对称由槽内居中兑现(若声明 60px 钉死槽宽则违反动态优先;若槽内用 flex-start,短文案按钮的残白会全堆到分割线前侧 → 线前 40px/线后 8px 视觉不等距)。仅当设计效果图确实要求**统一槽宽**(如所有操作列等宽对齐网格)时例外:变更集显式声明 slot_width → 施工落业务页 prop(结构通道),禁 CSS 仿冒;无此明确设计意图 = 保持动态。等宽槽本体是对齐机制(槽边界保证行间第 N 项对齐),机制本身禁 CSS 收口 width:auto"
|
|
154
154
|
},
|
|
155
155
|
"$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——列宽属业务层,设计侧不声明列宽(操作列除外)。",
|
|
156
156
|
"custom_style_map": {
|
|
@@ -182,10 +182,10 @@
|
|
|
182
182
|
"preconditions": [
|
|
183
183
|
"按钮之间的间距由分割线元素的左右 margin 承载,不是按钮自身 gap:必须先存在分割线元素(ReTableOperate 默认不渲染 divider,需按 structure_ops 补槽位),divider_width / divider_height / divider_margin_x 才有落点——这是「操作列按钮间距没还原」的根因。",
|
|
184
184
|
"「纯文字无图标」是数据侧结论:图标来自业务页列定义的 operateButtons[].icon,只写 form=text_link 而不移除数据里的 icon = 未落地(改 CSS 不算)。",
|
|
185
|
-
"「更多」折叠槽前必须有分割线:组件出厂模板只在平铺按钮之间渲染 divider(v-if=\"i > 0\"),平铺末位与「更多」槽之间无分割线元素——效果图口径是每个按钮之间都要有且等距,施工时须按 structure_ops 给「更多」槽前补 divider(或把「更多」并入 v-for 让 i 计数覆盖),缺线 =
|
|
186
|
-
"等宽槽(--re-op-slot-w)是行间纵向对齐的唯一机制:设计层禁止覆写 .re-table-operate__slot 宽度为 auto,CSS 收口 auto =
|
|
187
|
-
"
|
|
188
|
-
"
|
|
185
|
+
"「更多」折叠槽前必须有分割线:组件出厂模板只在平铺按钮之间渲染 divider(v-if=\"i > 0\"),平铺末位与「更多」槽之间无分割线元素——效果图口径是每个按钮之间都要有且等距,施工时须按 structure_ops 给「更多」槽前补 divider(或把「更多」并入 v-for 让 i 计数覆盖),缺线 = 最后一段间距失真。",
|
|
186
|
+
"等宽槽(--re-op-slot-w)是行间纵向对齐的唯一机制:设计层禁止覆写 .re-table-operate__slot 宽度为 auto,CSS 收口 auto = 各行按钮漂移、竖线间距不一致。",
|
|
187
|
+
"⚠槽宽三态判定(与 data_channels.slot_width 配套):①**默认=动态自适应**——组件按最长文案自动推算槽宽,变更集不声明 slot_width、业务页不传 slot-min-width(设计只管 divider 几何;钉死固定值 = 短文案按钮残白堆到分割线前侧、线距视觉不等);②**例外=统一槽宽**——设计效果图明确所有操作列等宽网格时才声明 slot_width,施工落业务页 prop 禁 CSS 仿冒;③**机制不可 CSS 化**——无论哪态,禁在设计层覆写 __slot 宽度。判据一句话:**槽宽是内容推算的机制值,不是设计声明值;设计声明divider,不声明槽宽**。",
|
|
188
|
+
"⚠对齐语义两级契约:**容器级 flex-start + 槽内 center**。①容器级(.re-table-operate)必须 justify-content: flex-start——按钮数不同的行(2 项 vs 3 项)整组从左起点排布,行组不漂移;容器级 center 会导致槽边界漂移、竖线竖向错位,禁用。②槽内级(.re-table-operate__slot 与槽内 .el-button)必须 justify-content: center——等宽槽宽按最长文案推算(如「更多」3 字=60px),2 字按钮(28px)靠左会把 32px 残白全堆到分割线前侧 → 线前 40px/线后 8px 视觉不等距(竖线贴右按钮);居中后 divider_margin_x 两侧对称才成立。行间第 N 项对齐由**等宽槽边界**保证(槽宽全行统一),不受槽内对齐影响——槽内对齐不可沿用容器级的 flex-start。"
|
|
189
189
|
],
|
|
190
190
|
"priority": {
|
|
191
191
|
"strategy": "scope_qualified",
|
|
@@ -393,7 +393,7 @@
|
|
|
393
393
|
"strategy": "scope_qualified",
|
|
394
394
|
"reason": "选择列无行内样式竞争,作用域限定到 .vts-page-card 即可覆盖。"
|
|
395
395
|
},
|
|
396
|
-
"$note": "设计意图(list-page §11.44
|
|
396
|
+
"$note": "设计意图(list-page §11.44 选择列):窄列、居中、勾选态用主题主色。勾选色走 EP 原生 --el-checkbox-* 令牌,随主题切换。"
|
|
397
397
|
},
|
|
398
398
|
"admin.content.table.row_density": {
|
|
399
399
|
"type": "element",
|
|
@@ -421,7 +421,7 @@
|
|
|
421
421
|
"strategy": "scope_qualified",
|
|
422
422
|
"reason": "单元格 padding 属全局样式,作用域限定到 .vts-page-card 即可覆盖。"
|
|
423
423
|
},
|
|
424
|
-
"$note": "设计意图(list-page §11.40
|
|
424
|
+
"$note": "设计意图(list-page §11.40 行密度):表格行高三档取一(宽松/默认/紧凑)。语义档位 loose/default/compact ↔ 出厂 size large/default/small,项目侧负责映射。"
|
|
425
425
|
},
|
|
426
426
|
"admin.content.table.area": {
|
|
427
427
|
"type": "component",
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
"strategy": "deep_qualified",
|
|
113
113
|
"reason": "出厂 sidebar.scss 的胶囊规则用 !important,设计层需以同等或更高权重覆盖。"
|
|
114
114
|
},
|
|
115
|
-
"$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_* / pill_indicator_left 时必须在本条目 style_scope 内成对落地两件事才算施工完成——① 竖条消费者(form 不含 pill 时另需覆写 --vts-theme-menu-active-bg: transparent 关胶囊);② 在设计层文件(不可写出厂 sidebar.scss)新建 ::after/::before 消费者引用 var(--vts-theme-menu-active-before)。缺任一项 = 「映射了却没效果」。所有几何参数(方位/粗细/长度/圆角/内缩)取自变更集 style 字段,禁止写死 left:0 / 3px 等常量。⚠field_forms 硬闸(parser G7 机检):style 声明的字段必须被当前 form 消费——如 active_indicator_* 只在 indicator_* / pill_indicator_left 形态下有消费者,声明 pill 却带竖条字段 =
|
|
115
|
+
"$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_* / pill_indicator_left 时必须在本条目 style_scope 内成对落地两件事才算施工完成——① 竖条消费者(form 不含 pill 时另需覆写 --vts-theme-menu-active-bg: transparent 关胶囊);② 在设计层文件(不可写出厂 sidebar.scss)新建 ::after/::before 消费者引用 var(--vts-theme-menu-active-before)。缺任一项 = 「映射了却没效果」。所有几何参数(方位/粗细/长度/圆角/内缩)取自变更集 style 字段,禁止写死 left:0 / 3px 等常量。⚠field_forms 硬闸(parser G7 机检):style 声明的字段必须被当前 form 消费——如 active_indicator_* 只在 indicator_* / pill_indicator_left 形态下有消费者,声明 pill 却带竖条字段 = 字段被静默丢弃(如声明 pill 却带 active_indicator_* 竖条字段,竖条令牌会被设计层置透明 → 效果图要求的左竖条消失)。"
|
|
116
116
|
},
|
|
117
117
|
"admin.layout.sidebar.menu_item_icon": {
|
|
118
118
|
"type": "element",
|
|
@@ -178,7 +178,7 @@
|
|
|
178
178
|
"align_items": "align-items"
|
|
179
179
|
},
|
|
180
180
|
"preconditions": [
|
|
181
|
-
"顶栏内容垂直居中:--header-height 变更(如 54px)后,宿主 .navbar 必须显式 align-items: center——出厂顶栏内元素高度不一(折叠钮 40px / 文字行 /
|
|
181
|
+
"顶栏内容垂直居中:--header-height 变更(如 54px)后,宿主 .navbar 必须显式 align-items: center——出厂顶栏内元素高度不一(折叠钮 40px / 文字行 / 头像),不显式声明会整体偏上。"
|
|
182
182
|
]
|
|
183
183
|
},
|
|
184
184
|
"admin.layout.header.logo_area": {
|
|
@@ -211,7 +211,7 @@
|
|
|
211
211
|
],
|
|
212
212
|
"priority": {
|
|
213
213
|
"strategy": "deep_qualified",
|
|
214
|
-
"reason": "出厂组件自身 scoped
|
|
214
|
+
"reason": "出厂组件自身 scoped 规则与设计层同权重,仅靠后置加载顺序不可靠;显隐收口与样式覆盖都必须显式提权(面包屑 display:none 被同权重 scoped 规则反压即属此类)。"
|
|
215
215
|
},
|
|
216
216
|
"$note": "分隔符为结构属性(breadcrumb separator 字符),不在样式映射范围"
|
|
217
217
|
},
|
|
@@ -399,8 +399,8 @@
|
|
|
399
399
|
"preconditions": [
|
|
400
400
|
"容器内边距出厂由组件样式给出(非 0),设计要求「内边距归零、首页页签与折叠按钮左对齐」时必须显式声明 padding_inline,不声明即保留出厂值(这是「首页页签不贴左缘」的根因)。",
|
|
401
401
|
"⚠ShowModel 运行时缓存坑:showModel 经 responsive-storage 持久化于 localStorage(命名空间 responsive-),platform-config.json 改 ShowModel 后**旧缓存仍生效**——项目侧施工 ShowModel 时必须同步清 localStorage(或 Version++ 触发响应式存储失效),否则模板代码已换、运行时仍渲染旧形态,页签「样式完全不对」多半是缓存残留而非映射失败。施工后验证口径:浏览器 DevTools Application→Local Storage 清 responsive-* 键后刷新再比对。",
|
|
402
|
-
"⚠ShowModel
|
|
403
|
-
"⚠ShowModel 三件套硬闸(
|
|
402
|
+
"⚠ShowModel 三分支运行时兜底:useTags.ts 实证 showModel 读取链 = localStorage → fallback **'smart'**(platform-config 的 ShowModel 只在 storage 初始化时生效);而模板 DOM 只实现 chrome / card 两分支(v-if / v-else-if),smart 落入 v-else 裸分支——**无 .card-item / .card-tab 类**,锚定 card 结构的设计层规则全部不命中,仅锚定 .scroll-item 的规则(分割线等)命中 → 同一页签栏「半新半旧」混合观感(如底色块残留 + 分割线在)。因此 form=flat 施工必须**三分支全覆盖**:① 锚定 .card-item / .card-tab 的规则之外,同步给出锚定 .scroll-item 直系(不限形态类)的兜底规则(盒几何/底色透明/激活态),或在词典 preconditions 声明「ShowModel 须确保运行时为 card」(清缓存 + platform-config 双写)——二选一必须做,只写 card 锚点 = smart 残余分支裸奔。",
|
|
403
|
+
"⚠ShowModel 三件套硬闸(G4 T 通道施工必须项):仅改 platform-config.ShowModel **不生效**——showModel 读 localStorage,而 localStorage 只在 platform-config.Version 变化时经 responsive.ts invalidateStorageIfConfigVersionChanged 重灌(只改 ShowModel=card 而 Version 未变,浏览器会残留 chrome 形态缓存 → card/smart 兜底规则双双不命中、页签零变化)。form 涉及页签形态时施工三件套缺一不可:① platform-config.ShowModel = form 对应值(flat→card);② platform-config.Version 自增一位(0.0.5→0.0.6,触发缓存失效重灌);③ 渲染取证断言 .scroll-item.card-item 实际挂载(DevTools 或 DOM 断言),不许只看代码改没改。漏②=代码对但运行时仍旧形态;漏③=无渲染证据自嗨绿。"
|
|
404
404
|
],
|
|
405
405
|
"priority": {
|
|
406
406
|
"strategy": "deep_qualified",
|
|
@@ -464,7 +464,7 @@
|
|
|
464
464
|
],
|
|
465
465
|
"priority": {
|
|
466
466
|
"strategy": "deep_qualified",
|
|
467
|
-
"reason": "关闭钮透明度等出厂规则写在组件 scoped
|
|
467
|
+
"reason": "关闭钮透明度等出厂规则写在组件 scoped 内且权重与设计层相当,仅靠后置加载顺序不可靠(声明 0.45 常显会被 scoped 的 opacity:0 反压、只在 hover 才显),必须显式提权。"
|
|
468
468
|
},
|
|
469
469
|
"$note": "card 形态专属令牌挂在父级 admin.layout.tabs 的 css_vars(整组切换);本条目为页签项级字段补充。chrome 形态梯形样式为模板结构样式,不走样式映射"
|
|
470
470
|
},
|
package/package.json
CHANGED
package/parser/index.js
CHANGED
|
@@ -48,11 +48,10 @@ const ID_RE_STRICT = /^[a-z][a-z0-9_]*(\.[a-z][a-z0-9_]*){1,3}$/;
|
|
|
48
48
|
/**
|
|
49
49
|
* 内层盒属性族(changeset-schema §layer):这些文本控制/行高/对齐类属性必须落在 inner 层
|
|
50
50
|
* 才生效。根因:Element Plus 给内层文本盒 .cell 写了 white-space:normal / text-align 等出厂
|
|
51
|
-
* 样式,写在宿主盒(th/td)上会被内层覆盖 ——
|
|
51
|
+
* 样式,写在宿主盒(th/td)上会被内层覆盖 —— 这是「表头/内容竖排换行」的根因。
|
|
52
52
|
* 本集合作两处消费:
|
|
53
53
|
* ① resolveAnchorTarget —— 命中即把该字段自动路由到 inner 锚点(保底落点,杜绝静默落 host);
|
|
54
54
|
* ② checkInnerOnlyProps 闸门 —— 条目缺 inner 锚点却声明了此类字段时,报词典完整性缺口。
|
|
55
|
-
* (此前为死常量,从未被任何闸引用,导致 nowrap/text_align 可裸声明落 host 被覆盖。)
|
|
56
55
|
*/
|
|
57
56
|
const INNER_ONLY_PROPS = new Set(["white_space", "text_overflow", "overflow", "word_break", "text_align", "line_height", "vertical_align", "nowrap", "text_align_last"]);
|
|
58
57
|
/** 几何字段(宿主内边距/外边距族):落 host 时与出厂内层盒自带 padding 叠加,必须同步清零内层(G5) */
|
|
@@ -1505,7 +1504,7 @@ function checkInnerOnlyProps(change, entry, idLabel, violations) {
|
|
|
1505
1504
|
violations.push(
|
|
1506
1505
|
`${idLabel}.anchors 完整性缺口:条目 style 声明了内层盒属性族 [${offenders.join("、")}]`
|
|
1507
1506
|
+ `(文本控制/行高/对齐类,必须落 inner 层才不被 EP 内层 .cell 出厂样式覆盖),`
|
|
1508
|
-
+ `但本条目 anchors 无 inner 锚点 ——
|
|
1507
|
+
+ `但本条目 anchors 无 inner 锚点 —— 这些字段无处可落,将出现「竖排换行 / 对齐失效」。`
|
|
1509
1508
|
+ `修复:在 anchors 补 { kind:"class", layer:"inner", target:"… > .cell" } 承载选择器。`,
|
|
1510
1509
|
);
|
|
1511
1510
|
}
|
|
@@ -30,7 +30,7 @@ parser match(确定性翻译)→ 施工坐标 → AI 按坐标改代码 →
|
|
|
30
30
|
|
|
31
31
|
无论哪条来路,落地流程一律走下文「执行流程」。
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
**阅读纪律(防上下文溢出,与流程红线同级)**:
|
|
34
34
|
|
|
35
35
|
1. **词典走 parser,禁直读全文**:`mapping/` 下 JSON 是 parser 的事实源,不是给人(AI)通读的——查点位用 `parser query <id>`、查清单用 `parser list`,**禁止整文件读入 `mapping/scenes/*.json` / `mapping/basic/*.json`**(仅 validator/regression 维护场景或 parser 明确报错需要人工核对单条时,用 `Grep` 精确抽取相关条目,不整读)。
|
|
36
36
|
2. **落地会话禁读设计侧规范库**:设计技能的 `page-specs/`(规范/令牌/效果图)不属于项目侧视野——项目侧消费的是**变更集 + oracle.json + 登记表**三个交付物;`oracle.mockup` 指向的效果图由 `resolveFirstExisting` 跨库解析给 parser 使用,但人(AI)**不打开、不阅读设计侧效果图与规范文件**。
|
|
@@ -113,7 +113,7 @@ parser match(确定性翻译)→ 施工坐标 → AI 按坐标改代码 →
|
|
|
113
113
|
- `pending` 数组声明的是设计侧新点位,直接归入 L3 处理(不是错误)。**注意:pending 不是施工指令**——L3 施工的内容以 `changes[]` 中同 ID 新条目声明的意图为准;设计侧只登记 pending、未在 changes[] 声明意图的点位,落地时按出厂现状处理并在缺口清单中反馈「该点位设计意图缺失」。
|
|
114
114
|
- parser 校验已实现:schema 硬校验、mapping_version 缺失/不匹配拒绝、禁词与 hex 位置校验、语义 ID 命名校验、`layer` / `apply_via` / `structure_ops` 结构校验。
|
|
115
115
|
|
|
116
|
-
|
|
116
|
+
各步骤**子文件按需加载**(做到哪一步读哪一份,禁止一次全部通读):
|
|
117
117
|
|
|
118
118
|
| 步骤 | 子文件 | 内容 | 加载时机 |
|
|
119
119
|
|---|---|---|---|
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
运行时配置读 localStorage,而 localStorage 只在 `platform-config.Version` 变化时经 `responsive.ts invalidateStorageIfConfigVersionChanged` 重灌。凡施工涉及 `ShowModel` / `Theme` / `EpThemeColor` 等 T 通道字段,**三件套缺一不可**:
|
|
53
53
|
|
|
54
54
|
1. 改 `platform-config.json` 实值(如 `ShowModel: "card"`);
|
|
55
|
-
2. **`Version` 自增一位**(如 0.0.6 → 0.0.7)——漏此步 =
|
|
55
|
+
2. **`Version` 自增一位**(如 0.0.6 → 0.0.7)——漏此步 = 代码对但运行时仍旧形态;
|
|
56
56
|
3. **渲染取证**:断言新形态类实际挂载(如 `.scroll-item.card-item` 出现在 DOM)——不许只看代码改没改。
|
|
57
57
|
|
|
58
58
|
词典 `admin.layout.tabs.preconditions` 有同款硬闸描述;本三件套对任意 T 通道字段通用。
|
|
@@ -53,7 +53,7 @@ node parser/index.js match --batch <changesets-dir>
|
|
|
53
53
|
| **G1 suppress 收口** | 条目声明某 `form`,词典 `suppress_rules[form]`(或 forms 描述「suppress 必含 x」内联标记)要求收口的出厂互斥通道未全部出现在该条目 `suppress[]` | 词典条目 `suppress_rules` | `suppress 缺口:…必须收口出厂互斥通道 [x],缺 [x]` |
|
|
54
54
|
| **G5 几何语境** | 词典 preconditions 含「几何语境随值迁移」标记 ∧ `style` 含 padding/margin 族几何字段落宿主 ∧ 未声明 `suppress_inner` | 词典条目 preconditions 标记句 | `suppress_inner 缺口:…两层之和 ≠ 设计值` |
|
|
55
55
|
|
|
56
|
-
三闸与禁词校验同级阻断(`exit 1`)——「新旧形态叠加」「两层 padding
|
|
56
|
+
三闸与禁词校验同级阻断(`exit 1`)——「新旧形态叠加」「两层 padding 相加」「伪还原只换主题」都会导致实质错误(双竖条、28px 列挤压、「还原后布局细节零变化」),不允许靠观感兜底。G8 判据一句话:**「把系统 / 页面改成 X」默认是还原(restore),必须带齐 `scheme` + `oracle.mockup` + `coverage.registry`;只有「显式声明只改主题色、其它不动」才用 `design`**(还原项目若用无登记表、无基线的轻量变更集,会一路绿灯、落地后「只变了主题、布局细节零变化」;故须堵住 `oracle`/`coverage` 只给空壳、无 `mockup`/`registry` 芯的写法)。**降级不许静默发生**:变更集 `notes` 与交付说明都须显式写出本次 `mode` 与范围。restore 模式下 G9/G10/G11 同时生效(登记表身份、dims 维度兑现、oracle 基线三道复闸),三者判据细节见上表与「登记表覆盖率」小节。
|
|
57
57
|
|
|
58
58
|
**验收基线输出**:转换计划末尾另打印 `=== 验收基线 oracle ===`(效果图路径 + 待比对点位)与 `=== 覆盖率 coverage ===`(登记项 R / 适用 A / 已兑现 C)。有 `oracle` → 落地后必须跑第 6 步 `verify`;缺 `oracle` / `coverage` → 输出提示,把「补基线 / 补登记覆盖率」回流设计侧(场景还原应给)。
|
|
59
59
|
**覆盖率校验**:`coverage.covered` 必须等于 `coverage.applicable`、`gaps` 为空,否则打印缺口清单——`C < A` 即**欠声明**(有规范子项未落进 `changes[]`/`visible`/`pending`),属设计侧交付不完整,必须回流,不得在项目侧"猜着补"。
|
|
@@ -10,14 +10,14 @@
|
|
|
10
10
|
node parser/index.js audit --project <目标项目根目录> [<changeset.json…>]
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
不开浏览器即可查出的三类高发缺口:
|
|
14
14
|
|
|
15
|
-
| 检查 | 抓什么 |
|
|
15
|
+
| 检查 | 抓什么 | 对应风险 |
|
|
16
16
|
|---|---|---|
|
|
17
17
|
| **挂载点缺失 / 可疑** | `selector` / `anchors.target` 里的类名在项目里**只在样式文件出现、模板没挂**,或**完全找不到** | 列未绑 `class-name` → 金额列右对齐 / 缩略图尺寸永不生效;操作栏规则有定义无引用 |
|
|
18
18
|
| **死通道** | `anchors` 里的 CSS 变量在项目中**无 `var()` 消费者**(两类豁免:`--el-*` 组件库变量由 EP 运行时消费;设计层已显式接管定义的变量属故意 suppress) | 变量有定义无引用,翻译再准也不生效 |
|
|
19
19
|
| **词典无此条目** | 变更集引用了词典未建的 ID | L3 新增点位须当场落地并回写临时映射 |
|
|
20
|
-
| **G2 structure_ops 施工证据** | 变更集声明 `structure_ops` 的点位,按词典 anchors/selector 语义类名 + `op.node` 提取探针,在**非设计层结构源码**中查证施工痕迹;零命中 = 纯 CSS 冒充结构施工 | 操作列分割线 `add_node`
|
|
20
|
+
| **G2 structure_ops 施工证据** | 变更集声明 `structure_ops` 的点位,按词典 anchors/selector 语义类名 + `op.node` 提取探针,在**非设计层结构源码**中查证施工痕迹;零命中 = 纯 CSS 冒充结构施工 | 操作列分割线 `add_node` 声明了却从未施工 |
|
|
21
21
|
| **G4 T 通道对账** | `global.brand_primary`(语义值解析 hex)↔ `platform-config.EpThemeColor`;页签 `form` ↔ `ShowModel`;`visible:false` 点位的 `visible_prop` 开关 ↔ platform-config 实值 | 变更集孔雀绿、platform-config 残留旧主题;flat 页签叠加 chrome 结构 |
|
|
22
22
|
|
|
23
23
|
挂载点疑似但**设计层文件已承载该类名** → 降级不阻断(C 通道由 design-shell 兜底是合法落点)。G2 / G4 违规与挂载点问题同置 `exitCode 1`。审计报错 = **能力缺口**:当场按 `structure_ops` 补挂载 / 补消费者,交付说明单列申报;不得以「词典没建」为由跳过。审计通过 ≠ 还原达标——**静态审计查不出「值对了、位置不对」**,那要靠第 6 步渲染态验收。
|
|
@@ -11,11 +11,11 @@
|
|
|
11
11
|
- `visible: false` → 按条目 `visible_prop`(如 `platform-config.json` 的 `HideTabs`)或组件 `v-if` 隐藏;无现成通道时 `display: none`,作用域限定在条目 `style_scope` 内。**不删除任何代码行。**
|
|
12
12
|
- `position` → 优先用 flex 顺序(`order` / DOM 位置调整),禁止绝对定位像素坐标。
|
|
13
13
|
- `form` → 按条目 `forms` 枚举切换(如 tabs 的 `chrome`/`card` 走 `platform-config.json ShowModel`;内容区滚动模式走 `admin.content.container` 的 form(`fixed`/`scroll`/`auto` → 路由组件根节点 `data-content-mode` 属性,`auto` 为省略即钩子类探测)。枚举外的形态 → 报告,不猜。
|
|
14
|
-
- **结构维度缺失即申报,禁止「只改令牌冒充落地」**:变更集把结构/方位/有无类意图写进 `style`(如指示条只在 `style.menu_active_indicator` 出现、无对应 `form`)时,按「结构意图缺失」处理——交付说明申报「设计侧需补 form + 几何 +
|
|
14
|
+
- **结构维度缺失即申报,禁止「只改令牌冒充落地」**:变更集把结构/方位/有无类意图写进 `style`(如指示条只在 `style.menu_active_indicator` 出现、无对应 `form`)时,按「结构意图缺失」处理——交付说明申报「设计侧需补 form + 几何 + 色值」,不得只覆盖颜色令牌交差(否则会出现「图上有、页面上没有」)。
|
|
15
15
|
- `form` 的落点按上文「落地三落点判据」执行:**有 DOM/配置通道走通道,无通道需新节点走结构增量,纯视觉形态走设计层样式文件**。当某形态在本项目只有样式表达(如菜单指示条方位)时,该 form 允许落到样式层——这与「禁止把内容区高度模式降级成 SCSS」不冲突,判据是**该形态有没有非样式通道**。
|
|
16
16
|
- `layout_type` → 改 `platform-config.json Layout` 字段,值域 `vertical/horizontal/mix`。**大屏全屏沉浸式等独立页不走此通道**(设计侧不填 `layout_type`,点位走 L3 落地)。
|
|
17
17
|
|
|
18
|
-
**存在性收口(通用机制,第 2 步随结构处理)**:变更集未声明的**出厂多余元素**(设计效果图上不存在的按钮/图标/入口,如顶栏设置按钮)→ 按各条目口径处理:有条目者在对应点位上以 `visible:false` 收口(代码保留,`v-if`/`display:none
|
|
18
|
+
**存在性收口(通用机制,第 2 步随结构处理)**:变更集未声明的**出厂多余元素**(设计效果图上不存在的按钮/图标/入口,如顶栏设置按钮)→ 按各条目口径处理:有条目者在对应点位上以 `visible:false` 收口(代码保留,`v-if`/`display:none`);无条目者列入缺口清单申报「设计侧未声明,按无此元素收口」,同样以隐藏通道落地。禁止既不声明也不收口、让出厂元素顶替设计效果(如顶栏设置按钮:效果图上没有,漏收口则落地后仍显示)。反向同理:**设计声明了而出厂没有的元素**(如欢迎区问候语)必须按条目 `$note`/设计规范补齐结构(结构通道豁免底线二),缺失 = 未交付。
|
|
19
19
|
|
|
20
20
|
**出厂演示占位内容等价(通用机制,第 2 步随存在性收口一并处理)**:模板演示页常带有**占位说明性文案与演示按钮**(用于演示"此处可放控件"的说明文字、占位操作列)。这类内容**不是设计效果**——凡落在设计效果图对应角色上的演示占位内容,必须按「效果」等价逻辑处理:
|
|
21
21
|
- 有设计对应操作(设计声明了按钮/操作列的形态与语义)→ **替换为设计对应内容**(如把占位操作列替换为"查看/编辑/更多"及其形态),不得保留演示文案;
|
|
@@ -52,9 +52,9 @@
|
|
|
52
52
|
|
|
53
53
|
- 变更集给了 `layer` → 严格按 `layer` 从条目 `anchors` 取对应选择器(parser 已在转换计划里给出 `@ … · host/inner 层`)。
|
|
54
54
|
- 变更集**没给** `layer`、但条目 `preconditions` 指出必须落内层(如 EP 表头 `white-space`)→ 按 `preconditions` 落 inner 层,并在交付说明注明「设计侧未给 layer,按条目前置条件处理」。
|
|
55
|
-
- **内层盒属性族强制校验**:`white-space` / `text-overflow` / `overflow` / `word-break` / `text-align` / `line-height` / `vertical-align` 这组属性**只在内层文本盒生效**——逐字段核对 `layer`;未指认且条目前置条件也没说 → **退回设计侧补声明**,禁止默认落 host
|
|
55
|
+
- **内层盒属性族强制校验**:`white-space` / `text-overflow` / `overflow` / `word-break` / `text-align` / `line-height` / `vertical-align` 这组属性**只在内层文本盒生效**——逐字段核对 `layer`;未指认且条目前置条件也没说 → **退回设计侧补声明**,禁止默认落 host(否则会被内层默认 `normal` 吃掉 → 表头竖排、行高撑大、列内容被压)。
|
|
56
56
|
- 常规分工:高度 / 背景 / padding 落 host;文本换行、省略、对齐落 inner。
|
|
57
|
-
-
|
|
57
|
+
- **几何语境必须随值迁移(双重内边距,否则表头标题会截断成 类…/包…/操…)**:出厂内层文本盒自带 padding 时(EP `.el-table .cell` 出厂 `padding: 0 12px`),把设计的 16px 落到 host 后**必须同步清零内层自带 padding**——否则实际内边距 = 16+12 = 28px/侧,列宽被挤、表头标题被省略号截断、视觉不适配常规。判据:**效果图的距离语义是「列缘到文字」的总距离;宿主/内层两层结构下必须拆成两段落地,两段之和等于设计值**。凡向 host 落 padding/border 类几何值,先查出厂内层盒的自带同族值再决定是否归零。
|
|
58
58
|
|
|
59
59
|
**B2. 出厂形态互斥收口 `suppress`(治「新形态上了、旧形态残留」)**——条目带 `suppress` 时,逐通道执行收口,**收口优先走令牌重映射**(在令牌宿主作用域重声明令牌,零权重战争),令牌不存在才写属性:
|
|
60
60
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
### 第 3 步附加(之二)· 覆写优先级消费( 硬步骤)
|
|
8
8
|
|
|
9
|
-
第 1 步输出的 `▸ 覆写优先级 priority`
|
|
9
|
+
第 1 步输出的 `▸ 覆写优先级 priority` **不是提示,是落地写法的硬要求**。每落一条规则前先按策略决定写法;写法错了,规则就是「写了不生效」——如面包屑 `visible:false` 写成 `display:none` 却照旧显示、页签关闭钮 `opacity` 写了却仍要 hover 才显。这类情形里两条规则本身都没写错,问题出在**赢了才是硬道理**这一步没做。
|
|
10
10
|
|
|
11
11
|
| `priority.strategy` | 对手 | 必须的写法 | 自检判据 |
|
|
12
12
|
|---|---|---|---|
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
跑 `code-quality` 全量清单之外,追加:
|
|
10
10
|
|
|
11
11
|
- [ ] 变更集外的任何点位**零改动**(diff 只含变更集提到的文件/选择器)
|
|
12
|
-
- [ ] **页面清单零增量(G13
|
|
12
|
+
- [ ] **页面清单零增量(G13 页面绑定闸)**:diff 中不得出现新增的路由定义 / 菜单项 / 页面文件,除非变更集 `page_bindings` 显式声明 `target:"new"` 且 `notes` 已申报。效果图页面默认是设计角色坐标系(演示标题),落地 = 映射已有页面同步结构与样式;`page_bindings` 缺省时本项必须为零增量。验收只比「结构与样式」,不比「页面标题文字」
|
|
13
13
|
- [ ] `visible: false` 的模块代码仍存在(只是隐藏)
|
|
14
14
|
- [ ] **`!important` 使用合规**:新增 `!important` 仅允许两种情形——① 词典 `priority.strategy = self_plus_important`(对手带 `!important`);② 对手为组件 scoped 且提权后**实测**仍平手;且每条带理由注释。其余一律靠作用域限定解决。无内联 style 硬编码色值(全部走变量)
|
|
15
15
|
- [ ] 未修改 `src/components/`(Re* 组件库源码——**底线一**)
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
- `content` ref 仍绑在定高容器上(换容器后未丢),`otherRef` 仍在表格上方、分页仍在表格正下方;
|
|
34
34
|
- 表头 / 行 / 分页都在视口内,仅表格体内滚动,无外层滚动条、无拉伸 / 塌陷 / 双滚动条,`tableHeight > 0`;
|
|
35
35
|
- **结构层 diff 为空**:`lay-content/index.vue` 的 `.main-content[data-content-mode]` 与 `element-plus.scss` 的 `[data-fill]` 未被改动;同时确认没有「为保高度而放弃设计还原」(出厂卡片 / 内边距 / 内部排布原样未动而变更集声明了改动)——两个方向任一命中即返工
|
|
36
|
-
- [ ] **映射通道活性检查(杂必查)**:样式落地引用的每个 CSS 变量必须在项目样式中**存在消费者**(`变量名` 有 `var(--xxx)` 引用点);只定义不消费的变量 =
|
|
37
|
-
- [ ] **结构施工兑现检查(structure_ops 逐条对账,与红线同级)**:变更集 `structure_ops[]` 的**每一条 op** 都必须在交付说明给出「op → 落在哪个文件 / 哪个节点 / 怎么落的」;`add_node` 必须真的新增了元素或渲染分支(模板 diff 可验),`bind_source` 必须真的改了绑定(`class-name` / `align` / `formatter`)。出现「声明了 op、代码里找不到对应改动」= 交付不完整,禁止只改 CSS
|
|
38
|
-
- [ ] **同权重失效检查( · 专查「写了不生效」)**:逐条核对设计层新增规则是否真能取胜——① 对手是组件 `<style scoped>` 时,本条特异度必须**严格高于**它(**平手即错**,因为组件样式在全局之后注入);② 对手带 `!important` 时本条必须同样 `!important`,或改走通道变量。**判定方法(必须真数,不许目测)**:对每条新规则与其对手分别写出特异度三元组 `(a,b,c)` 并**逐位比较(先 b 后 c)**,本条的 `b` 不大于对手即判为「失效」;`html` / `body` 只加 `c` 位,**对手 `b` 更高时加 `html body` 无效**,必须靠**加类**(祖先链补稳定语义类,如 `.el-menu`)把 `b` 抬到相等。同 `b` 时,`c` 更高者胜。③ **出厂用语义令牌间接设置该属性时(`var(--vts-theme-*)
|
|
36
|
+
- [ ] **映射通道活性检查(杂必查)**:样式落地引用的每个 CSS 变量必须在项目样式中**存在消费者**(`变量名` 有 `var(--xxx)` 引用点);只定义不消费的变量 = 通道死路,翻译再准也不生效(例如 menu_active_indicator 缺 `--vts-theme-menu-active-before` 消费者时会「映射了却没效果」)。施工时 grep 核对,无消费者时改走消费者存在的作用域或补挂载点并申报。
|
|
37
|
+
- [ ] **结构施工兑现检查(structure_ops 逐条对账,与红线同级)**:变更集 `structure_ops[]` 的**每一条 op** 都必须在交付说明给出「op → 落在哪个文件 / 哪个节点 / 怎么落的」;`add_node` 必须真的新增了元素或渲染分支(模板 diff 可验),`bind_source` 必须真的改了绑定(`class-name` / `align` / `formatter`)。出现「声明了 op、代码里找不到对应改动」= 交付不完整,禁止只改 CSS 冒充结构施工
|
|
38
|
+
- [ ] **同权重失效检查( · 专查「写了不生效」)**:逐条核对设计层新增规则是否真能取胜——① 对手是组件 `<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`)→ 整栏菜单文字用浅色主题的黑色落在深色侧栏上、字全部消失**
|
|
39
39
|
- [ ] **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` 已自动报出);③ **状态性期望与孤儿对账(G14/G15,抽取产物层)**:效果图上有可见状态性表现的点位(禁用置灰 / 激活 / 选中)→ `oracle.json.states` 必须有对应 `<sid>@<state>` 期望(缺失 = 状态维度放弃验收);交付前核对项目页渲染的每个区块都在 oracle 全集(sids ∪ absent ∪ residual ∪ states)内——孤儿点位 verify 当场 exit 1,提前自查可省一轮返工
|
|
40
40
|
- [ ] **dark.scss 暗色同步**:新增视觉规则在 `html.dark` 有对应覆盖
|
|
41
41
|
- [ ] **缺口清单只含意图缺口**:清单每一项都必须是「设计侧未给值 / 值非法」且已注明「回流设计侧补齐」;能力缺口(词典缺 ID / 缺字段枚举 / 缺 form)不得出现在清单里——出现即把可落地项搁置
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
| **选择器落空** | oracle 有点位、actual 无(或某属性取不到) | 补挂载点:按 `structure_ops` 挂类 / 补 `data-sid` / 确认元素已渲染(属能力缺口,交付说明申报) |
|
|
34
34
|
| **权重被压** | 颜色 / 字重 / 透明度 / 阴影类属性值不符 | 按词典 `priority` 声明的策略提权(`scope_qualified` / `self_plus_important` / `deep_qualified`) |
|
|
35
35
|
| **语境错位** | 几何 / 盒模型属性(padding / 尺寸 / 对齐 / 行高)值不符 | 校准 `layer`(`host` vs `inner`)——值对了落错层 |
|
|
36
|
-
| **存在性缺口(G12)** | `oracle.absent` 点位在页面仍渲染可见(`display` 非 `none`) | 补 `visible:false` 收口并按词典 `priority`
|
|
37
|
-
| **状态缺口(G14)** | `oracle.states` 的 `<sid>@<state>` 交互态期望与实测不符 / 实测未取到 | 浏览器脚本**触发交互态**(`.click()` / `hover()` / `dispatchEvent`)后抽取到 `actual.states` 同名键;禁用态走结构通道(`disabled` 属性 / `:disabled` 类)+
|
|
36
|
+
| **存在性缺口(G12)** | `oracle.absent` 点位在页面仍渲染可见(`display` 非 `none`) | 补 `visible:false` 收口并按词典 `priority` 提权(面包屑 `display:none` 被同权重 scoped 规则反压即属此类——写了不生效) |
|
|
37
|
+
| **状态缺口(G14)** | `oracle.states` 的 `<sid>@<state>` 交互态期望与实测不符 / 实测未取到 | 浏览器脚本**触发交互态**(`.click()` / `hover()` / `dispatchEvent`)后抽取到 `actual.states` 同名键;禁用态走结构通道(`disabled` 属性 / `:disabled` 类)+ 设计层样式(如效果图「批量按钮置灰 opacity:.4」在静态快照上取不到——页面静态抽的是激活态值,逐点 diff 验不到) |
|
|
38
38
|
| **孤儿点位(G15)** | actual 中存在、oracle 全集(sids ∪ absent ∪ residual ∪ states)均无申报 | 两选一回流设计侧:应消失 → 收进 `oracle.absent`;该还原 → 补 `oracle.sids` + 效果图 `data-sid`。**G12 只断言「已申报的该消失」,孤儿闸补齐「未申报的出现了」——申报缺一个 = 漏网一个** |
|
|
39
39
|
|
|
40
|
-
**存在性闸(`oracle.absent`)**:效果图上不存在的出厂点位(面包屑 / 设置铃铛等)逐条列入变更集 `oracle.absent`,verify 逐个断言「actual 不存在或 `display:none` / `visibility:hidden`」。**这类缺口无期望值,逐点 diff 永远验不到——不进 absent
|
|
40
|
+
**存在性闸(`oracle.absent`)**:效果图上不存在的出厂点位(面包屑 / 设置铃铛等)逐条列入变更集 `oracle.absent`,verify 逐个断言「actual 不存在或 `display:none` / `visibility:hidden`」。**这类缺口无期望值,逐点 diff 永远验不到——不进 absent 就不在验收范围内**。
|
|
41
41
|
|
|
42
42
|
**状态断言闸(`oracle.states`,G14)**:交互态(disabled / active / hover / focus / checked)在静态页面快照上取不到——效果图标注的状态性样式(批量按钮禁用置灰、页签激活字重)与页面静态抽取值**永远对不上或永远碰巧对上**,逐点 diff 均验不到。设计侧在 `oracle.json` 顶层声明:
|
|
43
43
|
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
|
|
55
55
|
**孤儿点位对账闸(G15)**:verify 自动对账 actual 顶层点位与 oracle 全集(`sids ∪ absent ∪ residual_accepted ∪ states` 的 sid 部分),**未申报即出现 = 孤儿,exit 1**——效果图是验收的完备性基准,「图上没有、清单也没说」的页面元素不允许静默存活(它是下一轮「图上怎么多了个东西」体感的来源)。结构性键(`$` 前缀注释 / `sids` / `states`)不参与对账。
|
|
56
56
|
|
|
57
|
-
**残差豁免(`oracle.residual_accepted`)**:`[{ "sid": …, "reason": … }]`(reason 必填)。命中豁免的属性差异降级为「已申报固有残差」提示行,不进缺口计数;验收报告单列豁免明细,逐条可审计。**机制推算值(等宽槽宽)、业务资产(logo 图形)必须申报**——不申报 = 每轮验收重新报缺口 =
|
|
57
|
+
**残差豁免(`oracle.residual_accepted`)**:`[{ "sid": …, "reason": … }]`(reason 必填)。命中豁免的属性差异降级为「已申报固有残差」提示行,不进缺口计数;验收报告单列豁免明细,逐条可审计。**机制推算值(等宽槽宽)、业务资产(logo 图形)必须申报**——不申报 = 每轮验收重新报缺口 = 「反复调整仍无改善」的体感来源。
|
|
58
58
|
|
|
59
59
|
**快照回归(`--snapshot` / `--baseline`,治「上一轮改对的这一轮漂回」)**:
|
|
60
60
|
|