@agile-team/wl-skills-ui 1.9.1 → 1.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -4,6 +4,15 @@ All notable changes to **@agile-team/wl-skills-ui** will be documented in this f
4
4
 
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
6
6
 
7
+ ## [1.9.2] - 2026-07-21
8
+
9
+ ### Fixed
10
+
11
+ - 新增客户品牌主题锁:L0 的品牌色、功能色和圆角 token 使用 `!important`,运行时再监听 `html/body` 的主题变量改写,阻止平台 `/system/theme/list` 动态主题把包值改回旧亮色。
12
+ - `installCommonPreset()` / `installSecurityPreset()` 自动安装主题锁;同时公开 `installBrandThemeLock()`,纯 runtime 接入也可显式启用。
13
+ - 恢复按钮、输入框等基础控件的 `6px` 圆角,保留圆形、胶囊和按钮组的语义圆角,不再被 jh-ui 的 `2px` 基础值压平。
14
+ - 功能按钮锁定克制的成功 `#2BB268`、警告 `#EA9A13`、危险 `#BB2D3F`,并把彩色发光阴影收敛为轻量中性阴影,保持语义辨识但降低突兀感。
15
+
7
16
  ## [1.9.1] - 2026-07-20
8
17
 
9
18
  ### Fixed
package/README.md CHANGED
@@ -200,7 +200,7 @@ yarn add @agile-team/wl-skills-ui
200
200
  |---|---|---|
201
201
  | `element-plus` | **`2.2.6-prod.3`** | 集团 jh- 定制版;EP 2.3.0 起引入 `.el-input__wrapper`,与 jh-ui 3.x 不兼容 |
202
202
  | `@jhlc/jh-ui` | **`3.1.0`** | SCSS 皮肤包,`.com-text` label 包裹 + `.has-colon` 冒号注入(wl-skills-ui 已统一屏蔽表单冒号) |
203
- | `@agile-team/wl-skills-ui` | `^1.9.1` | 已对齐上述组合的 DOM 假设与客户主色色阶 |
203
+ | `@agile-team/wl-skills-ui` | `^1.9.2` | 已对齐上述组合的 DOM 假设、客户主题锁与圆角契约 |
204
204
 
205
205
  三种识别方式,任选其一:
206
206
 
@@ -214,7 +214,13 @@ yarn add @agile-team/wl-skills-ui
214
214
 
215
215
  ## 版本亮点
216
216
 
217
- 当前 v1.9.1
217
+ 当前 v1.9.2
218
+
219
+ - **动态主题不可反覆盖**:品牌色、功能色和圆角使用 CSS `!important` + runtime `MutationObserver` 双保险;平台登录后写入 `document.body.style` 也会立即恢复为包内规范值。
220
+ - **圆角契约恢复**:按钮、输入框等基础控件统一 `6px`,不再回退到 jh-ui 的 `2px`;圆形、胶囊、按钮组仍保留各自语义。
221
+ - **语义色降噪**:成功 `#2BB268`、警告 `#EA9A13`、危险 `#BB2D3F` 均被主题锁保护,按钮彩色强阴影调整为轻量中性阴影,整体更稳重。
222
+
223
+ 上一版 v1.9.1:
218
224
 
219
225
  - **客户主色纠偏**:严格按《烟台华新数智化信息化改造项目 UI 规范 v1》统一主色为 `#002A8F`,并同步完整深浅色阶。
220
226
  - **按钮四态强覆盖**:主按钮常规 `#002A8F`、悬停 `#1A3F9A`、点击 `#002681`、禁用 `#B2BFDD`;`html body` 高特异性和填充按钮 `!important` 抵御 Element Plus、jh-ui 与旧业务皮肤覆盖。
@@ -26,6 +26,8 @@
26
26
  | `--el-color-danger` | `#bb2d3f` | 危险/失败/停用状态 |
27
27
  | `--el-color-info` | `#909399` | 中性/辅助信息 |
28
28
 
29
+ 品牌色及成功、警告、危险色阶属于客户固定主题契约。样式层以 `!important` 抵御平台普通内联主题,调用 `installCommonPreset()`、`installSecurityPreset()` 或 `installBrandThemeLock()` 后,运行时还会监测并恢复 `html/body` 上的动态改写。
30
+
29
31
  ## 文本色系
30
32
 
31
33
  | Token | 值 | 用途 |
@@ -23,6 +23,6 @@
23
23
  | 场景 | 值 |
24
24
  | ---------------------- | ------------------- |
25
25
  | 输入框/选择框/日期选择 | `6px`(已全局设置) |
26
- | 按钮 | `4px`(EP 默认) |
26
+ | 按钮 | `6px`(统一基础圆角) |
27
27
  | Tag | `4px`(EP 默认) |
28
28
  | 弹窗 | `8px`(EP 默认) |
@@ -1,75 +1,76 @@
1
1
  :root body {
2
- --el-color-primary: #002a8f;
3
- --el-color-primary-rgb: 0, 42, 143;
4
- --el-color-primary-light-1: #1a3f9a;
5
- --el-color-primary-light-2: #3355a5;
6
- --el-color-primary-light-3: #4d6ab1;
7
- --el-color-primary-light-4: #667fbc;
8
- --el-color-primary-light-5: #8094c7;
9
- --el-color-primary-light-6: #99aad2;
10
- --el-color-primary-light-7: #b2bfdd;
11
- --el-color-primary-light-8: #ccd4e9;
12
- --el-color-primary-light-9: #e5eaf4;
13
- --el-color-primary-dark-1: #002681;
14
- --el-color-primary-dark-2: #002272;
15
- --el-color-primary-dark-3: #001d64;
16
- --el-color-primary-dark-4: #001956;
17
- --el-color-success: #2bb268;
18
- --el-color-success-light-1: #40ba77;
19
- --el-color-success-light-2: #55c286;
20
- --el-color-success-light-3: #6bcb95;
21
- --el-color-success-light-4: #80d3a4;
22
- --el-color-success-light-5: #95dbb4;
23
- --el-color-success-light-6: #aae3c3;
24
- --el-color-success-light-7: #bfebd2;
25
- --el-color-success-light-8: #d5f4e1;
26
- --el-color-success-light-9: #eaf9f0;
27
- --el-color-success-dark-1: #229051;
28
- --el-color-success-dark-2: #1b733f;
29
- --el-color-success-dark-3: #14562f;
30
- --el-color-success-dark-4: #0d3a20;
31
- --el-color-warning: #ea9a13;
32
- --el-color-warning-light-1: #eca42b;
33
- --el-color-warning-light-2: #efae42;
34
- --el-color-warning-light-3: #f1b85a;
35
- --el-color-warning-light-4: #f3c171;
36
- --el-color-warning-light-5: #f5cb89;
37
- --el-color-warning-light-6: #f7d5a1;
38
- --el-color-warning-light-7: #f9dfb8;
39
- --el-color-warning-light-8: #fce8d0;
40
- --el-color-warning-light-9: #fef2e7;
41
- --el-color-warning-dark-1: #c47f0e;
42
- --el-color-warning-dark-2: #9d650a;
43
- --el-color-warning-dark-3: #754a07;
44
- --el-color-warning-dark-4: #4e3004;
45
- --el-color-danger: #bb2d3f;
46
- --el-color-danger-light-1: #c34253;
47
- --el-color-danger-light-2: #ca5766;
48
- --el-color-danger-light-3: #d16b78;
49
- --el-color-danger-light-4: #d8808b;
50
- --el-color-danger-light-5: #dd969f;
51
- --el-color-danger-light-6: #e4abb2;
52
- --el-color-danger-light-7: #e8c0c5;
53
- --el-color-danger-light-8: #f0d5d9;
54
- --el-color-danger-light-9: #f7eaec;
55
- --el-color-danger-dark-1: #962433;
56
- --el-color-danger-dark-2: #711b26;
57
- --el-color-danger-dark-3: #4b1219;
58
- --el-color-danger-dark-4: #26090d;
59
- --el-color-error: #bb2d3f;
60
- --el-color-error-light-1: #c34253;
61
- --el-color-error-light-2: #ca5766;
62
- --el-color-error-light-3: #d16b78;
63
- --el-color-error-light-4: #d8808b;
64
- --el-color-error-light-5: #dd969f;
65
- --el-color-error-light-6: #e4abb2;
66
- --el-color-error-light-7: #e8c0c5;
67
- --el-color-error-light-8: #f0d5d9;
68
- --el-color-error-light-9: #f7eaec;
69
- --el-color-error-dark-1: #962433;
70
- --el-color-error-dark-2: #711b26;
71
- --el-color-error-dark-3: #4b1219;
72
- --el-color-error-dark-4: #26090d;
2
+ /* 客户主题契约:防止平台运行时 body 内联主题覆盖。 */
3
+ --el-color-primary: #002a8f !important;
4
+ --el-color-primary-rgb: 0, 42, 143 !important;
5
+ --el-color-primary-light-1: #1a3f9a !important;
6
+ --el-color-primary-light-2: #3355a5 !important;
7
+ --el-color-primary-light-3: #4d6ab1 !important;
8
+ --el-color-primary-light-4: #667fbc !important;
9
+ --el-color-primary-light-5: #8094c7 !important;
10
+ --el-color-primary-light-6: #99aad2 !important;
11
+ --el-color-primary-light-7: #b2bfdd !important;
12
+ --el-color-primary-light-8: #ccd4e9 !important;
13
+ --el-color-primary-light-9: #e5eaf4 !important;
14
+ --el-color-primary-dark-1: #002681 !important;
15
+ --el-color-primary-dark-2: #002272 !important;
16
+ --el-color-primary-dark-3: #001d64 !important;
17
+ --el-color-primary-dark-4: #001956 !important;
18
+ --el-color-success: #2bb268 !important;
19
+ --el-color-success-light-1: #40ba77 !important;
20
+ --el-color-success-light-2: #55c286 !important;
21
+ --el-color-success-light-3: #6bcb95 !important;
22
+ --el-color-success-light-4: #80d3a4 !important;
23
+ --el-color-success-light-5: #95dbb4 !important;
24
+ --el-color-success-light-6: #aae3c3 !important;
25
+ --el-color-success-light-7: #bfebd2 !important;
26
+ --el-color-success-light-8: #d5f4e1 !important;
27
+ --el-color-success-light-9: #eaf9f0 !important;
28
+ --el-color-success-dark-1: #229051 !important;
29
+ --el-color-success-dark-2: #1b733f !important;
30
+ --el-color-success-dark-3: #14562f !important;
31
+ --el-color-success-dark-4: #0d3a20 !important;
32
+ --el-color-warning: #ea9a13 !important;
33
+ --el-color-warning-light-1: #eca42b !important;
34
+ --el-color-warning-light-2: #efae42 !important;
35
+ --el-color-warning-light-3: #f1b85a !important;
36
+ --el-color-warning-light-4: #f3c171 !important;
37
+ --el-color-warning-light-5: #f5cb89 !important;
38
+ --el-color-warning-light-6: #f7d5a1 !important;
39
+ --el-color-warning-light-7: #f9dfb8 !important;
40
+ --el-color-warning-light-8: #fce8d0 !important;
41
+ --el-color-warning-light-9: #fef2e7 !important;
42
+ --el-color-warning-dark-1: #c47f0e !important;
43
+ --el-color-warning-dark-2: #9d650a !important;
44
+ --el-color-warning-dark-3: #754a07 !important;
45
+ --el-color-warning-dark-4: #4e3004 !important;
46
+ --el-color-danger: #bb2d3f !important;
47
+ --el-color-danger-light-1: #c34253 !important;
48
+ --el-color-danger-light-2: #ca5766 !important;
49
+ --el-color-danger-light-3: #d16b78 !important;
50
+ --el-color-danger-light-4: #d8808b !important;
51
+ --el-color-danger-light-5: #dd969f !important;
52
+ --el-color-danger-light-6: #e4abb2 !important;
53
+ --el-color-danger-light-7: #e8c0c5 !important;
54
+ --el-color-danger-light-8: #f0d5d9 !important;
55
+ --el-color-danger-light-9: #f7eaec !important;
56
+ --el-color-danger-dark-1: #962433 !important;
57
+ --el-color-danger-dark-2: #711b26 !important;
58
+ --el-color-danger-dark-3: #4b1219 !important;
59
+ --el-color-danger-dark-4: #26090d !important;
60
+ --el-color-error: #bb2d3f !important;
61
+ --el-color-error-light-1: #c34253 !important;
62
+ --el-color-error-light-2: #ca5766 !important;
63
+ --el-color-error-light-3: #d16b78 !important;
64
+ --el-color-error-light-4: #d8808b !important;
65
+ --el-color-error-light-5: #dd969f !important;
66
+ --el-color-error-light-6: #e4abb2 !important;
67
+ --el-color-error-light-7: #e8c0c5 !important;
68
+ --el-color-error-light-8: #f0d5d9 !important;
69
+ --el-color-error-light-9: #f7eaec !important;
70
+ --el-color-error-dark-1: #962433 !important;
71
+ --el-color-error-dark-2: #711b26 !important;
72
+ --el-color-error-dark-3: #4b1219 !important;
73
+ --el-color-error-dark-4: #26090d !important;
73
74
  --el-color-info: #909399;
74
75
  --el-color-info-light-1: #9b9ea3;
75
76
  --el-color-info-light-2: #a7a9ae;
@@ -118,10 +119,10 @@
118
119
  --el-box-shadow-light: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
119
120
  --el-box-shadow-lighter: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
120
121
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
121
- --el-border-radius-base: 6px;
122
- --el-border-radius-small: 2px;
123
- --el-border-radius-round: 20px;
124
- --el-border-radius-circle: 100%;
122
+ --el-border-radius-base: 6px !important;
123
+ --el-border-radius-small: 2px !important;
124
+ --el-border-radius-round: 20px !important;
125
+ --el-border-radius-circle: 100% !important;
125
126
  --el-line-height-1: 20px;
126
127
  --el-line-height-2: 20px;
127
128
  --el-line-height-3: 20px;
package/dist/tokens.css CHANGED
@@ -1,75 +1,76 @@
1
1
  :root body {
2
- --el-color-primary: #002a8f;
3
- --el-color-primary-rgb: 0, 42, 143;
4
- --el-color-primary-light-1: #1a3f9a;
5
- --el-color-primary-light-2: #3355a5;
6
- --el-color-primary-light-3: #4d6ab1;
7
- --el-color-primary-light-4: #667fbc;
8
- --el-color-primary-light-5: #8094c7;
9
- --el-color-primary-light-6: #99aad2;
10
- --el-color-primary-light-7: #b2bfdd;
11
- --el-color-primary-light-8: #ccd4e9;
12
- --el-color-primary-light-9: #e5eaf4;
13
- --el-color-primary-dark-1: #002681;
14
- --el-color-primary-dark-2: #002272;
15
- --el-color-primary-dark-3: #001d64;
16
- --el-color-primary-dark-4: #001956;
17
- --el-color-success: #2bb268;
18
- --el-color-success-light-1: #40ba77;
19
- --el-color-success-light-2: #55c286;
20
- --el-color-success-light-3: #6bcb95;
21
- --el-color-success-light-4: #80d3a4;
22
- --el-color-success-light-5: #95dbb4;
23
- --el-color-success-light-6: #aae3c3;
24
- --el-color-success-light-7: #bfebd2;
25
- --el-color-success-light-8: #d5f4e1;
26
- --el-color-success-light-9: #eaf9f0;
27
- --el-color-success-dark-1: #229051;
28
- --el-color-success-dark-2: #1b733f;
29
- --el-color-success-dark-3: #14562f;
30
- --el-color-success-dark-4: #0d3a20;
31
- --el-color-warning: #ea9a13;
32
- --el-color-warning-light-1: #eca42b;
33
- --el-color-warning-light-2: #efae42;
34
- --el-color-warning-light-3: #f1b85a;
35
- --el-color-warning-light-4: #f3c171;
36
- --el-color-warning-light-5: #f5cb89;
37
- --el-color-warning-light-6: #f7d5a1;
38
- --el-color-warning-light-7: #f9dfb8;
39
- --el-color-warning-light-8: #fce8d0;
40
- --el-color-warning-light-9: #fef2e7;
41
- --el-color-warning-dark-1: #c47f0e;
42
- --el-color-warning-dark-2: #9d650a;
43
- --el-color-warning-dark-3: #754a07;
44
- --el-color-warning-dark-4: #4e3004;
45
- --el-color-danger: #bb2d3f;
46
- --el-color-danger-light-1: #c34253;
47
- --el-color-danger-light-2: #ca5766;
48
- --el-color-danger-light-3: #d16b78;
49
- --el-color-danger-light-4: #d8808b;
50
- --el-color-danger-light-5: #dd969f;
51
- --el-color-danger-light-6: #e4abb2;
52
- --el-color-danger-light-7: #e8c0c5;
53
- --el-color-danger-light-8: #f0d5d9;
54
- --el-color-danger-light-9: #f7eaec;
55
- --el-color-danger-dark-1: #962433;
56
- --el-color-danger-dark-2: #711b26;
57
- --el-color-danger-dark-3: #4b1219;
58
- --el-color-danger-dark-4: #26090d;
59
- --el-color-error: #bb2d3f;
60
- --el-color-error-light-1: #c34253;
61
- --el-color-error-light-2: #ca5766;
62
- --el-color-error-light-3: #d16b78;
63
- --el-color-error-light-4: #d8808b;
64
- --el-color-error-light-5: #dd969f;
65
- --el-color-error-light-6: #e4abb2;
66
- --el-color-error-light-7: #e8c0c5;
67
- --el-color-error-light-8: #f0d5d9;
68
- --el-color-error-light-9: #f7eaec;
69
- --el-color-error-dark-1: #962433;
70
- --el-color-error-dark-2: #711b26;
71
- --el-color-error-dark-3: #4b1219;
72
- --el-color-error-dark-4: #26090d;
2
+ /* 客户主题契约:防止平台运行时 body 内联主题覆盖。 */
3
+ --el-color-primary: #002a8f !important;
4
+ --el-color-primary-rgb: 0, 42, 143 !important;
5
+ --el-color-primary-light-1: #1a3f9a !important;
6
+ --el-color-primary-light-2: #3355a5 !important;
7
+ --el-color-primary-light-3: #4d6ab1 !important;
8
+ --el-color-primary-light-4: #667fbc !important;
9
+ --el-color-primary-light-5: #8094c7 !important;
10
+ --el-color-primary-light-6: #99aad2 !important;
11
+ --el-color-primary-light-7: #b2bfdd !important;
12
+ --el-color-primary-light-8: #ccd4e9 !important;
13
+ --el-color-primary-light-9: #e5eaf4 !important;
14
+ --el-color-primary-dark-1: #002681 !important;
15
+ --el-color-primary-dark-2: #002272 !important;
16
+ --el-color-primary-dark-3: #001d64 !important;
17
+ --el-color-primary-dark-4: #001956 !important;
18
+ --el-color-success: #2bb268 !important;
19
+ --el-color-success-light-1: #40ba77 !important;
20
+ --el-color-success-light-2: #55c286 !important;
21
+ --el-color-success-light-3: #6bcb95 !important;
22
+ --el-color-success-light-4: #80d3a4 !important;
23
+ --el-color-success-light-5: #95dbb4 !important;
24
+ --el-color-success-light-6: #aae3c3 !important;
25
+ --el-color-success-light-7: #bfebd2 !important;
26
+ --el-color-success-light-8: #d5f4e1 !important;
27
+ --el-color-success-light-9: #eaf9f0 !important;
28
+ --el-color-success-dark-1: #229051 !important;
29
+ --el-color-success-dark-2: #1b733f !important;
30
+ --el-color-success-dark-3: #14562f !important;
31
+ --el-color-success-dark-4: #0d3a20 !important;
32
+ --el-color-warning: #ea9a13 !important;
33
+ --el-color-warning-light-1: #eca42b !important;
34
+ --el-color-warning-light-2: #efae42 !important;
35
+ --el-color-warning-light-3: #f1b85a !important;
36
+ --el-color-warning-light-4: #f3c171 !important;
37
+ --el-color-warning-light-5: #f5cb89 !important;
38
+ --el-color-warning-light-6: #f7d5a1 !important;
39
+ --el-color-warning-light-7: #f9dfb8 !important;
40
+ --el-color-warning-light-8: #fce8d0 !important;
41
+ --el-color-warning-light-9: #fef2e7 !important;
42
+ --el-color-warning-dark-1: #c47f0e !important;
43
+ --el-color-warning-dark-2: #9d650a !important;
44
+ --el-color-warning-dark-3: #754a07 !important;
45
+ --el-color-warning-dark-4: #4e3004 !important;
46
+ --el-color-danger: #bb2d3f !important;
47
+ --el-color-danger-light-1: #c34253 !important;
48
+ --el-color-danger-light-2: #ca5766 !important;
49
+ --el-color-danger-light-3: #d16b78 !important;
50
+ --el-color-danger-light-4: #d8808b !important;
51
+ --el-color-danger-light-5: #dd969f !important;
52
+ --el-color-danger-light-6: #e4abb2 !important;
53
+ --el-color-danger-light-7: #e8c0c5 !important;
54
+ --el-color-danger-light-8: #f0d5d9 !important;
55
+ --el-color-danger-light-9: #f7eaec !important;
56
+ --el-color-danger-dark-1: #962433 !important;
57
+ --el-color-danger-dark-2: #711b26 !important;
58
+ --el-color-danger-dark-3: #4b1219 !important;
59
+ --el-color-danger-dark-4: #26090d !important;
60
+ --el-color-error: #bb2d3f !important;
61
+ --el-color-error-light-1: #c34253 !important;
62
+ --el-color-error-light-2: #ca5766 !important;
63
+ --el-color-error-light-3: #d16b78 !important;
64
+ --el-color-error-light-4: #d8808b !important;
65
+ --el-color-error-light-5: #dd969f !important;
66
+ --el-color-error-light-6: #e4abb2 !important;
67
+ --el-color-error-light-7: #e8c0c5 !important;
68
+ --el-color-error-light-8: #f0d5d9 !important;
69
+ --el-color-error-light-9: #f7eaec !important;
70
+ --el-color-error-dark-1: #962433 !important;
71
+ --el-color-error-dark-2: #711b26 !important;
72
+ --el-color-error-dark-3: #4b1219 !important;
73
+ --el-color-error-dark-4: #26090d !important;
73
74
  --el-color-info: #909399;
74
75
  --el-color-info-light-1: #9b9ea3;
75
76
  --el-color-info-light-2: #a7a9ae;
@@ -118,10 +119,10 @@
118
119
  --el-box-shadow-light: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
119
120
  --el-box-shadow-lighter: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
120
121
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
121
- --el-border-radius-base: 6px;
122
- --el-border-radius-small: 2px;
123
- --el-border-radius-round: 20px;
124
- --el-border-radius-circle: 100%;
122
+ --el-border-radius-base: 6px !important;
123
+ --el-border-radius-small: 2px !important;
124
+ --el-border-radius-round: 20px !important;
125
+ --el-border-radius-circle: 100% !important;
125
126
  --el-line-height-1: 20px;
126
127
  --el-line-height-2: 20px;
127
128
  --el-line-height-3: 20px;
@@ -11,7 +11,7 @@
11
11
  | `element-plus` | **`2.2.6-prod.3`** | 集团 jh- 定制版,搭配 `@jhlc/jh-ui` 使用,DOM 仍为 `.el-input > .el-input__inner` 直挂结构(**EP 2.3.0 起才引入 `.el-input__wrapper`**) |
12
12
  | `@jhlc/jh-ui` | **`3.1.0`** | SCSS 皮肤包,`.com-text` label 包裹、`.has-colon ::after` 冒号注入、`.el-form-item--default { margin-bottom: 24px }` 等强约束 |
13
13
  | `@jhlc/common-core` | `3.1.0` 或 `3.1.0-prod.x` | 基础 util/types,`@jhlc/jh-ui` 间接依赖 |
14
- | `@agile-team/wl-skills-ui` | `^1.9.0` | 已对齐 jh-ui 3.1.0 + EP 2.2.6-prod.3 的 DOM 假设 |
14
+ | `@agile-team/wl-skills-ui` | `^1.9.2` | 已对齐 jh-ui 3.1.0 + EP 2.2.6-prod.3 的 DOM 假设、客户主题锁与 6px 基础圆角 |
15
15
 
16
16
  ## 项目集群当前实测
17
17
 
@@ -35,7 +35,7 @@
35
35
 
36
36
  ## 适配建议
37
37
 
38
- - 集团内项目:**统一锚定 `element-plus@2.2.6-prod.3` + `@jhlc/jh-ui@3.1.0`**,与 wl-skills-ui v1.7.0 三方对齐。
38
+ - 集团内项目:**统一锚定 `element-plus@2.2.6-prod.3` + `@jhlc/jh-ui@3.1.0`**,与 wl-skills-ui v1.9.2 三方对齐。
39
39
  - 升级 `element-plus` 到 2.3+ 前,必须同步升级 `@jhlc/jh-ui` 到对应支持版本,否则 `.com-text` / `.el-input__inner` DOM 与 EP `__wrapper` 体系不兼容。
40
40
  - 新项目接入:见 README 「快速接入」章节,默认会按本表声明 peerDependency 范围。
41
41
 
@@ -315,4 +315,132 @@ registerColumnAutoMaps({
315
315
  }
316
316
  });
317
317
 
318
- export { AUDIT_STATUS_MAP, ENABLE_STATUS_MAP, RATING_LEVEL_COLORS, VERIFY_STATUS_MAP, clearColumnAutoMap, defineColumns, getColumnAutoMap, registerColumnAutoMap, registerColumnAutoMaps, registerDictColorMap, registerDictColorMaps, renderAuditStatus, renderBadge, renderClassifyTag, renderCountBadge, renderDangerText, renderDictClassifyTag, renderEnableStatus, renderOps, renderRatingLevel, renderTagNode, renderTagSlot, renderVerifyStatus, setDictResolver };
318
+ // runtime/theme-lock.ts
319
+ var BRAND_THEME_TOKENS = Object.freeze({
320
+ "--el-color-primary": "#002a8f",
321
+ "--el-color-primary-rgb": "0, 42, 143",
322
+ "--el-color-primary-light-1": "#1a3f9a",
323
+ "--el-color-primary-light-2": "#3355a5",
324
+ "--el-color-primary-light-3": "#4d6ab1",
325
+ "--el-color-primary-light-4": "#667fbc",
326
+ "--el-color-primary-light-5": "#8094c7",
327
+ "--el-color-primary-light-6": "#99aad2",
328
+ "--el-color-primary-light-7": "#b2bfdd",
329
+ "--el-color-primary-light-8": "#ccd4e9",
330
+ "--el-color-primary-light-9": "#e5eaf4",
331
+ "--el-color-primary-dark-1": "#002681",
332
+ "--el-color-primary-dark-2": "#002272",
333
+ "--el-color-primary-dark-3": "#001d64",
334
+ "--el-color-primary-dark-4": "#001956",
335
+ "--el-color-success": "#2bb268",
336
+ "--el-color-success-light-1": "#40ba77",
337
+ "--el-color-success-light-2": "#55c286",
338
+ "--el-color-success-light-3": "#6bcb95",
339
+ "--el-color-success-light-4": "#80d3a4",
340
+ "--el-color-success-light-5": "#95dbb4",
341
+ "--el-color-success-light-6": "#aae3c3",
342
+ "--el-color-success-light-7": "#bfebd2",
343
+ "--el-color-success-light-8": "#d5f4e1",
344
+ "--el-color-success-light-9": "#eaf9f0",
345
+ "--el-color-success-dark-1": "#229051",
346
+ "--el-color-success-dark-2": "#1b733f",
347
+ "--el-color-success-dark-3": "#14562f",
348
+ "--el-color-success-dark-4": "#0d3a20",
349
+ "--el-color-warning": "#ea9a13",
350
+ "--el-color-warning-light-1": "#eca42b",
351
+ "--el-color-warning-light-2": "#efae42",
352
+ "--el-color-warning-light-3": "#f1b85a",
353
+ "--el-color-warning-light-4": "#f3c171",
354
+ "--el-color-warning-light-5": "#f5cb89",
355
+ "--el-color-warning-light-6": "#f7d5a1",
356
+ "--el-color-warning-light-7": "#f9dfb8",
357
+ "--el-color-warning-light-8": "#fce8d0",
358
+ "--el-color-warning-light-9": "#fef2e7",
359
+ "--el-color-warning-dark-1": "#c47f0e",
360
+ "--el-color-warning-dark-2": "#9d650a",
361
+ "--el-color-warning-dark-3": "#754a07",
362
+ "--el-color-warning-dark-4": "#4e3004",
363
+ "--el-color-danger": "#bb2d3f",
364
+ "--el-color-danger-light-1": "#c34253",
365
+ "--el-color-danger-light-2": "#ca5766",
366
+ "--el-color-danger-light-3": "#d16b78",
367
+ "--el-color-danger-light-4": "#d8808b",
368
+ "--el-color-danger-light-5": "#dd969f",
369
+ "--el-color-danger-light-6": "#e4abb2",
370
+ "--el-color-danger-light-7": "#e8c0c5",
371
+ "--el-color-danger-light-8": "#f0d5d9",
372
+ "--el-color-danger-light-9": "#f7eaec",
373
+ "--el-color-danger-dark-1": "#962433",
374
+ "--el-color-danger-dark-2": "#711b26",
375
+ "--el-color-danger-dark-3": "#4b1219",
376
+ "--el-color-danger-dark-4": "#26090d",
377
+ "--el-color-error": "#bb2d3f",
378
+ "--el-color-error-light-1": "#c34253",
379
+ "--el-color-error-light-2": "#ca5766",
380
+ "--el-color-error-light-3": "#d16b78",
381
+ "--el-color-error-light-4": "#d8808b",
382
+ "--el-color-error-light-5": "#dd969f",
383
+ "--el-color-error-light-6": "#e4abb2",
384
+ "--el-color-error-light-7": "#e8c0c5",
385
+ "--el-color-error-light-8": "#f0d5d9",
386
+ "--el-color-error-light-9": "#f7eaec",
387
+ "--el-color-error-dark-1": "#962433",
388
+ "--el-color-error-dark-2": "#711b26",
389
+ "--el-color-error-dark-3": "#4b1219",
390
+ "--el-color-error-dark-4": "#26090d",
391
+ "--el-border-radius-base": "6px",
392
+ "--el-border-radius-small": "2px",
393
+ "--el-border-radius-round": "20px",
394
+ "--el-border-radius-circle": "100%"
395
+ });
396
+ var observer;
397
+ var waitingForBody = false;
398
+ function enforceOn(target) {
399
+ if (!target) return;
400
+ for (const [name, value] of Object.entries(BRAND_THEME_TOKENS)) {
401
+ if (target.style.getPropertyValue(name).trim().toLowerCase() !== value || target.style.getPropertyPriority(name) !== "important") {
402
+ target.style.setProperty(name, value, "important");
403
+ }
404
+ }
405
+ }
406
+ function bindObserver() {
407
+ if (typeof document === "undefined") return;
408
+ enforceOn(document.documentElement);
409
+ enforceOn(document.body);
410
+ if (typeof MutationObserver === "undefined") return;
411
+ observer ?? (observer = new MutationObserver((mutations) => {
412
+ const bodyChanged = mutations.some((mutation) => mutation.type === "childList");
413
+ enforceOn(document.documentElement);
414
+ enforceOn(document.body);
415
+ if (bodyChanged) bindObserver();
416
+ }));
417
+ observer.disconnect();
418
+ observer.observe(document.documentElement, {
419
+ attributes: true,
420
+ attributeFilter: ["style"],
421
+ childList: true
422
+ });
423
+ if (document.body) {
424
+ observer.observe(document.body, {
425
+ attributes: true,
426
+ attributeFilter: ["style"]
427
+ });
428
+ }
429
+ }
430
+ function installBrandThemeLock() {
431
+ if (typeof document === "undefined") return;
432
+ bindObserver();
433
+ if (!document.body && !waitingForBody) {
434
+ waitingForBody = true;
435
+ document.addEventListener(
436
+ "DOMContentLoaded",
437
+ () => {
438
+ waitingForBody = false;
439
+ bindObserver();
440
+ },
441
+ { once: true }
442
+ );
443
+ }
444
+ }
445
+
446
+ export { AUDIT_STATUS_MAP, BRAND_THEME_TOKENS, ENABLE_STATUS_MAP, RATING_LEVEL_COLORS, VERIFY_STATUS_MAP, clearColumnAutoMap, defineColumns, getColumnAutoMap, installBrandThemeLock, registerColumnAutoMap, registerColumnAutoMaps, registerDictColorMap, registerDictColorMaps, renderAuditStatus, renderBadge, renderClassifyTag, renderCountBadge, renderDangerText, renderDictClassifyTag, renderEnableStatus, renderOps, renderRatingLevel, renderTagNode, renderTagSlot, renderVerifyStatus, setDictResolver };
@@ -1,5 +1,5 @@
1
- import { renderTagNode, renderClassifyTag, registerColumnAutoMaps, renderRatingLevel, renderBadge } from './chunk-FMVZ54BY.js';
2
- export { registerDictColorMap, registerDictColorMaps, renderDictClassifyTag, setDictResolver } from './chunk-FMVZ54BY.js';
1
+ import { renderTagNode, renderClassifyTag, installBrandThemeLock, registerColumnAutoMaps, renderRatingLevel, renderBadge } from './chunk-KPCUDXLS.js';
2
+ export { registerDictColorMap, registerDictColorMaps, renderDictClassifyTag, setDictResolver } from './chunk-KPCUDXLS.js';
3
3
 
4
4
  // runtime/presets/common.ts
5
5
  var RISK_LEVEL_MAP = {
@@ -94,6 +94,7 @@ var DRILL_TYPE_COLOR_MAP = {
94
94
  "2": "warning"
95
95
  };
96
96
  function installCommonPreset() {
97
+ installBrandThemeLock();
97
98
  registerColumnAutoMaps({
98
99
  riskLevel: {
99
100
  width: 90,
package/es/index.d.ts CHANGED
@@ -71,4 +71,93 @@ declare function createPreset(config: PresetConfig): {
71
71
  /** 获取已安装预设名称列表(调试用) */
72
72
  declare function getInstalledPresets(): ReadonlySet<string>;
73
73
 
74
- export { ColumnLike, type PresetConfig, clearColumnAutoMap, createPreset, defineColumns, getColumnAutoMap, getInstalledPresets, installPreset, registerColumnAutoMap, registerColumnAutoMaps };
74
+ /**
75
+ * 客户品牌主题锁。
76
+ *
77
+ * 平台会在登录后的路由守卫中把后端主题写入 document.body.style,普通样式表
78
+ * 即使提高选择器特异性也无法稳定压过内联变量。本模块把客户已确认的品牌色、
79
+ * 功能色和圆角以 inline !important 写回,并监听后续改写,确保包值最终生效。
80
+ */
81
+ declare const BRAND_THEME_TOKENS: Readonly<{
82
+ readonly "--el-color-primary": "#002a8f";
83
+ readonly "--el-color-primary-rgb": "0, 42, 143";
84
+ readonly "--el-color-primary-light-1": "#1a3f9a";
85
+ readonly "--el-color-primary-light-2": "#3355a5";
86
+ readonly "--el-color-primary-light-3": "#4d6ab1";
87
+ readonly "--el-color-primary-light-4": "#667fbc";
88
+ readonly "--el-color-primary-light-5": "#8094c7";
89
+ readonly "--el-color-primary-light-6": "#99aad2";
90
+ readonly "--el-color-primary-light-7": "#b2bfdd";
91
+ readonly "--el-color-primary-light-8": "#ccd4e9";
92
+ readonly "--el-color-primary-light-9": "#e5eaf4";
93
+ readonly "--el-color-primary-dark-1": "#002681";
94
+ readonly "--el-color-primary-dark-2": "#002272";
95
+ readonly "--el-color-primary-dark-3": "#001d64";
96
+ readonly "--el-color-primary-dark-4": "#001956";
97
+ readonly "--el-color-success": "#2bb268";
98
+ readonly "--el-color-success-light-1": "#40ba77";
99
+ readonly "--el-color-success-light-2": "#55c286";
100
+ readonly "--el-color-success-light-3": "#6bcb95";
101
+ readonly "--el-color-success-light-4": "#80d3a4";
102
+ readonly "--el-color-success-light-5": "#95dbb4";
103
+ readonly "--el-color-success-light-6": "#aae3c3";
104
+ readonly "--el-color-success-light-7": "#bfebd2";
105
+ readonly "--el-color-success-light-8": "#d5f4e1";
106
+ readonly "--el-color-success-light-9": "#eaf9f0";
107
+ readonly "--el-color-success-dark-1": "#229051";
108
+ readonly "--el-color-success-dark-2": "#1b733f";
109
+ readonly "--el-color-success-dark-3": "#14562f";
110
+ readonly "--el-color-success-dark-4": "#0d3a20";
111
+ readonly "--el-color-warning": "#ea9a13";
112
+ readonly "--el-color-warning-light-1": "#eca42b";
113
+ readonly "--el-color-warning-light-2": "#efae42";
114
+ readonly "--el-color-warning-light-3": "#f1b85a";
115
+ readonly "--el-color-warning-light-4": "#f3c171";
116
+ readonly "--el-color-warning-light-5": "#f5cb89";
117
+ readonly "--el-color-warning-light-6": "#f7d5a1";
118
+ readonly "--el-color-warning-light-7": "#f9dfb8";
119
+ readonly "--el-color-warning-light-8": "#fce8d0";
120
+ readonly "--el-color-warning-light-9": "#fef2e7";
121
+ readonly "--el-color-warning-dark-1": "#c47f0e";
122
+ readonly "--el-color-warning-dark-2": "#9d650a";
123
+ readonly "--el-color-warning-dark-3": "#754a07";
124
+ readonly "--el-color-warning-dark-4": "#4e3004";
125
+ readonly "--el-color-danger": "#bb2d3f";
126
+ readonly "--el-color-danger-light-1": "#c34253";
127
+ readonly "--el-color-danger-light-2": "#ca5766";
128
+ readonly "--el-color-danger-light-3": "#d16b78";
129
+ readonly "--el-color-danger-light-4": "#d8808b";
130
+ readonly "--el-color-danger-light-5": "#dd969f";
131
+ readonly "--el-color-danger-light-6": "#e4abb2";
132
+ readonly "--el-color-danger-light-7": "#e8c0c5";
133
+ readonly "--el-color-danger-light-8": "#f0d5d9";
134
+ readonly "--el-color-danger-light-9": "#f7eaec";
135
+ readonly "--el-color-danger-dark-1": "#962433";
136
+ readonly "--el-color-danger-dark-2": "#711b26";
137
+ readonly "--el-color-danger-dark-3": "#4b1219";
138
+ readonly "--el-color-danger-dark-4": "#26090d";
139
+ readonly "--el-color-error": "#bb2d3f";
140
+ readonly "--el-color-error-light-1": "#c34253";
141
+ readonly "--el-color-error-light-2": "#ca5766";
142
+ readonly "--el-color-error-light-3": "#d16b78";
143
+ readonly "--el-color-error-light-4": "#d8808b";
144
+ readonly "--el-color-error-light-5": "#dd969f";
145
+ readonly "--el-color-error-light-6": "#e4abb2";
146
+ readonly "--el-color-error-light-7": "#e8c0c5";
147
+ readonly "--el-color-error-light-8": "#f0d5d9";
148
+ readonly "--el-color-error-light-9": "#f7eaec";
149
+ readonly "--el-color-error-dark-1": "#962433";
150
+ readonly "--el-color-error-dark-2": "#711b26";
151
+ readonly "--el-color-error-dark-3": "#4b1219";
152
+ readonly "--el-color-error-dark-4": "#26090d";
153
+ readonly "--el-border-radius-base": "6px";
154
+ readonly "--el-border-radius-small": "2px";
155
+ readonly "--el-border-radius-round": "20px";
156
+ readonly "--el-border-radius-circle": "100%";
157
+ }>;
158
+ /**
159
+ * 安装客户品牌主题锁。可重复调用;SSR/构建阶段自动无操作。
160
+ */
161
+ declare function installBrandThemeLock(): void;
162
+
163
+ export { BRAND_THEME_TOKENS, ColumnLike, type PresetConfig, clearColumnAutoMap, createPreset, defineColumns, getColumnAutoMap, getInstalledPresets, installBrandThemeLock, installPreset, registerColumnAutoMap, registerColumnAutoMaps };
package/es/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import { registerColumnAutoMaps } from './chunk-FMVZ54BY.js';
2
- export { AUDIT_STATUS_MAP, ENABLE_STATUS_MAP, RATING_LEVEL_COLORS, VERIFY_STATUS_MAP, clearColumnAutoMap, defineColumns, getColumnAutoMap, registerColumnAutoMap, registerColumnAutoMaps, registerDictColorMap, registerDictColorMaps, renderAuditStatus, renderBadge, renderClassifyTag, renderCountBadge, renderDangerText, renderDictClassifyTag, renderEnableStatus, renderOps, renderRatingLevel, renderTagNode, renderTagSlot, renderVerifyStatus, setDictResolver } from './chunk-FMVZ54BY.js';
1
+ import { registerColumnAutoMaps } from './chunk-KPCUDXLS.js';
2
+ export { AUDIT_STATUS_MAP, BRAND_THEME_TOKENS, ENABLE_STATUS_MAP, RATING_LEVEL_COLORS, VERIFY_STATUS_MAP, clearColumnAutoMap, defineColumns, getColumnAutoMap, installBrandThemeLock, registerColumnAutoMap, registerColumnAutoMaps, registerDictColorMap, registerDictColorMaps, renderAuditStatus, renderBadge, renderClassifyTag, renderCountBadge, renderDangerText, renderDictClassifyTag, renderEnableStatus, renderOps, renderRatingLevel, renderTagNode, renderTagSlot, renderVerifyStatus, setDictResolver } from './chunk-KPCUDXLS.js';
3
3
 
4
4
  // runtime/presets/registry.ts
5
5
  var _installedPresets = /* @__PURE__ */ new Set();
@@ -1,4 +1,4 @@
1
- import { renderTagNode, registerDictColorMaps, registerColumnAutoMaps } from '../chunk-FMVZ54BY.js';
1
+ import { renderTagNode, installBrandThemeLock, registerDictColorMaps, registerColumnAutoMaps } from '../chunk-KPCUDXLS.js';
2
2
 
3
3
  // runtime/presets/security.ts
4
4
  var VIOLATION_STATUS_MAP = {
@@ -69,6 +69,7 @@ var SECURITY_DICT_COLORS = {
69
69
  areaRuleType: { "1": "success", "2": "warning", "3": "info" }
70
70
  };
71
71
  function installSecurityPreset() {
72
+ installBrandThemeLock();
72
73
  registerDictColorMaps(SECURITY_DICT_COLORS);
73
74
  registerColumnAutoMaps({
74
75
  violationStatus: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agile-team/wl-skills-ui",
3
- "version": "1.9.1",
3
+ "version": "1.9.2",
4
4
  "description": "企业级 UI 风格对齐框架 — Vue + Element Plus 项目通用化妆/原生双模式(tokens / element / vendors / layouts / runtime / scanner / fixer / skills)",
5
5
  "type": "module",
6
6
  "main": "./es/index.js",
@@ -17,6 +17,8 @@
17
17
  | active / 点击 | `--el-color-primary-dark-1` | `#002681` |
18
18
  | disabled | `--el-color-primary-light-7` | `#B2BFDD` |
19
19
 
20
+ 平台动态主题不得改写品牌按钮体系。包内 L0 token 使用 `!important`,runtime 主题锁负责恢复后续写入 `document.body.style` 的旧主色及功能色;业务页面不要再用局部选择器与主题锁对冲。
21
+
20
22
  | 操作语义 | type | plain | 说明 |
21
23
  |----------|-------------|--------|----------------|
22
24
  | 新增/添加 | `primary` | false | 蓝色填充 |
@@ -1,6 +1,19 @@
1
1
  // Element Plus 主按钮 — 严格对齐《烟台华新数智化信息化改造项目 UI 规范 v1》
2
2
  // 常规 #002A8F / 悬停 #1A3F9A / 点击 #002681 / 禁用 #B2BFDD。
3
- // 使用 html body 提升 token 覆盖特异性;填充按钮同时以 !important 抵御 jh-ui/业务旧皮肤硬编码。
3
+ // 使用 html body 提升组件覆盖特异性;品牌 token L0 + runtime 双层锁定,
4
+ // 填充按钮同时以 !important 抵御 jh-ui/业务旧皮肤硬编码。
5
+
6
+ html body .el-button:not(.is-round):not(.is-circle) {
7
+ border-radius: var(--el-border-radius-base, 6px) !important;
8
+ }
9
+
10
+ html body .el-button.is-round {
11
+ border-radius: var(--el-border-radius-round, 20px) !important;
12
+ }
13
+
14
+ html body .el-button.is-circle {
15
+ border-radius: var(--el-border-radius-circle, 100%) !important;
16
+ }
4
17
 
5
18
  html body .el-button--primary {
6
19
  --el-button-bg-color: var(--el-color-primary);
@@ -19,16 +32,19 @@ html body
19
32
  .el-button.el-button--primary:not(.is-link):not(.is-text):not(.is-plain):not(.is-disabled) {
20
33
  background-color: var(--el-color-primary) !important;
21
34
  border-color: var(--el-color-primary) !important;
35
+ box-shadow: 0 1px 2px rgba(var(--el-color-primary-rgb), 0.16);
22
36
 
23
37
  &:hover,
24
38
  &:focus {
25
39
  background-color: var(--el-color-primary-light-1) !important;
26
40
  border-color: var(--el-color-primary-light-1) !important;
41
+ box-shadow: 0 2px 6px rgba(var(--el-color-primary-rgb), 0.2);
27
42
  }
28
43
 
29
44
  &:active {
30
45
  background-color: var(--el-color-primary-dark-1) !important;
31
46
  border-color: var(--el-color-primary-dark-1) !important;
47
+ box-shadow: 0 1px 2px rgba(var(--el-color-primary-rgb), 0.14);
32
48
  }
33
49
  }
34
50
 
@@ -36,4 +52,5 @@ html body
36
52
  .el-button.el-button--primary.is-disabled:not(.is-link):not(.is-text):not(.is-plain) {
37
53
  background-color: var(--el-color-primary-light-7) !important;
38
54
  border-color: var(--el-color-primary-light-7) !important;
55
+ box-shadow: none !important;
39
56
  }
@@ -13,26 +13,26 @@
13
13
  @forward '../vendors/index';
14
14
 
15
15
  :root body {
16
- --el-color-primary: #002a8f;
17
- --el-color-primary-rgb: 0, 42, 143;
18
- --el-color-primary-light-1: #1a3f9a;
19
- --el-color-primary-light-2: #3355a5;
20
- --el-color-primary-light-3: #4d6ab1;
21
- --el-color-primary-light-4: #667fbc;
22
- --el-color-primary-light-5: #8094c7;
23
- --el-color-primary-light-6: #99aad2;
24
- --el-color-primary-light-7: #b2bfdd;
25
- --el-color-primary-light-8: #ccd4e9;
26
- --el-color-primary-light-9: #e5eaf4;
27
- --el-color-primary-dark-1: #002681;
28
- --el-color-primary-dark-2: #002272;
29
- --el-color-primary-dark-3: #001d64;
30
- --el-color-primary-dark-4: #001956;
16
+ --el-color-primary: #002a8f !important;
17
+ --el-color-primary-rgb: 0, 42, 143 !important;
18
+ --el-color-primary-light-1: #1a3f9a !important;
19
+ --el-color-primary-light-2: #3355a5 !important;
20
+ --el-color-primary-light-3: #4d6ab1 !important;
21
+ --el-color-primary-light-4: #667fbc !important;
22
+ --el-color-primary-light-5: #8094c7 !important;
23
+ --el-color-primary-light-6: #99aad2 !important;
24
+ --el-color-primary-light-7: #b2bfdd !important;
25
+ --el-color-primary-light-8: #ccd4e9 !important;
26
+ --el-color-primary-light-9: #e5eaf4 !important;
27
+ --el-color-primary-dark-1: #002681 !important;
28
+ --el-color-primary-dark-2: #002272 !important;
29
+ --el-color-primary-dark-3: #001d64 !important;
30
+ --el-color-primary-dark-4: #001956 !important;
31
31
 
32
- --el-color-danger: #bb2d3f;
33
- --el-color-danger-light-3: #d16b78;
34
- --el-color-danger-light-5: #dd969f;
35
- --el-color-danger-light-7: #e8c0c5;
36
- --el-color-danger-light-8: #f0d5d9;
37
- --el-color-danger-light-9: #f7eaec;
32
+ --el-color-danger: #bb2d3f !important;
33
+ --el-color-danger-light-3: #d16b78 !important;
34
+ --el-color-danger-light-5: #dd969f !important;
35
+ --el-color-danger-light-7: #e8c0c5 !important;
36
+ --el-color-danger-light-8: #f0d5d9 !important;
37
+ --el-color-danger-light-9: #f7eaec !important;
38
38
  }
@@ -82,80 +82,80 @@ $wk-sidebar-width: var(--el-sidebar-width) !default;
82
82
  // 与 design/tokens/base.css 保持同步。
83
83
  // 作用:让任何 @forward tokens/index 的 preset 自动将 CSS 变量打入构建产物,
84
84
  // 不再依赖 index.html <link> 或 JS import tokens.css。
85
- // 选择器 :root body 特异性 (0,1,1) > Element Plus 的 :root (0,1,0),
86
- // 保证无论 CSS 加载顺序如何,我们的变量始终优先。
85
+ // 选择器特异性负责压过普通样式表,!important 负责压过平台运行时写入 body
86
+ // 的普通内联变量;runtime/theme-lock.ts 再兜底处理后续动态改写。
87
87
  :root body {
88
- --el-color-primary: #002a8f;
89
- --el-color-primary-rgb: 0, 42, 143;
90
- --el-color-primary-light-1: #1a3f9a;
91
- --el-color-primary-light-2: #3355a5;
92
- --el-color-primary-light-3: #4d6ab1;
93
- --el-color-primary-light-4: #667fbc;
94
- --el-color-primary-light-5: #8094c7;
95
- --el-color-primary-light-6: #99aad2;
96
- --el-color-primary-light-7: #b2bfdd;
97
- --el-color-primary-light-8: #ccd4e9;
98
- --el-color-primary-light-9: #e5eaf4;
99
- --el-color-primary-dark-1: #002681;
100
- --el-color-primary-dark-2: #002272;
101
- --el-color-primary-dark-3: #001d64;
102
- --el-color-primary-dark-4: #001956;
103
- --el-color-success: #2bb268;
104
- --el-color-success-light-1: #40ba77;
105
- --el-color-success-light-2: #55c286;
106
- --el-color-success-light-3: #6bcb95;
107
- --el-color-success-light-4: #80d3a4;
108
- --el-color-success-light-5: #95dbb4;
109
- --el-color-success-light-6: #aae3c3;
110
- --el-color-success-light-7: #bfebd2;
111
- --el-color-success-light-8: #d5f4e1;
112
- --el-color-success-light-9: #eaf9f0;
113
- --el-color-success-dark-1: #229051;
114
- --el-color-success-dark-2: #1b733f;
115
- --el-color-success-dark-3: #14562f;
116
- --el-color-success-dark-4: #0d3a20;
117
- --el-color-warning: #ea9a13;
118
- --el-color-warning-light-1: #eca42b;
119
- --el-color-warning-light-2: #efae42;
120
- --el-color-warning-light-3: #f1b85a;
121
- --el-color-warning-light-4: #f3c171;
122
- --el-color-warning-light-5: #f5cb89;
123
- --el-color-warning-light-6: #f7d5a1;
124
- --el-color-warning-light-7: #f9dfb8;
125
- --el-color-warning-light-8: #fce8d0;
126
- --el-color-warning-light-9: #fef2e7;
127
- --el-color-warning-dark-1: #c47f0e;
128
- --el-color-warning-dark-2: #9d650a;
129
- --el-color-warning-dark-3: #754a07;
130
- --el-color-warning-dark-4: #4e3004;
131
- --el-color-danger: #bb2d3f;
132
- --el-color-danger-light-1: #c34253;
133
- --el-color-danger-light-2: #ca5766;
134
- --el-color-danger-light-3: #d16b78;
135
- --el-color-danger-light-4: #d8808b;
136
- --el-color-danger-light-5: #dd969f;
137
- --el-color-danger-light-6: #e4abb2;
138
- --el-color-danger-light-7: #e8c0c5;
139
- --el-color-danger-light-8: #f0d5d9;
140
- --el-color-danger-light-9: #f7eaec;
141
- --el-color-danger-dark-1: #962433;
142
- --el-color-danger-dark-2: #711b26;
143
- --el-color-danger-dark-3: #4b1219;
144
- --el-color-danger-dark-4: #26090d;
145
- --el-color-error: #bb2d3f;
146
- --el-color-error-light-1: #c34253;
147
- --el-color-error-light-2: #ca5766;
148
- --el-color-error-light-3: #d16b78;
149
- --el-color-error-light-4: #d8808b;
150
- --el-color-error-light-5: #dd969f;
151
- --el-color-error-light-6: #e4abb2;
152
- --el-color-error-light-7: #e8c0c5;
153
- --el-color-error-light-8: #f0d5d9;
154
- --el-color-error-light-9: #f7eaec;
155
- --el-color-error-dark-1: #962433;
156
- --el-color-error-dark-2: #711b26;
157
- --el-color-error-dark-3: #4b1219;
158
- --el-color-error-dark-4: #26090d;
88
+ --el-color-primary: #002a8f !important;
89
+ --el-color-primary-rgb: 0, 42, 143 !important;
90
+ --el-color-primary-light-1: #1a3f9a !important;
91
+ --el-color-primary-light-2: #3355a5 !important;
92
+ --el-color-primary-light-3: #4d6ab1 !important;
93
+ --el-color-primary-light-4: #667fbc !important;
94
+ --el-color-primary-light-5: #8094c7 !important;
95
+ --el-color-primary-light-6: #99aad2 !important;
96
+ --el-color-primary-light-7: #b2bfdd !important;
97
+ --el-color-primary-light-8: #ccd4e9 !important;
98
+ --el-color-primary-light-9: #e5eaf4 !important;
99
+ --el-color-primary-dark-1: #002681 !important;
100
+ --el-color-primary-dark-2: #002272 !important;
101
+ --el-color-primary-dark-3: #001d64 !important;
102
+ --el-color-primary-dark-4: #001956 !important;
103
+ --el-color-success: #2bb268 !important;
104
+ --el-color-success-light-1: #40ba77 !important;
105
+ --el-color-success-light-2: #55c286 !important;
106
+ --el-color-success-light-3: #6bcb95 !important;
107
+ --el-color-success-light-4: #80d3a4 !important;
108
+ --el-color-success-light-5: #95dbb4 !important;
109
+ --el-color-success-light-6: #aae3c3 !important;
110
+ --el-color-success-light-7: #bfebd2 !important;
111
+ --el-color-success-light-8: #d5f4e1 !important;
112
+ --el-color-success-light-9: #eaf9f0 !important;
113
+ --el-color-success-dark-1: #229051 !important;
114
+ --el-color-success-dark-2: #1b733f !important;
115
+ --el-color-success-dark-3: #14562f !important;
116
+ --el-color-success-dark-4: #0d3a20 !important;
117
+ --el-color-warning: #ea9a13 !important;
118
+ --el-color-warning-light-1: #eca42b !important;
119
+ --el-color-warning-light-2: #efae42 !important;
120
+ --el-color-warning-light-3: #f1b85a !important;
121
+ --el-color-warning-light-4: #f3c171 !important;
122
+ --el-color-warning-light-5: #f5cb89 !important;
123
+ --el-color-warning-light-6: #f7d5a1 !important;
124
+ --el-color-warning-light-7: #f9dfb8 !important;
125
+ --el-color-warning-light-8: #fce8d0 !important;
126
+ --el-color-warning-light-9: #fef2e7 !important;
127
+ --el-color-warning-dark-1: #c47f0e !important;
128
+ --el-color-warning-dark-2: #9d650a !important;
129
+ --el-color-warning-dark-3: #754a07 !important;
130
+ --el-color-warning-dark-4: #4e3004 !important;
131
+ --el-color-danger: #bb2d3f !important;
132
+ --el-color-danger-light-1: #c34253 !important;
133
+ --el-color-danger-light-2: #ca5766 !important;
134
+ --el-color-danger-light-3: #d16b78 !important;
135
+ --el-color-danger-light-4: #d8808b !important;
136
+ --el-color-danger-light-5: #dd969f !important;
137
+ --el-color-danger-light-6: #e4abb2 !important;
138
+ --el-color-danger-light-7: #e8c0c5 !important;
139
+ --el-color-danger-light-8: #f0d5d9 !important;
140
+ --el-color-danger-light-9: #f7eaec !important;
141
+ --el-color-danger-dark-1: #962433 !important;
142
+ --el-color-danger-dark-2: #711b26 !important;
143
+ --el-color-danger-dark-3: #4b1219 !important;
144
+ --el-color-danger-dark-4: #26090d !important;
145
+ --el-color-error: #bb2d3f !important;
146
+ --el-color-error-light-1: #c34253 !important;
147
+ --el-color-error-light-2: #ca5766 !important;
148
+ --el-color-error-light-3: #d16b78 !important;
149
+ --el-color-error-light-4: #d8808b !important;
150
+ --el-color-error-light-5: #dd969f !important;
151
+ --el-color-error-light-6: #e4abb2 !important;
152
+ --el-color-error-light-7: #e8c0c5 !important;
153
+ --el-color-error-light-8: #f0d5d9 !important;
154
+ --el-color-error-light-9: #f7eaec !important;
155
+ --el-color-error-dark-1: #962433 !important;
156
+ --el-color-error-dark-2: #711b26 !important;
157
+ --el-color-error-dark-3: #4b1219 !important;
158
+ --el-color-error-dark-4: #26090d !important;
159
159
  --el-color-info: #909399;
160
160
  --el-color-info-light-1: #9b9ea3;
161
161
  --el-color-info-light-2: #a7a9ae;
@@ -204,10 +204,10 @@ $wk-sidebar-width: var(--el-sidebar-width) !default;
204
204
  --el-box-shadow-light: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
205
205
  --el-box-shadow-lighter: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
206
206
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
207
- --el-border-radius-base: 6px;
208
- --el-border-radius-small: 2px;
209
- --el-border-radius-round: 20px;
210
- --el-border-radius-circle: 100%;
207
+ --el-border-radius-base: 6px !important;
208
+ --el-border-radius-small: 2px !important;
209
+ --el-border-radius-round: 20px !important;
210
+ --el-border-radius-circle: 100% !important;
211
211
  --el-line-height-1: 20px;
212
212
  --el-line-height-2: 20px;
213
213
  --el-line-height-3: 20px;
@@ -103,7 +103,7 @@
103
103
  &:hover {
104
104
  background-color: var(--el-color-primary-light-1, #1a3f9a) !important;
105
105
  border-color: var(--el-color-primary-light-1, #1a3f9a) !important;
106
- box-shadow: 0 2px 8px rgba(var(--el-color-primary-rgb), 0.25);
106
+ box-shadow: 0 2px 6px rgba(var(--el-color-primary-rgb), 0.18);
107
107
  }
108
108
  &:active { opacity: 0.85; }
109
109
  }
@@ -157,8 +157,12 @@
157
157
  }
158
158
 
159
159
  // 兜底:覆盖 EP 的 .el-button + .el-button { margin-left: 8px } 和 jh-ui 规则
160
- .el-button + .el-button { margin-left: 0 !important; }
161
- & > * { margin: 0 !important; }
160
+ .el-button + .el-button {
161
+ margin-left: 0 !important;
162
+ }
163
+ & > * {
164
+ margin: 0 !important;
165
+ }
162
166
 
163
167
  // 统一按钮高度、圆角、字号
164
168
  .el-button {
@@ -168,51 +172,60 @@
168
172
  height: 24px !important;
169
173
  line-height: 1 !important;
170
174
  padding: 0 8px !important;
171
- margin: 0 !important; // 覆盖 jh-ui 的 margin-right:8px
175
+ margin: 0 !important; // 覆盖 jh-ui 的 margin-right:8px
172
176
  letter-spacing: 0.01em;
173
177
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
174
178
 
175
179
  // 图标 + 文字间距
176
180
  .el-icon + span,
177
- span + .el-icon { margin-left: 4px; }
181
+ span + .el-icon {
182
+ margin-left: 4px;
183
+ }
178
184
 
179
185
  // ── 主操作:填充蓝(新增/新建/申请)─────────────────────────────────
180
186
  &.el-button--primary {
181
187
  background-color: var(--el-color-primary, #002a8f) !important;
182
- border-color: var(--el-color-primary, #002a8f) !important;
188
+ border-color: var(--el-color-primary, #002a8f) !important;
183
189
  color: #ffffff !important;
184
190
 
185
191
  &:hover {
186
192
  background-color: var(--el-color-primary-light-1, #1a3f9a) !important;
187
- border-color: var(--el-color-primary-light-1, #1a3f9a) !important;
188
- box-shadow: 0 2px 8px rgba(var(--el-color-primary-rgb), 0.28);
193
+ border-color: var(--el-color-primary-light-1, #1a3f9a) !important;
194
+ box-shadow: 0 2px 6px rgba(var(--el-color-primary-rgb), 0.18);
195
+ }
196
+ &:active {
197
+ opacity: 0.85;
189
198
  }
190
- &:active { opacity: 0.85; }
191
199
  }
192
200
 
193
201
  // ── 危险操作:填充红(删除/作废/驳回)───────────────────────────────
194
202
  &.el-button--danger {
195
- background-color: var(--el-color-danger, #f5222d) !important;
196
- border-color: var(--el-color-danger, #f5222d) !important;
203
+ background-color: var(--el-color-danger, #bb2d3f) !important;
204
+ border-color: var(--el-color-danger, #bb2d3f) !important;
197
205
  color: #ffffff !important;
206
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
198
207
 
199
208
  &:hover {
200
- background-color: var(--el-color-danger-light-3, #f56c6c) !important;
201
- border-color: var(--el-color-danger-light-3, #f56c6c) !important;
202
- box-shadow: 0 2px 8px rgba(187, 45, 63, 0.25);
209
+ background-color: var(--el-color-danger-light-3, #d16b78) !important;
210
+ border-color: var(--el-color-danger-light-3, #d16b78) !important;
211
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
212
+ }
213
+ &:active {
214
+ opacity: 0.85;
203
215
  }
204
- &:active { opacity: 0.85; }
205
216
  }
206
217
 
207
218
  // ── 警告操作:填充橙(提醒/预警相关)───────────────────────────────
208
219
  &.el-button--warning {
209
- background-color: var(--el-color-warning, #faad14) !important;
210
- border-color: var(--el-color-warning, #faad14) !important;
220
+ background-color: var(--el-color-warning, #ea9a13) !important;
221
+ border-color: var(--el-color-warning, #ea9a13) !important;
211
222
  color: #ffffff !important;
223
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
212
224
 
213
225
  &:hover {
214
- background-color: var(--el-color-warning-light-3, #ffd666) !important;
215
- border-color: var(--el-color-warning-light-3, #ffd666) !important;
226
+ background-color: var(--el-color-warning-light-3, #f1b85a) !important;
227
+ border-color: var(--el-color-warning-light-3, #f1b85a) !important;
228
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
216
229
  }
217
230
  }
218
231
 
@@ -232,16 +245,18 @@
232
245
  // ── 成功操作:填充绿(审批通过/启用)────────────────────────────────
233
246
  &.el-button--success {
234
247
  background-color: var(--el-color-success, #2bb268) !important;
235
- border-color: var(--el-color-success, #2bb268) !important;
248
+ border-color: var(--el-color-success, #2bb268) !important;
236
249
  color: #ffffff !important;
250
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
237
251
 
238
252
  &:hover {
239
- background-color: var(--el-color-success-light-3, #80d0a4) !important;
240
- border-color: var(--el-color-success-light-3, #80d0a4) !important;
241
- }
242
- }
243
- }
244
- }
253
+ background-color: var(--el-color-success-light-3, #6bcb95) !important;
254
+ border-color: var(--el-color-success-light-3, #6bcb95) !important;
255
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
256
+ }
257
+ }
258
+ }
259
+ }
245
260
  .base-query-box .el-button.is-disabled,
246
261
  .base-query-box .el-button.is-disabled:hover,
247
262
  .base-query-box .el-button.is-disabled:focus,