@agile-team/wl-skills-ui 1.9.12 → 1.9.13

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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.9.13] - 2026-08-07
+
+### Added
+
+- 新增 `runtime/split-grid-resize` 分屏表格尺寸守护：只观察 `jh-drag-row` 的直接 pane，支持动态路由晚挂载，连续 Resize 按动画帧合并，并向 grid host 派发局部 `wl-ui:split-grid-resize` 事件。
+- 复合结构清单新增 Element Plus input-group 新旧 DOM 与 common-core drag-row/AG Grid 契约，并补充 Node 行为测试和真实浏览器回归。
+
+### Fixed
+
+- 修复带 prefix/append 的输入框主体与右侧图标高度、圆角、边框不一致；组合根统一 26px、6px 和五态描边，左右图标统一 14px，纯图标附加段统一 32px，同时兼容旧版 input 直挂和新版 wrapper DOM。
+- 修复上下分屏拖动后 AG Grid 宿主未沿 pane 收缩、上表只被外层 `overflow:hidden` 裁切且缺少内部纵向滚动的问题；只补齐已识别 AG Grid 的 flex 高度链，让 AG Grid 自身 ResizeObserver 完成内部布局。
+
+### Changed
+
+- 分屏守护不增加外层滚动条、不广播全局 `window.resize`、不访问 Vue 私有实例或猜测 gridApi；普通分屏、普通表格、非分屏 AG Grid、登录页和显式豁免区域不接管，卸载时清理包内结构标记。
+
 ## [1.9.12] - 2026-08-06
 
 ### Added

package/README.md

@@ -104,8 +104,9 @@ wl-skills-ui/
 │   │   ├── common.ts             # 通用业务预设（enable/audit/verify + 起步包）
 │   │   └── index.ts
 │   ├── auto.ts                   # Skin/老项目包级保护自动入口
-│   ├── guards.ts                 # 主题锁 + 长文本溢出保护聚合
+│   ├── guards.ts                 # 主题锁 + 长文本 + 分屏表格尺寸保护聚合
 │   ├── overflow-tooltip.ts       # 普通表格真实溢出 Tooltip 兜底
+│   ├── split-grid-resize.ts      # jh-drag-row 内 AG Grid Resize/高度链守护
 │   └── index.ts                  # 公共 API 入口
 │
 ├── scanner/                      # 自动化扫描 / 修复
@@ -212,7 +213,7 @@ yarn add @agile-team/wl-skills-ui
 |---|---|---|
 | `element-plus` | **`2.2.6-prod.3`** | 集团 jh- 定制版；EP 2.3.0 起引入 `.el-input__wrapper`，与 jh-ui 3.x 不兼容 |
 | `@jhlc/jh-ui` | **`3.1.0`** | SCSS 皮肤包，`.com-text` label 包裹 + `.has-colon` 冒号注入（wl-skills-ui 已统一屏蔽表单冒号） |
-| `@agile-team/wl-skills-ui` | `^1.9.12` | 已对齐上述组合的 DOM 假设、客户主题锁、圆角契约、复合输入、表格长文本兜底与定制页样式边界 |
+| `@agile-team/wl-skills-ui` | `^1.9.13` | 已对齐上述组合的 DOM 假设、客户主题锁、圆角契约、input-group 附加段、分屏 AG Grid 重布局、表格长文本兜底与定制页边界 |
 
 三种识别方式，任选其一：
 
@@ -226,7 +227,14 @@ yarn add @agile-team/wl-skills-ui
 
 ## 版本亮点
 
-当前 v1.9.12：
+当前 v1.9.13：
+
+- **输入附加段不再割裂**：`el-input-group` 由组合根统一 26px 高度、6px 外圆角和 default/hover/focus/error/disabled 描边；左侧 prefix、右侧 append 图标统一 14px，纯图标附加段 32px，文字/单位/按钮仍按内容宽度。
+- **新旧 DOM 同时覆盖**：兼容 jh-ui 配套旧版 input 直挂结构和新版 `.el-input__wrapper` 结构，内部输入不再重复描边；普通 input、普通按钮、登录页和显式豁免区保持原行为。
+- **分屏表格真正重布局**：`runtime/auto` 只观察 `jh-drag-row` 内真实 AG Grid pane，补齐可收缩高度链并按帧派发局部重布局事件；AG Grid 自身 ResizeObserver 生成内部滚动条，不给外层加滚动条、不广播全局 resize、不访问 Vue 私有实例。
+- **回归边界闭环**：结构清单新增 input-group 新旧 DOM 与 drag-row/AG Grid 契约；Node 行为测试覆盖动态挂载、批量 Resize、豁免区，真实浏览器验证附加段计算样式及 220px→120px 收缩后的内部滚动。
+
+上一版 v1.9.12：
 
 - **复合结构有清单**：`standards/component-structures.json` 登记边框所有者、内部无描边层、高度策略、状态与 Teleport 出口；首批覆盖 common-core 多标签、人员/部门/树选择、多选、混合数字框及 BaseToolbar 分裂按钮。
 - **未知结构先评审**：新增 R040，对疑似复合 Element wrapper 只报告、不自动修复，要求先核对真实 DOM 并登记契约，禁止继续放大普通 Element 选择器。
@@ -403,7 +411,7 @@ npx wl-ui init --mode native
 // 4. src/main.ts
 import { installCommonPreset } from "@agile-team/wl-skills-ui/runtime/common-preset";
 installCommonPreset();
-// installCommonPreset 已包含主题锁和普通表格长文本包级保护，无需重复引入 runtime/auto。
+// 已包含主题锁、普通表格长文本和分屏 AG Grid 尺寸保护，无需重复引入 runtime/auto。
 ```
 
 ```vue

package/docs/compat-matrix.md

@@ -11,7 +11,7 @@
 | `element-plus` | **`2.2.6-prod.3`** | 集团 jh- 定制版，搭配 `@jhlc/jh-ui` 使用，DOM 仍为 `.el-input > .el-input__inner` 直挂结构（**EP 2.3.0 起才引入 `.el-input__wrapper`**） |
 | `@jhlc/jh-ui` | **`3.1.0`** | SCSS 皮肤包，`.com-text` label 包裹、`.has-colon ::after` 冒号注入、`.el-form-item--default { margin-bottom: 24px }` 等强约束 |
 | `@jhlc/common-core` | `3.1.0` 或 `3.1.0-prod.x` | 基础 util/types，`@jhlc/jh-ui` 间接依赖 |
-| `@agile-team/wl-skills-ui` | `^1.9.12` | 已对齐 jh-ui 3.1.0 + EP 2.2.6-prod.3 的 DOM 假设、客户主题锁、6px 基础圆角、紧凑表单、复合结构契约、表格行状态、分裂按钮、包级长文本提示、定制页样式边界与 Vite 4 开发转换 |
+| `@agile-team/wl-skills-ui` | `^1.9.13` | 已对齐 jh-ui 3.1.0 + EP 2.2.6-prod.3 的 DOM 假设、客户主题锁、6px 基础圆角、紧凑表单、input-group 附加段、分屏 AG Grid 重布局、复合结构契约、表格长文本提示与定制页边界 |
 
 ## 项目集群当前实测
 
@@ -35,7 +35,7 @@
 
 ## 适配建议
 
-- 集团内项目：**统一锚定 `element-plus@2.2.6-prod.3` + `@jhlc/jh-ui@3.1.0`**，与 wl-skills-ui v1.9.12 三方对齐。
+- 集团内项目：**统一锚定 `element-plus@2.2.6-prod.3` + `@jhlc/jh-ui@3.1.0`**，与 wl-skills-ui v1.9.13 三方对齐。
 - Skin 项目除全局样式外，在 `main.ts` 引入一次 `@agile-team/wl-skills-ui/runtime/auto`；Native 项目的 `installCommonPreset()` 已包含相同包级保护，不要重复安装。
 - 升级 `element-plus` 到 2.3+ 前，必须同步升级 `@jhlc/jh-ui` 到对应支持版本，否则 `.com-text` / `.el-input__inner` DOM 与 EP `__wrapper` 体系不兼容。
 - 新项目接入：见 README 「快速接入」章节，默认会按本表声明 peerDependency 范围。

package/docs/composite-component-contracts.md

@@ -38,6 +38,14 @@ wrapper 时，应先按上述流程确认，不能直接扩大全局 Element 选
 - 部门选择、树选择和 Element 多选封装。
 - 同节点 wrapper + 子 wrapper 的混合数字输入。
 - BaseToolbar 分裂按钮及其动作菜单 Teleport 出口。
+- Element Plus 新旧两种 input-group prepend/append DOM：组合根负责唯一外轮廓，
+  输入主体与附加段统一 26px，纯图标附加段 32px、图标 14px。
+- common-core `jh-drag-row + BaseTable/AG Grid` 高度链：只在真实分屏 AG Grid 中
+  补齐可收缩结构并通知表格内部重布局。
 
 组件结构变化时，测试会先在 fixture/selector 契约处失败，从而把风险阻断在发版前，
 不会等十余个业务项目升级后再发现。
+
+input-group 附加段保留文字、单位、按钮的内容驱动宽度，只有“直接子节点为唯一
+`.el-icon`”时才使用 32px 紧凑宽度；普通 input、普通按钮和非 input-group 不命中。
+分屏重布局的运行机制与接入方式见 `docs/split-grid-resize.md`。

package/docs/split-grid-resize.md

@@ -0,0 +1,68 @@
+# 上下分屏 AG Grid 尺寸重布局
+
+## 问题与边界
+
+`jh-drag-row` 的 `.drager_top/.drager_bottom` 使用 `overflow:hidden` 隔离上下区域。
+拖动分隔条后，如果 BaseTable/AG Grid 宿主没有沿 flex 高度链一起收缩，外层只会裁切
+旧尺寸表格，上表内部不会得到新的 viewport 高度，也就看不到应有的纵向滚动条。
+
+本方案只治理以下同时成立的结构：
+
+- 根节点是 `.drager_row`；
+- 直接 pane 是 `.drager_top` 或 `.drager_bottom`；
+- pane 内真实存在 `.ag-grid-table` 或 `.ag-root-wrapper`；
+- 不在 `.lp-root`、`.session-login`、`.wl-ui-skin-exempt`、
+  `[data-wl-ui-skin="off"]` 中。
+
+普通分屏内容、Element Table、非分屏 AG Grid 和定制区域均不接管。
+
+## 实现机制
+
+1. `runtime/auto` 安装 `ResizeObserver`，只观察已识别分屏的两个直接 pane。
+2. 动态路由晚挂载的新分屏通过仅监听 `childList` 的 `MutationObserver` 注册；不监听
+   全站 style/class 变化，也不扫描每一帧。
+3. 发现 AG Grid 后，为 pane、必要祖先和 grid host 增加包内结构标记；SCSS 只对这些
+   标记补 `min-height:0`。当 grid 的直接父级本来就是纵向 flex 时，grid 使用
+   `flex:1 1 0 + height:0` 占据剩余空间。
+4. grid host 真实尺寸改变后，AG Grid 自身的 `ResizeObserver` 完成布局计算并让内部
+   `.ag-body-viewport` 生成滚动条。
+5. 同一动画帧内的连续 Resize 会合并，并在 grid host 上派发局部
+   `wl-ui:split-grid-resize` 事件，供特殊平台封装按需调用公开 grid API。
+
+本实现不会给 `.drager_top/.drager_bottom` 增加 `overflow:auto`，不会访问 Vue 私有实例，
+不会遍历或猜测 `gridApi`，也不会广播全局 `window.resize`。卸载守护时，本包增加的结构
+标记会一并清理。
+
+## 接入
+
+Skin 项目必须同时接入样式与一次运行时保护：
+
+```scss
+@use "@agile-team/wl-skills-ui/styles/presets/skin" as *;
+```
+
+```ts
+import "@agile-team/wl-skills-ui/runtime/auto";
+```
+
+Native 项目调用 `installCommonPreset()` 即可，它已经包含相同守护，不要重复引入
+`runtime/auto`。
+
+平台封装若确实还需要主动调用 `api.doLayout()`，可选监听局部事件：
+
+```ts
+gridHost.addEventListener("wl-ui:split-grid-resize", () => {
+  gridApi.doLayout?.();
+});
+```
+
+常规 AG Grid 无需业务代码监听；宿主尺寸变化已经会触发它自己的 ResizeObserver。
+
+## 验收
+
+- 拖动前后 `.drager_top/.drager_bottom` 仍为 `overflow:hidden`。
+- `.ag-grid-table` 的实际高度随 pane 收缩，并带
+  `data-wl-ui-split-grid-host`。
+- `.ag-body-viewport` 的 `scrollHeight > clientHeight` 时出现内部纵向滚动条。
+- 分屏外的 AG Grid、普通表格、登录页和显式豁免区无新增结构标记。
+- `npm run test:visual` 中“上下分屏收缩后由 AG Grid 内部 viewport 滚动”通过。

package/docs/visual-regression.md

@@ -13,6 +13,8 @@
 - textarea focus 品牌边框与轻焦点环。
 - 数字输入只有一个边框所有者。
 - common-core 复合多标签外壳自然增高、内层无双描边。
+- input-group 输入主体、前后附加段、左右图标的统一高度/尺寸/圆角与 focus 描边。
+- jh-drag-row 收缩后 AG Grid host 跟随变高，纵向滚动只发生在内部 viewport。
 - Element Table 长文本真实溢出、省略号与按需完整提示。
 - 表格选中行柔和状态色、BaseToolbar 分裂按钮与定制区域豁免。
 

package/es/auto.js

@@ -1,4 +1,4 @@
-import { installUiRuntimeGuards } from './chunk-Z2OTWMW6.js';
+import { installUiRuntimeGuards } from './chunk-QLPJLXY6.js';
 import './chunk-Q3N5QNRZ.js';
 
 // runtime/auto.ts

package/es/{chunk-Z2OTWMW6.js → chunk-QLPJLXY6.js}

@@ -232,10 +232,187 @@ function uninstallOverflowTooltipGuard() {
   installedOptions = DEFAULT_OPTIONS;
 }
 
+// runtime/split-grid-resize.ts
+var SPLIT_ROOT_SELECTOR = ".drager_row";
+var SPLIT_PANE_SELECTOR = ".drager_top, .drager_bottom";
+var GRID_SELECTOR = ".ag-grid-table, .ag-root-wrapper";
+var EXEMPT_SELECTOR = ".lp-root, .session-login, .wl-ui-skin-exempt, [data-wl-ui-skin='off']";
+var SPLIT_GRID_RESIZE_EVENT = "wl-ui:split-grid-resize";
+var installed = false;
+var resizeObserver = null;
+var mutationObserver = null;
+var observedPanes = /* @__PURE__ */ new WeakSet();
+var pendingPanes = /* @__PURE__ */ new Set();
+var addedMarkers = /* @__PURE__ */ new Map();
+var frameId = null;
+function addMarker(element, name) {
+  if (element.hasAttribute(name)) return;
+  element.setAttribute(name, "");
+  const names = addedMarkers.get(element) ?? /* @__PURE__ */ new Set();
+  names.add(name);
+  addedMarkers.set(element, names);
+}
+function removeOwnedMarker(element, name) {
+  const names = addedMarkers.get(element);
+  if (!names?.has(name)) return;
+  element.removeAttribute(name);
+  names.delete(name);
+  if (names.size === 0) addedMarkers.delete(element);
+}
+function isManagedSplitRoot(element) {
+  return element instanceof window.HTMLElement && element.matches(SPLIT_ROOT_SELECTOR) && !element.closest(EXEMPT_SELECTOR);
+}
+function getGridHosts(pane) {
+  const hosts = /* @__PURE__ */ new Set();
+  for (const element of Array.from(
+    pane.querySelectorAll(GRID_SELECTOR)
+  )) {
+    const agGridTable = element.closest(".ag-grid-table");
+    if (agGridTable && pane.contains(agGridTable)) {
+      hosts.add(agGridTable);
+      continue;
+    }
+    if (element.matches(".ag-root-wrapper")) {
+      hosts.add(element);
+    }
+  }
+  return [...hosts];
+}
+function markHeightChain(pane, gridHost) {
+  addMarker(pane, "data-wl-ui-split-pane");
+  addMarker(gridHost, "data-wl-ui-split-grid-host");
+  let parent = gridHost.parentElement;
+  while (parent && parent !== pane) {
+    addMarker(parent, "data-wl-ui-split-grid-chain");
+    parent = parent.parentElement;
+  }
+  const directParent = gridHost.parentElement;
+  if (!directParent) return;
+  const style = window.getComputedStyle(directParent);
+  if ((style.display === "flex" || style.display === "inline-flex") && style.flexDirection === "column") {
+    addMarker(directParent, "data-wl-ui-split-grid-flex-parent");
+  } else {
+    removeOwnedMarker(directParent, "data-wl-ui-split-grid-flex-parent");
+  }
+}
+function notifyPane(pane) {
+  const hosts = getGridHosts(pane);
+  if (hosts.length === 0) return;
+  for (const host of hosts) {
+    markHeightChain(pane, host);
+    const { height, width } = host.getBoundingClientRect();
+    host.dispatchEvent(
+      new window.CustomEvent(SPLIT_GRID_RESIZE_EVENT, {
+        bubbles: true,
+        detail: { height, pane, width }
+      })
+    );
+  }
+}
+function flushPendingPanes() {
+  frameId = null;
+  const panes = [...pendingPanes];
+  pendingPanes.clear();
+  for (const pane of panes) notifyPane(pane);
+}
+function schedulePane(pane) {
+  if (!pane.isConnected || !pane.querySelector(GRID_SELECTOR)) return;
+  pendingPanes.add(pane);
+  if (frameId !== null) return;
+  frameId = window.requestAnimationFrame(flushPendingPanes);
+}
+function registerSplitRoot(root) {
+  for (const pane of Array.from(
+    root.querySelectorAll(SPLIT_PANE_SELECTOR)
+  )) {
+    if (pane.parentElement !== root) continue;
+    if (!observedPanes.has(pane)) {
+      observedPanes.add(pane);
+      resizeObserver?.observe(pane);
+    }
+    schedulePane(pane);
+  }
+}
+function scanNode(node) {
+  if (!(node instanceof window.Element)) return;
+  if (isManagedSplitRoot(node)) registerSplitRoot(node);
+  for (const root of Array.from(
+    node.querySelectorAll(SPLIT_ROOT_SELECTOR)
+  )) {
+    if (isManagedSplitRoot(root)) registerSplitRoot(root);
+  }
+  const containingRoot = node.closest(SPLIT_ROOT_SELECTOR);
+  if (containingRoot && isManagedSplitRoot(containingRoot)) {
+    registerSplitRoot(containingRoot);
+  }
+}
+function scanDocument() {
+  for (const root of Array.from(
+    document.querySelectorAll(SPLIT_ROOT_SELECTOR)
+  )) {
+    if (isManagedSplitRoot(root)) registerSplitRoot(root);
+  }
+}
+function handleDragEnd(event) {
+  const { target } = event;
+  if (!(target instanceof window.Element)) return;
+  const root = target.closest(SPLIT_ROOT_SELECTOR);
+  if (!root || !isManagedSplitRoot(root)) return;
+  registerSplitRoot(root);
+}
+function installSplitGridResizeGuard() {
+  if (installed || typeof window === "undefined" || typeof document === "undefined") {
+    return;
+  }
+  installed = true;
+  if (typeof window.ResizeObserver !== "undefined") {
+    resizeObserver = new window.ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target instanceof window.HTMLElement) schedulePane(entry.target);
+      }
+    });
+  }
+  if (document.body && typeof window.MutationObserver !== "undefined") {
+    mutationObserver = new window.MutationObserver((records) => {
+      for (const record of records) {
+        for (const node of Array.from(record.addedNodes)) scanNode(node);
+      }
+    });
+    mutationObserver.observe(document.body, { childList: true, subtree: true });
+  }
+  document.addEventListener("mouseup", handleDragEnd, true);
+  document.addEventListener("touchend", handleDragEnd, true);
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", scanDocument, { once: true });
+  } else {
+    scanDocument();
+  }
+}
+function uninstallSplitGridResizeGuard() {
+  if (!installed) return;
+  installed = false;
+  resizeObserver?.disconnect();
+  mutationObserver?.disconnect();
+  resizeObserver = null;
+  mutationObserver = null;
+  observedPanes = /* @__PURE__ */ new WeakSet();
+  pendingPanes.clear();
+  for (const [element, names] of addedMarkers) {
+    for (const name of names) element.removeAttribute(name);
+  }
+  addedMarkers = /* @__PURE__ */ new Map();
+  if (frameId !== null) window.cancelAnimationFrame(frameId);
+  frameId = null;
+  document.removeEventListener("mouseup", handleDragEnd, true);
+  document.removeEventListener("touchend", handleDragEnd, true);
+  document.removeEventListener("DOMContentLoaded", scanDocument);
+}
+
 // runtime/guards.ts
 function installUiRuntimeGuards() {
   installBrandThemeLock();
   installOverflowTooltipGuard();
+  installSplitGridResizeGuard();
 }
 
-export { installOverflowTooltipGuard, installUiRuntimeGuards, uninstallOverflowTooltipGuard };
+export { SPLIT_GRID_RESIZE_EVENT, installOverflowTooltipGuard, installSplitGridResizeGuard, installUiRuntimeGuards, uninstallOverflowTooltipGuard, uninstallSplitGridResizeGuard };

package/es/common-preset.js

@@ -1,4 +1,4 @@
-import { installUiRuntimeGuards } from './chunk-Z2OTWMW6.js';
+import { installUiRuntimeGuards } from './chunk-QLPJLXY6.js';
 import { renderTagNode, renderClassifyTag, registerColumnAutoMaps, renderRatingLevel, renderBadge } from './chunk-4IOYRBW4.js';
 export { registerDictColorMap, registerDictColorMaps, renderDictClassifyTag, setDictResolver } from './chunk-4IOYRBW4.js';
 import './chunk-Q3N5QNRZ.js';

package/es/index.d.ts

@@ -180,10 +180,20 @@ declare function installOverflowTooltipGuard(options?: OverflowTooltipGuardOptio
 /** 卸载兜底监听，主要供微前端销毁和回归测试使用。 */
 declare function uninstallOverflowTooltipGuard(): void;
 
+declare const SPLIT_GRID_RESIZE_EVENT = "wl-ui:split-grid-resize";
+interface SplitGridResizeDetail {
+    height: number;
+    pane: HTMLElement;
+    width: number;
+}
+declare function installSplitGridResizeGuard(): void;
+declare function uninstallSplitGridResizeGuard(): void;
+
 /**
  * 安装不依赖业务页面写法的包级运行时保护。
- * 包含客户主题锁与普通表格长文本溢出提示兜底；重复调用安全。
+ * 包含客户主题锁、普通表格长文本溢出提示兜底与分屏 AG Grid 尺寸守护；
+ * 重复调用安全。
  */
 declare function installUiRuntimeGuards(): void;
 
-export { BRAND_THEME_TOKENS, ColumnLike, type OverflowTooltipGuardOptions, type PresetConfig, clearColumnAutoMap, createPreset, defineColumns, getColumnAutoMap, getInstalledPresets, installBrandThemeLock, installOverflowTooltipGuard, installPreset, installUiRuntimeGuards, registerColumnAutoMap, registerColumnAutoMaps, uninstallOverflowTooltipGuard };
+export { BRAND_THEME_TOKENS, ColumnLike, type OverflowTooltipGuardOptions, type PresetConfig, SPLIT_GRID_RESIZE_EVENT, type SplitGridResizeDetail, clearColumnAutoMap, createPreset, defineColumns, getColumnAutoMap, getInstalledPresets, installBrandThemeLock, installOverflowTooltipGuard, installPreset, installSplitGridResizeGuard, installUiRuntimeGuards, registerColumnAutoMap, registerColumnAutoMaps, uninstallOverflowTooltipGuard, uninstallSplitGridResizeGuard };

package/es/index.js

@@ -1,4 +1,4 @@
-export { installOverflowTooltipGuard, installUiRuntimeGuards, uninstallOverflowTooltipGuard } from './chunk-Z2OTWMW6.js';
+export { SPLIT_GRID_RESIZE_EVENT, installOverflowTooltipGuard, installSplitGridResizeGuard, installUiRuntimeGuards, uninstallOverflowTooltipGuard, uninstallSplitGridResizeGuard } from './chunk-QLPJLXY6.js';
 import { registerColumnAutoMaps } from './chunk-4IOYRBW4.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-4IOYRBW4.js';
 export { BRAND_THEME_TOKENS, installBrandThemeLock } from './chunk-Q3N5QNRZ.js';

package/package.json

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

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

@@ -67,6 +67,9 @@ el-date-picker 默认宽度不会自动撑满 el-form-item，必须显式设置
   平台默认阴影。
 - 数字输入框必须同时检查社区版“wrapper 子节点”和 jh-ui“wrapper 与
   input-number 同节点”两种 DOM，并确保只存在一层可见边框。
+- 带 prepend/append 的 input-group 必须由组合根绘制唯一外轮廓；输入主体、附加段
+  统一 26px，左右图标统一 14px。纯图标附加段使用 32px，文字/单位/按钮保持内容宽度。
+  不允许业务页分别给 `.el-input__inner` 与 `.el-input-group__append` 写不同高度。
 - 登录页和显式定制页继续使用自身样式，不套用上述高权重规则。
 
 ---

package/skills/vendors/jh-components/SKILL.md

@@ -49,7 +49,8 @@ applyTo: "**/*.vue"
 
 - ❌ 自行给 `.jh-tree` 写颜色覆盖（应用全局 `vendors/_jh-tree.scss`）
 - ❌ jh-drag-col 内自定义 padding 破坏拖拽条对齐
-- ❌ jh-drag-row 上下分栏缺 `.drager_row { height:100% }` 高度链（拖拽失效），或页面自行重画 `.slider_row`；手柄必须统一使用 `_jh-drag-row.scss` 的细分隔线 + 三点胶囊
+- ❌ jh-drag-row 上下分栏缺可收缩高度链，拖动后仅靠 pane 的 `overflow:hidden` 裁切 AG Grid；必须接入 `runtime/auto`，由 ResizeObserver 通知表格内部重布局，禁止给外层随意加滚动条
+- ❌ 页面自行重画 `.slider_row`；手柄必须统一使用 `_jh-drag-row.scss` 的细分隔线 + 三点胶囊
 - ❌ jh-pagination 未对齐到右侧（同 R011）
 - ❌ jh-form 内不用 `size="small"` 控件（同 R006）
 - ❌ 发现新的复杂 `<jh-*>` 组件后只在页面局部写补丁，而不沉淀到 L2 Project Vendors
@@ -65,6 +66,7 @@ applyTo: "**/*.vue"
 ### B 类
 
 - 直接全局覆盖 `.jh-*` → 改为引入 `wl-skills-ui/styles` 由 vendors 层处理
+- `jh-drag-row + AG Grid` → Skin 项目除样式外在启动入口引入一次 `@agile-team/wl-skills-ui/runtime/auto`；Native 项目使用 `installCommonPreset()`，详见 `docs/split-grid-resize.md`
 - 新的复杂 `<jh-*>` 组件 → 先判断是否只是 Element Plus 薄封装；若不是，应新增 `styles/vendors/_jh-xxx.scss` 和对应 Skill/检测规则
 
 ## 全局样式来源

package/standards/component-structures.json

@@ -215,6 +215,99 @@
         "open"
       ],
       "risk": "主动作和箭头是两个交互区但必须共享一个视觉外轮廓；下拉菜单中的业务按钮需扁平化且不能污染普通菜单。"
+    },
+    {
+      "id": "element-plus.input-group-affixes",
+      "vendor": "element-plus",
+      "family": "form-composite",
+      "source": "Element Plus Input prepend/append slot DOM；common-core jh-input 沿用该结构",
+      "fixture": "scanner/__tests__/component-fixtures/element-input-group-affixes.html",
+      "rootSelector": ".el-input.el-input-group",
+      "ownerSelector": ".el-input.el-input-group",
+      "innerBorderlessSelectors": [
+        ".el-input.el-input-group > .el-input__wrapper"
+      ],
+      "knownRootClasses": [
+        "el-input-group"
+      ],
+      "heightPolicy": "fixed-control-height",
+      "states": [
+        "default",
+        "hover",
+        "focus",
+        "error",
+        "disabled"
+      ],
+      "assertions": [
+        {
+          "target": "root",
+          "selector": ".el-input.el-input-group",
+          "matches": true
+        },
+        {
+          "target": "inner",
+          "selector": ".el-input.el-input-group > .el-input__wrapper",
+          "matches": true
+        }
+      ],
+      "risk": "输入主体、prepend/append 和内部图标原本各自携带高度、圆角与描边；必须由组合根统一外轮廓，仅保留内部接缝，避免附加段独立成块。"
+    },
+    {
+      "id": "common-core.drag-row-ag-grid",
+      "vendor": "common-core",
+      "family": "layout-composite",
+      "source": "lowcode-engine/packages/common/common-lowcode/components-core/src/components/drag-row/drag-row.vue + BaseTable renderType=agGrid DOM",
+      "fixture": "scanner/__tests__/component-fixtures/common-core-drag-row-ag-grid.html",
+      "rootSelector": ".drager_row",
+      "ownerSelector": ".drager_row .ag-grid-table",
+      "innerBorderlessSelectors": [],
+      "knownRootClasses": [
+        "drager_row"
+      ],
+      "heightPolicy": "content-driven",
+      "states": [
+        "initial",
+        "dragging",
+        "drag-end",
+        "container-resize"
+      ],
+      "risk": "分屏 pane 使用 overflow:hidden，拖动后若 AG Grid 宿主没有沿 flex 高度链收缩，只会裁掉旧尺寸内容而不会生成内部纵向滚动条。"
+    },
+    {
+      "id": "element-plus.input-group-affixes-legacy",
+      "vendor": "element-plus",
+      "family": "form-composite",
+      "source": "jh-ui 3.1.0 配套 Element Plus 2.2.x Input prepend/append 直挂 DOM",
+      "fixture": "scanner/__tests__/component-fixtures/element-input-group-affixes-legacy.html",
+      "rootSelector": ".el-input.el-input-group",
+      "ownerSelector": ".el-input.el-input-group",
+      "innerBorderlessSelectors": [
+        ".el-input.el-input-group > .el-input__inner"
+      ],
+      "knownRootClasses": [
+        "el-input-group"
+      ],
+      "heightPolicy": "fixed-control-height",
+      "states": [
+        "default",
+        "hover",
+        "focus",
+        "error",
+        "disabled"
+      ],
+      "assertions": [
+        {
+          "target": "root",
+          "selector": ".el-input.el-input-group",
+          "matches": true
+        },
+        {
+          "target": "inner",
+          "selector": ".el-input.el-input-group > .el-input__inner",
+          "matches": true
+        }
+      ],
+      "risk": "旧 DOM 没有 el-input__wrapper；若只清理新版 wrapper，直挂 input 会保留第二层边框并与 append 高度错位。"
     }
   ]
 }

package/styles/element/_form.scss

@@ -75,6 +75,130 @@ html body {
     line-height: calc(var(--wk-form-control-height) - 2px) !important;
   }
 
+  // ── 带前/后附加段的输入框 ────────────────────────────────────────────────
+  // Element input-group 把输入主体与 append/prepend 分成多个描边节点；平台或
+  // 业务局部高度只改其中一段时，就会出现截图中的右侧图标高低、圆角和边框不齐。
+  // 仅命中真实 .el-input.el-input-group，由组合根绘制唯一外轮廓，内部只保留分隔线。
+  &.el-input.el-input-group {
+    display: inline-flex !important;
+    align-items: stretch !important;
+    height: var(--wk-form-control-height) !important;
+    min-height: var(--wk-form-control-height) !important;
+    border: 0 !important;
+    border-radius: var(--wk-form-control-radius) !important;
+    box-sizing: border-box !important;
+    overflow: hidden !important;
+    background: var(--el-bg-color, #fff) !important;
+    box-shadow: 0 0 0 1px var(--el-border-color, #dcdfe6) inset !important;
+    transition: box-shadow 0.15s ease !important;
+  }
+
+  &.el-input.el-input-group > .el-input__wrapper {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+    height: 100% !important;
+    min-height: 0 !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+
+  // jh-ui 配套的 Element Plus 2.2.x 仍可能使用 input 直挂结构。
+  &.el-input.el-input-group > .el-input__inner {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+    height: 100% !important;
+    min-height: 0 !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    outline: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+
+  &.el-input.el-input-group > .el-input-group__prepend,
+  &.el-input.el-input-group > .el-input-group__append {
+    display: inline-flex !important;
+    flex: 0 0 auto !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: auto !important;
+    height: 100% !important;
+    min-height: 0 !important;
+    padding: 0 8px !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    box-sizing: border-box !important;
+    color: var(--el-text-color-secondary, #909399) !important;
+    background: var(--el-fill-color-light, #f5f7fa) !important;
+    box-shadow: none !important;
+  }
+
+  &.el-input.el-input-group > .el-input-group__prepend {
+    box-shadow: -1px 0 0 var(--el-border-color, #dcdfe6) inset !important;
+  }
+
+  &.el-input.el-input-group > .el-input-group__append {
+    box-shadow: 1px 0 0 var(--el-border-color, #dcdfe6) inset !important;
+  }
+
+  &.el-input.el-input-group
+    > :where(.el-input-group__prepend, .el-input-group__append):has(
+      > .el-icon:only-child
+    ) {
+    flex-basis: 32px !important;
+    width: 32px !important;
+    padding: 0 !important;
+  }
+
+  &.el-input.el-input-group
+    > :where(.el-input-group__prepend, .el-input-group__append)
+    > .el-icon,
+  &.el-input .el-input__prefix-inner > .el-icon,
+  &.el-input .el-input__suffix-inner > .el-icon,
+  &.el-input .el-input__prefix > .el-icon,
+  &.el-input .el-input__suffix > .el-icon {
+    width: 14px !important;
+    height: 14px !important;
+    font-size: 14px !important;
+    line-height: 14px !important;
+  }
+
+  &.el-input.el-input-group
+    > :where(.el-input-group__prepend, .el-input-group__append)
+    > .el-button {
+    height: 100% !important;
+    min-height: 0 !important;
+    margin: 0 -8px !important;
+    padding: 0 8px !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+
+  &.el-input.el-input-group:not(.is-disabled):hover {
+    box-shadow: 0 0 0 1px var(--el-border-color-hover, #c0c4cc) inset !important;
+  }
+
+  &.el-input.el-input-group:not(.is-disabled):focus-within {
+    box-shadow:
+      0 0 0 1.5px var(--el-color-primary, #002a8f) inset,
+      0 0 0 2px rgba(var(--el-color-primary-rgb, 0, 42, 143), 0.1) !important;
+  }
+
+  &.el-input.el-input-group.is-disabled {
+    background: var(--el-disabled-bg-color, #f5f7fa) !important;
+    box-shadow: 0 0 0 1px var(--el-disabled-border-color, #e4e7ed) inset !important;
+  }
+
+  &.el-input.el-input-group.is-disabled
+    > :where(.el-input-group__prepend, .el-input-group__append) {
+    color: var(--el-disabled-text-color, #a8abb2) !important;
+    background: var(--el-disabled-bg-color, #f5f7fa) !important;
+  }
+
   // common-core / jh-ui 有两种数字框 DOM：
   // A. .el-input-number > .el-input > .el-input__wrapper（社区版）
   // B. .el-input-number.el-input__wrapper > .el-input（jh 同节点 wrapper）
@@ -217,4 +341,5 @@ html body {
     box-shadow:
       0 0 0 2px rgba(var(--el-color-primary-rgb, 0, 42, 143), 0.12) !important;
   }
+
 }

package/styles/vendors/_base-components.scss

@@ -612,6 +612,23 @@
       > .el-input__wrapper {
       box-shadow: none !important;
     }
+
+    // 输入组合框由最外层统一绘制轮廓；错误态必须覆盖其 focus-within 品牌色，
+    // 同时清空内部 wrapper，避免 append/prepend 场景出现双描边。
+    .el-input.el-input-group:not(.is-disabled),
+    .el-input.el-input-group:not(.is-disabled):hover {
+      box-shadow: 0 0 0 1px var(--el-color-danger, #f56c6c) inset !important;
+    }
+
+    .el-input.el-input-group:not(.is-disabled):focus-within {
+      box-shadow:
+        0 0 0 1.5px var(--el-color-danger, #f56c6c) inset,
+        0 0 0 2px rgba(var(--el-color-danger-rgb, 245, 108, 108), 0.1) !important;
+    }
+
+    .el-input.el-input-group > .el-input__wrapper {
+      box-shadow: none !important;
+    }
   }
 }
 

package/styles/vendors/_jh-drag-row.scss

@@ -81,3 +81,38 @@ html .drager_row > .slider_row {
 html .drager_row {
   min-height: 0;
 }
+
+// 上下分屏只负责裁切布局边界，滚动仍由 AG Grid 内部 viewport 负责。
+// runtime/auto 会仅在分屏 pane 内发现真实 AG Grid 时打上这些结构标记，
+// 从而补齐可收缩高度链；普通内容、普通表格和定制区域不会命中。
+html .drager_row > [data-wl-ui-split-pane] {
+  min-height: 0 !important;
+  overflow: hidden !important;
+}
+
+html .drager_row [data-wl-ui-split-grid-chain] {
+  min-height: 0 !important;
+}
+
+html
+  .drager_row
+  [data-wl-ui-split-grid-flex-parent]
+  > [data-wl-ui-split-grid-host] {
+  flex: 1 1 0 !important;
+  height: 0 !important;
+  min-height: 0 !important;
+  max-height: 100% !important;
+}
+
+html .drager_row [data-wl-ui-split-grid-host] {
+  min-height: 0 !important;
+  max-height: 100% !important;
+}
+
+html
+  .drager_row
+  .ag-grid-table[data-wl-ui-split-grid-host]
+  > .ag-root-wrapper {
+  height: 100% !important;
+  min-height: 0 !important;
+}