@qilitt-mickey/vue3-temp-skill 1.1.28 → 1.1.29

package/SKILL.md

@@ -78,7 +78,39 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
 
 ## 设计落地（handoff）
 
-设计技能（project-ui-design）每次产出时**始终自动附加 `design-handoff/v1` JSON**。本技能检测到 JSON 后**强制加载** `references/design-handoff.md`，按 C/T/F/S/P 五步全流程执行（配置→令牌→框架→样式→页面），**任一步跳过 = 硬失败**。设计产出优先级高于本技能出厂默认值，页面保留业务逻辑、重写视觉结构。用户无需提及「JSON」或「handoff」——这是两技能间的自动协议。完整规则与逐项清单见 `design-handoff.md`。
+设计技能（project-ui-design）每次产出时**始终自动附加 `design-handoff/v1` JSON**。本技能检测到 JSON 后**强制加载** `references/design-handoff.md`，按 C/T/F/Co/S/P 六步全流程执行（配置→令牌→框架→共享组件→样式→页面），**任一步跳过 = 硬失败**。设计产出优先级高于本技能出厂默认值，页面保留业务逻辑、重写视觉结构。用户无需提及「JSON」或「handoff」——这是两技能间的自动协议。完整规则与逐项清单见 `design-handoff.md`。
+
+### 项目级模式 vs 单页模式
+
+通过 JSON 的 `meta.transformScope` 字段自动识别改造范围：
+
+| 模式 | 触发条件 | 执行范围 | 关键规则 |
+|------|---------|---------|---------|
+| **单页模式**（默认） | `transformScope: "single-page"` 或未设置 | C/T/F/Co/S + 单个页面 P 步骤 | 只改造当前对话涉及的页面，框架/共享组件若已改造则跳过 |
+| **项目级模式** | `transformScope: "project"` | C/T/F/Co/S（全局一次） + **全页面遍历改造** | 先扫描全部路由，构建页面清单，逐页面执行 P 步骤，全部完成后做全量校验 |
+
+**项目级模式核心规则**：
+1. 先扫描 `src/router/modules/` 所有路由文件，构建页面清单
+2. C/T/F/Co/S 是全局的，只执行一次（框架 + 共享组件）
+3. 逐页面执行 P1-P7，每页标记 `status: completed`
+4. 单次对话改不完时，输出进度 + 待改造页面清单，用户说「继续」时从断点恢复
+5. **禁止在未完成全部页面前声称任务完成**——必须明确告知进度和剩余页面
+
+### 设计概念 → 项目组件映射
+
+设计 skill 定义了"表格工具栏""操作列""导航栏"等设计概念，本技能通过映射表自动找到项目中对应的组件进行修改。映射表见 `design-handoff.md` 第八章（共享组件级落地）。共享组件在 Co 步骤（F 步骤之后、S 步骤之前）统一修改，**一处修改，全局生效**，不需要在每个页面重复处理。
+
+### ⚠️ 设计落地绝对禁止修改 docs/**
+
+设计落地场景下，`docs/` 目录为**只读**，绝对禁止修改：
+- ❌ 不得把设计产出的 HTML 保存到 `docs/`
+- ❌ 不得在 `docs/` 中生成设计规范文档
+- ❌ 不得修改 `docs/style-templates/` 的演示页
+- ✅ 设计修改只落在 `src/`、`public/`、`platform-config.json` 等业务代码中
+- ✅ 设计规范直接读取设计 skill 的 references 文件，不另存
+- ✅ 设计产出 HTML 仅在对话中作为参考对照，不写入项目
+
+违反此规则即硬失败，必须立即撤销对 docs/ 的修改。
 
 ## 模块路由表
 
@@ -171,7 +203,7 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
    - 批量操作、表格排序 → `crud-pages`
    - 趋势图、地图、甘特图 → `chart-echarts`
    - 附件上传、断点续传 → `file-management`
-   - 按 XX / UI 规范适配、设计交接块、整站风格重构 → `design-system`（项目设计系统说明）+ `layout-theme`；有令牌/交接产出时加读 `design-handoff.md`（逐文件修改清单，含 1:1 还原 F1-F14 / P1-P7）
+   - 按 XX / UI 规范适配、设计交接块、整站风格重构 → `design-system`（项目设计系统说明）+ `layout-theme`；有令牌/交接产出时加读 `design-handoff.md`（逐文件修改清单，含 C/T/F/Co/S/P 全流程 + 共享组件映射 + 项目级模式）
    - 列表→独立详情/编辑页 → `crud-pages` + `detail-page`
    - 图表（折线/柱状/饼图） → `chart-echarts`
    - 数据大屏、看板 → `data-screen`
@@ -195,12 +227,21 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
 ## 工作流
 
 1. **需求分析**：列出功能模块 ID（不含 `code-quality`）
-2. **加载**：`core-kernel` + 命中模块；addon/缺包时加读 `project-inventory` + **`addon-enable`**；**检测 design-handoff/v1 JSON 是否存在** — 若存在，强制加载 `design-handoff`（逐文件修改清单，含 C/T/F/S/P 全流程）+ `design-system.md`，并按设计产出优先级执行
-3. **依赖**：缺包按 inventory 第九节精确版本，确认后安装；**再按 `addon-enable` 对应章节改配置**
-4. **探查**：复用仓库 `Re*` / Hook / utils
-5. **生成**：可运行代码落盘至 `src/` 等业务目录；**禁止**同步修改 `docs/**`（除非用户明确要求维护文档）；**有 handoff JSON 时，页面结构以设计输出为准，保留业务逻辑**
-6. **code-quality**：按 `references/code-quality.md` 执行；**有 handoff JSON 时，额外执行 handoff 落地完整性校验**（见 `design-handoff.md` 末尾）
-7. **输出**：变更说明（含已改配置文件列表）+ 待确认项
+2. **加载**：`core-kernel` + 命中模块；addon/缺包时加读 `project-inventory` + **`addon-enable`**；**检测 design-handoff/v1 JSON 是否存在** — 若存在，强制加载 `design-handoff`（逐文件修改清单，含 C/T/F/Co/S/P 全流程 + 共享组件映射 + 项目级模式）+ `design-system.md`，并按设计产出优先级执行
+3. **模式判断**：有 handoff JSON 时，读取 `meta.transformScope`：
+   - `project` → 进入**项目级模式**：先扫描 `src/router/modules/` 构建页面清单，输出「待改造页面清单」供用户确认
+   - `single-page` 或未设置 → 单页模式，仅处理当前页面
+4. **依赖**：缺包按 inventory 第九节精确版本，确认后安装；**再按 `addon-enable` 对应章节改配置**
+5. **探查**：复用仓库 `Re*` / Hook / utils；**项目级模式下**，探查所有共享组件（ReTableBar / ReTableOperate / RePagination 等）的当前实现
+6. **生成**：
+   - 单页模式：C/T/F/Co/S + 当前页面 P 步骤
+   - 项目级模式：C/T/F/Co/S（全局一次） + 逐页面执行 P 步骤，标记完成状态
+   - **有 handoff JSON 时，页面结构以设计输出为准，保留业务逻辑**
+   - **禁止**同步修改 `docs/**`（除非用户明确要求维护文档）
+7. **设计还原度验证**：有 handoff JSON 时必须执行，按 `design-handoff.md` 第十章逐区域逐元素对照设计规范验证，输出「设计还原度验证报告」，未通过项必须修正
+8. **功能完整性核查**：有 handoff JSON 时必须执行，按 `design-handoff.md` 第十一章逐项核查功能是否正常（框架/共享组件/页面），样式改造不得破坏原有功能，发现问题立即修正
+9. **code-quality**：按 `references/code-quality.md` 执行；**有 handoff JSON 时，额外执行 handoff 落地完整性校验**（项目级模式需校验全页面完成度 + 共享组件修改 + 设计还原度 + 功能完整性）
+10. **输出**：变更说明（含已改配置文件列表）+ 设计还原度验证报告 + 功能完整性核查报告 + 待确认项；**项目级模式未全部完成时，输出进度 + 待改造页面清单 + 「继续」指令提示**
 
 ### 最终回复结构
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qilitt-mickey/vue3-temp-skill",
-  "version": "1.1.28",
+  "version": "1.1.29",
   "description": "Vue 3 企业级中后台项目开发规范技能包 — core-kernel 架构、按需功能模块",
   "bin": {
     "vue3-temp-skill": "./bin/cli.js"

package/references/code-quality.md

@@ -88,7 +88,20 @@ lint / type-check **过了也不能放过**下列项。发现即改代码，禁
 - [ ] 展开收起按钮 hover 文字不变淡（加深为品牌色）
 - [ ] 所有视觉规则在暗色模式下有对应覆盖
 
-#### 页面层（8 项）
+#### 共享组件层（10 项）
+
+- [ ] ReTableBar 工具栏按钮样式符合设计规范（刷新/密度/列设置：icon 16px、按钮 32px、分隔线 1px）
+- [ ] ReTableBar 工具栏左右布局正确（左批量操作、右工具按钮）
+- [ ] ReTableBar 标题区：设计模式下无多余「展示列表」标题文字
+- [ ] ReTableOperate 操作列：纯文字链接，无图标，按钮间有 1px×14px 竖分隔线
+- [ ] ReTableOperate「更多」按钮：带 10px 下拉箭头，下拉菜单样式正确
+- [ ] ReTableOperate 折叠阈值：limit 默认 3，列宽动态计算（`resolveOperateColumnWidth`）
+- [ ] RePagination 分页样式符合设计规范（两段式布局、可选 10/20/50 条）
+- [ ] 侧栏菜单激活态：实色品牌底 + 左侧 3px 指示条 + 白色文字（非 8% 透明底）
+- [ ] 顶栏折叠按钮：垂直居中，40×40px；设置按钮：已隐藏/删除
+- [ ] 内容区模块分割线：各区域间距与设计规范一致（标题 20px / 筛选 20px / 工具栏 20px 8px / 表格 0 20px / 分页 8px 20px 20px）
+
+#### 页面层（11 项）
 
 - [ ] 页面有标题区（`.vts-page-header`：标题 + 描述 + 操作按钮）
 - [ ] 筛选区有容器感（`.vts-filter-area`：背景 + 底部分割线）
@@ -96,8 +109,44 @@ lint / type-check **过了也不能放过**下列项。发现即改代码，禁
 - [ ] 表格区有包裹感（`.vts-table-area`）
 - [ ] 状态标签样式符合规范（filled/outlined/solid 按列分配）
 - [ ] 操作列统一为文字链接 + "更多"下拉（ReTableOperate）
-- [ ] 设计中未体现的元素已隐藏/移除（对照元素自查隐藏清单）
+- [ ] 设计中未体现的元素已隐藏/移除（对照元素自查隐藏清单 4.1-4.4）
 - [ ] 所有样式值引用 CSS 变量，无裸 hex/px 值
+- [ ] 页面无「展示列表」等多余标题文字
+- [ ] 页面无「左侧按钮可以增加多个」「增加一行可编辑数据」等示例按钮
+- [ ] 操作列按钮无多余图标，仅保留文字 + 竖分隔线
+
+#### 项目级完成性（transformScope=project 时额外执行）
+
+- [ ] 已扫描全部路由模块（`src/router/modules/`），页面清单完整
+- [ ] 所有列表页均已按设计规范改造（base/tree/vxe-table 等）
+- [ ] 所有表单页均已按设计规范改造
+- [ ] 所有详情页均已按设计规范改造
+- [ ] 工作台/仪表盘/数据大屏等其他页面均已按设计规范改造
+- [ ] 共享组件（ReTableBar/ReTableOperate/RePagination）已全局修改
+- [ ] 框架组件（navbar/sidebar/tabs/app-main）已全局修改
+- [ ] 元素隐藏清单已逐项检查并处理（顶栏/侧栏/列表/共享组件 四类）
+- [ ] 无遗漏页面（对照路由清单逐一核对）
+- [ ] 所有页面的多余元素（「展示列表」「左侧按钮...」等）均已清除
+
+#### 设计还原度验证（有 handoff JSON 时必须执行）
+
+> 验证依据：设计 skill 的规范文件（design-tokens.md / unified-framework.md / list-page.md / component-spec.md）
+> 验证方法：代码级对照——读取设计规范预期值 → 检查项目代码实际值 → 比对是否一致
+> 验证顺序：框架层 → 页面层 → 共享组件层 → 细节项 → 元素清理
+
+- [ ] **框架层还原度**：顶栏高度/元素/折叠位置、侧栏宽度/背景/激活态、页签高度/激活态、内容区背景/padding，共 10 项已逐项对照
+- [ ] **页面层还原度**：卡片阴影圆角、标题区字号/padding、筛选区背景/分隔线、工具栏布局/按钮、表格表头/行高/hover、操作列样式、分页布局、模块分割线/间距，共 12 项已逐项对照
+- [ ] **共享组件还原度**：ReTableBar（按钮样式/布局/分页集成）、ReTableOperate（文字链接/分隔线/更多箭头/折叠逻辑）、RePagination（样式/布局），共 10 项已逐项对照
+- [ ] **核心组件还原度**：按钮（高度/圆角/主色三态）、输入框（高度/圆角/focus 光环）、Tag（5 种状态色）、下拉菜单、空状态，已逐项对照
+- [ ] **细节项还原度**：图标大小 16px、分隔线 #F0F0F0、hover 文字加深不变浅、行高正确、字重正确、圆角统一、阴影自然、更多按钮有箭头、操作列有竖分隔线、页签下划线居中、操作列 sticky、选择列 48px、状态标签颜色对应、卡片有阴影，共 15 项已逐项检查
+- [ ] **令牌溯源检查**：颜色/尺寸/间距均通过 CSS 变量传递，变量值与 design-tokens.md 一致，无裸 hex/px 值
+- [ ] **元素清理检查**：设置按钮、展示列表标题、示例按钮、操作列多余图标等已全部移除
+- [ ] **已输出「设计还原度验证报告」**（格式见 design-handoff.md 第十章 10.7），包含整体还原度、各层通过率、偏差项及修正方案
+- [ ] **绝对禁止**：设计落地过程中未修改 `docs/**` 下任何文件（设计产出 HTML 不写入项目，设计规范不另存文档，所有修改只在 src/ 等业务代码中）
+- [ ] **功能完整性核查**：样式改造后原有功能全部正常（框架层/共享组件层/页面层均已逐项核查，无按钮失效、事件丢失、数据绑定断裂等功能回归问题）
+- [ ] **已输出「功能完整性核查报告」**（格式见 design-handoff.md 第十一章 11.7），包含整体通过率、各层核查结果、发现的问题及修正方案
+
+> ⚠️ 硬约束：设计还原度验证未通过的项，必须修正后重新验证，直至全部通过。禁止带着未修正的偏差项进入后续环节。
 
 ## 选型与硬约束
 

package/references/design-handoff.md

@@ -13,6 +13,29 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
 >
 > 1:1 还原要求见下方 F1-F27（框架组件）和 P1-P7（页面代码）步骤。
 
+## ⚠️ 绝对禁止：设计落地场景下不得修改 docs/**
+
+> 这是硬约束，违反即硬失败。
+
+设计落地过程中，**绝对禁止**修改项目 `docs/` 目录下的任何文件。原因：
+
+1. `docs/` 是静态文档/演示说明目录（如 `docs/style-templates/`），仅供人类预览与沟通参考
+2. 设计产出的 HTML 是**参考稿**，只用于对照还原，不需要写入项目文件
+3. 设计规范的依据是设计 skill 的 `references/` 文件（design-tokens.md / list-page.md 等），不是项目 docs
+4. 所有设计修改只落在 `src/` 目录下的业务代码中（.vue / .scss / .ts / platform-config.json）
+
+**常见误操作，必须避免**：
+- ❌ 把设计产出的 HTML 保存到 `docs/` 里
+- ❌ 在 `docs/` 里写「设计规范说明文档」
+- ❌ 修改 `docs/style-templates/` 里的演示页以「对齐新设计」
+- ❌ 生成「落地说明文档」放到 `docs/`
+
+**正确做法**：
+- ✅ 设计产出的 HTML 直接在对话中展示，作为参考对照
+- ✅ 设计规范直接读取设计 skill 的 references 文件，不另存
+- ✅ 所有修改只动 `src/`、`public/`、`platform-config.json` 等业务代码
+- ✅ 如果用户**明确要求**维护文档，那是另一个独立任务，不属于设计落地范畴
+
 ## 双轨
 
 | 场景 | 行为 |
@@ -29,7 +52,25 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
 | **先开发 → 后调设计** | 业务页面已用 vue3-temp-skill 开发完成，用户不满意效果，调设计技能输出 handoff JSON | C/T/F/S/P **全 5 步** | 页面组件保留业务逻辑（API/路由/状态/事件），**重写 `<template>` 和样式**，使页面结构与设计输出一致 |
 | **先设计 → 后开发** | 新项目先调设计技能输出 handoff JSON，再调 vue3-temp-skill | 先执行 C/T/F/S（配置/令牌/框架/样式），后续业务开发时 P 步骤随页面生成同步落地 | 后续每个新页面开发都须遵循已落地设计规范，不以出厂样板覆盖设计输出 |
 
-**两种场景均须执行完整 C/T/F/S/P 流程，不可跳步。**
+**两种场景均须执行完整 C/T/F/Co/S/P 流程，不可跳步。**
+
+### 项目级模式 vs 单页模式
+
+通过 `meta.transformScope` 字段识别改造范围：
+
+| 模式 | transformScope 值 | 执行逻辑 |
+|------|-------------------|---------|
+| **单页模式**（默认） | `"single-page"` 或未设置 | 仅处理当前页面，C/T/F/Co/S 若已落地则跳过 |
+| **项目级模式** | `"project"` | 全局执行 C/T/F/Co/S（一次），然后遍历所有路由页面逐一改造 |
+
+**项目级模式执行要点**：
+1. **Step 0 — 页面清单初始化**：扫描 `src/router/modules/` 所有路由文件，按页面类型（list/form/detail/dashboard 等）分组，构建待改造页面清单
+2. **Step 1-5 — 全局层落地**：C/T/F/Co/S 五步是项目全局的，只执行一次（配置/令牌/框架/共享组件/样式）
+3. **Step 6 — 全页面遍历**：按页面清单逐页执行 P1-P7，每页标记完成状态
+4. **断点续改**：单次对话未完成全部页面时，记录已完成页面，用户说「继续」时从下一个 pending 页面开始
+5. **完成性校验**：全部页面完成后，执行项目级完成性校验（见第九章末）
+
+> ⚠️ 项目级模式下，**禁止在未完成全部页面前声称任务完成**。必须明确告知：已完成 X/Y 页面，剩余 Z 页面待改造，说「继续」即可继续。
 
 ## 设计为准原则
 
@@ -167,6 +208,138 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
 
 ---
 
+## 三-B、共享组件级落地（Co1-Co12 · 一处修改全局生效）
+
+> 设计 skill 的规范中定义了「表格工具栏」「操作列」等设计概念，但项目中的共享组件（Re* 系列）有自己的封装。
+> 本章建立**设计概念 → 项目组件映射表**，AI 按此映射找到对应组件文件，逐一修改。
+> 共享组件在 C/T/F 步骤之后、S 步骤之前统一修改（Co 步骤），**一处修改，全局生效**，不需要在每个页面重复处理。
+
+### Co.0 设计概念 → 项目组件映射表
+
+| 设计概念（设计 skill 中） | 设计规范来源 | 项目组件/文件 | 修改依据 |
+|-------------------------|-------------|--------------|---------|
+| 表格工具栏（刷新/密度/列设置） | list-page.md §4 工具栏 + §12 CSS 选择器 | `src/components/ReTableBar/src/bar.vue` | Co1-Co4 |
+| 表格操作列（文字链接+分隔线+更多） | list-page.md §5 操作列 + component-spec.md §7 表格 | `src/components/ReTableOperate/src/index.vue` | Co5-Co7 |
+| 分页组件 | list-page.md §7 分页 + component-spec.md §5 Pagination | `src/components/RePagination/` | Co8 |
+| 顶栏导航栏（折叠按钮位置/设置按钮隐藏） | unified-framework.md §3 Header + §6 CSS 选择器 | `src/layout/components/lay-navbar/index.vue` | F1-F9（已在框架层覆盖，此处补充共享组件视角） |
+| 侧栏菜单激活态 | unified-framework.md §2 Sider + color-library.md 主色 | `src/styles/sidebar.scss` | F10-F18（已在框架层覆盖） |
+| 页签栏 line 模式激活态 | unified-framework.md §4 Tabs + component-spec.md §5 Tabs | `src/layout/components/lay-tag/index.vue` | F19-F25（已在框架层覆盖） |
+| 内容区卡片（阴影/圆角/模块分割线） | list-page.md §2 卡片结构 + design-tokens.md 间距令牌 | `src/styles/element-plus.scss` + 页面 `.vts-*` 类 | S1（样式层） |
+
+### Co.1 ReTableBar — 标题区改造
+
+| 项 | 说明 |
+|----|------|
+| **文件** | `src/components/ReTableBar/src/bar.vue` |
+| **设计规范** | 列表页的工具栏上方**没有「展示列表」等标题文字**（设计 spec 中标题区在卡片最上方，工具栏是独立区域） |
+| **修改内容** | 1. `title` prop 的默认渲染改为「设计模式下不显示」（通过 CSS 类或 prop 控制）<br>2. 标题区域的 padding/margin 按设计 spec 调整（工具栏区域 padding: 20px 20px 8px） |
+| **验证** | 设计模式下列表页工具栏上方无多余标题文字 |
+
+> ⚠️ 注意：很多页面通过 `#title` slot 传入了「展示列表」+ 示例按钮（如「左侧按钮可以增加多个」），这些**都需要在页面层移除**，不是 ReTableBar 组件本身的问题。Co 步骤只改组件默认行为，页面层的清理在 P 步骤 + 元素隐藏清单中处理。
+
+### Co.2 ReTableBar — 工具栏按钮样式（刷新/密度/列设置）
+
+| 项 | 说明 |
+|----|------|
+| **文件** | `src/components/ReTableBar/src/bar.vue` |
+| **设计规范** | list-page.md §4 工具栏 + §12 CSS 选择器 |
+| **修改内容** | 1. **刷新按钮**：icon 尺寸 16px，点击区域 32×32px，hover 背景浅灰（`--el-fill-color-light`）<br>2. **密度按钮**：dropdown 形式，3 个选项（宽松/默认/紧凑），对应表格行高 55/47/39px<br>3. **列设置按钮**：popover 形式，面板宽度 200px，内含全选/重置 + 列复选框列表<br>4. **按钮间分隔线**：使用 `el-divider direction="vertical"`，颜色 `--border-color-secondary`（#F0F0F0）<br>5. **工具栏整体 padding**：`--action-bar-padding-y` 上下 8px，左右 20px |
+| **验证** | 三个工具按钮都存在（刷新/密度/列设置），尺寸、间距、分隔线与设计规范一致 |
+
+### Co.3 ReTableBar — 工具栏左右布局
+
+| 项 | 说明 |
+|----|------|
+| **文件** | `src/components/ReTableBar/src/bar.vue` |
+| **设计规范** | list-page.md §4 工具栏：左侧批量操作按钮，右侧工具按钮（刷新/密度/列设置） |
+| **修改内容** | 1. 左侧区域：slot 或 prop 传入的批量操作按钮（如批量删除、批量导出）<br>2. 右侧区域：刷新 + 分隔线 + 密度 + 分隔线 + 列设置<br>3. 左右两侧通过 flex justify-between 布局<br>4. 左侧按钮间距 `--action-bar-gap`（8px） |
+| **验证** | 工具栏左右布局正确，左批量操作、右工具按钮 |
+
+### Co.4 ReTableBar — 分页集成
+
+| 项 | 说明 |
+|----|------|
+| **文件** | `src/components/ReTableBar/src/bar.vue` + `src/components/RePagination/` |
+| **设计规范** | list-page.md §7 分页 |
+| **修改内容** | 1. 分页放在表格下方、卡片底部区域<br>2. 分页容器 padding: 8px 20px 20px<br>3. 默认每页 10 条，可选 10/20/50 条/页<br>4. 跳转输入框宽度 48px |
+| **验证** | 分页位置、尺寸、可选条数与设计规范一致 |
+
+### Co.5 ReTableOperate — 操作列按钮样式
+
+| 项 | 说明 |
+|----|------|
+| **文件** | `src/components/ReTableOperate/src/index.vue` |
+| **设计规范** | list-page.md §5 操作列 + component-spec.md §7 表格 |
+| **修改内容** | 1. **按钮样式**：纯文字链接（`type="text"`），**无图标**<br>2. **按钮间分隔线**：1px × 14px 竖线，颜色 `--border-color`（#D9D9D9），位于两个按钮之间<br>3. **文字颜色**：默认 `--brand-primary`（品牌色），hover 加深为 `--brand-active`<br>4. **禁用态**：文字颜色 `--text-disabled`，无 hover 效果 |
+| **验证** | 操作列按钮为纯文字链接，无图标，按钮间有竖分隔线，颜色符合规范 |
+
+### Co.6 ReTableOperate — 「更多」下拉按钮
+
+| 项 | 说明 |
+|----|------|
+| **文件** | `src/components/ReTableOperate/src/index.vue` |
+| **设计规范** | list-page.md §5.3 「更多」按钮：唯一例外，必须有下拉箭头 |
+| **修改内容** | 1. 「更多」按钮必须带 10px 下拉箭头图标（SVG 或 iconfont）<br>2. 下拉菜单挂载到 body，`position: fixed`，`z-index: 9999`<br>3. 下拉菜单项：左侧可选图标 + 文字，hover 背景 `--el-fill-color-light`<br>4. 危险操作项文字颜色 `--error-color` |
+| **验证** | 「更多」按钮有下拉箭头，下拉菜单样式正确 |
+
+### Co.7 ReTableOperate — 折叠阈值与列宽计算
+
+| 项 | 说明 |
+|----|------|
+| **文件** | `src/components/ReTableOperate/src/index.vue` |
+| **设计规范** | list-page.md §5.1 操作列布局：≥3 个操作折叠为「更多」 |
+| **修改内容** | 1. `limit` prop 默认值：3（可见按钮总数阈值，含「更多」槽位）<br>2. ≤ limit：全部文字按钮平铺<br>3. > limit：前 `limit - 1` 个平铺，其余进「更多」下拉<br>4. 列宽通过 `resolveOperateColumnWidth` 动态计算，**禁止写死 `width="200px"`** |
+| **验证** | 操作列折叠逻辑正确，列宽自适应 |
+
+### Co.8 RePagination — 分页组件样式
+
+| 项 | 说明 |
+|----|------|
+| **文件** | `src/components/RePagination/` |
+| **设计规范** | list-page.md §7 分页 + component-spec.md §5 Pagination |
+| **修改内容** | 1. 分页布局：左右两段式（左侧总数 + 每页条数选择；右侧页码 + 跳转）<br>2. 默认每页条数：10<br>3. 可选条数：10/20/50<br>4. 跳转输入框宽度 48px<br>5. 激活页按钮：品牌色背景 + 白色文字 |
+| **验证** | 分页样式与设计规范一致 |
+
+### Co.9 侧栏菜单激活态 — 实色底修正
+
+| 项 | 说明 |
+|----|------|
+| **文件** | `src/styles/sidebar.scss` |
+| **设计规范** | unified-framework.md §2 Sider：激活项为实色品牌底 + 左侧 3px 指示条 + 白色文字 |
+| **修改内容** | 1. 激活态背景：`var(--sidebar-menu-active-bg, var(--brand-primary))`（实色，非 8% 透明）<br>2. 左侧指示条：`::before` 伪元素，width 3px，height 100%，背景 `var(--sidebar-active-indicator, var(--brand-primary))`<br>3. 激活态文字颜色：`var(--sidebar-menu-active-text, #fff)`（白色）<br>4. 确保 `--sidebar-menu-active-bg` 令牌值为实色，而非 `color-mix(... 8%, transparent)` |
+| **验证** | 侧栏激活菜单项为实色品牌底 + 左侧 3px 指示条 + 白色文字 |
+
+> ⚠️ 注意：当前模板 `sidebar.scss` 中激活态背景是 `color-mix(in srgb, var(--brand-primary) 8%, transparent)`，这与设计规范的「实色底」不符。Co9 步骤必须将其修正为实色。
+
+### Co.10 navbar — 折叠按钮垂直居中
+
+| 项 | 说明 |
+|----|------|
+| **文件** | `src/layout/components/lay-navbar/index.vue` |
+| **设计规范** | unified-framework.md §3 Header：折叠按钮在顶栏左侧，垂直居中 |
+| **修改内容** | 1. 折叠按钮容器：`display: flex; align-items: center; height: 100%;`<br>2. 按钮自身尺寸：40×40px<br>3. 确保按钮在 `--header-height`（54px）高度内垂直居中<br>4. 按钮与侧栏 Logo 区顶部对齐 |
+| **验证** | 折叠按钮在顶栏中垂直居中，位置与设计一致 |
+
+### Co.11 navbar — 设置按钮隐藏
+
+| 项 | 说明 |
+|----|------|
+| **文件** | `src/layout/components/lay-navbar/index.vue` |
+| **设计规范** | unified-framework.md §3 Header + 元素自查隐藏清单：设计中无设置按钮 |
+| **修改内容** | 1. 设置按钮（`.set-icon`）添加 `v-if="false"` 或从模板中删除<br>2. 相邻的分隔线也一并删除<br>3. 确保顶栏右侧元素顺序为：语言切换 → 全屏 → 用户欢迎区 |
+| **验证** | 顶栏右侧无设置按钮 |
+
+### Co.12 内容区模块分割线间距
+
+| 项 | 说明 |
+|----|------|
+| **文件** | `src/styles/element-plus.scss` + 列表页布局 |
+| **设计规范** | list-page.md §2 单卡片架构：段间用 1px 分割线，各区域 padding 精确 |
+| **修改内容** | 1. 卡片内各模块（标题区/筛选区/工具栏/表格区/分页区）之间用 1px `--border-color-secondary`（#F0F0F0）分割线分隔<br>2. 各区域 padding 严格按设计 spec：<br>   - 页面标题区：20px<br>   - 筛选区：20px（上下左右）<br>   - 工具栏：20px 20px 8px（上/左右/下）<br>   - 表格区：0 20px（上下/左右）<br>   - 分页区：8px 20px 20px（上/左右/下）<br>3. 分割线位于两个区域的交界处，不占用区域内 padding |
+| **验证** | 各模块分割线位置、间距与设计规范一致 |
+
+---
+
 ## 四、元素自查隐藏清单（设计没有 → 必删）
 
 > 设计输出（JSON `structureRequirements` 或设计稿图）中没有的元素，必须隐藏或移除。
@@ -204,7 +377,28 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
 | 序号列 | 表格第一列 | 不显示 | 设计无则不加 |
 | 展开行按钮 | 表格行首 | 不显示 | 设计无则不加 |
 
-### 4.4 移除后告知格式
+### 4.4 共享组件 & 页面级常见多余元素
+
+> 以下是模板页面中常见的多余元素，设计规范中均不存在，**必须逐项检查并移除**。
+> 不仅是隐藏 `display:none`，而是**从模板中删除**。
+
+| 元素 | 所在位置 | 出现场景 | 处理方式 |
+|------|---------|---------|---------|
+| 「展示列表」标题文字 | 列表页 `#title` slot 或 ReTableBar title prop | 所有列表页（base/tree/vxe-table） | 从页面模板中删除 |
+| 「左侧按钮可以增加多个」按钮 | 列表页 `#title` slot 内 | 列表页示例代码 | 从页面模板中删除 |
+| 「增加一行可编辑数据」按钮 | 列表页 `#title` slot 内 | base/tree 表格页 | 从页面模板中删除 |
+| 「表单提交」按钮 | 列表页 `#title` slot 内 | base/tree 表格页 | 从页面模板中删除 |
+| 「右侧按钮可以增加多个」按钮 | 列表页工具栏右侧 slot | 部分列表页 | 从页面模板中删除 |
+| 工具栏「展示列表」label | ReTableBar 左侧 title 区域 | 所有使用 ReTableBar 的页面 | 从组件默认模板或页面 slot 中删除 |
+| 操作列图标 | ReTableOperate 按钮上 | 所有使用 ReTableOperate 的页面 | 移除按钮 icon，仅保留文字 |
+| 「更多」按钮无下拉箭头 | ReTableOperate 「更多」按钮 | 所有使用 ReTableOperate 的页面 | 添加 10px 下拉箭头图标 |
+| 顶栏设置按钮 | lay-navbar `.set-icon` | 全局 | `v-if="false"` 或删除 |
+| 顶栏设置按钮旁分隔线 | lay-navbar `.navbar-divider` | 全局 | 随设置按钮一并删除 |
+| 侧栏底部折叠按钮 | lay-sidebar 底部 | 全局 | 隐藏，折叠功能移至顶部 |
+| 菜单 hover 折叠提示 | sidebar 菜单 hover | 全局 | 禁用该功能 |
+| 页签栏「首页」可关闭 | lay-tag 首页页签 | 全局 | 设为不可关闭 |
+
+### 4.5 移除后告知格式
 
 隐藏/移除以上功能性元素时，在最终回复中追加：
 
@@ -292,12 +486,27 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
 
 ## 七、执行顺序
 
+### 单页模式
+
 1. **配置修改**（C1-C8）→ `platform-config.json`
 2. **令牌写入**（T1-T12）→ `design-tokens.scss`
 3. **框架组件修改**（F1-F27）→ navbar / sidebar / tabs / app-main
-4. **元素自查隐藏**（第四章清单）→ 逐项对照，设计无则删
-5. **样式修改**（S1 区域映射）→ `element-plus.scss` + `dark.scss`
-6. **页面代码生成**（P1-P7）→ 业务页面 .vue
+4. **共享组件修改**（Co1-Co12）→ ReTableBar / ReTableOperate / RePagination 等
+5. **元素自查隐藏**（第四章清单）→ 逐项对照，设计无则删
+6. **样式修改**（S1 区域映射）→ `element-plus.scss` + `dark.scss`
+7. **页面代码生成**（P1-P7）→ 业务页面 .vue
+
+### 项目级模式
+
+0. **页面清单初始化**（Step 0）→ 扫描路由 → 构建页面清单 → 输出待改造清单
+1. **配置修改**（C1-C8）→ `platform-config.json`（全局一次）
+2. **令牌写入**（T1-T12）→ `design-tokens.scss`（全局一次）
+3. **框架组件修改**（F1-F27）→ navbar / sidebar / tabs / app-main（全局一次）
+4. **共享组件修改**（Co1-Co12）→ ReTableBar / ReTableOperate / RePagination 等（全局一次）
+5. **元素自查隐藏**（第四章清单）→ 逐项对照，设计无则删（全局一次）
+6. **样式修改**（S1 区域映射）→ `element-plus.scss` + `dark.scss`（全局一次）
+7. **全页面遍历**（Step 6）→ 按页面清单逐页执行 P1-P7，标记完成状态
+8. **完成性校验**（Step 7）→ 全页面 + 共享组件 + 元素隐藏 全量校验
 
 ---
 
@@ -329,6 +538,20 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
 | 页面 | 操作列按钮样式混乱（混用 button/文字链接） | 硬失败：统一为文字链接 + "更多"下拉 |
 | 页面 | 设计中未体现的元素未隐藏 | 硬失败：按元素自查隐藏清单逐项处理 |
 | 页面 | `structureRequirements` 或 `interactionSpecs` 段未实现 | 硬失败：按 F1-F27 / P1-P7 补充 |
+| 共享组件 | ReTableBar 工具栏按钮样式与设计规范不一致（刷新/密度/列设置尺寸、间距、分隔线） | 硬失败：按 Co2 修正 |
+| 共享组件 | ReTableOperate 操作列按钮有图标（设计规范为纯文字链接） | 硬失败：按 Co5 移除图标，添加竖分隔线 |
+| 共享组件 | 「更多」按钮无下拉箭头（设计规范必须有） | 硬失败：按 Co6 添加下拉箭头 |
+| 共享组件 | 侧栏菜单激活态为 8% 透明底（设计规范为实色底） | 硬失败：按 Co9 修正为实色底 |
+| 共享组件 | 顶栏设置按钮设计无但代码中还在 | 硬失败：按 Co11 删除或 `v-if="false"` |
+| 共享组件 | 折叠按钮未垂直居中 | 硬失败：按 Co10 修正 |
+| 共享组件 | 模块分割线间距与设计规范不一致 | 硬失败：按 Co12 修正各区域 padding 和分割线位置 |
+| 页面清理 | 列表页仍有「展示列表」等多余标题文字 | 硬失败：按 4.4 清单从模板中删除 |
+| 页面清理 | 列表页仍有「左侧按钮可以增加多个」等示例按钮 | 硬失败：按 4.4 清单从模板中删除 |
+| 项目级 | 项目级模式下未扫描全部路由即开始改造 | 硬失败：先完成 Step 0 页面清单初始化 |
+| 项目级 | 项目级模式下未完成全部页面即声称完成 | 硬失败：必须告知进度和剩余页面 |
+| 项目级 | 项目级模式下共享组件未按 Co 步骤修改 | 硬失败：按 Co1-Co12 逐一修正 |
+| 设计落地 | 设计落地过程中修改了 `docs/**` 下的任何文件 | 硬失败：立即撤销，docs 为只读目录，设计修改只落在 src/ 等业务代码 |
+| 功能回归 | 样式改造后原有功能被破坏（按钮不能点、分页不工作、搜索失效等） | 硬失败：样式归样式功能归功能，改样式不得破坏原有功能，必须修复后重新验证 |
 
 ---
 
@@ -366,6 +589,20 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
 - [ ] `element-plus.scss` 视觉规则按 S1 区域映射表逐项写入，值来自 JSON `visual` / `interactionSpecs`
 - [ ] `dark.scss` 对以上视觉规则有暗色覆盖
 
+### 共享组件层
+
+- [ ] ReTableBar 工具栏按钮样式符合设计规范（刷新/密度/列设置：icon 16px、按钮 32px、分隔线 1px）
+- [ ] ReTableBar 工具栏左右布局正确（左批量操作、右工具按钮）
+- [ ] ReTableBar 标题区：设计模式下无多余标题文字
+- [ ] ReTableOperate 操作列：纯文字链接，无图标，按钮间有 1px×14px 竖分隔线
+- [ ] ReTableOperate「更多」按钮：带 10px 下拉箭头，下拉菜单样式正确
+- [ ] ReTableOperate 折叠阈值：limit 默认 3，列宽动态计算
+- [ ] RePagination 分页样式符合设计规范（两段式布局、可选条数、跳转输入框）
+- [ ] 侧栏菜单激活态：实色品牌底 + 左侧 3px 指示条 + 白色文字（非 8% 透明底）
+- [ ] 顶栏折叠按钮：垂直居中，40×40px
+- [ ] 顶栏设置按钮：已隐藏/删除
+- [ ] 内容区模块分割线：各区域间距与设计规范一致（标题 20px / 筛选 20px / 工具栏 20px 8px / 表格 0 20px / 分页 8px 20px 20px）
+
 ### 页面层
 
 - [ ] 业务页面区域结构与 JSON `pageStructure.regions` 一致
@@ -375,3 +612,328 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
 - [ ] 页面内交互行为按 `interactionSpecs` 实现
 - [ ] 所有样式值引用 CSS 变量，无裸值
 - [ ] **未用出厂 CRUD 样板结构覆盖设计输出的页面结构**
+- [ ] 页面无「展示列表」等多余标题文字
+- [ ] 页面无「左侧按钮可以增加多个」等示例按钮
+- [ ] 操作列统一为文字链接 + "更多"下拉（ReTableOperate）
+
+### 项目级完成性校验（仅 transformScope=project 时执行）
+
+- [ ] 已扫描全部路由模块（`src/router/modules/`），页面清单完整
+- [ ] 所有列表页均已按设计规范改造（base/tree/vxe-table 等）
+- [ ] 所有表单页均已按设计规范改造
+- [ ] 所有详情页均已按设计规范改造
+- [ ] 工作台/仪表盘等其他页面均已按设计规范改造
+- [ ] 共享组件（ReTableBar/ReTableOperate/RePagination）已全局修改
+- [ ] 框架组件（navbar/sidebar/tabs/app-main）已全局修改
+- [ ] 元素隐藏清单（第四章 4.1-4.4）已逐项检查并处理
+- [ ] 无遗漏页面（对照路由清单逐一核对）
+- [ ] 所有页面的多余元素（「展示列表」「左侧按钮...」等）均已清除
+
+---
+
+## 十、设计还原度验证（代码生成后必须执行）
+
+> 以上校验是「结构有没有」的检查。本章是「效果对不对」的验证——拿着设计规范/设计稿，逐区域逐元素对照检查。
+> **本验证必须在 code-quality 闸门之前执行，未通过项必须修正后才能进入 lint/type-check。**
+
+### 10.1 验证原则
+
+1. **对照设计规范，不凭感觉**：每一项都有对应的设计规范来源（unified-framework.md / list-page.md / component-spec.md / design-tokens.md），禁止「大概差不多」
+2. **逐区域对照**：从外到内——框架 → 页面区域 → 组件 → 细节元素，逐层验证
+3. **设计为准**：凡是设计规范有明确定义的，以设计为准，覆盖模板默认值
+4. **令牌为桥**：所有颜色/尺寸/间距都通过 CSS 变量令牌传递，验证时检查「令牌值是否正确」+「组件是否引用了正确的令牌」
+
+### 10.2 框架层还原度验证（6 类）
+
+| 验证项 | 设计规范来源 | 验证方法 | 预期结果 |
+|--------|-------------|---------|---------|
+| 顶栏高度 | unified-framework.md §3 | 检查 `--header-height` 令牌值 + navbar 实际高度 | 54px |
+| 顶栏元素组成 | unified-framework.md §3 + F1-F9 | 对照设计稿/设计 spec，逐个元素检查存在性和顺序 | 左：折叠按钮；右：语言/全屏/用户（无设置/通知/搜索/面包屑） |
+| 折叠按钮位置 | unified-framework.md §3 | 检查折叠按钮是否垂直居中，尺寸是否 40×40px | 垂直居中，40×40px |
+| 侧栏宽度 | unified-framework.md §2 | 检查 `--sidebar-width` / `--sidebar-collapsed-width` | 展开 208px / 折叠 64px |
+| 侧栏背景色 | unified-framework.md §2 | 检查侧栏背景色令牌值 | 深色 #001529 |
+| 侧栏激活态 | unified-framework.md §2 + list-page.md §12 | 检查激活菜单项的背景、文字、指示条 | 实色品牌底 + 白色文字 + 左侧 3px 指示条 |
+| 页签高度 | unified-framework.md §4 | 检查 `--tabs-height` + tabs 实际高度 | 40px |
+| 页签激活态 | unified-framework.md §4 + component-spec.md §5 | line 模式下检查激活页签样式 | 文字品牌色 + font-weight 500 + 底部 2px 强调线，无背景变化 |
+| 内容区背景色 | unified-framework.md §5 | 检查内容区背景色 | #F5F5F5（灰底） |
+| 内容区内边距 | unified-framework.md §5 | 检查 `--layout-content-padding` | 24px |
+
+### 10.3 列表页还原度验证（8 区域）
+
+> 以列表页为例，其他页面类型参照对应设计规范文件执行。
+> 按页面区域从上到下逐一验证。
+
+| 区域 | 验证项 | 设计规范来源 | 预期结果 |
+|------|--------|-------------|---------|
+| **卡片整体** | 阴影、圆角、边框 | list-page.md §2 | shadow + 8px 圆角 + 无边框 |
+| **页面标题区** | 标题字号/字重、描述文字、操作按钮、padding | list-page.md §3 + design-tokens.md §26 | 标题 20px/600、描述 13px/三级文字、右操作按钮、padding 20px |
+| **筛选区** | 背景、圆角、底部分隔线、内边距 | list-page.md §3 + §12 | 白底、6px 圆角、底部 1px #F0F0F0 分隔线、padding 20px |
+| **筛选区控件** | 输入框高度、圆角、focus 效果 | component-spec.md §1 | 高度 32px、圆角 6px、focus 有品牌色光环 |
+| **工具栏** | 左右布局、批量操作按钮、工具按钮（刷新/密度/列设置） | list-page.md §4 | 左批量操作、右工具按钮；3 个工具按钮都存在；按钮间 1px 竖分隔线 |
+| **工具栏细节** | 刷新图标大小、密度选项、列设置面板宽度 | list-page.md §4 + §12 | icon 16px；3 档密度（宽松/默认/紧凑）；列设置面板 200px |
+| **表格表头** | 高度、背景色、文字色、字重、底部分隔线 | list-page.md §6 + §12 | 高度 48px、浅灰底、文字 600、底部 1px #F0F0F0 |
+| **表格行** | 行高、hover 效果、边框 | list-page.md §6 + §12 | 默认 47px（middle）；hover 品牌色极浅底；行间 1px 分隔线 |
+| **操作列** | 按钮样式、分隔线、更多按钮、sticky | list-page.md §5 + component-spec.md §7 | 纯文字链接、无图标、1px×14px 竖分隔线、更多按钮有箭头、sticky 右侧 |
+| **分页区** | 布局、默认条数、可选条数、跳转框 | list-page.md §7 | 左右两段式、默认 10 条/页、可选 10/20/50、跳转框 48px |
+| **模块分割线** | 各区域之间的分割线位置和颜色 | list-page.md §2 + §12 | 区域交界处 1px #F0F0F0 分割线 |
+| **模块间距** | 各区域 padding 值 | list-page.md §2 + design-tokens.md §26 | 标题 20px / 筛选 20px / 工具栏 20px 8px / 表格 0 20px / 分页 8px 20px 20px |
+
+### 10.4 组件级还原度验证（核心组件）
+
+| 组件 | 验证项 | 设计规范来源 | 预期结果 |
+|------|--------|-------------|---------|
+| **按钮** | 高度、圆角、主色按钮颜色/hover/active | component-spec.md §2 | 高度 32px、圆角 6px、主色 #245BFF、hover #407BFF、active #1546E0 |
+| **输入框** | 高度、圆角、focus 光环 | component-spec.md §1 | 高度 32px、圆角 6px、focus 外阴影 0 0 0 2px #E8F0FF |
+| **Tag/标签** | 样式、5 种状态色 | component-spec.md §3 | 按列分配 filled/outlined/solid 样式；成功/警告/错误/信息/默认色正确 |
+| **下拉菜单** | 菜单项高度、hover 效果 | component-spec.md §8 | 菜单项 32px、hover 品牌色极浅底 |
+| **分页** | 激活态样式、按钮尺寸 | component-spec.md §5 | 激活页品牌色底+白字；按钮 32px |
+| **空状态** | padding、图标大小、文字大小 | component-spec.md §4 | padding 48px 0、图标 64px、标题 16px、描述 14px |
+
+### 10.5 细节还原度验证（容易遗漏的精细节）
+
+> 以下是最容易被忽略、但严重影响还原度的细节项。**必须逐项检查。**
+
+| # | 验证项 | 常见问题 | 设计规范依据 |
+|---|--------|---------|-------------|
+| 1 | 图标大小是否统一 16px | 工具栏图标大小不一致（有的 14px、有的 20px） | list-page.md §12 工具栏按钮 |
+| 2 | 分隔线颜色是否为 #F0F0F0 | 用了 #D9D9D9 或更深的颜色 | design-tokens.md §7 / list-page.md §12 |
+| 3 | hover 状态的文字是否加深 | hover 文字变浅或变透明（违反硬约束） | design-handoff.md §5.2 硬约束 |
+| 4 | 行高是否与设计一致 | 表格行太高或太矮 | list-page.md §6 三档密度 |
+| 5 | 字重是否正确 | 标题/表头字重不够 | design-tokens.md §9 字体令牌 |
+| 6 | 圆角是否统一 | 有的 4px 有的 8px | design-tokens.md §11 圆角令牌 |
+| 7 | 阴影是否自然 | 阴影太重或太轻 | design-tokens.md §12 阴影令牌 |
+| 8 | 过渡动画时长是否一致 | 有的 0.3s 有的 0.2s | design-tokens.md §20 动画令牌 |
+| 9 | 「更多」按钮是否有下拉箭头 | 「更多」只有文字没有箭头 | list-page.md §5.3 |
+| 10 | 操作列按钮间是否有竖分隔线 | 按钮之间只有间距没有分隔线 | list-page.md §5.1 |
+| 11 | 页签下划线是否与文字等宽居中 | 下划线偏左/偏右或太宽/太窄 | unified-framework.md §4 |
+| 12 | 表格操作列是否 sticky 右侧 | 操作列随横向滚动消失 | list-page.md §5.4 |
+| 13 | 表格左侧选择列宽度是否 48px | 选择列太宽或太窄 | list-page.md §6.1 |
+| 14 | 状态标签颜色是否正确对应状态 | 成功用了蓝色、警告用了红色 | component-spec.md §3 Tag 规范 |
+| 15 | 内容区卡片是否有阴影 | 卡片只有边框没有阴影 | list-page.md §2 单卡片架构 |
+
+### 10.6 验证方法
+
+AI 在执行设计还原度验证时，按以下步骤操作：
+
+1. **打开设计规范参考文件**：根据页面类型，加载对应的设计规范文件（列表页→list-page.md，表单页→component-spec.md 等）
+2. **逐区域对照**：按 10.2/10.3/10.4/10.5 的顺序，逐项检查代码实现与设计规范是否一致
+3. **令牌溯源**：对于颜色/尺寸/间距，检查是否通过 CSS 变量传递，变量值是否与 design-tokens.md 一致
+4. **记录偏差**：发现不一致的地方，记录「实际值 → 期望值 → 偏差原因」
+5. **修正后重新验证**：修正所有偏差项后，重新走一遍验证流程，确认全部通过
+6. **输出验证报告**：在最终回复中附加「设计还原度验证报告」（格式见下）
+
+### 10.7 设计还原度验证报告（输出格式）
+
+代码生成 + 验证完成后，最终回复中必须包含以下格式的验证报告：
+
+```markdown
+## 设计还原度验证报告
+
+### 整体评估
+- 还原度：XX%（通过项 / 总项数）
+- 硬失败项：0 项（如有，列出）
+- 偏差项：X 项（已修正 / 待确认）
+
+### 框架层（X/Y 通过）
+- [x] 顶栏：高度 54px、元素组成正确、折叠按钮居中
+- [x] 侧栏：宽度 208px、深色背景、激活态实色底+指示条
+- [x] 页签：高度 40px、line 模式、激活态文字变色+下划线
+- [x] 内容区：灰底 #F5F5F5、padding 24px
+- [ ] （未通过项列出，说明原因和修正方案）
+
+### 页面层（X/Y 通过）
+- [x] 页面标题区：标题+描述+操作按钮、padding 20px
+- [x] 筛选区：白底+圆角+底部分隔线、padding 20px
+- [x] 工具栏：左右布局、3 个工具按钮齐全、分隔线正确
+- [x] 表格：表头 48px、行高正确、hover 效果正确
+- [x] 操作列：纯文字链接+竖分隔线+更多箭头、sticky 右侧
+- [x] 分页：两段式布局、默认 10 条/页
+- [x] 模块分割线：位置正确、颜色 #F0F0F0
+- [x] 模块间距：各区域 padding 与设计一致
+
+### 共享组件层（X/Y 通过）
+- [x] ReTableBar：工具栏按钮样式/布局/间距正确
+- [x] ReTableOperate：文字链接/分隔线/更多箭头/折叠逻辑正确
+- [x] RePagination：样式与设计规范一致
+
+### 细节项（X/Y 通过）
+- [x] 图标大小统一 16px
+- [x] 分隔线颜色 #F0F0F0
+- [x] hover 文字加深不变浅
+- [x] 圆角统一 6px（按钮/输入框）
+- [x] 「更多」按钮有下拉箭头
+- [ ] （未通过项列出）
+
+### 元素清理
+- [x] 顶栏设置按钮已移除
+- [x] 「展示列表」标题已清除
+- [x] 「左侧按钮可以增加多个」等示例按钮已清除
+- [x] 操作列多余图标已移除
+```
+
+---
+
+## 十一、功能完整性核查（样式改造后必须验证）
+
+> ⚠️ **硬约束：样式改造绝对不能破坏原有功能。** 改样式只改视觉表现，不改业务逻辑、不改组件 prop、不删事件绑定。
+> 设计还原度验证通过 ≠ 任务完成，必须再过一遍功能完整性核查，确认页面功能一切正常。
+
+### 11.1 核查原则
+
+1. **样式归样式，功能归功能**：改样式只动 `<style>` 和与样式相关的 class / 内联样式 / CSS 变量。**不得**因为改样式而改动组件的 prop、事件绑定、v-if/v-show 逻辑、数据结构
+2. **原有功能必须全部保留**：改造前页面有什么功能（搜索、刷新、分页、排序、操作按钮等），改造后必须还在，且能正常工作
+3. **结构改动要慎重**：如果因为布局需要调整 DOM 结构，必须确保不影响事件冒泡、插槽分发、ref 引用等
+4. **先功能后样式**：发现样式和功能冲突时，优先保证功能正常，再想办法在不破坏功能的前提下调整样式
+5. **共享组件改造影响全局**：修改 ReTableBar / ReTableOperate 等共享组件后，必须确认所有使用该组件的页面功能不受影响
+
+### 11.2 框架层功能核查
+
+| 模块 | 核查项 | 常见风险 | 核查方法 |
+|------|--------|---------|---------|
+| **顶栏** | 折叠按钮点击可展开/收起侧栏 | 改折叠按钮样式时不小心删了 click 事件 | 检查 `@click` 事件是否存在，对应方法是否正确 |
+| **顶栏** | 语言切换正常 | 调整顶栏元素顺序时不小心删了语言切换组件 | 检查语言切换组件是否在模板中，事件绑定是否正确 |
+| **顶栏** | 全屏按钮正常 | 同上 | 检查全屏按钮组件和事件 |
+| **顶栏** | 用户下拉菜单正常 | 同上 | 检查用户欢迎区和下拉菜单 |
+| **侧栏** | 菜单点击可切换路由 | 改激活态样式时不小心覆盖了菜单的点击逻辑 | 检查 `el-menu` 的 `@select` 事件，菜单项 `index` 是否正确 |
+| **侧栏** | 折叠后侧栏宽度变化，菜单项变为图标模式 | 改侧栏宽度时影响了折叠逻辑 | 检查 `collapse` 属性绑定是否正常 |
+| **页签栏** | 点击页签可切换 | 改页签样式时影响了激活态逻辑 | 检查 tab 点击事件，`activeTab` 是否正常更新 |
+| **页签栏** | 关闭页签正常 | 同上 | 检查关闭按钮的事件绑定 |
+| **页签栏** | 右键菜单正常（如果有） | 改样式时不小心删了右键菜单逻辑 | 检查 `@contextmenu` 事件 |
+| **面包屑** | 面包屑显示正确、可点击 | 调整顶栏元素时删了面包屑组件 | 检查面包屑组件和路由联动 |
+
+### 11.3 共享组件功能核查
+
+> 共享组件的改动影响所有使用它的页面，**必须重点核查**。
+
+| 组件 | 核查项 | 常见风险 | 核查方法 |
+|------|--------|---------|---------|
+| **ReTableBar** | 刷新按钮点击触发刷新 | 改刷新按钮样式时删了 `@click` 事件 | 检查刷新按钮的 `@click` 绑定，对应 emit 事件是否正常 |
+| **ReTableBar** | 密度切换正常（三档切换后表格行高变化） | 改密度按钮样式时改了 dropdown 的 option 值或事件 | 检查密度下拉的 `v-model` 绑定和 `@change` 事件 |
+| **ReTableBar** | 列设置弹出正常，可勾选列显示/隐藏 | 改列设置按钮样式时影响了 popover 触发 | 检查列设置的 popover/dialog 组件，v-model 绑定是否正确 |
+| **ReTableBar** | 搜索框输入正常（如果有） | 改工具栏布局时删了搜索组件 | 检查搜索框的 `v-model` 和 `@search` 事件 |
+| **ReTableBar** | 左侧批量操作按钮点击正常 | 改工具栏布局时影响了左侧 slot | 检查左侧 slot 是否正确传递，按钮事件是否正常 |
+| **ReTableBar** | 分页组件正常（翻页、每页条数、跳转） | 改分页集成时破坏了分页逻辑 | 检查 `currentPage` / `pageSize` 绑定，分页事件 emit |
+| **ReTableOperate** | 操作按钮点击触发对应事件 | 改操作列按钮样式时删了 `@click` 或 `@on-*` 事件 | 检查每个操作按钮的事件绑定，emit 是否正常 |
+| **ReTableOperate** | 「更多」下拉展开正常 | 改更多按钮样式时影响了 dropdown 触发 | 检查 dropdown 的 `v-model` 或 `trigger` 属性 |
+| **ReTableOperate** | 「更多」菜单项点击正常 | 改下拉菜单样式时影响了菜单项的事件 | 检查下拉菜单项的 `@click` 事件 |
+| **ReTableOperate** | 折叠逻辑正常（操作多时自动折叠） | 改折叠阈值 limit 时影响了计算逻辑 | 检查 `visibleBtns` 计算属性，`limit` prop 是否正常 |
+| **RePagination** | 页码切换正常 | 改分页样式时破坏了页码点击逻辑 | 检查 `current-change` 事件 |
+| **RePagination** | 每页条数切换正常 | 同上 | 检查 `size-change` 事件 |
+| **RePagination** | 跳转输入正常 | 同上 | 检查跳转输入框的 `@keyup.enter` 事件 |
+
+### 11.4 列表页功能核查
+
+| 区域 | 核查项 | 常见风险 | 核查方法 |
+|------|--------|---------|---------|
+| **筛选区** | 输入框输入正常 | 改筛选区样式时破坏了 v-model | 检查每个输入框的 `v-model` 绑定 |
+| **筛选区** | 下拉选择正常 | 同上 | 检查 select/el-select 的 v-model 和 options |
+| **筛选区** | 搜索/查询按钮点击触发查询 | 改按钮样式时删了 click 事件 | 检查查询按钮的 `@click`，确认调用 `onSearch` |
+| **筛选区** | 重置按钮点击重置表单 | 同上 | 检查重置按钮的 `@click`，确认调用 `reset` |
+| **筛选区** | 展开/收起筛选条件正常 | 改筛选区布局时影响了展开收起逻辑 | 检查 `showFilter` 状态和展开收起按钮 |
+| **表格** | 数据正常渲染 | 改表格结构时破坏了列定义或数据绑定 | 检查 `el-table` 的 `data` 属性，列的 `prop` 是否正确 |
+| **表格** | 行选择（复选框）正常 | 改选择列宽度或样式时影响了选择功能 | 检查 `el-table-column type="selection"`，`@selection-change` 事件 |
+| **表格** | 排序正常 | 改表头样式时影响了排序功能 | 检查 `sortable` 属性，`@sort-change` 事件 |
+| **表格** | 分页翻页数据刷新 | 改分页样式时破坏了分页联动 | 检查分页 change 事件是否触发数据请求 |
+| **表格** | 操作列按钮点击正常 | 改操作列样式时影响了按钮事件 | 检查操作列每个按钮的事件绑定 |
+| **表格** | 横向滚动正常 | 改表格宽度或列宽时影响了滚动 | 检查表格是否设置了固定宽度或列宽总和 |
+| **表格** | 空状态显示正常 | 改表格样式时空状态组件被覆盖或隐藏 | 检查空状态 slot 或 empty-text |
+
+### 11.5 表单页功能核查（表单页改造时执行）
+
+| 区域 | 核查项 | 常见风险 | 核查方法 |
+|------|--------|---------|---------|
+| **表单项** | 每个输入控件可正常输入/选择 | 改表单项样式时破坏了 v-model | 逐一检查每个 form-item 的 v-model 绑定 |
+| **表单项** | 表单验证正常（必填、格式、自定义） | 改样式时删了 rules 或 prop | 检查 `el-form` 的 `rules`，每个 `el-form-item` 的 `prop` |
+| **操作按钮** | 提交按钮点击提交表单 | 改按钮样式时删了 click 事件 | 检查提交按钮的 `@click`，确认调用提交方法 |
+| **操作按钮** | 重置/返回按钮正常 | 同上 | 检查对应按钮的事件绑定 |
+| **联动逻辑** | 表单项之间的联动（如选了A才显示B） | 改布局时影响了 v-if 条件 | 检查联动项的 v-if/v-show 逻辑 |
+
+### 11.6 核查方法和流程
+
+```
+样式改造完成
+   ↓
+【设计还原度验证】（第十章）
+   ↓ 通过
+【功能完整性核查】（本章）
+   ├─ 1. 框架层功能核查（顶栏/侧栏/页签）
+   ├─ 2. 共享组件功能核查（ReTableBar/ReTableOperate/RePagination）
+   ├─ 3. 页面级功能核查（列表/表单/详情，按页面类型选）
+   ├─ 4. 发现问题 → 修正 → 重新走还原度 + 功能核查
+   └─ 5. 全部通过 → 进入 code-quality 闸门
+```
+
+**具体操作步骤**：
+
+1. **梳理原有功能清单**：改造前先列出页面/组件有哪些功能点（搜索、刷新、分页、操作按钮等），作为核查基线
+2. **改造中保持警觉**：改动 DOM 结构、组件 prop、事件绑定时，停下来确认是否会影响功能
+3. **改造后逐项核查**：按 11.2-11.5 的清单，逐一检查功能是否正常
+4. **问题修正**：发现功能问题立即修正，修正后重新验证样式还原度 + 功能完整性
+5. **输出核查报告**：在最终回复中附加「功能完整性核查报告」（格式见下）
+
+### 11.7 功能完整性核查报告（输出格式）
+
+```markdown
+## 功能完整性核查报告
+
+### 整体评估
+- 功能核查：X/Y 项通过
+- 功能回归问题：0 项（如有，列出并说明修正方案）
+- 结论：✅ 功能正常 / ⚠️ 有 N 项待修复
+
+### 框架层（X/Y 通过）
+- [x] 折叠按钮：点击可展开/收起侧栏
+- [x] 语言切换：正常
+- [x] 全屏按钮：正常
+- [x] 用户菜单：下拉正常
+- [x] 菜单点击：路由切换正常
+- [x] 侧栏折叠：宽度变化正常
+- [x] 页签切换：点击切换正常
+- [x] 页签关闭：关闭功能正常
+
+### 共享组件层（X/Y 通过）
+- [x] ReTableBar - 刷新按钮：点击触发刷新
+- [x] ReTableBar - 密度切换：三档切换正常，行高变化
+- [x] ReTableBar - 列设置：弹出正常，可勾选显示/隐藏
+- [x] ReTableBar - 搜索框：输入和搜索正常（如有）
+- [x] ReTableBar - 批量操作：左侧按钮点击正常
+- [x] ReTableBar - 分页：翻页/条数/跳转正常
+- [x] ReTableOperate - 操作按钮：每个按钮点击触发对应事件
+- [x] ReTableOperate - 更多下拉：展开/收起正常
+- [x] ReTableOperate - 更多菜单项：点击正常
+- [x] ReTableOperate - 折叠逻辑：操作多时自动折叠
+
+### 页面层（X/Y 通过）
+- [x] 筛选区：输入/选择正常
+- [x] 筛选区：搜索/重置按钮点击正常
+- [x] 筛选区：展开/收起正常（如有）
+- [x] 表格：数据正常渲染
+- [x] 表格：行选择正常
+- [x] 表格：排序正常（如有）
+- [x] 表格：分页翻页数据刷新
+- [x] 表格：操作列按钮点击正常
+- [x] 表格：横向滚动正常
+- [x] 表格：空状态显示正常
+
+### 发现的问题与修正
+（如无则写「无功能回归问题」）
+1. 问题描述 → 原因 → 修正方案 → 是否已修正
+```
+
+---
+
+### 执行顺序（最终版）
+
+1. **配置修改**（C1-C8）
+2. **令牌写入**（T1-T12）
+3. **框架组件修改**（F1-F27）
+4. **共享组件修改**（Co1-Co12）
+5. **元素自查隐藏**（第四章）
+6. **样式修改**（S1）
+7. **页面代码生成**（P1-P7）
+8. **设计还原度验证**（第十章）—— 检查效果对不对
+9. **功能完整性核查**（第十一章）—— 检查功能坏没坏
+10. **code-quality 闸门**
+11. **输出报告**（设计还原度验证报告 + 功能完整性核查报告）
+
+> ⚠️ **两条腿走路**：样式还原度和功能完整性缺一不可。只改对样式但功能坏了 = 失败；功能正常但样式不对 = 也失败。必须两者都通过才算完成。