@agile-team/wl-skills-ui 1.9.8 → 1.9.9

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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.9] - 2026-07-29
+
+### Fixed
+
+- 将 Element Table 与 AG Grid 的行 hover/selected 底色统一为品牌色 4%/7% 浅层，并保证 AG Grid 选中态优先于 hover，缓解可编辑控件下方色带过重且不覆盖校验态或业务语义单元格。
+
 ## [1.9.8] - 2026-07-29
 
 ### 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.8` | 已对齐上述组合的 DOM 假设、客户主题锁、圆角契约与定制页样式边界 |
+| `@agile-team/wl-skills-ui` | `^1.9.9` | 已对齐上述组合的 DOM 假设、客户主题锁、圆角契约与定制页样式边界 |
 
 三种识别方式，任选其一：
 
@@ -214,10 +214,11 @@ yarn add @agile-team/wl-skills-ui
 
 ## 版本亮点
 
-当前 v1.9.8：
+当前 v1.9.9：
 
 - **主操作按钮不再漏色**：新增/新建/添加/创建类按钮强制使用客户主题 `primary` 填充样式，扫描器可识别并自动修复漏写 `type` 或误带 `plain` 的存量代码。
 - **长文本交互统一**：普通数据列在空间不足时单行省略，悬停显示完整内容；Tag、操作列、自定义渲染和主动换行列不被机械覆盖。
+- **表格行状态降噪**：Element Table 与 AG Grid 的 hover/selected 统一为品牌色 4%/7% 浅层，选中态优先于悬停，同时保留编辑控件、校验态、Tag 和业务语义单元格底色。
 - **紧凑表单字号闭环**：业务表单 label、输入值、选择值、placeholder、textarea 与数字输入统一为 12px；登录页和显式定制区域继续保持项目自身设计。
 - **输入边框状态闭环**：textarea 聚焦始终显示品牌色边框；数字输入兼容 Element Plus 新旧及混合 wrapper DOM，默认、hover、focus、错误、禁用态均只保留一层正确边框。
 - **分裂操作保持一体**：BaseToolbar 的主动作与下拉箭头共用外轮廓和状态色，下拉菜单中的业务按钮扁平化为菜单项；规则精准限定在平台工具栏结构，不污染普通按钮组和普通下拉菜单。

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.8` | 已对齐 jh-ui 3.1.0 + EP 2.2.6-prod.3 的 DOM 假设、客户主题锁、6px 基础圆角、紧凑表单、分裂按钮、长文本提示、定制页样式边界与 Vite 4 开发转换 |
+| `@agile-team/wl-skills-ui` | `^1.9.9` | 已对齐 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.8 三方对齐。
+- 集团内项目：**统一锚定 `element-plus@2.2.6-prod.3` + `@jhlc/jh-ui@3.1.0`**，与 wl-skills-ui v1.9.9 三方对齐。
 - 升级 `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.8",
+  "version": "1.9.9",
   "description": "企业级 UI 风格对齐框架 — Vue + Element Plus 项目通用化妆/原生双模式（tokens / element / vendors / layouts / runtime / scanner / fixer / skills）",
   "type": "module",
   "main": "./es/index.js",

package/skills/element/el-table/SKILL.md

@@ -66,6 +66,10 @@ BaseTable / AG Grid 使用 `defineColumns()` 后由 runtime 自动为普通文
 `showOverflowTooltip: true`。自定义渲染、结构列、换行列不强制；需要主动关闭时
 显式声明 `showOverflowTooltip: false`。
 
+行 hover/selected 色由包内表格 token 统一管理，业务页面不要重写
+`hover-row`、`current-row` 或直接覆盖 `td.el-table__cell` 背景，以免编辑控件、
+校验态和语义单元格底色发生冲突。
+
 ---
 
 ## 完整标准写法示例

package/skills/vendors/ag-grid/SKILL.md

@@ -15,6 +15,10 @@ applyTo: "**/*.{ts,vue}"
 
 > 与 `wl-skills-kit` 协同说明：本 Skill 负责 AG Grid/列渲染/操作列 runtime 能力，也要服务非 kit 项目的通用 AG Grid 场景。若扫描发现项目希望升级为团队最佳实践，再提示使用 `wl-skills-kit` 进行页面结构和工作流规范化；在此之前，`wl-skills-ui` 仍应保证样式和渲染能力可独立生效。
 
+> 行状态由包统一管控：hover 为品牌色 4% 浅底，selected 为 7% 浅底且优先于
+> hover。业务代码不要重写 `.ag-row-hover`、`.ag-row-selected` 或对应 AG
+> Grid 主题变量，也不要为了行状态修改编辑控件、校验态和语义单元格背景。
+
 ---
 
 ## 标准列定义写法

package/standards/ui/01-table.md

@@ -53,6 +53,16 @@ BaseTable / AG Grid 列必须通过 `defineColumns()` 声明。普通文本列
 
 ---
 
+## 行悬停与选中状态
+
+- hover 使用客户品牌色 4% 透明度，只提示当前位置，不形成整条亮蓝色块。
+- selected 使用客户品牌色 7% 透明度，并始终优先于 hover。
+- 状态色只作用于数据行背景，不覆盖编辑输入框、校验态、Tag 和业务语义单元格底色。
+- 不在业务页面重写 `.ag-row-hover`、`.ag-row-selected`、`hover-row` 或
+  `current-row`；Element Table 与 AG Grid 均由化妆包统一管控。
+
+---
+
 ## 规则 R004：操作列使用 renderOps / jh-op-btn
 
 操作列按钮**不得**直接使用 `<el-button>` 或裸文本，必须通过 `renderOps` 渲染：

package/styles/element/_table.scss

@@ -2,6 +2,13 @@
 // jh-ui table.scss 表头颜色为硬编码，此处用 CSS 变量覆盖
 
 html body .el-table {
+  // 与 AG Grid 共用克制的行状态层级；只改表格状态 token，
+  // 不强刷 input / 校验 / 业务语义单元格背景。
+  --wk-table-row-hover-bg: rgba(var(--el-color-primary-rgb), 0.04);
+  --wk-table-row-selected-bg: rgba(var(--el-color-primary-rgb), 0.07);
+  --el-table-row-hover-bg-color: var(--wk-table-row-hover-bg) !important;
+  --el-table-current-row-bg-color: var(--wk-table-row-selected-bg) !important;
+
   .el-table__header-wrapper th,
   .el-table__fixed-header-wrapper th {
     color: var(--el-text-color-primary, #303133);

package/styles/vendors/_ag-grid.scss

@@ -6,14 +6,18 @@
 
 // ── CSS 变量注入（AG Grid 28+ 支持）──────────────────────────────────────────
 .ag-root-wrapper {
+  // 深品牌蓝在大面积行底色中只保留轻提示：hover 4%，selected 7%。
+  // 同时回写 AG Grid 变量，避免平台主题继续使用默认亮蓝。
+  --wk-grid-row-hover-bg: rgba(var(--el-color-primary-rgb), 0.04);
+  --wk-grid-row-selected-bg: rgba(var(--el-color-primary-rgb), 0.07);
   --ag-background-color: #ffffff;
   --ag-odd-row-background-color: #ffffff;
   --ag-header-background-color: #fafafa;
   --ag-header-foreground-color: #374151;
   --ag-border-color: rgba(0, 0, 0, 0.06);
   --ag-row-border-color: rgba(0, 0, 0, 0.06);
-  --ag-row-hover-color: rgba(var(--el-color-primary-rgb), 0.06);
-  --ag-selected-row-background-color: rgba(var(--el-color-primary-rgb), 0.1);
+  --ag-row-hover-color: var(--wk-grid-row-hover-bg) !important;
+  --ag-selected-row-background-color: var(--wk-grid-row-selected-bg) !important;
   --ag-range-selection-border-color: rgba(var(--el-color-primary-rgb), 0.4);
   --ag-font-size: 13px;
   --ag-font-family: inherit;
@@ -88,7 +92,7 @@
   font-size: 13px !important;
   color: var(--el-text-color-primary) !important;
   border-bottom-color: var(--el-border-color-lighter) !important;
-  transition: background-color 0.15s ease;
+  transition: background-color 0.12s ease;
 }
 
 .ag-row-even {
@@ -98,13 +102,21 @@
   background-color: #ffffff;
 }
 
-.ag-row:hover,
-.ag-row.ag-row-hover {
-  background-color: rgba(var(--el-color-primary-rgb), 0.06) !important;
+.ag-row:not(.ag-row-selected):hover,
+.ag-row.ag-row-hover:not(.ag-row-selected) {
+  background-color: var(
+    --wk-grid-row-hover-bg,
+    rgba(var(--el-color-primary-rgb), 0.04)
+  ) !important;
 }
 
-.ag-row.ag-row-selected {
-  background-color: rgba(var(--el-color-primary-rgb), 0.1) !important;
+.ag-row.ag-row-selected,
+.ag-row.ag-row-selected:hover,
+.ag-row.ag-row-selected.ag-row-hover {
+  background-color: var(
+    --wk-grid-row-selected-bg,
+    rgba(var(--el-color-primary-rgb), 0.07)
+  ) !important;
 }
 
 // ── 单元格 ────────────────────────────────────────────────────────────────────