@agile-team/wl-skills-ui 1.6.13 → 1.6.14

package/CHANGELOG.md

@@ -4,6 +4,14 @@ 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.6.14] - 2026-05-12
+
+### Added
+
+- 新增 `styles/vendors/_jh-ui.scss` 专项承接 `@jhlc/jh-ui` SCSS 皮肤包，覆盖 `.com-text` label 包裹、`.has-colon` 冒号注入、`.com-input` / `.com-textarea` 控件 wrapper 等 jh-ui 特有 DOM 模式。
+- 新增 Element Plus 2.2.x（`.el-input__inner` 直挂结构、无 `.el-input__wrapper`）下输入、选择、日期控件的圆角 / focus / error 三态规则，jh-select 与 jh-date-picker focus 表现稳定。
+- `skills/_meta/_compat/vendors.json` 在 jh vendor 下登记 `@jhlc/jh-ui` baseline 与 `_jh-ui.scss` 样式来源；`skills/vendors/jh-components/SKILL.md` 补齐识别表与全局样式来源。
+
 ## [1.6.13] - 2026-05-12
 
 ### Fixed

package/README.md

@@ -193,8 +193,10 @@ yarn add @agile-team/wl-skills-ui
 
 ## 版本亮点
 
-当前 v1.6.13 版本继续强化“统一规则源 + 单一事实源 + 项目集群封装必覆盖 + UI 细节精准修复”的闭环，并补齐销售报价页暴露出的通用 UI 细节：
+当前 v1.6.14 版本继续强化“统一规则源 + 单一事实源 + 项目集群封装必覆盖 + UI 细节精准修复”的闭环，并补齐销售报价页暴露出的通用 UI 细节：
 
+- 新增 `@jhlc/jh-ui` SCSS 皮肤包专项适配（`styles/vendors/_jh-ui.scss`），精准覆盖 `.com-text` label、`.com-input` / `.com-textarea` 控件 wrapper、`.has-colon` 冒号注入等 jh-ui 特有 DOM
+- 兼容 Element Plus 2.2.x（`.el-input__inner` 直挂结构）下输入、选择、日期控件的圆角 / focus / error 三态，jh-select 与 jh-date-picker focus 行为稳定
 - 补强输入、选择、日期、文本域 focus 品牌色边框和必填星号红色显示规则，兼容 Element Plus 定制版本差异
 - 修复表单必填星号、错误 label、错误提示和错误边框红色态，避免校验反馈被通用 label/input 样式覆盖
 - 优化 BaseToolbar 下拉/分裂按钮组，让“主动作 + 下拉动作”按一个动作组展示，避免视觉割裂

package/package.json

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

package/skills/_meta/_compat/vendors.json

@@ -31,9 +31,11 @@
         "jh-form",
         "jh-tree",
         "jh-pagination",
-        "jh-drag-col"
+        "jh-drag-col",
+        "@jhlc/jh-ui"
       ],
       "styles": [
+        "_jh-ui.scss",
         "_jh-tree.scss",
         "_jh-pagination.scss",
         "_jh-drag-col.scss"

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

@@ -15,6 +15,7 @@ applyTo: "**/*.vue"
 
 | 类型 | 子组件 | 标签 | 关键类名 | 治理方式 |
 |---|---|---|---|---|
+| SCSS 皮肤适配 | `@jhlc/jh-ui` | — | `.com-text` / `.com-input` / `.com-textarea` / `.com-input-tip` | `styles/vendors/_jh-ui.scss` |
 | 专项样式覆盖 | jh-tree | `<jh-tree>` | `.jh-tree` / `.base-tree` | `styles/vendors/_jh-tree.scss` |
 | 专项样式覆盖 | jh-pagination | `<jh-pagination>` | `.jh-pagination` | `styles/vendors/_jh-pagination.scss` |
 | 专项样式覆盖 | jh-drag-col | `<jh-drag-col>` | `.drag-col-container` / `.drag-left` / `.slider-col` | `styles/vendors/_jh-drag-col.scss` |
@@ -22,6 +23,15 @@ applyTo: "**/*.vue"
 | 通用规则治理 | jh-form | `<jh-form>` | `.jh-form` | 继承 L0 tokens + L1 form 视觉原则 |
 | 通用规则治理 | 其它 jh-* | `<jh-*>` | `.jh-*` / 组件内部 Element Plus 类 | 先按 jh 通用规则治理，复杂结构再升级专项样式 |
 
+### `@jhlc/jh-ui` SCSS 皮肤包识别
+
+项目同时安装 `@jhlc/jh-ui` 与 `element-plus`（常为 `2.2.6-prod.3` 定制版）时，输入控件 DOM 为 `.el-input > .el-input__inner`（无 `.el-input__wrapper`），表单 label 文本被包成 `<span class="com-text">`，并由 `.has-colon .com-text::after` 注入冒号。`_jh-ui.scss` 已经精准覆盖：
+
+- label `.com-text` 单行省略 + has-colon 冒号保留
+- EP 2.2.x `.el-input__inner` 圆角 / focus / error 三态
+- jh-select / jh-date-picker 的 `.el-select.is-focus` / `.el-input.is-focus` 兼容
+- 必填星号在 inline-flex label 下显式声明颜色
+
 ## Diagnose
 
 - ❌ 自行给 `.jh-tree` 写颜色覆盖（应用全局 `vendors/_jh-tree.scss`）
@@ -42,6 +52,7 @@ applyTo: "**/*.vue"
 
 ## 全局样式来源
 
+- `styles/vendors/_jh-ui.scss`
 - `styles/vendors/_jh-tree.scss`
 - `styles/vendors/_jh-pagination.scss`
 - `styles/vendors/_jh-drag-col.scss`

package/styles/vendors/_jh-ui.scss

@@ -0,0 +1,102 @@
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// @jhlc/jh-ui adapter — L2 vendor 化妆层（项目集群专用）
+//
+// 背景
+//   `@jhlc/jh-ui@3.x` 是项目集群在用的 Element Plus SCSS 皮肤包，
+//   常与 Element Plus 2.2.x（如 `element-plus@2.2.6-prod.3`）配套使用。
+//   它对 Element Plus 的 DOM/选择器约定与社区版（2.6+）不一致：
+//
+//     1. 表单 label 文本被包成 `<span class="com-text">`，
+//        `.el-form-item__label` 自身是 `display: inline-flex`。
+//        → 直接在 label 上写 ellipsis 不生效，必须落到 `.com-text`。
+//     2. `.has-colon .el-form-item__label .com-text::after` 注入冒号。
+//        → ellipsis 容器必须给 `::after` 预留空间。
+//     3. 输入控件 DOM 为 `.el-input > .el-input__inner`（无 `.el-input__wrapper`）。
+//        → focus / error 必须命中 `.el-input__inner`，
+//          `.el-input__wrapper.is-focus` 这类 EP 2.6+ 规则在这里不生效。
+//     4. select 用 `.el-select .el-input > .el-input__inner`，
+//        focus 标志位为 `.el-select.is-focus` 或 `.el-input.is-focus`。
+//     5. `.com-input` / `.com-textarea` / `.com-input-tip` 是 jh-ui 的控件
+//        外层 wrapper，承载 form-item 的 has-tip / is-error 形态。
+//
+// 边界
+//   - 本文件只负责修复 jh-ui DOM 与 wl-skills-ui 统一规则的对接差异。
+//   - 不重复 jh-ui 已经设好的视觉（如下拉项 padding/radius、表单 margin-bottom）。
+//   - Element Plus 2.6+ 项目的 `.el-input__wrapper` 规则继续由
+//     `_base-components.scss` 统一处理。
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+// 1) label 文本容器（.com-text） — 单行省略，允许收缩
+//    .el-form-item__label 在 jh-ui 中是 inline-flex，
+//    必须放开 min-width 才能让内部 .com-text 真的 shrink。
+.el-form-item__label {
+  min-width: 0;
+}
+
+.el-form-item__label > .com-text,
+.el-form-item__label .com-text {
+  display: inline-block;
+  min-width: 0;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+}
+
+// has-colon 模式下，.com-text::after 注入冒号，
+// 给一点 padding 避免冒号被 ellipsis 裁掉
+.has-colon .el-form-item__label > .com-text,
+.has-colon .el-form-item__label .com-text {
+  padding-right: 6px;
+}
+
+// 2) Element Plus 2.2.x 输入控件统一圆角（无 .el-input__wrapper）
+.el-input > .el-input__inner,
+.el-textarea > .el-textarea__inner,
+.el-date-editor > .el-input__inner {
+  border-radius: 6px;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+
+// 3) focus 品牌色边框（兼容 EP 2.2.x DOM 与 jh-select / jh-date-picker）
+.el-input.is-focus > .el-input__inner,
+.el-input > .el-input__inner:focus,
+.el-textarea.is-focus > .el-textarea__inner,
+.el-textarea > .el-textarea__inner:focus,
+.el-select.is-focus .el-input > .el-input__inner,
+.el-select .el-input.is-focus > .el-input__inner,
+.el-date-editor.is-focus > .el-input__inner,
+.el-date-editor .el-input.is-focus > .el-input__inner {
+  border-color: var(--el-color-primary, #2254f4) !important;
+  box-shadow: 0 0 0 1px var(--el-color-primary, #2254f4) inset;
+}
+
+// 4) error 红色边框（兼容 EP 2.2.x DOM；
+//    error label / message 颜色由 _base-components.scss 已统一处理）
+.el-form-item.is-error .el-input > .el-input__inner,
+.el-form-item.is-error .el-textarea > .el-textarea__inner,
+.el-form-item.is-error .el-date-editor > .el-input__inner {
+  border-color: var(--el-color-danger, #f56c6c) !important;
+  box-shadow: 0 0 0 1px var(--el-color-danger, #f56c6c) inset !important;
+}
+
+// 5) com-input / com-textarea / com-input-tip — jh-ui form-item wrapper
+//    保留 jh-ui 自身 margin-bottom、has-tip 间距，不覆盖；
+//    仅对齐内部输入控件圆角，避免在 wrapper 内 fallback 成方角。
+.com-input > .el-input > .el-input__inner,
+.com-input > .el-textarea > .el-textarea__inner,
+.com-textarea > .el-textarea > .el-textarea__inner {
+  border-radius: 6px;
+}
+
+// 6) 必填星号兼容 jh-ui label 结构
+//    Element Plus 把 `::before` 放在 `.el-form-item__label` 上，
+//    jh-ui 没改这一点；但 label 自身是 inline-flex，部分浏览器下
+//    `::before` 会作为 flex 项参与排版，必须显式声明颜色/显示。
+.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before,
+.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::after,
+.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label > .com-text::before,
+.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label > .com-text::after {
+  color: var(--el-color-danger, #f56c6c) !important;
+}

package/styles/vendors/index.scss

@@ -9,6 +9,7 @@
 @forward './_ag-grid';           // AG Grid 完整主题
 @forward './_custom-wrappers';   // 兜底：野路子自封装
 @forward './_c-components';      // C_/c_ 前缀
+@forward './_jh-ui'; // @jhlc/jh-ui SCSS 皮肤包（EP 2.2.x + .com-text label）
 @forward './_jh-tree';           // jh-tree
 @forward './_jh-pagination';     // jh-pagination
 @forward './_jh-drag-col';       // jh-drag-col（含左树右表骨架）