@agile-team/wl-skills-ui 1.6.2 → 1.6.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.
Files changed (12) hide show
  1. package/package.json +2 -2
  2. package/skills/element/el-form/SKILL.md +13 -0
  3. package/skills/element/el-table/SKILL.md +2 -0
  4. package/skills/runtime/style-align/SKILL.md +1 -0
  5. package/skills/vendors/base-table/SKILL.md +5 -0
  6. package/standards/ui/03-form.md +12 -0
  7. package/styles/element/_feedback.scss +11 -11
  8. package/styles/element/_form.scss +13 -8
  9. package/styles/element/_table.scss +22 -4
  10. package/styles/element/_upload.scss +10 -10
  11. package/styles/vendors/_ag-grid.scss +4 -3
  12. package/styles/vendors/_base-query-toolbar.scss +42 -23
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agile-team/wl-skills-ui",
3
- "version": "1.6.2",
3
+ "version": "1.6.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",
@@ -127,4 +127,4 @@
127
127
  "eslint --fix --no-cache"
128
128
  ]
129
129
  }
130
- }
130
+ }
package/skills/element/el-form/SKILL.md CHANGED
@@ -46,6 +46,19 @@ el-date-picker 默认宽度不会自动撑满 el-form-item，必须显式设置
46
46
 
47
47
  ---
48
48
 
49
+ ## 表单控件圆角一致性 【中危】
50
+
51
+ 表单里的输入类控件必须按控件家族统一判断，不要只修 `el-input`：
52
+
53
+ - 输入：`el-input` / `el-textarea` / `el-input-number`
54
+ - 选择：`el-select` / `el-cascader` / `el-autocomplete`
55
+ - 日期：`el-date-picker` / `el-time-picker` / range editor
56
+ - 上传：`el-upload-dragger` / upload list item
57
+
58
+ 修复时优先使用全局样式 token `--wk-form-control-radius`，不要在业务页面对某几个控件单独写 `border-radius: 0`、`4px`、`10px` 等局部值。若页面需要特殊圆角，应在页面容器上覆盖 token，而不是逐个控件硬编码。
59
+
60
+ ---
61
+
49
62
  ## 完整标准表单示例
50
63
 
51
64
  ```html
package/skills/element/el-table/SKILL.md CHANGED
@@ -33,6 +33,8 @@ applyTo: "**/*.vue"
33
33
  + <el-table :data="list" empty-text="暂无数据">
34
34
  ```
35
35
 
36
+ 修复空状态时不要猜测固定高度；应先识别当前表格的真实内容区域（含主表、子表、弹窗表格、展开行内嵌套表格），保证空态在对应表格自身区域内水平/垂直居中，空态图标、文字比例保持同一套视觉规范。若业务页面存在树筛选、组织机构、标签页等上下文，仅在能从 DOM/文案/变量中确认存在时才补充对应提示，不要硬写“左侧选择组织机构”等不一定存在的描述。
37
+
36
38
  ---
37
39
 
38
40
  ## R003 — BaseTable 必须 `empty-text="暂无数据"` 【中危】
package/skills/runtime/style-align/SKILL.md CHANGED
@@ -87,6 +87,7 @@ npx wk-ui check --project [项目根目录]
87
87
  - **R006**【中危】el-input / el-select 缺少 `size="small"`
88
88
  - **R007**【中危】el-date-picker 缺少 `style="width:100%"`
89
89
  - **R008**【低危】el-form labelWidth < 150px
90
+ - **表单圆角一致性**【中危】输入、选择、日期、textarea、上传等控件必须统一使用 `--wk-form-control-radius`，不要局部硬编码不同圆角
90
91
 
91
92
  ### 弹窗类 → 详见 [skills/components/dialog/SKILL.md](../../components/dialog/SKILL.md)
92
93
 
package/skills/vendors/base-table/SKILL.md CHANGED
@@ -37,6 +37,11 @@ applyTo: "**/*.vue"
37
37
  - 操作列按钮 `type="primary"` → 改为 `link` + `is-text`
38
38
  - 内联 hex → CSS 变量
39
39
 
40
+ ### 空状态智能修复
41
+ - 主表、子表、展开行内表格都必须在各自表格区域内居中，不要用全页面或父表高度推断子表位置
42
+ - 保持同一套空态图标和文字比例，不要因为嵌套表格另起一套尺寸风格
43
+ - 文案根据实际上下文判断：只有确认存在组织树/左侧机构筛选时，才提示选择组织机构；否则使用“调整筛选条件”等通用描述
44
+
40
45
  ### B 类（建议人工确认）
41
46
  - 替换为 `defineColumns(...)` 渲染（迁移到 L4 runtime，业务代码大幅精简）
42
47
 
package/standards/ui/03-form.md CHANGED
@@ -44,6 +44,18 @@ date-picker 默认宽度固定，在 grid 布局中需撑满列宽：
44
44
 
45
45
  ---
46
46
 
47
+ ## 规则：表单控件圆角必须统一
48
+
49
+ 输入、选择、日期、数字输入、级联、自动完成、textarea、上传拖拽区都属于表单控件家族，圆角必须使用统一 token：
50
+
51
+ ```scss
52
+ --wk-form-control-radius
53
+ ```
54
+
55
+ 业务页面不要给单个控件硬编码不同 `border-radius`。确有特殊场景时，在页面容器覆盖 token，而不是逐个控件写死。
56
+
57
+ ---
58
+
47
59
  ## 布局标准
48
60
 
49
61
  ### 搜索区（列表页顶部）
package/styles/element/_feedback.scss CHANGED
@@ -2,8 +2,8 @@ html body .el-empty {
2
2
  --el-empty-padding: 32px 0;
3
3
 
4
4
  .el-empty__description p {
5
- color: var(--el-text-color-secondary);
6
- font-size: var(--el-font-size-base);
5
+ color: var(--el-text-color-secondary, #909399);
6
+ font-size: var(--el-font-size-base, 14px);
7
7
  }
8
8
 
9
9
  .el-empty__bottom {
@@ -15,38 +15,38 @@ html body .el-alert {
15
15
  border-radius: 8px;
16
16
 
17
17
  .el-alert__title {
18
- font-weight: var(--el-font-weight-medium);
18
+ font-weight: var(--el-font-weight-medium, 500);
19
19
  }
20
20
 
21
21
  .el-alert__description {
22
- color: var(--el-text-color-regular);
22
+ color: var(--el-text-color-regular, #606266);
23
23
  }
24
24
  }
25
25
 
26
26
  html body .el-badge {
27
27
  .el-badge__content {
28
- border-color: var(--el-fill-color-blank);
29
- box-shadow: var(--el-box-shadow);
28
+ border-color: var(--el-fill-color-blank, #ffffff);
29
+ box-shadow: var(--el-box-shadow, 0 0 12px rgba(0, 0, 0, 0.12));
30
30
  }
31
31
  }
32
32
 
33
33
  html body .el-result {
34
34
  .el-result__title p {
35
- color: var(--el-text-color-primary);
36
- font-weight: var(--el-font-weight-medium);
35
+ color: var(--el-text-color-primary, #303133);
36
+ font-weight: var(--el-font-weight-medium, 500);
37
37
  }
38
38
 
39
39
  .el-result__subtitle p {
40
- color: var(--el-text-color-secondary);
40
+ color: var(--el-text-color-secondary, #909399);
41
41
  }
42
42
  }
43
43
 
44
44
  html body .el-timeline {
45
45
  .el-timeline-item__timestamp {
46
- color: var(--el-text-color-secondary);
46
+ color: var(--el-text-color-secondary, #909399);
47
47
  }
48
48
 
49
49
  .el-timeline-item__content {
50
- color: var(--el-text-color-regular);
50
+ color: var(--el-text-color-regular, #606266);
51
51
  }
52
52
  }
package/styles/element/_form.scss CHANGED
@@ -1,5 +1,9 @@
1
1
  // styles/element/_form.scss — el-form / el-input 覆盖
2
2
 
3
+ html body {
4
+ --wk-form-control-radius: var(--el-border-radius-base, 6px);
5
+ }
6
+
3
7
  .el-form-item--small {
4
8
  margin-bottom: 8px;
5
9
  }
@@ -10,13 +14,14 @@
10
14
  }
11
15
 
12
16
  // ── 全局输入框圆角统一（6px，与搜索区保持一致）──────────────────────────────
13
- .el-input__wrapper {
14
- border-radius: 6px;
15
- }
16
- .el-select .el-select__wrapper {
17
- border-radius: 6px;
18
- }
17
+ .el-input__wrapper,
18
+ .el-select__wrapper,
19
+ .el-select .el-select__wrapper,
19
20
  .el-date-editor.el-input__wrapper,
20
- .el-date-editor .el-input__wrapper {
21
- border-radius: 6px;
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 {
26
+ border-radius: var(--wk-form-control-radius) !important;
22
27
  }
package/styles/element/_table.scss CHANGED
@@ -4,10 +4,28 @@
4
4
  html .el-table {
5
5
  .el-table__header-wrapper th,
6
6
  .el-table__fixed-header-wrapper th {
7
- color: var(--el-text-color-primary);
8
- background: var(--el-fill-color-lighter);
7
+ color: var(--el-text-color-primary, #303133);
8
+ background: var(--el-fill-color-lighter, #fafafa);
9
9
  }
10
+
10
11
  .el-table__header tr {
11
- --el-table-tr-bg-color: var(--el-fill-color-lighter);
12
+ --el-table-tr-bg-color: var(--el-fill-color-lighter, #fafafa);
13
+ }
14
+
15
+ .el-table__empty-block {
16
+ display: flex;
17
+ align-items: center;
18
+ justify-content: center;
19
+ width: 100% !important;
20
+ }
21
+
22
+ .el-table__empty-text {
23
+ width: 100%;
24
+ line-height: 1.5;
25
+ }
26
+
27
+ .el-empty {
28
+ width: 100%;
29
+ margin: 0 auto;
12
30
  }
13
- }
31
+ }
package/styles/element/_upload.scss CHANGED
@@ -1,34 +1,34 @@
1
1
  html body .el-upload {
2
2
  .el-upload-dragger {
3
- border-color: var(--el-border-color);
4
- border-radius: 10px;
5
- background: var(--el-fill-color-light);
3
+ border-color: var(--el-border-color, #dcdfe6);
4
+ border-radius: var(--wk-form-control-radius, var(--el-border-radius-base, 6px));
5
+ background: var(--el-fill-color-light, #f5f7fa);
6
6
  transition: border-color 0.2s, background-color 0.2s;
7
7
  }
8
8
 
9
9
  .el-upload-dragger:hover,
10
10
  .el-upload-dragger.is-dragover {
11
- border-color: var(--el-color-primary);
12
- background: var(--el-color-primary-light-9);
11
+ border-color: var(--el-color-primary, #2254f4);
12
+ background: var(--el-color-primary-light-9, #f2f5ff);
13
13
  }
14
14
 
15
15
  .el-upload__tip {
16
- color: var(--el-text-color-secondary);
17
- font-size: var(--el-font-size-small);
16
+ color: var(--el-text-color-secondary, #909399);
17
+ font-size: var(--el-font-size-small, 12px);
18
18
  }
19
19
  }
20
20
 
21
21
  html body .el-upload-list {
22
22
  .el-upload-list__item {
23
- border-radius: 6px;
23
+ border-radius: var(--wk-form-control-radius, var(--el-border-radius-base, 6px));
24
24
  transition: background-color 0.2s;
25
25
  }
26
26
 
27
27
  .el-upload-list__item:hover {
28
- background: var(--el-fill-color-lighter);
28
+ background: var(--el-fill-color-lighter, #fafafa);
29
29
  }
30
30
 
31
31
  .el-upload-list__item-name {
32
- color: var(--el-text-color-regular);
32
+ color: var(--el-text-color-regular, #606266);
33
33
  }
34
34
  }
package/styles/vendors/_ag-grid.scss CHANGED
@@ -150,6 +150,7 @@
150
150
 
151
151
  // ── 空数据占位 ────────────────────────────────────────────────────────────────
152
152
  .ag-overlay-no-rows-wrapper {
153
+ --wk-empty-hint: '未找到匹配数据，请调整筛选条件后重试';
153
154
  display: flex !important;
154
155
  flex-direction: column !important;
155
156
  align-items: center !important;
@@ -169,10 +170,10 @@
169
170
  }
170
171
 
171
172
  &::after {
172
- content: '请尝试调整筛选条件或在左侧选择组织机构';
173
+ content: var(--wk-empty-hint);
173
174
  display: block;
174
175
  font-size: 12px;
175
- color: #B0B7C3;
176
+ color: var(--el-text-color-placeholder, #B0B7C3);
176
177
  margin-top: 6px;
177
178
  letter-spacing: 0.01em;
178
179
  }
@@ -181,7 +182,7 @@
181
182
  .ag-overlay-no-rows-center {
182
183
  font-size: 14px;
183
184
  font-weight: 500;
184
- color: #374151;
185
+ color: var(--el-text-color-primary, #374151);
185
186
  letter-spacing: 0.02em;
186
187
  }
187
188
 
package/styles/vendors/_base-query-toolbar.scss CHANGED
@@ -86,14 +86,14 @@
86
86
  line-height: 1 !important;
87
87
  padding: 0 10px !important;
88
88
  font-size: 12px !important;
89
- background-color: var(--el-color-primary) !important;
90
- border-color: var(--el-color-primary) !important;
89
+ background-color: var(--el-color-primary, #2254f4) !important;
90
+ border-color: var(--el-color-primary, #2254f4) !important;
91
91
  color: #ffffff !important;
92
92
  transition: background-color 0.15s, box-shadow 0.15s;
93
93
 
94
94
  &:hover {
95
- background-color: var(--el-color-primary-light-3) !important;
96
- border-color: var(--el-color-primary-light-3) !important;
95
+ background-color: var(--el-color-primary-light-3, #7a98f8) !important;
96
+ border-color: var(--el-color-primary-light-3, #7a98f8) !important;
97
97
  box-shadow: 0 2px 8px rgba(34, 84, 244, 0.25);
98
98
  }
99
99
  &:active { opacity: 0.85; }
@@ -169,13 +169,13 @@
169
169
 
170
170
  // ── 主操作：填充蓝（新增/新建/申请）─────────────────────────────────
171
171
  &.el-button--primary {
172
- background-color: var(--el-color-primary) !important;
173
- border-color: var(--el-color-primary) !important;
172
+ background-color: var(--el-color-primary, #2254f4) !important;
173
+ border-color: var(--el-color-primary, #2254f4) !important;
174
174
  color: #ffffff !important;
175
175
 
176
176
  &:hover {
177
- background-color: var(--el-color-primary-light-3) !important;
178
- border-color: var(--el-color-primary-light-3) !important;
177
+ background-color: var(--el-color-primary-light-3, #7a98f8) !important;
178
+ border-color: var(--el-color-primary-light-3, #7a98f8) !important;
179
179
  box-shadow: 0 2px 8px rgba(34, 84, 244, 0.28);
180
180
  }
181
181
  &:active { opacity: 0.85; }
@@ -183,13 +183,13 @@
183
183
 
184
184
  // ── 危险操作：填充红（删除/作废/驳回）───────────────────────────────
185
185
  &.el-button--danger {
186
- background-color: var(--el-color-danger) !important;
187
- border-color: var(--el-color-danger) !important;
186
+ background-color: var(--el-color-danger, #f5222d) !important;
187
+ border-color: var(--el-color-danger, #f5222d) !important;
188
188
  color: #ffffff !important;
189
189
 
190
190
  &:hover {
191
- background-color: var(--el-color-danger-light-3) !important;
192
- border-color: var(--el-color-danger-light-3) !important;
191
+ background-color: var(--el-color-danger-light-3, #f56c6c) !important;
192
+ border-color: var(--el-color-danger-light-3, #f56c6c) !important;
193
193
  box-shadow: 0 2px 8px rgba(187, 45, 63, 0.25);
194
194
  }
195
195
  &:active { opacity: 0.85; }
@@ -197,13 +197,13 @@
197
197
 
198
198
  // ── 警告操作：填充橙（提醒/预警相关）───────────────────────────────
199
199
  &.el-button--warning {
200
- background-color: var(--el-color-warning) !important;
201
- border-color: var(--el-color-warning) !important;
200
+ background-color: var(--el-color-warning, #faad14) !important;
201
+ border-color: var(--el-color-warning, #faad14) !important;
202
202
  color: #ffffff !important;
203
203
 
204
204
  &:hover {
205
- background-color: var(--el-color-warning-light-3) !important;
206
- border-color: var(--el-color-warning-light-3) !important;
205
+ background-color: var(--el-color-warning-light-3, #ffd666) !important;
206
+ border-color: var(--el-color-warning-light-3, #ffd666) !important;
207
207
  }
208
208
  }
209
209
 
@@ -222,16 +222,35 @@
222
222
 
223
223
  // ── 成功操作：填充绿（审批通过/启用）────────────────────────────────
224
224
  &.el-button--success {
225
- background-color: var(--el-color-success) !important;
226
- border-color: var(--el-color-success) !important;
225
+ background-color: var(--el-color-success, #2bb268) !important;
226
+ border-color: var(--el-color-success, #2bb268) !important;
227
227
  color: #ffffff !important;
228
228
 
229
229
  &:hover {
230
- background-color: var(--el-color-success-light-3) !important;
231
- border-color: var(--el-color-success-light-3) !important;
232
- }
233
- }
234
- }
230
+ background-color: var(--el-color-success-light-3, #80d0a4) !important;
231
+ border-color: var(--el-color-success-light-3, #80d0a4) !important;
232
+ }
233
+ }
234
+ }
235
+ }
236
+ .base-query-box .el-button.is-disabled,
237
+ .base-query-box .el-button.is-disabled:hover,
238
+ .base-query-box .el-button.is-disabled:focus,
239
+ .base-query-box .el-button.is-disabled:active,
240
+ .base-toolbar-box .el-button.is-disabled,
241
+ .base-toolbar-box .el-button.is-disabled:hover,
242
+ .base-toolbar-box .el-button.is-disabled:focus,
243
+ .base-toolbar-box .el-button.is-disabled:active,
244
+ .base-toolbar-box .el-button[disabled],
245
+ .base-toolbar-box .el-button[disabled]:hover,
246
+ .base-toolbar-box .el-button[disabled]:focus,
247
+ .base-toolbar-box .el-button[disabled]:active {
248
+ color: var(--el-disabled-text-color, #a8abb2) !important;
249
+ background-color: var(--el-disabled-bg-color, #f5f7fa) !important;
250
+ border-color: var(--el-border-color-light, #e4e7ed) !important;
251
+ box-shadow: none !important;
252
+ opacity: 1 !important;
253
+ cursor: not-allowed !important;
235
254
  }
236
255
 
237
256
  // ── 下拉菜单按钮（工具栏内的 el-dropdown 触发器）────────────────────────────