@agile-team/wl-skills-ui 1.8.3 → 1.8.4
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agile-team/wl-skills-ui",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.4",
|
|
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",
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
// styles/element/_dialog.scss — el-dialog / el-message-box 覆盖
|
|
2
2
|
|
|
3
|
-
.el-message-box .el-message-box__status {
|
|
3
|
+
html body .el-message-box .el-message-box__status {
|
|
4
4
|
top: 12px !important;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
// jh-ui dialog.scss 标题色为硬编码 #262626，覆盖为 Token
|
|
8
|
-
html .el-dialog__title {
|
|
8
|
+
html body .el-dialog__title {
|
|
9
9
|
color: var(--el-text-color-primary);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
// EP 原生 fullscreen prop 场景：全屏与关闭两个 headerbtn 间距收紧
|
|
13
13
|
// 注：自定义全屏图标（.dialog-fullscreen-action）不受此影响
|
|
14
|
-
.el-dialog__headerbtn {
|
|
14
|
+
html body .el-dialog__headerbtn {
|
|
15
15
|
right: 8px;
|
|
16
16
|
}
|
|
17
|
-
.el-dialog__headerbtn
|
|
17
|
+
html body .el-dialog__headerbtn+.el-dialog__headerbtn {
|
|
18
18
|
right: 30px;
|
|
19
19
|
}
|
|
20
20
|
|
|
@@ -4,24 +4,24 @@ html body {
|
|
|
4
4
|
--wk-form-control-radius: var(--el-border-radius-base, 6px);
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
.el-form-item--small {
|
|
7
|
+
html body .el-form-item--small {
|
|
8
8
|
margin-bottom: 8px;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
// 解决 el-form-item 出现错误提示时底部 margin 增加的问题
|
|
12
|
-
.is-error.el-form-item--small {
|
|
12
|
+
html body .is-error.el-form-item--small {
|
|
13
13
|
margin-bottom: 18px !important;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
// ── 全局输入框圆角统一（6px，与搜索区保持一致）──────────────────────────────
|
|
17
|
-
.el-input__wrapper,
|
|
18
|
-
.el-select__wrapper,
|
|
19
|
-
.el-select .el-select__wrapper,
|
|
20
|
-
.el-date-editor.el-input__wrapper,
|
|
21
|
-
.el-date-editor .el-input__wrapper,
|
|
22
|
-
.el-input-number .el-input__wrapper,
|
|
23
|
-
.el-cascader .el-input__wrapper,
|
|
24
|
-
.el-autocomplete .el-input__wrapper,
|
|
25
|
-
.el-textarea__inner {
|
|
17
|
+
html body .el-input__wrapper,
|
|
18
|
+
html body .el-select__wrapper,
|
|
19
|
+
html body .el-select .el-select__wrapper,
|
|
20
|
+
html body .el-date-editor.el-input__wrapper,
|
|
21
|
+
html body .el-date-editor .el-input__wrapper,
|
|
22
|
+
html body .el-input-number .el-input__wrapper,
|
|
23
|
+
html body .el-cascader .el-input__wrapper,
|
|
24
|
+
html body .el-autocomplete .el-input__wrapper,
|
|
25
|
+
html body .el-textarea__inner {
|
|
26
26
|
border-radius: var(--wk-form-control-radius) !important;
|
|
27
27
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// styles/element/_table.scss — el-table 表头颜色覆盖
|
|
2
2
|
// jh-ui table.scss 表头颜色为硬编码，此处用 CSS 变量覆盖
|
|
3
3
|
|
|
4
|
-
html .el-table {
|
|
4
|
+
html body .el-table {
|
|
5
5
|
.el-table__header-wrapper th,
|
|
6
6
|
.el-table__fixed-header-wrapper th {
|
|
7
7
|
color: var(--el-text-color-primary, #303133);
|
|
@@ -28,4 +28,4 @@ html .el-table {
|
|
|
28
28
|
width: 100%;
|
|
29
29
|
margin: 0 auto;
|
|
30
30
|
}
|
|
31
|
-
}
|
|
31
|
+
}
|
package/styles/tokens/index.scss
CHANGED
|
@@ -77,3 +77,154 @@ $wk-component-size-large: var(--el-component-size-large) !default;
|
|
|
77
77
|
$wk-sidebar-bg: var(--el-sidebar-bg) !default;
|
|
78
78
|
$wk-sidebar-bg-active: var(--el-sidebar-bg-active) !default;
|
|
79
79
|
$wk-sidebar-width: var(--el-sidebar-width) !default;
|
|
80
|
+
|
|
81
|
+
// ── CSS 自定义属性输出 ─────────────────────────────────────────────────────
|
|
82
|
+
// 与 design/tokens/base.css 保持同步。
|
|
83
|
+
// 作用：让任何 @forward tokens/index 的 preset 自动将 CSS 变量打入构建产物，
|
|
84
|
+
// 不再依赖 index.html <link> 或 JS import tokens.css。
|
|
85
|
+
// 选择器 :root body 特异性 (0,1,1) > Element Plus 的 :root (0,1,0)，
|
|
86
|
+
// 保证无论 CSS 加载顺序如何，我们的变量始终优先。
|
|
87
|
+
:root body {
|
|
88
|
+
--el-color-primary: #2254f4;
|
|
89
|
+
--el-color-primary-light-1: #3865f5;
|
|
90
|
+
--el-color-primary-light-2: #5178f6;
|
|
91
|
+
--el-color-primary-light-3: #7a98f8;
|
|
92
|
+
--el-color-primary-light-4: #91aaf9;
|
|
93
|
+
--el-color-primary-light-5: #a8bbfa;
|
|
94
|
+
--el-color-primary-light-6: #bfccfc;
|
|
95
|
+
--el-color-primary-light-7: #d3ddfd;
|
|
96
|
+
--el-color-primary-light-8: #e6ebfe;
|
|
97
|
+
--el-color-primary-light-9: #f2f5ff;
|
|
98
|
+
--el-color-primary-dark-1: #1b43c3;
|
|
99
|
+
--el-color-primary-dark-2: #1738a3;
|
|
100
|
+
--el-color-primary-dark-3: #102873;
|
|
101
|
+
--el-color-primary-dark-4: #0a1a4d;
|
|
102
|
+
--el-color-success: #2bb268;
|
|
103
|
+
--el-color-success-light-1: #40ba77;
|
|
104
|
+
--el-color-success-light-2: #55c286;
|
|
105
|
+
--el-color-success-light-3: #6bcb95;
|
|
106
|
+
--el-color-success-light-4: #80d3a4;
|
|
107
|
+
--el-color-success-light-5: #95dbb4;
|
|
108
|
+
--el-color-success-light-6: #aae3c3;
|
|
109
|
+
--el-color-success-light-7: #bfebd2;
|
|
110
|
+
--el-color-success-light-8: #d5f4e1;
|
|
111
|
+
--el-color-success-light-9: #eaf9f0;
|
|
112
|
+
--el-color-success-dark-1: #229051;
|
|
113
|
+
--el-color-success-dark-2: #1b733f;
|
|
114
|
+
--el-color-success-dark-3: #14562f;
|
|
115
|
+
--el-color-success-dark-4: #0d3a20;
|
|
116
|
+
--el-color-warning: #ea9a13;
|
|
117
|
+
--el-color-warning-light-1: #eca42b;
|
|
118
|
+
--el-color-warning-light-2: #efae42;
|
|
119
|
+
--el-color-warning-light-3: #f1b85a;
|
|
120
|
+
--el-color-warning-light-4: #f3c171;
|
|
121
|
+
--el-color-warning-light-5: #f5cb89;
|
|
122
|
+
--el-color-warning-light-6: #f7d5a1;
|
|
123
|
+
--el-color-warning-light-7: #f9dfb8;
|
|
124
|
+
--el-color-warning-light-8: #fce8d0;
|
|
125
|
+
--el-color-warning-light-9: #fef2e7;
|
|
126
|
+
--el-color-warning-dark-1: #c47f0e;
|
|
127
|
+
--el-color-warning-dark-2: #9d650a;
|
|
128
|
+
--el-color-warning-dark-3: #754a07;
|
|
129
|
+
--el-color-warning-dark-4: #4e3004;
|
|
130
|
+
--el-color-danger: #bb2d3f;
|
|
131
|
+
--el-color-danger-light-1: #c34253;
|
|
132
|
+
--el-color-danger-light-2: #ca5766;
|
|
133
|
+
--el-color-danger-light-3: #d16b78;
|
|
134
|
+
--el-color-danger-light-4: #d8808b;
|
|
135
|
+
--el-color-danger-light-5: #dd969f;
|
|
136
|
+
--el-color-danger-light-6: #e4abb2;
|
|
137
|
+
--el-color-danger-light-7: #e8c0c5;
|
|
138
|
+
--el-color-danger-light-8: #f0d5d9;
|
|
139
|
+
--el-color-danger-light-9: #f7eaec;
|
|
140
|
+
--el-color-danger-dark-1: #962433;
|
|
141
|
+
--el-color-danger-dark-2: #711b26;
|
|
142
|
+
--el-color-danger-dark-3: #4b1219;
|
|
143
|
+
--el-color-danger-dark-4: #26090d;
|
|
144
|
+
--el-color-error: #bb2d3f;
|
|
145
|
+
--el-color-error-light-1: #c34253;
|
|
146
|
+
--el-color-error-light-2: #ca5766;
|
|
147
|
+
--el-color-error-light-3: #d16b78;
|
|
148
|
+
--el-color-error-light-4: #d8808b;
|
|
149
|
+
--el-color-error-light-5: #dd969f;
|
|
150
|
+
--el-color-error-light-6: #e4abb2;
|
|
151
|
+
--el-color-error-light-7: #e8c0c5;
|
|
152
|
+
--el-color-error-light-8: #f0d5d9;
|
|
153
|
+
--el-color-error-light-9: #f7eaec;
|
|
154
|
+
--el-color-error-dark-1: #962433;
|
|
155
|
+
--el-color-error-dark-2: #711b26;
|
|
156
|
+
--el-color-error-dark-3: #4b1219;
|
|
157
|
+
--el-color-error-dark-4: #26090d;
|
|
158
|
+
--el-color-info: #909399;
|
|
159
|
+
--el-color-info-light-1: #9b9ea3;
|
|
160
|
+
--el-color-info-light-2: #a7a9ae;
|
|
161
|
+
--el-color-info-light-3: #b2b4b8;
|
|
162
|
+
--el-color-info-light-4: #bdbfc3;
|
|
163
|
+
--el-color-info-light-5: #c9cacd;
|
|
164
|
+
--el-color-info-light-6: #d4d5d7;
|
|
165
|
+
--el-color-info-light-7: #dfe0e2;
|
|
166
|
+
--el-color-info-light-8: #ebebec;
|
|
167
|
+
--el-color-info-light-9: #f6f6f7;
|
|
168
|
+
--el-color-info-dark-1: #909399;
|
|
169
|
+
--el-color-info-dark-2: #909399;
|
|
170
|
+
--el-color-info-dark-3: #909399;
|
|
171
|
+
--el-color-info-dark-4: #909399;
|
|
172
|
+
--el-text-color-primary: rgba(0, 0, 0, 0.85);
|
|
173
|
+
--el-text-color-regular: rgba(0, 0, 0, 0.65);
|
|
174
|
+
--el-text-color-secondary: rgba(0, 0, 0, 0.45);
|
|
175
|
+
--el-text-color-placeholder: rgba(0, 0, 0, 0.25);
|
|
176
|
+
--el-text-color-disabled: rgba(0, 0, 0, 0.25);
|
|
177
|
+
--el-border-color: #d9d9d9;
|
|
178
|
+
--el-border-color-light: #f0f0f0;
|
|
179
|
+
--el-border-color-lighter: #f5f5f5;
|
|
180
|
+
--el-border-color-extra-light: rgba(0, 0, 0, 0.04);
|
|
181
|
+
--el-border-color-dark: rgba(0, 0, 0, 0.06);
|
|
182
|
+
--el-border-color-darker: rgba(0, 0, 0, 0.15);
|
|
183
|
+
--el-fill-color: #f0f0f0 !important;
|
|
184
|
+
--el-fill-color-light: rgba(0, 0, 0, 0.02) !important;
|
|
185
|
+
--el-fill-color-lighter: rgba(0, 0, 0, 0.04) !important;
|
|
186
|
+
--el-fill-color-dark: rgba(0, 0, 0, 0.45) !important;
|
|
187
|
+
--el-fill-color-darker: rgba(0, 0, 0, 0.75) !important;
|
|
188
|
+
--el-fill-color-blank: #ffffff !important;
|
|
189
|
+
--el-mask-color: rgba(0, 0, 0, 0.45);
|
|
190
|
+
--el-mask-color-extra-light: rgba(0, 0, 0, 0.30);
|
|
191
|
+
--el-font-size-extra-large: 32px;
|
|
192
|
+
--el-font-size-large: 24px;
|
|
193
|
+
--el-font-size-medium: 16px;
|
|
194
|
+
--el-font-size-base: 14px;
|
|
195
|
+
--el-font-size-small: 12px;
|
|
196
|
+
--el-font-size-extra-small: 10px;
|
|
197
|
+
--el-font-weight-primary: 500;
|
|
198
|
+
--el-font-weight-light: 300;
|
|
199
|
+
--el-font-weight-regular: 400;
|
|
200
|
+
--el-font-weight-medium: 500;
|
|
201
|
+
--el-font-weight-semi: 600;
|
|
202
|
+
--el-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.05);
|
|
203
|
+
--el-box-shadow-light: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
|
|
204
|
+
--el-box-shadow-lighter: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
|
|
205
|
+
--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);
|
|
206
|
+
--el-border-radius-base: 4px;
|
|
207
|
+
--el-border-radius-small: 2px;
|
|
208
|
+
--el-border-radius-round: 20px;
|
|
209
|
+
--el-border-radius-circle: 100%;
|
|
210
|
+
--el-line-height-1: 20px;
|
|
211
|
+
--el-line-height-2: 20px;
|
|
212
|
+
--el-line-height-3: 20px;
|
|
213
|
+
--el-line-height-4: 20px;
|
|
214
|
+
--el-line-height-5: 20px;
|
|
215
|
+
--el-line-height-6: 20px;
|
|
216
|
+
--el-line-height-7: 20px;
|
|
217
|
+
--el-line-height-8: 20px;
|
|
218
|
+
--el-line-height-9: 20px;
|
|
219
|
+
--el-component-size-small: 28px;
|
|
220
|
+
--el-component-size-large: 40px;
|
|
221
|
+
--el-component-size-default: 32px;
|
|
222
|
+
--el-padding: 12px;
|
|
223
|
+
--el-padding-large: 24px;
|
|
224
|
+
--el-padding-small: 12px;
|
|
225
|
+
--el-sidebar-bg: #10182C;
|
|
226
|
+
--el-sidebar-bg-active: rgba(255, 255, 255, 0.11);
|
|
227
|
+
--el-sidebar-width: 240px;
|
|
228
|
+
--el-menu-item-font-size: 16px;
|
|
229
|
+
--el-menu-item-height: 40px;
|
|
230
|
+
}
|