@agile-team/wl-skills-ui 1.8.13 → 1.8.15

package/CHANGELOG.md

@@ -4,6 +4,23 @@ 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.8.15] - 2026-07-01
+
+### Added
+
+- **jh-drag-row 上下分栏手柄覆盖**：新增 `styles/vendors/_jh-drag-row.scss`，把 `jh-drag-row`（来自 `@jhlc/common-core`，主从表/上下双表首选布局）的 `.slider_row` 手柄对齐到与 `_jh-drag-col.scss` 同源的极简细线 + grip dots 风格。此前 wl-skills-ui 只覆盖了 `jh-drag-col`（左右），缺少 `jh-drag-row`（上下），二者手柄风格不一致。覆盖以本包主色 `var(--el-color-primary)` / `rgba(34,84,244,...)`（`#2254f4`）为准，不读 common-core 组件 Props 默认值（硬编码 `#a7caec`/`#6f808d`），用 `html .drager_row > .slider_row { ... !important }` 确定性层叠压过。已注册进 `vendors/index.scss`，`jh-components/SKILL.md` 基线表与全局样式来源同步补充
+
+### Changed
+
+- **平台包职责澄清（文档）**：`@jhlc/jh-ui` 是**纯 SCSS 包（零组件）**，所有 `jh-*` / `Base*` / `C_*` 组件来自 `@jhlc/common-core`。本包作为化妆层，职责是**精准层叠覆盖**这两者的视觉，不改平台层源码：L0 token 用 `:root body`（特异性高于 jh-ui 编译产物的 `:root`）以本包 `#2254f4` 压过 jh-ui 的 `#4368ff`；L2 直接写目标属性（`background`/`border`）+ `!important` 绕过组件内部 `var()` 引用。**项目安装本包后，一切以本包为准**
+
+## [1.8.14] - 2026-06-28
+
+### Fixed
+
+- **jh-picker 高度统一**：补齐 `.com-picker` / `.com-reference-picker` / `jh-picker` trigger 输入结构，picker 类单行控件与 input / select 保持 `26px` 高度一致。
+- **label 冒号兜底**：扩展屏蔽 `@jhlc/jh-ui` 的 `.com-text:after` / `.text-line-2:after` 冒号注入，避免 picker label 残留 `:`。
+
 ## [1.8.13] - 2026-05-21
 
 ### Fixed

package/README.md

@@ -213,8 +213,15 @@ yarn add @agile-team/wl-skills-ui
 
 ## 版本亮点
 
-当前 v1.8.13：
+当前 v1.8.15：
 
+- **jh-drag-row 上下分栏手柄覆盖**：新增 `styles/vendors/_jh-drag-row.scss`，补齐此前缺失的 `jh-drag-row`（上下/主从表）手柄覆盖，与 `_jh-drag-col.scss`（左右）同源风格。以本包主色 `#2254f4` 为准，用 `!important` 确定性层叠压过 common-core 组件 Props 默认值
+- **平台包职责澄清**：`@jhlc/jh-ui` 是纯 SCSS 包（零组件），所有 `jh-*`/`Base*`/`C_*` 组件来自 `@jhlc/common-core`。本包作为化妆层精准层叠覆盖二者视觉，不改平台层源码——L0 token 用 `:root body` 压过 jh-ui 编译产物的 `:root`（`#2254f4` > jh-ui `#4368ff`），L2 直接写目标属性 + `!important` 绕过组件 `var()` 引用。**项目装了本包后，一切以本包为准**
+
+上一版 v1.8.14：
+
+- **jh-picker 精准修复**：补齐 `.com-picker` / `.com-reference-picker` / `jh-picker` trigger 输入高度，客户等 picker 查询项与 input / select 保持一致
+- **label 冒号兜底**：同时屏蔽 jh-ui `.com-text:after` 与 `.text-line-2:after` 冒号注入，picker / select / input label 全部不带 `:`
 - **表单密度统一**：label 与右侧控件间距统一 16px，单行 input / select / picker / jh-* 控件高度统一 26px
 - **label 冒号统一**：屏蔽 jh-ui `.has-colon .com-text::after` 冒号注入，picker / select / input 不再有的带冒号、有的不带冒号
 - **loading 遮罩质感优化**：BaseTable / AG Grid 的 v-loading 由灰色蒙层改为毛玻璃半透明（backdrop-filter），数据切换无感

package/package.json

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

package/skills/_meta/_compat/vendors.json

@@ -56,7 +56,9 @@
         "domAssumptions": [
           ".el-input>.el-input__inner",
           ".el-form-item__label>.com-text",
-          ".has-colon .com-text::after"
+          ".has-colon .com-text::after",
+          ".has-colon .text-line-2::after",
+          ".com-reference-picker .el-input__wrapper"
         ],
         "elementPlus": "2.2.6-prod.3",
         "elementPlusRange": "<2.3.0",

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

@@ -15,10 +15,11 @@ applyTo: "**/*.vue"
 
 | 类型 | 子组件 | 标签 | 关键类名 | 治理方式 |
 |---|---|---|---|---|
-| SCSS 皮肤适配 | `@jhlc/jh-ui` | — | `.com-text` / `.com-input` / `.com-textarea` / `.com-input-tip` | `styles/vendors/_jh-ui.scss` |
+| SCSS 皮肤适配 | `@jhlc/jh-ui` | — | `.com-text` / `.text-line-2` / `.com-input` / `.com-picker` / `.com-reference-picker` / `.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` |
+| 专项样式覆盖 | jh-drag-row | `<jh-drag-row>` | `.drager_row` / `.drager_top` / `.drager_bottom` / `.slider_row` | `styles/vendors/_jh-drag-row.scss` |
 | 通用规则治理 | jh-table | `<jh-table>` | `.jh-table` | 继承 L0 tokens + L1 table 视觉原则 |
 | 通用规则治理 | jh-form | `<jh-form>` | `.jh-form` | 继承 L0 tokens + L1 form 视觉原则 |
 | 通用规则治理 | 其它 jh-* | `<jh-*>` | `.jh-*` / 组件内部 Element Plus 类 | 先按 jh 通用规则治理，复杂结构再升级专项样式 |
@@ -27,10 +28,11 @@ applyTo: "**/*.vue"
 
 **推荐组合（钉死版本）**：`@jhlc/jh-ui@3.1.0` + `element-plus@2.2.6-prod.3`。详见 `docs/compat-matrix.md` 与 `skills/_meta/_compat/vendors.json` 的 `jh.compat` 字段。
 
-项目同时安装 `@jhlc/jh-ui` 与 `element-plus@2.2.x` 时，输入控件 DOM 为 `.el-input > .el-input__inner`（**无 `.el-input__wrapper`**，EP 2.3.0 起才引入），表单 label 文本被包成 `<span class="com-text">`，并由 `.has-colon .com-text::after` 注入冒号。`_jh-ui.scss` 已精准覆盖：
+项目同时安装 `@jhlc/jh-ui` 与 `element-plus@2.2.x` 时，输入控件 DOM 为 `.el-input > .el-input__inner`（**无 `.el-input__wrapper`**，EP 2.3.0 起才引入），表单 label 文本被包成 `<span class="com-text">` 或 `.text-line-2`，并由 `.has-colon .com-text:after` / `.text-line-2:after` 注入冒号。`_jh-ui.scss` 已精准覆盖：
 
-- label `.com-text` 单行省略 + has-colon 冒号屏蔽
+- 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` 输入高度兜底
 - jh-select / jh-date-picker 的 `.el-select.is-focus` / `.el-input.is-focus` 兼容
 - 必填星号在 inline-flex label 下显式声明颜色
 
@@ -38,13 +40,14 @@ applyTo: "**/*.vue"
 
 - ❌ 在 jh-ui 项目里用 `.el-input__wrapper.is-focus` —— EP 2.2.x 没有 `__wrapper`，规则永不生效。
 - ❌ 直接给 `.el-form-item__label` 写 `text-overflow: ellipsis` —— jh-ui 把它设为 `inline-flex`，文本在 `.com-text` 里，省略不会触发。
-- ❌ 给 `.el-form-item__label` 加 `padding-right` 期望腾出冒号位 —— 表单 label 不强制冒号，`.has-colon .com-text::after` 已由 `_jh-ui.scss` 统一屏蔽。
+- ❌ 给 `.el-form-item__label` 加 `padding-right` 期望腾出冒号位 —— 表单 label 不强制冒号，`.has-colon .com-text:after` / `.text-line-2:after` 已由 `_jh-ui.scss` 统一屏蔽。
 - ❌ 在不确定 EP 版本的情况下下笔修复 —— 必须先跑 `wl_ui_detect_skin` 或 `wl-ui check` 看 I005 结果。
 
 ## Diagnose
 
 - ❌ 自行给 `.jh-tree` 写颜色覆盖（应用全局 `vendors/_jh-tree.scss`）
 - ❌ jh-drag-col 内自定义 padding 破坏拖拽条对齐
+- ❌ jh-drag-row 上下分栏缺 `.drager_row { height:100% }` 高度链（拖拽失效），或手柄未走统一 `.slider_row` 细线风格
 - ❌ jh-pagination 未对齐到右侧（同 R011）
 - ❌ jh-form 内不用 `size="small"` 控件（同 R006）
 - ❌ 发现新的复杂 `<jh-*>` 组件后只在页面局部写补丁，而不沉淀到 L2 Project Vendors
@@ -65,6 +68,7 @@ applyTo: "**/*.vue"
 - `styles/vendors/_jh-tree.scss`
 - `styles/vendors/_jh-pagination.scss`
 - `styles/vendors/_jh-drag-col.scss`
+- `styles/vendors/_jh-drag-row.scss`
 
 ## 新增 jh 专项覆盖准入
 

package/standards/ui/03-form.md

@@ -76,7 +76,7 @@ textarea 不强制 26px 高度，只继承统一圆角、字体和状态样式
 
 ## 规则：表单 label 不强制冒号
 
-Element Plus 原生控件、picker 类控件和 jh-* 封装控件的 label 后不强制追加 `:`。`@jhlc/jh-ui` 的 `.has-colon .com-text::after` 冒号注入由 wl-skills-ui 统一屏蔽，避免 input / select / picker 之间出现有的带冒号、有的不带冒号。
+Element Plus 原生控件、picker 类控件和 jh-* 封装控件的 label 后不强制追加 `:`。`@jhlc/jh-ui` 的 `.has-colon .com-text:after` / `.text-line-2:after` 冒号注入由 wl-skills-ui 统一屏蔽，避免 input / select / picker 之间出现有的带冒号、有的不带冒号。
 
 ---
 

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

@@ -0,0 +1,78 @@
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// jh-drag-row 上下分栏拖拽手柄 — 与 _jh-drag-col 视觉同源
+//
+// 背景
+//   `jh-drag-row`（来自 @jhlc/common-core）是主从表/上下双表的首选布局组件
+//   （见 wl-skills-kit standards/14）。其拖拽手柄 `.slider_row` 默认使用 jh-ui
+//   内置蓝（#a7caec），与项目集群统一细线手柄风格不一致。
+//
+//   本文件把 `.slider_row` 对齐到与 `_jh-drag-col.scss` 同一套极简细线 +
+//   grip dots 设计语言，只是方向改为水平分割线（row-resize）。
+//
+// 源码 CSS 类名参考（common-core/src/components/drag-row/drag-row.vue）
+//   .drager_row（主容器）/ .drager_top（上区）/ .drager_bottom（下区）/ .slider_row（手柄）
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+// ── 上下拖拽分割条 — 极简细线 + grip dots（垂直方向）────────────────────────
+html .drager_row > .slider_row {
+  background: linear-gradient(
+    to bottom,
+    transparent 4px,
+    var(--el-border-color-light) 4px,
+    var(--el-border-color-light) 5px,
+    transparent 5px
+  ) !important;
+  transition: background 0.2s !important;
+
+  &::before { display: none !important; }
+
+  &::after {
+    content: '' !important;
+    position: absolute !important;
+    left: 50% !important;
+    right: auto !important;
+    top: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    width: 4px !important;
+    height: 4px !important;
+    min-height: unset !important;
+    max-height: unset !important;
+    border-radius: 50% !important;
+    background-color: var(--el-border-color) !important;
+    box-shadow: -8px 0 0 var(--el-border-color), 8px 0 0 var(--el-border-color) !important;
+    transition: background-color 0.2s, box-shadow 0.2s !important;
+    opacity: 0.6;
+  }
+
+  &:hover {
+    background: linear-gradient(
+      to bottom,
+      rgba(34, 84, 244, 0.06) 3px,
+      var(--el-color-primary) 3px,
+      var(--el-color-primary) 7px,
+      rgba(34, 84, 244, 0.06) 7px
+    ) !important;
+
+    &::after {
+      background-color: var(--el-color-primary) !important;
+      box-shadow: -8px 0 0 var(--el-color-primary), 8px 0 0 var(--el-color-primary) !important;
+      opacity: 1;
+    }
+  }
+
+  &:active {
+    background: linear-gradient(
+      to bottom,
+      rgba(34, 84, 244, 0.1) 2.5px,
+      var(--el-color-primary) 2.5px,
+      var(--el-color-primary) 7.5px,
+      rgba(34, 84, 244, 0.1) 7.5px
+    ) !important;
+  }
+}
+
+// ── 容器高度链兜底：确保上下区域能正常撑满（kit standards/14 强制项）────────
+//    父容器/Tab 已由业务页负责设高度；此处仅确保 .drager_row 自身不塌缩。
+html .drager_row {
+  min-height: 0;
+}

package/styles/vendors/_jh-ui.scss

@@ -9,7 +9,7 @@
 //     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` 注入冒号。
+//     2. `.has-colon .el-form-item__label .com-text::after` / `.text-line-2::after` 注入冒号。
 //        → wl-skills-ui 统一隐藏冒号，避免 picker / select / input label 风格不一致。
 //     3. 输入控件 DOM 为 `.el-input > .el-input__inner`（无 `.el-input__wrapper`）。
 //        → focus / error 必须命中 `.el-input__inner`，
@@ -18,6 +18,8 @@
 //        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 形态。
+//     6. jh-picker / reference-picker 另有 `.com-picker` / `.com-reference-picker`
+//        wrapper，不会命中 `.com-input` 分支，需要独立兜底控件高度。
 //
 // 边界
 //   - 本文件只负责修复 jh-ui DOM 与 wl-skills-ui 统一规则的对接差异。
@@ -44,24 +46,32 @@
   vertical-align: middle;
 }
 
-.has-colon .el-form-item__label > .com-text,
-.has-colon .el-form-item__label .com-text {
+html body .has-colon .el-form-item__label > .com-text,
+html body .has-colon .el-form-item__label .com-text,
+html body .has-colon .el-form-item__label > .text-line-2,
+html body .has-colon .el-form-item__label .text-line-2 {
   padding-right: 0;
-  }
+}
 
-  .has-colon .el-form-item__label>.com-text::after,
-  .has-colon .el-form-item__label .com-text::after {
-    content: "" !important;
-    display: none !important;
+html body .has-colon .el-form-item__label > .com-text::after,
+html body .has-colon .el-form-item__label > .com-text:after,
+html body .has-colon .el-form-item__label .com-text::after,
+html body .has-colon .el-form-item__label .com-text:after,
+html body .has-colon .el-form-item__label > .text-line-2::after,
+html body .has-colon .el-form-item__label > .text-line-2:after,
+html body .has-colon .el-form-item__label .text-line-2::after,
+html body .has-colon .el-form-item__label .text-line-2:after {
+  content: "" !important;
+  display: none !important;
 }
 
 // 2) Element Plus 2.2.x 输入控件统一圆角（无 .el-input__wrapper）
-.el-input > .el-input__inner,
-.el-date-editor>.el-input__inner,
-.el-select .el-input>.el-input__inner {
-  height: var(--wk-form-control-height, 26px);
-  line-height: var(--wk-form-control-height, 26px);
-  border-radius: var(--el-border-radius-base);
+html body .el-input > .el-input__inner,
+html body .el-date-editor > .el-input__inner,
+html body .el-select .el-input > .el-input__inner {
+  height: var(--wk-form-control-height, 26px) !important;
+  line-height: var(--wk-form-control-height, 26px) !important;
+  border-radius: var(--el-border-radius-base) !important;
   transition: box-shadow 0.15s ease, border-color 0.15s ease;
 }
 
@@ -98,16 +108,57 @@
 .com-input > .el-input > .el-input__inner,
 .com-input>.el-select .el-input>.el-input__inner,
 .com-input>.el-date-editor>.el-input__inner {
-  height: var(--wk-form-control-height, 26px);
-  line-height: var(--wk-form-control-height, 26px);
-  border-radius: var(--el-border-radius-base);
+  height: var(--wk-form-control-height, 26px) !important;
+  line-height: var(--wk-form-control-height, 26px) !important;
+  border-radius: var(--el-border-radius-base) !important;
 }
 .com-input > .el-textarea > .el-textarea__inner,
 .com-textarea > .el-textarea > .el-textarea__inner {
   border-radius: var(--el-border-radius-base);
 }
 
-// 6) 必填星号兼容 jh-ui label 结构
+// 6) jh-picker / reference-picker — 不走 .com-input wrapper，也要继承单行控件高度
+html body .com-picker .el-input,
+html body .com-reference-picker .el-input,
+html body .com-reference-picker-input .el-input,
+html body .com-user-picker .el-input,
+html body .com-dept-picker .el-input,
+html body .com-userPicker .el-input,
+html body .com-deptPicker .el-input,
+html body .jh-picker .el-input,
+html body .jh-picker-trigger.el-input {
+  height: var(--wk-form-control-height, 26px) !important;
+}
+
+html body .com-picker .el-input__wrapper,
+html body .com-reference-picker .el-input__wrapper,
+html body .com-reference-picker-input .el-input__wrapper,
+html body .com-user-picker .el-input__wrapper,
+html body .com-dept-picker .el-input__wrapper,
+html body .com-userPicker .el-input__wrapper,
+html body .com-deptPicker .el-input__wrapper,
+html body .jh-picker .el-input__wrapper,
+html body .jh-picker-trigger.el-input .el-input__wrapper {
+  height: var(--wk-form-control-height, 26px) !important;
+  min-height: var(--wk-form-control-height, 26px) !important;
+  border-radius: var(--el-border-radius-base) !important;
+}
+
+html body .com-picker .el-input > .el-input__inner,
+html body .com-reference-picker .el-input > .el-input__inner,
+html body .com-reference-picker-input .el-input > .el-input__inner,
+html body .com-user-picker .el-input > .el-input__inner,
+html body .com-dept-picker .el-input > .el-input__inner,
+html body .com-userPicker .el-input > .el-input__inner,
+html body .com-deptPicker .el-input > .el-input__inner,
+html body .jh-picker .el-input > .el-input__inner,
+html body .jh-picker-trigger.el-input > .el-input__inner {
+  height: var(--wk-form-control-height, 26px) !important;
+  line-height: var(--wk-form-control-height, 26px) !important;
+  border-radius: var(--el-border-radius-base) !important;
+}
+
+// 7) 必填星号兼容 jh-ui label 结构
 //    颜色统一 danger 色；显示/隐藏由 _base-components.scss 总控，
 //    此处只负责颜色，不设 display，避免与总控冲突导致 * * 重复。
 .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before,

package/styles/vendors/index.scss

@@ -13,6 +13,7 @@
 @forward './_jh-tree';           // jh-tree
 @forward './_jh-pagination';     // jh-pagination
 @forward './_jh-drag-col';       // jh-drag-col（含左树右表骨架）
+@forward './_jh-drag-row';       // jh-drag-row（上下分栏/主从表手柄）
 @forward './_base-query-toolbar';// BaseQuery / BaseToolbar
 @forward './_base-components';   // Base* 通用（操作按钮组、徽标、tag）
 @forward './_base-table';        // BaseTable（最高优先级）