@agile-team/wl-skills-ui 1.8.16 → 1.8.17

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.8.17] - 2026-07-15
+
+### Changed
+
+- **操作列状态辨识**：全局化妆层把可用图标默认色改为柔和主题蓝 `--el-color-primary-light-2`，hover 继续使用原有蓝/绿/红语义色；原生禁用态统一浅灰且不响应 hover，选中行不再自动改变按钮语义色。业务页面无需改造，升级样式包即可生效。
+
 ## [1.8.16] - 2026-07-01
 
 ### Fixed

package/README.md

@@ -213,7 +213,11 @@ yarn add @agile-team/wl-skills-ui
 
 ## 版本亮点
 
-当前 v1.8.16：
+当前 v1.8.17：
+
+- **操作列状态辨识**：可用图标默认使用柔和主题蓝，hover 保留蓝/绿/红语义色；禁用态统一浅灰且不响应 hover，选中行不再改变按钮语义色
+
+上一版 v1.8.16：
 
 - **label 冒号通杀（根治"就它带冒号"）**：jh-* 组件的 `showColon` 默认 true，渲染冒号走 `.com-text` 但不带 `.has-colon`，旧规则（仅 `.has-colon` 限定）命不中。新增不限 `.has-colon` 的通杀规则，咔嚓所有 `.el-form-item__label` 内冒号伪元素
 

package/SKILL.md

@@ -454,7 +454,7 @@ columnsDef(): TableColumnDesc<any>[] {
 |---|---|
 | 状态列彩色 Tag | `defineColumns` COLUMN_AUTO_MAP 自动配置 |
 | 操作列图标按钮 | `renderOps([...])` 统一渲染系统 |
-| 操作列条件显示 | `show: condition` 替代 `disabled: (row) => !condition` |
+| 操作列条件显示 | `show: condition` 控制按钮显隐 |
 | 自动分隔线 | 图标组与文字组之间 `renderOps` 自动插入 |
 | 点击阻止冒泡 | `renderOps` 内部自动 `e.stopPropagation()` |
 

package/examples/migration-operations-to-renderOps.md

@@ -62,12 +62,12 @@ const columnsDef = [
 
 | type | 图标 | 标题 | 颜色 |
 |---|---|---|---|
-| `view` | Eye (View) | 查看 | 蓝色 |
-| `edit` | Edit | 编辑 | 绿色 |
-| `del` | Delete | 删除 | 红色 |
-| `log` | Document | 记录 | 灰色 |
-| `ok` | CircleCheck | 审核 | 绿色 |
-| `send` | Upload | 提交 | 蓝色 |
+| `view` | Eye (View) | 查看 | 默认主题淡蓝，hover 蓝色 |
+| `edit` | Edit | 编辑 | 默认主题淡蓝，hover 绿色 |
+| `del` | Delete | 删除 | 默认主题淡蓝，hover 红色 |
+| `log` | Document | 记录 | 默认主题淡蓝，hover 蓝色 |
+| `ok` | CircleCheck | 审核 | 默认主题淡蓝，hover 绿色 |
+| `send` | Upload | 提交 | 默认主题淡蓝，hover 蓝色 |
 
 ## 非预设操作（胶囊/文字）
 

package/package.json

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

package/reference/ag-cell-renders.ts

@@ -382,7 +382,7 @@ export function renderRatingLevel(
 
 /**
  * 内置图标预设（type: 'view' | 'edit' | 'del'）
- * 渲染为 26×26px 纯图标按钮，默认灰色，hover 变语义色
+ * 渲染为 26×26px 纯图标按钮，默认主题淡蓝，hover 变语义色
  */
 const ICON_PRESETS = {
   view: { icon: View, cls: "jh-op-view", title: "查看" },
@@ -429,7 +429,7 @@ export type OpItem = OpPreset | OpChip | OpLink;
  * 渲染操作列按钮组（三层系统）
  *
  * 第一层 — 纯图标按钮（type: 'view'|'edit'|'del'|'log'|'ok'|'send'）
- *   26×26px，默认灰色，hover 变语义色，tooltip 兜底
+ *   26×26px，默认主题淡蓝，hover 变语义色，tooltip 兜底
  *
  * 第二层 — 胶囊按钮（type: 'chip'）
  *   圆角胶囊，图标+文字，hover 淡蓝背景 + 主色文字

package/standards/ui/02-button.md

@@ -28,17 +28,25 @@
 
 ## 操作列按钮（表格行内）
 
-使用 `jh-op-btn` 类，**禁止** `<el-button>` 在行内使用：
+统一使用 `renderOps` 图标按钮系统，**禁止** `<el-button>` 在行内使用：
 
-```vue
-<!-- ❌ 错误 -->
-<el-button type="text" @click="handleEdit(row)">编辑</el-button>
-
-<!-- ✅ 正确 -->
-<span class="jh-op-btn primary" @click="handleEdit(row)">修改</span>
-<span class="jh-op-btn danger"  @click="handleVoid(row)">作废</span>
+```typescript
+// ✅ 正确
+renderOps([
+  { type: 'edit', onClick: () => handleEdit(row) },
+  { type: 'del', onClick: () => handleVoid(row) },
+])
 ```
 
+### 视觉状态
+
+| 状态 | 标准表现 |
+|---|---|
+| 默认可用 | 柔和主题蓝，透明背景 |
+| hover | 查看/记录/提交变主题蓝，编辑/审核变绿，删除/作废变红 |
+| 禁用 | 浅灰且 hover 不变色，使用原生 `disabled` |
+| 选中行 | 保持默认主题蓝，不因选中自动变为语义色 |
+
 ### 按钮标签严格对应原型
 
 | 操作    | 正确标签 | 禁止替换为 |
@@ -47,15 +55,12 @@
 | 软删除  | **作废** | ~~删除~~ |
 | 硬删除  | **删除** | ~~移除~~ |
 
-### 条件显示（不同状态不同按钮）
+### 条件显示
 
 ```typescript
-// ✅ renderOps 中用 show 控制
-renderOps(p, [
-  { label: '修改', type: 'primary', show: (row) => row.status === 1 },
-  { label: '作废', type: 'danger',  show: (row) => row.status === 1 },
-  { label: '编辑', type: 'primary', show: (row) => row.status === 0 },
-  { label: '删除', type: 'danger',  show: (row) => row.status === 0 },
+renderOps([
+  { type: 'del', show: () => canDelete, onClick: () => handleDelete(row) },
+  { type: 'edit', show: () => canEdit, onClick: () => handleEdit(row) },
 ])
 ```
 

package/styles/vendors/_base-components.scss

@@ -38,75 +38,72 @@
   outline: none;
   border: none;
   background: transparent;
+  color: var(--el-color-primary-light-2, #5178f6);
   transition: background-color 0.13s ease, color 0.13s ease;
   flex-shrink: 0;
 
   svg { width: 14px; height: 14px; }
-        &:active {
-          opacity: 0.6;
-        }
+  &:active:not(:disabled) { opacity: 0.6; }
 
   // 查看 — hover 蓝
   &.jh-op-view {
-    color: #C0C4CC;
-    &:hover {
+    &:hover:not(:disabled) {
         color: var(--el-color-primary);
         background: rgba(34, 84, 244, 0.09);
       }
   }
   // 编辑 — hover 翠绿
   &.jh-op-edit {
-    color: #C0C4CC;
-    &:hover {
+    &:hover:not(:disabled) {
         color: var(--el-color-success);
         background: rgba(43, 178, 104, 0.09);
       }
   }
   // 删除/作废 — hover 红
   &.jh-op-del {
-    color: #C0C4CC;
-    &:hover {
+    &:hover:not(:disabled) {
         color: var(--el-color-danger);
         background: rgba(187, 45, 63, 0.09);
       }
   }
   // 记录 — hover 靛蓝
   &.jh-op-log {
-    color: #C0C4CC;
-    &:hover {
+    &:hover:not(:disabled) {
         color: var(--el-color-primary);
         background: rgba(34, 84, 244, 0.09);
       }
   }
   // 审核 — hover 翠绿
   &.jh-op-ok {
-    color: #C0C4CC;
-    &:hover {
+    &:hover:not(:disabled) {
         color: var(--el-color-success);
         background: rgba(43, 178, 104, 0.09);
       }
   }
   // 提交 — hover 主色
   &.jh-op-send {
-    color: #C0C4CC;
-    &:hover {
+    &:hover:not(:disabled) {
         color: var(--el-color-primary, #2254f4);
         background: rgba(34, 84, 244, 0.09);
       }
   }
   // 保存（内联表格用）— hover 翠绿
   &.jh-op-save {
-    color: #C0C4CC;
-    &:hover {
+    &:hover:not(:disabled) {
         color: var(--el-color-success);
         background: rgba(43, 178, 104, 0.09);
       }
-    &:disabled { opacity: 0.45; cursor: not-allowed; }
   }
   // 取消（内联表格用）— hover 中灰
   &.jh-op-cancel {
-    color: #C0C4CC;
-    &:hover { color: #6B7280; background: rgba(107, 114, 128, 0.10); }
+    &:hover:not(:disabled) { color: #6B7280; background: rgba(107, 114, 128, 0.10); }
+  }
+
+  &:disabled {
+    color: var(--el-text-color-disabled, rgba(0, 0, 0, 0.25));
+    background: transparent;
+    opacity: 1;
+    cursor: not-allowed;
   }
 }
 
@@ -141,13 +138,17 @@
   flex-shrink: 0;
 
   svg { width: 12px; height: 12px; flex-shrink: 0; }
-  &:hover {
+  &:hover:not(:disabled) {
     background: rgba(34, 84, 244, 0.10);
       color: var(--el-color-primary, #2254f4);
   }
-        &:active {
-          opacity: 0.65;
-        }
+  &:active:not(:disabled) { opacity: 0.65; }
+  &:disabled {
+    color: var(--el-text-color-disabled, rgba(0, 0, 0, 0.25));
+    background: transparent;
+    opacity: 1;
+    cursor: not-allowed;
+  }
 }
 
 // ── 第三层：文字按钮（业务专属长名称）────────────────────────────────────────
@@ -172,11 +173,17 @@
   transition: background 0.13s, color 0.13s;
   flex-shrink: 0;
 
-  &:hover {
+  &:hover:not(:disabled) {
     background: rgba(34, 84, 244, 0.08);
       color: var(--el-color-primary, #2254f4);
   }
-  &:active { opacity: 0.55; }
+  &:active:not(:disabled) { opacity: 0.55; }
+  &:disabled {
+    color: var(--el-text-color-disabled, rgba(0, 0, 0, 0.25));
+    background: transparent;
+    opacity: 1;
+    cursor: not-allowed;
+  }
 }
 
 // ── 状态标签 — 精致小标签（GitHub/Linear label 风格）────────────────────────
@@ -337,20 +344,10 @@
 
 .ag-row-selected {
 
-  .jh-op-btn,
-  .jh-op-chip,
-  .jh-op-link {
+  .jh-op-btn:not(:disabled),
+  .jh-op-chip:not(:disabled),
+  .jh-op-link:not(:disabled) {
     background-color: rgba(255, 255, 255, 0.65);
-    color: var(--el-color-primary, #2254f4);
-  }
-
-  .jh-op-del {
-    color: var(--el-color-danger, #f5222d);
-  }
-
-  .jh-op-edit,
-  .jh-op-ok {
-    color: var(--el-color-success, #2bb268);
   }
 }
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

package/templates/ui-optimization-report/TPL-UI-OPTIM-REPORT.md

@@ -238,7 +238,7 @@ views/[module]/style/index.scss       ← 第4层：模块级布局补丁（仅
 | | 改造前 | 改造后 |
 |---|--------|--------|
 | **外观** | 文字按钮，占 120~200px | 图标按钮，占 80~100px |
-| **颜色** | 全蓝色链接 | 查看=蓝 hover，编辑=绿 hover，删除=红 hover |
+| **颜色** | 全蓝色链接 | 默认主题淡蓝；查看=蓝 hover，编辑=绿 hover，删除=红 hover |
 | **条件显示** | 置灰仍占位 | `visibility:hidden` 对齐占位 |
 | **一致性** | 各页面标签混用 | 全局统一图标语义 |