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

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.8.13] - 2026-05-21
+
+### Fixed
+
+- **表单间距统一**：label 与右侧 Element Plus / jh-* 单行控件间距统一为 `--wk-form-label-control-gap: 16px`，避免 22px / 26px / 28px 混杂。
+- **表单高度统一**：input / select / date-picker / cascader / input-number / autocomplete 等单行控件统一为 `--wk-form-control-height: 26px`，textarea 不强制固定高度。
+- **label 冒号统一**：屏蔽 `@jhlc/jh-ui` 的 `.has-colon .com-text::after` 冒号注入，picker / select / input label 不再出现有的带冒号、有的不带冒号。
+
 ## [1.8.9] - 2026-05-17
 
 ### Improved

package/README.md

@@ -198,7 +198,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` 冒号注入 |
+| `@jhlc/jh-ui` | **`3.1.0`** | SCSS 皮肤包，`.com-text` label 包裹 + `.has-colon` 冒号注入（wl-skills-ui 已统一屏蔽表单冒号） |
 | `@agile-team/wl-skills-ui` | `^1.7.0` | 已对齐上述组合的 DOM 假设 |
 
 三种识别方式，任选其一：
@@ -213,8 +213,10 @@ yarn add @agile-team/wl-skills-ui
 
 ## 版本亮点
 
-当前 v1.8.9：
+当前 v1.8.13：
 
+- **表单密度统一**：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），数据切换无感
 - **R027** 检测业务代码硬编码 `.el-loading-mask` 背景色 → 提示删除，由包统一覆盖
 - **R025** 语义合规：`options:[]` 退化检测 → 升级 `renderTagSlot` / `renderDictClassifyTag`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agile-team/wl-skills-ui",
-  "version": "1.8.9",
+  "version": "1.8.13",
   "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/vendors/jh-components/SKILL.md

@@ -29,8 +29,8 @@ applyTo: "**/*.vue"
 
 项目同时安装 `@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` 已精准覆盖：
 
-- label `.com-text` 单行省略 + has-colon 冒号保留
-- EP 2.2.x `.el-input__inner` 圆角 / focus / error 三态
+- label `.com-text` 单行省略 + has-colon 冒号屏蔽
+- EP 2.2.x `.el-input__inner` 26px 高度、圆角 / focus / error 三态
 - jh-select / jh-date-picker 的 `.el-select.is-focus` / `.el-input.is-focus` 兼容
 - 必填星号在 inline-flex label 下显式声明颜色
 
@@ -38,7 +38,7 @@ 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` 期望腾出冒号位 —— 冒号是 `.com-text::after`，应在 `.com-text` 上加 padding。
+- ❌ 给 `.el-form-item__label` 加 `padding-right` 期望腾出冒号位 —— 表单 label 不强制冒号，`.has-colon .com-text::after` 已由 `_jh-ui.scss` 统一屏蔽。
 - ❌ 在不确定 EP 版本的情况下下笔修复 —— 必须先跑 `wl_ui_detect_skin` 或 `wl-ui check` 看 I005 结果。
 
 ## Diagnose

package/standards/ui/03-form.md

@@ -56,6 +56,30 @@ date-picker 默认宽度固定，在 grid 布局中需撑满列宽：
 
 ---
 
+## 规则：label 与控件间距、单行控件高度必须统一
+
+左侧 label 与右侧输入、选择、日期、数字输入、级联、自动完成等单行控件的横向间距统一为：
+
+```scss
+--wk-form-label-control-gap: 16px;
+```
+
+单行表单控件高度统一为：
+
+```scss
+--wk-form-control-height: 26px;
+```
+
+textarea 不强制 26px 高度，只继承统一圆角、字体和状态样式。
+
+---
+
+## 规则：表单 label 不强制冒号
+
+Element Plus 原生控件、picker 类控件和 jh-* 封装控件的 label 后不强制追加 `:`。`@jhlc/jh-ui` 的 `.has-colon .com-text::after` 冒号注入由 wl-skills-ui 统一屏蔽，避免 input / select / picker 之间出现有的带冒号、有的不带冒号。
+
+---
+
 ## 布局标准
 
 ### 搜索区（列表页顶部）

package/styles/element/_form.scss

@@ -2,6 +2,9 @@
 
 html body {
   --wk-form-control-radius: var(--el-border-radius-base, 6px);
+  --wk-form-control-height: 26px;
+    --wk-form-label-control-gap: 16px;
+    --wk-form-label-line-height: 22px;
 }
 
 html body .el-form-item--small {
@@ -14,6 +17,9 @@ html body .is-error.el-form-item--small {
 }
 
 // ── 全局输入框圆角统一（6px，与搜索区保持一致）──────────────────────────────
+html body .el-form:not(.el-form--label-top) .el-form-item__label {
+  padding-right: var(--wk-form-label-control-gap) !important;
+}
 html body .el-input__wrapper,
 html body .el-select__wrapper,
 html body .el-select .el-select__wrapper,
@@ -21,7 +27,21 @@ html body .el-date-editor.el-input__wrapper,
 html body .el-date-editor .el-input__wrapper,
 html body .el-input-number .el-input__wrapper,
 html body .el-cascader .el-input__wrapper,
-html body .el-autocomplete .el-input__wrapper,
+html body .el-autocomplete .el-input__wrapper {
+  height: var(--wk-form-control-height) !important;
+  min-height: var(--wk-form-control-height) !important;
+  border-radius: var(--wk-form-control-radius) !important;
+}
+
+html body .el-input__inner,
+html body .el-select__selected-item,
+html body .el-date-editor .el-input__inner,
+html body .el-input-number .el-input__inner,
+html body .el-cascader .el-input__inner,
+html body .el-autocomplete .el-input__inner {
+  height: calc(var(--wk-form-control-height) - 2px) !important;
+  line-height: calc(var(--wk-form-control-height) - 2px) !important;
+}
 html body .el-textarea__inner {
   border-radius: var(--wk-form-control-radius) !important;
 }

package/styles/vendors/_base-components.scss

@@ -510,24 +510,86 @@
 
 // 必填星号：只保留一颗 — 默认 asterisk-left（::before），asterisk-right 用 ::after
 // 旧写法同时 display:inline-block 两个伪元素导致 * * 重复
-.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::before {
+html body .el-form.el-form--label-left .el-form-item__label,
+html body .el-form.el-form--label-right .el-form-item__label {
+  align-items: baseline !important;
+  font-size: 12px !important;
+  line-height: var(--wk-form-label-line-height, 22px) !important;
+}
+
+html body .el-form.el-form--label-left .el-form-item__label>.com-text,
+html body .el-form.el-form--label-right .el-form-item__label>.com-text {
+  font-size: 12px !important;
+  line-height: var(--wk-form-label-line-height, 22px) !important;
+}
+
+.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::before,
+html body .el-form.el-form--label-left .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::before,
+html body .el-form.el-form--label-right .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::before {
+  content: "*" !important;
+  color: var(--el-color-danger, #f56c6c) !important;
+  font-size: 12px !important;
+  font-weight: 400 !important;
+    line-height: var(--wk-form-label-line-height, 22px) !important;
+  display: inline-block !important;
+  margin-right: 2px !important;
+    vertical-align: baseline !important;
+    position: relative !important;
+    top: 0 !important;
+    align-self: baseline !important;
+}
+.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label>.com-text::before,
+html body .el-form.el-form--label-left .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label>.com-text::before,
+html body .el-form.el-form--label-right .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label>.com-text::before {
+  content: "*" !important;
   color: var(--el-color-danger, #f56c6c) !important;
+  font-size: 12px !important;
+  font-weight: 400 !important;
+    line-height: var(--wk-form-label-line-height, 22px) !important;
   display: inline-block !important;
+  margin-right: 2px !important;
+    vertical-align: baseline !important;
+    position: relative !important;
+    top: 0 !important;
+    align-self: baseline !important;
+}
+
+.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:has(>.com-text)::before,
+html body .el-form .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:has(>.com-text)::before {
+  display: none !important;
 }
+
 // asterisk-right 模式：显示 ::after，隐藏 ::before
-.el-form-item.is-required:not(.is-no-asterisk).asterisk-right>.el-form-item__label::before {
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-right>.el-form-item__label::before,
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-right>.el-form-item__label>.com-text::before {
   display: none !important;
 }
 
-.el-form-item.is-required:not(.is-no-asterisk).asterisk-right>.el-form-item__label::after {
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-right>.el-form-item__label::after,
+html body .el-form.el-form--label-left .el-form-item.is-required:not(.is-no-asterisk).asterisk-right>.el-form-item__label::after,
+html body .el-form.el-form--label-right .el-form-item.is-required:not(.is-no-asterisk).asterisk-right>.el-form-item__label::after {
+  content: "*" !important;
   color: var(--el-color-danger, #f56c6c) !important;
+  font-size: 12px !important;
+  font-weight: 400 !important;
+    line-height: var(--wk-form-label-line-height, 22px) !important;
   display: inline-block !important;
+  margin-left: 2px !important;
+    vertical-align: baseline !important;
+    position: relative !important;
+    top: 0 !important;
+    align-self: baseline !important;
 }
 
 // 默认模式：隐藏 ::after 防止重复星号
 .el-form-item.is-required:not(.is-no-asterisk):not(.asterisk-right)>.el-form-item__label::after {
   display: none !important;
 }
+.el-form-item.is-required.is-no-asterisk>.el-form-item__label::before,
+.el-form-item.is-required.is-no-asterisk>.el-form-item__label::after,
+.el-form-item.is-required.is-no-asterisk>.el-form-item__label>.com-text::before {
+  display: none !important;
+}
 
 .el-form-item.is-error {
   .el-form-item__label,

package/styles/vendors/_jh-ui.scss

@@ -10,7 +10,7 @@
 //        `.el-form-item__label` 自身是 `display: inline-flex`。
 //        → 直接在 label 上写 ellipsis 不生效，必须落到 `.com-text`。
 //     2. `.has-colon .el-form-item__label .com-text::after` 注入冒号。
-//        → ellipsis 容器必须给 `::after` 预留空间。
+//        → wl-skills-ui 统一隐藏冒号，避免 picker / select / input label 风格不一致。
 //     3. 输入控件 DOM 为 `.el-input > .el-input__inner`（无 `.el-input__wrapper`）。
 //        → focus / error 必须命中 `.el-input__inner`，
 //          `.el-input__wrapper.is-focus` 这类 EP 2.6+ 规则在这里不生效。
@@ -44,17 +44,28 @@
   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;
+  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;
 }
 
 // 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 {
+.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);
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+
+.el-textarea>.el-textarea__inner {
   border-radius: var(--el-border-radius-base);
   transition: box-shadow 0.15s ease, border-color 0.15s ease;
 }
@@ -85,6 +96,12 @@
 //    保留 jh-ui 自身 margin-bottom、has-tip 间距，不覆盖；
 //    仅对齐内部输入控件圆角，避免在 wrapper 内 fallback 成方角。
 .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);
+}
 .com-input > .el-textarea > .el-textarea__inner,
 .com-textarea > .el-textarea > .el-textarea__inner {
   border-radius: var(--el-border-radius-base);