@agile-team/wl-skills-ui 1.8.6 → 1.8.7

package/CHANGELOG.md

@@ -4,19 +4,15 @@ 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.6] - 2026-05-17
-
-### Added
-
-- **`renderOps` 运行时类型守门**：dev 模式下检测到 `OpItem.type` 不在 `view | edit | del | danger | log | ok | send | chip | link` 集合中时，`console.warn` 一次性提示并按 `link` 兜底渲染。修复下游项目（`strict: false`）传错 type 时图标静默降级为纯文字、毫无察觉的隐性体验问题。production 环境无任何副作用。
-
-## [1.8.5] - 2026-05-17
+## [1.8.7] - 2026-05-17
 
 ### Added
 
+- **loading 遮罩质感优化**：`_base-table.scss` 统一覆盖 BaseTable / AG Grid 的 `v-loading` 遮罩，灰色蒙层 → 毛玻璃半透明（`backdrop-filter: blur(1px)` + `rgba(255,255,255,0.45)`），数据切换近乎无感。
 - **R025**：检测 defineColumns 列中 `options:[]` 纯文本退化，提示升级为 `renderTagSlot` / `renderDictClassifyTag` 彩色标签。
 - **R026**：检测模板中原生 HTML 元素（`<table>/<input>/<select>/<button>/<textarea>`），提示替换为对应 Element Plus 组件以纳入统一风格体系。
-- fixture 测试覆盖 R025/R026（20 条自动化测试）。
+- **R027**：检测业务代码硬编码 `.el-loading-mask` 背景色，提示删除（由 wl-skills-ui 统一覆盖）。
+- fixture 测试覆盖 R025/R026/R027（22 条自动化测试）。
 
 ## [1.8.3] - 2026-05-13
 

package/README.md

@@ -213,13 +213,14 @@ yarn add @agile-team/wl-skills-ui
 
 ## 版本亮点
 
-当前 v1.8.5：
+当前 v1.8.7：
 
-- **R025** 语义合规：`options:[]` 退化检测 → 提示升级 `renderTagSlot` / `renderDictClassifyTag`
-- **R026** 原生 HTML 拦截：`<table>/<input>/<select>/<button>/<textarea>` → 提示替换 el-* 组件
+- **loading 遮罩质感优化**：BaseTable / AG Grid 的 v-loading 由灰色蒙层改为毛玻璃半透明（backdrop-filter），数据切换无感
+- **R027** 检测业务代码硬编码 `.el-loading-mask` 背景色 → 提示删除，由包统一覆盖
+- **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 条）
+- `scan --baseline` 漂移对比 + SCSS 链路检查 + R-rule 单一事实源（32 条）
 
 历史亮点（v1.7.1）：
 

package/package.json

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

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

@@ -0,0 +1,8 @@
+<template>
+  <BaseTable :columns="columns" v-loading="loading" />
+</template>
+<style scoped>
+.el-loading-mask {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+</style>

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

@@ -0,0 +1,8 @@
+<template>
+  <BaseTable :columns="columns" v-loading="loading" />
+</template>
+<style scoped>
+.my-table {
+  border-radius: 6px;
+}
+</style>

package/scanner/rules/semantic.mjs

@@ -24,9 +24,19 @@ export const semanticRules = [
         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 (
+          !/\blabel\s*:/.test(block) &&
+          !/\bname\s*:/.test(block) &&
+          !/\bprop\s*:/.test(block)
+        )
+          continue;
         // 已有渲染器则跳过
-        if (/defaultSlot|defaultNode|renderTag|renderDictClassify|renderBadge|renderEnable|cellRenderer/.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*["']([^"']+)["']/);
@@ -54,11 +64,26 @@ export const semanticRules = [
     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> 不受统一按钮样式控制" },
+        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 等
@@ -71,7 +96,7 @@ export const semanticRules = [
           // 排除注释
           const lineStart = template.lastIndexOf("\n", m.index) + 1;
           const lineText = template.slice(lineStart, m.index);
-          if (/<!--/.test(lineText) && !(/-->/.test(lineText))) continue;
+          if (/<!--/.test(lineText) && !/-->/.test(lineText)) continue;
           if (/^\s*\/\//.test(lineText)) continue;
           // 排除 slot/template 内嵌的特殊情况（如 <table> 在 rich-text/markdown 中）
           // 但不做过度排除，让开发者自行决定豁免
@@ -91,4 +116,48 @@ export const semanticRules = [
       return issues;
     },
   },
+
+  // R027: 检测业务代码中对 .el-loading-mask 的灰色背景覆盖（应由 wl-skills-ui 统一管控）
+  {
+    id: "R027",
+    category: "style",
+    severity: "warning",
+    name: "业务代码硬编码 el-loading-mask 背景色（应删除，由 wl-skills-ui 统一覆盖）",
+    check() {
+      return [];
+    },
+    checkStyle(styleBlock, file, lineOffset) {
+      const issues = [];
+      const lines = styleBlock.split("\n");
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // 检测 .el-loading-mask 相关的 background 硬编码
+        if (
+          /\.el-loading-mask/.test(line) ||
+          (i > 0 &&
+            /\.el-loading-mask/.test(
+              lines.slice(Math.max(0, i - 5), i).join("\n"),
+            ))
+        ) {
+          if (
+            /background(-color)?\s*:/.test(line) &&
+            !/transparent/.test(line)
+          ) {
+            issues.push(
+              issue(
+                file,
+                lineOffset + i + 1,
+                "R027",
+                "style",
+                "warning",
+                "业务代码硬编码 .el-loading-mask 背景色，与 wl-skills-ui 统一遮罩层冲突",
+                "删除此规则，wl-skills-ui v1.8.5+ 已内置毛玻璃遮罩覆盖（styles/vendors/_base-table.scss）",
+              ),
+            );
+          }
+        }
+      }
+      return issues;
+    },
+  },
 ];

package/standards/rules.json

@@ -411,6 +411,17 @@
       "manualReason": "需根据业务场景选择正确的 el-* 组件和属性",
       "scanner": "scanner/rules/semantic.mjs",
       "skills": ["element/el-form", "element/el-table"]
+    },
+    {
+      "id": "R027",
+      "category": "style",
+      "severity": "warning",
+      "title": "禁止业务代码硬编码 .el-loading-mask 背景色",
+      "rationale": "wl-skills-ui v1.8.5+ 已内置毛玻璃遮罩覆盖（半透明白底 + backdrop-filter），业务侧硬编码会冲突或导致灰色蒙层残留。",
+      "appliesTo": [".el-loading-mask"],
+      "autoFixable": true,
+      "scanner": "scanner/rules/semantic.mjs",
+      "skills": ["vendors/base-table", "element/el-table"]
     }
   ]
 }

package/styles/vendors/_base-table.scss

@@ -5,7 +5,7 @@
 //
 // 【识别规则（供 scanner / AI 使用）】
 //   - 标签：<BaseTable> / <base-table> / <BaseDataTable>
-//   - 类名：.base-table-wrapper / .base-table-container / .base-table-* 
+//   - 类名：.base-table-wrapper / .base-table-container / .base-table-*
 //   - props：通常包含 columns / data / hook / renderType
 //
 // 【设计语言】对齐 Element Plus el-table 的视觉规范（参见 element/_table.scss）
@@ -36,6 +36,42 @@
   }
 }
 
+// ── v-loading 遮罩层质感优化 ──────────────────────────────────────────────────
+// 目的：去除 BaseTable / AG Grid 切换数据时的灰色蒙层，替换为轻量毛玻璃 + 微透明效果
+// 体验：数据切换几乎无感，加载状态通过 spinner 动画暗示，不阻断阅读上下文
+.app-page-container,
+.base-table-wrapper,
+.base-table-container,
+.ag-root-wrapper {
+
+  >.el-loading-mask,
+  .el-loading-mask {
+    background-color: rgba(255, 255, 255, 0.45) !important;
+    backdrop-filter: blur(1px);
+    transition: opacity 0.2s ease;
+  }
+
+  .el-loading-spinner {
+
+    // 缩小默认 spinner，减少视觉干扰
+    .circular {
+      width: 28px;
+      height: 28px;
+    }
+
+    .el-loading-text {
+      font-size: 12px;
+      color: var(--el-color-primary);
+      margin-top: 4px;
+    }
+  }
+}
+
+// 全屏 loading 也统一（如 v-loading.fullscreen）
+body>.el-loading-mask {
+  background-color: rgba(255, 255, 255, 0.6) !important;
+  backdrop-filter: blur(2px);
+}
 // ── 扩展位 ────────────────────────────────────────────────────────────────────
 // 当业务侧 BaseTable 有更多结构性 class（如 base-table__toolbar / base-table__footer），
 // 在这里继续追加，不要污染全局选择器。