@agile-team/wl-skills-ui 1.10.3 → 1.10.4

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.10.4] - 2026-08-22
+
+### Fixed
+
+- 统一新旧 Element Plus/jh-ui 输入控件的左右内边距，包含 placeholder、textarea、picker 和复合输入结构，避免内容贴边。
+- 统一普通与 jh 复合数字输入框步进按钮的右侧上下布局、尺寸、分隔线和 hover 状态，避免箭头错位。
+- 增加输入间距与数字控件几何回归契约测试。
+
 ## [1.10.3] - 2026-08-16
 
 ### Added

package/README.md

@@ -228,9 +228,11 @@ yarn add @agile-team/wl-skills-ui
 
 ## 版本亮点
 
-当前 v1.10.3：
+当前 v1.10.4：
 
-- **复合结构精准修复**：仅在 MessageBox 容器直接含状态图标时统一图标与文字布局；`jh-input-number` 仅给内层文本 wrapper 补 11px 左间距，不改步进按钮、单位后缀和对齐语义。
+- **输入控件间距与数字箭头闭环**：统一新旧 Element Plus/jh-ui 输入框、placeholder、textarea、picker 的左右间距；普通与复合数字框的步进箭头统一右侧上下布局和尺寸。
+
+- **复合结构精准修复**：仅在 MessageBox 容器直接含状态图标时统一图标与文字布局；`jh-input-number` 保留单位后缀与对齐语义，内层文本和步进按钮由统一几何契约治理。
 - **AG Grid 编辑与对齐闭环**：仅对已标记编辑态的单元格退出普通文本 padding；`align/headerAlign` 桥接为共享适配层可执行的函数配置，表头与内容使用同一对齐轴，并合并保留业务 `cellStyle/cellClass` 返回值。
 - **AG Grid 完整空态闭环**：按真实 `.ag-body-viewport` 定位，数据区统一保留 160px；插图、主文案和辅助说明始终完整同规格。上下/左右多表格空间不足时由最近分屏受控滚动，数据恢复后自动清理全部标记。
 - **按钮尺寸可重现**：新增 R041，只报告未显式声明 `size` 的 `el-button` / `ElButton` / `BaseToolbar`；默认建议 `small`，已设置其他或动态尺寸的业务代码不受影响。

package/package.json

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

package/styles/element/_form.scss

@@ -5,6 +5,10 @@
 html body {
   --wk-form-control-radius: var(--el-border-radius-base, 6px);
   --wk-form-control-height: 26px;
+  // 所有单行控件共用同一组左右内边距；旧版 jh-ui 直挂 input DOM
+  // 不会继承 Element Plus wrapper 的默认 11px，需要显式补齐。
+  --wk-form-control-padding-inline: 11px;
+  --wk-form-number-controls-width: 24px;
   --wk-form-font-size: 12px !important;
   --wk-form-label-control-gap: 16px;
   --wk-form-label-line-height: 22px;
@@ -62,9 +66,21 @@ html body {
   &.el-autocomplete .el-input__wrapper {
     height: var(--wk-form-control-height) !important;
     min-height: var(--wk-form-control-height) !important;
+    padding: 0 var(--wk-form-control-padding-inline) !important;
     border-radius: var(--wk-form-control-radius) !important;
   }
 
+  // 选择器、日期和自动完成在不同 Element Plus 版本中可能把 wrapper
+  // 作为根节点或子节点；两种结构都必须保留文本起始间距。
+  &.el-select__wrapper,
+  &.el-select .el-select__wrapper,
+  &.el-date-editor.el-input__wrapper,
+  &.el-date-editor .el-input__wrapper,
+  &.el-cascader .el-input__wrapper,
+  &.el-autocomplete .el-input__wrapper {
+    padding-inline: var(--wk-form-control-padding-inline) !important;
+  }
+
   &.el-input__inner,
   &.el-select__selected-item,
   &.el-date-editor .el-input__inner,
@@ -75,6 +91,15 @@ html body {
     line-height: calc(var(--wk-form-control-height) - 2px) !important;
   }
 
+  // 原生 textarea 是唯一不使用 wrapper 的输入控件，左右间距与单行输入
+  // 对齐；同时覆盖只读、禁用和 placeholder 状态，避免文字贴边。
+  &.el-textarea__inner,
+  &.com-input > .el-textarea > .el-textarea__inner,
+  &.com-textarea > .el-textarea > .el-textarea__inner {
+    padding: 4px var(--wk-form-control-padding-inline) !important;
+    box-sizing: border-box !important;
+  }
+
   // ── 带前/后附加段的输入框 ────────────────────────────────────────────────
   // Element input-group 把输入主体与 append/prepend 分成多个描边节点；平台或
   // 业务局部高度只改其中一段时，就会出现截图中的右侧图标高低、圆角和边框不齐。
@@ -98,6 +123,7 @@ html body {
     min-width: 0 !important;
     height: 100% !important;
     min-height: 0 !important;
+    padding: 0 var(--wk-form-control-padding-inline) !important;
     border: 0 !important;
     border-radius: 0 !important;
     background: transparent !important;
@@ -110,6 +136,7 @@ html body {
     min-width: 0 !important;
     height: 100% !important;
     min-height: 0 !important;
+    padding: 0 var(--wk-form-control-padding-inline) !important;
     border: 0 !important;
     border-radius: 0 !important;
     outline: none !important;
@@ -236,7 +263,7 @@ html body {
     width: 100% !important;
     height: 100% !important;
     min-height: 0 !important;
-    padding: 0 11px !important;
+    padding: 0 var(--wk-form-control-padding-inline) !important;
     border: 0 !important;
     border-radius: calc(var(--wk-form-control-radius) - 1px) !important;
     box-sizing: border-box !important;
@@ -297,9 +324,58 @@ html body {
     padding: 0 !important;
   }
 
-  &.el-input-number:not(.com-inputNumber-content) .el-input-number__increase,
+  // 数字框步进按钮固定在右侧上下两格，避免平台默认的绝对定位与
+  // 业务高度覆盖互相错开。controls=false 时 Element Plus 不渲染按钮，
+  // 因此该规则不会凭空制造控件。
+  &.el-input-number:not(.com-inputNumber-content) {
+    position: relative !important;
+  }
+
+  &.el-input-number:not(.com-inputNumber-content):has(> .el-input-number__increase)
+    .el-input__wrapper {
+    padding-right: calc(
+      var(--wk-form-control-padding-inline) + var(--wk-form-number-controls-width)
+    ) !important;
+  }
+
+  &.el-input-number:not(.com-inputNumber-content)
+    :where(.el-input-number__increase, .el-input-number__decrease) {
+    position: absolute !important;
+    right: 0 !important;
+    left: auto !important;
+    z-index: 2 !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: var(--wk-form-number-controls-width) !important;
+    height: 50% !important;
+    min-height: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: 0 !important;
+    border-left: 1px solid var(--el-border-color, #dcdfe6) !important;
+    box-sizing: border-box !important;
+    color: var(--el-text-color-secondary, #909399) !important;
+    line-height: 1 !important;
+    cursor: pointer !important;
+    transition: color 0.15s ease, background-color 0.15s ease !important;
+  }
+
+  &.el-input-number:not(.com-inputNumber-content) .el-input-number__increase {
+    top: 0 !important;
+    bottom: auto !important;
+    border-bottom: 1px solid var(--el-border-color, #dcdfe6) !important;
+  }
+
   &.el-input-number:not(.com-inputNumber-content) .el-input-number__decrease {
-    display: none !important;
+    top: auto !important;
+    bottom: 0 !important;
+  }
+
+  &.el-input-number:not(.com-inputNumber-content)
+    :where(.el-input-number__increase, .el-input-number__decrease):hover {
+    color: var(--el-color-primary, #002a8f) !important;
+    background: rgba(var(--el-color-primary-rgb, 0, 42, 143), 0.06) !important;
   }
 
   &.el-input-number:not(.com-inputNumber-content)

package/styles/vendors/_jh-ui.scss

@@ -88,11 +88,15 @@
   &.el-select .el-input > .el-input__inner {
     height: var(--wk-form-control-height, 26px) !important;
     line-height: var(--wk-form-control-height, 26px) !important;
+    padding: 0 var(--wk-form-control-padding-inline, 11px) !important;
+    box-sizing: border-box !important;
     border-radius: var(--el-border-radius-base) !important;
     transition: box-shadow 0.15s ease, border-color 0.15s ease;
   }
 
   &.el-textarea > .el-textarea__inner {
+    padding: 4px var(--wk-form-control-padding-inline, 11px) !important;
+    box-sizing: border-box !important;
     border-radius: var(--el-border-radius-base);
     transition: box-shadow 0.15s ease, border-color 0.15s ease;
   }
@@ -124,6 +128,8 @@
   &.com-input > .el-date-editor > .el-input__inner {
     height: var(--wk-form-control-height, 26px) !important;
     line-height: var(--wk-form-control-height, 26px) !important;
+    padding: 0 var(--wk-form-control-padding-inline, 11px) !important;
+    box-sizing: border-box !important;
     border-radius: var(--el-border-radius-base) !important;
   }
 
@@ -200,9 +206,10 @@
   // common-core jh-input-number 是“数字框根节点同时复用 el-input__wrapper”的复合结构：
   // .com-inputNumber-content.el-input-number.el-input__wrapper > .el-input。
   // 普通 Element InputNumber 的根/子 wrapper 规则不能套到这里，否则会同时压缩外壳、
-  // 清空组件自己的 textAlign/controls 语义。复合根只统一外轮廓和高度，内部继续由
-  // jh-input-number 自己负责左右对齐、单位附加段与步进按钮。
+  // 清空组件自己的 textAlign/controls 语义。复合根只统一外轮廓和高度，业务仍负责
+  // textAlign/controls/单位语义，步进按钮几何由本适配层统一治理。
   &.com-inputNumber-content.el-input-number.el-input__wrapper {
+    position: relative !important;
     display: inline-flex !important;
     align-items: stretch !important;
     width: 100% !important;
@@ -254,7 +261,7 @@
     min-height: 0 !important;
     // common-core 原始样式会把左内边距清零；由内部 wrapper 单点补回文本起始间距，
     // 不改变右侧步进按钮、单位后缀和 textAlign 的组件语义。
-    padding-left: 11px !important;
+    padding-left: var(--wk-form-control-padding-inline, 11px) !important;
     border: 0 !important;
     border-radius: 0 !important;
     background: transparent !important;
@@ -272,6 +279,58 @@
     box-shadow: none !important;
   }
 
+  // jh 复合数字框的步进按钮与普通 Element Plus 数字框共享同一几何：
+  // 固定在右侧上下两格，避免业务高度或单位附加段导致箭头错位。
+  &.com-inputNumber-content.el-input-number.el-input__wrapper:has(
+      > .el-input-number__increase
+    )
+    > .el-input {
+    padding-right: var(--wk-form-number-controls-width, 24px) !important;
+    box-sizing: border-box !important;
+  }
+
+  &.com-inputNumber-content.el-input-number.el-input__wrapper
+    :where(.el-input-number__increase, .el-input-number__decrease) {
+    position: absolute !important;
+    right: 0 !important;
+    left: auto !important;
+    z-index: 2 !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: var(--wk-form-number-controls-width, 24px) !important;
+    height: 50% !important;
+    min-height: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: 0 !important;
+    border-left: 1px solid var(--el-border-color, #dcdfe6) !important;
+    box-sizing: border-box !important;
+    color: var(--el-text-color-secondary, #909399) !important;
+    line-height: 1 !important;
+    cursor: pointer !important;
+    transition: color 0.15s ease, background-color 0.15s ease !important;
+  }
+
+  &.com-inputNumber-content.el-input-number.el-input__wrapper
+    .el-input-number__increase {
+    top: 0 !important;
+    bottom: auto !important;
+    border-bottom: 1px solid var(--el-border-color, #dcdfe6) !important;
+  }
+
+  &.com-inputNumber-content.el-input-number.el-input__wrapper
+    .el-input-number__decrease {
+    top: auto !important;
+    bottom: 0 !important;
+  }
+
+  &.com-inputNumber-content.el-input-number.el-input__wrapper
+    :where(.el-input-number__increase, .el-input-number__decrease):hover {
+    color: var(--el-color-primary, #002a8f) !important;
+    background: rgba(var(--el-color-primary-rgb, 0, 42, 143), 0.06) !important;
+  }
+
   // 带单位/后缀时，外层数字框仍是唯一描边所有者；子 input-group 只负责布局和分隔线。
   &.com-inputNumber-content.el-input-number.el-input__wrapper
     > .el-input.el-input-group {
@@ -294,6 +353,8 @@
   &.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;
+    padding: 0 var(--wk-form-control-padding-inline, 11px) !important;
+    box-sizing: border-box !important;
     border-radius: var(--el-border-radius-base) !important;
   }