@teamix-evo/skills 0.4.0 → 0.6.0

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 (97) hide show
  1. package/README.md +7 -3
  2. package/manifest.json +3 -2
  3. package/package.json +2 -2
  4. package/src/teamix-evo-code-opentrek/SKILL.md +12 -10
  5. package/src/teamix-evo-code-opentrek/api-layering.md +8 -5
  6. package/src/teamix-evo-code-opentrek/checklist.md +2 -0
  7. package/src/teamix-evo-code-opentrek/error-and-loading.md +38 -25
  8. package/src/teamix-evo-code-opentrek/file-structure.md +63 -54
  9. package/src/teamix-evo-code-opentrek/forms-and-validation.md +14 -12
  10. package/src/teamix-evo-code-opentrek/reuse-first.md +2 -0
  11. package/src/teamix-evo-code-opentrek/routing-and-codesplit.md +23 -21
  12. package/src/teamix-evo-code-opentrek/testing.md +32 -28
  13. package/src/teamix-evo-code-uni-manager/SKILL.md +12 -10
  14. package/src/teamix-evo-code-uni-manager/api-layering.md +2 -0
  15. package/src/teamix-evo-code-uni-manager/checklist.md +2 -0
  16. package/src/teamix-evo-code-uni-manager/error-and-loading.md +3 -1
  17. package/src/teamix-evo-code-uni-manager/file-structure.md +2 -0
  18. package/src/teamix-evo-code-uni-manager/forms-and-validation.md +2 -0
  19. package/src/teamix-evo-code-uni-manager/reuse-first.md +3 -1
  20. package/src/teamix-evo-code-uni-manager/routing-and-codesplit.md +3 -1
  21. package/src/teamix-evo-code-uni-manager/testing.md +2 -0
  22. package/src/teamix-evo-design-opentrek/SKILL.md +213 -52
  23. package/src/teamix-evo-design-opentrek/boundaries.md +25 -5
  24. package/src/teamix-evo-design-opentrek/brand.md +7 -7
  25. package/src/teamix-evo-design-opentrek/checklist.md +15 -13
  26. package/src/teamix-evo-design-opentrek/components.md +89 -39
  27. package/src/teamix-evo-design-opentrek/examples/detail-ai-gateway-1.html +1069 -0
  28. package/src/teamix-evo-design-opentrek/examples/detail-ai-gateway-instance.html +941 -0
  29. package/src/teamix-evo-design-opentrek/examples/detail-page-api-doc.html +906 -0
  30. package/src/teamix-evo-design-opentrek/examples/detail-page-config.html +993 -0
  31. package/src/teamix-evo-design-opentrek/examples/detail-page-monitor.html +1339 -0
  32. package/src/teamix-evo-design-opentrek/examples/detail-page.html +933 -0
  33. package/src/teamix-evo-design-opentrek/examples/settings-page.html +1119 -0
  34. package/src/teamix-evo-design-opentrek/examples/standard-card-list.html +1094 -0
  35. package/src/teamix-evo-design-opentrek/examples/standard-table-list.html +1361 -0
  36. package/src/teamix-evo-design-opentrek/examples/wizard-form-page.html +877 -0
  37. package/src/teamix-evo-design-opentrek/flows.md +85 -12
  38. package/src/teamix-evo-design-opentrek/foundations.md +12 -9
  39. package/src/teamix-evo-design-opentrek/generation-flow.md +84 -14
  40. package/src/teamix-evo-design-opentrek/pages/detail-page/SKILL.md +260 -0
  41. package/src/teamix-evo-design-opentrek/pages/detail-page/patterns/api-doc-detail.md +163 -0
  42. package/src/teamix-evo-design-opentrek/pages/detail-page/patterns/comparison-detail.md +100 -0
  43. package/src/teamix-evo-design-opentrek/pages/detail-page/patterns/monitor-detail.md +190 -0
  44. package/src/teamix-evo-design-opentrek/pages/detail-page/patterns/resource-detail.md +148 -0
  45. package/src/teamix-evo-design-opentrek/pages/form-page/SKILL.md +362 -0
  46. package/src/teamix-evo-design-opentrek/pages/list-page/SKILL.md +286 -0
  47. package/src/teamix-evo-design-opentrek/pages/list-page/_shared/action-column-spec.md +60 -0
  48. package/src/teamix-evo-design-opentrek/pages/list-page/_shared/column-meta-rules.md +117 -0
  49. package/src/teamix-evo-design-opentrek/pages/list-page/_shared/search-combo-spec.md +194 -0
  50. package/src/teamix-evo-design-opentrek/pages/list-page/_shared/state-action-pattern.md +51 -0
  51. package/src/teamix-evo-design-opentrek/pages/list-page/patterns/advanced-filter-list.md +94 -0
  52. package/src/teamix-evo-design-opentrek/pages/list-page/patterns/card-list.md +558 -0
  53. package/src/teamix-evo-design-opentrek/pages/list-page/patterns/drawer-list.md +76 -0
  54. package/src/teamix-evo-design-opentrek/pages/list-page/patterns/expandable-list.md +70 -0
  55. package/src/teamix-evo-design-opentrek/pages/list-page/patterns/l2-sidebar-list.md +73 -0
  56. package/src/teamix-evo-design-opentrek/pages/list-page/patterns/standard-list.md +198 -0
  57. package/src/teamix-evo-design-opentrek/patterns/color-mapping.md +96 -0
  58. package/src/teamix-evo-design-opentrek/patterns/dashboard.md +2 -0
  59. package/src/teamix-evo-design-opentrek/patterns/detail-page.md +218 -152
  60. package/src/teamix-evo-design-opentrek/patterns/form-page.md +437 -228
  61. package/src/teamix-evo-design-opentrek/patterns/list-page.md +221 -260
  62. package/src/teamix-evo-design-opentrek/patterns/page-types.md +40 -125
  63. package/src/teamix-evo-design-opentrek/philosophy.md +7 -5
  64. package/src/teamix-evo-design-opentrek/rules/_assets/OP_AGENT RUNTIME.svg +1 -0
  65. package/src/teamix-evo-design-opentrek/rules/_assets/OP_AI GATEWAY.svg +1 -0
  66. package/src/teamix-evo-design-opentrek/rules/_assets/OP_AI STUDIO.svg +1 -0
  67. package/src/teamix-evo-design-opentrek/rules/_assets/OP_DEV-2.svg +1 -0
  68. package/src/teamix-evo-design-opentrek/rules/_assets/OP_LOGO.svg +1 -0
  69. package/src/teamix-evo-design-opentrek/rules/_assets/OP_OPS.svg +1 -0
  70. package/src/teamix-evo-design-opentrek/rules/boundaries.rules.json +3 -3
  71. package/src/teamix-evo-design-opentrek/rules/business-mapping.json +124 -0
  72. package/src/teamix-evo-design-opentrek/rules/common-components.json +924 -0
  73. package/src/teamix-evo-design-opentrek/rules/component-specs.json +1083 -0
  74. package/src/teamix-evo-design-opentrek/rules/design-tokens.css +433 -0
  75. package/src/teamix-evo-design-opentrek/rules/design-tokens.json +2798 -0
  76. package/src/teamix-evo-design-opentrek/rules/layout-rules.json +218 -0
  77. package/src/teamix-evo-design-opentrek/rules/page-flow.json +351 -0
  78. package/src/teamix-evo-design-opentrek/rules/page-frame.json +241 -0
  79. package/src/teamix-evo-design-opentrek/rules/page-header-spec.md +123 -0
  80. package/src/teamix-evo-design-opentrek/rules/page-types.json +206 -0
  81. package/src/teamix-evo-design-opentrek/rules/sidebar-spec.md +217 -0
  82. package/src/teamix-evo-design-opentrek/rules/styling.json +188 -0
  83. package/src/teamix-evo-design-opentrek/rules/token-mapping.md +284 -0
  84. package/src/teamix-evo-design-uni-manager/SKILL.md +18 -27
  85. package/src/teamix-evo-design-uni-manager/boundaries.md +7 -4
  86. package/src/teamix-evo-design-uni-manager/brand.md +1 -1
  87. package/src/teamix-evo-design-uni-manager/components.md +33 -28
  88. package/src/teamix-evo-design-uni-manager/foundations.md +24 -21
  89. package/src/teamix-evo-design-uni-manager/generation-flow.md +46 -8
  90. package/src/teamix-evo-design-uni-manager/patterns/dashboard.md +3 -1
  91. package/src/teamix-evo-design-uni-manager/patterns/detail-page.md +42 -13
  92. package/src/teamix-evo-design-uni-manager/patterns/form-page.md +67 -30
  93. package/src/teamix-evo-design-uni-manager/patterns/list-page.md +73 -40
  94. package/src/teamix-evo-design-uni-manager/patterns/page-types.md +14 -12
  95. package/src/teamix-evo-design-uni-manager/philosophy.md +4 -2
  96. package/src/teamix-evo-design-uni-manager/rules/boundaries.rules.json +3 -3
  97. package/src/teamix-evo-manage/SKILL.md +74 -66
@@ -1,6 +1,6 @@
1
1
  # 生成 / 翻新 / 验证流程
2
2
 
3
- > AI 在执行页面级任务时,按本文件的门控顺序执行。每一步都有明确的输入输出,跳步会导致结果不可控。
3
+ > ⚠️ **本文件是页面级任务的唯一执行路径。每一步都有 GATE 门禁和 MUST READ 文件清单。** > **跳步 = 产出不合规。AI 不得凭"已有知识"省略任何文件读取。**
4
4
 
5
5
  ---
6
6
 
@@ -14,7 +14,11 @@ Step 1 需求确认 → Step 2 类型识别 → Step 3 子类型 + 布局
14
14
  Step 6 自检 ← Step 5 视觉填充 ← Step 4 组件挑选
15
15
  ```
16
16
 
17
- ### Step 1 · 最小 quorum + 默认值
17
+ > **每步必须产出明确输出后才能进入下一步(GATE 条件)。**
18
+
19
+ ## Step 1 · 最小 quorum + 默认值
20
+
21
+ 📖 **MUST READ**: [philosophy.md](./philosophy.md)(理解"为什么这么做" — 四大原则优先级)+ [brand.md](./brand.md)(视觉调性 + 文案语气基调)
18
22
 
19
23
  **只有两个信息缺一不可**(最小 quorum,缺则反问):
20
24
 
@@ -39,7 +43,11 @@ Step 6 自检 ← Step 5 视觉填充 ← Step 4 组件挑选
39
43
 
40
44
  **输出**:页面类型 + 资源实体 + 一句话场景假设("假设是平台管理员的实例 CRUD 列表,多云资源默认显示 cloud Badge,如有偏差请指正")。
41
45
 
42
- ### Step 2 · 页面类型识别
46
+ ## Step 2 · 页面类型识别
47
+
48
+ 🚧 **GATE**: Step 1 必须已产出"页面类型 + 资源实体 + 场景假设"
49
+
50
+ 📖 **MUST READ**: [patterns/page-types.md](./patterns/page-types.md) §决策树 + §Zone Map
43
51
 
44
52
  根据 [patterns/page-types.md](./patterns/page-types.md) §决策树匹配类型:
45
53
 
@@ -55,7 +63,11 @@ Step 6 自检 ← Step 5 视觉填充 ← Step 4 组件挑选
55
63
 
56
64
  **输出**:页面类型 ID(`ListPage` / `DetailPage` / `Console` / ...)。
57
65
 
58
- ### Step 3 · 子类型识别 + 布局选择
66
+ ## Step 3 · 子类型识别 + 布局选择
67
+
68
+ 🚧 **GATE**: Step 2 必须已产出"页面类型 ID"
69
+
70
+ 📖 **MUST READ**: 对应的 `patterns/{type}-page.md` + [flows.md](./flows.md)(涉及租户/区域切换时)
59
71
 
60
72
  读对应 `patterns/{type}-page.md`:
61
73
 
@@ -66,19 +78,29 @@ Step 6 自检 ← Step 5 视觉填充 ← Step 4 组件挑选
66
78
 
67
79
  **输出**:子类型 ID + 区域骨架(参照 [patterns/page-types.md](./patterns/page-types.md) §Zone Map)。
68
80
 
69
- ### Step 4 · 组件挑选
81
+ ## Step 4 · 组件挑选
82
+
83
+ 🚧 **GATE**: Step 3 必须已产出"子类型 ID + 区域骨架"
84
+
85
+ 📖 **MUST READ**: [components.md](./components.md) §0 兜底铁律 + §1 双层架构 + §3 决策树 + §5 拼装配方
70
86
 
71
87
  读 [components.md](./components.md) §选型决策树:
72
88
 
73
89
  1. 优先使用 `@teamix-evo/ui` 注册表中的稳定组件
74
90
  2. 通过 MCP `list_components(status: "stable")` 查可用列表
75
91
  3. 通过 MCP `get_component_meta(id)` 查具体 Props/Examples
92
+ - **Props**:确定必传 / 可选 / 默认值,明确接口契约
93
+ - **Examples**:作为实现参考(含组合用法、常见模式、边界处理),优先复用示例中的写法而非自由发挥
76
94
  4. 复合场景按 [components.md](./components.md) §5.2 拼装配方装配(SearchCombo / ContextSwitcher / CardGrid 等概念占位)
77
95
  5. um-topbar / um-side-nav 等实物业务组件位于 `@teamix-evo/biz-ui/uni-manager/*`
78
96
 
79
- **输出**:组件清单 + 每个组件的关键 Props
97
+ **输出**:组件清单 + 每个组件的关键 Props + 参考的 Example 片段(若有启发性写法)。
80
98
 
81
- ### Step 5 · 视觉填充(Token 绑定)
99
+ ## Step 5 · 视觉填充(Token 绑定)
100
+
101
+ 🚧 **GATE**: Step 4 必须已产出"组件清单 + 每个组件的关键 Props"
102
+
103
+ 📖 **MUST READ**: [foundations.md](./foundations.md) 全文(§1 Token 优先级 + §4 色彩 + §5 圆角 + §6 阴影 + §7 动效)+ [brand.md](./brand.md) §1 视觉五维(圆角/配色/密度/阴影/焦点风格对齐)
82
104
 
83
105
  读 [foundations.md](./foundations.md),所有色彩、间距、字号、圆角、阴影、动效**必须**使用 Token:
84
106
 
@@ -95,7 +117,11 @@ Step 6 自检 ← Step 5 视觉填充 ← Step 4 组件挑选
95
117
 
96
118
  **输出**:含 Token 引用的可执行代码 / HTML。
97
119
 
98
- ### Step 6 · 自检
120
+ ## Step 6 · 自检
121
+
122
+ 🚧 **GATE**: Step 5 必须已产出"含 Token 引用的可执行代码"
123
+
124
+ 📖 **MUST READ**: [boundaries.md](./boundaries.md) 全文(41+ 条硬规则)+ [checklist.md](./checklist.md) 全文
99
125
 
100
126
  对照 [checklist.md](./checklist.md) 12+ 项逐项验证:
101
127
 
@@ -110,6 +136,12 @@ Step 6 自检 ← Step 5 视觉填充 ← Step 4 组件挑选
110
136
 
111
137
  适用关键词:**"改造 / 升级 / 翻新 / 对齐规范 / 重新生成"**。
112
138
 
139
+ 📖 **MUST READ** (全部必读,不得省略):
140
+
141
+ 1. [boundaries.md](./boundaries.md) — 硬规则真值
142
+ 2. [foundations.md](./foundations.md) — Token 真值
143
+ 3. [components.md](./components.md) — 组件选型
144
+
113
145
  ```
114
146
  1. 读取目标页面源码
115
147
  2. 扫描违规项(按 boundaries.md F1-F10 + S1-S8 + UM1-UM3)
@@ -132,6 +164,12 @@ Step 6 自检 ← Step 5 视觉填充 ← Step 4 组件挑选
132
164
 
133
165
  适用关键词:**"检查 / 验证 / 评估 / 是否符合规范"**。
134
166
 
167
+ 📖 **MUST READ** (全部必读,不得省略):
168
+
169
+ 1. [boundaries.md](./boundaries.md) — 41+ 条硬规则
170
+ 2. [checklist.md](./checklist.md) — 13 强制项 + 5 一致性 + 7 建议项
171
+ 3. [foundations.md](./foundations.md) — Token 真值(用于校验是否符合)
172
+
135
173
  ```
136
174
  1. 读取目标页面源码
137
175
  2. 逐条对照 boundaries.md
@@ -1,8 +1,10 @@
1
1
  # Dashboard — 控制台首页 / 数据概览页
2
2
 
3
+ > ⚠️ **Prerequisites**: 你必须已在 [generation-flow.md](../generation-flow.md) Step 2 确认页面类型为 **Dashboard**,并由 Step 3 引导到这里。
4
+
3
5
  > AI 实操路径:Step 2(页面类型识别)判定为 Dashboard 后,本文档接管。
4
6
  >
5
- > uni-manager 中 Dashboard **同时承担"控制台 Home"** 角色(资源总览 / 待办 / 跨云态势),是用户登录后第一屏。
7
+ > uni-manager 中 Dashboard **同时承担“控制台 Home”** 角色(资源总览 / 待办 / 跨云态势),是用户登录后第一屏。
6
8
 
7
9
  ---
8
10
 
@@ -1,6 +1,8 @@
1
1
  # Detail Page — 详情页模式(uni-manager)
2
2
 
3
- > **触发**:用户描述含"详情/查看/信息/概览(单资源)"。
3
+ > ⚠️ **Prerequisites**: 你必须已在 [generation-flow.md](../generation-flow.md) Step 2 确认页面类型为 **DetailPage**,并由 Step 3 引导到这里。
4
+
5
+ > **触发**:用户描述含“详情/查看/信息/概览(单资源)”。
4
6
  > **核心特征**:单条记录的只读展示 + DescriptionList + 操作按钮。
5
7
  > **页面级别**:L2(面包屑模式 PageHeader,自动继承 um-topbar + Sidebar)。
6
8
 
@@ -20,7 +22,34 @@
20
22
 
21
23
  ---
22
24
 
23
- ## 2. 标准结构(资源详情 — uni-manager 跨云增强)
25
+ ## 2. Template 组件拼装
26
+
27
+ > 源自 `packages/create/variants/uni-manager/src/templates/detail-page.tsx`
28
+
29
+ ```tsx
30
+ <PageShell header={<UmTopbar />} sidebar={<Sidebar />}>
31
+ <UmPageContainer header={<PageHeader breadcrumb={...} title="XX 详情" actions={...} />}>
32
+ {children} {/* InfoCard / Tabs / DescriptionList / Timeline */}
33
+ </UmPageContainer>
34
+ </PageShell>
35
+ ```
36
+
37
+ | Slot | 注入内容 | 说明 |
38
+ | ------------ | ---------------------------------------------------- | ---------- |
39
+ | `topbar` | UmTopbar | 框架级吃顶 |
40
+ | `sidebar` | Sidebar + 业务菜单 | 左导 |
41
+ | `pageHeader` | PageHeader(面包屑 + 标题 + actions + 可选数据概览) | L2 页面 |
42
+ | `children` | InfoCard / Tabs / DescriptionList / Timeline 等 | 详情主区 |
43
+
44
+ **壳层特征**:
45
+
46
+ - 结构最简洁 — 只有 4 个 slot,业务组件全部走 children
47
+ - InfoCard 是局部信息卡(业务子区域级),不算“主区白卡”
48
+ - Tabs 用于多维度信息分类(基本信息 / 监控 / 关联资源 / 操作日志)
49
+
50
+ ---
51
+
52
+ ## 3. 标准结构(资源详情 — uni-manager 跨云增强)
24
53
 
25
54
  ```
26
55
  ┌─────────────────────────────────────────────┐
@@ -65,7 +94,7 @@
65
94
 
66
95
  ---
67
96
 
68
- ## 3. 必需组件
97
+ ## 4. 必需组件
69
98
 
70
99
  | 组件 | 位置 | 说明 |
71
100
  | ------------------- | ---- | ------------------------------- |
@@ -87,7 +116,7 @@
87
116
 
88
117
  ---
89
118
 
90
- ## 4. DescriptionItem 字段交互
119
+ ## 5. DescriptionItem 字段交互
91
120
 
92
121
  | 类型 | 触发 | 反馈 |
93
122
  | -------------- | ---------- | --------------------------------- |
@@ -102,7 +131,7 @@
102
131
 
103
132
  ---
104
133
 
105
- ## 5. 操作按钮规则
134
+ ## 6. 操作按钮规则
106
135
 
107
136
  ### 5.1 位置
108
137
 
@@ -129,7 +158,7 @@
129
158
 
130
159
  ---
131
160
 
132
- ## 6. Tab 切换交互
161
+ ## 7. Tab 切换交互
133
162
 
134
163
  | 场景 | 行为 |
135
164
  | ---------- | ----------------------------- |
@@ -143,7 +172,7 @@
143
172
 
144
173
  ---
145
174
 
146
- ## 7. 信息分组
175
+ ## 8. 信息分组
147
176
 
148
177
  - DescriptionList 按 ListSection 分组(基本信息 / 配置信息 / 网络信息)
149
178
  - 每组可独立展开/收起(可选)
@@ -153,7 +182,7 @@
153
182
 
154
183
  ---
155
184
 
156
- ## 8. 嵌套约束
185
+ ## 9. 嵌套约束
157
186
 
158
187
  | 父子关系 | 状态 |
159
188
  | -------------------------------------------------------------------------------------------------------- | ----------------------------------- |
@@ -168,11 +197,11 @@
168
197
 
169
198
  ---
170
199
 
171
- ## 9. 禁止项
200
+ ## 10. 禁止项
172
201
 
173
202
  | 禁项 | 原因 |
174
203
  | -------------------------- | ------------------------------------- |
175
- | Form 直接在主内容区 | 编辑应通过 Drawer/Dialog/FormPage |
204
+ | Form 直接在主内容区 | 编辑应通过 Sheet/Dialog/FormPage |
176
205
  | DataTable 在主内容区 | 关联数据应用 Tabs 子面板 |
177
206
  | Chart 替代 DescriptionList | 图表属 Dashboard,监控用 MonitorPanel |
178
207
  | QueryFilter | 详情页无筛选需求 |
@@ -182,7 +211,7 @@
182
211
 
183
212
  ---
184
213
 
185
- ## 10. 边界情况
214
+ ## 11. 边界情况
186
215
 
187
216
  | 场景 | 处理 |
188
217
  | ---------- | ----------------------- |
@@ -197,7 +226,7 @@
197
226
 
198
227
  ---
199
228
 
200
- ## 11. 详情 → 列表返回约定
229
+ ## 12. 详情 → 列表返回约定
201
230
 
202
231
  - 面包屑父级项点击返回 ListPage
203
232
  - PageHeader 右侧可选 × 关闭按钮
@@ -208,7 +237,7 @@
208
237
 
209
238
  ---
210
239
 
211
- ## 12. 详情页特有自检
240
+ ## 13. 详情页特有自检
212
241
 
213
242
  - [ ] PageHeader 用面包屑模式(L2 页面)
214
243
  - [ ] um-topbar 在框架层就位(UM1)
@@ -1,6 +1,8 @@
1
1
  # Form Page — 表单页模式(uni-manager)
2
2
 
3
- > **触发**:用户描述含"新建/创建/编辑/修改/复制/填写"。
3
+ > ⚠️ **Prerequisites**: 你必须已在 [generation-flow.md](../generation-flow.md) Step 2 确认页面类型为 **FormPage**,并由 Step 3 引导到这里。
4
+
5
+ > **触发**:用户描述含“新建/创建/编辑/修改/复制/填写”。
4
6
  > **核心特征**:用户输入数据 + 字段校验 + 提交。
5
7
  > **页面级别**:L2(面包屑模式 PageHeader,自动继承 um-topbar + Sidebar)。弹窗表单 = L0。
6
8
 
@@ -8,26 +10,61 @@
8
10
 
9
11
  ## 1. 子类型识别
10
12
 
11
- | 子类型 | 关键词 | 差异特征 |
12
- | --------------- | --------------------- | ---------------------------------------------------------- |
13
- | **新建表单** | "新建"/"创建"/"新增" | 字段为空,标题"新建 XX",保存返回列表 |
14
- | **编辑表单** | "编辑"/"修改" | 字段填充数据,标题"编辑 XX",保存返回原页 |
15
- | **复制新建** | "复制"/"克隆" | 字段预填源数据(ID 除外),标题"复制新建 XX",保存返回列表 |
16
- | **Drawer 内联** | "侧滑编辑"/"快速编辑" | 在列表页右侧滑出 Drawer,无路由切换(uni-manager 高频) |
13
+ | 子类型 | 关键词 | 差异特征 |
14
+ | -------------- | --------------------- | -------------------------------------------------------------- |
15
+ | **新建表单** | "新建"/"创建"/"新增" | 字段为空,标题"新建 XX",保存返回列表 |
16
+ | **编辑表单** | "编辑"/"修改" | 字段填充数据,标题"编辑 XX",保存返回原页 |
17
+ | **复制新建** | "复制"/"克隆" | 字段预填源数据(ID 除外),标题"复制新建 XX",保存返回列表 |
18
+ | **Sheet 内联** | "侧滑编辑"/"快速编辑" | 在列表页右侧滑出 Sheet(抽屉),无路由切换(uni-manager 高频) |
19
+
20
+ ### FormPage vs Wizard vs Sheet(抽屉)区分
21
+
22
+ | 场景 | 类型 | 判断依据 |
23
+ | -------------------------- | ---------- | -------------------------------------------- |
24
+ | 字段无顺序依赖,一次填写 | FormPage | 单页表单 |
25
+ | 步骤间有顺序依赖,逐步完成 | WizardPage | 多步流程,Steps |
26
+ | 列表页快速编辑单条记录 | Sheet 内联 | 不切路由,保留列表上下文(uni-manager 默认) |
27
+
28
+ > Wizard 是独立页面类型,不是 FormPage 子类型。Sheet 内联是**编辑表单**的视图变体。
29
+
30
+ ---
31
+
32
+ ## 2. Template 组件拼装
33
+
34
+ > 源自 `packages/create/variants/uni-manager/src/templates/form-page.tsx`
35
+
36
+ ```tsx
37
+ <PageShell header={<UmTopbar />} sidebar={<Sidebar />}>
38
+ <UmPageContainer header={<PageHeader breadcrumb={...} title="新建 XX" />}>
39
+ <div className="flex-1 min-h-0 overflow-auto">
40
+ {children} {/* FieldGroup 们 / 分区 Card */}
41
+ </div>
42
+ {submitBar && (
43
+ <div className="sticky bottom-0 border-t bg-background">
44
+ {submitBar} {/* [取消] [提交] */}
45
+ </div>
46
+ )}
47
+ </UmPageContainer>
48
+ </PageShell>
49
+ ```
17
50
 
18
- ### FormPage vs Wizard vs Drawer 区分
51
+ | Slot | 注入内容 | 说明 |
52
+ | ------------ | ----------------------------------------- | ---------- |
53
+ | `topbar` | UmTopbar | 框架级吃顶 |
54
+ | `sidebar` | Sidebar + 业务菜单 | 左导 |
55
+ | `pageHeader` | PageHeader(面包屑模式 — L2 页面) | 含返回路径 |
56
+ | `children` | FieldGroup 们(可用分区 Card 切若干小节) | 滚动区 |
57
+ | `submitBar` | 取消 + 提交按钮(`justify-end`) | 粘底悬浮 |
19
58
 
20
- | 场景 | 类型 | 判断依据 |
21
- | -------------------------- | ----------- | -------------------------------------------- |
22
- | 字段无顺序依赖,一次填写 | FormPage | 单页表单 |
23
- | 步骤间有顺序依赖,逐步完成 | WizardPage | 多步流程,Steps |
24
- | 列表页快速编辑单条记录 | Drawer 内联 | 不切路由,保留列表上下文(uni-manager 默认) |
59
+ **壳层特征**:
25
60
 
26
- > Wizard 是独立页面类型,不是 FormPage 子类型。Drawer 内联是**编辑表单**的视图变体。
61
+ - 表单主区 `flex-1 overflow-auto` 内容超出视口时内滚
62
+ - SubmitBar 从滚动区移出,`sticky bottom-0` 粘底悬浮
63
+ - SubmitBar 上方 `border-t` 分割线 + `bg-background` 防透
27
64
 
28
65
  ---
29
66
 
30
- ## 2. 布局模式(三选一)
67
+ ## 3. 布局模式(三选一)
31
68
 
32
69
  ### 2.1 SINGLE_COL(默认)
33
70
 
@@ -78,10 +115,10 @@ SubmitBar [取消] [创建]
78
115
 
79
116
  **何时分区**:字段 > 10 / 业务概念分组明显 / 含可选高级配置。
80
117
 
81
- ### 2.4 Drawer 内联(uni-manager 编辑高频)
118
+ ### 2.4 Sheet 内联(uni-manager 编辑高频)
82
119
 
83
120
  ```text
84
- ┌── 列表页(保持) ────────┐ ┌── Drawer (侧滑) ──┐
121
+ ┌── 列表页(保持) ────────┐ ┌── Sheet (侧滑) ──┐
85
122
  │ DataTable │ │ Title: 编辑 实例 │
86
123
  │ ▢ i-001 [编辑]──────────►│ │ │
87
124
  │ ▢ i-002 │ │ FieldGroup │
@@ -96,7 +133,7 @@ SubmitBar [取消] [创建]
96
133
 
97
134
  ---
98
135
 
99
- ## 3. 必需组件
136
+ ## 4. 必需组件
100
137
 
101
138
  | 组件 | 位置 | 说明 |
102
139
  | --------------------- | ------ | ------------------------------------- |
@@ -108,7 +145,7 @@ SubmitBar [取消] [创建]
108
145
 
109
146
  ---
110
147
 
111
- ## 4. SubmitBar / Footer 规则
148
+ ## 5. SubmitBar / Footer 规则
112
149
 
113
150
  ### 4.1 智能定位
114
151
 
@@ -132,9 +169,9 @@ SubmitBar [取消] [创建]
132
169
 
133
170
  ---
134
171
 
135
- ## 5. 字段控件选型
172
+ ## 6. 字段控件选型
136
173
 
137
- > **枚举数量阈值规则(≤7 RadioGroup / 8-30 Select / >30 Combobox)见 [components.md §3.5 输入控件](../components.md#35-输入控件--input-vs-select-vs-combobox)**。本节只列表单页专属补充字段。
174
+ > **枚举数量阈值规则(≤7 RadioGroup / 8-30 Select / >30 补搜索候选)见 [components.md §3.5 输入控件](../components.md#35-输入控件--input-vs-select-vs-autocomplete)**。本节只列表单页专属补充字段。
138
175
 
139
176
  | 字段类型 | 组件 | 说明 |
140
177
  | -------------- | ---------------------------- | ----------------------------------------- |
@@ -151,7 +188,7 @@ SubmitBar [取消] [创建]
151
188
 
152
189
  ---
153
190
 
154
- ## 6. 字段校验规则
191
+ ## 7. 字段校验规则
155
192
 
156
193
  ### 6.1 触发时机
157
194
 
@@ -178,7 +215,7 @@ SubmitBar [取消] [创建]
178
215
 
179
216
  ---
180
217
 
181
- ## 7. 提交交互
218
+ ## 8. 提交交互
182
219
 
183
220
  ### 7.1 操作流
184
221
 
@@ -216,7 +253,7 @@ SubmitBar [取消] [创建]
216
253
 
217
254
  ---
218
255
 
219
- ## 8. shadcn 表单组合契约
256
+ ## 9. shadcn 表单组合契约
220
257
 
221
258
  > 表单**组合层面**的本地约定。视觉/全局规则参见 [boundaries.md FF1-FF4](../boundaries.md#ff1-ff4--表单专属硬约束)(色块、必填、Card 嵌套、错误文案)+ [boundaries.md S2](../boundaries.md#error-s2--不用-space-x---space-y--改用-flex--gap-)(gap 替代 space-y)+ [boundaries.md F8](../boundaries.md#error-f8--禁止在-dialogtitle-中加图标--scope-dialog)(DialogTitle 无图标)+ [boundaries.md F9](../boundaries.md#error-f9--弹窗确定按钮禁止加-disabled-禁用态--scope-dialog)(提交按钮无 disabled)。
222
259
 
@@ -230,7 +267,7 @@ SubmitBar [取消] [创建]
230
267
 
231
268
  ---
232
269
 
233
- ## 9. 嵌套约束
270
+ ## 10. 嵌套约束
234
271
 
235
272
  | 父子关系 | 状态 |
236
273
  | --------------------------------------------------------------------------------------------- | --------------------------- |
@@ -243,12 +280,12 @@ SubmitBar [取消] [创建]
243
280
  | Field → Input / Select / Switch / ToggleGroup / Textarea | ALLOW |
244
281
  | Field → InputGroup | ALLOW |
245
282
  | Card → Form | **FORBID**(用 FieldGroup) |
246
- | Drawer → FieldGroup | ALLOW(内联编辑) |
283
+ | Sheet → FieldGroup | ALLOW(内联编辑) |
247
284
  | 自建 topbar | **FORBID**(UM1) |
248
285
 
249
286
  ---
250
287
 
251
- ## 10. 禁止项
288
+ ## 11. 禁止项
252
289
 
253
290
  | 禁项 | 原因 |
254
291
  | --------------------------- | -------------------------------- |
@@ -262,7 +299,7 @@ SubmitBar [取消] [创建]
262
299
 
263
300
  ---
264
301
 
265
- ## 11. 表单页特有自检
302
+ ## 12. 表单页特有自检
266
303
 
267
304
  - [ ] PageHeader 用面包屑模式(L2 页面)
268
305
  - [ ] um-topbar 在框架层就位(UM1)
@@ -275,12 +312,12 @@ SubmitBar [取消] [创建]
275
312
  - [ ] 取消时未保存内容 AlertDialog 确认
276
313
  - [ ] 编辑模式加载用 Skeleton
277
314
  - [ ] Toast 用 sonner(C9),不用自定义全局通知
278
- - [ ] 单字段 / ≤5 字段编辑优先用 Drawer 内联,不切路由
315
+ - [ ] 单字段 / ≤5 字段编辑优先用 Sheet 内联,不切路由
279
316
  - [ ] 危险操作:标题陈述句 + 输入资源名称确认
280
317
 
281
318
  ---
282
319
 
283
- ## 12. 《Teamix UI 表单设计规范》对齐 Checklist
320
+ ## 13. 《Teamix UI 表单设计规范》对齐 Checklist
284
321
 
285
322
  > 详细说明见 [`packages/ui/AGENTS.md` 第六节](../../../../ui/AGENTS.md#六表单族硬规则formfieldfilter-barlabelinput)。本节只列 AI 写表单时的 yes/no 自检项。
286
323
 
@@ -1,6 +1,8 @@
1
1
  # List Page — 列表页模式(uni-manager)
2
2
 
3
- > **触发**:用户描述含"列表/表格/查询/检索/卡片管理"。
3
+ > ⚠️ **Prerequisites**: 你必须已在 [generation-flow.md](../generation-flow.md) Step 2 确认页面类型为 **ListPage**,并由 Step 3 引导到这里。
4
+
5
+ > **触发**:用户描述含“列表/表格/查询/检索/卡片管理”。
4
6
  > **核心特征**:多条结构化数据 + 搜索/筛选 + 分页。
5
7
  > **页面级别**:L1(标题模式 PageHeader,自动继承 um-topbar + Sidebar)。
6
8
  > **uni-manager 增强**:高密度行(36-40px)+ 跨云 CloudBadge 列 + 多租户 / 多区域筛选维度 + 批量操作高频。
@@ -14,7 +16,7 @@
14
16
  | **standard** | "列表"/"表格"/"查询" | TWO_COL | DataTable + Pagination |
15
17
  | **l2-sidebar** | "分类"/"分组"/"左侧树" | TWO_COL + 内部 Sidebar(240px) | Sidebar + DataTable |
16
18
  | **expandable** | "展开"/"子项"/"详情行" | TWO_COL | DataTable(行内展开) |
17
- | **drawer** | "弹窗列表"/"选择器" | Drawer | DataTable ⊂ Drawer |
19
+ | **drawer** | "弹窗列表"/"选择器" | Sheet | DataTable ⊂ Sheet |
18
20
  | **pure-card** | "纯卡片"/"卡片管理"/"资源卡片管理" | SINGLE_COL | CardGrid + ItemCard + CardActionBar |
19
21
  | **standard-card** | "卡片列表"/"分类卡片" | TWO_COL | Sidebar + CardGrid + ItemCard |
20
22
  | **view-toggle** | "视图切换"/"列表卡片切换" | TWO_COL + ViewToggle | ViewToggle + DataTable/CardGrid |
@@ -35,7 +37,38 @@
35
37
 
36
38
  ---
37
39
 
38
- ## 2. 标准结构
40
+ ## 2. Template 组件拼装
41
+
42
+ > 源自 `packages/create/variants/uni-manager/src/templates/list-page.tsx`
43
+
44
+ ```tsx
45
+ <PageShell header={<UmTopbar />} sidebar={<Sidebar />}>
46
+ <UmPageContainer header={<PageHeader title="..." actions={...} />}>
47
+ {toolbar} {/* ActionToolbar / SearchCombo / 筛选按钮 */}
48
+ {children} {/* DataTable / CardGrid 主内容区 */}
49
+ {footer} {/* Pagination / BulkActionBar */}
50
+ </UmPageContainer>
51
+ </PageShell>
52
+ ```
53
+
54
+ | Slot | 注入内容 | 说明 |
55
+ | ------------ | ------------------------------------------- | --------------------------- |
56
+ | `topbar` | UmTopbar | 框架级吃顶(租户/区域切换) |
57
+ | `sidebar` | Sidebar + 业务菜单 | 左导 |
58
+ | `pageHeader` | PageHeader(title + description + actions) | 标题模式 L1 |
59
+ | `toolbar` | ActionToolbar / SearchCombo / 筛选行 | PageHeader 下方、主区上方 |
60
+ | `children` | DataTable / CardGrid | 主内容区(撑高) |
61
+ | `footer` | Pagination + BulkActionBar | 紧贴表格底部 |
62
+
63
+ **壳层特征**:
64
+
65
+ - UmPageContainer **无白卡** — 业务组件直接坐在白底主区上
66
+ - 与 OpenTrek 的“内嵌大白卡”对仗:um 主区无额外包裹层
67
+ - footer 紧贴表格底部,页面整体溢出由父级 SidebarInset overflow 接管
68
+
69
+ ---
70
+
71
+ ## 3. 标准结构(设计线框)
39
72
 
40
73
  ```
41
74
  ┌────────────────────────────────────────────┐
@@ -57,7 +90,7 @@
57
90
 
58
91
  ---
59
92
 
60
- ## 3. 必需组件
93
+ ## 4. 必需组件
61
94
 
62
95
  | 组件 | 位置 | 说明 |
63
96
  | ----------------------------- | ------- | ----------------------------------------------------------- |
@@ -70,7 +103,7 @@
70
103
 
71
104
  ---
72
105
 
73
- ## 4. SearchCombo 规范
106
+ ## 5. SearchCombo 规范
74
107
 
75
108
  > ListPage 顶部搜索 + 筛选的标准复合组件。**禁止**用 Input + Select 散件拼装。
76
109
 
@@ -131,7 +164,7 @@
131
164
 
132
165
  ---
133
166
 
134
- ## 5. DataTable 规则(核心)
167
+ ## 6. DataTable 规则(核心)
135
168
 
136
169
  ### 5.1 列元规则(每列必备)
137
170
 
@@ -205,7 +238,7 @@
205
238
 
206
239
  ---
207
240
 
208
- ## 6. 操作列规范(硬约束)
241
+ ## 7. 操作列规范(硬约束)
209
242
 
210
243
  ### 6.1 结构
211
244
 
@@ -228,16 +261,16 @@
228
261
 
229
262
  ### 6.3 操作列行为映射
230
263
 
231
- | 操作 | 触发 | 前置 | 二次确认 | 目标 | 返回行为 |
232
- | --------- | -------- | ---------- | ------------------ | ----------------- | ------------------------------------ |
233
- | 查看/管理 | 点链接 | — | 否 | DetailPage | 返回列表保持筛选+分页 |
234
- | 编辑 | 点按钮 | — | 否 | FormPage / Drawer | 保存成功返回列表 + Toast「保存成功」 |
235
- | 删除 | 点按钮 | 资源已停止 | 是(输入资源名称) | Dialog 确认 | 确认后刷新 + Toast「删除成功」 |
236
- | 更多 | Dropdown | — | 按操作分级 | Dropdown 菜单 | 选择子操作 |
264
+ | 操作 | 触发 | 前置 | 二次确认 | 目标 | 返回行为 |
265
+ | --------- | -------- | ---------- | ------------------ | ---------------- | ------------------------------------ |
266
+ | 查看/管理 | 点链接 | — | 否 | DetailPage | 返回列表保持筛选+分页 |
267
+ | 编辑 | 点按钮 | — | 否 | FormPage / Sheet | 保存成功返回列表 + Toast「保存成功」 |
268
+ | 删除 | 点按钮 | 资源已停止 | 是(输入资源名称) | Dialog 确认 | 确认后刷新 + Toast「删除成功」 |
269
+ | 更多 | Dropdown | — | 按操作分级 | Dropdown 菜单 | 选择子操作 |
237
270
 
238
271
  ---
239
272
 
240
- ## 7. Card 内对齐规则(硬约束)
273
+ ## 8. Card 内对齐规则(硬约束)
241
274
 
242
275
  水平 padding 分层模型:
243
276
 
@@ -270,7 +303,7 @@
270
303
 
271
304
  ---
272
305
 
273
- ## 8. 状态-操作模式
306
+ ## 9. 状态-操作模式
274
307
 
275
308
  ### 8.1 元规则
276
309
 
@@ -298,7 +331,7 @@
298
331
  ### 8.4 页面间导航交互
299
332
 
300
333
  - **操作列「查看/管理」** → DetailPage(页面跳转);面包屑返回,保持筛选+分页
301
- - **操作列「编辑」** → FormPage 或 Drawer(跳转/侧滑);保存/取消返回列表,保存附 Toast
334
+ - **操作列「编辑」** → FormPage 或 Sheet(跳转/侧滑);保存/取消返回列表,保存附 Toast
302
335
  - **创建操作** → FormPage(页面跳转);创建成功/取消返回列表
303
336
  - **搜索执行** → 当前列表(数据刷新);重置到第 1 页
304
337
  - **筛选条件变更** → 当前列表(数据刷新);重置到第 1 页,保持筛选条件
@@ -306,38 +339,38 @@
306
339
 
307
340
  ---
308
341
 
309
- ## 9. 嵌套约束
342
+ ## 10. 嵌套约束
310
343
 
311
- | 父子关系 | 状态 |
312
- | ----------------------------------------------------------------------------------------------------------- | ---------------------------- |
313
- | um-topbar → PageContainer → ContentWrapper → Card(白卡容器) → PageHeader/ActionToolbar/DataTable/Pagination | ALLOW |
314
- | ContentWrapper → 业务组件(无 Card 包裹) | **FORBID** |
315
- | Card → Card | **FORBID**(白卡单例) |
316
- | ActionToolbar → SearchCombo | ALLOW |
317
- | CardGrid → ItemCard → CardActionBar | ALLOW |
318
- | DataTable → Pagination | ALLOW |
319
- | DataTable → Form | **FORBID**(用 Drawer 触发) |
320
- | 自建 topbar | **FORBID**(UM1) |
344
+ | 父子关系 | 状态 |
345
+ | ----------------------------------------------------------------------------------------------------------- | --------------------------- |
346
+ | um-topbar → PageContainer → ContentWrapper → Card(白卡容器) → PageHeader/ActionToolbar/DataTable/Pagination | ALLOW |
347
+ | ContentWrapper → 业务组件(无 Card 包裹) | **FORBID** |
348
+ | Card → Card | **FORBID**(白卡单例) |
349
+ | ActionToolbar → SearchCombo | ALLOW |
350
+ | CardGrid → ItemCard → CardActionBar | ALLOW |
351
+ | DataTable → Pagination | ALLOW |
352
+ | DataTable → Form | **FORBID**(用 Sheet 触发) |
353
+ | 自建 topbar | **FORBID**(UM1) |
321
354
 
322
355
  ---
323
356
 
324
- ## 10. 禁止项
357
+ ## 11. 禁止项
325
358
 
326
- | 禁项 | 原因 |
327
- | ----------------------- | ----------------------------------- |
328
- | Form 直接出现在内容区 | 应通过 Dialog/Drawer/FormPage 触发 |
329
- | Chart 出现在标准列表 | 图表归属 Dashboard |
330
- | 内联编辑 | 编辑必须通过 Drawer/Dialog/FormPage |
331
- | 拖拽排序 | 表格数据为服务端排序 |
332
- | 无限滚动 | B2B 管理场景需精确分页 |
333
- | 悬浮操作栏 | 遮挡数据,可发现性差 |
334
- | 右键菜单 | 移动端不兼容 |
335
- | `hr` / section-divider | 间距通过 padding/margin 控制 |
336
- | 跨云资源不带 CloudBadge | 违反 UM3 |
359
+ | 禁项 | 原因 |
360
+ | ----------------------- | ---------------------------------- |
361
+ | Form 直接出现在内容区 | 应通过 Dialog/Sheet/FormPage 触发 |
362
+ | Chart 出现在标准列表 | 图表归属 Dashboard |
363
+ | 内联编辑 | 编辑必须通过 Sheet/Dialog/FormPage |
364
+ | 拖拽排序 | 表格数据为服务端排序 |
365
+ | 无限滚动 | B2B 管理场景需精确分页 |
366
+ | 悬浮操作栏 | 遮挡数据,可发现性差 |
367
+ | 右键菜单 | 移动端不兼容 |
368
+ | `hr` / section-divider | 间距通过 padding/margin 控制 |
369
+ | 跨云资源不带 CloudBadge | 违反 UM3 |
337
370
 
338
371
  ---
339
372
 
340
- ## 11. 列表页特有自检
373
+ ## 12. 列表页特有自检
341
374
 
342
375
  - [ ] PageHeader / ActionToolbar / DataTable / Pagination 嵌套结构正确
343
376
  - [ ] um-topbar 在框架层就位(UM1)