@agile-team/wl-skills-ui 1.6.5 → 1.6.6
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 +39 -0
- package/README.md +12 -8
- package/SKILL.md +38 -37
- package/examples/migration-operations-to-renderOps.md +1 -1
- package/package.json +1 -1
- package/skills/_flows/full-audit.md +2 -2
- package/skills/_flows/legacy-skin-align.md +6 -6
- package/skills/_flows/new-project-init.md +11 -11
- package/skills/_flows/progressive-migrate.md +3 -3
- package/skills/_meta/_compat/README.md +22 -17
- package/skills/_meta/_registry.md +1 -1
- package/skills/element/component-family/SKILL.md +3 -3
- package/skills/element/el-tag/SKILL.md +2 -2
- package/skills/layouts/list-page/SKILL.md +2 -2
- package/skills/ops/audit/SKILL.md +14 -14
- package/skills/ops/fix/SKILL.md +5 -5
- package/skills/ops/fix/USAGE.md +4 -4
- package/skills/ops/migrate/SKILL.md +7 -7
- package/skills/ops/scan/SKILL.md +8 -8
- package/skills/ops/scan/USAGE.md +1 -1
- package/skills/runtime/design-tokens/SKILL.md +2 -2
- package/skills/runtime/design-tokens/USAGE.md +3 -3
- package/skills/runtime/migration/SKILL.md +11 -11
- package/skills/runtime/migration/USAGE.md +5 -5
- package/skills/runtime/style-align/SKILL.md +5 -5
- package/skills/runtime/style-align/USAGE.md +3 -3
- package/skills/vendors/ag-grid/SKILL.md +2 -2
- package/skills/vendors/base-table/SKILL.md +1 -1
- package/skills/vendors/jh-components/SKILL.md +1 -1
- package/standards/engineering/01-import-order.md +1 -1
- package/standards/engineering/03-scss-structure.md +3 -3
- package/templates/ag-grid-page/TPL-AG-GRID.md +1 -1
- package/templates/list-page/TPL-LIST.md +2 -2
- package/templates/tree-list/TPL-TREE-LIST.md +3 -3
- package/templates/ui-optimization-report/TPL-UI-OPTIM-REPORT.md +14 -14
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,45 @@ 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.6.6] - 2026-05-11
|
|
8
|
+
|
|
9
|
+
### Changed
|
|
10
|
+
|
|
11
|
+
- README、主 `SKILL.md`、Flow、Standards、Templates 和多编辑器兼容文档同步到 `wl-ui` / `wl-skills-ui` 当前命名,移除旧版 `wk-ui` / `wk-skills-ui` 过期写法。
|
|
12
|
+
- README 和多编辑器兼容文档补齐 `wl-ui update --editor all --force`、manifest 多编辑器刷新策略和 v1.6.5 规则分发说明。
|
|
13
|
+
|
|
14
|
+
## [1.6.5] - 2026-05-11
|
|
15
|
+
|
|
16
|
+
### Added
|
|
17
|
+
|
|
18
|
+
- `wl-ui update --editor all --force`:支持一次性将同一套 `skills/**/*.md` 规则转换并覆盖写入全部支持的 AI 编辑器目录。
|
|
19
|
+
- manifest 新增 `editors` 数组记录,兼容旧版 `editor` 字符串字段,便于多编辑器项目持续更新。
|
|
20
|
+
|
|
21
|
+
### Changed
|
|
22
|
+
|
|
23
|
+
- `wl-ui update` 未指定 `--editor` 时,会优先刷新 manifest 中记录的编辑器和项目里已存在的编辑器规则目录,避免团队不同 AI 编辑器 rules 漂移。
|
|
24
|
+
|
|
25
|
+
## [1.6.4] - 2026-05-11
|
|
26
|
+
|
|
27
|
+
### Fixed
|
|
28
|
+
|
|
29
|
+
- 表单控件圆角统一使用 `--wk-form-control-radius`,覆盖 input、select、date、input-number、cascader、autocomplete、textarea、upload 等控件族。
|
|
30
|
+
- Element Plus 上传拖拽区和上传列表项补齐圆角 token 与 fallback,避免局部硬编码导致视觉不一致。
|
|
31
|
+
- `el-form`、`style-align` Skill 和 `standards/ui/03-form.md` 补齐表单圆角一致性规则,引导 AI 避免局部 patch。
|
|
32
|
+
|
|
33
|
+
## [1.6.3] - 2026-05-11
|
|
34
|
+
|
|
35
|
+
### Fixed
|
|
36
|
+
|
|
37
|
+
- Element Plus 表格空状态改为在对应表格区域内自适应居中,嵌套表格不再依赖固定高度猜效果。
|
|
38
|
+
- AG Grid 空状态提示文案改为更通用并支持 CSS 变量自定义。
|
|
39
|
+
- 查询区和工具栏按钮补齐 CSS 变量 fallback,避免 token 未加载时按钮颜色丢失。
|
|
40
|
+
- 禁用按钮增加独立样式约束,避免 hover/active 覆盖禁用态。
|
|
41
|
+
|
|
42
|
+
### Changed
|
|
43
|
+
|
|
44
|
+
- `el-table`、`base-table`、`style-align` 等 Skill 补充智能空状态修复规则,要求 AI 根据真实业务上下文判断空态文案与区域,而不是硬编码。
|
|
45
|
+
|
|
7
46
|
## [1.6.2] - 2026-05-09
|
|
8
47
|
|
|
9
48
|
### Changed
|
package/README.md
CHANGED
|
@@ -193,10 +193,13 @@ yarn add @agile-team/wl-skills-ui
|
|
|
193
193
|
|
|
194
194
|
## 版本亮点
|
|
195
195
|
|
|
196
|
-
当前 v1.6.
|
|
196
|
+
当前 v1.6.5 版本重点强化“统一规则源 + 多编辑器分发 + UI 细节精准修复”的闭环:
|
|
197
197
|
|
|
198
|
-
-
|
|
199
|
-
-
|
|
198
|
+
- `skills/**/*.md` 作为唯一规则源,`wl-ui init/update` 会按编辑器格式转换并覆盖写入目标 rules
|
|
199
|
+
- `wl-ui update --editor all --force` 可一次性刷新全部支持编辑器;未指定编辑器时会刷新 manifest 与项目中已存在的编辑器规则目录
|
|
200
|
+
- 表格空状态改为对应表格区域内自适应居中,避免嵌套表格靠固定高度猜效果
|
|
201
|
+
- 查询区/工具栏按钮补齐 token fallback,禁用按钮独立保留清晰禁用态
|
|
202
|
+
- 表单控件圆角统一使用 `--wk-form-control-radius`,覆盖 input/select/date/textarea/upload 等控件家族
|
|
200
203
|
- `wl-ui init/update` 会安装 Skill、触发提示、MCP 配置和 manifest 清单
|
|
201
204
|
- `wl-ui diff/clean/doctor/prompts` 覆盖升级前对比、卸载清理、环境体检和提示词查看
|
|
202
205
|
- 内置 `wl-skills-ui` MCP Server,供 AI 编辑器调用扫描、检查和 dry-run 修复
|
|
@@ -303,8 +306,9 @@ npx wl-ui scan --target src --mode skin --outFile audit.md
|
|
|
303
306
|
|
|
304
307
|
```bash
|
|
305
308
|
# 安装或更新 Skill 到当前业务项目
|
|
306
|
-
npx wl-ui init --project .
|
|
307
|
-
npx wl-ui update --project .
|
|
309
|
+
npx wl-ui init --project .
|
|
310
|
+
npx wl-ui update --project . --force
|
|
311
|
+
npx wl-ui update --project . --editor all --force
|
|
308
312
|
|
|
309
313
|
# 查看 AI 触发提示
|
|
310
314
|
npx wl-ui prompts
|
|
@@ -313,7 +317,7 @@ npx wl-ui prompts
|
|
|
313
317
|
npx wl-ui doctor --project .
|
|
314
318
|
```
|
|
315
319
|
|
|
316
|
-
安装后会写入 `.github/wl-skills-ui/TRIGGER_PROMPTS.md`、`.mcp.json` 和 `.wl-skills-ui-manifest.json`。支持的编辑器可以单独指定,例如 `--editor claude-code`、`--editor cline`、`--editor agents-generic`、`--editor qoder
|
|
320
|
+
安装后会写入 `.github/wl-skills-ui/TRIGGER_PROMPTS.md`、`.mcp.json` 和 `.wl-skills-ui-manifest.json`。支持的编辑器可以单独指定,例如 `--editor kiro`、`--editor claude-code`、`--editor cline`、`--editor agents-generic`、`--editor qoder`;也可以使用 `--editor all` 一次性生成全部编辑器规则。
|
|
317
321
|
|
|
318
322
|
### 场景 D — 仅 CI 检查
|
|
319
323
|
|
|
@@ -335,7 +339,7 @@ npx wl-ui doctor --project .
|
|
|
335
339
|
```bash
|
|
336
340
|
wl-ui init [--project .] [--editor <e>] [--mode native|skin]
|
|
337
341
|
[--dry-run] [--skills-only]
|
|
338
|
-
wl-ui update [--project .] [--force] [--dry-run]
|
|
342
|
+
wl-ui update [--project .] [--editor <e|all>] [--force] [--dry-run]
|
|
339
343
|
wl-ui diff [--project .]
|
|
340
344
|
wl-ui clean [--project .] [--dry-run]
|
|
341
345
|
wl-ui doctor [--project .]
|
|
@@ -348,7 +352,7 @@ wl-ui all --project .
|
|
|
348
352
|
wl-ui add-preset <name> # 脚手架新业务 preset
|
|
349
353
|
```
|
|
350
354
|
|
|
351
|
-
支持的 AI 编辑器:`github-copilot` / `cursor` / `windsurf` / `kiro` / `trae` / `claude-code` / `cline` / `agents-generic` / `qoder
|
|
355
|
+
支持的 AI 编辑器:`github-copilot` / `cursor` / `windsurf` / `kiro` / `trae` / `claude-code` / `cline` / `agents-generic` / `qoder` / `all`。`update` 未指定编辑器时会优先刷新 manifest 与项目中已存在的编辑器规则目录。
|
|
352
356
|
|
|
353
357
|
`init/update` 会同时写入:
|
|
354
358
|
|
package/SKILL.md
CHANGED
|
@@ -13,7 +13,8 @@ applyTo: "**/*.vue"
|
|
|
13
13
|
```bash
|
|
14
14
|
# 安装/更新 AI Skill、触发提示、MCP 配置和 manifest
|
|
15
15
|
npx wl-ui init --project . --mode native
|
|
16
|
-
npx wl-ui update --project .
|
|
16
|
+
npx wl-ui update --project . --force
|
|
17
|
+
npx wl-ui update --project . --editor all --force
|
|
17
18
|
|
|
18
19
|
# 查看差异、体检、清理
|
|
19
20
|
npx wl-ui diff --project .
|
|
@@ -24,7 +25,7 @@ npx wl-ui clean --project . --dry-run
|
|
|
24
25
|
npx wl-ui prompts
|
|
25
26
|
```
|
|
26
27
|
|
|
27
|
-
可选编辑器:`github-copilot`、`cursor`、`windsurf`、`kiro`、`trae`、`claude-code`、`cline`、`agents-generic`、`qoder
|
|
28
|
+
可选编辑器:`github-copilot`、`cursor`、`windsurf`、`kiro`、`trae`、`claude-code`、`cline`、`agents-generic`、`qoder`、`all`。`update` 未指定编辑器时会刷新 manifest 与项目中已存在的编辑器规则目录;修复前优先使用 `--dry-run` 或 MCP 工具 `wks_ui_fix_dry_run`。
|
|
28
29
|
|
|
29
30
|
|
|
30
31
|
## 一、适用场景
|
|
@@ -101,8 +102,8 @@ npx wl-ui check --project [项目根目录]
|
|
|
101
102
|
### Category A:表格(el-table / AG Grid)
|
|
102
103
|
|
|
103
104
|
#### R001 — el-table-column 缺少居中对齐【高危】
|
|
104
|
-
**检测**:`<el-table-column` 没有 `align="center"`,或有 `align="left"`
|
|
105
|
-
**标准**:所有列必须 `align="center"`,selection 列 width=55,index 列 width=60
|
|
105
|
+
**检测**:`<el-table-column` 没有 `align="center"`,或有 `align="left"`
|
|
106
|
+
**标准**:所有列必须 `align="center"`,selection 列 width=55,index 列 width=60
|
|
106
107
|
```diff
|
|
107
108
|
- <el-table-column label="名称" prop="name">
|
|
108
109
|
+ <el-table-column align="center" label="名称" prop="name">
|
|
@@ -112,16 +113,16 @@ npx wl-ui check --project [项目根目录]
|
|
|
112
113
|
> ⚠️ `selection` 列必须同时加 `align="center"` **和** `header-align="center"`,否则表头复选框与数据行复选框会出现垂直错位。
|
|
113
114
|
|
|
114
115
|
#### R002 — el-table 缺少空状态文本【中危】
|
|
115
|
-
**检测**:`<el-table` 没有 `empty-text` 属性
|
|
116
|
-
**标准**:统一 `empty-text="暂无数据"`
|
|
116
|
+
**检测**:`<el-table` 没有 `empty-text` 属性
|
|
117
|
+
**标准**:统一 `empty-text="暂无数据"`
|
|
117
118
|
```diff
|
|
118
119
|
- <el-table :data="list">
|
|
119
120
|
+ <el-table :data="list" empty-text="暂无数据">
|
|
120
121
|
```
|
|
121
122
|
|
|
122
123
|
#### R003 — BaseTable 缺少空状态文本【中危】
|
|
123
|
-
**检测**:`<BaseTable` 没有 `empty-text` 属性
|
|
124
|
-
**标准**:统一 `empty-text="暂无数据"`
|
|
124
|
+
**检测**:`<BaseTable` 没有 `empty-text` 属性
|
|
125
|
+
**标准**:统一 `empty-text="暂无数据"`
|
|
125
126
|
```diff
|
|
126
127
|
- <BaseTable :hook="page">
|
|
127
128
|
+ <BaseTable :hook="page" empty-text="暂无数据">
|
|
@@ -148,11 +149,11 @@ npx wl-ui check --project [项目根目录]
|
|
|
148
149
|
### Category B:按钮(el-button)
|
|
149
150
|
|
|
150
151
|
#### R004 — 操作列使用文字按钮【高危】
|
|
151
|
-
**检测**:列定义模板中有 `jh-op-btn` 缺失的操作按钮
|
|
152
|
-
**标准**:操作列必须用 `defaultSlot: ({ row }) => renderOps([...])` 图标按钮系统
|
|
152
|
+
**检测**:列定义模板中有 `jh-op-btn` 缺失的操作按钮
|
|
153
|
+
**标准**:操作列必须用 `defaultSlot: ({ row }) => renderOps([...])` 图标按钮系统
|
|
153
154
|
|
|
154
155
|
#### R013 — columnsDef 旧格式 operations:[] 文字按钮【高危】
|
|
155
|
-
**检测**:script 块中 columnsDef 内有 `operations: [` 旧格式数组(由 scanner/index.mjs 单独检测)
|
|
156
|
+
**检测**:script 块中 columnsDef 内有 `operations: [` 旧格式数组(由 scanner/index.mjs 单独检测)
|
|
156
157
|
**标准**:同 R004,改为 `defaultSlot: ({ row }) => renderOps([...])`
|
|
157
158
|
|
|
158
159
|
**简单迁移(无条件显示)**:
|
|
@@ -181,15 +182,15 @@ npx wl-ui check --project [项目根目录]
|
|
|
181
182
|
+ ])
|
|
182
183
|
```
|
|
183
184
|
|
|
184
|
-
**含 Upload / 自定义组件的操作(特殊案例,不能直接用 renderOps)**:
|
|
185
|
+
**含 Upload / 自定义组件的操作(特殊案例,不能直接用 renderOps)**:
|
|
185
186
|
将 Upload 操作从 operations[] 中抽出,改为 toolbarDef() 中的 `renderNode:` 按钮,操作列仍用 renderOps 承载其他操作。
|
|
186
187
|
|
|
187
|
-
**标签→type 映射**:查看→`view`,编辑/修改→`edit`,删除/移除→`del`,审核/审批→`ok`,提交→`send`,流程记录→`log`
|
|
188
|
+
**标签→type 映射**:查看→`view`,编辑/修改→`edit`,删除/移除→`del`,审核/审批→`ok`,提交→`send`,流程记录→`log`
|
|
188
189
|
**参考**:`reference/ag-cell-renders.ts` - `renderOps` 函数
|
|
189
190
|
|
|
190
191
|
#### R005 — 工具栏按钮缺少 icon【中危】
|
|
191
|
-
**检测**:toolbarDef / 顶部 el-button 没有 `icon` 属性
|
|
192
|
-
**标准**:工具栏按钮必须带 icon + 文字
|
|
192
|
+
**检测**:toolbarDef / 顶部 el-button 没有 `icon` 属性
|
|
193
|
+
**标准**:工具栏按钮必须带 icon + 文字
|
|
193
194
|
```diff
|
|
194
195
|
- <el-button type="primary" @click="handleAdd">新增</el-button>
|
|
195
196
|
+ <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
|
|
@@ -200,24 +201,24 @@ npx wl-ui check --project [项目根目录]
|
|
|
200
201
|
### Category C:表单控件(el-input / el-select / el-date-picker)
|
|
201
202
|
|
|
202
203
|
#### R006 — el-input / el-select 未统一 size【中危】
|
|
203
|
-
**检测**:`<el-input` 或 `<el-select` 没有 `size="small"` 属性
|
|
204
|
-
**标准**:全局统一 `size="small"`
|
|
204
|
+
**检测**:`<el-input` 或 `<el-select` 没有 `size="small"` 属性
|
|
205
|
+
**标准**:全局统一 `size="small"`
|
|
205
206
|
```diff
|
|
206
207
|
- <el-input v-model="form.name" placeholder="请输入">
|
|
207
208
|
+ <el-input size="small" v-model="form.name" placeholder="请输入">
|
|
208
209
|
```
|
|
209
210
|
|
|
210
211
|
#### R007 — el-date-picker 宽度未撑满【中危】
|
|
211
|
-
**检测**:`<el-date-picker` 没有 `style` 包含 `width:100%`
|
|
212
|
-
**标准**:在 el-form-item 内必须 `style="width:100%"`
|
|
212
|
+
**检测**:`<el-date-picker` 没有 `style` 包含 `width:100%`
|
|
213
|
+
**标准**:在 el-form-item 内必须 `style="width:100%"`
|
|
213
214
|
```diff
|
|
214
215
|
- <el-date-picker v-model="form.date" type="date">
|
|
215
216
|
+ <el-date-picker style="width:100%" v-model="form.date" type="date">
|
|
216
217
|
```
|
|
217
218
|
|
|
218
219
|
#### R008 — el-form labelWidth 不统一【低危】
|
|
219
|
-
**检测**:`labelWidth` 小于 150px
|
|
220
|
-
**标准**:统一 `labelWidth="150px"`(最长标签"隐患排查内容及标准"9字=~126px+padding=142px,150px安全兜底)
|
|
220
|
+
**检测**:`labelWidth` 小于 150px
|
|
221
|
+
**标准**:统一 `labelWidth="150px"`(最长标签"隐患排查内容及标准"9字=~126px+padding=142px,150px安全兜底)
|
|
221
222
|
**注意**:此规则需人工确认,不自动修改(可能有特殊布局需求)
|
|
222
223
|
|
|
223
224
|
---
|
|
@@ -225,16 +226,16 @@ npx wl-ui check --project [项目根目录]
|
|
|
225
226
|
### Category D:状态标签(ElTag)
|
|
226
227
|
|
|
227
228
|
#### R009 — 状态字段纯文本渲染【高危】
|
|
228
|
-
**检测**:column 的 `name` 含 `Status/Level/State` 关键字,但 `defaultNode/defaultSlot` 没有 `renderTagNode` 或 `ElTag`
|
|
229
|
+
**检测**:column 的 `name` 含 `Status/Level/State` 关键字,但 `defaultNode/defaultSlot` 没有 `renderTagNode` 或 `ElTag`
|
|
229
230
|
**标准**:
|
|
230
231
|
- 动态状态(启停/审批/流程)→ `renderTagNode()` / 使用 `COLUMN_AUTO_MAP` 自动映射
|
|
231
|
-
- 常用字段直接用 `defineColumns()` 包裹列定义,自动应用:`enableStatus/approvalStatus/riskLevel/permitStatus/trainStatus/credentialStatus/unifyQuestionStatus` 等
|
|
232
|
-
**参考**:`reference/define-columns.ts` COLUMN_AUTO_MAP 完整列表
|
|
232
|
+
- 常用字段直接用 `defineColumns()` 包裹列定义,自动应用:`enableStatus/approvalStatus/riskLevel/permitStatus/trainStatus/credentialStatus/unifyQuestionStatus` 等
|
|
233
|
+
**参考**:`reference/define-columns.ts` COLUMN_AUTO_MAP 完整列表
|
|
233
234
|
**注意**:此规则需人工确认,不自动修复
|
|
234
235
|
|
|
235
236
|
#### R010 — 分类字段使用填充色 ElTag【中危】
|
|
236
|
-
**检测**:`effect` 不是 `"plain"`,但字段语义是分类/归档属性
|
|
237
|
-
**标准**:分类字段统一 `effect="plain"`(outline 风格)
|
|
237
|
+
**检测**:`effect` 不是 `"plain"`,但字段语义是分类/归档属性
|
|
238
|
+
**标准**:分类字段统一 `effect="plain"`(outline 风格)
|
|
238
239
|
```diff
|
|
239
240
|
- h(ElTag, { type: 'warning' }, () => label)
|
|
240
241
|
+ h(ElTag, { type: 'warning', effect: 'plain' }, () => label)
|
|
@@ -245,8 +246,8 @@ npx wl-ui check --project [项目根目录]
|
|
|
245
246
|
### Category E:弹窗/分页
|
|
246
247
|
|
|
247
248
|
#### R011 — 分页组件位置错误【高危】
|
|
248
|
-
**检测**:`<pagination` 或 `<Pagination` 出现在 `<template #footer>` 内
|
|
249
|
-
**标准**:分页必须在内容区(el-col 内),footer 只放操作按钮
|
|
249
|
+
**检测**:`<pagination` 或 `<Pagination` 出现在 `<template #footer>` 内
|
|
250
|
+
**标准**:分页必须在内容区(el-col 内),footer 只放操作按钮
|
|
250
251
|
**参考**:`reference/SelectPopupCom.vue`
|
|
251
252
|
|
|
252
253
|
#### R012 — 弹窗内 el-table 缺少空状态【中危】
|
|
@@ -273,8 +274,8 @@ npx wl-ui check --project [项目根目录]
|
|
|
273
274
|
> 支持图标类型:`jh-op-del`(删除)、`jh-op-view`(查看/详情)、`jh-op-edit`(编辑)
|
|
274
275
|
|
|
275
276
|
#### R016 — `<style>` 块存在硬编码 hex 颜色【中危】
|
|
276
|
-
**检测**:`<style>` 块中直接写入已有 CSS Token 对应的 hex 颜色值
|
|
277
|
-
**标准**:使用 CSS 变量代替硬编码,确保品牌色切换生效
|
|
277
|
+
**检测**:`<style>` 块中直接写入已有 CSS Token 对应的 hex 颜色值
|
|
278
|
+
**标准**:使用 CSS 变量代替硬编码,确保品牌色切换生效
|
|
278
279
|
```diff
|
|
279
280
|
- color: #4368ff;
|
|
280
281
|
+ color: var(--el-color-primary);
|
|
@@ -284,11 +285,11 @@ npx wl-ui check --project [项目根目录]
|
|
|
284
285
|
**已覆盖颜色**:`#409eff/#3a7afe/#4368ff`→primary,`#fb2323/#f56c6c`→danger,`#0cc859/#67c23a`→success,`#ffaf27/#e6a23c`→warning,`#ecf5ff`→primary-light-9
|
|
285
286
|
|
|
286
287
|
#### R017 — 编号/工号/证件号列缺少 renderBadge【高危】
|
|
287
|
-
**检测**:`columnsDef()` / `columns` 数组中,label 含“编号”“工号”“证件号”但没有 `renderBadge` / `defaultSlot`(脚本式列定义)
|
|
288
|
-
**标准**:所有标识符类字段(射5类)必须使用 `renderBadge(row.xxx)`,包括:
|
|
289
|
-
- label 含“编号”:门岗编号、主机编号、通道编号…
|
|
290
|
-
- label 含“工号”:上报人工号、处置人工号…
|
|
291
|
-
- label 含“证件号”:证件号码、驾驶员证件号码、车主证件号码…
|
|
288
|
+
**检测**:`columnsDef()` / `columns` 数组中,label 含“编号”“工号”“证件号”但没有 `renderBadge` / `defaultSlot`(脚本式列定义)
|
|
289
|
+
**标准**:所有标识符类字段(射5类)必须使用 `renderBadge(row.xxx)`,包括:
|
|
290
|
+
- label 含“编号”:门岗编号、主机编号、通道编号…
|
|
291
|
+
- label 含“工号”:上报人工号、处置人工号…
|
|
292
|
+
- label 含“证件号”:证件号码、驾驶员证件号码、车主证件号码…
|
|
292
293
|
```diff
|
|
293
294
|
- { label: "工号", name: "userNo", minWidth: 100 }
|
|
294
295
|
+ { label: "工号", name: "userNo", minWidth: 100,
|
|
@@ -300,8 +301,8 @@ npx wl-ui check --project [项目根目录]
|
|
|
300
301
|
> **答疑解惑:证件号码要用 badge 吗?** 是的。证件号码是唧18位的唯一标识字符串,badge 的等宽字体让长串数字更易辨识,视觉上传达“这是个标识码”的语义。
|
|
301
302
|
|
|
302
303
|
#### R018 — `logicType:dict` 列缺少 defaultSlot【高危】
|
|
303
|
-
**检测**:`columnsDef()` / `columns` 中某列有 `logicType: BusLogicDataType.dict`,但没有 `defaultSlot` / `renderTag` / `renderDictClassifyTag`(脚本式列定义)
|
|
304
|
-
**标准**:`logicType:dict` 仅提供字符串渲染,必须换为标签渲染:
|
|
304
|
+
**检测**:`columnsDef()` / `columns` 中某列有 `logicType: BusLogicDataType.dict`,但没有 `defaultSlot` / `renderTag` / `renderDictClassifyTag`(脚本式列定义)
|
|
305
|
+
**标准**:`logicType:dict` 仅提供字符串渲染,必须换为标签渲染:
|
|
305
306
|
```diff
|
|
306
307
|
- { name: "trainLevel", label: "培训级别",
|
|
307
308
|
- logicType: BusLogicDataType.dict, logicValue: "trainLevel" }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agile-team/wl-skills-ui",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.6",
|
|
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",
|
|
@@ -11,7 +11,7 @@ applyTo: "**/*.{vue,scss}"
|
|
|
11
11
|
|
|
12
12
|
## 触发短语
|
|
13
13
|
|
|
14
|
-
- "用
|
|
14
|
+
- "用 wl-ui 全量审计当前项目"
|
|
15
15
|
- "audit 流程跑一下"
|
|
16
16
|
- "出一份风格健康度报告"
|
|
17
17
|
|
|
@@ -19,7 +19,7 @@ applyTo: "**/*.{vue,scss}"
|
|
|
19
19
|
|
|
20
20
|
### Phase 1 — 扫描全量
|
|
21
21
|
```bash
|
|
22
|
-
npx
|
|
22
|
+
npx wl-ui scan --target src --outFile audit-report.md
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
### Phase 2 — 按层分组统计
|
|
@@ -11,7 +11,7 @@ applyTo: "**/*.{vue,scss,html}"
|
|
|
11
11
|
|
|
12
12
|
## 触发短语
|
|
13
13
|
|
|
14
|
-
- "用
|
|
14
|
+
- "用 wl-ui 给这个老项目化妆对齐"
|
|
15
15
|
- "legacy-skin 流程跑一下"
|
|
16
16
|
- "skin mode 接入"
|
|
17
17
|
|
|
@@ -19,18 +19,18 @@ applyTo: "**/*.{vue,scss,html}"
|
|
|
19
19
|
|
|
20
20
|
### Phase 0 — 安装/更新 Skill 与 MCP 配置
|
|
21
21
|
```bash
|
|
22
|
-
npx
|
|
23
|
-
npx
|
|
22
|
+
npx wl-ui init --project . --mode skin
|
|
23
|
+
npx wl-ui doctor --project .
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
该命令会写入 AI 编辑器规则、触发提示、`.mcp.json` 和 `.
|
|
26
|
+
该命令会写入 AI 编辑器规则、触发提示、`.mcp.json` 和 `.wl-skills-ui-manifest.json`。已安装项目可改用 `npx wl-ui update --project .`。
|
|
27
27
|
|
|
28
28
|
(AI 严格按序)
|
|
29
29
|
|
|
30
30
|
### Phase 1 — 接入 tokens
|
|
31
31
|
1. 检查 `index.html`,在 `<head>` 内追加:
|
|
32
32
|
```html
|
|
33
|
-
<link rel="stylesheet" href="/node_modules/@agile-team/
|
|
33
|
+
<link rel="stylesheet" href="/node_modules/@agile-team/wl-skills-ui/design/tokens/base.css" />
|
|
34
34
|
```
|
|
35
35
|
2. 检查 `vite.config.ts` / `webpack` 是否能解析 `node_modules` 路径
|
|
36
36
|
|
|
@@ -38,7 +38,7 @@ npx wk-ui doctor --project .
|
|
|
38
38
|
1. 找到全局 SCSS 入口(`src/main.scss` / `src/styles/index.scss`)
|
|
39
39
|
2. 在文件最顶部追加:
|
|
40
40
|
```scss
|
|
41
|
-
@use '@agile-team/
|
|
41
|
+
@use '@agile-team/wl-skills-ui/styles/presets/skin' as *;
|
|
42
42
|
```
|
|
43
43
|
3. **不**引入 `layouts/` 层(避免和老项目布局冲突)
|
|
44
44
|
|
|
@@ -11,7 +11,7 @@ applyTo: "**/*.{vue,ts,scss,html}"
|
|
|
11
11
|
|
|
12
12
|
## 触发短语
|
|
13
13
|
|
|
14
|
-
- "用
|
|
14
|
+
- "用 wl-ui 给新项目接入"
|
|
15
15
|
- "new-project 流程跑一下"
|
|
16
16
|
- "native mode 完整接入"
|
|
17
17
|
|
|
@@ -19,35 +19,35 @@ applyTo: "**/*.{vue,ts,scss,html}"
|
|
|
19
19
|
|
|
20
20
|
### Phase 0 — 安装/更新 Skill 与 MCP 配置
|
|
21
21
|
```bash
|
|
22
|
-
npx
|
|
23
|
-
npx
|
|
22
|
+
npx wl-ui init --project . --mode native
|
|
23
|
+
npx wl-ui doctor --project .
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
该命令会写入 AI 编辑器规则、触发提示、`.mcp.json` 和 `.
|
|
26
|
+
该命令会写入 AI 编辑器规则、触发提示、`.mcp.json` 和 `.wl-skills-ui-manifest.json`。已安装项目可改用 `npx wl-ui update --project .`。
|
|
27
27
|
|
|
28
28
|
|
|
29
29
|
|
|
30
30
|
### Phase 1 — 安装包
|
|
31
31
|
```bash
|
|
32
|
-
pnpm add @agile-team/
|
|
32
|
+
pnpm add @agile-team/wl-skills-ui
|
|
33
33
|
```
|
|
34
34
|
|
|
35
35
|
### Phase 2 — 注入 tokens
|
|
36
36
|
`index.html` `<head>`:
|
|
37
37
|
```html
|
|
38
|
-
<link rel="stylesheet" href="/node_modules/@agile-team/
|
|
38
|
+
<link rel="stylesheet" href="/node_modules/@agile-team/wl-skills-ui/design/tokens/base.css" />
|
|
39
39
|
```
|
|
40
40
|
|
|
41
41
|
### Phase 3 — 接入完整样式
|
|
42
42
|
`src/styles/index.scss`:
|
|
43
43
|
```scss
|
|
44
|
-
@use '@agile-team/
|
|
44
|
+
@use '@agile-team/wl-skills-ui/styles' as *; // 等价于 presets/full
|
|
45
45
|
```
|
|
46
46
|
|
|
47
47
|
### Phase 4 — 接入 runtime
|
|
48
48
|
`src/main.ts`:
|
|
49
49
|
```ts
|
|
50
|
-
import { installCommonPreset } from '@agile-team/
|
|
50
|
+
import { installCommonPreset } from '@agile-team/wl-skills-ui/runtime/common-preset';
|
|
51
51
|
installCommonPreset();
|
|
52
52
|
```
|
|
53
53
|
|
|
@@ -59,7 +59,7 @@ installCommonPreset();
|
|
|
59
59
|
|
|
60
60
|
### Phase 6 — 业务定制 preset(按需)
|
|
61
61
|
```bash
|
|
62
|
-
npx
|
|
62
|
+
npx wl-ui add-preset my-biz
|
|
63
63
|
# 生成 runtime/presets/my-biz.ts,自定义业务字段映射
|
|
64
64
|
```
|
|
65
65
|
|
|
@@ -67,8 +67,8 @@ npx wk-ui add-preset my-biz
|
|
|
67
67
|
`package.json` `scripts`:
|
|
68
68
|
```json
|
|
69
69
|
{
|
|
70
|
-
"ui:check": "
|
|
71
|
-
"ui:fix": "
|
|
70
|
+
"ui:check": "wl-ui check --project .",
|
|
71
|
+
"ui:fix": "wl-ui fix --target src --dry-run"
|
|
72
72
|
}
|
|
73
73
|
```
|
|
74
74
|
|
|
@@ -10,12 +10,12 @@ applyTo: "**/*.{vue,ts}"
|
|
|
10
10
|
|
|
11
11
|
## 触发短语
|
|
12
12
|
|
|
13
|
-
- "用
|
|
13
|
+
- "用 wl-ui 把这个文件迁移到 runtime"
|
|
14
14
|
- "progressive-migrate 流程跑一下"
|
|
15
15
|
|
|
16
16
|
## 前置条件
|
|
17
17
|
|
|
18
|
-
- 已经接入
|
|
18
|
+
- 已经接入 wl-skills-ui
|
|
19
19
|
- 已经拿到目标封装组件的源码控制权(或确认可改造)
|
|
20
20
|
|
|
21
21
|
## 执行步骤
|
|
@@ -35,7 +35,7 @@ applyTo: "**/*.{vue,ts}"
|
|
|
35
35
|
### Phase 4 — 字段映射改造
|
|
36
36
|
- 业务自定义状态字段 → 注册到 `installCommonPreset` 之外的 `add-preset`
|
|
37
37
|
```bash
|
|
38
|
-
npx
|
|
38
|
+
npx wl-ui add-preset my-biz
|
|
39
39
|
```
|
|
40
40
|
|
|
41
41
|
### Phase 5 — 验证
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# 多编辑器兼容指南
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
wl-skills-ui 的 Skills 可通过 `wl-ui init/update` 安装到不同 AI 编辑器。兼容层只负责“把同一套 Skill 知识转换成编辑器可识别的规则文件”,不绑定任何具体业务项目。
|
|
4
4
|
|
|
5
5
|
## 支持的编辑器
|
|
6
6
|
|
|
@@ -20,28 +20,33 @@ wk-skills-ui 的 Skills 可通过 `wk-ui init/update` 安装到不同 AI 编辑
|
|
|
20
20
|
|
|
21
21
|
```bash
|
|
22
22
|
# 自动检测编辑器并安装
|
|
23
|
-
npx
|
|
23
|
+
npx wl-ui init --project .
|
|
24
24
|
|
|
25
25
|
# 指定编辑器
|
|
26
|
-
npx
|
|
27
|
-
npx
|
|
28
|
-
npx
|
|
29
|
-
npx
|
|
30
|
-
npx
|
|
31
|
-
|
|
32
|
-
#
|
|
33
|
-
npx
|
|
34
|
-
npx
|
|
35
|
-
|
|
26
|
+
npx wl-ui init --project . --editor github-copilot
|
|
27
|
+
npx wl-ui init --project . --editor claude-code
|
|
28
|
+
npx wl-ui init --project . --editor cline
|
|
29
|
+
npx wl-ui init --project . --editor agents-generic
|
|
30
|
+
npx wl-ui init --project . --editor qoder
|
|
31
|
+
|
|
32
|
+
# 更新已安装编辑器规则;或一次性刷新全部支持编辑器
|
|
33
|
+
npx wl-ui update --project . --force
|
|
34
|
+
npx wl-ui update --project . --editor all --force
|
|
35
|
+
|
|
36
|
+
# 对比 / 清理
|
|
37
|
+
npx wl-ui diff --project .
|
|
38
|
+
npx wl-ui clean --project . --dry-run
|
|
36
39
|
```
|
|
37
40
|
|
|
41
|
+
`wl-ui update` 未指定 `--editor` 时,会优先刷新 manifest 中记录的编辑器和项目里已存在的编辑器规则目录;指定 `--editor all` 时会把同一套 `skills/**/*.md` 转换并覆盖写入全部支持编辑器。
|
|
42
|
+
|
|
38
43
|
## 安装时还会写入
|
|
39
44
|
|
|
40
|
-
- `.github/
|
|
41
|
-
- `.github/
|
|
42
|
-
- `.mcp.json`:`
|
|
43
|
-
- `.
|
|
45
|
+
- `.github/wl-skills-ui/TRIGGER_PROMPTS.md`:AI 触发提示
|
|
46
|
+
- `.github/wl-skills-ui/README.md`:业务项目内说明
|
|
47
|
+
- `.mcp.json`:`wl-skills-ui` MCP Server 配置
|
|
48
|
+
- `.wl-skills-ui-manifest.json`:安装清单,供 `update/diff/clean/doctor` 使用
|
|
44
49
|
|
|
45
50
|
## 格式模板
|
|
46
51
|
|
|
47
|
-
各编辑器的头模板位于 `headers/`。`
|
|
52
|
+
各编辑器的头模板位于 `headers/`。`wl-ui init/update` 会读取对应 `headers/*.txt`,再拼接 Skill 主体内容生成目标文件。新增编辑器时只需增加 header 并在 CLI/注册表中声明安装路径。
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
用于治理 Element Plus 首批 B 端高频组件族的统一视觉,包括 card、tabs、descriptions、tree、drawer、upload、steps、overlay、navigation、feedback。
|
|
6
6
|
|
|
7
|
-
核心原则:
|
|
7
|
+
核心原则:wl-skills-ui 优先保证样式绝对管控。无论项目使用纯 `el-*`、老旧封装、Base*/jh*/C_*,还是 wl-skills-kit 最佳写法,都先通过 L1/L2 样式层统一视觉,再按需引导规范化重构。
|
|
8
8
|
|
|
9
9
|
## 覆盖组件
|
|
10
10
|
|
|
@@ -51,9 +51,9 @@
|
|
|
51
51
|
## AI 使用流程
|
|
52
52
|
|
|
53
53
|
1. 识别当前页面是否命中上述组件族。
|
|
54
|
-
2. 优先确认项目是否加载 `@agile-team/
|
|
54
|
+
2. 优先确认项目是否加载 `@agile-team/wl-skills-ui/styles` 或 `styles/presets/skin`。
|
|
55
55
|
3. 运行 `wks_ui_scan --output json` 获取 `componentCoverage`。
|
|
56
|
-
4. 如果只是视觉不统一,优先使用
|
|
56
|
+
4. 如果只是视觉不统一,优先使用 wl-skills-ui 样式层解决。
|
|
57
57
|
5. 如果扫描结果提示页面结构、BaseTable、renderOps 等规范问题,再桥接 wl-skills-kit。
|
|
58
58
|
|
|
59
59
|
## 推荐 MCP
|
|
@@ -50,7 +50,7 @@ applyTo: "**/*.{ts,vue}"
|
|
|
50
50
|
## 静态 Map(字典固定时)
|
|
51
51
|
|
|
52
52
|
```typescript
|
|
53
|
-
import { renderTagNode, renderClassifyTag } from '@agile-team/
|
|
53
|
+
import { renderTagNode, renderClassifyTag } from '@agile-team/wl-skills-ui/runtime';
|
|
54
54
|
|
|
55
55
|
export const MY_STATUS_MAP = {
|
|
56
56
|
"0": { label: "待处理", type: "info" },
|
|
@@ -69,7 +69,7 @@ export const MY_STATUS_MAP = {
|
|
|
69
69
|
## 动态字典(后端配置时)
|
|
70
70
|
|
|
71
71
|
```typescript
|
|
72
|
-
import { renderDictClassifyTag } from '@agile-team/
|
|
72
|
+
import { renderDictClassifyTag } from '@agile-team/wl-skills-ui/runtime/common-preset';
|
|
73
73
|
|
|
74
74
|
// 只需定义颜色映射,label 由字典动态获取
|
|
75
75
|
export const TRAIN_LEVEL_COLOR_MAP: Record<string, string> = {
|
|
@@ -27,7 +27,7 @@ applyTo: "**/*.vue"
|
|
|
27
27
|
|
|
28
28
|
### 方式二:命令触发
|
|
29
29
|
```
|
|
30
|
-
用
|
|
30
|
+
用 wl-ui 的 layouts/list-page skill 检查这个文件
|
|
31
31
|
→ AI 加载本 SKILL.md,对当前文件做 Detect → Diagnose → Repair
|
|
32
32
|
```
|
|
33
33
|
|
|
@@ -99,7 +99,7 @@ applyTo: "**/*.vue"
|
|
|
99
99
|
|
|
100
100
|
```bash
|
|
101
101
|
# 直接在编辑器让 AI:
|
|
102
|
-
# 按
|
|
102
|
+
# 按 wl-ui 的 templates/list-page/TPL-LIST.md 创建该页面
|
|
103
103
|
```
|
|
104
104
|
|
|
105
105
|
---
|
|
@@ -24,33 +24,33 @@ applyTo: "**"
|
|
|
24
24
|
### 全量审计(推荐)
|
|
25
25
|
|
|
26
26
|
```bash
|
|
27
|
-
npx
|
|
27
|
+
npx wl-ui all --project . --outFile audit-report.md
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
### 分层审计
|
|
31
31
|
|
|
32
32
|
```bash
|
|
33
33
|
# 仅看 L0 颜色 token 违规
|
|
34
|
-
npx
|
|
34
|
+
npx wl-ui scan --target src --layer L0 --outFile l0-report.md
|
|
35
35
|
|
|
36
36
|
# 仅看 L1 Element Plus 控件问题
|
|
37
|
-
npx
|
|
37
|
+
npx wl-ui scan --target src --layer L1 --outFile l1-report.md
|
|
38
38
|
|
|
39
39
|
# 仅看 L2 封装组件问题(vendor 层)
|
|
40
|
-
npx
|
|
40
|
+
npx wl-ui scan --target src --layer L2 --outFile l2-report.md
|
|
41
41
|
|
|
42
42
|
# 化妆模式项目只看 L0/L1/L2(跳过 L3/L4)
|
|
43
|
-
npx
|
|
43
|
+
npx wl-ui scan --target src --mode skin --outFile skin-audit.md
|
|
44
44
|
```
|
|
45
45
|
|
|
46
46
|
### 精准 vendor 审计
|
|
47
47
|
|
|
48
48
|
```bash
|
|
49
49
|
# 仅扫描 BaseTable 相关规则
|
|
50
|
-
npx
|
|
50
|
+
npx wl-ui scan --target src --vendor base-table
|
|
51
51
|
|
|
52
52
|
# 仅扫描 Element Plus 原生控件
|
|
53
|
-
npx
|
|
53
|
+
npx wl-ui scan --target src --vendor element
|
|
54
54
|
```
|
|
55
55
|
|
|
56
56
|
---
|
|
@@ -60,13 +60,13 @@ npx wk-ui scan --target src --vendor element
|
|
|
60
60
|
在 AI 编辑器中触发:
|
|
61
61
|
|
|
62
62
|
```
|
|
63
|
-
用
|
|
63
|
+
用 wl-ui 的 ops/audit skill 对当前项目做全量审计
|
|
64
64
|
```
|
|
65
65
|
|
|
66
66
|
**AI 执行步骤:**
|
|
67
67
|
|
|
68
|
-
1. `npx
|
|
69
|
-
2. `npx
|
|
68
|
+
1. `npx wl-ui check --project .` → 接入完整性(I001-I005)
|
|
69
|
+
2. `npx wl-ui scan --target src --output json --outFile /tmp/audit.json` → JSON 格式结果
|
|
70
70
|
3. 读取 JSON,按如下格式汇报:
|
|
71
71
|
|
|
72
72
|
```markdown
|
|
@@ -81,7 +81,7 @@ npx wk-ui scan --target src --vendor element
|
|
|
81
81
|
...
|
|
82
82
|
|
|
83
83
|
### 修复建议(优先级排序)
|
|
84
|
-
1. 运行 `npx
|
|
84
|
+
1. 运行 `npx wl-ui fix --target src --dry-run` 先预览 A 类自动修复
|
|
85
85
|
2. 对 R009/R010 状态字段手工确认并应用 renderTagNode
|
|
86
86
|
3. 对 L0 颜色违规批量替换为 CSS Token
|
|
87
87
|
```
|
|
@@ -94,11 +94,11 @@ npx wk-ui scan --target src --vendor element
|
|
|
94
94
|
|
|
95
95
|
| 编号 | 检查项 | 说明 |
|
|
96
96
|
|---|---|---|
|
|
97
|
-
| I001 | tokens.css / base.css 已引入 | index.html `<head>` 中有
|
|
98
|
-
| I002 | styles 预设已引入 | SCSS 入口含 `@use '@agile-team/
|
|
97
|
+
| I001 | tokens.css / base.css 已引入 | index.html `<head>` 中有 wl-skills-ui tokens |
|
|
98
|
+
| I002 | styles 预设已引入 | SCSS 入口含 `@use '@agile-team/wl-skills-ui/styles...'` |
|
|
99
99
|
| I003 | runtime preset 已安装 | main.ts 含 `installCommonPreset()` |
|
|
100
100
|
| I004 | skills 已安装 | `.github/instructions/` 或 `.cursor/rules/` 等目录存在 wk-skills 文件 |
|
|
101
|
-
| I005 | package.json 版本 | @agile-team/
|
|
101
|
+
| I005 | package.json 版本 | @agile-team/wl-skills-ui 版本 ≥ 0.3.0 |
|
|
102
102
|
|
|
103
103
|
---
|
|
104
104
|
|
package/skills/ops/fix/SKILL.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
description: |
|
|
3
|
-
|
|
3
|
+
wl-ui fix 自动修复指南 — A 类问题(attr 缺失、hex 颜色)的批量自动修复,
|
|
4
4
|
支持 dry-run 预览,幂等安全,不修改已符合标准的文件。
|
|
5
5
|
applyTo: "**"
|
|
6
6
|
---
|
|
@@ -21,19 +21,19 @@ applyTo: "**"
|
|
|
21
21
|
|
|
22
22
|
```bash
|
|
23
23
|
# 先预览(推荐!)
|
|
24
|
-
npx
|
|
24
|
+
npx wl-ui fix --target src --dry-run
|
|
25
25
|
|
|
26
26
|
# 确认后执行
|
|
27
|
-
npx
|
|
27
|
+
npx wl-ui fix --target src
|
|
28
28
|
|
|
29
29
|
# 只修复特定目录
|
|
30
|
-
npx
|
|
30
|
+
npx wl-ui fix --target src/views/check
|
|
31
31
|
```
|
|
32
32
|
|
|
33
33
|
## 修复后必须验证
|
|
34
34
|
|
|
35
35
|
```bash
|
|
36
|
-
npx
|
|
36
|
+
npx wl-ui scan --target src --outFile /tmp/after-fix.md
|
|
37
37
|
```
|
|
38
38
|
|
|
39
39
|
对比修复前后报告,确认 A 类问题归零,剩余仅为需人工处理的规则。
|
package/skills/ops/fix/USAGE.md
CHANGED
|
@@ -11,14 +11,14 @@
|
|
|
11
11
|
|
|
12
12
|
```bash
|
|
13
13
|
# 1. 先扫描了解情况
|
|
14
|
-
npx
|
|
14
|
+
npx wl-ui scan --target src --outFile /tmp/before.md
|
|
15
15
|
|
|
16
16
|
# 2. dry-run 预览修复效果
|
|
17
|
-
npx
|
|
17
|
+
npx wl-ui fix --target src --dry-run
|
|
18
18
|
|
|
19
19
|
# 3. 确认无误后执行
|
|
20
|
-
npx
|
|
20
|
+
npx wl-ui fix --target src
|
|
21
21
|
|
|
22
22
|
# 4. 验证效果
|
|
23
|
-
npx
|
|
23
|
+
npx wl-ui scan --target src --outFile /tmp/after.md
|
|
24
24
|
```
|
|
@@ -49,12 +49,12 @@ Step 7 — 旧 vendor 化妆层(_base-table.scss 等)按需保留或删除
|
|
|
49
49
|
在 AI 编辑器中触发:
|
|
50
50
|
|
|
51
51
|
```
|
|
52
|
-
用
|
|
52
|
+
用 wl-ui 的 ops/migrate skill 帮我迁移 src/pages/safety/ 目录
|
|
53
53
|
```
|
|
54
54
|
|
|
55
55
|
**AI 执行步骤:**
|
|
56
56
|
|
|
57
|
-
1. 扫描目标目录:`npx
|
|
57
|
+
1. 扫描目标目录:`npx wl-ui scan --target src/pages/safety --output json`
|
|
58
58
|
2. 识别迁移优先级:
|
|
59
59
|
- R013(columnsDef 旧格式)→ 优先迁移到 `defineColumns`
|
|
60
60
|
- R004/R005(按钮规则)→ 用 `renderOps` 替换
|
|
@@ -81,7 +81,7 @@ columnsDef() {
|
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
// ✅ 新写法
|
|
84
|
-
import { defineColumns, renderOps } from '@agile-team/
|
|
84
|
+
import { defineColumns, renderOps } from '@agile-team/wl-skills-ui/runtime';
|
|
85
85
|
|
|
86
86
|
columnsDef() {
|
|
87
87
|
return defineColumns([
|
|
@@ -101,8 +101,8 @@ columnsDef() {
|
|
|
101
101
|
当项目有自定义状态字段时,扩展到 common preset:
|
|
102
102
|
|
|
103
103
|
```typescript
|
|
104
|
-
// runtime/presets/my-biz.ts(用
|
|
105
|
-
import { createPreset } from '@agile-team/
|
|
104
|
+
// runtime/presets/my-biz.ts(用 wl-ui add-preset my-biz 生成)
|
|
105
|
+
import { createPreset } from '@agile-team/wl-skills-ui/runtime';
|
|
106
106
|
|
|
107
107
|
export const installMyBizPreset = createPreset({
|
|
108
108
|
name: 'my-biz',
|
|
@@ -126,9 +126,9 @@ export const installMyBizPreset = createPreset({
|
|
|
126
126
|
|
|
127
127
|
```scss
|
|
128
128
|
// 确认没有布局冲突后,把:
|
|
129
|
-
@use '@agile-team/
|
|
129
|
+
@use '@agile-team/wl-skills-ui/styles/presets/skin' as *;
|
|
130
130
|
// 改为:
|
|
131
|
-
@use '@agile-team/
|
|
131
|
+
@use '@agile-team/wl-skills-ui/styles' as *;
|
|
132
132
|
```
|
|
133
133
|
|
|
134
134
|
**验证方式:** 跑冒烟测试,确认以下页面类型视觉无异常:
|
package/skills/ops/scan/SKILL.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
description: |
|
|
3
|
-
|
|
3
|
+
wl-ui scan 扫描器使用指南 — 如何运行风格扫描、接入完整性检查,解读报告格式。
|
|
4
4
|
applyTo: "**"
|
|
5
5
|
---
|
|
6
6
|
|
|
@@ -10,16 +10,16 @@ applyTo: "**"
|
|
|
10
10
|
|
|
11
11
|
```bash
|
|
12
12
|
# 一站式(推荐):接入完整性 + 风格扫描 + 生成 Markdown 报告
|
|
13
|
-
npx
|
|
13
|
+
npx wl-ui all --project . --outFile report.md
|
|
14
14
|
|
|
15
15
|
# 仅风格扫描
|
|
16
|
-
npx
|
|
16
|
+
npx wl-ui scan --target src
|
|
17
17
|
|
|
18
18
|
# 仅接入完整性检查(I001~I004)
|
|
19
|
-
npx
|
|
19
|
+
npx wl-ui check --project .
|
|
20
20
|
|
|
21
21
|
# JSON 格式输出(方便程序处理)
|
|
22
|
-
npx
|
|
22
|
+
npx wl-ui scan --target src --output json
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
## 参数说明
|
|
@@ -37,8 +37,8 @@ npx wk-ui scan --target src --output json
|
|
|
37
37
|
|
|
38
38
|
```yaml
|
|
39
39
|
# .github/workflows/style-check.yml
|
|
40
|
-
- name:
|
|
41
|
-
run: npx
|
|
40
|
+
- name: wl-skills-ui 风格检查
|
|
41
|
+
run: npx wl-ui all --project . --fail-on-error
|
|
42
42
|
```
|
|
43
43
|
|
|
44
44
|
## 报告格式说明
|
|
@@ -46,7 +46,7 @@ npx wk-ui scan --target src --output json
|
|
|
46
46
|
```
|
|
47
47
|
一、接入完整性仪表盘
|
|
48
48
|
✅ I001 — tokens.css 已在 index.html 引入
|
|
49
|
-
✅ I002 — 全局 SCSS 已引入
|
|
49
|
+
✅ I002 — 全局 SCSS 已引入 wl-skills-ui 样式
|
|
50
50
|
✅ I003 — runtime 已被引用
|
|
51
51
|
✅ I004 — peerDependencies 版本满足要求
|
|
52
52
|
|
package/skills/ops/scan/USAGE.md
CHANGED
|
@@ -71,10 +71,10 @@ applyTo: "**/*.{vue,scss,css}"
|
|
|
71
71
|
|
|
72
72
|
```bash
|
|
73
73
|
# 检测 hex 颜色违规
|
|
74
|
-
npx
|
|
74
|
+
npx wl-ui scan --target src --outFile color-report.md
|
|
75
75
|
|
|
76
76
|
# 自动修复(仅修已知 Token 的 hex,不修 ECharts 等特殊场景)
|
|
77
|
-
npx
|
|
77
|
+
npx wl-ui fix --target src
|
|
78
78
|
```
|
|
79
79
|
|
|
80
80
|
## 已覆盖的 hex 映射
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
|
|
12
12
|
```bash
|
|
13
13
|
# 扫描
|
|
14
|
-
npx
|
|
14
|
+
npx wl-ui scan --target src --output json | grep '"rule":"R01[678]"'
|
|
15
15
|
|
|
16
16
|
# 修复(会替换所有已知映射的 hex)
|
|
17
|
-
npx
|
|
18
|
-
npx
|
|
17
|
+
npx wl-ui fix --target src --dry-run # 先 dry-run 看效果
|
|
18
|
+
npx wl-ui fix --target src # 确认后执行
|
|
19
19
|
```
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
description: |
|
|
3
|
-
历史项目 UI 全量迁移 Skill — 针对从旧版本(无
|
|
3
|
+
历史项目 UI 全量迁移 Skill — 针对从旧版本(无 wl-skills-ui)升级到标准规范的完整改造流程。
|
|
4
4
|
包含:依赖安装、tokens 接入、SCSS 替换、runtime 注册、columnsDef 迁移、全量扫描验证。
|
|
5
5
|
applyTo: "**"
|
|
6
6
|
---
|
|
@@ -9,7 +9,7 @@ applyTo: "**"
|
|
|
9
9
|
|
|
10
10
|
## 适用场景
|
|
11
11
|
|
|
12
|
-
- 已有业务系统从零接入
|
|
12
|
+
- 已有业务系统从零接入 wl-skills-ui
|
|
13
13
|
- 旧版 jh-ui 系统升级到新规范
|
|
14
14
|
- 统一多个历史项目到同一 UI 标准
|
|
15
15
|
|
|
@@ -20,7 +20,7 @@ applyTo: "**"
|
|
|
20
20
|
### Step 1 — 安装依赖
|
|
21
21
|
|
|
22
22
|
```bash
|
|
23
|
-
pnpm add @agile-team/
|
|
23
|
+
pnpm add @agile-team/wl-skills-ui
|
|
24
24
|
```
|
|
25
25
|
|
|
26
26
|
### Step 2 — 接入 CSS Tokens
|
|
@@ -30,7 +30,7 @@ pnpm add @agile-team/wk-skills-ui
|
|
|
30
30
|
```html
|
|
31
31
|
<link
|
|
32
32
|
rel="stylesheet"
|
|
33
|
-
href="/node_modules/@agile-team/
|
|
33
|
+
href="/node_modules/@agile-team/wl-skills-ui/design/tokens/base.css"
|
|
34
34
|
/>
|
|
35
35
|
```
|
|
36
36
|
|
|
@@ -39,9 +39,9 @@ pnpm add @agile-team/wk-skills-ui
|
|
|
39
39
|
在全局 SCSS 入口(`src/assets/style/main.scss` 或 `src/styles/index.scss`)追加:
|
|
40
40
|
|
|
41
41
|
```scss
|
|
42
|
-
@use "@agile-team/
|
|
42
|
+
@use "@agile-team/wl-skills-ui/styles" as *;
|
|
43
43
|
// 可选 portal 视觉增强:
|
|
44
|
-
// @use '@agile-team/
|
|
44
|
+
// @use '@agile-team/wl-skills-ui/styles/portal';
|
|
45
45
|
```
|
|
46
46
|
|
|
47
47
|
> 注意:如果项目有旧的 element-plus 覆盖样式,确认无冲突后可删除旧样式。
|
|
@@ -51,7 +51,7 @@ pnpm add @agile-team/wk-skills-ui
|
|
|
51
51
|
在 `src/main.ts` 中(`app.mount` 之前):
|
|
52
52
|
|
|
53
53
|
```typescript
|
|
54
|
-
import { installCommonPreset } from "@agile-team/
|
|
54
|
+
import { installCommonPreset } from "@agile-team/wl-skills-ui/runtime/common-preset";
|
|
55
55
|
installCommonPreset();
|
|
56
56
|
```
|
|
57
57
|
|
|
@@ -68,13 +68,13 @@ import { defineColumns } from "@/util/define-columns";
|
|
|
68
68
|
import { renderOps } from "@/util/ag-cell-renders";
|
|
69
69
|
|
|
70
70
|
// ✅ 新写法
|
|
71
|
-
import { defineColumns, renderOps } from "@agile-team/
|
|
71
|
+
import { defineColumns, renderOps } from "@agile-team/wl-skills-ui/runtime";
|
|
72
72
|
```
|
|
73
73
|
|
|
74
74
|
然后运行扫描:
|
|
75
75
|
|
|
76
76
|
```bash
|
|
77
|
-
npx
|
|
77
|
+
npx wl-ui all --project . --outFile migration-report.md
|
|
78
78
|
```
|
|
79
79
|
|
|
80
80
|
按报告逐步修复 R001~R018 违规项。
|
|
@@ -84,13 +84,13 @@ npx wk-ui all --project . --outFile migration-report.md
|
|
|
84
84
|
## 验收检查清单
|
|
85
85
|
|
|
86
86
|
```bash
|
|
87
|
-
npx
|
|
87
|
+
npx wl-ui check --project .
|
|
88
88
|
```
|
|
89
89
|
|
|
90
90
|
所有 I001~I004 必须全部通过:
|
|
91
91
|
|
|
92
92
|
- ✅ I001:`index.html` 中存在 `tokens.css` link 标签
|
|
93
|
-
- ✅ I002:全局 SCSS 中引入
|
|
93
|
+
- ✅ I002:全局 SCSS 中引入 wl-skills-ui 样式
|
|
94
94
|
- ✅ I003:`runtime` 已被引用(ag-cell-renders 或 package import)
|
|
95
95
|
- ✅ I004:peer dependencies 版本满足要求
|
|
96
96
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## 调用方式
|
|
4
4
|
|
|
5
5
|
```
|
|
6
|
-
帮我把这个旧项目接入
|
|
6
|
+
帮我把这个旧项目接入 wl-skills-ui
|
|
7
7
|
这个项目还没有用统一风格库,帮我按标准接入
|
|
8
8
|
```
|
|
9
9
|
|
|
@@ -11,18 +11,18 @@
|
|
|
11
11
|
|
|
12
12
|
```bash
|
|
13
13
|
# 1. 安装
|
|
14
|
-
pnpm add @agile-team/
|
|
14
|
+
pnpm add @agile-team/wl-skills-ui
|
|
15
15
|
|
|
16
16
|
# 2. 接入完整性检查(看缺什么)
|
|
17
|
-
npx
|
|
17
|
+
npx wl-ui check --project .
|
|
18
18
|
|
|
19
19
|
# 3. 按 check 输出逐步补齐 Step 2~5
|
|
20
20
|
|
|
21
21
|
# 4. 全量扫描
|
|
22
|
-
npx
|
|
22
|
+
npx wl-ui all --project . --outFile report.md
|
|
23
23
|
|
|
24
24
|
# 5. 批量修复 A 类问题
|
|
25
|
-
npx
|
|
25
|
+
npx wl-ui fix --target src
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
## 预计工作量参考
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
description: |
|
|
3
|
-
UI 风格对齐 Skill — 扫描业务系统 Vue SFC 文件,识别与
|
|
3
|
+
UI 风格对齐 Skill — 扫描业务系统 Vue SFC 文件,识别与 wl-skills-ui 标准不一致的写法,
|
|
4
4
|
生成整改清单,经用户确认后执行自动修复,最终验证归零。
|
|
5
5
|
覆盖:表格对齐/空状态、按钮图标化、表单控件尺寸、弹窗分页位置、颜色 Token。
|
|
6
6
|
applyTo: "**/*.vue"
|
|
@@ -14,13 +14,13 @@ applyTo: "**/*.vue"
|
|
|
14
14
|
|
|
15
15
|
```bash
|
|
16
16
|
# 推荐:一站式扫描(接入完整性 + 风格 + 报告)
|
|
17
|
-
npx
|
|
17
|
+
npx wl-ui all --project [项目根目录] --outFile /tmp/scan-result.md
|
|
18
18
|
|
|
19
19
|
# 单独风格扫描
|
|
20
|
-
npx
|
|
20
|
+
npx wl-ui scan --target [项目src目录] --outFile /tmp/scan-result.md
|
|
21
21
|
|
|
22
22
|
# 接入完整性检查
|
|
23
|
-
npx
|
|
23
|
+
npx wl-ui check --project [项目根目录]
|
|
24
24
|
```
|
|
25
25
|
|
|
26
26
|
读取扫描输出,提取:
|
|
@@ -56,7 +56,7 @@ npx wk-ui check --project [项目根目录]
|
|
|
56
56
|
|
|
57
57
|
按确认范围执行:
|
|
58
58
|
|
|
59
|
-
- **A 类(attr 缺失 / hex 颜色)** → `npx
|
|
59
|
+
- **A 类(attr 缺失 / hex 颜色)** → `npx wl-ui fix --target [src] [--dry-run]`
|
|
60
60
|
- **B 类(结构改造,R004/R013/R015)** → AI 逐文件编辑
|
|
61
61
|
|
|
62
62
|
每修复一个文件,输出该文件修改摘要。
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
```
|
|
8
8
|
帮我检查一下这个项目的 UI 风格是否符合规范
|
|
9
|
-
扫描 src/ 目录,找出所有不符合
|
|
9
|
+
扫描 src/ 目录,找出所有不符合 wl-skills-ui 标准的地方
|
|
10
10
|
对 src/views/safety/ 下的文件做风格对齐修复
|
|
11
11
|
```
|
|
12
12
|
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
用户:帮我对 src/views/check/ 目录做完整的风格扫描修复
|
|
17
17
|
|
|
18
18
|
AI 执行:
|
|
19
|
-
1. [Phase 1] npx
|
|
19
|
+
1. [Phase 1] npx wl-ui all --project . --outFile /tmp/scan.md
|
|
20
20
|
2. [Phase 2] 展示摘要(文件数、问题数、按规则分类)
|
|
21
21
|
3. [Phase 3] 询问:是否全量修复?哪些文件需要跳过?
|
|
22
|
-
4. [Phase 4] 执行修复(A 类 →
|
|
22
|
+
4. [Phase 4] 执行修复(A 类 → wl-ui fix;B 类 → 逐文件编辑)
|
|
23
23
|
5. [Phase 5] 重新扫描,展示 before/after 对比
|
|
24
24
|
```
|
|
25
25
|
|
|
@@ -13,14 +13,14 @@ applyTo: "**/*.{ts,vue}"
|
|
|
13
13
|
2. 操作列统一用 `renderOps([...])` — 图标按钮系统,自动分隔线 + stopPropagation
|
|
14
14
|
3. 状态字段用 `renderTagNode()` / `renderClassifyTag()` — 彩色 Tag,见 tag-status/SKILL.md
|
|
15
15
|
|
|
16
|
-
> 与 `wl-skills-kit` 协同说明:本 Skill 负责 AG Grid/列渲染/操作列 runtime 能力,也要服务非 kit 项目的通用 AG Grid 场景。若扫描发现项目希望升级为团队最佳实践,再提示使用 `wl-skills-kit` 进行页面结构和工作流规范化;在此之前,`
|
|
16
|
+
> 与 `wl-skills-kit` 协同说明:本 Skill 负责 AG Grid/列渲染/操作列 runtime 能力,也要服务非 kit 项目的通用 AG Grid 场景。若扫描发现项目希望升级为团队最佳实践,再提示使用 `wl-skills-kit` 进行页面结构和工作流规范化;在此之前,`wl-skills-ui` 仍应保证样式和渲染能力可独立生效。
|
|
17
17
|
|
|
18
18
|
---
|
|
19
19
|
|
|
20
20
|
## 标准列定义写法
|
|
21
21
|
|
|
22
22
|
```typescript
|
|
23
|
-
import { defineColumns, renderOps, renderTagNode, renderBadge } from '@agile-team/
|
|
23
|
+
import { defineColumns, renderOps, renderTagNode, renderBadge } from '@agile-team/wl-skills-ui/runtime';
|
|
24
24
|
|
|
25
25
|
columnsDef(): TableColumnDesc<any>[] {
|
|
26
26
|
return defineColumns([
|
|
@@ -47,7 +47,7 @@ applyTo: "**/*.vue"
|
|
|
47
47
|
|
|
48
48
|
## 与 wl-skills-kit 的协同闭环
|
|
49
49
|
|
|
50
|
-
本 Skill 必须保留对多种 BaseTable/封装表格写法的识别和样式覆盖能力,不要求老项目先改成 `wl-skills-kit` 最佳实践。扫描时先判断当前写法能否通过化妆层统一视觉;若用户希望进一步规范化业务代码,再提示可使用 `wl-skills-kit` 按团队模板重构为 `BaseTable render-type="agGrid" + cid + defineColumns/renderOps`。也就是说:`
|
|
50
|
+
本 Skill 必须保留对多种 BaseTable/封装表格写法的识别和样式覆盖能力,不要求老项目先改成 `wl-skills-kit` 最佳实践。扫描时先判断当前写法能否通过化妆层统一视觉;若用户希望进一步规范化业务代码,再提示可使用 `wl-skills-kit` 按团队模板重构为 `BaseTable render-type="agGrid" + cid + defineColumns/renderOps`。也就是说:`wl-skills-ui` 负责先统一样式,`wl-skills-kit` 负责可选的规范化生成/修复。
|
|
51
51
|
|
|
52
52
|
## 全局样式来源
|
|
53
53
|
|
|
@@ -22,7 +22,7 @@ import { ElMessage } from "element-plus";
|
|
|
22
22
|
import { usePageHook } from "@/hooks/page";
|
|
23
23
|
import type { PageResult } from "@/types";
|
|
24
24
|
|
|
25
|
-
import { renderOps, defineColumns } from "@agile-team/
|
|
25
|
+
import { renderOps, defineColumns } from "@agile-team/wl-skills-ui/runtime";
|
|
26
26
|
|
|
27
27
|
import MyModal from "./MyModal.vue";
|
|
28
28
|
import type { MyItem } from "./types";
|
|
@@ -17,10 +17,10 @@ src/
|
|
|
17
17
|
## 全局入口 (src/styles/index.scss)
|
|
18
18
|
|
|
19
19
|
```scss
|
|
20
|
-
// 1.
|
|
20
|
+
// 1. wl-skills-ui 设计 token(必须在 index.html <link> 加载 design/tokens/base.css)
|
|
21
21
|
|
|
22
|
-
// 2.
|
|
23
|
-
@use "@agile-team/
|
|
22
|
+
// 2. wl-skills-ui 样式重置
|
|
23
|
+
@use "@agile-team/wl-skills-ui/styles" as *;
|
|
24
24
|
|
|
25
25
|
// 3. 项目自定义变量
|
|
26
26
|
@use "./variables" as *;
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
```typescript
|
|
8
8
|
// [Module]List.ts — 页面逻辑
|
|
9
|
-
import { defineColumns, renderOps, renderTagNode } from '@agile-team/
|
|
9
|
+
import { defineColumns, renderOps, renderTagNode } from '@agile-team/wl-skills-ui/runtime';
|
|
10
10
|
import type { TableColumnDesc } from '@/types/table';
|
|
11
11
|
|
|
12
12
|
columnsDef(): TableColumnDesc<any>[] {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> 适用:带搜索区 + 工具栏 + 表格 + 分页的标准后台管理列表页。
|
|
4
4
|
|
|
5
|
-
> 与 `wl-skills-kit` 协同说明:本模板是 `
|
|
5
|
+
> 与 `wl-skills-kit` 协同说明:本模板是 `wl-skills-ui` 面向通用项目的 UI 示例,保留对纯 Element Plus、老旧封装和非 kit 项目的参考价值。若项目选择使用 `wl-skills-kit` 生成或规范化重构页面,则页面结构以 kit 的 `page-codegen/templates/universal/TPL-LIST.md` 为准;`wl-skills-ui` 继续负责 tokens/styles、化妆层、`defineColumns()`、`renderOps()` 等 UI 能力。
|
|
6
6
|
|
|
7
7
|
## 文件结构
|
|
8
8
|
|
|
@@ -77,7 +77,7 @@ src/views/[模块]/
|
|
|
77
77
|
|
|
78
78
|
<script setup lang="ts">
|
|
79
79
|
import { ref, reactive } from "vue";
|
|
80
|
-
import { defineColumns, renderOps } from "@agile-team/
|
|
80
|
+
import { defineColumns, renderOps } from "@agile-team/wl-skills-ui/runtime";
|
|
81
81
|
import { usePageHook } from "@/composables/usePageHook";
|
|
82
82
|
import ModuleModal from "./components/ModuleModal.vue";
|
|
83
83
|
import { getModuleList } from "@/api/module";
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> 适用:左侧组织树 + 右侧数据列表的经典后台管理布局。
|
|
4
4
|
|
|
5
|
-
> 与 `wl-skills-kit` 协同说明:本模板是 `
|
|
5
|
+
> 与 `wl-skills-kit` 协同说明:本模板是 `wl-skills-ui` 面向通用项目的 UI 示例,保留对纯 Element Plus、老旧封装和非 kit 项目的参考价值。若项目选择使用 `wl-skills-kit` 生成或规范化重构页面,则页面结构以 kit 的 `page-codegen/templates/universal/TPL-TREE-LIST.md` 为准;`wl-skills-ui` 继续负责 tokens/styles、化妆层、`defineColumns()`、`renderOps()` 等 UI 能力。
|
|
6
6
|
|
|
7
7
|
## 布局结构
|
|
8
8
|
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
|
|
96
96
|
<script setup lang="ts">
|
|
97
97
|
import { ref, reactive, watch } from "vue";
|
|
98
|
-
import { defineColumns, renderOps } from "@agile-team/
|
|
98
|
+
import { defineColumns, renderOps } from "@agile-team/wl-skills-ui/runtime";
|
|
99
99
|
|
|
100
100
|
const treeRef = ref();
|
|
101
101
|
const treeKeyword = ref("");
|
|
@@ -151,7 +151,7 @@ function columnsDef() {
|
|
|
151
151
|
</script>
|
|
152
152
|
|
|
153
153
|
<style lang="scss" scoped>
|
|
154
|
-
// 注意:.tree-list-container 的 flex 布局已由
|
|
154
|
+
// 注意:.tree-list-container 的 flex 布局已由 wl-skills-ui/styles/shared/_layout.scss 提供
|
|
155
155
|
// 只需保证 class 名一致,样式自动生效
|
|
156
156
|
.tree-list-container {
|
|
157
157
|
display: flex;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# [项目名称] UI 风格优化记录报告
|
|
2
2
|
|
|
3
|
-
**项目**:[项目名称]([业务描述]子应用)
|
|
4
|
-
**技术栈**:Vue 3 + Vite + TypeScript + Element Plus + AG Grid + jh-ui 定制库
|
|
5
|
-
**关联仓库**:[关联仓库名称]
|
|
6
|
-
**报告周期**:[时间范围]
|
|
7
|
-
**整理时间**:[完成日期]
|
|
3
|
+
**项目**:[项目名称]([业务描述]子应用)
|
|
4
|
+
**技术栈**:Vue 3 + Vite + TypeScript + Element Plus + AG Grid + jh-ui 定制库
|
|
5
|
+
**关联仓库**:[关联仓库名称]
|
|
6
|
+
**报告周期**:[时间范围]
|
|
7
|
+
**整理时间**:[完成日期]
|
|
8
8
|
**报告对象**:项目经理、技术负责人、部门负责人
|
|
9
9
|
|
|
10
10
|
---
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
|
|
16
16
|
本次 UI 风格优化的背景是:[项目] 系统历史页面由多名开发人员分批次迭代完成,各模块在控件规格、表格渲染、操作按钮形式、颜色使用等方面存在明显不一致,导致用户使用时体感割裂、视觉混乱。
|
|
17
17
|
|
|
18
|
-
本次优化以**"不改业务逻辑、只统一视觉与交互规范"**为原则,基于 `
|
|
18
|
+
本次优化以**"不改业务逻辑、只统一视觉与交互规范"**为原则,基于 `wl-skills-ui` 规范工具库,在 [项目] 全量落地。
|
|
19
19
|
|
|
20
20
|
---
|
|
21
21
|
|
|
@@ -46,7 +46,7 @@ Token 入口:[Token 文件路径]
|
|
|
46
46
|
### 2.3 样式分层策略
|
|
47
47
|
|
|
48
48
|
```
|
|
49
|
-
|
|
49
|
+
wl-skills-ui presets/[preset].scss ← 第1层:Token 变量 + L1 element + L2 vendors(自动覆盖)
|
|
50
50
|
src/assets/style/element.scss ← 第2层:EP 控件局部补丁
|
|
51
51
|
src/assets/style/main.scss ← 第3层:全局共享组件样式
|
|
52
52
|
views/[module]/style/index.scss ← 第4层:模块级布局补丁(仅限布局,禁止硬编码颜色)
|
|
@@ -90,10 +90,10 @@ views/[module]/style/index.scss ← 第4层:模块级布局补丁(仅
|
|
|
90
90
|
|---|------|------|------|
|
|
91
91
|
| ✅ 0-1 | Token CSS 最先加载 | `index.html` | Token CSS 在所有样式之前加载 |
|
|
92
92
|
| ✅ 0-2 | 移除全局硬编码覆盖 | `views/[module]/style/index.scss` | 清除旧版颜色覆盖,内容已被新架构取代 |
|
|
93
|
-
| ✅ 0-3 | 接入
|
|
93
|
+
| ✅ 0-3 | 接入 wl-skills-ui 预设 | `src/assets/style/main.scss` | `@use 'wl-skills-ui/styles/presets/[preset]'` |
|
|
94
94
|
| ✅ 0-4 | 运行时预设注入 | `src/main-core.ts` | `installCommonPreset() + install[Project]Preset()` |
|
|
95
95
|
|
|
96
|
-
### 4.2 全局样式层(
|
|
96
|
+
### 4.2 全局样式层(wl-skills-ui 自动覆盖)
|
|
97
97
|
|
|
98
98
|
| # | 文件/层级 | 内容 |
|
|
99
99
|
|---|-----------|------|
|
|
@@ -281,7 +281,7 @@ views/[module]/style/index.scss ← 第4层:模块级布局补丁(仅
|
|
|
281
281
|
|
|
282
282
|
---
|
|
283
283
|
|
|
284
|
-
**P1 级残留汇总**:[R-N(时间), ...]。
|
|
284
|
+
**P1 级残留汇总**:[R-N(时间), ...]。
|
|
285
285
|
**总额外工作量**:约 [N] 个工作日。
|
|
286
286
|
|
|
287
287
|
---
|
|
@@ -313,7 +313,7 @@ views/[module]/style/index.scss ← 第4层:模块级布局补丁(仅
|
|
|
313
313
|
按第八节清单,集中修复剩余硬编码颜色。
|
|
314
314
|
|
|
315
315
|
### 11.2 扫描器 CI 集成(推荐)
|
|
316
|
-
将 `
|
|
316
|
+
将 `wl-skills-ui` 扫描器集成到 CI/CD 流水线,每次 PR 合并前自动扫描,有 error 级别问题则阻断合并。
|
|
317
317
|
|
|
318
318
|
### 11.3 其他业务系统推广
|
|
319
319
|
1. 复制 `reference/ag-cell-renders.ts` → 目标项目 `src/util/`
|
|
@@ -330,7 +330,7 @@ views/[module]/style/index.scss ← 第4层:模块级布局补丁(仅
|
|
|
330
330
|
|------|------|
|
|
331
331
|
| 问题消除率 | ≈[N]% |
|
|
332
332
|
| 视觉一致性 | 操作列、编号列、状态列、表单规格、空状态文案、弹窗按钮已全面统一 |
|
|
333
|
-
| 可维护性 | 建立 `ag-cell-renders.ts` + `
|
|
333
|
+
| 可维护性 | 建立 `ag-cell-renders.ts` + `wl-skills-ui` 工具链,新页面开箱即用 |
|
|
334
334
|
| 可推广性 | 规范文档(SKILL.md)已覆盖所有规则,其他项目可直接复用 |
|
|
335
335
|
| 剩余风险 | P1 级:[描述];P2–P3 级不影响主流程 |
|
|
336
336
|
|
|
@@ -338,6 +338,6 @@ views/[module]/style/index.scss ← 第4层:模块级布局补丁(仅
|
|
|
338
338
|
|
|
339
339
|
---
|
|
340
340
|
|
|
341
|
-
_报告生成时间:[日期]_
|
|
342
|
-
_扫描工具:
|
|
341
|
+
_报告生成时间:[日期]_
|
|
342
|
+
_扫描工具:wl-skills-ui scanner + AI 代码全量扫描_
|
|
343
343
|
_执行人:[姓名]_
|