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

package/CHANGELOG.md

@@ -4,6 +4,20 @@ 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
+
+### 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/es/{chunk-QDTNMM7W.js → chunk-FMVZ54BY.js}

@@ -166,8 +166,40 @@ function isOpVisible(item) {
   if (typeof item.show === "function") return item.show();
   return item.show !== false;
 }
+var KNOWN_OP_TYPES = /* @__PURE__ */ new Set([
+  "view",
+  "edit",
+  "del",
+  "danger",
+  "log",
+  "ok",
+  "send",
+  "chip",
+  "link"
+]);
+var __opWarned = /* @__PURE__ */ new Set();
+function warnUnknownOpType(item) {
+  let isDev = true;
+  try {
+    const g = globalThis;
+    if (g.process && g.process.env && g.process.env.NODE_ENV === "production") {
+      isDev = false;
+    }
+  } catch {
+  }
+  if (!isDev) return;
+  const t = item.type;
+  if (t && KNOWN_OP_TYPES.has(t)) return;
+  const key = String(t);
+  if (__opWarned.has(key)) return;
+  __opWarned.add(key);
+  console.warn(
+    '[@agile-team/wl-skills-ui renderOps] \u68C0\u6D4B\u5230\u672A\u77E5\u7684 type="' + key + '"\uFF0C\u5C06\u6309 link \u515C\u5E95\u6E32\u67D3\u4E3A\u6587\u5B57\u6309\u94AE\u3002\n  \u8BF7\u6539\u4E3A\uFF1Aview | edit | del | danger | log | ok | send | chip | link\n  \u8BE6\u89C1 runtime/core/types.ts OpItem \u5B9A\u4E49\u3002'
+  );
+}
 function renderOps(items) {
   const visible = items.filter(isOpVisible);
+  if (visible.length) visible.forEach(warnUnknownOpType);
   const iconItems = visible.filter((i) => i.type in ICON_PRESETS);
   const otherItems = visible.filter((i) => !(i.type in ICON_PRESETS));
   const nodes = [];

package/es/common-preset.js

@@ -1,5 +1,5 @@
-import { renderTagNode, renderClassifyTag, registerColumnAutoMaps, renderRatingLevel, renderBadge } from './chunk-QDTNMM7W.js';
-export { registerDictColorMap, registerDictColorMaps, renderDictClassifyTag, setDictResolver } from './chunk-QDTNMM7W.js';
+import { renderTagNode, renderClassifyTag, registerColumnAutoMaps, renderRatingLevel, renderBadge } from './chunk-FMVZ54BY.js';
+export { registerDictColorMap, registerDictColorMaps, renderDictClassifyTag, setDictResolver } from './chunk-FMVZ54BY.js';
 
 // runtime/presets/common.ts
 var RISK_LEVEL_MAP = {

package/es/index.js

@@ -1 +1 @@
-export { AUDIT_STATUS_MAP, ENABLE_STATUS_MAP, RATING_LEVEL_COLORS, VERIFY_STATUS_MAP, clearColumnAutoMap, defineColumns, getColumnAutoMap, registerColumnAutoMap, registerColumnAutoMaps, registerDictColorMap, registerDictColorMaps, renderAuditStatus, renderBadge, renderClassifyTag, renderCountBadge, renderDangerText, renderDictClassifyTag, renderEnableStatus, renderOps, renderRatingLevel, renderTagNode, renderTagSlot, renderVerifyStatus, setDictResolver } from './chunk-QDTNMM7W.js';
+export { AUDIT_STATUS_MAP, ENABLE_STATUS_MAP, RATING_LEVEL_COLORS, VERIFY_STATUS_MAP, clearColumnAutoMap, defineColumns, getColumnAutoMap, registerColumnAutoMap, registerColumnAutoMaps, registerDictColorMap, registerDictColorMaps, renderAuditStatus, renderBadge, renderClassifyTag, renderCountBadge, renderDangerText, renderDictClassifyTag, renderEnableStatus, renderOps, renderRatingLevel, renderTagNode, renderTagSlot, renderVerifyStatus, setDictResolver } from './chunk-FMVZ54BY.js';

package/es/presets/security.js

@@ -1,4 +1,4 @@
-import { renderTagNode, registerDictColorMaps, registerColumnAutoMaps } from '../chunk-QDTNMM7W.js';
+import { renderTagNode, registerDictColorMaps, registerColumnAutoMaps } from '../chunk-FMVZ54BY.js';
 
 // runtime/presets/security.ts
 var VIOLATION_STATUS_MAP = {

package/package.json

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

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"]
     }
   ]
 }