@af-mobile/eslint-plugin 2.0.0

package/rules/wc-part-naming.js

@@ -0,0 +1,33 @@
+// L3-3 aiflow/wc-part-naming（warn）
+// 检测：part="xxx" 属性名非 kebab-case
+const KEBAB_RE = /^[a-z]+(-[a-z0-9]+)*$/;
+
+export default {
+  meta: {
+    type: 'suggestion',
+    docs: { description: 'part 属性名必须 kebab-case' },
+    schema: [],
+    messages: {
+      naming: "Part name '{{name}}' should be kebab-case (e.g. 'dialog-content')",
+    },
+  },
+  create(context) {
+    const filename = context.filename || context.getFilename();
+    if (!/src[\\/](?:charts[\\/])?components[\\/].*\.js$/.test(filename)) return {};
+
+    function checkString(str, node) {
+      const re = /part\s*=\s*"([^"]*)"/g;
+      let m;
+      while ((m = re.exec(str))) {
+        const partName = m[1].trim();
+        if (partName && !KEBAB_RE.test(partName)) {
+          context.report({ node, messageId: 'naming', data: { name: partName } });
+        }
+      }
+    }
+    return {
+      Literal(node) { if (typeof node.value === 'string') checkString(node.value, node); },
+      TemplateElement(node) { if (node.value?.raw) checkString(node.value.raw, node); },
+    };
+  },
+};

package/rules/wc-shadow-use-token.js

@@ -0,0 +1,72 @@
+// L3-2 aiflow/wc-shadow-use-token（error）
+// 检测：Shadow 组件 CSS 字符串中颜色/间距/字号/圆角硬编码（非 var(--*)）
+// 例外：backdrop 遮罩半透明黑
+import postcss from 'postcss';
+
+// 硬编码模式：颜色（#xxx / rgb / rgba / 命名色）、间距（Npx / Nrem）、字号、圆角
+const COLOR_RE = /(#([0-9a-f]{3,8})\b|rgb\(|rgba\(|\b(red|blue|green|white|black|gray|yellow|orange|purple|pink|brown|cyan)\b)/i;
+const SIZE_RE = /\b\d+(px|rem)\b/;
+
+// 需要检查的 CSS 属性
+const CHECKED_PROPS = new Set([
+  'color', 'background', 'background-color', 'border-color', 'border',
+  'padding', 'margin', 'font-size', 'border-radius', 'width', 'height',
+  'top', 'right', 'bottom', 'left', 'gap', 'box-shadow',
+]);
+
+// 例外属性值（放行）
+const EXCEPTIONS = /backdrop|mask/i;
+
+export default {
+  meta: {
+    type: 'problem',
+    docs: { description: 'Shadow 组件 CSS 必须使用 token 变量' },
+    schema: [],
+    messages: {
+      hardcoded: "'{{prop}}: {{value}}' in Shadow CSS must use var(--*). Use token variables for cross-theme visual consistency",
+    },
+  },
+  create(context) {
+    const filename = context.filename || context.getFilename();
+    if (!/src[\\/](?:charts[\\/])?components[\\/].*\.js$/.test(filename)) return {};
+
+    const sourceCode = context.sourceCode || context.getSourceCode();
+    const source = sourceCode.getText();
+    // 仅检查 Shadow 组件（含 useShadow = true）
+    if (!/useShadow\s*=\s*true/.test(source)) return {};
+
+    // 提取 JS 中所有模板字符串内容（CSS 常量）
+    function checkCss(cssText, node) {
+      if (!cssText.includes(':')) return;
+      try {
+        const root = postcss.parse(cssText);
+        root.walkDecls(decl => {
+          if (!CHECKED_PROPS.has(decl.prop)) return;
+          // 放行 var(--*) 值
+          if (/^var\(/.test(decl.value.trim())) return;
+          // 放行 backdrop 例外：选择器含 ::backdrop（遮罩半透明黑，L1 无 mask token，见 L4 §3.4 L3-2）
+          const selector = decl.parent?.selector || '';
+          if (EXCEPTIONS.test(selector) || EXCEPTIONS.test(decl.prop) || EXCEPTIONS.test(decl.value)) return;
+          // 检测硬编码
+          if (COLOR_RE.test(decl.value) || SIZE_RE.test(decl.value)) {
+            context.report({
+              node,
+              loc: {
+                start: { line: decl.source.start.line, column: decl.source.start.column - 1 },
+                end: { line: decl.source.end.line, column: decl.source.end.column },
+              },
+              messageId: 'hardcoded',
+              data: { prop: decl.prop, value: decl.value },
+            });
+          }
+        });
+      } catch { /* 非 CSS 内容跳过 */ }
+    }
+
+    return {
+      TemplateElement(node) {
+        if (node.value?.raw) checkCss(node.value.raw, node);
+      },
+    };
+  },
+};

package/utils/aria-requirements.json

@@ -0,0 +1,87 @@
+{
+  "af-dialog": {
+    "role": "dialog",
+    "ariaLabel": true,
+    "description": "模态对话框需要 role=dialog 和 aria-label"
+  },
+  "af-toast": {
+    "ariaLive": true,
+    "role": "status",
+    "description": "轻提示需要 role=status 和 aria-live=polite"
+  },
+  "af-tabs": {
+    "role": "tablist",
+    "description": "标签页容器需要 role=tablist"
+  },
+  "af-action-sheet": {
+    "role": "dialog",
+    "ariaLabel": true,
+    "description": "底部弹窗需要 role=dialog 和 aria-label"
+  },
+  "af-list": {
+    "role": "list",
+    "description": "列表容器需要 role=list"
+  },
+  "af-swiper": {
+    "role": "region",
+    "ariaLabel": true,
+    "description": "轮播图需要 role=region 和 aria-label"
+  },
+  "af-dropdown": {
+    "role": "listbox",
+    "description": "下拉菜单触发器是 combobox，列表用 role=listbox（WAI-ARIA combobox 模式）"
+  },
+  "af-backtop": {
+    "ariaLabel": true,
+    "description": "返回顶部按钮需要 aria-label"
+  },
+  "af-picker": {
+    "role": "listbox",
+    "description": "选择器列需要 role=listbox"
+  },
+  "af-img": {
+    "description": "图片组件无强制 ARIA 要求"
+  },
+  "af-switch": {
+    "role": "switch",
+    "ariaChecked": true,
+    "description": "开关需要 role=switch 和 aria-checked"
+  },
+  "af-search-bar": {
+    "description": "搜索栏无强制容器 ARIA；清除按钮需 aria-label（由组件内置）"
+  },
+  "af-skeleton-page": {
+    "role": "status",
+    "ariaLive": true,
+    "description": "骨架屏需要 role=status 和 aria-live=polite"
+  },
+  "af-upload": {
+    "ariaLabel": true,
+    "description": "上传组件的触发按钮需 aria-label；预览网格用 role=list"
+  },
+  "af-chart-line": {
+    "role": "img",
+    "ariaLabel": true,
+    "description": "折线图 svg 需要 role=img 和 aria-label 摘要（全量数据由 sr-table 提供）"
+  },
+  "af-chart-bar": {
+    "role": "img",
+    "ariaLabel": true,
+    "description": "柱状图 svg 需要 role=img 和 aria-label 摘要（全量数据由 sr-table 提供）"
+  },
+  "af-chart-pie": {
+    "role": "img",
+    "ariaLabel": true,
+    "description": "饼图 svg 需要 role=img 和 aria-label 摘要（全量数据由 sr-table 提供）"
+  },
+  "af-chart-radar": {
+    "role": "img",
+    "ariaLabel": true,
+    "description": "雷达图 svg 需要 role=img 和 aria-label 摘要（全量数据由 sr-table 提供）"
+  },
+  "af-chart-funnel": {
+    "role": "img",
+    "ariaLabel": true,
+    "description": "漏斗图 svg 需要 role=img 和 aria-label 摘要（全量数据由 sr-table 提供）"
+  }
+}

package/utils/helpers.js

@@ -0,0 +1,55 @@
+// AIFlow UI —— ESLint 规则共享工具
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { resolve, dirname } from 'node:path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const whitelistPath = resolve(__dirname, 'whitelist-v1.json');
+const whitelist = JSON.parse(readFileSync(whitelistPath, 'utf8'));
+
+// 所有合法 class 集合（recipe + atomic）
+export const ALL_CLASSES = new Set([
+  ...whitelist.classes.recipe,
+  ...whitelist.classes.atomic,
+]);
+
+// 所有合法组件 tagName 集合
+export const ALL_COMPONENTS = new Set(whitelist.components);
+
+// 从字符串中提取所有 class="xxx" 的 class 列表
+export function extractClassLists(str) {
+  const results = [];
+  const re = /class\s*=\s*"([^"]*)"/g;
+  let m;
+  while ((m = re.exec(str))) {
+    const classes = m[1].split(/\s+/).filter(Boolean);
+    if (classes.length) results.push({ classes, offset: m.index, raw: m[0] });
+  }
+  return results;
+}
+
+// 从字符串中提取所有 class='xxx'（单引号）的 class 列表
+export function extractClassListsSingle(str) {
+  const results = [];
+  const re = /class\s*=\s*'([^']*)'/g;
+  let m;
+  while ((m = re.exec(str))) {
+    const classes = m[1].split(/\s+/).filter(Boolean);
+    if (classes.length) results.push({ classes, offset: m.index, raw: m[0] });
+  }
+  return results;
+}
+
+// 合并提取双引号和单引号的 class
+export function extractAllClassLists(str) {
+  return [...extractClassLists(str), ...extractClassListsSingle(str)];
+}
+
+// 从字符串中提取所有自定义元素标签 <af-xxx>
+export function extractCustomElements(str) {
+  const results = [];
+  const re = /<([a-z]+-[a-z-]+)/g;
+  let m;
+  while ((m = re.exec(str))) results.push(m[1]);
+  return results;
+}

package/utils/whitelist-v1.json

@@ -0,0 +1,278 @@
+{
+  "version": "v1",
+  "aiflowVersion": "1.0.0",
+  "classes": {
+    "recipe": [
+      "actions",
+      "avatar",
+      "badge",
+      "body",
+      "btn",
+      "btn-block",
+      "btn-danger",
+      "btn-ghost",
+      "btn-lg",
+      "btn-sm",
+      "btn-success",
+      "caption",
+      "card",
+      "cell",
+      "center",
+      "checkbox",
+      "checkbox-sm",
+      "checkout-bar",
+      "collapse",
+      "collapse-content",
+      "collapse-summary",
+      "divider",
+      "empty",
+      "form-err",
+      "form-row",
+      "form-row-h",
+      "hero",
+      "input",
+      "input-bar",
+      "input-err",
+      "label",
+      "list",
+      "list-item",
+      "list-item-compact",
+      "meta",
+      "navbar",
+      "navbar-fixed",
+      "notice",
+      "notice-scroll",
+      "notice-text",
+      "page",
+      "price",
+      "price-del",
+      "progress",
+      "progress-danger",
+      "progress-lg",
+      "progress-sm",
+      "progress-success",
+      "radio",
+      "radio-sm",
+      "rate",
+      "rate-lg",
+      "rate-readonly",
+      "rate-sm",
+      "rate-star",
+      "search-bar-clear",
+      "search-bar-icon",
+      "search-bar-wrap",
+      "search-input",
+      "segmented",
+      "segmented-block",
+      "segmented-item",
+      "sheet",
+      "skeleton",
+      "skeleton-block",
+      "skeleton-block-h-md",
+      "skeleton-block-h-sm",
+      "skeleton-circle",
+      "skeleton-line",
+      "skeleton-page",
+      "skeleton-w-40",
+      "skeleton-w-60",
+      "skeleton-w-80",
+      "spinner",
+      "spinner-lg",
+      "spinner-sm",
+      "stats-grid",
+      "step",
+      "step-active",
+      "step-circle",
+      "step-done",
+      "step-label",
+      "steps",
+      "subtitle",
+      "switch",
+      "switch-loading",
+      "switch-on",
+      "switch-sm",
+      "switch-thumb",
+      "tab-item",
+      "tabbar",
+      "tabbar-fixed",
+      "tag",
+      "tag-danger",
+      "tag-ok",
+      "tag-warn",
+      "textarea",
+      "thumb",
+      "title",
+      "toast",
+      "upload-grid",
+      "upload-trigger"
+    ],
+    "atomic": [
+      "aic",
+      "bg-brand",
+      "bg-muted",
+      "f",
+      "fc",
+      "flex-1",
+      "g-0",
+      "g-1",
+      "g-2",
+      "g-3",
+      "g-4",
+      "jcc",
+      "jce",
+      "jcsb",
+      "m-0",
+      "m-1",
+      "m-2",
+      "m-3",
+      "m-4",
+      "p-0",
+      "p-1",
+      "p-10",
+      "p-2",
+      "p-3",
+      "p-4",
+      "p-5",
+      "p-6",
+      "p-8",
+      "r-0",
+      "r-f",
+      "r-l",
+      "r-m",
+      "r-s",
+      "shadow-lg",
+      "shadow-md",
+      "shadow-sm",
+      "t-b",
+      "t-center",
+      "t-left",
+      "t-lg",
+      "t-m",
+      "t-md",
+      "t-right",
+      "t-sm",
+      "t-xl",
+      "t-xs",
+      "text-brand",
+      "text-danger",
+      "text-muted",
+      "text-success",
+      "w-full",
+      "ws-nowrap"
+    ]
+  },
+  "components": [
+    "af-action-sheet",
+    "af-backtop",
+    "af-badge",
+    "af-calendar",
+    "af-cascade-picker",
+    "af-chart-bar",
+    "af-chart-funnel",
+    "af-chart-line",
+    "af-chart-pie",
+    "af-chart-radar",
+    "af-countdown",
+    "af-dialog",
+    "af-dropdown",
+    "af-field",
+    "af-img",
+    "af-list",
+    "af-navbar",
+    "af-notice-bar",
+    "af-picker",
+    "af-progress",
+    "af-pull-refresh",
+    "af-rate",
+    "af-search-bar",
+    "af-skeleton-page",
+    "af-stepper",
+    "af-steps",
+    "af-swipe-cell",
+    "af-swiper",
+    "af-switch",
+    "af-tabbar",
+    "af-tabs",
+    "af-toast",
+    "af-upload"
+  ],
+  "tokens": [
+    "--c-bg",
+    "--c-border",
+    "--c-brand",
+    "--c-card",
+    "--c-danger",
+    "--c-muted",
+    "--c-muted-bg",
+    "--c-onbrand",
+    "--c-success",
+    "--c-text",
+    "--c-warn",
+    "--dur-base",
+    "--dur-fast",
+    "--dur-slow",
+    "--ease-in-out",
+    "--ease-out",
+    "--fw-bold",
+    "--fw-medium",
+    "--fw-normal",
+    "--lh-normal",
+    "--lh-tight",
+    "--palette-bg",
+    "--palette-border",
+    "--palette-brand",
+    "--palette-card",
+    "--palette-color-scheme",
+    "--palette-danger",
+    "--palette-muted",
+    "--palette-muted-bg",
+    "--palette-onbrand",
+    "--palette-shadow-lg",
+    "--palette-shadow-md",
+    "--palette-shadow-sm",
+    "--palette-success",
+    "--palette-text",
+    "--palette-warn",
+    "--r-f",
+    "--r-l",
+    "--r-m",
+    "--r-s",
+    "--s-1",
+    "--s-2",
+    "--s-3",
+    "--s-4",
+    "--s-5",
+    "--s-6",
+    "--shadow-lg",
+    "--shadow-md",
+    "--shadow-sm",
+    "--t-lg",
+    "--t-md",
+    "--t-sm",
+    "--t-xl",
+    "--t-xs",
+    "--z-base",
+    "--z-dropdown",
+    "--z-modal",
+    "--z-sticky"
+  ],
+  "forbiddenInlineStyle": [
+    "color",
+    "background",
+    "background-color",
+    "background-image",
+    "padding",
+    "padding-top",
+    "padding-right",
+    "padding-bottom",
+    "padding-left",
+    "margin",
+    "margin-top",
+    "margin-right",
+    "margin-bottom",
+    "margin-left",
+    "font-size",
+    "border-radius",
+    "box-shadow"
+  ]
+}