@qilitt-mickey/vue3-temp-skill 1.1.7 → 1.1.8

package/SKILL.md

@@ -208,6 +208,7 @@ reset();    // 重置（配合 formRef.resetFields）
 - `<script setup lang="ts">` + `defineOptions({ name })`
 - Re*：`type.ts` + 显式 import
 - `$t('中文key')`；`import.meta.env.VITE_*`；禁止不可信 `v-html`
+- **样式契约**：UnoCSS 连字符类名（`p-5`/`w-full`，禁 `p5`/`w100%`）+ 语义色变量（`bg-bg_color`，禁 `bg-[#fff] dark:bg-[#303030]`）+ 尺寸档位（查询/工具栏 `small`、表格 `:size="size"`、弹窗表单 default、整屏 `large`）；详见 `core-kernel`「四之二、样式契约」
 
 ---
 
@@ -290,6 +291,7 @@ reset();    // 重置（配合 formRef.resetFields）
 **5. 业务** — `onSearch`/`reset`；提交 loading；权限；未二次 Layout  
 **5b. 列表布局** — `el-card`+`content`+固定 height；查询/展示分区；`tableHeight`；分页在 ReTableBar 内  
 **5c. 设计规范遵从（命中 design-system 时必查）** — 已输出识别回执且三点一致；令牌层（唯一新增）已建立、几何重写并入 element-plus.scss、文件名未漂移；第四节硬编码冲突清单逐条处理并回填；公共区域（侧栏/导航/壳变量）已适配；存量裸值扫描已执行；业务代码无裸控件高度/内边距/字号；验证清单全过  
+**5d. 样式契约（每次生成必查）** — UnoCSS 连字符形态（`p-5`/`w-full`；无 `p5`/`w100%`）；颜色语义变量（无 `bg-[#fff] dark:bg-[#303030]`）；组件尺寸档位（查询/工具栏 `small`、表格 `:size="size"`、弹窗表单 default、整屏 `large`）；间距 4px 基数；细则见 `core-kernel`「四之二」  
 **6. 风格** — 无多余 console；`$t('中文')`；`--vts-*` / UnoCSS；图标走 `svg-icon` / `icons` 约定  
 
 完整项见 `references/code-quality.md`。

package/package.json

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

package/references/code-quality.md

@@ -228,6 +228,9 @@ const fullName = computed(() => `${user.firstName} ${user.lastName}`);
 - [ ] 样式使用 `scoped`，不会污染全局。
 - [ ] 颜色使用 CSS 变量（`var(--el-color-primary)`），不硬编码。
 - [ ] 优先使用 UnoCSS 原子类（`flex-center`、`mb-4`）。
+- [ ] UnoCSS 类名为连字符形态：`p-5` / `w-full` / `px-5` / `gap-10`；禁止 `p5` / `w100%` / `px5` / `gap10`（无 CSS 产出，样式静默失效）。
+- [ ] 背景/文字色按语义取变量：`bg-bg_color` / `var(--el-text-color-*)`；禁止 `bg-[#fff]` + `dark:bg-[#303030]` 成对硬编码。
+- [ ] 组件尺寸按场景档位：查询区与 `ReTableBar` 工具栏按钮 `size="small"`；表格 `:size="size"`（禁写死）；弹窗表单 default；整屏主表单 `large`（细则见 `core-kernel`「四之二、样式契约」）。
 - [ ] 业务图标优先 `<svg-icon name="..." />`（本地无冒号 / Iconify 含 `:`）；菜单 `meta.icon` 为 string；细则见 `icons`。
 - [ ] 不使用 `!important`，除非覆盖第三方组件样式且有注释说明。
 - [ ] 不使用深层嵌套选择器（不超过 3 层）。

package/references/core-kernel.md

@@ -30,6 +30,7 @@ tags: [vue3, kernel, conventions, layout, router, http, crud, inventory]
 | 10 | 新三方依赖必须用户确认；已有封装须复用，选型表指定库勿擅自替换 |
 | 11 | **查询列表页布局硬约束**（见下方黄金样板）：`el-card` + `ref="content"` + **固定 `height`**（非 `minHeight`）；查询区与表格区分区；表格用 `tableHeight`；分页放在 `ReTableBar` 内 |
 | 11 | addon 缺失时按 `project-inventory` 第九节**精确版本**安装；禁止 `@latest` / 无版本号；Vite 插件与 `build/plugins/*` 成套核对 |
+| 12 | **样式契约**（见「四之二」）：UnoCSS 类名必须连字符形态（`p-5`/`w-full`，禁止 `p5`/`w100%`）；颜色按语义取 `--el-*`/`--vts-*` 变量（禁止 `bg-[#fff] dark:bg-[#303030]` 成对硬编码）；组件尺寸按场景档位（查询/工具栏 `small`、表格 `:size="size"`、弹窗表单 default、整屏主表单 `large`）；`design-tokens.scss` 存在时零新增硬编码裸值 |
 
 ---
 
@@ -336,6 +337,85 @@ function handleSizeChange(size: number) {
 
 ---
 
+## 四之二、样式契约（所有生成代码必须遵循）
+
+> 本节是**生成任何页面/组件代码时的样式真相源**：尺寸、间距、边距、颜色、组件档位全部按此执行。后期设计类 Skill（如 ui-ux-pro-max / project-style-design）产出设计规范后，规范经 `design-system` 模块落到 `design-tokens.scss`；此后生成代码只准引用令牌，本节约束依然生效。
+
+### 1. UnoCSS 类名形态（写错 = 样式静默失效）
+
+项目 `presetRemToPx({ baseFontSize: 4 })`：**间距数字即像素**（`p-5` = 5px）。类名**必须带连字符**，无连字符写法不会产出任何 CSS（已用 dist 产物实证）：
+
+| ❌ 无效（无 CSS 产出） | ✅ 有效 | 说明 |
+|---|---|---|
+| `p5` / `p10` / `p20` / `m10` / `mt20` / `px5` / `gap10` | `p-5` / `p-10` / `p-20` / `m-10` / `mt-20` / `px-5` / `gap-10` | 间距类必须带连字符 |
+| `w100%` / `h100%` / `w-100%` / `h-[100%]` | `w-full` / `h-full` | 满宽满高统一 `full` |
+| `p-b-16` | `pb-16` | 方向前缀连写 |
+| `bg-[#fff]` + `dark:bg-[#303030]` | `bg-bg_color` | 背景按语义取变量，自动适配暗黑 |
+
+- 间距取 **4px 基数**（4/8/12/16/20）；`p-5`（查询区内边距）等模版既有值保持原样。
+- shortcuts 白名单：`flex-center` / `flex-end` / `flex-middle` / `flex-between` / `flex-col-center` / `break-word` / `ellipsis`，布局优先用它们。
+- 字号用显式 px 档位：`text-xs`=12 / `text-sm`=14 / `text-base`=16 / `text-lg`=18 / `text-xl`=20 / `text-2xl`=24 / `text-3xl`=30。
+
+### 2. 颜色纪律（按语义取变量，禁止成对硬编码）
+
+| 语义 | 用法 |
+|---|---|
+| 页面/卡片背景 | `bg-bg_color`（桥接 `--el-bg-color`）；布局底 `--el-bg-color-page`；浮层 `--el-bg-color-overlay` |
+| 文字 | `--el-text-color-primary` / `regular` / `secondary` / `placeholder` |
+| 边框 | `--el-border-color`（及 `-light` / `-lighter` / `-dark`） |
+| 浅填充（表头/hover 底） | `--el-fill-color-light` |
+| 主色与梯度 | `--el-color-primary`（及 `-light-3/5/7/9`、`-dark-2`） |
+| 状态色 | `--el-color-success` / `warning` / `danger` / `info` |
+| 表格表头 | `--vts-table-header-bg` / `--vts-table-header-text`（el-table 与 vxe 共用） |
+| 弹窗背景 | `--vts-dialog-bg`（支持 `--ds-dialog-bg` 覆写） |
+
+Canvas / 图谱 / 连线库等**必须传具体色值字符串**的场景，用统一工具从运行时读取变量，禁止把十六进制写死在业务代码里：
+
+```typescript
+/** 读取 CSS 变量（canvas/G6/jsPlumb 等需要具体色值时使用） */
+const getCssVar = (name: string, fallback = "") =>
+  getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+
+// 示例：G6 边样式
+edge: { type: "line", style: { stroke: getCssVar("--el-color-primary-light-5", "#9DC5EA") } }
+```
+
+### 3. 组件尺寸纪律（small / default / large 按场景定档）
+
+| 场景 | 档位 | 说明 |
+|---|---|---|
+| 查询区按钮（查询/重置/展开收起） | `size="small"` | 与 inline 查询区配套 |
+| `ReTableBar` 工具栏按钮（新增/导入/导出/删除） | `size="small"` | 列表页工具栏统一 small |
+| 表格 | `:size="size"`（`ReTableBar` 插槽透出） | **禁止写死**，密度切换由用户控制 |
+| 分页 | `RePagination :size="size"` | 跟随表格密度 |
+| 弹窗内表单 | default（不写 size）+ `label-width="96px"` | `ReDialog` / `ReDialogResize` 内表单 |
+| 登录页 / 整屏主表单 | `size="large"` | 低频全屏操作放大档位 |
+| 移动端 Vant | 独立尺寸体系 | 不与 EP 档位混用，见 `mobile-h5` |
+
+设计规范生效期（`design-tokens.scss` 存在）：档位高度由令牌驱动——`small ↔ --ds-control-height-sm`、`default ↔ --ds-control-height`、`large ↔ --ds-control-height-lg`（经 `--el-component-size*` 映射）。**禁止**在业务代码里写裸控件高度（如 `.el-input { height: 36px }`）绕过档位。
+
+### 4. 页面容器黄金形态
+
+```vue
+<!-- 独立功能页（图谱/流程图等常规页） -->
+<div
+  :style="{ height: `calc(100vh - 2 * var(--vts-margin) - ${headerHeight}px)` }"
+  class="pos-relative bg-bg_color p-5 overflow-hidden"
+>
+```
+
+- 高度公式固定：`calc(100vh - 2 * var(--vts-margin) - ${headerHeight}px)`（`headerHeight` 来自 `useApp()`）。
+- 容器内边距默认 `p-5`；区块之间用 `mb-10` / `gap-10` 等 4 基数间距。
+
+### 5. 设计规范生效期（design-tokens.scss 存在时）
+
+1. 生成代码前先确认 `src/styles/design-tokens.scss` 是否存在；存在则进入「规范期」。
+2. 规范期**零新增硬编码**：颜色/控件高度/内边距/圆角/字号一律引用令牌或语义变量；设计稿与令牌冲突时回填令牌层，不在页面里写裸值。
+3. 间距/边距仍按 4px 基数，优先对齐令牌 `--space-unit` 的倍数。
+4. 命中 `design-system` 时按其工作流执行适配与存量扫描，本节约束与其一致不冲突。
+
+---
+
 ## 五、资产分层（核心 vs 附加）
 
 ### 附加 Hook（按功能模块加载，勿塞进每个 CRUD）
@@ -383,4 +463,5 @@ function handleSizeChange(size: number) {
 - 完整 CRUD 变体、表单页 → `crud-pages`
 - 详情跳转 → `detail-page`
 - 主题布局深挖 → `layout-theme`
+- 设计规范适配 / 项目存在 `design-tokens.scss` → `design-system`（样式契约随之进入「规范期」，见四之二第 5 节）
 - 选型对照与全量组件表 → `project-inventory.md`

package/references/data-mapping.md

@@ -49,15 +49,19 @@ let jsPlumbInstance: any = null
 ## 初始化 jsPlumb
 
 ```typescript
+/** 读取 CSS 变量（jsPlumb 需要具体色值；设计规范生效期自动跟随令牌，见 core-kernel「四之二」） */
+const getCssVar = (name: string, fallback = '') =>
+  getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback
+
 const initJsPlumb = () => {
   jsPlumbInstance = jsPlumb.getInstance({
     // 连接线：Straight(直线) / Bezier(贝塞尔) / Flowchart(折线) / StateMachine(状态机)
     Connector: ['Straight', { stub: 0, gap: 1 }],
-    PaintStyle: { stroke: '#409eff', strokeWidth: 2 },
-    HoverPaintStyle: { stroke: '#66b1ff', strokeWidth: 3 },
+    PaintStyle: { stroke: getCssVar('--el-color-primary', '#409eff'), strokeWidth: 2 },
+    HoverPaintStyle: { stroke: getCssVar('--el-color-primary-light-3', '#66b1ff'), strokeWidth: 3 },
     Endpoint: ['Dot', { radius: 6 }],
     EndpointStyle: { fill: 'transparent', stroke: 'transparent' },
-    EndpointHoverStyle: { fill: '#fff', stroke: '#66b1ff' },
+    EndpointHoverStyle: { fill: getCssVar('--el-bg-color', '#fff'), stroke: getCssVar('--el-color-primary-light-3', '#66b1ff') },
     Container: 'mapping-container', // 必须指定容器 ID
     ConnectionOverlays: [
       ['Arrow', {
@@ -141,11 +145,11 @@ const getMappingResult = () => {
     </el-card>
 
     <!-- 映射区域 -->
-    <div id="mapping-container" class="flex-1 relative flex justify-between bg-white p-8">
+    <div id="mapping-container" class="flex-1 relative flex justify-between bg-bg_color p-8">
       <!-- 左侧源字段 -->
       <div class="w-[40%] flex flex-col border rounded">
         <div v-for="item in sourceFields" :id="item.id" :key="item.id"
-          class="field-item flex border-b hover:bg-gray-50 cursor-pointer relative">
+          class="field-item flex border-b hover:bg-[var(--el-fill-color-light)] cursor-pointer relative">
           <div class="flex-1 p-2">{{ item.name }}</div>
           <div class="w-[80px] p-2 text-center">{{ item.type }}</div>
           <!-- 连接点 -->
@@ -160,7 +164,7 @@ const getMappingResult = () => {
       <!-- 右侧目标字段 -->
       <div class="w-[40%] flex flex-col border rounded">
         <div v-for="item in targetFields" :id="item.id" :key="item.id"
-          class="field-item flex border-b hover:bg-gray-50 cursor-pointer relative">
+          class="field-item flex border-b hover:bg-[var(--el-fill-color-light)] cursor-pointer relative">
           <div :id="`handle-${item.id}`"
             class="connector-handle-left absolute left-0 top-1/2 -mt-[6px] -translate-x-1/2" />
           <div class="flex-1 p-2">{{ item.name }}</div>
@@ -180,14 +184,14 @@ const getMappingResult = () => {
   z-index: 10;
   width: 12px;
   height: 12px;
-  background-color: #fff;
-  border: 1px solid #409eff;
+  background-color: var(--el-bg-color);
+  border: 1px solid var(--el-color-primary);
   border-radius: 50%;
 }
 .connector-handle-right:hover,
 .connector-handle-left:hover {
-  background-color: #e6f7ff;
-  border-color: #1890ff;
+  background-color: var(--el-color-primary-light-9);
+  border-color: var(--el-color-primary-light-3);
 }
 :deep(.jtk-endpoint) { z-index: 20; }
 :deep(.jtk-connector) { z-index: 10; }

package/references/data-screen.md

@@ -72,6 +72,7 @@ function getScale(width = 1920, height = 1080) {
   width: 100vw;
   height: 100vh;
   overflow: hidden;
+  /* 大屏深色画布底：属大屏设计产物；设计规范提供大屏背景令牌时替换为对应 var() */
   background: #000;
 }
 

package/references/design-system.md

@@ -162,6 +162,7 @@ tags: [design-system, design-tokens, antd, semi, arco, vuetify, findesign, eleme
   --vts-scrollbar-thumb-hover: var(--el-text-color-secondary);
   --vts-autofill-bg: var(--el-bg-color);
   --vts-autofill-text: var(--el-text-color-primary);
+  --ds-dialog-bg: var(--el-bg-color-overlay); /* 接管 --vts-dialog-bg：弹窗背景按规范走浮层色 */
 
   /* —— Element Plus 变量映射（必配，含主色兜底） —— */
   --el-color-primary: var(--brand-primary); /* 兜底：JS 运行时 setEpThemeColor 生效前的首屏主色 */
@@ -350,7 +351,7 @@ tags: [design-system, design-tokens, antd, semi, arco, vuetify, findesign, eleme
 
 ### Step 5 模版硬编码冲突处理（按模版版本二选一，逐条回填）
 
-- **4.A（新模版，已变量化）**：模版样式均为 `var(--x, 默认值)` 形式，Step 2 的「模版桥接令牌」段已自动接管。**逐条确认**桥接令牌齐全即可，重点核对 `--vts-dialog-bg`（仍定义在 index.scss :root，需把渐变值改为 `var(--el-bg-color-overlay)`）。
+- **4.A（新模版，已变量化）**：模版样式均为 `var(--x, 默认值)` 形式，Step 2 的「模版桥接令牌」段已自动接管。**逐条确认**桥接令牌齐全即可，`--vts-dialog-bg` 已变量化为 `var(--ds-dialog-bg, 原值)`，确认桥接段含 `--ds-dialog-bg: var(--el-bg-color-overlay)` 即完成接管。
 - **4.B（旧模版）**：按第四节冲突清单**逐条手工处理**。
 
 **无论走哪条路**，处理完必须：
@@ -375,7 +376,7 @@ tags: [design-system, design-tokens, antd, semi, arco, vuetify, findesign, eleme
    | 位置 | 项目 | 规范落地动作 |
    |---|---|---|
    | `theme.scss` | 侧栏配色 | 追加/覆盖与规范匹配的 `html[data-theme]` 块：`--vts-theme-menu-active-before` → 规范主色；菜单底/悬浮按规范形态（AntD Pro 浅色用 `light`，深色用 `default` `#001529`） |
-   | `index.scss` | 壳变量 | `--vts-bar-height`（导航高，AntD Pro 56px）、`--vts-margin`（内容边距）、`--vts-dialog-bg`（渐变改 `var(--el-bg-color-overlay)`）；改后回归验证列表页 `calc(100vh - ...)` |
+   | `index.scss` | 壳变量 | `--vts-bar-height`（导航高，AntD Pro 56px）、`--vts-margin`（内容边距）、`--vts-dialog-bg`（已变量化，由桥接令牌 `--ds-dialog-bg` 接管）；改后回归验证列表页 `calc(100vh - ...)` |
    | `platform-config.json` | 顶栏高度 | `HeaderHeight` 与规范一致（如 AntD Pro 56） |
    | `sidebar.scss` | 侧栏几何 | 宽度走 `--sidebar-width`；菜单项高度走令牌层 EP 映射（`--el-menu-item-height`） |
 
@@ -437,7 +438,7 @@ height: \d+px、padding: \d+px、font-size: \d+px、行内 style="...颜色 hex"
 | 8 | `element-plus.scss` | `.el-table__header th` 色 `#8c8f90` + 底 `#f2f9fc` | 表头不跟随规范 | 已变量化 `--vts-table-header-*` | 改 `--vts-table-header-text/bg` |
 | 9 | `element-plus.scss` | `.row-added/#e6f4ff`、`.row-modified/#fff7e6`、`.row-deleted/#f5f5f5` | 行变更色脱离规范且无暗色适配 | 已变量化 `--vts-row-*-bg` | 改 `--vts-row-*-bg` 令牌 |
 | 10 | `element-plus.scss` | `.vts-message` 背景 `white`、文字 `#000000d9` | 暗黑/规范底失效 | 已变量化 `--vts-message-bg/text` | 改 `var(--vts-message-bg/text)` |
-| 11 | `index.scss` | `--vts-dialog-bg: linear-gradient(to bottom, #e5f3fe, #fefefe)` | **所有弹窗强制渐变蓝底** | **仍未变量化**（定义在 :root） | 令牌改为 `var(--el-bg-color-overlay)`；暗黑在 dark.scss 覆盖 |
+| 11 | `index.scss` / `dark.scss` | `--vts-dialog-bg: linear-gradient(to bottom, #e5f3fe, #fefefe)`（dark: `rgb(36 37 37)`） | **所有弹窗强制渐变蓝底** | 已变量化 `var(--ds-dialog-bg, 原值)`，桥接令牌 `--ds-dialog-bg` 自动接管 | 旧项目把亮/暗两处定义改为 `var(--ds-dialog-bg, 原值)` |
 | 12 | `theme.scss` | 8 套侧栏配色（激活条 `#4091f7` 等） | 激活指示条非规范主色 | 主题库保留 | 追加规范匹配的 `html[data-theme]` 块覆盖 `--vts-theme-menu-active-before` |
 | 13 | `useApp.ts` | `epThemeColor` 缺省 `#409EFF` | EP 出厂蓝 ≠ 规范主色 | 不改代码 | 改 `platform-config.json` 的 `EpThemeColor`（Step 6） |
 | 14 | `index.scss` | `--vts-bar-height: 38px`、`--vts-margin: 8px` | 与规范导航高度（AntD Pro 56px）不一致 | 令牌可覆盖 | 令牌层覆盖并回归验证列表页 `calc(100vh - ...)`；默认保持不变标注差异 |

package/references/feedback-ui.md

@@ -32,8 +32,8 @@ const NoticeBar = defineAsyncComponent(
     text="系统将于今晚 22:00 进行维护"
     left-icon="notice"
     right-icon="arrowRight"
-    background="#ecf5ff"
-    color="#409eff"
+    background="var(--el-color-primary-light-9)"
+    color="var(--el-color-primary)"
   />
 </template>
 ```

package/references/flowchart-g6.md

@@ -62,6 +62,10 @@ const initGraph = async () => {
   const { Graph } = await import('@antv/g6')
   register(ExtensionCategory.NODE, 'vue-node', VueNode)
 
+  /** 读取 CSS 变量（canvas 需要具体色值；设计规范生效期自动跟随令牌，见 core-kernel「四之二」） */
+  const getCssVar = (name: string, fallback = '') =>
+    getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback
+
   // 定义 Vue 节点组件
   const FlowNodeComp = defineComponent({
     name: 'FlowNodeComp',
@@ -96,16 +100,17 @@ const initGraph = async () => {
       return () => (
         <div style={{
           width: `${props.nodeWidth}px`, height: `${props.nodeHeight}px`,
-          border: '2px solid', borderColor: isSelected.value ? 'red' : '#9DC5EA',
-          borderRadius: '8px', background: '#EAF4FF', cursor: 'pointer',
+          border: '2px solid',
+          borderColor: isSelected.value ? getCssVar('--el-color-danger', 'red') : getCssVar('--el-color-primary-light-5', '#9DC5EA'),
+          borderRadius: '8px', background: getCssVar('--el-color-primary-light-9', '#EAF4FF'), cursor: 'pointer',
         }} onClick={handleNodeClick}>
-          <div style={{ background: '#CFE7FF', padding: '8px', fontWeight: 600 }}>
+          <div style={{ background: getCssVar('--el-color-primary-light-8', '#CFE7FF'), padding: '8px', fontWeight: 600 }}>
             {nodeData.value?.title ?? ''}
           </div>
           <div style={{ padding: '8px' }}>
             <div>业务号：{nodeData.value?.caseNo ?? ''}</div>
             <div>{nodeData.value?.handler ?? ''}</div>
-            <div style={{ color: '#409eff' }}>状态：{nodeData.value?.status ?? ''}</div>
+            <div style={{ color: getCssVar('--el-color-primary', '#409eff') }}>状态：{nodeData.value?.status ?? ''}</div>
           </div>
         </div>
       )
@@ -131,7 +136,7 @@ const initGraph = async () => {
       },
       animation: { enter: false },
     },
-    edge: { type: 'line', style: { stroke: '#9DC5EA' }, animation: { enter: false } },
+    edge: { type: 'line', style: { stroke: getCssVar('--el-color-primary-light-5', '#9DC5EA') }, animation: { enter: false } },
     layout: {
       type: 'compact-box',
       direction: 'TB',
@@ -227,7 +232,7 @@ defineExpose({ getInstance: () => graph })
 <!-- g6 页面示例 -->
 <template>
   <div :style="{ height: `calc(100vh - 2 * var(--vts-margin) - ${headerHeight}px)` }"
-    class="pos-relative bg-[#fff] p-5 overflow-hidden">
+    class="pos-relative bg-bg_color p-5 overflow-hidden">
     <div class="toolbar">
       <el-alert title="antv/g6流程图展示" type="info" :closable="false" />
     </div>

package/references/graph-relation.md

@@ -113,13 +113,20 @@ const transformNodes = (nodesData): GraphNode[] => {
   }))
 }
 
+// 图谱业务色板（集中声明、全篇引用；设计规范生效期改为从设计令牌读取的值，见 core-kernel「四之二」）
+const GRAPH_PALETTE = {
+  enterprise: '#4F9DF8', // 企业客户
+  personal: '#FF8234',   // 个人客户
+  self: '#675bf6',       // 当前客户
+}
+
 // 连线转换 — 可根据目标节点类型设置颜色
 const transformLines = (linesData): GraphLine[] => {
   return linesData.map((line) => {
     const targetNode = nodes.value.find(n => n.id === line.source)
     let color = ''
-    if (targetNode?.data.customerType === '2') color = '#4F9DF8'
-    else if (targetNode?.data.customerType === '1') color = '#FF8234'
+    if (targetNode?.data.customerType === '2') color = GRAPH_PALETTE.enterprise
+    else if (targetNode?.data.customerType === '1') color = GRAPH_PALETTE.personal
     return { from: line.source, to: line.target, text: line.category, opacity: 1, color, textOffset_y: 15 }
   })
 }
@@ -190,7 +197,7 @@ const onCanvasClick = ($event) => {
         @canvas-click="onCanvasClick" @node-click="onNodeClick" @line-click="onLineClick">
         <template #node="{ node }">
           <div :data-node-id="node.id" class="my-node-style"
-            :class="{ 'bg-[#4F9DF8]': node.data.customerType === '2' }"
+            :style="{ background: node.data.customerType === '2' ? GRAPH_PALETTE.enterprise : '' }"
             @mouseenter="showNodeTips(node)" @mouseleave="hideNodeTips">
             <div class="c-node-name">{{ node.text }}</div>
           </div>
@@ -243,9 +250,9 @@ onMounted(async () => {
 
 ```typescript
 const legendConfig = ref([
-  { type: 'self', label: '当前客户', color: '#675bf6', borderColor: '#9f93da', borderStyle: 'dashed' },
-  { type: 'personal', label: '个人客户', color: '#FF8234', borderColor: '#FF8234' },
-  { type: 'enterprise', label: '企业客户', color: '#4F9DF8', borderColor: '#4F9DF8' },
+  { type: 'self', label: '当前客户', color: GRAPH_PALETTE.self, borderColor: '#9f93da', borderStyle: 'dashed' },
+  { type: 'personal', label: '个人客户', color: GRAPH_PALETTE.personal, borderColor: GRAPH_PALETTE.personal },
+  { type: 'enterprise', label: '企业客户', color: GRAPH_PALETTE.enterprise, borderColor: GRAPH_PALETTE.enterprise },
 ])
 ```
 

package/references/layout-theme.md

@@ -125,7 +125,7 @@ html.dark {
   // === 必须覆盖的全局变量 ===
   --vts-border-color: rgb(253 253 253 / 12%);    // 亮色: rgb(5 5 5 / 6%)
   --vts-switch-off-color: #ffffff3f;              // 亮色: #a6a6a6
-  --vts-dialog-bg: rgb(36 37 37);                 // 亮色: linear-gradient(...)
+  --vts-dialog-bg: var(--ds-dialog-bg, rgb(36 37 37)); // 亮色: var(--ds-dialog-bg, linear-gradient(...))
 
   // === 布局区域背景 ===
   .navbar, .tags-view, .sidebar-container,
@@ -158,13 +158,13 @@ html.dark {
 
 | 位置 | 硬编码值 | 用途 | 建议 |
 |------|---------|------|------|
-| `.el-table__header th` | `#f2f9fc` | 表头背景 | 应使用 `var(--el-fill-color-light)` |
-| `.el-table__header th` | `#8c8f90` | 表头文字 | 应使用 `var(--el-text-color-secondary)` |
+| `.el-table__header th` | `#f2f9fc` | 表头背景 | 已变量化 `var(--vts-table-header-bg, #f2f9fc)`，设计系统可覆写 |
+| `.el-table__header th` | `#8c8f90` | 表头文字 | 已变量化 `var(--vts-table-header-text, #8c8f90)`，设计系统可覆写 |
 | `.row-added` | `#e6f4ff` | 新增行背景 | 需添加暗黑覆盖 |
 | `.row-modified` | `#fff7e6` | 修改行背景 | 需添加暗黑覆盖 |
 | `.row-deleted` | `#f5f5f5` | 删除行背景 | 需添加暗黑覆盖 |
 | `.el-collapse-item__header` | `#34394d` | 折叠面板文字 | 应使用 `var(--el-text-color-primary)` |
-| `.vxe-header--row` | `#f2f9fc` / `#8c8f90` | VXE 表头 | 同上 |
+| `.vxe-header--row` | `#f2f9fc` / `#8c8f90` | VXE 表头 | 已变量化，与 el-table 表头共用 `--vts-table-header-*` |
 | 滚动条 | `#f9fafb` / `#e5e5e5` | 滚动条样式 | 需添加暗黑覆盖 |
 | autofill | `white` / `#333` | 输入框自动填充 | 需添加暗黑覆盖 |
 

package/references/qrcode-barcode.md

@@ -104,4 +104,5 @@ const options = reactive({
 
 1. 二维码内容为空时不渲染，需配合 `v-if` 或默认值处理。
 2. logo 图片需考虑跨域；本地图片建议通过 `import` 引入。
+3. 码色值（`color.dark/light`、JsBarcode `lineColor`）在库层需要具体色值：设计规范生效期用 `getComputedStyle` 从令牌读取（写法见 `core-kernel`「四之二」getCssVar），勿把品牌色写死在业务代码。
 3. 条形码 `type` 与 `options.format` 同时存在时，`type` 优先级更高。

package/references/workflow-bpmn.md

@@ -148,17 +148,17 @@ onBeforeUnmount(() => {
 </template>
 
 <style>
-/* BPMN 高亮样式（全局，不加 scoped） */
+/* BPMN 高亮样式（全局，不加 scoped）；色值走语义变量，设计规范生效期由令牌自动覆写 */
 :deep(.bpmn-active) .djs-visual > :nth-child(1) {
-  fill: #409eff !important;
-  stroke: #409eff !important;
+  fill: var(--el-color-primary) !important;
+  stroke: var(--el-color-primary) !important;
 }
 :deep(.bpmn-finished) .djs-visual > :nth-child(1) {
-  fill: #67c23a !important;
-  stroke: #67c23a !important;
+  fill: var(--el-color-success) !important;
+  stroke: var(--el-color-success) !important;
 }
 :deep(.bpmn-flow-finished) .djs-visual > :nth-child(1) {
-  stroke: #67c23a !important;
+  stroke: var(--el-color-success) !important;
 }
 </style>
 ```