@agile-team/wl-skills-ui 1.6.5 → 1.6.7
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 +51 -0
- package/README.md +16 -9
- package/SKILL.md +38 -37
- package/bin/wl-ui.js +32 -34
- package/examples/migration-operations-to-renderOps.md +1 -1
- package/package.json +3 -1
- package/scripts/check-docs.mjs +83 -0
- 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/_compat/editors.json +12 -0
- 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/architecture/01-layer-boundaries.md +122 -0
- 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,57 @@ 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.7] - 2026-05-11
|
|
8
|
+
|
|
9
|
+
### Added
|
|
10
|
+
|
|
11
|
+
- 新增 `standards/architecture/01-layer-boundaries.md`,明确 tokens、Element Plus、vendors、layouts、runtime、scanner、skills 的职责边界和扩展规则。
|
|
12
|
+
- 新增 `npm run docs:check`,校验旧命名、旧命令、README 版本文案、CHANGELOG 版本记录和编辑器配置完整性。
|
|
13
|
+
|
|
14
|
+
### Changed
|
|
15
|
+
|
|
16
|
+
- CLI 编辑器安装配置改为读取 `skills/_meta/_compat/editors.json`,消除代码内第二份 `EDITOR_TARGETS` 路径映射。
|
|
17
|
+
- `editors.json` 补齐 `ext`、`singleFile`、`headerFile` 等安装行为字段,使 AI 编辑器配置成为单一事实源。
|
|
18
|
+
|
|
19
|
+
## [1.6.6] - 2026-05-11
|
|
20
|
+
|
|
21
|
+
### Changed
|
|
22
|
+
|
|
23
|
+
- README、主 `SKILL.md`、Flow、Standards、Templates 和多编辑器兼容文档同步到 `wl-ui` / `wl-skills-ui` 当前命名,移除旧版 `wk-ui` / `wk-skills-ui` 过期写法。
|
|
24
|
+
- README 和多编辑器兼容文档补齐 `wl-ui update --editor all --force`、manifest 多编辑器刷新策略和 v1.6.5 规则分发说明。
|
|
25
|
+
|
|
26
|
+
## [1.6.5] - 2026-05-11
|
|
27
|
+
|
|
28
|
+
### Added
|
|
29
|
+
|
|
30
|
+
- `wl-ui update --editor all --force`:支持一次性将同一套 `skills/**/*.md` 规则转换并覆盖写入全部支持的 AI 编辑器目录。
|
|
31
|
+
- manifest 新增 `editors` 数组记录,兼容旧版 `editor` 字符串字段,便于多编辑器项目持续更新。
|
|
32
|
+
|
|
33
|
+
### Changed
|
|
34
|
+
|
|
35
|
+
- `wl-ui update` 未指定 `--editor` 时,会优先刷新 manifest 中记录的编辑器和项目里已存在的编辑器规则目录,避免团队不同 AI 编辑器 rules 漂移。
|
|
36
|
+
|
|
37
|
+
## [1.6.4] - 2026-05-11
|
|
38
|
+
|
|
39
|
+
### Fixed
|
|
40
|
+
|
|
41
|
+
- 表单控件圆角统一使用 `--wk-form-control-radius`,覆盖 input、select、date、input-number、cascader、autocomplete、textarea、upload 等控件族。
|
|
42
|
+
- Element Plus 上传拖拽区和上传列表项补齐圆角 token 与 fallback,避免局部硬编码导致视觉不一致。
|
|
43
|
+
- `el-form`、`style-align` Skill 和 `standards/ui/03-form.md` 补齐表单圆角一致性规则,引导 AI 避免局部 patch。
|
|
44
|
+
|
|
45
|
+
## [1.6.3] - 2026-05-11
|
|
46
|
+
|
|
47
|
+
### Fixed
|
|
48
|
+
|
|
49
|
+
- Element Plus 表格空状态改为在对应表格区域内自适应居中,嵌套表格不再依赖固定高度猜效果。
|
|
50
|
+
- AG Grid 空状态提示文案改为更通用并支持 CSS 变量自定义。
|
|
51
|
+
- 查询区和工具栏按钮补齐 CSS 变量 fallback,避免 token 未加载时按钮颜色丢失。
|
|
52
|
+
- 禁用按钮增加独立样式约束,避免 hover/active 覆盖禁用态。
|
|
53
|
+
|
|
54
|
+
### Changed
|
|
55
|
+
|
|
56
|
+
- `el-table`、`base-table`、`style-align` 等 Skill 补充智能空状态修复规则,要求 AI 根据真实业务上下文判断空态文案与区域,而不是硬编码。
|
|
57
|
+
|
|
7
58
|
## [1.6.2] - 2026-05-09
|
|
8
59
|
|
|
9
60
|
### Changed
|
package/README.md
CHANGED
|
@@ -193,10 +193,16 @@ yarn add @agile-team/wl-skills-ui
|
|
|
193
193
|
|
|
194
194
|
## 版本亮点
|
|
195
195
|
|
|
196
|
-
当前 v1.6.
|
|
197
|
-
|
|
198
|
-
-
|
|
199
|
-
-
|
|
196
|
+
当前 v1.6.7 版本重点强化“统一规则源 + 多编辑器分发 + 分层边界治理 + UI 细节精准修复”的闭环:
|
|
197
|
+
|
|
198
|
+
- `skills/**/*.md` 作为唯一规则源,`wl-ui init/update` 会按编辑器格式转换并覆盖写入目标 rules
|
|
199
|
+
- `skills/_meta/_compat/editors.json` 作为 AI 编辑器安装配置唯一来源,CLI 不再维护第二份编辑器路径映射
|
|
200
|
+
- `wl-ui update --editor all --force` 可一次性刷新全部支持编辑器;未指定编辑器时会刷新 manifest 与项目中已存在的编辑器规则目录
|
|
201
|
+
- `standards/architecture/01-layer-boundaries.md` 固化 tokens、Element Plus、vendors、layouts、runtime、scanner、skills 的扩展边界,避免胶水补丁污染
|
|
202
|
+
- `npm run docs:check` 校验旧命名、旧命令、版本文案和编辑器配置,防止规则文档回退
|
|
203
|
+
- 表格空状态改为对应表格区域内自适应居中,避免嵌套表格靠固定高度猜效果
|
|
204
|
+
- 查询区/工具栏按钮补齐 token fallback,禁用按钮独立保留清晰禁用态
|
|
205
|
+
- 表单控件圆角统一使用 `--wk-form-control-radius`,覆盖 input/select/date/textarea/upload 等控件家族
|
|
200
206
|
- `wl-ui init/update` 会安装 Skill、触发提示、MCP 配置和 manifest 清单
|
|
201
207
|
- `wl-ui diff/clean/doctor/prompts` 覆盖升级前对比、卸载清理、环境体检和提示词查看
|
|
202
208
|
- 内置 `wl-skills-ui` MCP Server,供 AI 编辑器调用扫描、检查和 dry-run 修复
|
|
@@ -303,8 +309,9 @@ npx wl-ui scan --target src --mode skin --outFile audit.md
|
|
|
303
309
|
|
|
304
310
|
```bash
|
|
305
311
|
# 安装或更新 Skill 到当前业务项目
|
|
306
|
-
npx wl-ui init --project .
|
|
307
|
-
npx wl-ui update --project .
|
|
312
|
+
npx wl-ui init --project .
|
|
313
|
+
npx wl-ui update --project . --force
|
|
314
|
+
npx wl-ui update --project . --editor all --force
|
|
308
315
|
|
|
309
316
|
# 查看 AI 触发提示
|
|
310
317
|
npx wl-ui prompts
|
|
@@ -313,7 +320,7 @@ npx wl-ui prompts
|
|
|
313
320
|
npx wl-ui doctor --project .
|
|
314
321
|
```
|
|
315
322
|
|
|
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
|
|
323
|
+
安装后会写入 `.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
324
|
|
|
318
325
|
### 场景 D — 仅 CI 检查
|
|
319
326
|
|
|
@@ -335,7 +342,7 @@ npx wl-ui doctor --project .
|
|
|
335
342
|
```bash
|
|
336
343
|
wl-ui init [--project .] [--editor <e>] [--mode native|skin]
|
|
337
344
|
[--dry-run] [--skills-only]
|
|
338
|
-
wl-ui update [--project .] [--force] [--dry-run]
|
|
345
|
+
wl-ui update [--project .] [--editor <e|all>] [--force] [--dry-run]
|
|
339
346
|
wl-ui diff [--project .]
|
|
340
347
|
wl-ui clean [--project .] [--dry-run]
|
|
341
348
|
wl-ui doctor [--project .]
|
|
@@ -348,7 +355,7 @@ wl-ui all --project .
|
|
|
348
355
|
wl-ui add-preset <name> # 脚手架新业务 preset
|
|
349
356
|
```
|
|
350
357
|
|
|
351
|
-
支持的 AI 编辑器:`github-copilot` / `cursor` / `windsurf` / `kiro` / `trae` / `claude-code` / `cline` / `agents-generic` / `qoder
|
|
358
|
+
支持的 AI 编辑器:`github-copilot` / `cursor` / `windsurf` / `kiro` / `trae` / `claude-code` / `cline` / `agents-generic` / `qoder` / `all`。`update` 未指定编辑器时会优先刷新 manifest 与项目中已存在的编辑器规则目录。
|
|
352
359
|
|
|
353
360
|
`init/update` 会同时写入:
|
|
354
361
|
|
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
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* wl-ui — wl-skills-ui 统一 CLI
|
|
4
4
|
*
|
|
5
5
|
* 子命令:
|
|
6
|
-
* wl-ui init [--project <path>] [--editor
|
|
6
|
+
* wl-ui init [--project <path>] [--editor <editor|all>] [--dry-run]
|
|
7
7
|
* 把 skills/ 写入目标项目的 AI 编辑器规则目录
|
|
8
8
|
* wl-ui scan → 委托给 scanner/index.mjs
|
|
9
9
|
* wl-ui check → 委托给 scanner/index.mjs
|
|
@@ -40,21 +40,7 @@ const MANIFEST_NAME = ".wl-skills-ui-manifest.json";
|
|
|
40
40
|
// 常量
|
|
41
41
|
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
42
42
|
|
|
43
|
-
|
|
44
|
-
const EDITOR_TARGETS = {
|
|
45
|
-
"github-copilot": {
|
|
46
|
-
dir: ".github/instructions/wk-skills",
|
|
47
|
-
ext: ".instructions.md",
|
|
48
|
-
},
|
|
49
|
-
cursor: { dir: ".cursor/rules", ext: ".mdc" },
|
|
50
|
-
windsurf: { dir: ".windsurf/rules", ext: ".md" },
|
|
51
|
-
kiro: { dir: ".kiro/steering", ext: ".md" },
|
|
52
|
-
trae: { dir: ".trae/rules", ext: ".md" },
|
|
53
|
-
"claude-code": { dir: ".", ext: ".md", singleFile: "CLAUDE.md" },
|
|
54
|
-
cline: { dir: ".", ext: ".md", singleFile: ".clinerules" },
|
|
55
|
-
"agents-generic": { dir: ".", ext: ".md", singleFile: "AGENTS.md" },
|
|
56
|
-
qoder: { dir: ".qoder/rules", ext: ".md" },
|
|
57
|
-
};
|
|
43
|
+
const EDITOR_TARGETS = loadEditorTargets();
|
|
58
44
|
const EDITOR_IDS = Object.keys(EDITOR_TARGETS);
|
|
59
45
|
|
|
60
46
|
// ── 参数解析 ─────────────────────────────────────────────────────────────────
|
|
@@ -265,6 +251,33 @@ function detectEditor(projectRoot) {
|
|
|
265
251
|
return "github-copilot";
|
|
266
252
|
}
|
|
267
253
|
|
|
254
|
+
function loadEditorTargets() {
|
|
255
|
+
const configPath = join(
|
|
256
|
+
PKG_ROOT,
|
|
257
|
+
"skills",
|
|
258
|
+
"_meta",
|
|
259
|
+
"_compat",
|
|
260
|
+
"editors.json",
|
|
261
|
+
);
|
|
262
|
+
const config = JSON.parse(readFileSync(configPath, "utf8"));
|
|
263
|
+
return Object.fromEntries(
|
|
264
|
+
config.editors.map((editor) => [
|
|
265
|
+
editor.id,
|
|
266
|
+
{
|
|
267
|
+
dir: normalizeInstallDir(editor.installPath),
|
|
268
|
+
ext: editor.ext || ".md",
|
|
269
|
+
singleFile: editor.singleFile,
|
|
270
|
+
headerFile: editor.headerFile,
|
|
271
|
+
},
|
|
272
|
+
]),
|
|
273
|
+
);
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
function normalizeInstallDir(installPath) {
|
|
277
|
+
const normalized = installPath.replace(/\\/g, "/").replace(/\/+$/, "");
|
|
278
|
+
return normalized === "." || normalized === "" ? "." : normalized;
|
|
279
|
+
}
|
|
280
|
+
|
|
268
281
|
function detectInstalledEditors(projectRoot) {
|
|
269
282
|
return EDITOR_IDS.filter((editor) => {
|
|
270
283
|
const target = EDITOR_TARGETS[editor];
|
|
@@ -338,13 +351,14 @@ function collectSkills(skillsDir) {
|
|
|
338
351
|
|
|
339
352
|
/** 读取编辑器 frontmatter 模板 */
|
|
340
353
|
function getHeaderTemplate(editor) {
|
|
354
|
+
const target = EDITOR_TARGETS[editor];
|
|
355
|
+
const headerFile = target?.headerFile;
|
|
341
356
|
const headerPath = join(
|
|
342
357
|
PKG_ROOT,
|
|
343
358
|
"skills",
|
|
344
359
|
"_meta",
|
|
345
360
|
"_compat",
|
|
346
|
-
"headers",
|
|
347
|
-
`${editorHeaderName(editor)}.txt`,
|
|
361
|
+
headerFile || join("headers", `${editor}.txt`),
|
|
348
362
|
);
|
|
349
363
|
if (existsSync(headerPath)) return readFileSync(headerPath, "utf8");
|
|
350
364
|
return "";
|
|
@@ -543,22 +557,6 @@ function capitalize(s) {
|
|
|
543
557
|
return s.charAt(0).toUpperCase() + s.slice(1);
|
|
544
558
|
}
|
|
545
559
|
|
|
546
|
-
function editorHeaderName(editor) {
|
|
547
|
-
return (
|
|
548
|
-
{
|
|
549
|
-
cursor: "cursor-mdc",
|
|
550
|
-
"github-copilot": "github-copilot",
|
|
551
|
-
windsurf: "windsurf",
|
|
552
|
-
kiro: "kiro",
|
|
553
|
-
trae: "trae",
|
|
554
|
-
"claude-code": "claude-code",
|
|
555
|
-
cline: "cline",
|
|
556
|
-
"agents-generic": "agents",
|
|
557
|
-
qoder: "qoder",
|
|
558
|
-
}[editor] || editor
|
|
559
|
-
);
|
|
560
|
-
}
|
|
561
|
-
|
|
562
560
|
function installSupportFiles({ projectRoot, dryRun }) {
|
|
563
561
|
const files = [
|
|
564
562
|
{
|
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.7",
|
|
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",
|
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
"build": "tsup && npm run sync:tokens",
|
|
41
41
|
"prepare": "npm run build",
|
|
42
42
|
"sync:tokens": "node -e \"import('fs').then(fs=>fs.copyFileSync('design/tokens/base.css','dist/tokens.css'))\"",
|
|
43
|
+
"docs:check": "node scripts/check-docs.mjs",
|
|
43
44
|
"scan": "node scanner/index.mjs scan",
|
|
44
45
|
"check": "node scanner/index.mjs check",
|
|
45
46
|
"fix": "node scanner/index.mjs fix",
|
|
@@ -58,6 +59,7 @@
|
|
|
58
59
|
"skills",
|
|
59
60
|
"templates",
|
|
60
61
|
"bin",
|
|
62
|
+
"scripts",
|
|
61
63
|
"mcp",
|
|
62
64
|
"reference",
|
|
63
65
|
"examples",
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { existsSync, readdirSync, readFileSync } from "node:fs";
|
|
2
|
+
import { dirname, join, relative } from "node:path";
|
|
3
|
+
import { fileURLToPath } from "node:url";
|
|
4
|
+
|
|
5
|
+
const __filename = fileURLToPath(import.meta.url);
|
|
6
|
+
const __dirname = dirname(__filename);
|
|
7
|
+
const root = join(__dirname, "..");
|
|
8
|
+
const pkg = JSON.parse(readFileSync(join(root, "package.json"), "utf8"));
|
|
9
|
+
const readme = readFileSync(join(root, "README.md"), "utf8");
|
|
10
|
+
const changelog = readFileSync(join(root, "CHANGELOG.md"), "utf8");
|
|
11
|
+
const editorConfig = JSON.parse(
|
|
12
|
+
readFileSync(
|
|
13
|
+
join(root, "skills", "_meta", "_compat", "editors.json"),
|
|
14
|
+
"utf8",
|
|
15
|
+
),
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
const errors = [];
|
|
19
|
+
const forbiddenPatterns = [
|
|
20
|
+
{ pattern: /\bwk-ui\b/, message: "旧 CLI 名称 wk-ui" },
|
|
21
|
+
{ pattern: /\bwk-skills-ui\b/, message: "旧包名 wk-skills-ui" },
|
|
22
|
+
{
|
|
23
|
+
pattern: /@agile-team\/wk-skills-ui/,
|
|
24
|
+
message: "旧 npm 包名 @agile-team/wk-skills-ui",
|
|
25
|
+
},
|
|
26
|
+
{ pattern: /--editor auto/, message: "无效编辑器参数 --editor auto" },
|
|
27
|
+
{ pattern: /当前 v1\.6\.2/, message: "过期 README 当前版本文案" },
|
|
28
|
+
];
|
|
29
|
+
|
|
30
|
+
function walk(dir) {
|
|
31
|
+
const files = [];
|
|
32
|
+
for (const entry of readdirSync(dir, { withFileTypes: true })) {
|
|
33
|
+
if (["node_modules", ".git", "dist", "es"].includes(entry.name)) continue;
|
|
34
|
+
const full = join(dir, entry.name);
|
|
35
|
+
if (entry.isDirectory()) files.push(...walk(full));
|
|
36
|
+
if (entry.isFile() && entry.name.endsWith(".md")) files.push(full);
|
|
37
|
+
}
|
|
38
|
+
return files;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
for (const file of walk(root)) {
|
|
42
|
+
const rel = relative(root, file).replace(/\\/g, "/");
|
|
43
|
+
const content = readFileSync(file, "utf8");
|
|
44
|
+
for (const { pattern, message } of forbiddenPatterns) {
|
|
45
|
+
if (rel === "CHANGELOG.md") continue;
|
|
46
|
+
if (pattern.test(content)) errors.push(`${rel}: ${message}`);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
if (!readme.includes(`当前 v${pkg.version}`)) {
|
|
51
|
+
errors.push(
|
|
52
|
+
`README.md: 当前版本文案未同步 package.json version ${pkg.version}`,
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
if (!changelog.includes(`## [${pkg.version}]`)) {
|
|
57
|
+
errors.push(`CHANGELOG.md: 缺少 ${pkg.version} 版本记录`);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
for (const editor of editorConfig.editors) {
|
|
61
|
+
if (!editor.id) errors.push("editors.json: editor 缺少 id");
|
|
62
|
+
if (!editor.installPath)
|
|
63
|
+
errors.push(`editors.json: ${editor.id} 缺少 installPath`);
|
|
64
|
+
if (!editor.ext) errors.push(`editors.json: ${editor.id} 缺少 ext`);
|
|
65
|
+
if (!editor.headerFile)
|
|
66
|
+
errors.push(`editors.json: ${editor.id} 缺少 headerFile`);
|
|
67
|
+
if (
|
|
68
|
+
!existsSync(join(root, "skills", "_meta", "_compat", editor.headerFile))
|
|
69
|
+
) {
|
|
70
|
+
errors.push(
|
|
71
|
+
`editors.json: ${editor.id} headerFile 不存在:${editor.headerFile}`,
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
if (errors.length > 0) {
|
|
77
|
+
console.error(
|
|
78
|
+
"docs:check failed:\n" + errors.map((error) => `- ${error}`).join("\n"),
|
|
79
|
+
);
|
|
80
|
+
process.exit(1);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
console.log("docs:check passed");
|
|
@@ -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
|
|