@agile-team/wl-skills-ui 1.8.3 → 1.8.5

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to **@agile-team/wl-skills-ui** will be documented in this f
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [1.8.5] - 2026-05-17
+
+### Added
+
+- **R025**：检测 defineColumns 列中 `options:[]` 纯文本退化，提示升级为 `renderTagSlot` / `renderDictClassifyTag` 彩色标签。
+- **R026**：检测模板中原生 HTML 元素（`<table>/<input>/<select>/<button>/<textarea>`），提示替换为对应 Element Plus 组件以纳入统一风格体系。
+- fixture 测试覆盖 R025/R026（20 条自动化测试）。
+
 ## [1.8.3] - 2026-05-13
 
 ### Added

package/README.md

@@ -213,15 +213,13 @@ yarn add @agile-team/wl-skills-ui
 
 ## 版本亮点
 
-当前 v1.8.3：
-
-- `scan --only R001,R016` / `--skip R031-R037` 规则级过滤（支持范围展开）
-- `exempt init --target src` 智能扫描个性化目录，自动生成 `.wl-exempt.json`
-- **修复**搜索区字号统一 12px；必填星号 `* *` 去重
-- **scanner fixture 测试集**（16 条，`npm test`）+ **SCSS 链路检查**（`npm run check:scss`）
-- `scan --baseline` 一步漂移对比 + **drift.mjs** / MCP `wl_ui_drift`
-- **R-rule 单一事实源** `standards/rules.json`（29 条），五向一致性守卫
-- **长效治理方案** `docs/governance-long-term.md`
+当前 v1.8.5：
+
+- **R025** 语义合规：`options:[]` 退化检测 → 提示升级 `renderTagSlot` / `renderDictClassifyTag`
+- **R026** 原生 HTML 拦截：`<table>/<input>/<select>/<button>/<textarea>` → 提示替换 el-* 组件
+- `scan --only/--skip` 规则过滤 + `exempt init` 智能豁免脚手架
+- 搜索区字号统一 12px / 必填星号去重 / 20 条 fixture 自动化测试
+- `scan --baseline` 漂移对比 + SCSS 链路检查 + R-rule 单一事实源（31 条）
 
 历史亮点（v1.7.1）：
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agile-team/wl-skills-ui",
-  "version": "1.8.3",
+  "version": "1.8.5",
   "description": "企业级 UI 风格对齐框架 — Vue + Element Plus 项目通用化妆/原生双模式（tokens / element / vendors / layouts / runtime / scanner / fixer / skills）",
   "type": "module",
   "main": "./es/index.js",
@@ -134,4 +134,4 @@
       "eslint --fix --no-cache"
     ]
   }
-}
+}

package/scanner/__tests__/fixtures/r025-fail.vue

@@ -0,0 +1,7 @@
+<template><BaseTable :columns="columns" /></template>
+<script setup>
+const columns = [
+  { label: "状态", name: "status", options: STATUS_OPTIONS },
+  { label: "类型", name: "type", options: [{ label: '启用', value: 1 }, { label: '禁用', value: 0 }] },
+]
+</script>

package/scanner/__tests__/fixtures/r025-pass.vue

@@ -0,0 +1,7 @@
+<template><BaseTable :columns="columns" /></template>
+<script setup>
+const columns = [
+  { label: "状态", name: "status", defaultSlot: ({ row }) => renderDictClassifyTag(row.status, 'dictKey') },
+  { label: "名称", name: "name" },
+]
+</script>

package/scanner/__tests__/fixtures/r026-fail.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <table>
+      <tr><td>数据</td></tr>
+    </table>
+    <input type="text" v-model="name" />
+    <select v-model="type">
+      <option value="a">A</option>
+    </select>
+    <button @click="submit">提交</button>
+    <textarea v-model="remark"></textarea>
+  </div>
+</template>

package/scanner/__tests__/fixtures/r026-pass.vue

@@ -0,0 +1,11 @@
+<template>
+  <el-form>
+    <el-form-item label="名称">
+      <el-input v-model="name" />
+    </el-form-item>
+    <el-form-item label="类型">
+      <el-select v-model="type"><el-option label="A" value="a" /></el-select>
+    </el-form-item>
+    <el-button type="primary">提交</el-button>
+  </el-form>
+</template>

package/scanner/rules/index.mjs

@@ -17,6 +17,7 @@ import { colorRules } from "./color.mjs";
 import { dialogRules } from "./dialog.mjs";
 import { tagRules } from "./tag.mjs";
 import { componentFamilyRules } from "./componentFamily.mjs";
+import { semanticRules } from "./semantic.mjs";
 
 export const BUILT_IN_RULES = [
   ...tableRules,
@@ -26,6 +27,7 @@ export const BUILT_IN_RULES = [
   ...dialogRules,
   ...tagRules,
   ...componentFamilyRules,
+  ...semanticRules,
 ];
 
 const _externalRules = [];

package/scanner/rules/semantic.mjs

@@ -0,0 +1,94 @@
+/** scanner/rules/semantic.mjs — 语义合规规则：R025 R026
+ *
+ *  R025: defineColumns 列定义中 options:[] 退化为纯文本（应用 renderTagSlot / renderDictClassifyTag）
+ *  R026: 模板中使用原生 HTML 元素（<table>/<input>/<select>/<button>/<textarea>），
+ *        应替换为 Element Plus 组件以纳入统一风格体系
+ */
+import { lineOf, issue, findTags } from "./_shared.mjs";
+
+export const semanticRules = [
+  // R025: options:[] 退化检测
+  {
+    id: "R025",
+    category: "table",
+    severity: "warning",
+    name: "defineColumns 列使用 options:[] 纯文本渲染状态/分类（应使用 renderTagSlot / renderDictClassifyTag）",
+    checkScript(script, file, lineOffset) {
+      const issues = [];
+      const lines = script.split("\n");
+      for (let i = 0; i < lines.length; i++) {
+        // 检测 options: [...] 或 options: SOME_VAR
+        if (!/\boptions\s*:\s*[\[A-Z]/.test(lines[i])) continue;
+        // 排除 parseArgs / CLI 等非列定义上下文
+        const blockStart = Math.max(0, i - 8);
+        const blockEnd = Math.min(lines.length, i + 5);
+        const block = lines.slice(blockStart, blockEnd).join("\n");
+        // 必须在列定义上下文中（有 label: 或 name: 或 prop:）
+        if (!/\blabel\s*:/.test(block) && !/\bname\s*:/.test(block) && !/\bprop\s*:/.test(block)) continue;
+        // 已有渲染器则跳过
+        if (/defaultSlot|defaultNode|renderTag|renderDictClassify|renderBadge|renderEnable|cellRenderer/.test(block)) continue;
+        // 排除 type: "selection" / "index" / "expand"
+        if (/type\s*:\s*["'](selection|index|expand)["']/.test(block)) continue;
+        const labelMatch = block.match(/label\s*:\s*["']([^"']+)["']/);
+        const label = labelMatch ? labelMatch[1] : "(未知列)";
+        issues.push({
+          file,
+          line: lineOffset + i + 1,
+          rule: "R025",
+          category: "table",
+          severity: "warning",
+          description: `列 "${label}" 使用 options:[] 纯文本渲染，视觉无颜色区分`,
+          suggestion: `替换为 defaultSlot: ({ row }) => renderDictClassifyTag(row.xxx, 'dictKey') 或 renderTagSlot(row.xxx, MAP)，移除 options`,
+        });
+      }
+      return issues;
+    },
+  },
+
+  // R026: 原生 HTML 元素应换 Element Plus 组件
+  {
+    id: "R026",
+    category: "form",
+    severity: "warning",
+    name: "模板使用原生 HTML 元素，应替换为 Element Plus 组件以纳入统一风格体系",
+    check(template, file, lineOffset) {
+      const issues = [];
+      const NATIVE_TO_EL = {
+        table: { el: "el-table", reason: "原生 <table> 不受 wl-skills-ui 表格样式覆盖" },
+        input: { el: "el-input", reason: "原生 <input> 不受统一 size/密度/圆角控制" },
+        select: { el: "el-select", reason: "原生 <select> 不受统一下拉样式控制" },
+        textarea: { el: "el-input type=\"textarea\"", reason: "原生 <textarea> 不受统一输入框样式控制" },
+        button: { el: "el-button", reason: "原生 <button> 不受统一按钮样式控制" },
+      };
+      for (const [nativeTag, { el, reason }] of Object.entries(NATIVE_TO_EL)) {
+        // 匹配 <table / <input / <select 等原生标签，排除 el-table / el-input 等
+        const re = new RegExp(`<${nativeTag}(?:\\s|>|/)`, "g");
+        let m;
+        while ((m = re.exec(template)) !== null) {
+          // 排除已是组件前缀的情况：el-table, el-input 等
+          const before = template.slice(Math.max(0, m.index - 10), m.index);
+          if (/[-\w]$/.test(before)) continue;
+          // 排除注释
+          const lineStart = template.lastIndexOf("\n", m.index) + 1;
+          const lineText = template.slice(lineStart, m.index);
+          if (/<!--/.test(lineText) && !(/-->/.test(lineText))) continue;
+          if (/^\s*\/\//.test(lineText)) continue;
+          // 排除 slot/template 内嵌的特殊情况（如 <table> 在 rich-text/markdown 中）
+          // 但不做过度排除，让开发者自行决定豁免
+          issues.push(
+            issue(
+              file,
+              lineOf(template, m.index, lineOffset),
+              "R026",
+              "form",
+              "warning",
+              `${reason}，建议替换为 <${el}>`,
+              `将 <${nativeTag}> 替换为 <${el}>，确保纳入 wl-skills-ui 风格体系`,
+            ),
+          );
+        }
+      }
+      return issues;
+    },
+  },
+];

package/standards/rules.json

@@ -387,6 +387,30 @@
       "autoFixable": false,
       "scanner": "scanner/rules/componentFamily.mjs",
       "skills": ["element/component-family"]
+    },
+    {
+      "id": "R025",
+      "category": "table",
+      "severity": "warning",
+      "title": "defineColumns 列禁止用 options:[] 纯文本渲染状态/分类",
+      "rationale": "options:[] 是 BaseTable 内建的最简字典渲染，只出文字无颜色区分；应升级为 renderTagSlot / renderDictClassifyTag 以获得彩色标签。",
+      "appliesTo": ["defineColumns", "columnsDef"],
+      "autoFixable": false,
+      "manualReason": "需确定字典 key 和颜色映射",
+      "scanner": "scanner/rules/semantic.mjs",
+      "skills": ["vendors/base-table", "element/el-table"]
+    },
+    {
+      "id": "R026",
+      "category": "form",
+      "severity": "warning",
+      "title": "模板禁止使用原生 HTML 元素（table/input/select/button/textarea）",
+      "rationale": "原生 HTML 元素不受 wl-skills-ui 样式体系覆盖（size/密度/圆角/token），必须替换为对应 Element Plus 组件。",
+      "appliesTo": ["<table>", "<input>", "<select>", "<button>", "<textarea>"],
+      "autoFixable": false,
+      "manualReason": "需根据业务场景选择正确的 el-* 组件和属性",
+      "scanner": "scanner/rules/semantic.mjs",
+      "skills": ["element/el-form", "element/el-table"]
     }
   ]
 }

package/styles/element/_dialog.scss

@@ -1,20 +1,20 @@
 // styles/element/_dialog.scss — el-dialog / el-message-box 覆盖
 
-.el-message-box .el-message-box__status {
+html body .el-message-box .el-message-box__status {
   top: 12px !important;
 }
 
 // jh-ui dialog.scss 标题色为硬编码 #262626，覆盖为 Token
-html .el-dialog__title {
+html body .el-dialog__title {
   color: var(--el-text-color-primary);
 }
 
 // EP 原生 fullscreen prop 场景：全屏与关闭两个 headerbtn 间距收紧
 // 注：自定义全屏图标（.dialog-fullscreen-action）不受此影响
-.el-dialog__headerbtn {
+html body .el-dialog__headerbtn {
   right: 8px;
 }
-.el-dialog__headerbtn + .el-dialog__headerbtn {
+html body .el-dialog__headerbtn+.el-dialog__headerbtn {
   right: 30px;
 }
 

package/styles/element/_form.scss

@@ -4,24 +4,24 @@ html body {
   --wk-form-control-radius: var(--el-border-radius-base, 6px);
 }
 
-.el-form-item--small {
+html body .el-form-item--small {
   margin-bottom: 8px;
 }
 
 // 解决 el-form-item 出现错误提示时底部 margin 增加的问题
-.is-error.el-form-item--small {
+html body .is-error.el-form-item--small {
   margin-bottom: 18px !important;
 }
 
 // ── 全局输入框圆角统一（6px，与搜索区保持一致）──────────────────────────────
-.el-input__wrapper,
-.el-select__wrapper,
-.el-select .el-select__wrapper,
-.el-date-editor.el-input__wrapper,
-.el-date-editor .el-input__wrapper,
-.el-input-number .el-input__wrapper,
-.el-cascader .el-input__wrapper,
-.el-autocomplete .el-input__wrapper,
-.el-textarea__inner {
+html body .el-input__wrapper,
+html body .el-select__wrapper,
+html body .el-select .el-select__wrapper,
+html body .el-date-editor.el-input__wrapper,
+html body .el-date-editor .el-input__wrapper,
+html body .el-input-number .el-input__wrapper,
+html body .el-cascader .el-input__wrapper,
+html body .el-autocomplete .el-input__wrapper,
+html body .el-textarea__inner {
   border-radius: var(--wk-form-control-radius) !important;
 }

package/styles/element/_pagination.scss

@@ -1,6 +1,6 @@
 // styles/element/_pagination.scss — el-pagination 精致化覆盖
 
-.el-pagination {
+html body .el-pagination {
   --el-pagination-button-width: 24px;
   --el-pagination-button-height: 24px;
   --el-pagination-button-font-size: 12px;

package/styles/element/_table.scss

@@ -1,7 +1,7 @@
 // styles/element/_table.scss — el-table 表头颜色覆盖
 // jh-ui table.scss 表头颜色为硬编码，此处用 CSS 变量覆盖
 
-html .el-table {
+html body .el-table {
   .el-table__header-wrapper th,
   .el-table__fixed-header-wrapper th {
     color: var(--el-text-color-primary, #303133);
@@ -28,4 +28,4 @@ html .el-table {
     width: 100%;
     margin: 0 auto;
   }
-}
+}

package/styles/presets/security.scss

@@ -12,7 +12,7 @@
 @forward '../element/index';
 @forward '../vendors/index';
 
-:root {
+:root body {
   --el-color-primary: #2254f4;
     --el-color-primary-light-1: #3865f5;
     --el-color-primary-light-2: #5178f6;

package/styles/tokens/index.scss

@@ -77,3 +77,154 @@ $wk-component-size-large: var(--el-component-size-large) !default;
 $wk-sidebar-bg: var(--el-sidebar-bg) !default;
 $wk-sidebar-bg-active: var(--el-sidebar-bg-active) !default;
 $wk-sidebar-width: var(--el-sidebar-width) !default;
+
+// ── CSS 自定义属性输出 ─────────────────────────────────────────────────────
+// 与 design/tokens/base.css 保持同步。
+// 作用：让任何 @forward tokens/index 的 preset 自动将 CSS 变量打入构建产物，
+//       不再依赖 index.html <link> 或 JS import tokens.css。
+// 选择器 :root body 特异性 (0,1,1) > Element Plus 的 :root (0,1,0)，
+// 保证无论 CSS 加载顺序如何，我们的变量始终优先。
+:root body {
+  --el-color-primary: #2254f4;
+  --el-color-primary-light-1: #3865f5;
+  --el-color-primary-light-2: #5178f6;
+  --el-color-primary-light-3: #7a98f8;
+  --el-color-primary-light-4: #91aaf9;
+  --el-color-primary-light-5: #a8bbfa;
+  --el-color-primary-light-6: #bfccfc;
+  --el-color-primary-light-7: #d3ddfd;
+  --el-color-primary-light-8: #e6ebfe;
+  --el-color-primary-light-9: #f2f5ff;
+  --el-color-primary-dark-1: #1b43c3;
+  --el-color-primary-dark-2: #1738a3;
+  --el-color-primary-dark-3: #102873;
+  --el-color-primary-dark-4: #0a1a4d;
+  --el-color-success: #2bb268;
+  --el-color-success-light-1: #40ba77;
+  --el-color-success-light-2: #55c286;
+  --el-color-success-light-3: #6bcb95;
+  --el-color-success-light-4: #80d3a4;
+  --el-color-success-light-5: #95dbb4;
+  --el-color-success-light-6: #aae3c3;
+  --el-color-success-light-7: #bfebd2;
+  --el-color-success-light-8: #d5f4e1;
+  --el-color-success-light-9: #eaf9f0;
+  --el-color-success-dark-1: #229051;
+  --el-color-success-dark-2: #1b733f;
+  --el-color-success-dark-3: #14562f;
+  --el-color-success-dark-4: #0d3a20;
+  --el-color-warning: #ea9a13;
+  --el-color-warning-light-1: #eca42b;
+  --el-color-warning-light-2: #efae42;
+  --el-color-warning-light-3: #f1b85a;
+  --el-color-warning-light-4: #f3c171;
+  --el-color-warning-light-5: #f5cb89;
+  --el-color-warning-light-6: #f7d5a1;
+  --el-color-warning-light-7: #f9dfb8;
+  --el-color-warning-light-8: #fce8d0;
+  --el-color-warning-light-9: #fef2e7;
+  --el-color-warning-dark-1: #c47f0e;
+  --el-color-warning-dark-2: #9d650a;
+  --el-color-warning-dark-3: #754a07;
+  --el-color-warning-dark-4: #4e3004;
+  --el-color-danger: #bb2d3f;
+  --el-color-danger-light-1: #c34253;
+  --el-color-danger-light-2: #ca5766;
+  --el-color-danger-light-3: #d16b78;
+  --el-color-danger-light-4: #d8808b;
+  --el-color-danger-light-5: #dd969f;
+  --el-color-danger-light-6: #e4abb2;
+  --el-color-danger-light-7: #e8c0c5;
+  --el-color-danger-light-8: #f0d5d9;
+  --el-color-danger-light-9: #f7eaec;
+  --el-color-danger-dark-1: #962433;
+  --el-color-danger-dark-2: #711b26;
+  --el-color-danger-dark-3: #4b1219;
+  --el-color-danger-dark-4: #26090d;
+  --el-color-error: #bb2d3f;
+  --el-color-error-light-1: #c34253;
+  --el-color-error-light-2: #ca5766;
+  --el-color-error-light-3: #d16b78;
+  --el-color-error-light-4: #d8808b;
+  --el-color-error-light-5: #dd969f;
+  --el-color-error-light-6: #e4abb2;
+  --el-color-error-light-7: #e8c0c5;
+  --el-color-error-light-8: #f0d5d9;
+  --el-color-error-light-9: #f7eaec;
+  --el-color-error-dark-1: #962433;
+  --el-color-error-dark-2: #711b26;
+  --el-color-error-dark-3: #4b1219;
+  --el-color-error-dark-4: #26090d;
+  --el-color-info: #909399;
+  --el-color-info-light-1: #9b9ea3;
+  --el-color-info-light-2: #a7a9ae;
+  --el-color-info-light-3: #b2b4b8;
+  --el-color-info-light-4: #bdbfc3;
+  --el-color-info-light-5: #c9cacd;
+  --el-color-info-light-6: #d4d5d7;
+  --el-color-info-light-7: #dfe0e2;
+  --el-color-info-light-8: #ebebec;
+  --el-color-info-light-9: #f6f6f7;
+  --el-color-info-dark-1: #909399;
+  --el-color-info-dark-2: #909399;
+  --el-color-info-dark-3: #909399;
+  --el-color-info-dark-4: #909399;
+  --el-text-color-primary: rgba(0, 0, 0, 0.85);
+  --el-text-color-regular: rgba(0, 0, 0, 0.65);
+  --el-text-color-secondary: rgba(0, 0, 0, 0.45);
+  --el-text-color-placeholder: rgba(0, 0, 0, 0.25);
+  --el-text-color-disabled: rgba(0, 0, 0, 0.25);
+  --el-border-color: #d9d9d9;
+  --el-border-color-light: #f0f0f0;
+  --el-border-color-lighter: #f5f5f5;
+  --el-border-color-extra-light: rgba(0, 0, 0, 0.04);
+  --el-border-color-dark: rgba(0, 0, 0, 0.06);
+  --el-border-color-darker: rgba(0, 0, 0, 0.15);
+  --el-fill-color: #f0f0f0 !important;
+  --el-fill-color-light: rgba(0, 0, 0, 0.02) !important;
+  --el-fill-color-lighter: rgba(0, 0, 0, 0.04) !important;
+  --el-fill-color-dark: rgba(0, 0, 0, 0.45) !important;
+  --el-fill-color-darker: rgba(0, 0, 0, 0.75) !important;
+  --el-fill-color-blank: #ffffff !important;
+  --el-mask-color: rgba(0, 0, 0, 0.45);
+  --el-mask-color-extra-light: rgba(0, 0, 0, 0.30);
+  --el-font-size-extra-large: 32px;
+  --el-font-size-large: 24px;
+  --el-font-size-medium: 16px;
+  --el-font-size-base: 14px;
+  --el-font-size-small: 12px;
+  --el-font-size-extra-small: 10px;
+  --el-font-weight-primary: 500;
+  --el-font-weight-light: 300;
+  --el-font-weight-regular: 400;
+  --el-font-weight-medium: 500;
+  --el-font-weight-semi: 600;
+  --el-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.05);
+  --el-box-shadow-light: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
+  --el-box-shadow-lighter: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
+  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
+  --el-border-radius-base: 4px;
+  --el-border-radius-small: 2px;
+  --el-border-radius-round: 20px;
+  --el-border-radius-circle: 100%;
+  --el-line-height-1: 20px;
+  --el-line-height-2: 20px;
+  --el-line-height-3: 20px;
+  --el-line-height-4: 20px;
+  --el-line-height-5: 20px;
+  --el-line-height-6: 20px;
+  --el-line-height-7: 20px;
+  --el-line-height-8: 20px;
+  --el-line-height-9: 20px;
+  --el-component-size-small: 28px;
+  --el-component-size-large: 40px;
+  --el-component-size-default: 32px;
+  --el-padding: 12px;
+  --el-padding-large: 24px;
+  --el-padding-small: 12px;
+  --el-sidebar-bg: #10182C;
+  --el-sidebar-bg-active: rgba(255, 255, 255, 0.11);
+  --el-sidebar-width: 240px;
+  --el-menu-item-font-size: 16px;
+  --el-menu-item-height: 40px;
+}