@agile-team/wl-skills-ui 1.8.2 → 1.8.4

package/CHANGELOG.md

@@ -4,6 +4,13 @@ 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.3] - 2026-05-13
+
+### Added
+
+- **scan --only / --skip**：支持规则级过滤，`--only R001,R016` 仅跑指定规则，`--skip R031-R037` 排除范围（支持连字符范围展开）。
+- **exempt init 脚手架**：`wl-scan exempt init --target src` 智能扫描 src 下 big-screen/dashboard/chart 等个性化目录，自动生成 `.wl-exempt.json` 模板。
+
 ## [1.8.2] - 2026-05-13
 
 ### Fixed

package/README.md

@@ -213,14 +213,15 @@ yarn add @agile-team/wl-skills-ui
 
 ## 版本亮点
 
-当前 v1.8.2：
+当前 v1.8.3：
 
-- **修复**搜索区字号 13px/12px 混杂 → 统一 12px；必填星号 `* *` 重复 → 精确单颗控制
-- 新增 **scanner fixture 测试集**（16 条自动化测试，`npm test`）和 **SCSS 链路检查**（`npm run check:scss`）
-- `scan --baseline` 一步到位：扫描后自动对比基线输出漂移报告，CI 增量门槛
-- **漂移检测** `scanner/drift.mjs` + CLI `wl-scan drift` + MCP `wl_ui_drift`
+- `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`（基线 / 豁免 / 漂移 / 版本钉死 / AI 守护）
+- **长效治理方案** `docs/governance-long-term.md`
 
 历史亮点（v1.7.1）：
 

package/package.json

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

package/scanner/index.mjs

@@ -4,6 +4,8 @@
  *
  * 用法：
  *   wl-scan scan --target <path>          # 风格扫描
+ *   wl-scan scan --target <path> --only R001,R016
+ *   wl-scan scan --target <path> --skip R031-R037
  *   wl-scan scan --target <path> --outFile report.md
  *   wl-scan scan --target <path> --output json
  *   wl-scan check --project <path>        # 接入完整性检查
@@ -12,6 +14,7 @@
  *   wl-scan all --project <path>          # 接入检查 + 风格扫描 + 报告
  *   wl-scan init                          # 打印接入指引
  *   wl-scan drift --baseline <f> --current <f>  # 漂移检测
+ *   wl-scan exempt init --target <path>          # 生成 .wl-exempt.json 豁免模板
  *   wl-scan snapshot list                  # 列出快照
  *   wl-scan snapshot rollback [--id <id>]  # 回退到快照（默认最新）
  *   wl-scan snapshot diff [--id <id>]      # 查看快照与当前差异
@@ -45,6 +48,7 @@ const SUBCOMMANDS = new Set([
   "all",
   "init",
   "drift",
+  "exempt",
   "snapshot",
 ]);
 let subcommand = "scan";
@@ -71,6 +75,8 @@ const { values } = parseArgs({
     exempt: { type: "string", default: "" },
     baseline: { type: "string", default: "" },
     current: { type: "string", default: "" },
+    only: { type: "string", default: "" },
+    skip: { type: "string", default: "" },
   },
   strict: false,
 });
@@ -199,6 +205,24 @@ function runScan(targetDir, excludeDirs, exemptConfig) {
   };
 }
 
+// ── 公共：规则范围展开（R031-R037 → R031,R032,...,R037）────────────────────
+function expandRuleRange(input) {
+  const set = new Set();
+  for (const part of input.split(",").map((s) => s.trim())) {
+    const rangeMatch = part.match(/^(R)(\d+)-(R)?(\d+)$/i);
+    if (rangeMatch) {
+      const start = parseInt(rangeMatch[2]);
+      const end = parseInt(rangeMatch[4]);
+      for (let i = Math.min(start, end); i <= Math.max(start, end); i++) {
+        set.add("R" + String(i).padStart(3, "0"));
+      }
+    } else {
+      set.add(part.toUpperCase());
+    }
+  }
+  return set;
+}
+
 // ── 公共：按 layer / vendor / mode 过滤 ─────────────────────────────────────
 function applyFilters(issues) {
   let out = issues;
@@ -216,6 +240,16 @@ function applyFilters(issues) {
   } else if (values.mode === "native") {
     // 原生模式：全部 layer
   }
+  // --only R001,R016 → 仅保留指定规则
+  if (values.only) {
+    const allow = expandRuleRange(values.only);
+    out = out.filter((i) => allow.has(i.rule));
+  }
+  // --skip R031-R037 → 排除指定规则
+  if (values.skip) {
+    const deny = expandRuleRange(values.skip);
+    out = out.filter((i) => !deny.has(i.rule));
+  }
   return out;
 }
 
@@ -267,6 +301,76 @@ if (subcommand === "check") {
   process.exit(values["fail-on-error"] && hasError ? 1 : 0);
 }
 
+if (subcommand === "exempt") {
+  const sub = args[0] || "init";
+  if (sub === "init") {
+    const { existsSync } = await import("node:fs");
+    const projectRoot = resolve(values.project);
+    const targetDir = resolve(values.target);
+    const outPath = join(projectRoot, ".wl-exempt.json");
+    if (existsSync(outPath)) {
+      console.log(`⚠️  ${outPath} 已存在，跳过生成。如需重新生成请先删除。`);
+      process.exit(0);
+    }
+    // 智能扫描目标目录下常见的个性化子目录
+    const EXEMPT_KEYWORDS = [
+      "big-screen",
+      "dashboard",
+      "map-view",
+      "topology",
+      "flow-designer",
+      "report-designer",
+      "chart",
+      "3d",
+      "canvas",
+      "screen",
+      "monitor",
+      "cockpit",
+      "visual",
+    ];
+    const smartPaths = [];
+    function walkForExempt(dir, depth = 0) {
+      if (depth > 4) return;
+      try {
+        for (const entry of readdirSync(dir, { withFileTypes: true })) {
+          if (!entry.isDirectory()) continue;
+          if (["node_modules", "dist", ".git"].includes(entry.name)) continue;
+          const rel = relative(targetDir, join(dir, entry.name)).replace(
+            /\\/g,
+            "/",
+          );
+          if (
+            EXEMPT_KEYWORDS.some((kw) => entry.name.toLowerCase().includes(kw))
+          ) {
+            smartPaths.push(rel + "/**");
+          } else {
+            walkForExempt(join(dir, entry.name), depth + 1);
+          }
+        }
+      } catch {
+        /* ignore permission errors */
+      }
+    }
+    if (existsSync(targetDir)) walkForExempt(targetDir);
+    const { generateExemptTemplate } = await import("./exempt.mjs");
+    const template = JSON.parse(generateExemptTemplate());
+    if (smartPaths.length > 0) {
+      template.exemptPaths = [
+        ...new Set([...smartPaths, ...template.exemptPaths]),
+      ];
+      template.description += `（自动扫描 ${targetDir} 发现 ${smartPaths.length} 个候选目录）`;
+    }
+    writeFileSync(outPath, JSON.stringify(template, null, 2) + "\n", "utf8");
+    console.log(`✅ 已生成 ${outPath}`);
+    if (smartPaths.length > 0) {
+      console.log(`   自动发现 ${smartPaths.length} 个候选豁免目录:`);
+      for (const p of smartPaths) console.log(`     ${p}`);
+    }
+    console.log(`   请人工审核后提交至版本库。`);
+  }
+  process.exit(0);
+}
+
 if (subcommand === "drift") {
   const { driftFromFiles, formatDriftText, formatDriftJson } =
     await import("./drift.mjs");

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;
+}