@agile-team/wl-skills-ui 1.6.4 → 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/bin/wl-ui.js +75 -9
- 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/bin/wl-ui.js
CHANGED
|
@@ -55,6 +55,7 @@ const EDITOR_TARGETS = {
|
|
|
55
55
|
"agents-generic": { dir: ".", ext: ".md", singleFile: "AGENTS.md" },
|
|
56
56
|
qoder: { dir: ".qoder/rules", ext: ".md" },
|
|
57
57
|
};
|
|
58
|
+
const EDITOR_IDS = Object.keys(EDITOR_TARGETS);
|
|
58
59
|
|
|
59
60
|
// ── 参数解析 ─────────────────────────────────────────────────────────────────
|
|
60
61
|
const rawArgs = process.argv.slice(2);
|
|
@@ -124,9 +125,10 @@ if (subcommand === "init" || subcommand === "update") {
|
|
|
124
125
|
const skillsOnly = values["skills-only"];
|
|
125
126
|
const mode = values.mode === "skin" ? "skin" : "native";
|
|
126
127
|
|
|
128
|
+
const manifest = readManifest(projectRoot);
|
|
127
129
|
if (
|
|
128
130
|
subcommand === "update" &&
|
|
129
|
-
|
|
131
|
+
manifest?.version === PKG.version &&
|
|
130
132
|
!values.force
|
|
131
133
|
) {
|
|
132
134
|
console.log(
|
|
@@ -144,11 +146,21 @@ if (subcommand === "init" || subcommand === "update") {
|
|
|
144
146
|
console.log(`[wl-ui ${subcommand}] DRY-RUN 模式:不实际写入文件\n`);
|
|
145
147
|
|
|
146
148
|
// 1. 检测编辑器
|
|
147
|
-
const
|
|
148
|
-
|
|
149
|
+
const editors = resolveEditorsForInstall({
|
|
150
|
+
projectRoot,
|
|
151
|
+
subcommand,
|
|
152
|
+
requestedEditor: values.editor,
|
|
153
|
+
manifest,
|
|
154
|
+
});
|
|
155
|
+
console.log(`[wl-ui ${subcommand}] 目标编辑器:${editors.join(", ")}\n`);
|
|
149
156
|
|
|
150
157
|
// 2. 安装 skills(按 mode 过滤)
|
|
151
|
-
const installedFiles =
|
|
158
|
+
const installedFiles = [];
|
|
159
|
+
for (const editor of editors) {
|
|
160
|
+
installedFiles.push(
|
|
161
|
+
...installSkills({ projectRoot, editor, mode, dryRun }),
|
|
162
|
+
);
|
|
163
|
+
}
|
|
152
164
|
installedFiles.push(...installSupportFiles({ projectRoot, dryRun }));
|
|
153
165
|
|
|
154
166
|
// 3. 安装接入配置(非 --skills-only 时)
|
|
@@ -159,7 +171,8 @@ if (subcommand === "init" || subcommand === "update") {
|
|
|
159
171
|
if (!dryRun) {
|
|
160
172
|
writeManifest(projectRoot, {
|
|
161
173
|
version: PKG.version,
|
|
162
|
-
editor,
|
|
174
|
+
editor: editors.join(","),
|
|
175
|
+
editors,
|
|
163
176
|
mode,
|
|
164
177
|
installedAt: new Date().toISOString(),
|
|
165
178
|
files: Object.fromEntries(
|
|
@@ -169,7 +182,7 @@ if (subcommand === "init" || subcommand === "update") {
|
|
|
169
182
|
}
|
|
170
183
|
|
|
171
184
|
console.log(`\n✅ wl-ui ${subcommand} 完成!\n`);
|
|
172
|
-
printInstallSummary({ projectRoot, mode, editor });
|
|
185
|
+
printInstallSummary({ projectRoot, mode, editor: editors.join(", ") });
|
|
173
186
|
console.log("下一步:");
|
|
174
187
|
if (mode === "skin") {
|
|
175
188
|
console.log(" npx wl-ui scan --target src --mode skin # 仅化妆层审计");
|
|
@@ -252,6 +265,58 @@ function detectEditor(projectRoot) {
|
|
|
252
265
|
return "github-copilot";
|
|
253
266
|
}
|
|
254
267
|
|
|
268
|
+
function detectInstalledEditors(projectRoot) {
|
|
269
|
+
return EDITOR_IDS.filter((editor) => {
|
|
270
|
+
const target = EDITOR_TARGETS[editor];
|
|
271
|
+
if (target.singleFile)
|
|
272
|
+
return existsSync(join(projectRoot, target.singleFile));
|
|
273
|
+
return existsSync(join(projectRoot, target.dir));
|
|
274
|
+
});
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
function normalizeManifestEditors(manifest) {
|
|
278
|
+
if (Array.isArray(manifest?.editors)) return manifest.editors;
|
|
279
|
+
if (typeof manifest?.editor === "string") {
|
|
280
|
+
return manifest.editor
|
|
281
|
+
.split(",")
|
|
282
|
+
.map((editor) => editor.trim())
|
|
283
|
+
.filter(Boolean);
|
|
284
|
+
}
|
|
285
|
+
return [];
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
function uniqueValidEditors(editors) {
|
|
289
|
+
return [...new Set(editors)].filter((editor) => EDITOR_TARGETS[editor]);
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
function resolveEditorsForInstall({
|
|
293
|
+
projectRoot,
|
|
294
|
+
subcommand,
|
|
295
|
+
requestedEditor,
|
|
296
|
+
manifest,
|
|
297
|
+
}) {
|
|
298
|
+
if (requestedEditor) {
|
|
299
|
+
if (requestedEditor === "all") return EDITOR_IDS;
|
|
300
|
+
const editors = uniqueValidEditors(
|
|
301
|
+
requestedEditor.split(",").map((editor) => editor.trim()),
|
|
302
|
+
);
|
|
303
|
+
if (editors.length > 0) return editors;
|
|
304
|
+
console.error(`[wl-ui ${subcommand}] 不支持的编辑器:${requestedEditor}`);
|
|
305
|
+
console.error(`支持:${EDITOR_IDS.join(" | ")} | all`);
|
|
306
|
+
process.exit(1);
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
if (subcommand === "update") {
|
|
310
|
+
const editors = uniqueValidEditors([
|
|
311
|
+
...normalizeManifestEditors(manifest),
|
|
312
|
+
...detectInstalledEditors(projectRoot),
|
|
313
|
+
]);
|
|
314
|
+
if (editors.length > 0) return editors;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
return [detectEditor(projectRoot)];
|
|
318
|
+
}
|
|
319
|
+
|
|
255
320
|
/** 读取 skills/ 目录下所有 SKILL.md 文件 */
|
|
256
321
|
function collectSkills(skillsDir) {
|
|
257
322
|
const skills = [];
|
|
@@ -738,8 +803,8 @@ wl-ui — @agile-team/wl-skills-ui 统一 CLI v${PKG.version}
|
|
|
738
803
|
wl-ui init [--project <path>] [--editor <editor>] [--mode native|skin]
|
|
739
804
|
[--dry-run] [--skills-only]
|
|
740
805
|
把 skills/ 写入目标项目的 AI 编辑器规则目录
|
|
741
|
-
wl-ui update [--project <path>] [--force] [--dry-run]
|
|
742
|
-
|
|
806
|
+
wl-ui update [--project <path>] [--editor <editor|all>] [--force] [--dry-run]
|
|
807
|
+
更新已安装编辑器 rules / MCP / 触发提示
|
|
743
808
|
wl-ui diff [--project <path>]
|
|
744
809
|
对比已安装文件与 manifest
|
|
745
810
|
wl-ui clean [--project <path>] [--dry-run]
|
|
@@ -765,7 +830,7 @@ wl-ui — @agile-team/wl-skills-ui 统一 CLI v${PKG.version}
|
|
|
765
830
|
|
|
766
831
|
参数:
|
|
767
832
|
--project 项目根目录(默认 .)
|
|
768
|
-
--editor 指定编辑器:github-copilot | cursor | windsurf | kiro | trae | claude-code | cline | agents-generic | qoder
|
|
833
|
+
--editor 指定编辑器:github-copilot | cursor | windsurf | kiro | trae | claude-code | cline | agents-generic | qoder | all
|
|
769
834
|
--mode init: native(默认,完整接入) | skin(化妆,老项目)
|
|
770
835
|
scan: skin(只看L0/L1/L2) | native(全量)
|
|
771
836
|
--layer scan 过滤:L0/L1/L2/L3/L4(逗号分隔)
|
|
@@ -779,6 +844,7 @@ wl-ui — @agile-team/wl-skills-ui 统一 CLI v${PKG.version}
|
|
|
779
844
|
示例:
|
|
780
845
|
npx wl-ui init
|
|
781
846
|
npx wl-ui update --force
|
|
847
|
+
npx wl-ui update --editor all --force
|
|
782
848
|
npx wl-ui doctor
|
|
783
849
|
npx wl-ui prompts
|
|
784
850
|
npx wl-ui init --mode skin --project /path/to/legacy-project
|
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 — 验证
|