@af-mobile/eslint-plugin 2.0.2 → 2.0.4

package/index.js

@@ -23,7 +23,7 @@ import wcBlockStates from './rules/wc-block-states.js';
 import wcBlockVariantEnum from './rules/wc-block-variant-enum.js';
 
 const plugin = {
-  meta: { name: 'eslint-plugin-af-mobile', version: '2.0.1' },
+  meta: { name: 'eslint-plugin-af-mobile', version: '2.0.4' },
   rules: {
     // L1（2 条，全部 error；tokens-css-locked 由 CODEOWNERS + 分支保护，非 ESLint 规则）
     'no-token-modification': noTokenModification,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@af-mobile/eslint-plugin",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "af-mobile UI ESLint plugin — 27 rules (L1/L2/L3/L3.5) enforcing design-system + Web Component constraints",
   "type": "module",
   "main": "./index.js",

package/rules/no-recipe-break.js

@@ -18,7 +18,7 @@ export default {
     messages: {
       cellFlex: ".cell has built-in display:flex, adding 'f'/'fc' may break layout",
       btnColor: ".btn background uses --c-brand, text color must keep --c-onbrand contrast. Use .btn-ghost instead for colored text",
-      inputFont: ".input font-size must be 16px (--t-md) to prevent iOS focus zoom. Put help text in <label> or .form-err instead",
+      inputFont: "form control (.input/.textarea/.search-input) font-size must be 16px (--t-input) to prevent iOS focus zoom. Put help text in <label> or .form-err instead",
       btnBg: ".btn background is --c-brand with white text; overriding background with 'bg-card'/'bg-muted' breaks contrast. Use .btn-ghost instead",
     },
   },
@@ -41,8 +41,8 @@ export default {
           if (set.has(a)) { context.report({ node, messageId: 'btnBg' }); break; }
         }
       }
-      // c: .input + t-sm/t-xs
-      if (set.has('input')) {
+      // c: 表单控件 + t-sm/t-xs（.input/.textarea/.search-input 均为 --t-input 16px 基准）
+      if (set.has('input') || set.has('textarea') || set.has('search-input')) {
         for (const a of SMALL_FONT) {
           if (set.has(a)) { context.report({ node, messageId: 'inputFont' }); break; }
         }

package/rules/token-whitelist.js

@@ -1,6 +1,7 @@
 // L2-1 af-mobile/token-whitelist（error）
 // 检测：class="" 中的 class / 自定义元素 tagName → 与 whitelist + extraClass/extraComponents 对比
-import { ALL_CLASSES, ALL_COMPONENTS, extractAllClassLists, extractCustomElements } from '../utils/helpers.js';
+// 模板插值 class（btn-${type}）无法静态解析 → 单独报 interpolatedClass（伪报为"不在白名单"会误导修法）
+import { ALL_CLASSES, ALL_COMPONENTS, extractAllClassLists, extractCustomElements, suggestNearest } from '../utils/helpers.js';
 
 export default {
   meta: {
@@ -15,28 +16,33 @@ export default {
       additionalProperties: false,
     }],
     messages: {
-      unknownClass: "Class '{{name}}' not in whitelist. Use recipe/atomic or register in 'af-mobile/token-whitelist' rule's extraClass",
-      unknownComponent: "Component '{{name}}' not in whitelist. Register in 'af-mobile/token-whitelist' rule's extraComponents",
+      unknownClass: "Class '{{name}}' not in whitelist.{{suggest}} Use recipe/atomic, or paste into eslint.config.js: 'af-mobile/token-whitelist': ['error', { extraClass: ['{{name}}'] }]",
+      unknownComponent: "Component '{{name}}' not in whitelist.{{suggest}} Paste into eslint.config.js: 'af-mobile/token-whitelist': ['error', { extraComponents: ['{{name}}'] }]",
+      interpolatedClass: "Class '{{name}}' contains template interpolation and cannot be checked statically. Use static whitelist classes plus data-* attributes, or a ternary switching between whitelisted classes",
     },
   },
   create(context) {
     const options = context.options[0] || {};
     const allowClass = new Set([...ALL_CLASSES, ...(options.extraClass || [])]);
     const allowComp = new Set([...ALL_COMPONENTS, ...(options.extraComponents || [])]);
+    const extraClasses = [...allowClass];
+    const extraComps = [...allowComp];
 
     function checkString(str, node) {
       // class 检查
       for (const { classes } of extractAllClassLists(str)) {
         for (const cls of classes) {
-          if (!allowClass.has(cls)) {
-            context.report({ node, messageId: 'unknownClass', data: { name: cls } });
+          if (cls.includes('${')) {
+            context.report({ node, messageId: 'interpolatedClass', data: { name: cls } });
+          } else if (!allowClass.has(cls)) {
+            context.report({ node, messageId: 'unknownClass', data: { name: cls, suggest: suggestNearest(cls, extraClasses) } });
           }
         }
       }
       // 自定义元素检查
       for (const tag of extractCustomElements(str)) {
         if (!allowComp.has(tag)) {
-          context.report({ node, messageId: 'unknownComponent', data: { name: tag } });
+          context.report({ node, messageId: 'unknownComponent', data: { name: tag, suggest: suggestNearest(tag, extraComps) } });
         }
       }
     }
@@ -56,7 +62,7 @@ export default {
           if (arg.type === 'Literal' && typeof arg.value === 'string') {
             for (const cls of arg.value.split(/\s+/).filter(Boolean)) {
               if (!allowClass.has(cls)) {
-                context.report({ node: arg, messageId: 'unknownClass', data: { name: cls } });
+                context.report({ node: arg, messageId: 'unknownClass', data: { name: cls, suggest: suggestNearest(cls, extraClasses) } });
               }
             }
           }
@@ -65,7 +71,7 @@ export default {
               if (el?.type === 'Literal' && typeof el.value === 'string') {
                 for (const cls of el.value.split(/\s+/).filter(Boolean)) {
                   if (!allowClass.has(cls)) {
-                    context.report({ node: el, messageId: 'unknownClass', data: { name: cls } });
+                    context.report({ node: el, messageId: 'unknownClass', data: { name: cls, suggest: suggestNearest(cls, extraClasses) } });
                   }
                 }
               }

package/rules/wc-aria-required.js

@@ -22,7 +22,7 @@ export default {
   },
   create(context) {
     const filename = context.filename || context.getFilename();
-    if (!/src[\\/](?:charts[\\/])?components[\\/].*\.js$/.test(filename)) return {};
+    if (!/src[\\/](?:(?:charts|chat)[\\/])?components[\\/].*\.js$/.test(filename)) return {};
 
     // 从文件名提取组件名（af-xxx.js → af-xxx）
     const m = filename.match(/(af-[a-z-]+)\.js$/);

package/utils/aria-requirements.json

@@ -39,6 +39,15 @@
     "role": "listbox",
     "description": "选择器列需要 role=listbox"
   },
+  "af-number-keyboard": {
+    "role": "dialog",
+    "ariaLabel": true,
+    "description": "数字键盘弹层需要 role=dialog 和 aria-label；按键为原生 button 天然支持键盘操作"
+  },
+  "af-password-input": {
+    "ariaLabel": true,
+    "description": "密码格子容器需要 aria-label（含输入进度播报）"
+  },
   "af-img": {
     "description": "图片组件无强制 ARIA 要求"
   },
@@ -83,5 +92,10 @@
     "role": "img",
     "ariaLabel": true,
     "description": "漏斗图 svg 需要 role=img 和 aria-label 摘要（全量数据由 sr-table 提供）"
+  },
+  "af-chat": {
+    "role": "log",
+    "ariaLive": true,
+    "description": "对话记录容器需要 role=log 和 aria-live=polite（流式文本 aria-hidden，完成时 sr-only 一次性播报）"
   }
 }

package/utils/helpers.js

@@ -53,3 +53,32 @@ export function extractCustomElements(str) {
   while ((m = re.exec(str))) results.push(m[1]);
   return results;
 }
+
+// 编辑距离（Levenshtein）：最近邻建议用，候选集小（<200）无需提前剪枝
+function levenshtein(a, b) {
+  const dp = Array.from({ length: a.length + 1 }, (_, i) => [i, ...Array(b.length).fill(0)]);
+  for (let j = 0; j <= b.length; j++) dp[0][j] = j;
+  for (let i = 1; i <= a.length; i++) {
+    for (let j = 1; j <= b.length; j++) {
+      dp[i][j] = Math.min(
+        dp[i - 1][j] + 1,
+        dp[i][j - 1] + 1,
+        dp[i - 1][j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1),
+      );
+    }
+  }
+  return dp[a.length][b.length];
+}
+
+// 最近邻建议：返回 " Did you mean 'xxx'?" 或 ''（无足够接近的候选）
+// 阈值随长度放宽：≤3 字符允许 1 距离，更长允许 2
+export function suggestNearest(name, candidates) {
+  const max = name.length <= 3 ? 1 : 2;
+  let best = null, bestDist = max + 1;
+  for (const c of candidates) {
+    if (Math.abs(c.length - name.length) > max) continue;
+    const d = levenshtein(name, c);
+    if (d < bestDist) { best = c; bestDist = d; }
+  }
+  return best ? ` Did you mean '${best}'?` : '';
+}

package/utils/whitelist-v1.json

@@ -1,6 +1,6 @@
 {
   "version": "v1",
-  "af-mobileVersion": "1.0.0",
+  "af-mobileVersion": "1.5.2",
   "classes": {
     "recipe": [
       "actions",
@@ -12,6 +12,9 @@
       "btn-danger",
       "btn-ghost",
       "btn-lg",
+      "btn-mini",
+      "btn-plain",
+      "btn-round",
       "btn-sm",
       "btn-success",
       "caption",
@@ -20,10 +23,11 @@
       "center",
       "checkbox",
       "checkbox-sm",
-      "checkout-bar",
-      "collapse",
-      "collapse-content",
-      "collapse-summary",
+      "clp",
+      "clp-ct",
+      "clp-sum",
+      "cob",
+      "cob-fx",
       "display",
       "divider",
       "empty",
@@ -34,17 +38,18 @@
       "hero",
       "input",
       "input-bar",
+      "input-bar-fx",
       "input-err",
       "label",
       "list",
       "list-item",
-      "list-item-compact",
+      "list-item-cp",
       "meta",
       "navbar",
       "navbar-fixed",
       "notice",
-      "notice-scroll",
-      "notice-text",
+      "notice-scr",
+      "notice-tx",
       "page",
       "page-col",
       "price",
@@ -58,30 +63,32 @@
       "radio-sm",
       "rate",
       "rate-lg",
-      "rate-readonly",
+      "rate-ro",
       "rate-sm",
       "rate-star",
+      "safe-bottom",
+      "safe-top",
+      "sb-clear",
+      "sb-icon",
+      "sb-wrap",
       "scroll-y",
-      "search-bar-clear",
-      "search-bar-icon",
-      "search-bar-wrap",
       "search-input",
       "section",
-      "section-title",
-      "segmented",
-      "segmented-block",
-      "segmented-item",
+      "section-tt",
+      "seg",
+      "seg-blk",
+      "seg-it",
       "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",
+      "sk",
+      "sk-blk",
+      "sk-blk-h-md",
+      "sk-blk-h-sm",
+      "sk-cir",
+      "sk-ln",
+      "sk-pg",
+      "sk-w-40",
+      "sk-w-60",
+      "sk-w-80",
       "spinner",
       "spinner-lg",
       "spinner-sm",
@@ -94,16 +101,19 @@
       "steps",
       "subtitle",
       "switch",
-      "switch-loading",
+      "switch-ldg",
       "switch-on",
       "switch-sm",
-      "switch-thumb",
+      "switch-th",
       "tab-item",
       "tabbar",
       "tabbar-fixed",
       "tag",
       "tag-danger",
+      "tag-lg",
+      "tag-md",
       "tag-ok",
+      "tag-plain",
       "tag-warn",
       "textarea",
       "thumb",
@@ -112,8 +122,8 @@
       "toast-error",
       "toast-success",
       "toast-warning",
-      "upload-grid",
-      "upload-trigger"
+      "upload-gd",
+      "upload-tg"
     ],
     "atomic": [
       "aic",
@@ -121,6 +131,7 @@
       "bg-card",
       "bg-muted",
       "ellipsis",
+      "ellipsis-2",
       "f",
       "fc",
       "fi",
@@ -130,17 +141,21 @@
       "g-2",
       "g-3",
       "g-4",
+      "hl-b",
+      "hl-t",
       "jcc",
       "jce",
       "jcsb",
       "lh-normal",
       "lh-tight",
+      "list",
       "m-0",
       "m-1",
       "m-2",
       "m-3",
       "m-4",
       "m-5",
+      "navbar",
       "p-0",
       "p-1",
       "p-10",
@@ -191,6 +206,7 @@
     "af-chart-line",
     "af-chart-pie",
     "af-chart-radar",
+    "af-chat",
     "af-countdown",
     "af-dialog",
     "af-dropdown",
@@ -199,6 +215,8 @@
     "af-list",
     "af-navbar",
     "af-notice-bar",
+    "af-number-keyboard",
+    "af-password-input",
     "af-picker",
     "af-progress",
     "af-pull-refresh",
@@ -223,9 +241,18 @@
     "--c-brand-strong",
     "--c-card",
     "--c-danger",
+    "--c-gray-1",
+    "--c-gray-2",
+    "--c-gray-3",
+    "--c-gray-4",
+    "--c-gray-5",
+    "--c-gray-6",
+    "--c-gray-7",
+    "--c-gray-8",
     "--c-muted",
     "--c-muted-bg",
     "--c-onbrand",
+    "--c-onwarn",
     "--c-success",
     "--c-text",
     "--c-warn",
@@ -251,9 +278,18 @@
     "--palette-card",
     "--palette-color-scheme",
     "--palette-danger",
+    "--palette-gray-1",
+    "--palette-gray-2",
+    "--palette-gray-3",
+    "--palette-gray-4",
+    "--palette-gray-5",
+    "--palette-gray-6",
+    "--palette-gray-7",
+    "--palette-gray-8",
     "--palette-muted",
     "--palette-muted-bg",
     "--palette-onbrand",
+    "--palette-onwarn",
     "--palette-shadow-lg",
     "--palette-shadow-md",
     "--palette-shadow-sm",
@@ -279,11 +315,13 @@
     "--shadow-md",
     "--shadow-sm",
     "--t-display",
+    "--t-input",
     "--t-lg",
     "--t-md",
     "--t-sm",
     "--t-xl",
     "--t-xs",
+    "--tabbar-h",
     "--z-base",
     "--z-dropdown",
     "--z-modal",