@agile-team/wl-skills-ui 1.9.10 → 1.9.11

package/CHANGELOG.md

@@ -4,6 +4,17 @@ 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.11] - 2026-08-06
+
+### Fixed
+
+- 精准识别 common-core 多标签输入的复合 wrapper，不再把 `.com-input-multi-tag-wrap.el-input.el-input__wrapper` 当成普通单行输入框强制固定高度；空值保持统一紧凑高度，标签换行时允许容器自然增长，避免外层边框消失或内容裁切。
+- 复合输入严格保持“外层唯一描边、内层编辑器无描边”契约；默认、hover、focus、error、disabled 状态继续使用统一边框色、客户品牌色、危险色、禁用色与 6px 圆角，不产生双描边。
+
+### Changed
+
+- 新增复合多标签输入真实 DOM 分类测试，并同时锁定普通输入仍保持 26px 固定高度，防止专项修复放宽其他正常表单规则。
+
 ## [1.9.10] - 2026-08-01
 
 ### Added

package/README.md

@@ -208,7 +208,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.10` | 已对齐上述组合的 DOM 假设、客户主题锁、圆角契约、表格长文本兜底与定制页样式边界 |
+| `@agile-team/wl-skills-ui` | `^1.9.11` | 已对齐上述组合的 DOM 假设、客户主题锁、圆角契约、复合输入、表格长文本兜底与定制页样式边界 |
 
 三种识别方式，任选其一：
 
@@ -222,7 +222,13 @@ yarn add @agile-team/wl-skills-ui
 
 ## 版本亮点
 
-当前 v1.9.10：
+当前 v1.9.11：
+
+- **复合输入不再误伤**：common-core 多标签/人员选择器不再被普通 input 的固定高度压缩；无标签时保持 26px 紧凑基线，标签换行时容器自然增高。
+- **视觉契约保持统一**：复合输入外层继续使用统一 6px 圆角及默认、hover、品牌 focus、error、disabled 边框，内部编辑 input 不重复描边；普通 input/select/date/input-number 原有规则不变。
+- **结构级防回归**：新增与 common-core 实际 DOM 一致的分类测试，明确区分复合外壳、内部编辑器和普通输入框，防止后续通用选择器再次误命中。
+
+上一版 v1.9.10：
 
 - **长文本真正包级闭环**：普通 Element Table、BaseTable 与 AG Grid 即使没有经过 `defineColumns()`，真实超宽时也会稳定显示省略号，并由 `runtime/auto` 在悬停或键盘聚焦时兜底完整文本提示；动态行和虚拟滚动无需额外处理。
 - **严格防污染边界**：已有组件 Tooltip 优先，编辑列、操作列、Tag、复选框、自定义 renderer、主动换行列、登录页及显式皮肤豁免区域均不接管；没有溢出时不创建 Tooltip。
@@ -316,7 +322,7 @@ yarn add @agile-team/wl-skills-ui
 - 优化 BaseToolbar 下拉/分裂按钮组，让“主动作 + 下拉动作”按一个动作组展示，避免视觉割裂
 - 优化 AG Grid 操作列 `jh-op-*` 图标/胶囊/文字按钮，取消按压缩放抖动，并提升选中行下的可读性
 - 补齐输入控件 focus 品牌色边框、统一圆角、长 label 单行省略和自定义弹窗图标居中尺寸规则
-- 全量移除旧 `wk-` 前缀命名（包名 / CLI / 快照目录 / 豁免配置 / MCP 工具名），不再兼容（详见 CHANGELOG v1.6.10）
+- 移除旧 `wk-` 工程命名（包名 / CLI / 快照目录 / 豁免配置 / MCP 工具名）；`--wk-*` 设计 token 作为既有公共契约继续保留，避免破坏消费项目的变量覆盖，它不代表加载了旧包
 - 新增 `skills/_meta/_compat/vendors.json` 作为 L2 Project Vendors 的单一事实源（id / priority / patterns / baseline / styles），`scanner/coverage.mjs` 启动时一次性编译 RegExp，零运行时开销
 - 新增 `wl-ui add-vendor <tag> [--family <id>] [--dry-run]` 脚手架命令：一键生成专项 SCSS、`@forward` 注册、`vendors.json` baseline 追加、scanner 规则草稿
 - MCP 工具前缀统一为 `wl_ui_*`（`wl_ui_check` / `wl_ui_scan` / `wl_ui_fix_dry_run` / `wl_ui_skill_prompt` / `wl_ui_route_intent` / `wl_ui_recommend_flow`）

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.10` | 已对齐 jh-ui 3.1.0 + EP 2.2.6-prod.3 的 DOM 假设、客户主题锁、6px 基础圆角、紧凑表单、表格行状态、分裂按钮、包级长文本提示、定制页样式边界与 Vite 4 开发转换 |
+| `@agile-team/wl-skills-ui` | `^1.9.11` | 已对齐 jh-ui 3.1.0 + EP 2.2.6-prod.3 的 DOM 假设、客户主题锁、6px 基础圆角、紧凑表单、复合多标签输入、表格行状态、分裂按钮、包级长文本提示、定制页样式边界与 Vite 4 开发转换 |
 
 ## 项目集群当前实测
 
@@ -35,7 +35,7 @@
 
 ## 适配建议
 
-- 集团内项目：**统一锚定 `element-plus@2.2.6-prod.3` + `@jhlc/jh-ui@3.1.0`**，与 wl-skills-ui v1.9.10 三方对齐。
+- 集团内项目：**统一锚定 `element-plus@2.2.6-prod.3` + `@jhlc/jh-ui@3.1.0`**，与 wl-skills-ui v1.9.11 三方对齐。
 - 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/package.json

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

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

@@ -33,6 +33,7 @@ applyTo: "**/*.vue"
 - label `.com-text` / `.text-line-2` 单行省略 + has-colon 冒号屏蔽
 - EP 2.2.x `.el-input__inner` 26px 高度、圆角 / focus / error 三态
 - jh-picker / reference-picker 的 `.com-picker` / `.com-reference-picker` 输入高度兜底
+- common-core 多标签/人员选择器的 `.com-input-multi-tag-wrap` 使用 26px 最小高度并允许标签换行自然增高；只由外层绘制统一状态边框，内部编辑 input 不重复描边
 - jh-select / jh-date-picker 的 `.el-select.is-focus` / `.el-input.is-focus` 兼容
 - 必填星号在 inline-flex label 下显式声明颜色
 

package/standards/ui/03-form.md

@@ -65,6 +65,11 @@ date-picker 默认宽度固定，在 grid 布局中需撑满列宽：
 
 textarea 不强制 26px 高度，只继承统一圆角、字体和状态样式。
 
+多标签、人员/部门多选等复合输入同样不能强制固定为 26px。它们使用
+`--wk-form-control-height` 作为最小高度，无内容时与普通单行控件对齐，标签换行后允许外壳自然增高。
+复合控件只能由最外层 wrapper 绘制默认、hover、focus、error、disabled 边框；内部编辑 input
+必须保持无描边，避免边框消失、内容裁切或出现双描边。
+
 ---
 
 ## 规则：紧凑业务表单字号统一为 12px

package/styles/element/_form.scss

@@ -50,7 +50,9 @@ html body {
     font-size: var(--wk-form-font-size, 12px) !important;
   }
 
-  &.el-input__wrapper,
+  // 复合多标签输入把外壳复用了 .el-input__wrapper，但它需要随标签换行自然增高；
+  // 这里只固定真正的单行 wrapper，复合外壳交给 L2 vendor 适配。
+  &.el-input__wrapper:not(.com-input-multi-tag-wrap),
   &.el-select__wrapper,
   &.el-select .el-select__wrapper,
   &.el-date-editor.el-input__wrapper,

package/styles/vendors/_base-components.scss

@@ -480,8 +480,10 @@
     transition: box-shadow 0.15s ease, border-color 0.15s ease;
   }
 
-  &.el-input__wrapper.is-focus,
-  &.el-input__wrapper:focus-within,
+  // 复合多标签输入只允许最外层 wrapper 绘制焦点边框；
+  // 内层编辑 input 保持无边框，避免出现双描边。
+  &.el-input__wrapper:not(.com-input-multi-tag-wrap .el-input__wrapper).is-focus,
+  &.el-input__wrapper:not(.com-input-multi-tag-wrap .el-input__wrapper):focus-within,
   &.el-select__wrapper.is-focus,
   &.el-select__wrapper.is-focused,
   &.el-select__wrapper:focus-within,
@@ -590,7 +592,7 @@
       color: var(--el-color-danger, #f56c6c) !important;
     }
 
-    .el-input__wrapper,
+    .el-input__wrapper:not(.com-input-multi-tag-wrap .el-input__wrapper),
     .el-select__wrapper,
     .el-date-editor.el-input__wrapper,
     .el-textarea__inner {

package/styles/vendors/_jh-ui.scss

@@ -132,26 +132,28 @@
     border-radius: var(--el-border-radius-base);
   }
 
-  // 6) jh-picker / reference-picker — 不走 .com-input wrapper，也要继承单行控件高度
-  &.com-picker .el-input,
-  &.com-reference-picker .el-input,
-  &.com-reference-picker-input .el-input,
-  &.com-user-picker .el-input,
-  &.com-dept-picker .el-input,
-  &.com-userPicker .el-input,
-  &.com-deptPicker .el-input,
+  // 6) jh-picker / reference-picker — 不走 .com-input wrapper，也要继承单行控件高度。
+  // 多标签组件会把外壳同时声明成 .el-input / .el-input__wrapper；外壳不是单行输入，
+  // 必须允许内容换行增高，只固定它内部真正负责编辑的 input。
+  &.com-picker .el-input:not(.com-input-multi-tag-wrap),
+  &.com-reference-picker .el-input:not(.com-input-multi-tag-wrap),
+  &.com-reference-picker-input .el-input:not(.com-input-multi-tag-wrap),
+  &.com-user-picker .el-input:not(.com-input-multi-tag-wrap),
+  &.com-dept-picker .el-input:not(.com-input-multi-tag-wrap),
+  &.com-userPicker .el-input:not(.com-input-multi-tag-wrap),
+  &.com-deptPicker .el-input:not(.com-input-multi-tag-wrap),
   &.jh-picker .el-input,
   &.jh-picker-trigger.el-input {
     height: var(--wk-form-control-height, 26px) !important;
   }
 
-  &.com-picker .el-input__wrapper,
-  &.com-reference-picker .el-input__wrapper,
-  &.com-reference-picker-input .el-input__wrapper,
-  &.com-user-picker .el-input__wrapper,
-  &.com-dept-picker .el-input__wrapper,
-  &.com-userPicker .el-input__wrapper,
-  &.com-deptPicker .el-input__wrapper,
+  &.com-picker .el-input__wrapper:not(.com-input-multi-tag-wrap),
+  &.com-reference-picker .el-input__wrapper:not(.com-input-multi-tag-wrap),
+  &.com-reference-picker-input .el-input__wrapper:not(.com-input-multi-tag-wrap),
+  &.com-user-picker .el-input__wrapper:not(.com-input-multi-tag-wrap),
+  &.com-dept-picker .el-input__wrapper:not(.com-input-multi-tag-wrap),
+  &.com-userPicker .el-input__wrapper:not(.com-input-multi-tag-wrap),
+  &.com-deptPicker .el-input__wrapper:not(.com-input-multi-tag-wrap),
   &.jh-picker .el-input__wrapper,
   &.jh-picker-trigger.el-input .el-input__wrapper {
     height: var(--wk-form-control-height, 26px) !important;
@@ -159,6 +161,31 @@
     border-radius: var(--el-border-radius-base) !important;
   }
 
+  // common-core 多标签输入：外层负责唯一边框和统一圆角，内容负责自然换行。
+  // 不设置固定 height，避免标签/内部输入覆盖外层 inset 边框或被裁切。
+  &.com-input-multi-tag-wrap.el-input__wrapper {
+    height: auto !important;
+    min-height: var(--wk-form-control-height, 26px) !important;
+    border-radius: var(--wk-form-control-radius, var(--el-border-radius-base, 6px)) !important;
+    box-sizing: border-box !important;
+    background: var(--el-input-bg-color, var(--el-fill-color-blank, #fff)) !important;
+    box-shadow:
+      0 0 0 1px var(--el-input-border-color, var(--el-border-color, #dcdfe6)) inset !important;
+    transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
+  }
+
+  // hover 保持低于后加载的 focus/error 契约，组合状态下由品牌焦点色或危险色胜出。
+  &.com-input-multi-tag-wrap.el-input__wrapper:not(.is-disabled):hover {
+    box-shadow:
+      0 0 0 1px var(--el-input-hover-border-color, var(--el-border-color-hover, #c0c4cc)) inset !important;
+  }
+
+  &.com-input-multi-tag-wrap.el-input__wrapper.is-disabled {
+    background: var(--el-disabled-bg-color, #f5f7fa) !important;
+    box-shadow:
+      0 0 0 1px var(--el-disabled-border-color, #e4e7ed) inset !important;
+  }
+
   &.com-picker .el-input > .el-input__inner,
   &.com-reference-picker .el-input > .el-input__inner,
   &.com-reference-picker-input .el-input > .el-input__inner,