@agile-team/wl-skills-ui 1.6.2

package/scanner/rules/_shared.mjs

@@ -0,0 +1,134 @@
+/**
+ * scanner/rules/_shared.mjs — 规则引擎公共工具
+ * 所有规则文件均从此处 import 工具函数和 TOKEN_MAP
+ */
+
+/** 计算匹配位置的行号 */
+export function lineOf(text, matchIndex, lineOffset = 0) {
+  return text.slice(0, matchIndex).split("\n").length + lineOffset;
+}
+
+/** 构造 issue 对象（自动推断 layer/vendor，规则可通过 meta 覆盖） */
+export function issue(
+  file,
+  line,
+  rule,
+  category,
+  severity,
+  description,
+  suggestion,
+  meta = {},
+) {
+  const inferred = inferMeta(category);
+  return {
+    file,
+    line,
+    rule,
+    category,
+    severity,
+    description,
+    suggestion,
+    layer: meta.layer ?? inferred.layer,
+    vendor: meta.vendor ?? inferred.vendor,
+  };
+}
+
+/**
+ * 根据 category 推断 layer + vendor 默认值
+ *   - color/token  → L0 / —
+ *   - table/form/dialog/button/tag → L1 / element
+ *   - vendor-base / vendor-jh / vendor-c / vendor-custom / vendor-ag → L2 / 对应 vendor
+ *   - layout-* → L3 / —
+ *   - runtime-* → L4 / —
+ */
+export function inferMeta(category) {
+  if (!category) return { layer: "L1", vendor: "element" };
+  if (category === "color" || category === "token" || category === "style")
+    return { layer: "L0", vendor: null };
+  if (
+    [
+      "table",
+      "form",
+      "dialog",
+      "button",
+      "tag",
+      "pagination",
+      "input",
+      "card",
+      "tabs",
+      "descriptions",
+      "tree",
+      "drawer",
+      "upload",
+      "steps",
+      "overlay",
+      "navigation",
+      "feedback",
+    ].includes(category)
+  )
+    return { layer: "L1", vendor: "element" };
+  if (category.startsWith("vendor-")) {
+    return { layer: "L2", vendor: category.replace("vendor-", "") };
+  }
+  if (category.startsWith("layout-")) {
+    return { layer: "L3", vendor: null };
+  }
+  if (category.startsWith("runtime-")) {
+    return { layer: "L4", vendor: null };
+  }
+  return { layer: "L1", vendor: "element" };
+}
+
+/** 查找完整 HTML/Vue 标签（处理多行、引号嵌套） */
+export function findTags(template, tagName) {
+  const results = [];
+  const pattern = new RegExp(`<${tagName}(?=[\\s/>])`, "g");
+  let m;
+  while ((m = pattern.exec(template)) !== null) {
+    const start = m.index;
+    let i = start + tagName.length + 1;
+    let inSingle = false,
+      inDouble = false;
+    while (i < template.length) {
+      const ch = template[i];
+      if (ch === '"' && !inSingle) inDouble = !inDouble;
+      else if (ch === "'" && !inDouble) inSingle = !inSingle;
+      else if (!inSingle && !inDouble) {
+        if (template.slice(i, i + 2) === "/>") {
+          i += 2;
+          break;
+        }
+        if (ch === ">") {
+          i += 1;
+          break;
+        }
+      }
+      i++;
+    }
+    results.push({ text: template.slice(start, i), index: start });
+  }
+  return results;
+}
+
+/**
+ * CSS Token 映射表（hex → CSS 变量）
+ * 供 R016 / R017 / R018 共同使用
+ */
+export const TOKEN_MAP = {
+  "#409eff": "var(--el-color-primary)",
+  "#3a7afe": "var(--el-color-primary)",
+  "#4368ff": "var(--el-color-primary)",
+  "#002a8f": "var(--el-color-primary)",
+  "#1890ff": "var(--el-color-primary)",
+  "#fb2323": "var(--el-color-danger)",
+  "#f56c6c": "var(--el-color-danger)",
+  "#bb2d3f": "var(--el-color-danger)",
+  "#f5222d": "var(--el-color-danger)",
+  "#0cc859": "var(--el-color-success)",
+  "#67c23a": "var(--el-color-success)",
+  "#52c41a": "var(--el-color-success)",
+  "#ffaf27": "var(--el-color-warning)",
+  "#e6a23c": "var(--el-color-warning)",
+  "#faad14": "var(--el-color-warning)",
+  "#ecf5ff": "var(--el-color-primary-light-9)",
+};

package/scanner/rules/button.mjs

@@ -0,0 +1,97 @@
+/** scanner/rules/button.mjs — 按钮规则：R004 R005 R015 */
+import { lineOf, issue, findTags } from "./_shared.mjs";
+
+export const buttonRules = [
+  // R004: 操作列文字按钮
+  {
+    id: "R004",
+    category: "button",
+    severity: "error",
+    name: "操作列使用旧格式文字按钮而非 renderOps 图标系统",
+    check(template, file, lineOffset) {
+      const issues = [];
+      const btnPattern =
+        /<el-button\b(?![^>]*jh-op-btn)[^>]*@click="handle(?:Edit|Delete|View|Remove|Cancel|Audit|Verify)[^"]*"[^>]*>[^<]*<\/el-button>/g;
+      let m;
+      while ((m = btnPattern.exec(template)) !== null)
+        issues.push(
+          issue(
+            file,
+            lineOf(template, m.index, lineOffset),
+            "R004",
+            "button",
+            "error",
+            "操作列使用文字 el-button，应改为 renderOps 图标按钮系统",
+            'defaultSlot: ({ row }) => renderOps([{ type: "edit", onClick: () => ... }])',
+          ),
+        );
+      return issues;
+    },
+  },
+
+  // R005: 工具栏按钮缺少 icon
+  {
+    id: "R005",
+    category: "button",
+    severity: "warning",
+    name: "工具栏按钮缺少 icon",
+    check(template, file, lineOffset) {
+      const issues = [];
+      for (const tag of findTags(template, "el-button")) {
+        if (!/type=["'](primary|success|warning|danger)["']/.test(tag.text))
+          continue;
+        if (/\blink\b/.test(tag.text)) continue;
+        if (/jh-op-btn/.test(tag.text)) continue;
+        if (!/:?icon=/.test(tag.text))
+          issues.push(
+            issue(
+              file,
+              lineOf(template, tag.index, lineOffset),
+              "R005",
+              "button",
+              "warning",
+              "工具栏 el-button 缺少 icon 属性",
+              '添加 icon="Plus / Edit / Search / Refresh" 等语义图标',
+            ),
+          );
+      }
+      return issues;
+    },
+  },
+
+  // R015: 弹窗嵌套表格操作列用 el-button link
+  {
+    id: "R015",
+    category: "button",
+    severity: "error",
+    name: "弹窗嵌套表格操作列使用文字 el-button（应改为 jh-op-btn 图标按钮）",
+    check(template, file, lineOffset) {
+      const issues = [];
+      if (!file.endsWith("modal.vue")) return issues;
+      const pattern = /<el-button[\s\S]*?link[\s\S]*?<\/el-button>/g;
+      let m;
+      while ((m = pattern.exec(template)) !== null) {
+        const btnText = m[0];
+        if (/取消|确认|确定|关闭|保存|提交/.test(btnText)) continue;
+        if (
+          !/<el-table-column/.test(
+            template.slice(Math.max(0, m.index - 500), m.index),
+          )
+        )
+          continue;
+        issues.push(
+          issue(
+            file,
+            lineOf(template, m.index, lineOffset),
+            "R015",
+            "button",
+            "error",
+            "弹窗嵌套表格操作列使用 el-button link，风格不统一",
+            '改为 <button class="jh-op-btn jh-op-del/view/edit"> + <el-icon>图标</el-icon>',
+          ),
+        );
+      }
+      return issues;
+    },
+  },
+];

package/scanner/rules/color.mjs

@@ -0,0 +1,118 @@
+/** scanner/rules/color.mjs — 颜色 Token 规则：R016 R017 R018 */
+import { lineOf, issue, TOKEN_MAP } from "./_shared.mjs";
+
+export const colorRules = [
+  // R016: <style> 块硬编码 hex
+  {
+    id: "R016",
+    category: "style",
+    severity: "warning",
+    name: "<style> 块存在硬编码 hex 颜色（应替换为 CSS Token 变量）",
+    check() {
+      return [];
+    },
+    checkStyle(styleBlock, file, lineOffset = 0) {
+      const issues = [];
+      styleBlock.split("\n").forEach((line, idx) => {
+        if (/^\s*(\/\/|\*|\/\*)/.test(line)) return;
+        const hexPattern = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})\b/g;
+        let m;
+        while ((m = hexPattern.exec(line)) !== null) {
+          const hex = m[0].toLowerCase();
+          const suggested = TOKEN_MAP[hex];
+          if (suggested)
+            issues.push(
+              issue(
+                file,
+                lineOffset + idx + 1,
+                "R016",
+                "style",
+                "warning",
+                `<style> 块硬编码颜色 "${hex}"，应使用 CSS Token`,
+                `将 "${hex}" 替换为 ${suggested}`,
+              ),
+            );
+        }
+      });
+      return issues;
+    },
+  },
+
+  // R017: <template> 内硬编码 hex
+  {
+    id: "R017",
+    category: "style",
+    severity: "warning",
+    name: "<template> 块存在硬编码 hex 颜色（应替换为 CSS Token 变量）",
+    check(template, file, lineOffset) {
+      const issues = [];
+      const patterns = [
+        /\bcolor\s*=\s*"(#[0-9a-fA-F]{3,8})"/g,
+        /\bcolor\s*=\s*'(#[0-9a-fA-F]{3,8})'/g,
+        /:style\s*=\s*"[^"]*?(#[0-9a-fA-F]{3,8})[^"]*?"/g,
+        /\bstyle\s*=\s*"[^"]*?(#[0-9a-fA-F]{3,8})[^"]*?"/g,
+      ];
+      for (const p of patterns) {
+        let m;
+        while ((m = p.exec(template)) !== null) {
+          const hex = m[1].toLowerCase();
+          const suggested = TOKEN_MAP[hex];
+          if (suggested)
+            issues.push(
+              issue(
+                file,
+                lineOf(template, m.index, lineOffset),
+                "R017",
+                "style",
+                "warning",
+                `template 内硬编码颜色 "${hex}"，应使用 CSS Token`,
+                `将 "${hex}" 替换为 ${suggested}`,
+              ),
+            );
+        }
+      }
+      return issues;
+    },
+  },
+
+  // R018: <script> 块硬编码 hex（ECharts 等）
+  {
+    id: "R018",
+    category: "style",
+    severity: "warning",
+    name: "<script> 块存在硬编码 hex 颜色（ECharts/inline 配色应统一项目色系）",
+    check() {
+      return [];
+    },
+    checkScript(scriptBlock, file, lineOffset = 0) {
+      const SCRIPT_TOKEN_MAP = {
+        ...TOKEN_MAP,
+        "#409eff": "var(--el-color-primary) / CHART_COLORS.primary",
+        "#4368ff": "var(--el-color-primary)",
+      };
+      const issues = [];
+      scriptBlock.split("\n").forEach((line, idx) => {
+        if (/^\s*(\/\/|\*|\/\*)/.test(line)) return;
+        const hexPattern = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})\b/g;
+        let m;
+        while ((m = hexPattern.exec(line)) !== null) {
+          const hex = m[0].toLowerCase();
+          const suggested = SCRIPT_TOKEN_MAP[hex];
+          if (suggested)
+            issues.push(
+              issue(
+                file,
+                lineOffset + idx + 1,
+                "R018",
+                "style",
+                "warning",
+                `<script> 块硬编码颜色 "${hex}"，应改用项目色系常量`,
+                `${hex} → ${suggested}（建议统一使用 src/util/chart-colors.ts CHART_COLORS）`,
+              ),
+            );
+        }
+      });
+      return issues;
+    },
+  },
+];

package/scanner/rules/componentFamily.mjs

@@ -0,0 +1,184 @@
+import { lineOf, issue, findTags } from "./_shared.mjs";
+
+function hasAttr(tagText, attr) {
+  return new RegExp(`\\s:?${attr}\\s*=`).test(tagText);
+}
+
+function hasClassLike(template, names) {
+  return names.some((name) => new RegExp(`class=["'][^"']*${name}[^"']*["']`).test(template));
+}
+
+export const componentFamilyRules = [
+  {
+    id: "R031",
+    category: "card",
+    severity: "info",
+    name: "详情/统计卡片建议使用统一场景 class",
+    check(template, file, lineOffset) {
+      const issues = [];
+      if (hasClassLike(template, ["detail-card", "stat-card", "wk-card"])) return issues;
+      for (const tag of findTags(template, "el-card")) {
+        issues.push(
+          issue(
+            file,
+            lineOf(template, tag.index, lineOffset),
+            "R031",
+            "card",
+            "info",
+            "el-card 未标识业务场景 class，跨项目卡片密度和标题区可能不一致",
+            "建议按场景添加 detail-card/stat-card/wk-card，或确认已加载 wk-skills-ui Element 样式覆盖",
+          ),
+        );
+      }
+      return issues;
+    },
+  },
+  {
+    id: "R032",
+    category: "tabs",
+    severity: "info",
+    name: "el-tabs 建议明确页面场景",
+    check(template, file, lineOffset) {
+      const issues = [];
+      if (hasClassLike(template, ["detail-tabs", "config-tabs", "wk-tabs"])) return issues;
+      for (const tag of findTags(template, "el-tabs")) {
+        issues.push(
+          issue(
+            file,
+            lineOf(template, tag.index, lineOffset),
+            "R032",
+            "tabs",
+            "info",
+            "el-tabs 未标识 detail/config 等业务场景，复杂详情页 Tab 风格可能漂移",
+            "建议添加 detail-tabs/config-tabs/wk-tabs，或通过 wk-skills-ui tabs 覆盖层统一视觉",
+          ),
+        );
+      }
+      return issues;
+    },
+  },
+  {
+    id: "R033",
+    category: "descriptions",
+    severity: "info",
+    name: "el-descriptions 建议使用 bordered 或统一容器",
+    check(template, file, lineOffset) {
+      const issues = [];
+      for (const tag of findTags(template, "el-descriptions")) {
+        if (hasAttr(tag.text, "border") || hasClassLike(template, ["detail-page", "detail-card"])) continue;
+        issues.push(
+          issue(
+            file,
+            lineOf(template, tag.index, lineOffset),
+            "R033",
+            "descriptions",
+            "info",
+            "el-descriptions 未使用 border/bordered，也未处于统一详情容器，字段展示易出现视觉不齐",
+            "建议添加 border 或放入 detail-page/detail-card，并加载 wk-skills-ui descriptions 覆盖层",
+          ),
+        );
+      }
+      return issues;
+    },
+  },
+  {
+    id: "R034",
+    category: "drawer",
+    severity: "warning",
+    name: "el-drawer 建议明确 size",
+    check(template, file, lineOffset) {
+      const issues = [];
+      for (const tag of findTags(template, "el-drawer")) {
+        if (hasAttr(tag.text, "size")) continue;
+        issues.push(
+          issue(
+            file,
+            lineOf(template, tag.index, lineOffset),
+            "R034",
+            "drawer",
+            "warning",
+            "el-drawer 未明确 size，不同页面抽屉宽度可能不统一",
+            "建议按场景设置 size，例如详情 480px、编辑 560px，或通过业务 preset 统一",
+          ),
+        );
+      }
+      return issues;
+    },
+  },
+  {
+    id: "R035",
+    category: "upload",
+    severity: "warning",
+    name: "el-upload 建议配置 tip/限制说明",
+    check(template, file, lineOffset) {
+      const issues = [];
+      const hasTip = /el-upload__tip|#tip|<template\s+#tip\b/.test(template);
+      for (const tag of findTags(template, "el-upload")) {
+        if (hasTip || hasAttr(tag.text, "limit") || hasAttr(tag.text, "accept")) continue;
+        issues.push(
+          issue(
+            file,
+            lineOf(template, tag.index, lineOffset),
+            "R035",
+            "upload",
+            "warning",
+            "el-upload 未提供上传限制或提示说明，附件场景交互不完整",
+            "建议配置 accept/limit，并补充 el-upload__tip 或 #tip 说明",
+          ),
+        );
+      }
+      return issues;
+    },
+  },
+  {
+    id: "R036",
+    category: "steps",
+    severity: "info",
+    name: "el-steps 审批/流程建议明确状态来源",
+    check(template, file, lineOffset) {
+      const issues = [];
+      for (const tag of findTags(template, "el-steps")) {
+        if (hasAttr(tag.text, "active") || hasAttr(tag.text, "process-status") || hasAttr(tag.text, "finish-status")) continue;
+        issues.push(
+          issue(
+            file,
+            lineOf(template, tag.index, lineOffset),
+            "R036",
+            "steps",
+            "info",
+            "el-steps 未配置 active/process-status/finish-status，流程状态表达可能不稳定",
+            "建议绑定 active 并明确 process-status/finish-status",
+          ),
+        );
+      }
+      return issues;
+    },
+  },
+  {
+    id: "R037",
+    category: "feedback",
+    severity: "info",
+    name: "空/异常反馈建议统一操作入口",
+    check(template, file, lineOffset) {
+      const issues = [];
+      const feedbackTags = ["el-empty", "el-result", "el-alert"];
+      for (const tagName of feedbackTags) {
+        for (const tag of findTags(template, tagName)) {
+          if (/#default|#extra|<el-button\b/.test(template)) continue;
+          issues.push(
+            issue(
+              file,
+              lineOf(template, tag.index, lineOffset),
+              "R037",
+              "feedback",
+              "info",
+              `${tagName} 未提供统一操作入口，空/异常状态可恢复性不足`,
+              "建议根据业务补充操作按钮或 extra/default slot，并加载 wk-skills-ui feedback 覆盖层",
+            ),
+          );
+        }
+      }
+      return issues;
+    },
+  },
+];

package/scanner/rules/dialog.mjs

@@ -0,0 +1,42 @@
+/** scanner/rules/dialog.mjs — 弹窗分页规则：R011 */
+import { lineOf, issue } from "./_shared.mjs";
+
+export const dialogRules = [
+  // R011: pagination 放在 #footer 外面
+  {
+    id: "R011",
+    category: "dialog",
+    severity: "error",
+    name: "弹窗内分页器应放在 #footer slot 中",
+    check(template, file, lineOffset) {
+      const issues = [];
+      // 找到 #footer slot 的范围
+      const footerMatch = /<template\s+#footer\b/;
+      const footerIdx = template.search(footerMatch);
+      // 找 el-pagination
+      const paginationPattern = /<el-pagination\b/g;
+      let m;
+      while ((m = paginationPattern.exec(template)) !== null) {
+        // 是否在 el-dialog 里？
+        const before = template.slice(0, m.index);
+        const dialogOpens = (before.match(/<el-dialog\b/g) || []).length;
+        const dialogCloses = (before.match(/<\/el-dialog>/g) || []).length;
+        if (dialogOpens <= dialogCloses) continue; // 不在 dialog 内
+        // 是否在 footer 之外？
+        if (footerIdx === -1 || m.index < footerIdx)
+          issues.push(
+            issue(
+              file,
+              lineOf(template, m.index, lineOffset),
+              "R011",
+              "dialog",
+              "error",
+              "弹窗内 el-pagination 未放在 <template #footer> 中",
+              '将 el-pagination 移至 <template #footer><div class="dialog-footer">...</div></template>',
+            ),
+          );
+      }
+      return issues;
+    },
+  },
+];

package/scanner/rules/form.mjs

@@ -0,0 +1,86 @@
+/** scanner/rules/form.mjs — 表单控件规则：R006 R007 R008 */
+import { lineOf, issue, findTags } from "./_shared.mjs";
+
+export const formRules = [
+  // R006: el-input / el-select 缺少 size="small"
+  {
+    id: "R006",
+    category: "form",
+    severity: "warning",
+    name: 'el-input / el-select 缺少 size="small"',
+    check(template, file, lineOffset) {
+      const issues = [];
+      for (const tagName of ["el-input", "el-select"]) {
+        for (const tag of findTags(template, tagName)) {
+          if (!/:?size\s*=/.test(tag.text))
+            issues.push(
+              issue(
+                file,
+                lineOf(template, tag.index, lineOffset),
+                "R006",
+                "form",
+                "warning",
+                `<${tagName}> 缺少 size="small"`,
+                '添加 size="small"',
+              ),
+            );
+        }
+      }
+      return issues;
+    },
+  },
+
+  // R007: el-date-picker 缺少 width:100%
+  {
+    id: "R007",
+    category: "form",
+    severity: "warning",
+    name: 'el-date-picker 缺少 style="width:100%"',
+    check(template, file, lineOffset) {
+      const issues = [];
+      for (const tag of findTags(template, "el-date-picker")) {
+        if (!tag.text.includes("style=") && !tag.text.includes(":style="))
+          issues.push(
+            issue(
+              file,
+              lineOf(template, tag.index, lineOffset),
+              "R007",
+              "form",
+              "warning",
+              "el-date-picker 缺少宽度样式",
+              '添加 style="width:100%"',
+            ),
+          );
+      }
+      return issues;
+    },
+  },
+
+  // R008: el-form labelWidth < 150px
+  {
+    id: "R008",
+    category: "form",
+    severity: "info",
+    name: "el-form labelWidth 偏小（< 150px）",
+    check(template, file, lineOffset) {
+      const issues = [];
+      const pattern = /labelWidth="(\d+)px"/g;
+      let m;
+      while ((m = pattern.exec(template)) !== null) {
+        if (parseInt(m[1]) < 150)
+          issues.push(
+            issue(
+              file,
+              lineOf(template, m.index, lineOffset),
+              "R008",
+              "form",
+              "info",
+              `labelWidth="${m[1]}px" 偏小，长标签（≥8字）可能换行`,
+              '建议改为 labelWidth="150px"（需人工确认）',
+            ),
+          );
+      }
+      return issues;
+    },
+  },
+];