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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +3 -1
  3. package/package.json +2 -2
  4. package/skills/_meta/_compat/vendors.json +3 -1
  5. package/skills/vendors/jh-components/SKILL.md +5 -4
  6. package/standards/ui/03-form.md +1 -1
  7. package/styles/vendors/_jh-ui.scss +69 -18
package/CHANGELOG.md CHANGED
@@ -4,6 +4,13 @@ All notable changes to **@agile-team/wl-skills-ui** will be documented in this f
4
4
 
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
6
6
 
7
+ ## [1.8.14] - 2026-06-28
8
+
9
+ ### Fixed
10
+
11
+ - **jh-picker 高度统一**：补齐 `.com-picker` / `.com-reference-picker` / `jh-picker` trigger 输入结构，picker 类单行控件与 input / select 保持 `26px` 高度一致。
12
+ - **label 冒号兜底**：扩展屏蔽 `@jhlc/jh-ui` 的 `.com-text:after` / `.text-line-2:after` 冒号注入，避免 picker label 残留 `:`。
13
+
7
14
  ## [1.8.13] - 2026-05-21
8
15
 
9
16
  ### Fixed
package/README.md CHANGED
@@ -213,8 +213,10 @@ yarn add @agile-team/wl-skills-ui
213
213
 
214
214
  ## 版本亮点
215
215
 
216
- 当前 v1.8.13：
216
+ 当前 v1.8.14：
217
217
 
218
+ - **jh-picker 精准修复**：补齐 `.com-picker` / `.com-reference-picker` / `jh-picker` trigger 输入高度，客户等 picker 查询项与 input / select 保持一致
219
+ - **label 冒号兜底**：同时屏蔽 jh-ui `.com-text:after` 与 `.text-line-2:after` 冒号注入，picker / select / input label 全部不带 `:`
218
220
  - **表单密度统一**：label 与右侧控件间距统一 16px，单行 input / select / picker / jh-* 控件高度统一 26px
219
221
  - **label 冒号统一**：屏蔽 jh-ui `.has-colon .com-text::after` 冒号注入，picker / select / input 不再有的带冒号、有的不带冒号
220
222
  - **loading 遮罩质感优化**：BaseTable / AG Grid 的 v-loading 由灰色蒙层改为毛玻璃半透明（backdrop-filter），数据切换无感
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agile-team/wl-skills-ui",
3
- "version": "1.8.13",
3
+ "version": "1.8.14",
4
4
  "description": "企业级 UI 风格对齐框架 — Vue + Element Plus 项目通用化妆/原生双模式（tokens / element / vendors / layouts / runtime / scanner / fixer / skills）",
5
5
  "type": "module",
6
6
  "main": "./es/index.js",
@@ -134,4 +134,4 @@
134
134
  "eslint --fix --no-cache"
135
135
  ]
136
136
  }
137
- }
137
+ }
package/skills/_meta/_compat/vendors.json CHANGED
@@ -56,7 +56,9 @@
56
56
  "domAssumptions": [
57
57
  ".el-input>.el-input__inner",
58
58
  ".el-form-item__label>.com-text",
59
- ".has-colon .com-text::after"
59
+ ".has-colon .com-text::after",
60
+ ".has-colon .text-line-2::after",
61
+ ".com-reference-picker .el-input__wrapper"
60
62
  ],
61
63
  "elementPlus": "2.2.6-prod.3",
62
64
  "elementPlusRange": "<2.3.0",
package/skills/vendors/jh-components/SKILL.md CHANGED
@@ -15,7 +15,7 @@ applyTo: "**/*.vue"
15
15
 
16
16
  | 类型 | 子组件 | 标签 | 关键类名 | 治理方式 |
17
17
  |---|---|---|---|---|
18
- | SCSS 皮肤适配 | `@jhlc/jh-ui` | — | `.com-text` / `.com-input` / `.com-textarea` / `.com-input-tip` | `styles/vendors/_jh-ui.scss` |
18
+ | 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` |
19
19
  | 专项样式覆盖 | jh-tree | `<jh-tree>` | `.jh-tree` / `.base-tree` | `styles/vendors/_jh-tree.scss` |
20
20
  | 专项样式覆盖 | jh-pagination | `<jh-pagination>` | `.jh-pagination` | `styles/vendors/_jh-pagination.scss` |
21
21
  | 专项样式覆盖 | jh-drag-col | `<jh-drag-col>` | `.drag-col-container` / `.drag-left` / `.slider-col` | `styles/vendors/_jh-drag-col.scss` |
@@ -27,10 +27,11 @@ applyTo: "**/*.vue"
27
27
 
28
28
  **推荐组合（钉死版本）**：`@jhlc/jh-ui@3.1.0` + `element-plus@2.2.6-prod.3`。详见 `docs/compat-matrix.md` 与 `skills/_meta/_compat/vendors.json` 的 `jh.compat` 字段。
29
29
 
30
- 项目同时安装 `@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` 已精准覆盖：
30
+ 项目同时安装 `@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` 已精准覆盖：
31
31
 
32
- - label `.com-text` 单行省略 + has-colon 冒号屏蔽
32
+ - label `.com-text` / `.text-line-2` 单行省略 + has-colon 冒号屏蔽
33
33
  - EP 2.2.x `.el-input__inner` 26px 高度、圆角 / focus / error 三态
34
+ - jh-picker / reference-picker 的 `.com-picker` / `.com-reference-picker` 输入高度兜底
34
35
  - jh-select / jh-date-picker 的 `.el-select.is-focus` / `.el-input.is-focus` 兼容
35
36
  - 必填星号在 inline-flex label 下显式声明颜色
36
37
 
@@ -38,7 +39,7 @@ applyTo: "**/*.vue"
38
39
 
39
40
  - ❌ 在 jh-ui 项目里用 `.el-input__wrapper.is-focus` —— EP 2.2.x 没有 `__wrapper`，规则永不生效。
40
41
  - ❌ 直接给 `.el-form-item__label` 写 `text-overflow: ellipsis` —— jh-ui 把它设为 `inline-flex`，文本在 `.com-text` 里，省略不会触发。
41
- - ❌ 给 `.el-form-item__label` 加 `padding-right` 期望腾出冒号位 —— 表单 label 不强制冒号，`.has-colon .com-text::after` 已由 `_jh-ui.scss` 统一屏蔽。
42
+ - ❌ 给 `.el-form-item__label` 加 `padding-right` 期望腾出冒号位 —— 表单 label 不强制冒号，`.has-colon .com-text:after` / `.text-line-2:after` 已由 `_jh-ui.scss` 统一屏蔽。
42
43
  - ❌ 在不确定 EP 版本的情况下下笔修复 —— 必须先跑 `wl_ui_detect_skin` 或 `wl-ui check` 看 I005 结果。
43
44
 
44
45
  ## Diagnose
package/standards/ui/03-form.md CHANGED
@@ -76,7 +76,7 @@ textarea 不强制 26px 高度，只继承统一圆角、字体和状态样式
76
76
 
77
77
  ## 规则：表单 label 不强制冒号
78
78
 
79
- Element Plus 原生控件、picker 类控件和 jh-* 封装控件的 label 后不强制追加 `:`。`@jhlc/jh-ui` 的 `.has-colon .com-text::after` 冒号注入由 wl-skills-ui 统一屏蔽，避免 input / select / picker 之间出现有的带冒号、有的不带冒号。
79
+ Element Plus 原生控件、picker 类控件和 jh-* 封装控件的 label 后不强制追加 `:`。`@jhlc/jh-ui` 的 `.has-colon .com-text:after` / `.text-line-2:after` 冒号注入由 wl-skills-ui 统一屏蔽，避免 input / select / picker 之间出现有的带冒号、有的不带冒号。
80
80
 
81
81
  ---
82
82
 
package/styles/vendors/_jh-ui.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  // 1. 表单 label 文本被包成 `<span class="com-text">`，
10
10
  // `.el-form-item__label` 自身是 `display: inline-flex`。
11
11
  // → 直接在 label 上写 ellipsis 不生效，必须落到 `.com-text`。
12
- // 2. `.has-colon .el-form-item__label .com-text::after` 注入冒号。
12
+ // 2. `.has-colon .el-form-item__label .com-text::after` / `.text-line-2::after` 注入冒号。
13
13
  // → wl-skills-ui 统一隐藏冒号，避免 picker / select / input label 风格不一致。
14
14
  // 3. 输入控件 DOM 为 `.el-input > .el-input__inner`（无 `.el-input__wrapper`）。
15
15
  // → focus / error 必须命中 `.el-input__inner`，
@@ -18,6 +18,8 @@
18
18
  // focus 标志位为 `.el-select.is-focus` 或 `.el-input.is-focus`。
19
19
  // 5. `.com-input` / `.com-textarea` / `.com-input-tip` 是 jh-ui 的控件
20
20
  // 外层 wrapper，承载 form-item 的 has-tip / is-error 形态。
21
+ // 6. jh-picker / reference-picker 另有 `.com-picker` / `.com-reference-picker`
22
+ // wrapper，不会命中 `.com-input` 分支，需要独立兜底控件高度。
21
23
  //
22
24
  // 边界
23
25
  // - 本文件只负责修复 jh-ui DOM 与 wl-skills-ui 统一规则的对接差异。
@@ -44,24 +46,32 @@
44
46
  vertical-align: middle;
45
47
  }
46
48
 
47
- .has-colon .el-form-item__label > .com-text,
48
- .has-colon .el-form-item__label .com-text {
49
+ html body .has-colon .el-form-item__label > .com-text,
50
+ html body .has-colon .el-form-item__label .com-text,
51
+ html body .has-colon .el-form-item__label > .text-line-2,
52
+ html body .has-colon .el-form-item__label .text-line-2 {
49
53
  padding-right: 0;
50
- }
54
+ }
51
55
 
52
- .has-colon .el-form-item__label>.com-text::after,
53
- .has-colon .el-form-item__label .com-text::after {
54
- content: "" !important;
55
- display: none !important;
56
+ html body .has-colon .el-form-item__label > .com-text::after,
57
+ html body .has-colon .el-form-item__label > .com-text:after,
58
+ html body .has-colon .el-form-item__label .com-text::after,
59
+ html body .has-colon .el-form-item__label .com-text:after,
60
+ html body .has-colon .el-form-item__label > .text-line-2::after,
61
+ html body .has-colon .el-form-item__label > .text-line-2:after,
62
+ html body .has-colon .el-form-item__label .text-line-2::after,
63
+ html body .has-colon .el-form-item__label .text-line-2:after {
64
+ content: "" !important;
65
+ display: none !important;
56
66
  }
57
67
 
58
68
  // 2) Element Plus 2.2.x 输入控件统一圆角（无 .el-input__wrapper）
59
- .el-input > .el-input__inner,
60
- .el-date-editor>.el-input__inner,
61
- .el-select .el-input>.el-input__inner {
62
- height: var(--wk-form-control-height, 26px);
63
- line-height: var(--wk-form-control-height, 26px);
64
- border-radius: var(--el-border-radius-base);
69
+ html body .el-input > .el-input__inner,
70
+ html body .el-date-editor > .el-input__inner,
71
+ html body .el-select .el-input > .el-input__inner {
72
+ height: var(--wk-form-control-height, 26px) !important;
73
+ line-height: var(--wk-form-control-height, 26px) !important;
74
+ border-radius: var(--el-border-radius-base) !important;
65
75
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
66
76
  }
67
77
 
@@ -98,16 +108,57 @@
98
108
  .com-input > .el-input > .el-input__inner,
99
109
  .com-input>.el-select .el-input>.el-input__inner,
100
110
  .com-input>.el-date-editor>.el-input__inner {
101
- height: var(--wk-form-control-height, 26px);
102
- line-height: var(--wk-form-control-height, 26px);
103
- border-radius: var(--el-border-radius-base);
111
+ height: var(--wk-form-control-height, 26px) !important;
112
+ line-height: var(--wk-form-control-height, 26px) !important;
113
+ border-radius: var(--el-border-radius-base) !important;
104
114
  }
105
115
  .com-input > .el-textarea > .el-textarea__inner,
106
116
  .com-textarea > .el-textarea > .el-textarea__inner {
107
117
  border-radius: var(--el-border-radius-base);
108
118
  }
109
119
 
110
- // 6) 必填星号兼容 jh-ui label 结构
120
+ // 6) jh-picker / reference-picker — 不走 .com-input wrapper，也要继承单行控件高度
121
+ html body .com-picker .el-input,
122
+ html body .com-reference-picker .el-input,
123
+ html body .com-reference-picker-input .el-input,
124
+ html body .com-user-picker .el-input,
125
+ html body .com-dept-picker .el-input,
126
+ html body .com-userPicker .el-input,
127
+ html body .com-deptPicker .el-input,
128
+ html body .jh-picker .el-input,
129
+ html body .jh-picker-trigger.el-input {
130
+ height: var(--wk-form-control-height, 26px) !important;
131
+ }
132
+
133
+ html body .com-picker .el-input__wrapper,
134
+ html body .com-reference-picker .el-input__wrapper,
135
+ html body .com-reference-picker-input .el-input__wrapper,
136
+ html body .com-user-picker .el-input__wrapper,
137
+ html body .com-dept-picker .el-input__wrapper,
138
+ html body .com-userPicker .el-input__wrapper,
139
+ html body .com-deptPicker .el-input__wrapper,
140
+ html body .jh-picker .el-input__wrapper,
141
+ html body .jh-picker-trigger.el-input .el-input__wrapper {
142
+ height: var(--wk-form-control-height, 26px) !important;
143
+ min-height: var(--wk-form-control-height, 26px) !important;
144
+ border-radius: var(--el-border-radius-base) !important;
145
+ }
146
+
147
+ html body .com-picker .el-input > .el-input__inner,
148
+ html body .com-reference-picker .el-input > .el-input__inner,
149
+ html body .com-reference-picker-input .el-input > .el-input__inner,
150
+ html body .com-user-picker .el-input > .el-input__inner,
151
+ html body .com-dept-picker .el-input > .el-input__inner,
152
+ html body .com-userPicker .el-input > .el-input__inner,
153
+ html body .com-deptPicker .el-input > .el-input__inner,
154
+ html body .jh-picker .el-input > .el-input__inner,
155
+ html body .jh-picker-trigger.el-input > .el-input__inner {
156
+ height: var(--wk-form-control-height, 26px) !important;
157
+ line-height: var(--wk-form-control-height, 26px) !important;
158
+ border-radius: var(--el-border-radius-base) !important;
159
+ }
160
+
161
+ // 7) 必填星号兼容 jh-ui label 结构
111
162
  // 颜色统一 danger 色；显示/隐藏由 _base-components.scss 总控，
112
163
  // 此处只负责颜色，不设 display，避免与总控冲突导致 * * 重复。
113
164
  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before,