@agile-team/wl-skills-ui 1.9.5 → 1.9.6

package/CHANGELOG.md

@@ -4,6 +4,13 @@ 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.9.6] - 2026-07-23
+
+### Fixed
+
+- 数值输入框统一由 Element Plus wrapper 绘制唯一边框，隐藏 common-core 残留步进按钮及浏览器原生数字步进器，保留 `type=number` 语义并修复焦点双边框、内容压盖和输入后边框消失。
+- 固定 AG Grid 空数据插图与文案的紧凑尺寸并轻微下移视觉中心，避免不同表格高度导致空态大小不一或位置偏上。
+
 ## [1.9.5] - 2026-07-23
 
 ### Fixed

package/README.md

@@ -200,7 +200,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` 冒号注入（wl-skills-ui 已统一屏蔽表单冒号） |
-| `@agile-team/wl-skills-ui` | `^1.9.5` | 已对齐上述组合的 DOM 假设、客户主题锁、圆角契约与定制页样式边界 |
+| `@agile-team/wl-skills-ui` | `^1.9.6` | 已对齐上述组合的 DOM 假设、客户主题锁、圆角契约与定制页样式边界 |
 
 三种识别方式，任选其一：
 
@@ -214,7 +214,7 @@ yarn add @agile-team/wl-skills-ui
 
 ## 版本亮点
 
-当前 v1.9.5：
+当前 v1.9.6：
 
 - **Vite 4 运行时兼容**：浏览器 ESM 产物不再暴露可被开发转换误替换的 Node 环境变量成员链，预构建与直接加载均保持合法语法。
 - **登录页精准退出**：内置识别 `.lp-root` 与 `.session-login`，其内部表单、按钮、焦点和校验态保留登录页自身设计；业务页面仍由包高权重统一管控。

package/docs/compat-matrix.md

@@ -11,7 +11,7 @@
 | `element-plus` | **`2.2.6-prod.3`** | 集团 jh- 定制版，搭配 `@jhlc/jh-ui` 使用，DOM 仍为 `.el-input > .el-input__inner` 直挂结构（**EP 2.3.0 起才引入 `.el-input__wrapper`**） |
 | `@jhlc/jh-ui` | **`3.1.0`** | SCSS 皮肤包，`.com-text` label 包裹、`.has-colon ::after` 冒号注入、`.el-form-item--default { margin-bottom: 24px }` 等强约束 |
 | `@jhlc/common-core` | `3.1.0` 或 `3.1.0-prod.x` | 基础 util/types，`@jhlc/jh-ui` 间接依赖 |
-| `@agile-team/wl-skills-ui` | `^1.9.5` | 已对齐 jh-ui 3.1.0 + EP 2.2.6-prod.3 的 DOM 假设、客户主题锁、6px 基础圆角、定制页样式边界与 Vite 4 开发转换 |
+| `@agile-team/wl-skills-ui` | `^1.9.6` | 已对齐 jh-ui 3.1.0 + EP 2.2.6-prod.3 的 DOM 假设、客户主题锁、6px 基础圆角、定制页样式边界与 Vite 4 开发转换 |
 
 ## 项目集群当前实测
 
@@ -35,7 +35,7 @@
 
 ## 适配建议
 
-- 集团内项目：**统一锚定 `element-plus@2.2.6-prod.3` + `@jhlc/jh-ui@3.1.0`**，与 wl-skills-ui v1.9.5 三方对齐。
+- 集团内项目：**统一锚定 `element-plus@2.2.6-prod.3` + `@jhlc/jh-ui@3.1.0`**，与 wl-skills-ui v1.9.6 三方对齐。
 - 升级 `element-plus` 到 2.3+ 前，必须同步升级 `@jhlc/jh-ui` 到对应支持版本，否则 `.com-text` / `.el-input__inner` DOM 与 EP `__wrapper` 体系不兼容。
 - 新项目接入：见 README 「快速接入」章节，默认会按本表声明 peerDependency 范围。
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agile-team/wl-skills-ui",
-  "version": "1.9.5",
+  "version": "1.9.6",
   "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,8 +5,8 @@
 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;
+  --wk-form-label-control-gap: 16px;
+  --wk-form-label-line-height: 22px;
 }
 
 #{skin.$managed-scope-selector} {
@@ -47,22 +47,96 @@ html body {
     line-height: calc(var(--wk-form-control-height) - 2px) !important;
   }
 
-  // number 输入只由 `.el-input__wrapper` 绘制焦点环。浏览器原生 outline
-  // 或内部 input 的 box-shadow 会与 wrapper 叠成双边框，并压到步进按钮分隔线。
+  // common-core 的 InputNumberComponent 即使传入 controls=false，部分版本仍会
+  // 输出 controls-right 步进按钮。数值框保留 Element Plus 的 wrapper 作为唯一
+  // 可见边框，根节点仅负责尺寸，避免 wrapper 聚焦阴影与根边框叠成双层描边。
   &.el-input-number,
   &.el-input-number:focus,
-  &.el-input-number:focus-within,
-  &.el-input-number .el-input,
-  &.el-input-number .el-input__inner,
-  &.el-input-number .el-input__inner:focus,
-  &.el-input-number .el-input__inner:focus-visible {
+  &.el-input-number:focus-within {
+    width: 100% !important;
+    height: var(--wk-form-control-height) !important;
+    line-height: var(--wk-form-control-height) !important;
+    border: 0 !important;
+    border-radius: var(--wk-form-control-radius) !important;
     outline: none !important;
+    box-sizing: border-box !important;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+
+  &.el-input-number .el-input {
+    width: 100% !important;
+    height: 100% !important;
+    border: 0 !important;
+    outline: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+
+  &.el-input-number .el-input__wrapper {
+    width: 100% !important;
+    height: 100% !important;
+    min-height: 0 !important;
+    padding: 0 11px !important;
+    border: 0 !important;
+    border-radius: calc(var(--wk-form-control-radius) - 1px) !important;
+    box-sizing: border-box !important;
+    background: var(--el-bg-color, #fff) !important;
+    box-shadow: 0 0 0 1px var(--el-border-color, #dcdfe6) inset !important;
+    transition: box-shadow 0.15s ease !important;
+  }
+
+  &.el-input-number:not(.is-disabled):hover .el-input__wrapper {
+    box-shadow:
+      0 0 0 1px var(--el-border-color-hover, #c0c4cc) inset !important;
+  }
+
+  &.el-input-number .el-input__wrapper.is-focus,
+  &.el-input-number:focus-within .el-input__wrapper {
+    box-shadow:
+      0 0 0 1.5px var(--el-color-primary, #002a8f) inset !important;
+  }
+
+  &.el-input-number.is-disabled .el-input__wrapper {
+    background: var(--el-disabled-bg-color, #f5f7fa) !important;
+    box-shadow:
+      0 0 0 1px var(--el-disabled-border-color, #e4e7ed) inset !important;
   }
 
   &.el-input-number .el-input__inner,
-  &.el-input-number .el-input__inner:focus {
+  &.el-input-number .el-input__inner:focus,
+  &.el-input-number .el-input__inner:focus-visible {
+    width: 100% !important;
+    height: 100% !important;
+    line-height: calc(var(--wk-form-control-height) - 2px) !important;
+    padding: 0 11px !important;
     border: 0 !important;
+    border-radius: calc(var(--wk-form-control-radius) - 1px) !important;
+    outline: none !important;
+    background: transparent !important;
     box-shadow: none !important;
+    text-align: left !important;
+  }
+
+  &.el-input-number .el-input__wrapper .el-input__inner {
+    padding: 0 !important;
+  }
+
+  &.el-input-number .el-input-number__increase,
+  &.el-input-number .el-input-number__decrease {
+    display: none !important;
+  }
+
+  &.el-input-number .el-input__inner::-webkit-inner-spin-button,
+  &.el-input-number .el-input__inner::-webkit-outer-spin-button {
+    margin: 0 !important;
+    appearance: none !important;
+    -webkit-appearance: none !important;
+  }
+
+  &.el-input-number .el-input__inner[type="number"] {
+    appearance: textfield !important;
+    -moz-appearance: textfield !important;
   }
 
   &.el-textarea__inner {

package/styles/vendors/_ag-grid.scss

@@ -169,14 +169,18 @@
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
-  padding: 20px 0 !important;
+  overflow: hidden;
+  // 图标采用不缩放的统一大号规格；通过紧凑间距保证常用 148px 表体
+  // 也能完整容纳，并以顶部 8px 留白轻微下移视觉中心。
+  padding: 8px 0 0 !important;
 
   &::before {
     content: "";
     display: block;
+    flex: 0 0 84px;
     width: 100px;
     height: 84px;
-    margin-bottom: 18px;
+    margin-bottom: 10px;
     background-image: url("data:image/svg+xml,%3Csvg width='100' height='84' viewBox='0 0 100 84' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='8' y='10' width='84' height='70' rx='8' fill='%23E2E8F0' opacity='0.5'/%3E%3Crect x='4' y='4' width='84' height='70' rx='8' fill='white' stroke='%23CBD5E1' stroke-width='1.5'/%3E%3Crect x='4' y='4' width='84' height='22' rx='8' fill='%23EEF2FF'/%3E%3Crect x='4' y='18' width='84' height='8' fill='%23EEF2FF'/%3E%3Crect x='14' y='10' width='20' height='6' rx='3' fill='%23C7D2FE'/%3E%3Crect x='44' y='10' width='14' height='6' rx='3' fill='%23C7D2FE'/%3E%3Crect x='68' y='10' width='14' height='6' rx='3' fill='%23C7D2FE'/%3E%3Cline x1='4' y1='26' x2='88' y2='26' stroke='%23E2E8F0' stroke-width='1'/%3E%3Cline x1='40' y1='26' x2='40' y2='74' stroke='%23F1F5F9' stroke-width='1'/%3E%3Cline x1='64' y1='26' x2='64' y2='74' stroke='%23F1F5F9' stroke-width='1'/%3E%3Crect x='14' y='31' width='18' height='5' rx='2.5' fill='%23F1F5F9'/%3E%3Crect x='44' y='31' width='12' height='5' rx='2.5' fill='%23F1F5F9'/%3E%3Crect x='68' y='31' width='14' height='5' rx='2.5' fill='%23F1F5F9'/%3E%3Cline x1='4' y1='43' x2='88' y2='43' stroke='%23F8FAFC' stroke-width='1'/%3E%3Crect x='14' y='47' width='22' height='5' rx='2.5' fill='%23F8FAFC'/%3E%3Crect x='44' y='47' width='10' height='5' rx='2.5' fill='%23F8FAFC'/%3E%3Crect x='68' y='47' width='12' height='5' rx='2.5' fill='%23F8FAFC'/%3E%3Cline x1='4' y1='59' x2='88' y2='59' stroke='%23F8FAFC' stroke-width='1'/%3E%3Crect x='14' y='63' width='16' height='5' rx='2.5' fill='%23FAFAFA'/%3E%3Crect x='44' y='63' width='14' height='5' rx='2.5' fill='%23FAFAFA'/%3E%3Crect x='68' y='63' width='10' height='5' rx='2.5' fill='%23FAFAFA'/%3E%3Ccircle cx='74' cy='58' r='18' fill='white' stroke='%23E2E8F0' stroke-width='1.5'/%3E%3Ccircle cx='72' cy='56' r='9' fill='%23EEF2FF' stroke='%23818CF8' stroke-width='2'/%3E%3Cline x1='78.5' y1='62.5' x2='83' y2='67' stroke='%23818CF8' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M68.5 52.5 L75.5 59.5' stroke='%23A5B4FC' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M75.5 52.5 L68.5 59.5' stroke='%23A5B4FC' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-size: contain;
@@ -186,17 +190,21 @@
   &::after {
     content: var(--wk-empty-hint);
     display: block;
+    flex: 0 0 auto;
     font-size: 12px;
     color: var(--el-text-color-placeholder, #b0b7c3);
-    margin-top: 6px;
+    line-height: 18px;
+    margin-top: 2px;
     letter-spacing: 0.01em;
   }
 }
 
 .ag-overlay-no-rows-center {
+  flex: 0 0 auto;
   font-size: 14px;
   font-weight: 500;
   color: var(--el-text-color-primary, #374151);
+  line-height: 20px;
   letter-spacing: 0.02em;
 }