@agile-team/wl-skills-ui 1.13.0 → 1.13.2

package/CHANGELOG.md

@@ -6,6 +6,23 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+## [1.13.2] - 2026-10-02
+
+### Added
+
+- R044 对多列表单静态 `label-width >= 240px` 及动态绑定中的宽字面量兜底值给出局部布局人工复核提示；R040 识别未登记的自定义 `stepper` 复合输入。均不自动改写业务页面。
+- 表单规范与 Skill 增补单外壳文本步进控件、对称边距及宽/窄屏几何验收口径。
+
+## [1.13.1] - 2026-09-30
+
+### Fixed
+
+- R008 不再漏检 `BaseForm` / `BaseQuery` 的 `label-width`：覆盖原生与封装表单的静态宽度写法，仍为 `info` 且不自动修改；动态宽度及无关节点不误报。
+
+### Docs
+
+- 明确 150px 只是预警下限。长标签须测量实际文本并与列数、至少 160px 的输入区共同核对；禁止为解决局部截断而全局取消 jh/Base 标签省略。补充宽/窄屏浏览器几何验收。
+
 ## [1.13.0] - 2026-09-30
 
 ### Added

package/README.md

@@ -1,6 +1,6 @@
 # @agile-team/wl-skills-ui
 
-**企业级 UI 一致性与 AI 精确治理工具包 v1.13.0** — 面向 Vue 3 + Element Plus 的设计令牌、能力 Profile、样式皮肤、页面骨架、运行时能力、静态扫描、确定性修复、AI Skill、MCP 与脱敏 UI 模板契约。
+**企业级 UI 一致性与 AI 精确治理工具包 v1.13.2** — 面向 Vue 3 + Element Plus 的设计令牌、能力 Profile、样式皮肤、页面骨架、运行时能力、静态扫描、确定性修复、AI Skill、MCP 与脱敏 UI 模板契约。
 
 它把“视觉统一、问题识别、机械修复、项目适配和样例沉淀”拆成可验证、可组合的工程能力。脚本、规则和 MCP 先完成确定性工作，AI 只处理业务语义与人工决策，从而减少重复读源码、上下文 token 和误修改。
 
@@ -13,7 +13,7 @@
 | --- | --- | --- |
 | 统一新项目视觉 | Design Tokens、Element Plus 原子样式、页面 Layout、Runtime Preset | 颜色、尺寸、间距、圆角、表格和业务状态从同一事实源产生 |
 | 低成本治理老项目 | Skin 模式、Base*/jh-*/C_*/AG Grid 兼容层、定制页豁免 | 不改封装源码也能统一大部分视觉，避免一次性重构风险 |
-| 阻止 UI 回归 | 39 条 R-rule、接入检查、漂移基线、Git 增量扫描、CI 门禁 | 表头/内容不共轴、按钮无图标、日期弹层全屏等问题在提交前暴露 |
+| 阻止 UI 回归 | 40 条 R-rule、接入检查、漂移基线、Git 增量扫描、CI 门禁 | 表头/内容不共轴、按钮无图标、日期弹层全屏、密集表单失衡等问题在提交前暴露 |
 | 安全机械修复 | Profile、only/skip、dry-run 计划哈希、快照、复检与回滚 | 自动化只处理可证明安全且已批准的动作，不让 AI 猜测批改 |
 | 降低 AI token | summary、compact-v2 分页、changed-only、Skill 路由、13 个 MCP Tool | AI 先读总览和结构化事实，只在必要时获取有界明细或局部源码 |
 | 沉淀领域样例 | `ui-contract` extract / validate / match | 页面转为脱敏语义 JSON，不复制整页代码、接口、字段值或原始文案 |
@@ -136,6 +136,8 @@ Vendor 覆盖顺序是：`Base* > jh-* > C_*/c_* > AG Grid > custom wrappers`。
 - `defineColumns()` 默认补齐叶子列和表头居中，并合并业务已有 `cellStyle/cellClass/headerClass`；传 `defaultAlign: null` 可退出。
 - 普通按钮默认要求 `size="small"` 且带语义图标；已声明动态尺寸、link/text 或操作列图标按钮不会被误改。
 - 表单输入、Select、Date/Time Picker 默认 small，日期时间输入根使用 `style="width:100%"`。
+- 长标签布局按实际文本、字体和容器宽度确定：R008 对 `el-form`、`BaseForm`、`BaseQuery` 的静态 `labelWidth` / `label-width` 小于 150px 给出人工复核提示；150px 不是统一修复值。加宽标签时同步保证输入区至少 160px，必要时减少列数；不全局取消 jh/Base 标签省略。详见[表单规范](standards/ui/03-form.md)。
+- 密集多列表单若静态标签宽度或动态绑定中的字面量兜底值达到 240px，R044 提醒人工核对左右留白与输入区宽度；仅在本表单调整标签预算和对称边距。自定义文本步进输入用单外壳边框与控件高度/步进区宽度 token，R040 可审查未登记的 `stepper` 复合结构。两类问题均不做危险的全局自动改写。详见[表单规范](standards/ui/03-form.md)。
 - 原生 `el-date-picker` / `el-time-picker` 的面板通过 Teleport 渲染，面板同样带 `.el-date-picker` 类。包内 `_picker.scss`、R042 与浏览器契约共同阻止裸几何样式把弹层放大为全屏；输入宽度只作用于 `.el-date-editor` 或组件 style，弹层规则必须从 `.el-picker__popper` 限定。
 
 ```ts
@@ -472,7 +474,7 @@ npx wl-ui doctor --project . --print-overrides
 
 ## 版本与进一步阅读
 
-当前 v1.13.0：新增 `native-jh-ag` 混合形态 Profile（平台子应用终态：native 运行时 + jh/Base 封装 + 联邦/npm AG Grid）、严格校验仅认显式声明的兼容承诺、init 自动识别只建议不落盘、联邦 AG 依赖识别。v1.12.0：显式 UI Profile 与 AG adapter 解耦、规则/修复器一致性门禁、R043 确定性 icon 修复、共享 CLI/MCP 扫描引擎、summary/compact-v2 分页协议、fix 计划哈希，以及不覆盖项目内容的托管 Skill 路由块。
+当前 v1.13.2：R044 审查多列表单超宽静态标签和动态字面量兜底值，R040 增加自定义 `stepper` 复合结构识别；两者仅供人工复核，不自动改写项目样式。v1.13.1：R008 覆盖 jh/Base 表单静态标签宽度，并补充长标签与输入区的布局预算和浏览器验收口径。v1.13.0：新增 `native-jh-ag` 混合形态 Profile、显式 Profile 兼容承诺与联邦 AG 依赖识别。
 
 - [版本摘要](docs/version-history.md)
 - [完整 Changelog](CHANGELOG.md)

package/docs/version-history.md

@@ -2,6 +2,15 @@
 
 本页保留面向使用者的版本能力摘要；逐提交级变更、修复细节和旧版本记录见根目录 [`CHANGELOG.md`](../CHANGELOG.md)。
 
+## v1.13.2 — 密集表单与自定义步进输入
+
+- R044 仅审查多列表单中静态标签宽度或动态字面量兜底值 `>= 240px` 的大留白风险；R040 增加 `stepper` 结构发现，修复均需按真实字段和 DOM 做局部验证，不批量覆盖全局样式。
+
+## v1.13.1 — 长标签表单布局治理
+
+- R008 扩展至 `BaseForm` / `BaseQuery` 的静态标签宽度写法，避免封装表单漏检；仍仅提示人工复核。
+- 文档明确按最长标签和列宽预算调整局部表单，保障输入区至少 160px；宽/窄屏检查标签未截断且字段不重叠，不做全局样式覆盖。
+
 ## v1.13.0 — native-jh-ag 混合形态与兼容承诺
 
 - 新增 `native-jh-ag` Profile：平台子应用终态形态（native 运行时 + jh/Base/C 封装 + 联邦或 npm AG Grid）。样式入口 `styles/presets/full`，包根 `styles` 全量写法等价认可；runtime guard 与 `legacy-jh-ag` 同集（分屏 resize + AG 空态），`runtime/auto` 作为等价 runtime 引用被 I003 接受——存量项目声明后零代码改动通过严格校验。

package/package.json

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

package/scanner/rules/componentStructure.mjs

@@ -25,13 +25,19 @@ export function findUnknownCompositeRoots(template) {
     const isHybridElementWrapper =
       classes.includes("el-input") && classes.includes("el-input__wrapper");
     const looksComposite = COMPOSITE_NAME.test(classValue);
+    const looksStepper = /stepper/i.test(classValue);
     const nearby = template.slice(match.index, match.index + 1600);
     const containsInputStructure =
       /<el-(?:input|select|autocomplete|cascader)\b|el-(?:input|select)__wrapper/.test(
         nearby,
       );
+    const containsStepButtons =
+      (nearby.match(/<(?:el-)?button\b/g) || []).length >= 2;
 
-    if (isHybridElementWrapper || (looksComposite && containsInputStructure)) {
+    if (
+      isHybridElementWrapper ||
+      ((looksComposite || (looksStepper && containsStepButtons)) && containsInputStructure)
+    ) {
       findings.push({ index: match.index, classValue });
     }
   }

package/scanner/rules/form.mjs

@@ -1,4 +1,4 @@
-/** scanner/rules/form.mjs — 表单控件规则：R006 R007 R008 */
+/** scanner/rules/form.mjs — 表单控件规则：R006 R007 R008 R042 R044 */
 import { lineOf, issue, findTags } from "./_shared.mjs";
 
 function isPickerPanelScoped(selector) {
@@ -121,29 +121,69 @@ export const formRules = [
     },
   },
 
-  // R008: el-form labelWidth < 150px
+  // R008: 静态标签宽度小于基础阈值；长标签仍需按实际文本测量。
   {
     id: "R008",
     category: "form",
     severity: "info",
-    name: "el-form labelWidth 偏小（< 150px）",
+    name: "表单静态标签宽度偏小（< 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)
+      for (const tagName of ["el-form", "BaseForm", "base-form", "BaseQuery", "base-query"]) {
+        for (const tag of findTags(template, tagName)) {
+          const match = tag.text.match(/(?:^|\s)(?:label-width|labelWidth)\s*=\s*["'](\d+)px["']/);
+          if (!match || Number(match[1]) >= 150) continue;
           issues.push(
             issue(
               file,
-              lineOf(template, m.index, lineOffset),
+              lineOf(template, tag.index, lineOffset),
               "R008",
               "form",
               "info",
-              `labelWidth="${m[1]}px" 偏小，长标签（≥8字）可能换行`,
-              '建议改为 labelWidth="150px"（需人工确认）',
+              `${tagName} 标签宽度 ${match[1]}px 偏小，长标签可能被截断`,
+              "量取最长实际标签并核对控件宽度；必要时增加标签宽度、减少列数（需人工确认）",
+            ),
+          );
+        }
+      }
+      return issues;
+    },
+  },
+
+  // R044: 多列表单的超宽静态标签或动态字面量兜底值会把首列输入推向右侧。
+  // 只做 review：标签文本、列宽和响应式断点都可能使宽标签成为必要配置。
+  {
+    id: "R044",
+    category: "form",
+    severity: "review",
+    name: "多列表单标签宽度过大（≥ 240px）",
+    check(template, file, lineOffset) {
+      const issues = [];
+      for (const tagName of ["el-form", "BaseForm", "base-form"]) {
+        for (const tag of findTags(template, tagName)) {
+          const widthAttribute = tag.text.match(
+            /(?:^|\s)(:)?(?:label-width|labelWidth)\s*=\s*(["'])([\s\S]*?)\2/,
+          );
+          if (!widthAttribute) continue;
+          const widths = widthAttribute[1]
+            ? [...widthAttribute[3].matchAll(/(["'`])(\d+)px\1/g)].map((match) => Number(match[2]))
+            : [Number(/^(\d+)px$/.exec(widthAttribute[3].trim())?.[1])];
+          const wideWidth = widths.find((width) => width >= 240);
+          if (!wideWidth) continue;
+          const columns = tag.text.match(/(?:^|\s)(?::columns|columns)\s*=\s*["']([^"']+)["']/);
+          if (!columns || columns[1].trim() === "1") continue;
+          issues.push(
+            issue(
+              file,
+              lineOf(template, tag.index, lineOffset),
+              "R044",
+              "form",
+              "review",
+              `${tagName} 在多列布局中使用 ${wideWidth}px 标签宽度，可能造成首列大留白`,
+              "核对最长实际标签与输入区≥160px；仅在本表单缩窄标签并设置对称边距，宽/窄屏实测后再应用，不自动改写",
             ),
           );
+        }
       }
       return issues;
     },

package/skills/element/el-form/SKILL.md

@@ -1,7 +1,7 @@
 ---
+name: el-form
 description: |
-  表单控件规范 Skill — el-input / el-select / el-date-picker / el-form 的尺寸、宽度、labelWidth 标准。
-  覆盖规则：R006 R007 R008。
+  审查和修复 Vue/Element Plus 表单控件尺寸、标签预算与自定义步进输入的布局问题。
 applyTo: "**/*.vue"
 ---
 
@@ -34,15 +34,19 @@ el-date-picker 默认宽度不会自动撑满 el-form-item，必须显式设置
 
 ---
 
-## R008 — el-form `labelWidth` 建议 ≥ 150px 【低危】
+## R008 — 表单静态标签宽度预警 【低危】
 
-```diff
-- <el-form :model="form" labelWidth="100px">
-+ <el-form :model="form" labelWidth="150px">
-```
+`label-width="100px"` 等静态小宽度会触发人工检查；不要机械替换成固定 `150px`。
+
+> 扫描覆盖 `el-form`、`BaseForm`、`BaseQuery` 的静态 `labelWidth` / `label-width`；150px 只是预警下限，不是所有表单的最终宽度。`jh-ui` 的 `.com-text` 可能强制单行省略，因此长标签（含单位、中英文混排）需按实际字体测量。
+> 修复时先量最长标签，再同时检查列宽预算：每列至少容纳标签、间距和 160px 可输入区；不足时降低列数并设置响应式断点。只作用于受影响表单，不全局取消省略或强迫所有页面使用同一个宽度。tooltip 不能代替标签可见。该规则**仅提示人工确认**，不自动修改。
+> 浏览器验收至少核对宽屏和窄屏：标签 `scrollWidth <= clientWidth`、输入区 ≥160px、相邻字段不重叠；若业务允许单列移动布局，可在更窄视口单独验收。
+
+## R044 — 密集多列表单超宽固定标签 【人工复核】
+
+静态 `label-width >= 240px`，或动态绑定中含同等宽度的字面量兜底值，且配置多列时，检查是否出现首列大留白、右侧贴边。无法静态判断的动态值不猜测。按实际最长标签缩窄**当前表单**标签宽度，并给卡片两侧同等内边距；不能把某个示例像素值批量写到所有页面。若长标签确实需要 240px 以上，保留并通过减列保障输入区。宽/窄屏几何验收同 R008，规则只提示不自动修复。
 
-> 本系统内最长标签"隐患排查内容及标准"9字 ≈ 126px + padding ≈ 142px，`150px` 为安全兜底值。
-> 此规则**需人工确认**，不自动修改（部分特殊布局可能需要不同值）。
+字母数字混合的炉号上下键属于复合文字输入，不能改成 `el-input-number`；外壳单独绘制唯一边框，按钮高度各半，统一使用 `--wk-form-control-height` 和 `--wk-form-number-controls-width`。自有根类包含 `stepper` 时 R040 会提醒登记结构契约。详见 `standards/ui/03-form.md`。
 
 ---
 

package/standards/rules.json

@@ -186,11 +186,23 @@
       "id": "R008",
       "category": "form",
       "severity": "info",
-      "title": "el-form labelWidth ≥ 150px",
-      "rationale": "中文标签最长 9 字（如「隐患排查内容及标准」）需要 150px 不截断。",
-      "appliesTo": ["el-form"],
+      "title": "表单静态标签宽度偏小（< 150px）",
+      "rationale": "150px 只是通用预警下限；长标签及单位文本须按实际渲染宽度核对，且不能挤压输入控件。",
+      "appliesTo": ["el-form", "BaseForm", "BaseQuery"],
       "autoFixable": false,
-      "manualReason": "可能存在特殊布局需求（双列紧凑、移动端适配）",
+      "manualReason": "需要结合最长标签、字体、容器宽度和列数判断；不得机械扩大标签或全局覆盖截断样式。",
+      "scanner": "scanner/rules/form.mjs",
+      "skills": ["element/el-form"]
+    },
+    {
+      "id": "R044",
+      "category": "form",
+      "severity": "review",
+      "title": "多列表单标签宽度过大（≥ 240px）",
+      "rationale": "静态宽度或动态绑定中的宽字面量兜底值会在多列密集表单中制造首列大留白；需要结合真实标签文本、输入区和断点核对。",
+      "appliesTo": ["el-form", "BaseForm"],
+      "autoFixable": false,
+      "manualReason": "无法仅凭静态代码确定最长标签、真实列宽与响应式断点；必须局部实测，不可全局替换。",
       "scanner": "scanner/rules/form.mjs",
       "skills": ["element/el-form"]
     },

package/standards/ui/03-form.md

@@ -1,14 +1,33 @@
 # 规范 03：表单（el-form）
 
-## 规则 R008：labelWidth 统一使用 150px
+## 规则 R008：标签宽度按内容和列宽预算确定
 
-中文标签最长 9 字（如"隐患排查内容及标准"），需要 150px 才不截断：
+`150px` 是静态扫描预警下限，不是固定模板宽度。对 `el-form`、`BaseForm`、`BaseQuery`，应以最长实际标签（包括单位、中英文混排）及当前字体测量所需宽度；jh/Base 封装可能将标签强制单行省略。
+
+每列需同时容纳标签、间距和至少 `160px` 的输入区。放宽标签后若输入区不足，应先减少列数或设置响应式断点，而不是全局覆盖 `.com-text` 或压缩输入框。只在受影响的表单内调整；tooltip 仅作补充。浏览器回归检查宽/窄屏的标签 `scrollWidth <= clientWidth`、输入区宽度及无交叠。
 
 ```vue
 <!-- ❌ 错误：100px 会截断9字标签 -->
 <el-form :model="form" label-width="100px"></el-form>
 ```
 
+## 规则 R044：密集多列表单的超宽标签预算
+
+静态 `label-width >= 240px`，或动态绑定中包含 `240px` 以上的字面量兜底值，且声明多列时，扫描器只标记人工复核，**不自动改宽度**。无法静态判断的动态值不猜测。宽标签占据每列左侧，短标签右对齐后首列形成大面积空白；这与 R008 的“过窄截断”是同一预算的两端。
+
+修复顺序：先量最长实际标签（含单位），再按每列 `标签宽 + 间距 + 输入区 ≥ 160px` 设局部宽度与响应式列数；卡片左右使用相同内边距。仅修改该表单容器，保留其他业务表单原布局。以宽屏、窄屏的真实 DOM 几何验收：标签不截断、左右外边距接近、输入区不小于 160px、字段无交叠；中文和英数混排均需检查。
+
+```vue
+<!-- 按真实字段测量后选择局部宽度，数字仅为示例 -->
+<BaseForm :items="actualItems" :columns="responsiveColumns" label-width="184px" />
+```
+
+## 自定义“文本输入 + 上下步进”复合控件
+
+炉号等字母数字混合字段不可换成纯数字输入。此类控件外壳负责**唯一**边框、圆角、hover/focus/error/disabled 状态；内部文本输入与两个按钮不得各画一层框。外壳高度用 `--wk-form-control-height`，按钮区宽度用 `--wk-form-number-controls-width`，上下各占半高并由一条水平线分隔，图标尺寸和颜色沿用数字输入步进区。保留按钮的 `type="button"`、可辨认名称、键盘焦点和禁用语义，不改变炉号进退算法。
+
+项目自有复合控件根 class 建议包含 `stepper`，这样 R040 会将未登记结构纳入人工审查；明确边框所有者、高度策略及老/新版 Element DOM 后再登记结构契约。R040 不会自动套用全局 `.el-input-number` 样式到文字输入，也不自动修复，因为这会误伤组件状态和交互。
+
 ---
 
 ## 规则 R006：输入、选择、日期与时间控件必须加 size="small"