@agile-team/wl-skills-ui 1.6.2

package/templates/list-page/TPL-LIST.md

@@ -0,0 +1,139 @@
+# TPL-LIST — 标准列表页模板
+
+> 适用：带搜索区 + 工具栏 + 表格 + 分页的标准后台管理列表页。
+
+> 与 `wl-skills-kit` 协同说明：本模板是 `wk-skills-ui` 面向通用项目的 UI 示例，保留对纯 Element Plus、老旧封装和非 kit 项目的参考价值。若项目选择使用 `wl-skills-kit` 生成或规范化重构页面，则页面结构以 kit 的 `page-codegen/templates/universal/TPL-LIST.md` 为准；`wk-skills-ui` 继续负责 tokens/styles、化妆层、`defineColumns()`、`renderOps()` 等 UI 能力。
+
+## 文件结构
+
+```
+src/views/[模块]/
+  [Module]List.vue          # 页面主组件
+  components/
+    [Module]Modal.vue       # 新增/编辑弹窗（见 form-dialog 模板）
+```
+
+## 模板代码
+
+```vue
+<template>
+  <div class="page-container">
+    <!-- 搜索区 -->
+    <div class="search-bar">
+      <el-form :model="searchForm" inline>
+        <el-form-item label="名称">
+          <el-input
+            size="small"
+            v-model="searchForm.name"
+            placeholder="请输入"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select
+            size="small"
+            v-model="searchForm.status"
+            placeholder="请选择"
+            clearable
+          >
+            <el-option label="启用" :value="1" />
+            <el-option label="停用" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleSearch"
+            >搜索</el-button
+          >
+          <el-button icon="Refresh" @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 工具栏 -->
+    <div class="toolbar">
+      <el-button type="primary" icon="Plus" @click="modal.add()"
+        >新增</el-button
+      >
+    </div>
+
+    <!-- 表格 -->
+    <BaseTable :hook="page" empty-text="暂无数据" :columns="columnsDef()" />
+
+    <!-- 分页 -->
+    <el-pagination
+      v-model:current-page="page.current"
+      v-model:page-size="page.size"
+      :total="page.total"
+      :page-sizes="[20, 50, 100]"
+      layout="total, sizes, prev, pager, next, jumper"
+      @current-change="page.load"
+      @size-change="page.load"
+    />
+
+    <!-- 弹窗 -->
+    <ModuleModal ref="modal" @success="page.load" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { defineColumns, renderOps } from "@agile-team/wk-skills-ui/runtime";
+import { usePageHook } from "@/composables/usePageHook";
+import ModuleModal from "./components/ModuleModal.vue";
+import { getModuleList } from "@/api/module";
+
+// ── 搜索表单 ─────────────────────────────────────────────────────────────────
+const searchForm = reactive({ name: "", status: undefined });
+
+// ── 分页 Hook ─────────────────────────────────────────────────────────────────
+const page = usePageHook({
+  apiFn: getModuleList,
+  params: () => ({ ...searchForm }),
+});
+
+const handleSearch = () => page.load(1);
+const handleReset = () => {
+  Object.assign(searchForm, { name: "", status: undefined });
+  page.load(1);
+};
+
+// ── 弹窗引用 ──────────────────────────────────────────────────────────────────
+const modal = ref();
+
+// ── 列定义 ────────────────────────────────────────────────────────────────────
+function columnsDef() {
+  return defineColumns([
+    { type: "index", label: "序号", width: 60, align: "center" },
+    { name: "name", label: "名称", minWidth: 120 },
+    { name: "status", label: "状态", width: 80 }, // enableStatus 已自动映射
+    { name: "remark", label: "备注", minWidth: 160 },
+    {
+      label: "操作",
+      width: 120,
+      fixed: "right",
+      align: "center",
+      defaultSlot: ({ row }) =>
+        renderOps([
+          { type: "view", onClick: () => modal.value.view(row.id) },
+          { type: "edit", onClick: () => modal.value.edit(row.id) },
+          { type: "del", onClick: () => handleDel(row.id) },
+        ]),
+    },
+  ]);
+}
+
+// ── 删除 ──────────────────────────────────────────────────────────────────────
+async function handleDel(id: string) {
+  await ElMessageBox.confirm("确定删除该记录？", "提示", { type: "warning" });
+  // await deleteModule(id);
+  page.load();
+}
+</script>
+```
+
+## 注意事项
+
+1. `BaseTable` 需替换为项目实际使用的表格组件
+2. `usePageHook` 需替换为项目实际的分页 Hook
+3. `enableStatus` 字段在 `installCommonPreset()` 后自动渲染为彩色 Tag，无需手写 defaultNode
+4. 工具栏按钮必须带 `icon`（R005 规则）

package/templates/tree-list/TPL-TREE-LIST.md

@@ -0,0 +1,176 @@
+# TPL-TREE-LIST — 左树右表布局模板
+
+> 适用：左侧组织树 + 右侧数据列表的经典后台管理布局。
+
+> 与 `wl-skills-kit` 协同说明：本模板是 `wk-skills-ui` 面向通用项目的 UI 示例，保留对纯 Element Plus、老旧封装和非 kit 项目的参考价值。若项目选择使用 `wl-skills-kit` 生成或规范化重构页面，则页面结构以 kit 的 `page-codegen/templates/universal/TPL-TREE-LIST.md` 为准；`wk-skills-ui` 继续负责 tokens/styles、化妆层、`defineColumns()`、`renderOps()` 等 UI 能力。
+
+## 布局结构
+
+```
+.tree-list-container
+  ├── .tree-panel     左侧树（固定宽度 240px）
+  └── .list-panel     右侧列表（自适应）
+```
+
+## 模板代码
+
+```vue
+<template>
+  <div class="tree-list-container">
+    <!-- 左侧树 -->
+    <div class="tree-panel">
+      <div class="tree-search">
+        <el-input
+          size="small"
+          v-model="treeKeyword"
+          placeholder="搜索"
+          prefix-icon="Search"
+          clearable
+        />
+      </div>
+      <el-scrollbar height="calc(100vh - 160px)">
+        <el-tree
+          ref="treeRef"
+          :data="treeData"
+          :props="{ label: 'name', children: 'children' }"
+          :filter-node-method="filterNode"
+          node-key="id"
+          highlight-current
+          @node-click="handleNodeClick"
+        />
+      </el-scrollbar>
+    </div>
+
+    <!-- 右侧列表 -->
+    <div class="list-panel">
+      <!-- 搜索区 -->
+      <div class="search-bar">
+        <el-form :model="searchForm" inline>
+          <el-form-item label="名称">
+            <el-input
+              size="small"
+              v-model="searchForm.name"
+              placeholder="请输入"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleSearch"
+              >搜索</el-button
+            >
+            <el-button icon="Refresh" @click="handleReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 工具栏 -->
+      <div class="toolbar">
+        <el-button
+          type="primary"
+          icon="Plus"
+          :disabled="!selectedNodeId"
+          @click="modal.add()"
+        >
+          新增
+        </el-button>
+      </div>
+
+      <!-- 表格 -->
+      <BaseTable :hook="page" empty-text="暂无数据" :columns="columnsDef()" />
+
+      <!-- 分页 -->
+      <el-pagination
+        v-model:current-page="page.current"
+        v-model:page-size="page.size"
+        :total="page.total"
+        layout="total, sizes, prev, pager, next"
+        @current-change="page.load"
+        @size-change="page.load"
+      />
+    </div>
+  </div>
+
+  <ModuleModal ref="modal" @success="page.load" />
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { defineColumns, renderOps } from "@agile-team/wk-skills-ui/runtime";
+
+const treeRef = ref();
+const treeKeyword = ref("");
+const selectedNodeId = ref<string>("");
+const treeData = ref([]);
+
+// 树节点过滤
+watch(treeKeyword, (val) => treeRef.value?.filter(val));
+function filterNode(value: string, data: any) {
+  if (!value) return true;
+  return data.name?.includes(value);
+}
+
+function handleNodeClick(node: any) {
+  selectedNodeId.value = node.id;
+  page.load(1);
+}
+
+// 列表逻辑...
+const searchForm = reactive({ name: "" });
+const page = usePageHook({
+  apiFn: getList,
+  params: () => ({ ...searchForm, nodeId: selectedNodeId.value }),
+});
+
+function handleSearch() {
+  page.load(1);
+}
+function handleReset() {
+  searchForm.name = "";
+  page.load(1);
+}
+
+const modal = ref();
+
+function columnsDef() {
+  return defineColumns([
+    { type: "index", label: "序号", width: 60, align: "center" },
+    { name: "name", label: "名称", minWidth: 150 },
+    {
+      label: "操作",
+      width: 100,
+      fixed: "right",
+      align: "center",
+      defaultSlot: ({ row }) =>
+        renderOps([
+          { type: "edit", onClick: () => modal.value.edit(row.id) },
+          { type: "del", onClick: () => handleDel(row.id) },
+        ]),
+    },
+  ]);
+}
+</script>
+
+<style lang="scss" scoped>
+// 注意：.tree-list-container 的 flex 布局已由 wk-skills-ui/styles/shared/_layout.scss 提供
+// 只需保证 class 名一致，样式自动生效
+.tree-list-container {
+  display: flex;
+  height: 100%;
+  gap: 12px;
+}
+.tree-panel {
+  width: 240px;
+  flex-shrink: 0;
+}
+.list-panel {
+  flex: 1;
+  overflow: hidden;
+}
+</style>
+```
+
+## 注意事项
+
+1. `_layout.scss` 提供了 `.tree-list-container` 等基础 flex 布局，无需重复定义
+2. 左侧树点击时重置分页到第 1 页
+3. 工具栏新增按钮在未选中树节点时禁用（防止无效数据关联）

package/templates/ui-optimization-report/TPL-UI-OPTIM-REPORT.md

@@ -0,0 +1,343 @@
+# [项目名称] UI 风格优化记录报告
+
+**项目**：[项目名称]（[业务描述]子应用）  
+**技术栈**：Vue 3 + Vite + TypeScript + Element Plus + AG Grid + jh-ui 定制库  
+**关联仓库**：[关联仓库名称]  
+**报告周期**：[时间范围]  
+**整理时间**：[完成日期]  
+**报告对象**：项目经理、技术负责人、部门负责人
+
+---
+
+## 一、总体说明
+
+> 说明本次优化的背景、触发原因、整体目标和原则。
+
+本次 UI 风格优化的背景是：[项目] 系统历史页面由多名开发人员分批次迭代完成，各模块在控件规格、表格渲染、操作按钮形式、颜色使用等方面存在明显不一致，导致用户使用时体感割裂、视觉混乱。
+
+本次优化以**"不改业务逻辑、只统一视觉与交互规范"**为原则，基于 `wk-skills-ui` 规范工具库，在 [项目] 全量落地。
+
+---
+
+## 二、UI 设计架构
+
+### 2.1 设计定位
+
+本项目采用 **Stripe 精致 × Linear 密度** 融合风格：高密度（`size=small`、`margin-bottom:8px`）、精致感（圆角 6–12px、微阴影、hover/focus 过渡）、一致性（所有颜色来自 CSS Token，主题色只需改一处全局生效）。
+
+### 2.2 Token 体系（单一来源）
+
+```
+Token 入口：[Token 文件路径]
+主色:     var(--el-color-primary)    = [颜色值]
+成功:     var(--el-color-success)    = [颜色值]
+警告:     var(--el-color-warning)    = [颜色值]
+危险:     var(--el-color-danger)     = [颜色值]
+文字一级: var(--el-text-color-primary)
+文字二级: var(--el-text-color-regular)
+文字三级: var(--el-text-color-secondary)
+边框:     var(--el-border-color)
+背景浅:   var(--el-fill-color-lighter)
+背景卡:   var(--el-bg-color)
+```
+
+> ⚠️ 禁止在业务文件中硬编码任何 HEX/RGB 颜色
+
+### 2.3 样式分层策略
+
+```
+wk-skills-ui presets/[preset].scss    ← 第1层：Token 变量 + L1 element + L2 vendors（自动覆盖）
+src/assets/style/element.scss         ← 第2层：EP 控件局部补丁
+src/assets/style/main.scss            ← 第3层：全局共享组件样式
+views/[module]/style/index.scss       ← 第4层：模块级布局补丁（仅限布局，禁止硬编码颜色）
+业务组件 <style scoped>               ← 第5层：组件内布局，禁止硬编码颜色
+```
+
+### 2.4 覆盖优先级规则
+
+| 场景 | 写法 |
+|------|------|
+| jh-ui 组件（用了 `html` 选择器） | `html .el-xxx { ... !important }` |
+| Element Plus scoped 样式 | 全局文件用非 scoped 选择器 + `!important` |
+| 业务组件内需穿透子组件 | `:deep(.el-xxx)` |
+| 远程 Module Federation 组件 | CSS 变量注入（`--el-color-primary` 等） |
+| jh-dialog footer 按钮 | `.el-dialog__footer .el-button`（无 wrapper class） |
+
+---
+
+## 三、总览数据
+
+| 指标 | 数值 |
+|------|------|
+| 涉及业务模块数 | **[N] 个**（[模块列表]） |
+| 扫描 Vue 文件数 | **[N] 个** |
+| 改造前发现风格问题 | **[N] 项** |
+| 改造后剩余问题 | **[N] 项**（均为复杂嵌套组件，需人工处理） |
+| **问题消除率** | **≈ [N]%** |
+| 新增统一渲染函数 | **[N]+ 个**（状态/分类/编号/数值/警示五类） |
+| 全量覆盖操作列渲染 | **[N] 处** `renderOps` 统一图标按钮 |
+| 全量覆盖空状态文案 | **[N] 处** `empty-text="暂无数据"` |
+| 编号列 renderBadge 覆盖 | **[N] 处** `renderBadge` 徽标渲染 |
+| 统一表单标签宽度 | **[N] 个**表单组件 `labelWidth="[N]px"` |
+
+---
+
+## 四、已完成优化全量清单
+
+### 4.1 全局 Token 基础
+
+| # | 项目 | 文件 | 说明 |
+|---|------|------|------|
+| ✅ 0-1 | Token CSS 最先加载 | `index.html` | Token CSS 在所有样式之前加载 |
+| ✅ 0-2 | 移除全局硬编码覆盖 | `views/[module]/style/index.scss` | 清除旧版颜色覆盖，内容已被新架构取代 |
+| ✅ 0-3 | 接入 wk-skills-ui 预设 | `src/assets/style/main.scss` | `@use 'wk-skills-ui/styles/presets/[preset]'` |
+| ✅ 0-4 | 运行时预设注入 | `src/main-core.ts` | `installCommonPreset() + install[Project]Preset()` |
+
+### 4.2 全局样式层（wk-skills-ui 自动覆盖）
+
+| # | 文件/层级 | 内容 |
+|---|-----------|------|
+| ✅ S-1 | `vendors/_ag-grid` | 表头样式、空数据占位、滚动条细化 |
+| ✅ S-2 | `vendors/_base-components` | renderOps 图标按钮组；弹窗底部按钮 28px/6px圆角；MessageBox 按钮统一 |
+| ✅ S-3 | `vendors/_jh-pagination` | 分页器精致化 |
+| ✅ S-4 | `element/_dialog` | 弹窗全屏图标定位（right:44px）、headerbtn 对齐 |
+| ✅ S-5 | `element/_form` | 表单间距 8px、输入框圆角 6px |
+| ✅ S-6 | `element/_pagination` | 分页激活边框 Token 化 |
+
+### 4.3 共享组件修改
+
+| # | 组件 | 修改内容 |
+|---|------|----------|
+| ✅ C-1 | `FullScreenDialog/index.vue` | 全屏图标定位/尺寸对齐；底部按钮右对齐 |
+| ✅ C-2 | `c_fullscreenDialog/index.vue` | jh-dialog 全屏按钮封装标准化 |
+
+### 4.4 [业务模块1]（[module-dir]）
+
+| # | 文件 | 修改内容 |
+|---|------|----------|
+| ✅ M1-1 | `xxx/index.vue` | [描述] |
+
+> 按实际模块补充，每个业务模块一节，格式同上
+
+---
+
+## 五、分类优化明细
+
+### 5.1 表格列对齐 — 视觉整齐度
+
+> 对应规范：R001 / R014
+
+| 优化项 | 改造前 | 改造后 | 涉及文件 |
+|--------|--------|--------|----------|
+| 普通数据列居中 | 缺少 `align="center"` | 所有列统一 `align="center"` | 全部 index/modal 页 |
+| selection 多选框列 | 表头/数据行错位 | `width="55"` + `align="center"` + `header-align="center"` | [N] 处 |
+| index 序号列宽度 | 40~50px | 统一 `width="60"` | 全部列表页 |
+
+### 5.2 操作列按钮系统 — 统一图标化
+
+> 对应规范：R004 / R013
+
+| 优化项 | 改造前 | 改造后 |
+|--------|--------|--------|
+| 操作按钮形式 | 文字按钮，占 120~200px 列宽 | 26×26px 纯图标按钮，hover 变语义色 |
+| 按钮间距 | 不统一 | `renderOps` 自动控制 gap:4px |
+| 点击冒泡 | 部分触发全行选中 | 内部自动 `stopPropagation()` |
+| 条件显示 | `disabled` 置灰仍占位 | `show:false` → `visibility:hidden` 对齐占位 |
+| 胶囊按钮 | 无标准 | `type:'chip'`（短文字操作） |
+| 文字链接 | 无标准 | `type:'link'`（业务专属长名称） |
+
+### 5.3 编号列徽标 — 识别度提升
+
+> 对应规范：R016（编号/Code/No 字段必须使用 `renderBadge`）
+
+| 优化项 | 改造前 | 改造后 |
+|--------|--------|--------|
+| 编号字段展示 | 纯黑文字，与普通字段无视觉区分 | 蓝色圆角徽标（`.jh-riskno-badge`），等宽字体 |
+| 覆盖字段 | [字段列表] | 全部补加 `defaultSlot: ({row}) => renderBadge(row.xxx)` |
+
+**防漏规则**：字段名含 `Code / No / no / code` 或 label 含"编号"的列，必须在 `columnsDef` 中显式调用 `renderBadge`；`queryDef`（搜索表单）中不需要。
+
+### 5.4 表格空状态文案 — 信息完整性
+
+> 对应规范：R002 / R003
+
+| 优化项 | 改造前 | 改造后 |
+|--------|--------|--------|
+| 空状态 | 英文"No Data"或空白 | 统一"暂无数据" |
+
+**覆盖范围**：[N] 处。
+
+### 5.5 表单控件规格统一 — 视觉密度一致
+
+> 对应规范：R006 / R007 / R008
+
+| 优化项 | 改造前 | 改造后 |
+|--------|--------|--------|
+| 输入框/下拉框尺寸 | 大小混用（32px + 28px） | 全部 `size="small"` (28px) |
+| 日期选择器宽度 | 不撑满 | 统一 `style="width:100%"` |
+| 表单标签宽度 | 80~130px 不等 | 统一 `labelWidth="[N]px"` |
+
+### 5.6 枚举/状态列视觉化 — 信息层次感
+
+> 对应规范：R009 / R010
+
+#### 状态类（实心彩色 Tag）
+| 字段 | 颜色含义 | 示例 |
+|------|----------|------|
+| [字段名] | 绿=启用 / 红=停用 | [页面] |
+
+#### 分类/级别类（镂空 outline Tag，降低视觉权重）
+| 字段 | 颜色含义 | 示例 |
+|------|----------|------|
+| [字段名] | [描述] | [页面] |
+
+#### 编号类（`.jh-riskno-badge`）
+适用于档案编号、设备编号、证件编号等，等宽字体 + 蓝色边框。
+
+#### 数值类（`.jh-count-badge`）
+适用于考核基数、评分、权重等数量型字段。
+
+#### 警示文本类（`renderDangerText`）
+适用于扣分依据、违规项等需醒目提示的文字列。
+
+### 5.7 弹窗规范化
+
+| 优化项 | 改造前 | 改造后 |
+|--------|--------|--------|
+| 全屏图标位置 | 偏位，与关闭按钮间距过大 | `position:absolute; right:44px; top:16px` |
+| 全屏图标大小 | 过大，与关闭按钮不匹配 | `font-size:12px`，视觉对齐 |
+| 底部按钮对齐 | 居中或混乱 | 统一 `justify-content: flex-end` |
+| 底部按钮尺寸 | EP 默认 32px，偏胖 | **28px**，精致感与内容密度一致 |
+| 底部按钮选择器 | `.dialog-footer .el-button`（漏掉 jh-dialog） | `.el-dialog__footer .el-button`（全面覆盖） |
+| 分页位置 | 部分放在 `#footer` | 统一移至内容区 |
+
+---
+
+## 六、设计规范对照关系
+
+| 优化项 | 对应设计规范条目 |
+|--------|-----------------|
+| 列居中 + selection 对齐 | R001 / R014 |
+| 操作列图标按钮系统 | R004 / R013 |
+| 空状态文案 | R002 / R003 |
+| 控件 size=small | R006 |
+| 日期选择器宽度 | R007 |
+| 表单 labelWidth | R008 |
+| 状态列彩色 Tag | R009 |
+| 分类列 outline Tag | R010 |
+| 分页布局 | R011 |
+| 弹窗嵌套表格操作列 | R015 |
+| **编号列 renderBadge** | **R016（编号徽标，本项目首次建立）** |
+
+---
+
+## 七、改造前后对比说明
+
+### 7.1 操作列
+
+| | 改造前 | 改造后 |
+|---|--------|--------|
+| **外观** | 文字按钮，占 120~200px | 图标按钮，占 80~100px |
+| **颜色** | 全蓝色链接 | 查看=蓝 hover，编辑=绿 hover，删除=红 hover |
+| **条件显示** | 置灰仍占位 | `visibility:hidden` 对齐占位 |
+| **一致性** | 各页面标签混用 | 全局统一图标语义 |
+
+### 7.2 编号列
+
+| | 改造前 | 改造后 |
+|---|--------|--------|
+| **外观** | 黑色纯文字 | 蓝色圆角徽标，等宽字体 |
+| **识别度** | 与普通字段无区分 | 视觉即传达"这是一个标识码" |
+
+### 7.3 状态字段
+
+| | 改造前 | 改造后 |
+|---|--------|--------|
+| **外观** | 黑色纯文字 | 彩色实心 Tag |
+| **感知速度** | 需逐字阅读 | 300ms 内颜色编码感知 |
+| **风险项** | "已过期""已驳回"与正常无视觉区分 | 红色 Tag 醒目提示 |
+
+### 7.4 表单弹窗
+
+| | 改造前 | 改造后 |
+|---|--------|--------|
+| **控件高度** | 大小混用 | 全部 28px，视觉整洁 |
+| **标签对齐** | 宽度不等，对齐紊乱 | 统一 [N]px，右对齐 |
+| **底部按钮** | 默认 32px，偏胖 | 28px，精致匹配内容密度 |
+
+---
+
+## 八、代码全量扫描 — 真实遗留问题清单（[扫描日期]）
+
+> 以下为全量代码扫描后仍然存在的风格问题。原危险品牌色已全部消除。
+
+### R-1 ⚠️ [问题描述]（[N] 文件 / [N] 处）
+
+| 文件 | 行号 | 说明 |
+|------|------|------|
+| `[path]` | [N] | [描述] |
+
+**建议**：[修复方案]，工作量约 [N] 分钟。
+
+---
+
+**P1 级残留汇总**：[R-N（时间）, ...]。  
+**总额外工作量**：约 [N] 个工作日。
+
+---
+
+## 九、尚未完成的项目及原因
+
+| 未完成项 | 所在模块 | 原因 | 建议处理方式 |
+|----------|----------|------|-------------|
+| [描述] | [模块] | [原因] | 下一迭代处理，预计工作量 [N] |
+
+---
+
+## 十、技术约束备忘
+
+| 约束 | 说明 |
+|------|------|
+| `!important` | jh-ui 用 `html` 选择器（特异性极高），覆盖必须加 |
+| scoped 无效 | 全局覆盖写全局文件，业务组件不写全局 CSS |
+| Module Federation | 远程组件只能通过 CSS 变量影响，不能直接改源码 |
+| jh-dialog footer 按钮 | 按钮直接在 `#footer` slot，无 `.dialog-footer` wrapper，需用 `.el-dialog__footer .el-button` |
+| renderBadge 规则 | 字段名含 Code/No/编号 → 必须在 `columnsDef` 中显式调用 `renderBadge(row.xxx)` |
+| queryDef 中不适用 | `queryDef` 是搜索表单，不是表格列，不需要 `defaultSlot` |
+
+---
+
+## 十一、后续可继续深化的方向
+
+### 11.1 修复已知残留色值（P1）
+按第八节清单，集中修复剩余硬编码颜色。
+
+### 11.2 扫描器 CI 集成（推荐）
+将 `wk-skills-ui` 扫描器集成到 CI/CD 流水线，每次 PR 合并前自动扫描，有 error 级别问题则阻断合并。
+
+### 11.3 其他业务系统推广
+1. 复制 `reference/ag-cell-renders.ts` → 目标项目 `src/util/`
+2. 运行扫描器获取问题清单
+3. 按 SKILL.md 规范执行批量修复
+
+预计其他项目扫描 + 批量修复工作量：**0.5~1 天**。
+
+---
+
+## 十二、总结
+
+| 维度 | 结论 |
+|------|------|
+| 问题消除率 | ≈[N]% |
+| 视觉一致性 | 操作列、编号列、状态列、表单规格、空状态文案、弹窗按钮已全面统一 |
+| 可维护性 | 建立 `ag-cell-renders.ts` + `wk-skills-ui` 工具链，新页面开箱即用 |
+| 可推广性 | 规范文档（SKILL.md）已覆盖所有规则，其他项目可直接复用 |
+| 剩余风险 | P1 级：[描述]；P2–P3 级不影响主流程 |
+
+> 本次改造遵循**"不改业务，只统一外观"**原则，所有修改均为视觉层和交互规范层，不涉及接口、数据处理、权限逻辑变更，改造风险极低。
+
+---
+
+_报告生成时间：[日期]_  
+_扫描工具：wk-skills-ui scanner + AI 代码全量扫描_  
+_执行人：[姓名]_