@qilitt-mickey/vue3-temp-skill 1.1.24 → 1.1.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/SKILL.md +6 -6
  2. package/package.json +1 -1
  3. package/references/code-quality.md +13 -14
  4. package/references/crud-pages.md +20 -16
  5. package/references/design-handoff.md +210 -403
  6. package/references/design-system.md +111 -709
package/SKILL.md CHANGED
@@ -29,7 +29,7 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
29
29
  - **精简出厂**：模板 `views/` 仅保留登录/首页等壳页面；**业务标准样板**在本包 `references/`（如 `crud-pages`、`detail-page`）
30
30
  - **依赖分层**：`package.json` 仅 **core**；**addon** 默认不装；缺包时装依赖后须按 `addon-enable.md` **逐文件恢复配置**（非自动）
31
31
  - 壳层行为（顶部 tag / 侧栏 / keep-alive / `useDetail`）以**当前项目**已有实现为准
32
- - **双轨**：无设计 handoff → 保持模版出厂；有设计落地 → 读 `design-handoff.md` **原子步骤**（`Theme`/`Version`/令牌整组，禁止只改主色）
32
+ - **双轨**：无设计 handoff → 保持模版出厂；有设计落地 → 读 `design-handoff.md` 逐文件修改清单 + 设计 Skill `project-implementation-protocol.md`
33
33
 
34
34
  ## 使用方式
35
35
 
@@ -70,8 +70,8 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
70
70
  | addon / 查 Re* 名 / 装依赖 | `references/project-inventory.md` |
71
71
  | **启用精简模板已删的 addon（装包 + 改配置）** | `references/addon-enable.md`（与功能模块同读） |
72
72
  | 写完代码后（闸门，非功能命中） | `references/code-quality.md` |
73
- | 设计交接块 / **design-handoff/v1 JSON** / 上游令牌产出落地 | `references/design-handoff.md`（+ `design-system`） |
74
- | **设计模式**（设计 Skill 产出存在时触发） | `crud-pages.md` 设计模式样板 + `design-system.md` Step 3.5 |
73
+ | 设计交接块 / **design-handoff/v1 JSON** / 上游令牌产出落地 | `references/design-handoff.md`（逐文件修改清单）+ `design-system.md`（项目设计系统说明） |
74
+ | **设计模式**（设计 Skill 产出存在时触发） | `crud-pages.md` 设计模式样板 + 设计 Skill `project-implementation-protocol.md`（1:1 还原协议） |
75
75
 
76
76
  ### 标准业务面
77
77
 
@@ -83,7 +83,7 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
83
83
  | **data-writeback** | 回显、回填、useFormCheck |
84
84
  | **permission-auth** | 权限、v-auth、roles、ReAuth |
85
85
  | **layout-theme** | 布局、主题、暗黑、`--vts-*`、UnoCSS |
86
- | **design-system** | 设计规范、UI 规范、按 XX 规范适配、design-tokens、主题色系、设计交接块 |
86
+ | **design-system** | 设计规范、UI 规范、按 XX 规范适配、design-tokens、主题色系、令牌体系、暗色模式 |
87
87
  | **icons** | 图标、svg-icon、Iconify、ReIconPicker、菜单图标 |
88
88
  | **feedback-loading** | message、loading、确认框 |
89
89
  | **base-code-dict** | 字典、baseCode、码表 |
@@ -133,7 +133,7 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
133
133
  - 导出 Excel → `download-export`
134
134
  - 菜单/本地图标 → `icons`
135
135
  - 粒子背景 → `particles`
136
- - 按 XX / UI 规范适配、设计交接块、整站风格重构 → `design-system` + `layout-theme`；有令牌/交接产出时加读 `design-handoff.md`
136
+ - 按 XX / UI 规范适配、设计交接块、整站风格重构 → `design-system`（项目设计系统说明）+ `layout-theme`；有令牌/交接产出时加读 `design-handoff.md`（逐文件修改清单）+ 设计 Skill `project-implementation-protocol.md`
137
137
  - 列表→独立详情/编辑页 → `crud-pages` + `detail-page`
138
138
  6. 独立详情路由：跳转与 meta 见 `detail-page`（`toDetail` / `showLink` / `activePath` / `initToDetail`）
139
139
 
@@ -148,7 +148,7 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
148
148
  ## 工作流
149
149
 
150
150
  1. **需求分析**：列出功能模块 ID（不含 `code-quality`）
151
- 2. **加载**：`core-kernel` + 命中模块；addon/缺包时加读 `project-inventory` + **`addon-enable`**；设计规范/交接产出时加读 `design-handoff`
151
+ 2. **加载**：`core-kernel` + 命中模块；addon/缺包时加读 `project-inventory` + **`addon-enable`**；设计规范/交接产出时加读 `design-handoff`（逐文件修改清单）+ 设计 Skill `project-implementation-protocol.md`
152
152
  3. **依赖**：缺包按 inventory 第九节精确版本，确认后安装；**再按 `addon-enable` 对应章节改配置**
153
153
  4. **探查**：复用仓库 `Re*` / Hook / utils
154
154
  5. **生成**：可运行代码落盘
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qilitt-mickey/vue3-temp-skill",
3
- "version": "1.1.24",
3
+ "version": "1.1.25",
4
4
  "description": "Vue 3 企业级中后台项目开发规范技能包 — core-kernel 架构、按需功能模块",
5
5
  "bin": {
6
6
  "vue3-temp-skill": "./bin/cli.js"
package/references/code-quality.md CHANGED
@@ -46,20 +46,20 @@ lint / type-check **过了也不能放过**下列项。发现即改代码，禁
46
46
  | 新菜单路由 | 父级无 `icon` 或业务页二次挂 `Layout` | `icons` + `core-kernel` |
47
47
  | 列表查询区 `el-form` / 查询按钮 | 写了 `size="small"`（紧凑主题用户未要求） | 不写 size，用 default=`--control-height` |
48
48
  | 本轮新增 addon 并引用对应 `Re*` / Vant / 微信 | 已装包但 `tsconfig exclude` 仍含该路径，或 `addon-enable` 要求的 build/src 未改 | 按 **`addon-enable.md`** 对应章节恢复后重跑 type-check |
49
- | `design-visual.scss` / `design-layout.scss` 存在 | `index.scss` 未 `@use` 加载，或加载顺序不在 `element-plus` 之前 | `design-tokens` → `design-visual` → `design-layout` → `element-plus` |
50
- | `design-visual.scss` 规则体内出现硬编码值 | 非令牌引用的裸 hex / px / rgba 值 | 全部改为 `var()` 引用令牌 |
51
- | 视觉层 / 构图层新增规则 | `dark.scss` 缺少对应暗色覆盖 | 每条新规则在 `html.dark` 内有对应覆盖 |
49
+ | `element-plus.scss` 内视觉规则（shadow/hover/transition） | 出现非令牌引用的裸 hex / px / rgba 值 | 全部改为 `var()` 引用令牌 |
50
+ | 视觉规则新增 | `dark.scss` 缺少对应暗色覆盖 | 每条新规则在 `html.dark` 内有对应覆盖 |
52
51
 
53
52
  ### 设计模式专项检查（设计 Skill 产出存在时）
54
53
 
54
+ 设计还原的完整检查清单见设计 Skill 的 `project-implementation-protocol.md`。本闸门只检查项目侧落地结果：
55
+
55
56
  | 检查项 | 失败条件 | 修复 |
56
57
  |--------|---------|------|
57
- | 列表页页面标题区 | 设计模式下列表页无 `.vts-page-header`（标题+描述+操作） | 按 `crud-pages.md` 设计模式样板 D2 补充 |
58
- | 列表页筛选区 | 设计模式下仍用 `bg-bg_color p-5` 而非 `.vts-filter-area` | 升级为 `.vts-filter-area` |
59
- | 列表页表格区 | 设计模式下表格区无 `.vts-table-area` 包裹 | 外包 `.vts-table-area` |
60
- | 设计模式值引用 | 页面代码中 CSS 钩子类对应的值非令牌引用 | 值来自 `design-tokens.scss` 令牌变量 |
61
-
62
- > **放松说明**：设计模式下，允许页面级结构 CSS（`.vts-page-header` 等布局类）。项目 Skill 的禁止项（"禁止另建独立重写层文件"等）在**设计模式**下不适用于页面代码中的布局结构实现，仅对全局样式文件生效。
58
+ | 页面区域结构 | JSON `structureRequirements.pageRegions` 指定的区域在页面中缺失 | 按 `crud-pages.md` 设计模式样板 D1-D8 补充 |
59
+ | 框架壳层 | JSON `structureRequirements.frameworkShell` 指定的壳层配置未落地 | 按 `design-handoff.md` 配置文件修改清单 C1-C8 执行 |
60
+ | 交互行为 | JSON `interactionSpecs` 指定的交互未实现 | 按 `project-implementation-protocol.md` 交互保真要求实现 |
61
+ | 令牌引用 | 页面代码中 CSS 钩子类对应的值非令牌引用 | 值来自 `design-tokens.scss` 令牌变量 |
62
+ | 逐文件修改清单 | `design-handoff.md` 清单中有未执行项 | 补齐遗漏项 |
63
63
 
64
64
  ## 选型与硬约束
65
65
 
@@ -115,12 +115,11 @@ lint / type-check **过了也不能放过**下列项。发现即改代码，禁
115
115
 
116
116
  ### design-system（命中时）
117
117
 
118
- - [ ] 规范识别回执；令牌 / `platform-config.json` / 侧栏主题一致
119
- - [ ] 已建 `design-tokens.scss`；`index.scss` 中其 `@use` 最前
120
- - [ ] 冲突清单已逐条处理（见 `design-system`）
121
- - [ ] 有上游设计产出时已读 `design-handoff`：JSON 优先；**原子步骤**含 `Theme=default`（深色侧栏）+ `--sidebar-*` + **`Version++`** + 主色阶；禁止只改 EpThemeColor；错误色 `#F5222D`
118
+ - [ ] 有设计 Skill 产出时已读 `design-handoff.md` 逐文件修改清单并执行
119
+ - [ ] 设计还原检查对照设计 Skill 的 `project-implementation-protocol.md` 检查清单
120
+ - [ ] 令牌 / `platform-config.json` / 侧栏主题三处一致
122
121
  - [ ] **无**设计落地时未改出厂主色 / ShowModel / 壳层 / 弹窗几何默认
123
- - [ ] 组件尺寸三档已落地并桥接 `--el-component-size*`；缺档回退至 default；未全局强制 `size="small"`；**查询区不写 size**（三档对照表 ≠ 查询区要用 small）
122
+ - [ ] 组件尺寸三档已落地并桥接 `--el-component-size*`；缺档回退至 default；查询区不写 size
124
123
 
125
124
  ## 业务
126
125
 
package/references/crud-pages.md CHANGED
@@ -253,15 +253,18 @@ function handleSizeChange(size: number) {
253
253
 
254
254
  ## 列表设计模式样板（设计 Skill 产出存在时使用）
255
255
 
256
- > **触发条件**：存在 `design-handoff/v1` JSON、用户指定设计规范、或命中 `design-system` 模块且设计 Skill 产出可用。
256
+ > **触发条件**：存在 `design-handoff/v1` JSON（含 `structureRequirements` + `pageStructure` 段）、用户指定设计规范、或命中 `design-system` 模块且设计 Skill 产出可用。
257
257
  >
258
- > **与出厂模式的区别**：出厂模式（上文 L1-L9）直接堆 `el-card` + 查询区 + 表格，无页面标题区。设计模式按设计 Skill 的 `list-page.md` 区域拆分，包含完整的页面标题区、筛选区容器、操作栏、表格区。
258
+ > **1:1 还原要求**：页面区域结构必须按 JSON `structureRequirements.pageRegions` 实现，框架壳层按 `structureRequirements.frameworkShell` 实现。详见设计 Skill 的 `project-implementation-protocol.md`。
259
259
  >
260
- > **结构变化**：
261
- > - 新增 `.vts-page-header`（标题 + 描述 + 标题区操作按钮）
262
- > - 查询区从 `bg-bg_color p-5` 升级为 `.vts-filter-area`（有容器感 + 分隔线）
263
- > - 表格区外包 `.vts-table-area`（有圆角边框包裹）
260
+ > **与出厂模式的区别**：出厂模式（上文 L1-L9）直接堆 `el-card` + 查询区 + 表格，无页面标题区。设计模式按 JSON `pageStructure` 区域拆分，包含完整的页面标题区、筛选区容器、操作栏、表格区。
261
+ >
262
+ > **结构变化**（以 JSON `structureRequirements.pageRegions` 为准，下方为默认区域）：
263
+ > - 新增 `.vts-page-header`（标题 + 描述 + 标题区操作按钮）— 对应 JSON `pageStructure.regions.header`
264
+ > - 查询区从 `bg-bg_color p-5` 升级为 `.vts-filter-area`（有容器感 + 分隔线）— 对应 `pageStructure.regions.filter`
265
+ > - 表格区外包 `.vts-table-area`（有圆角边框包裹）— 对应 `pageStructure.regions.table`
264
266
  > - 主操作按钮（新增/导入）从 `ReTableBar #buttons` 移到 `.vts-page-header__actions`
267
+ > - 若 JSON 指定额外区域（如统计区、页签切换区），按 `pageStructure.regions` 顺序在 `otherRef` 位或独立区域中实现
265
268
 
266
269
  | # | 必须 |
267
270
  |---|------|
@@ -270,8 +273,8 @@ function handleSizeChange(size: number) {
270
273
  | D3 | `.vts-filter-area`：筛选区容器（独立背景 + 圆角 + 底部分隔线） |
271
274
  | D4 | `.vts-action-bar`：表格上方操作栏（批量删除等 + 右侧刷新/列设置） |
272
275
  | D5 | `.vts-table-area`：表格区包裹（圆角 + 边框） |
273
- | D6 | 表头：品牌色浅底 + 字重 600 + 底部强调线（由 `design-visual.scss` 全局提供） |
274
- | D7 | 行 hover：品牌色极浅底 + 过渡（由 `design-visual.scss` 全局提供） |
276
+ | D6 | 表头：品牌色浅底 + 字重 600 + 底部强调线（由 `element-plus.scss` 全局提供） |
277
+ | D7 | 行 hover：品牌色极浅底 + 过渡（由 `element-plus.scss` 全局提供） |
275
278
  | D8 | 其余同 L4-L9（ReGrid / ReTableBar / RePagination / ReTableOperate） |
276
279
 
277
280
  ```vue
@@ -491,14 +494,15 @@ function handleSizeChange(size: number) {
491
494
 
492
495
  **设计模式与出厂模式的关键差异**：
493
496
 
494
- | 差异点 | 出厂模式 | 设计模式 |
495
- |--------|---------|---------|
496
- | 页面标题 | 无 | `.vts-page-header` 含标题+描述+操作 |
497
- | 筛选区 | `bg-bg_color p-5` | `.vts-filter-area`（容器感+分隔线） |
498
- | 主操作按钮位置 | `ReTableBar #buttons` | `.vts-page-header__actions` |
499
- | 表格区 | 无包裹 | `.vts-table-area`（圆角边框） |
500
- | 表头底色 | EP 默认浅灰 | 由 `design-visual.scss` 全局提供品牌色浅底+强调线 |
501
- | 行 hover | EP 默认灰色 | 由 `design-visual.scss` 全局提供品牌色极浅底 |
497
+ | 差异点 | 出厂模式 | 设计模式 | JSON 来源 |
498
+ |--------|---------|---------|-----------|
499
+ | 页面标题 | 无 | `.vts-page-header` 含标题+描述+操作 | `structureRequirements.pageRegions.header` |
500
+ | 筛选区 | `bg-bg_color p-5` | `.vts-filter-area`（容器感+分隔线） | `structureRequirements.pageRegions.filter` |
501
+ | 主操作按钮位置 | `ReTableBar #buttons` | `.vts-page-header__actions` | `structureRequirements.pageRegions.header.actions` |
502
+ | 表格区 | 无包裹 | `.vts-table-area`（圆角边框） | `structureRequirements.pageRegions.table` |
503
+ | 表头底色 | EP 默认浅灰 | 由 `element-plus.scss` 全局提供品牌色浅底+强调线 | `visual.tableHeader` |
504
+ | 行 hover | EP 默认灰色 | 由 `element-plus.scss` 全局提供品牌色极浅底 | `visual.rowHover` |
505
+ | 交互行为 | EP 默认 | 按 JSON `interactionSpecs` 实现 | `interactionSpecs` |
502
506
 
503
507
  ## 操作列按钮过多（ReTableOperate · 强制）
504
508