@teamix-evo/skills 0.12.0 → 0.13.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.
- package/README.md +1 -1
- package/manifest.json +11 -28
- package/package.json +2 -2
- package/src/teamix-evo-code-opentrek/SKILL.md +13 -13
- package/src/teamix-evo-code-opentrek/api-layering.md +53 -44
- package/src/teamix-evo-code-opentrek/checklist.md +24 -24
- package/src/teamix-evo-code-opentrek/file-structure.md +55 -36
- package/src/teamix-evo-code-opentrek/forms-and-validation.md +17 -16
- package/src/teamix-evo-code-opentrek/reuse-first.md +6 -9
- package/src/teamix-evo-code-opentrek/testing.md +14 -14
- package/src/teamix-evo-code-uni-manager/SKILL.md +15 -15
- package/src/teamix-evo-code-uni-manager/api-layering.md +74 -58
- package/src/teamix-evo-code-uni-manager/checklist.md +28 -28
- package/src/teamix-evo-code-uni-manager/error-and-loading.md +2 -2
- package/src/teamix-evo-code-uni-manager/file-structure.md +77 -62
- package/src/teamix-evo-code-uni-manager/forms-and-validation.md +17 -15
- package/src/teamix-evo-code-uni-manager/reuse-first.md +7 -10
- package/src/teamix-evo-code-uni-manager/routing-and-codesplit.md +1 -1
- package/src/teamix-evo-code-uni-manager/testing.md +37 -37
- package/src/teamix-evo-design-opentrek/SKILL.md +41 -20
- package/src/teamix-evo-design-opentrek/boundaries.md +1 -1
- package/src/teamix-evo-design-opentrek/checklist.md +5 -5
- package/src/teamix-evo-design-opentrek/components.md +19 -19
- package/src/teamix-evo-design-opentrek/examples/standard-card-list.html +1 -1
- package/src/teamix-evo-design-opentrek/examples/standard-table-list.html +1 -1
- package/src/teamix-evo-design-opentrek/foundations.md +17 -17
- package/src/teamix-evo-design-opentrek/pages/dashboard-page/SKILL.md +18 -19
- package/src/teamix-evo-design-opentrek/pages/dashboard-page/patterns/dashboard-opentrek.md +6 -6
- package/src/teamix-evo-design-opentrek/pages/detail-page/SKILL.md +24 -25
- package/src/teamix-evo-design-opentrek/pages/detail-page/patterns/api-doc-detail.md +3 -7
- package/src/teamix-evo-design-opentrek/pages/detail-page/patterns/comparison-detail.md +3 -7
- package/src/teamix-evo-design-opentrek/pages/detail-page/patterns/monitor-detail.md +3 -7
- package/src/teamix-evo-design-opentrek/pages/detail-page/patterns/resource-detail.md +10 -10
- package/src/teamix-evo-design-opentrek/pages/form-page/SKILL.md +26 -27
- package/src/teamix-evo-design-opentrek/pages/list-page/SKILL.md +35 -36
- package/src/teamix-evo-design-opentrek/pages/list-page/_shared/item-card-spec.md +41 -32
- package/src/teamix-evo-design-opentrek/pages/list-page/patterns/card-list-opentrek.md +10 -10
- package/src/teamix-evo-design-opentrek/pages/list-page/patterns/card-list.md +23 -23
- package/src/teamix-evo-design-opentrek/pages/list-page/patterns/standard-list-opentrek.md +8 -8
- package/src/teamix-evo-design-opentrek/pages/list-page/patterns/standard-list.md +8 -8
- package/src/teamix-evo-design-opentrek/patterns/color-mapping.md +2 -2
- package/src/teamix-evo-design-opentrek/patterns/dashboard.md +1 -1
- package/src/teamix-evo-design-opentrek/patterns/detail-page.md +9 -9
- package/src/teamix-evo-design-opentrek/patterns/form-page.md +6 -6
- package/src/teamix-evo-design-opentrek/patterns/list-page.md +9 -9
- package/src/teamix-evo-design-opentrek/patterns/page-types.md +3 -3
- package/src/teamix-evo-design-opentrek/principles.md +541 -0
- package/src/teamix-evo-design-opentrek/rules/common-components.json +206 -76
- package/src/teamix-evo-design-opentrek/rules/component-specs.json +2 -2
- package/src/teamix-evo-design-opentrek/rules/design-tokens.css +223 -218
- package/src/teamix-evo-design-opentrek/rules/design-tokens.json +10 -32
- package/src/teamix-evo-design-opentrek/rules/page-frame.json +197 -193
- package/src/teamix-evo-design-opentrek/{generation-flow.md → workflow.md} +141 -22
- package/src/teamix-evo-design-uni-manager/SKILL.md +30 -6
- package/src/teamix-evo-design-uni-manager/boundaries.md +2 -2
- package/src/teamix-evo-design-uni-manager/brand.md +1 -1
- package/src/teamix-evo-design-uni-manager/checklist.md +2 -2
- package/src/teamix-evo-design-uni-manager/components.md +11 -11
- package/src/teamix-evo-design-uni-manager/foundations.md +7 -7
- package/src/teamix-evo-design-uni-manager/generation-flow.md +3 -3
- package/src/teamix-evo-manage/SKILL.md +111 -709
- package/src/teamix-evo-manage/init.md +98 -0
- package/src/teamix-evo-manage/migrate.md +100 -0
- package/src/teamix-evo-manage/rearchitect-capture-guide.md +174 -0
- package/src/teamix-evo-manage/rearchitect.md +373 -0
- package/src/teamix-evo-manage/update-component-staging.md +188 -0
- package/src/teamix-evo-manage/update-token-rename.md +126 -0
- package/src/teamix-evo-manage/update-token-treatment.md +116 -0
- package/src/teamix-evo-manage/update.md +213 -0
- package/src/teamix-evo-design-opentrek/brand.md +0 -154
- package/src/teamix-evo-design-opentrek/pages/list-page/_shared/search-combo-spec.md +0 -194
- package/src/teamix-evo-design-opentrek/philosophy.md +0 -98
- package/src/teamix-evo-design-opentrek/rules/README.md +0 -39
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_AGENT RUNTIME.svg +0 -1
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_AI GATEWAY.svg +0 -1
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_AI STUDIO.svg +0 -1
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_DEV-2.svg +0 -1
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_LOGO.svg +0 -1
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_OPS.svg +0 -1
- package/src/teamix-evo-design-opentrek/rules/layout-rules.json +0 -218
- package/src/teamix-evo-design-opentrek/rules/page-header-spec.md +0 -123
- package/src/teamix-evo-design-opentrek/rules/sidebar-spec.md +0 -217
- package/src/teamix-evo-upgrade/SKILL.md +0 -431
- /package/src/teamix-evo-design-opentrek/{rules/boundaries.rules.json → boundaries.json} +0 -0
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: teamix-evo-design-opentrek
|
|
3
3
|
description: |
|
|
4
|
-
Apply OpenTrek design system rules
|
|
5
|
-
TRIGGER when: user asks to
|
|
6
|
-
SKIP: single-component edits
|
|
4
|
+
Apply OpenTrek design system rules when AI generates or reviews a full UI screen / page.
|
|
5
|
+
TRIGGER when: user asks to 新建/优化/重构 页面, create/review/refactor a page/screen/dashboard; intent involves layout structure or multi-component composition; file write under `src/pages/**`.
|
|
6
|
+
SKIP: single-component edits (加按钮, 改 label); pure tokens/theme overrides; pure code refactor with no visual change; lifecycle commands (→ teamix-evo-manage).
|
|
7
7
|
Coordinates with: teamix-evo-code-opentrek (run alongside when the screen also creates new files).
|
|
8
8
|
---
|
|
9
9
|
|
|
10
10
|
# 页面规则系统 v7.8.4
|
|
11
11
|
|
|
12
12
|
> 本文件是**入口索引**:只负责意图路由 + 文件角色索引。
|
|
13
|
-
> 生成 / 翻新 / 验证的详细执行步骤、GATE 门禁、MUST READ 清单一律在 [
|
|
13
|
+
> 生成 / 翻新 / 验证的详细执行步骤、GATE 门禁、MUST READ 清单一律在 [workflow.md](./workflow.md)。
|
|
14
14
|
> 页面类型决策树、子类型识别在 [patterns/page-types.md](./patterns/page-types.md)。
|
|
15
15
|
|
|
16
16
|
路由分发架构 — 根技能负责意图识别和索引路由,详细规则在子技能和 `./rules/` 目录。
|
|
@@ -24,9 +24,9 @@ description: |
|
|
|
24
24
|
|
|
25
25
|
| 意图 | 识别关键词 | 路由路径 | 详细流程 |
|
|
26
26
|
| -------- | -------------------------------------------------------------------- | -------------------- | ---------------------------------------------------------------------- |
|
|
27
|
-
| **翻新** | "改造"/"升级"/"替换"/"刷新规范"/"翻新"/"对齐规范"/"重新生成这个页面" | 翻新路径 | 详见 [
|
|
28
|
-
| **生成** | "生成"/"创建"/"新建"/"设计一个" | 生成路径(六步门控) | 详见 [
|
|
29
|
-
| **验证** | "检查"/"验证"/"评估"/"合规"/"是否符合规范" | 验证路径 | 详见 [
|
|
27
|
+
| **翻新** | "改造"/"升级"/"替换"/"刷新规范"/"翻新"/"对齐规范"/"重新生成这个页面" | 翻新路径 | 详见 [workflow.md §2](./workflow.md) |
|
|
28
|
+
| **生成** | "生成"/"创建"/"新建"/"设计一个" | 生成路径(六步门控) | 详见 [workflow.md §1](./workflow.md) |
|
|
29
|
+
| **验证** | "检查"/"验证"/"评估"/"合规"/"是否符合规范" | 验证路径 | 详见 [workflow.md §3](./workflow.md) |
|
|
30
30
|
| **查询** | "token"/"色值"/"间距"/"字体"/"圆角"/"阴影"/"组件尺寸" | 查询路径 | 直接读取 `./rules/design-tokens.json` / `./rules/component-specs.json` |
|
|
31
31
|
| **规则** | 其他通用问题("列表页怎么设计"/"弹窗宽度"/"用什么颜色") | 根技能 | 读取对应 `./rules/` 文件回答 |
|
|
32
32
|
|
|
@@ -86,15 +86,14 @@ description: |
|
|
|
86
86
|
|
|
87
87
|
## 4. 文件角色简表
|
|
88
88
|
|
|
89
|
-
> 一句话说明每个文件的职责。详细 MUST READ 时机见 [
|
|
89
|
+
> 一句话说明每个文件的职责。详细 MUST READ 时机见 [workflow.md](./workflow.md) 各 Step。
|
|
90
90
|
|
|
91
91
|
### 4.1 流程与认知文档
|
|
92
92
|
|
|
93
93
|
| 文件 | 作用 |
|
|
94
94
|
| ------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
|
|
95
|
-
| [
|
|
96
|
-
| [
|
|
97
|
-
| [brand.md](./brand.md) | 视觉调性 + 文案语气基调 + 视觉五维(圆角/配色/密度/阴影/焦点) |
|
|
95
|
+
| [workflow.md](./workflow.md) | 生成 / 翻新 / 验证三大路径的完整执行步骤与 GATE 门禁(**唯一执行路径**) |
|
|
96
|
+
| [principles.md](./principles.md) | 品牌调性(视觉五维/文案语气/正反例)+ 设计哲学(Governance & Safety > Trust > Predictability > Clarity > Efficiency > Cost) |
|
|
98
97
|
| [foundations.md](./foundations.md) | Token 真值:色彩 / 间距 / 字号 / 圆角 / 阴影 / 动效 |
|
|
99
98
|
| [boundaries.md](./boundaries.md) | 38 条硬规则:F1-F10 禁止项 + S1-S8 样式规则 + C1-C12 结构 + I1-I4 图标 + FF1-FF4 表单 + Overlay 选型 |
|
|
100
99
|
| [components.md](./components.md) | 组件双层架构 + 选型决策树 + 拼装配方 |
|
|
@@ -129,7 +128,6 @@ description: |
|
|
|
129
128
|
|
|
130
129
|
| 文件 | 作用 |
|
|
131
130
|
| --------------------------- | ----------------------------------------------- |
|
|
132
|
-
| `./rules/layout-rules.json` | 4 种布局模式(A/B/C/D)+ PageContainer 嵌套约束 |
|
|
133
131
|
| `./rules/page-flow.json` | CRUD 页面流转 + 导航 + 操作确认三级规范 |
|
|
134
132
|
|
|
135
133
|
**③ 视觉规范层**("长什么样")
|
|
@@ -159,17 +157,41 @@ description: |
|
|
|
159
157
|
|
|
160
158
|
## 5. 通用组件分层(速查)
|
|
161
159
|
|
|
162
|
-
子技能通过**组件名**引用,通过 `shadcnComponent` 字段定位 @teamix-evo/ui 实现。完整索引见 `./rules/common-components.json`
|
|
160
|
+
子技能通过**组件名**引用,通过 `shadcnComponent` 字段定位 @teamix-evo/ui 实现。完整索引见 `./rules/common-components.json` v5.0。
|
|
163
161
|
|
|
164
|
-
- **核心业务组件**:
|
|
165
|
-
- **业务扩展组件**:SearchCombo / ContextSwitcher / Steps /
|
|
162
|
+
- **核心业务组件**:OpSidebar / OpPageContainer / PageHeader / Breadcrumb / Pagination / Dialog / Sheet / Button / Tag / Badge / Select / Input / Tooltip / Separator / Empty / Spinner / Alert / Sonner
|
|
163
|
+
- **业务扩展组件**:SearchCombo / ContextSwitcher / Steps / ListCard / CardGrid / CardActionBar / OpDetailHeader
|
|
166
164
|
- **详情页组件**:DescriptionList / DescriptionItem / InfoCard(component-specs.json C26)
|
|
167
165
|
|
|
168
166
|
---
|
|
169
167
|
|
|
170
168
|
## 6. 全局执行约束
|
|
171
169
|
|
|
172
|
-
> 所有路径共享的硬约束。生成代码时强制遵守,违反即不合规。Step 级 Token 用法详见 [
|
|
170
|
+
> 所有路径共享的硬约束。生成代码时强制遵守,违反即不合规。Step 级 Token 用法详见 [workflow.md](./workflow.md) Step 6。
|
|
171
|
+
|
|
172
|
+
### 6.0 Token 合规确认协议(最高优先级)
|
|
173
|
+
|
|
174
|
+
当用户提供的设计数值(颜色、间距、圆角、阴影、字号等)不在当前 `@teamix-evo/tokens` 已注册的 token 中时,AI **禁止**直接使用该字面量或试图绕过 lint 规则。
|
|
175
|
+
|
|
176
|
+
**正确流程**:
|
|
177
|
+
|
|
178
|
+
1. **识别** — 发现用户给出的值不在 token 体系中
|
|
179
|
+
2. **告知** — 明确告知用户"该值不在当前 token 中定义"
|
|
180
|
+
3. **建议** — 列出最接近的已有 token 名称、值和用途
|
|
181
|
+
4. **确认** — 让用户选择:
|
|
182
|
+
- A. 使用最接近的已有 token(告知具体 Tailwind class,如 `text-muted-foreground`)
|
|
183
|
+
- B. 在 `@teamix-evo/tokens` 中注册该新值(需确认语义命名和适用场景)
|
|
184
|
+
5. **执行** — 按用户确认的方案执行
|
|
185
|
+
|
|
186
|
+
**绝对禁止**:
|
|
187
|
+
|
|
188
|
+
- ❌ 直接使用 hex/rgb 字面量(无论 className、style prop、color prop 还是 CSS 变量形式)
|
|
189
|
+
- ❌ 用 `style={{ color: '#xxx' }}` 绕过 lint 检查
|
|
190
|
+
- ❌ 添加 eslint-disable 注释绕过颜色/arbitrary-value 规则
|
|
191
|
+
- ❌ 以"demo 文件"为借口跳过 token 合规
|
|
192
|
+
- ❌ 不问用户就自行决定"接受 lint 警告"
|
|
193
|
+
|
|
194
|
+
> 此规则适用于所有数值类型。只要不在 token 体系中注册的值,一律走确认流程。
|
|
173
195
|
|
|
174
196
|
### 6.1 组件选用优先级(不得跳级)
|
|
175
197
|
|
|
@@ -205,8 +227,7 @@ description: |
|
|
|
205
227
|
| -------- | -------------------------------------------------------------------- | -------------------------------------- |
|
|
206
228
|
| 间距模型 | v7.5 分层 padding:Card.paddingX = 20px,Table 首末列 padding = 20px | `design-tokens.json` §componentSpacing |
|
|
207
229
|
| 品牌主色 | #0055EE(HSL 218.6° 100% 46.7%),通过 `var(--primary)` 引用 | `design-tokens.css` |
|
|
208
|
-
| 页面框架 | 遵循 `page-frame.json` 的 L0/L1/L2 层级继承
|
|
209
|
-
| 布局模式 | 遵循 `layout-rules.json` 的 A/B/C/D 四种模式 + 扩展模式 | `./rules/layout-rules.json` |
|
|
230
|
+
| 页面框架 | 遵循 `page-frame.json` 的 L0/L1/L2 层级继承 + 布局模式 | `./rules/page-frame.json` |
|
|
210
231
|
| 页面流转 | 遵循 `page-flow.json` 的 CRUD 路径与导航规范 | `./rules/page-flow.json` |
|
|
211
232
|
| 表面规则 | v7.6 ContentCard:去 border,使用 shadow-sm | `styling.json` |
|
|
212
233
|
| 设计原则 | 优先使用已有组件 → 组合而非重写 → 优先内置 variant → 使用语义色值 | `foundations.md` |
|
|
@@ -232,9 +253,9 @@ description: |
|
|
|
232
253
|
|
|
233
254
|
## 7. 与 code-opentrek skill 协作
|
|
234
255
|
|
|
235
|
-
页面级任务通常 design + code 两个 skill
|
|
256
|
+
页面级任务通常 design + code 两个 skill 同时触发。冲突时按上下文路由约定:
|
|
236
257
|
|
|
237
258
|
- **design 决定"做什么"**:页面骨架 / Zone 划分 / 组件选型 / Token 绑定 / 视觉规则
|
|
238
259
|
- **code 决定"怎么做"**:文件放置 / import 路径 / API 层 / 表单实现细节
|
|
239
260
|
|
|
240
|
-
> 完整分工矩阵见 [
|
|
261
|
+
> 完整分工矩阵见 [workflow.md §5](./workflow.md)。
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# 硬约束 · Boundaries
|
|
2
2
|
|
|
3
|
-
> ⚠️ **何时读本文件**: [
|
|
3
|
+
> ⚠️ **何时读本文件**: [workflow.md](./workflow.md) Step 7(自检)、翻新路径、验证路径均强制要求完整读取本文件。
|
|
4
4
|
> 本文件是硬规则的**唯一真值**,不得跳过。
|
|
5
5
|
|
|
6
6
|
> 本文件列出所有“AI 生成页面 / 组件代码时**不能做什么**”的硬规则。共 38 条规则分 5 组:
|
|
@@ -14,16 +14,16 @@
|
|
|
14
14
|
| 2 | 状态不用原始色 | `text-green-500` / `bg-red-100` | `<Badge variant="secondary">` / `text-destructive` | [S8] |
|
|
15
15
|
| 3 | 间距用 gap | `space-y-4` | `flex flex-col gap-4` | [S2] |
|
|
16
16
|
| 4 | className 不覆盖组件颜色 / 字体 | `<Button className="bg-blue-500">` | `<Button variant="default">` | [S1] |
|
|
17
|
-
| 4.1 | Button 不传 size | `<Button size="sm">` / `<Button size="sm" className="h-9 w-9 p-0">` | `<Button>...</Button>`(default = `h-8` + `text-xs` 12px,
|
|
17
|
+
| 4.1 | Button 不传 size | `<Button size="sm">` / `<Button size="sm" className="h-9 w-9 p-0">` | `<Button>...</Button>`(default = `h-8` + `text-xs` 12px, 对齐 cd hybridcloud form-element-medium);icon-only 用 `size="icon"` | Button 默认尺寸 |
|
|
18
18
|
| 5 | 复合组件结构完整 | `<Dialog>` 缺 DialogTitle / `<Tabs>` 直接放 Trigger | Dialog ≥ Title;Card ≥ Header+Content;Tabs 含 List;详见 C 组 | [C1-C12] |
|
|
19
19
|
| 6 | 状态 / 占位 / 分隔走专用组件 | 自定义 styled span 当 Badge / animate-pulse div | Badge / Skeleton / Empty / Separator / Alert / `toast()` | [C7-C12] |
|
|
20
20
|
| 7 | 图标用 data-icon,不设尺寸类 | `<SearchIcon className="size-4 mr-2" />` | `<SearchIcon data-icon="inline-start" />` | [I1-I2] |
|
|
21
21
|
| 8 | 不手动 z-index / dark: 覆盖 | `className="z-50"` / `dark:bg-gray-950` | 删除 z-index(组件自管);用语义 token | [S5] [S7] |
|
|
22
22
|
| 9 | 条件类名用 cn() | `` `${active ? 'a' : 'b'}` `` | `cn('base', active ? 'a' : 'b')` | [S6] |
|
|
23
23
|
| 10 | 危险操作二次确认 | `<Button onClick={delete}>删除</Button>` | `<AlertDialog>` + 陈述句标题 + 影响列表 + 重复动词按钮 | P4 [philosophy] |
|
|
24
|
-
| 11 | 可交互元素显式带手型 | `<button onClick={...}>` 不带 `cursor-pointer` | `cursor-pointer` + `disabled:cursor-not-allowed` |
|
|
24
|
+
| 11 | 可交互元素显式带手型 | `<button onClick={...}>` 不带 `cursor-pointer` | `cursor-pointer` + `disabled:cursor-not-allowed` | cursor 可达性 |
|
|
25
25
|
|
|
26
|
-
> **强制项 #12(并入 #11
|
|
26
|
+
> **强制项 #12(并入 #11 的纪律范围,scoped-css-radix-state-conflict 同步)**:hover / focus 视觉反馈(border / bg / shadow)写在组件源码 className 时**必须**用 `enabled:` 前缀,disabled 态不触发样式变化。失败示例 `hover:border-primary`(disabled 仍响应);通过示例 `enabled:hover:border-primary`。Radix `data-state="checked"` / `"indeterminate"` / `"on"` 激活态视觉由组件自管,uni-manager scoped CSS 已统一在 `:not()` 链里排除这三个态值,新组件接入 `border-input` 类时务必核对。
|
|
27
27
|
|
|
28
28
|
[F1]: ./boundaries.md
|
|
29
29
|
[S1]: ./boundaries.md
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
[C1-C12]: ./boundaries.md
|
|
36
36
|
[C7-C12]: ./boundaries.md
|
|
37
37
|
[I1-I2]: ./boundaries.md
|
|
38
|
-
[philosophy]: ./
|
|
38
|
+
[philosophy]: ./principles.md
|
|
39
39
|
|
|
40
40
|
---
|
|
41
41
|
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
|
|
44
44
|
- 💡 11. 列表页空数据有 `<Empty>` + 主操作入口("创建第一个 X")
|
|
45
45
|
- 💡 12. 表单字段 > 6 时用 `<Card>` 分组或 Steps 分步
|
|
46
|
-
- 💡 13. 按钮文案:动宾 ≤ 5 字("创建实例");危险用明确名词 + 动作("永久删除");不写"OK / 确认" — 详见 [
|
|
46
|
+
- 💡 13. 按钮文案:动宾 ≤ 5 字("创建实例");危险用明确名词 + 动作("永久删除");不写"OK / 确认" — 详见 [principles.md §A4 文案语气](./principles.md#a4-文案语气总体风格)
|
|
47
47
|
- 💡 14. ID / Hash / 路径用 `font-mono` + 复制按钮
|
|
48
48
|
- 💡 15. 操作 ≤ 200ms 反馈:loading / Toast / 状态变化
|
|
49
49
|
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# Components — 选型决策与组合规则
|
|
2
2
|
|
|
3
|
-
> ⚠️ **Prerequisites**: 你必须已完成 [
|
|
4
|
-
> 若未完成前置步骤,请先返回 [
|
|
3
|
+
> ⚠️ **Prerequisites**: 你必须已完成 [workflow.md](./workflow.md) Step 1–3(已确定页面类型 + 子类型 + 区域骨架)后才能读本文件。
|
|
4
|
+
> 若未完成前置步骤,请先返回 [workflow.md](./workflow.md) 从 Step 1 开始。
|
|
5
5
|
|
|
6
6
|
> **本文档只回答"用什么组件、怎么搭配",不写具体 Props / Examples / import 路径。**
|
|
7
|
-
> 组件 API、Props
|
|
7
|
+
> 组件 API、Props、示例代码通过读 `.teamix-evo/meta/ui/<id>.md` 查询;可用列表通过读 `.teamix-evo/meta/ui/manifest.json` 查询。
|
|
8
8
|
|
|
9
9
|
---
|
|
10
10
|
|
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
|
|
15
15
|
### 0.1 触发场景
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
在 `.teamix-evo/meta/ui/manifest.json` 中搜索命中失败、或本文件提到的组件名(例如 `SearchCombo` / `ContextSwitcher` / `ItemCard` / `CardGrid` / `CardActionBar`)在 `@teamix-evo/biz-ui` 中无实物时。
|
|
18
18
|
|
|
19
19
|
### 0.2 四步处置法
|
|
20
20
|
|
|
21
21
|
1. **不要自造同名组件入 `src/components/`** — 即使本文件提到该组件名,也必须先确认实物存在。
|
|
22
|
-
2. **优先扫所有 ui 单体找语义等价**(见 §0.4) — 在 `@teamix-evo/ui` 约 89 个原子件中用 `
|
|
22
|
+
2. **优先扫所有 ui 单体找语义等价**(见 §0.4) — 在 `@teamix-evo/ui` 约 89 个原子件中用 `grep <关键词> .teamix-evo/meta/ui/manifest.json` 模糊搜 + 按七类法分类筛,找功能 / 结构等价的**单体**直接用。**这一步不可跳**。
|
|
23
23
|
3. **单体彻底无等价 → 才用 ui 多原子最小拼装**(参见本文件 §3 决策树和 §5 拼凑配方)。
|
|
24
24
|
4. **在响应中显式声明替代关系**,例如:
|
|
25
25
|
|
|
@@ -45,7 +45,7 @@ ui 多原子最小拼装(万不得已,注释声明)
|
|
|
45
45
|
|
|
46
46
|
- 在 `src/components/` 下新增与 biz-ui 同名的"私有版本"
|
|
47
47
|
- 用 antd / arco / chakra 等其它库填补缺口
|
|
48
|
-
- 在 skill 响应中写"假设 biz-ui 有 X"
|
|
48
|
+
- 在 skill 响应中写"假设 biz-ui 有 X"而不实查本地 meta
|
|
49
49
|
- **跳过 §0.4 直接进多原子拼装** — 属于"以拼代查",违反单体优先原则
|
|
50
50
|
|
|
51
51
|
---
|
|
@@ -56,7 +56,7 @@ ui 多原子最小拼装(万不得已,注释声明)
|
|
|
56
56
|
|
|
57
57
|
**扫描三板斧**:
|
|
58
58
|
|
|
59
|
-
1. **关键词模糊搜**:`
|
|
59
|
+
1. **关键词模糊搜**:`grep <kw> .teamix-evo/meta/ui/manifest.json` 多关键词试 — 例 `SearchBox` → 试 `search` / `find` / `query` / `filter` / `combo`
|
|
60
60
|
2. **七类法分类筛**(按要做的事归类,再翻该类下的 ui 原子):
|
|
61
61
|
- `general`:Button / Icon / Typography
|
|
62
62
|
- `layout`:Flex / Grid / Space / Separator / Sidebar / PageHeader / Card / Container
|
|
@@ -64,10 +64,10 @@ ui 多原子最小拼装(万不得已,注释声明)
|
|
|
64
64
|
- `data-entry`:参见 §3.6 输入控件
|
|
65
65
|
- `data-display`:参见 §3.4 / §3.5;含 Accordion / Tooltip / Table / DataTable / Badge / Tag / Avatar / Descriptions / Statistic
|
|
66
66
|
- `feedback`:Alert / Dialog / Sheet(抽屉) / Popover / Progress / Spinner / Empty / Skeleton / Sonner
|
|
67
|
-
- `deprecated`:不出现在 `
|
|
68
|
-
3.
|
|
67
|
+
- `deprecated`:不出现在 `manifest.json` 默认 entries 中,无视
|
|
68
|
+
3. **能力边界核对**:候选单体读 `.teamix-evo/meta/ui/<id>.md` 确认 Props 是否承载所需语义,避免"看名字像"实际不通
|
|
69
69
|
|
|
70
|
-
|
|
70
|
+
**典型语义近似映射**(仅示例,使用前仍需读 `.teamix-evo/meta/ui/<id>.md` 实查):
|
|
71
71
|
|
|
72
72
|
| 找不到的概念 | 优先尝试单体(语义近似) | 万不得已的拼装兜底 |
|
|
73
73
|
| ------------------ | ----------------------------------------------- | --------------------------------- |
|
|
@@ -96,14 +96,14 @@ ui 多原子最小拼装(万不得已,注释声明)
|
|
|
96
96
|
### 1.1 选型铁律
|
|
97
97
|
|
|
98
98
|
1. **优先 biz-ui 实物层** — 已封装变体 + 文案规范,但**注意 opentrek 当前仅 3 个实物**。
|
|
99
|
-
2. **biz-ui 无实物 → ui 单体精确名匹配** — 按组件名 /
|
|
99
|
+
2. **biz-ui 无实物 → ui 单体精确名匹配** — 按组件名 / 显式语义在 `.teamix-evo/meta/ui/manifest.json` 中直查。
|
|
100
100
|
3. **精确名未命中 → ui 单体语义近似扫描**(见 §0.4) — 在 88 件里找等价单体直接用,**这一步不可跳**。
|
|
101
101
|
4. **单体彻底无等价 → §5 多原子最小拼装** — 仅作为单体穷尽后的兜底。
|
|
102
102
|
5. **禁止**自造同名组件(违反 reuse-first,详见 §0)。
|
|
103
103
|
|
|
104
104
|
### 1.2 实时校验
|
|
105
105
|
|
|
106
|
-
|
|
106
|
+
任何组件名引用前必须在 `.teamix-evo/meta/ui/manifest.json` 中验证存在性,**不要相信本文档中"组件名"的存在性默认**(biz-ui 处于持续物化中,本文档可能滞后)。
|
|
107
107
|
|
|
108
108
|
---
|
|
109
109
|
|
|
@@ -263,21 +263,21 @@ ui 多原子最小拼装(万不得已,注释声明)
|
|
|
263
263
|
|
|
264
264
|
---
|
|
265
265
|
|
|
266
|
-
## 7.
|
|
266
|
+
## 7. 与本地 meta 文件的协作
|
|
267
267
|
|
|
268
268
|
```text
|
|
269
269
|
当 AI 决定使用某组件后:
|
|
270
|
-
├──
|
|
271
|
-
├──
|
|
270
|
+
├── 读 .teamix-evo/meta/ui/manifest.json 确认组件可用
|
|
271
|
+
├── 读 .teamix-evo/meta/ui/<id>.md(如 dialog.md)获取:
|
|
272
272
|
│ - Props 完整签名(required / optional / default)
|
|
273
273
|
│ - 子组件层级(DialogHeader/Footer/Title/...)
|
|
274
274
|
│ - 标准用法 Example
|
|
275
275
|
│ - 常见错误(compositionPitfalls)
|
|
276
|
-
├──
|
|
277
|
-
└──
|
|
276
|
+
├── grep <关键词> .teamix-evo/meta/ui/manifest.json 模糊搜索(不确定名称时)
|
|
277
|
+
└── 读 .teamix-evo/tokens/ 下的 token 文件获取最新 token 别名(颜色/间距/圆角)
|
|
278
278
|
```
|
|
279
279
|
|
|
280
|
-
**约束**:在 skill 中**不写**具体 import 路径与 Props 示例 ——
|
|
280
|
+
**约束**:在 skill 中**不写**具体 import 路径与 Props 示例 —— 这些由本地 meta 文件提供,`teamix-evo init/upgrade` 自动同步,避免 skill 与组件库版本错位。
|
|
281
281
|
|
|
282
282
|
---
|
|
283
283
|
|
|
@@ -285,7 +285,7 @@ ui 多原子最小拼装(万不得已,注释声明)
|
|
|
285
285
|
|
|
286
286
|
通用结构性规则 → 见 [checklist.md](./checklist.md)(C1-C12 / I1-I4)。本文件特有的"选型决策"自检:
|
|
287
287
|
|
|
288
|
-
- [ ]
|
|
288
|
+
- [ ] 已先在 `.teamix-evo/meta/ui/manifest.json` 中验证组件存在性(不靠默认)
|
|
289
289
|
- [ ] biz-ui 命中失败 → **先按 §0.4 扫所有 ui 单体找语义近似替代**,单体覆盖时直接采用,未直接跳到 §5 拼装
|
|
290
290
|
- [ ] 单体彻底无等价时 → §5 拼装代码必加注释 `// 已扫尽 89 件 ui 单体无语义等价 → 拼装`
|
|
291
291
|
- [ ] 反馈 / 确认场景按容量选 Dialog / Sheet / Popover
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
─────────────────────────────────────────────────────────────
|
|
16
16
|
组件清单:
|
|
17
17
|
• PageHeader
|
|
18
|
-
• ActionToolbar — 含 SearchCombo (
|
|
18
|
+
• ActionToolbar — 含 SearchCombo (规范见 common-components.json)
|
|
19
19
|
• CardGrid — preset=standard, min 300px / gap 16px
|
|
20
20
|
• ItemCard — density=standard, iconStyle=avatar
|
|
21
21
|
• CardActionBar — mode=hover-slidebar
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
─────────────────────────────────────────────────────────────
|
|
16
16
|
组件清单:
|
|
17
17
|
• PageHeader
|
|
18
|
-
• ActionToolbar — 含 SearchCombo (
|
|
18
|
+
• ActionToolbar — 含 SearchCombo (规范见 common-components.json)
|
|
19
19
|
• DataTable — 含 Checkbox列、可排序列、状态 Badge、操作列
|
|
20
20
|
• Pagination — 10 条/页,含前往跳转 + 每页选择器
|
|
21
21
|
─────────────────────────────────────────────────────────────
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Foundations — Token 用法指南
|
|
2
2
|
|
|
3
|
-
> ⚠️ **何时读本文件**: [
|
|
3
|
+
> ⚠️ **何时读本文件**: [workflow.md](./workflow.md) Step 6(视觉填充)强制要求完整读取。
|
|
4
4
|
> 任何色彩、间距、字号、圆角、阴影、动效必须基于本文件的 Token 定义,不得凭记忆生成。
|
|
5
5
|
|
|
6
6
|
> **核心原则**:所有视觉值必须来自 `@teamix-evo/tokens` 暴露的 CSS 变量;禁止硬编码颜色、间距、圆角、阴影、时长。
|
|
@@ -9,14 +9,14 @@
|
|
|
9
9
|
|
|
10
10
|
## 0. AI 实操路径(读本文档前先做)
|
|
11
11
|
|
|
12
|
-
**本文档解释"如何用 token",但 token
|
|
12
|
+
**本文档解释"如何用 token",但 token 的真实集合在本地 token 文件里**。写组件样式前必须按这个顺序:
|
|
13
13
|
|
|
14
|
-
1.
|
|
15
|
-
2.
|
|
16
|
-
3.
|
|
14
|
+
1. **读 `.teamix-evo/tokens/` 目录下的 token 文件** — 拿到当前 variant 下所有 token 的真实值(category / name / values / description)。这是判断"有哪些语义槽位可用"的唯一权威来源,markdown 文档随时可能落后于 `base.tokens.json`。
|
|
15
|
+
2. **或 `grep <关键词>` 在 token 文件中搜索** — 已知关键词(如 "primary" / "destructive" / "card-gap")时更便宜。
|
|
16
|
+
3. **可选读 `tokens.theme.css` / `tokens.overrides.css`** — 需要原文 CSS 拿去 copy-paste 时再读。
|
|
17
17
|
4. **回到本文档** — 查"如何用"(命名约定、铁律、字号阶梯、组件 token 槽位等本文 §1-N 内容)。
|
|
18
18
|
|
|
19
|
-
> **不要跳过
|
|
19
|
+
> **不要跳过 token 文件直接读本文档**:本文档列的是稳定的**用法**,不是实时的**清单**。如果只读 markdown,会错过 variant 切换、tokens.overrides.css 自定义、新增 `chart-*` / `sidebar-*` 等 token —— 这些都只有读本地文件才能给出当下真实状态。
|
|
20
20
|
|
|
21
21
|
---
|
|
22
22
|
|
|
@@ -39,17 +39,17 @@
|
|
|
39
39
|
|
|
40
40
|
### 2.1 字号阶梯(9 档)
|
|
41
41
|
|
|
42
|
-
| Token | rem | 用途
|
|
43
|
-
| ----------- | ----- |
|
|
44
|
-
| `text-xs` | 0.75 |
|
|
45
|
-
| `text-sm` | 0.875 |
|
|
46
|
-
| `text-base` | 1.0 |
|
|
47
|
-
| `text-lg` | 1.125 |
|
|
48
|
-
| `text-xl` | 1.25 |
|
|
49
|
-
| `text-2xl` | 1.5 | 页面 H2
|
|
50
|
-
| `text-3xl` | 1.875 | 页面 H1
|
|
51
|
-
| `text-4xl` | 2.25 | 营销/Dashboard 数字大屏
|
|
52
|
-
| `text-5xl` | 3.0 | Hero / 数据看板核心指标
|
|
42
|
+
| Token | rem | OP 命名 | 用途 |
|
|
43
|
+
| ----------- | ----- | ---------------- | ------------------------------------------------ |
|
|
44
|
+
| `text-xs` | 0.75 | --font-size-base | 正文/标签/脚注/输入框/表格/Badge/分页/页面副标题 |
|
|
45
|
+
| `text-sm` | 0.875 | --font-size-lg | 强调正文/弹窗标题/抽屉标题/Tab |
|
|
46
|
+
| `text-base` | 1.0 | --font-size-xl | 小标题、卡片标题、区块标题 |
|
|
47
|
+
| `text-lg` | 1.125 | --font-size-2xl | 页面主标题、PageHeader 面包屑层级 |
|
|
48
|
+
| `text-xl` | 1.25 | — | 区块大标题 |
|
|
49
|
+
| `text-2xl` | 1.5 | — | 页面 H2 |
|
|
50
|
+
| `text-3xl` | 1.875 | — | 页面 H1 |
|
|
51
|
+
| `text-4xl` | 2.25 | — | 营销/Dashboard 数字大屏 |
|
|
52
|
+
| `text-5xl` | 3.0 | — | Hero / 数据看板核心指标 |
|
|
53
53
|
|
|
54
54
|
### 2.2 字重(4 档)
|
|
55
55
|
|
|
@@ -45,7 +45,7 @@ description: >
|
|
|
45
45
|
| responsive | Desktop ≥1200px(完整), Tablet 768-1199px(2列→1列), Mobile <768px(不推荐) |
|
|
46
46
|
| refresh | 支持手动刷新 + 可选自动刷新(30s/60s/5min) |
|
|
47
47
|
|
|
48
|
-
> **框架组件自动继承**:
|
|
48
|
+
> **框架组件自动继承**:OpSidebar 的存在性由 `rules/page-frame.json` 统一管理。
|
|
49
49
|
|
|
50
50
|
---
|
|
51
51
|
|
|
@@ -222,8 +222,8 @@ description: >
|
|
|
222
222
|
|
|
223
223
|
```
|
|
224
224
|
┌─ PageShell ──────────────────────────────────────────────────────────────┐
|
|
225
|
-
│ sidebar:
|
|
226
|
-
│ ┌─
|
|
225
|
+
│ sidebar: OpSidebar │
|
|
226
|
+
│ ┌─ OpPageContainer ────────────────────────────────────────────────────┐ │
|
|
227
227
|
│ │ PageHeader: "指标监控" │ │
|
|
228
228
|
│ │ Description: "应用层 · 资产层 · 模型服务层 — 全方位监控系统运行态势" │ │
|
|
229
229
|
│ │ │ │
|
|
@@ -280,8 +280,8 @@ description: >
|
|
|
280
280
|
|
|
281
281
|
```
|
|
282
282
|
┌─ PageShell ──────────────────────────────────────────────────────────────┐
|
|
283
|
-
│ sidebar:
|
|
284
|
-
│ ┌─
|
|
283
|
+
│ sidebar: OpSidebar │
|
|
284
|
+
│ ┌─ OpPageContainer ────────────────────────────────────────────────────┐ │
|
|
285
285
|
│ │ Breadcrumb: 知识库 > 产品文档库 - 观测 │ │
|
|
286
286
|
│ │ │ │
|
|
287
287
|
│ │ FilterBar + TimeToolbar (同行): │ │
|
|
@@ -355,15 +355,14 @@ description: >
|
|
|
355
355
|
|
|
356
356
|
| 父子关系 | 状态 | 说明 |
|
|
357
357
|
|----------|------|------|
|
|
358
|
-
|
|
|
359
|
-
|
|
|
360
|
-
|
|
|
361
|
-
|
|
|
362
|
-
|
|
|
363
|
-
|
|
|
364
|
-
|
|
|
365
|
-
|
|
|
366
|
-
| Card(白卡容器) → Form | FORBID | 仪表板只读 |
|
|
358
|
+
| PageShell → OpSidebar + OpPageContainer | ALLOW | OpenTrek 标准页面框架 |
|
|
359
|
+
| OpPageContainer → PageHeader | ALLOW | 标准结构 |
|
|
360
|
+
| OpPageContainer → TimeToolbar | ALLOW | 时间控制栏 |
|
|
361
|
+
| OpPageContainer → StatCardRow | ALLOW | 统计指标行 |
|
|
362
|
+
| OpPageContainer → ChartPanel | ALLOW | 图表面板 |
|
|
363
|
+
| OpPageContainer → NavigationCards | ALLOW | 导航卡片行 |
|
|
364
|
+
| OpPageContainer → DataTable | WARN | 仅辅助表格(如 top-N),非主体 |
|
|
365
|
+
| OpPageContainer → Form | FORBID | 仪表板只读 |
|
|
367
366
|
| ChartPanel → ChartPanel | FORBID | 图表面板禁止嵌套 |
|
|
368
367
|
|
|
369
368
|
---
|
|
@@ -373,8 +372,8 @@ description: >
|
|
|
373
372
|
| 区域 | UI 组件库引用 | 用途 |
|
|
374
373
|
|------|--------------|------|
|
|
375
374
|
| 页面框架 | `components/page-shell` → `PageShell` | L1/L2 级页面壳 |
|
|
376
|
-
| 侧边导航 | `components/sidebar` → `
|
|
377
|
-
|
|
|
375
|
+
| 侧边导航 | `components/business/op-sidebar` → `OpSidebar` | 左侧导航(OpenTrek 整装侧边栏) |
|
|
376
|
+
| 页面容器 | `components/business/op-page-container` → `OpPageContainer` | 灰底 + 白卡容器 |
|
|
378
377
|
| 页面标题 | `components/page-header` → `PageHeader` + `PageHeaderHeading` + `PageHeaderDescription` | 标题+描述 |
|
|
379
378
|
| 面包屑 | `components/breadcrumb` → `Breadcrumb` + `BreadcrumbItem` + `BreadcrumbLink` | L2 导航 |
|
|
380
379
|
| 统计数值 | `components/statistic` → `Statistic` | 核心指标数值 |
|
|
@@ -395,7 +394,7 @@ description: >
|
|
|
395
394
|
|
|
396
395
|
- **读取路径**:见根技能 `../../SKILL.md` §4.5 四阶段读取决策树
|
|
397
396
|
- 阶段①:`page-types.json` + `business-mapping.json`
|
|
398
|
-
- 阶段②:`page-frame.json
|
|
397
|
+
- 阶段②:`page-frame.json`;OpenTrek 业务规则追加读取 `patterns/dashboard-opentrek.md`
|
|
399
398
|
- 阶段③(生成 HTML 时):`design-tokens.json` + `design-tokens.css` + `styling.json` + `../../boundaries.md` + `../../foundations.md`
|
|
400
399
|
|
|
401
400
|
> `rules/design-tokens.css` 是设计 Token 的唯一真相源(:root 变量定义),图表色 `--chart-1` ~ `--chart-6` 定义在其中。
|
|
@@ -410,8 +409,8 @@ description: >
|
|
|
410
409
|
|
|
411
410
|
| 检查项 | 检查点 | 目标 |
|
|
412
411
|
|--------|--------|------|
|
|
413
|
-
| 嵌套结构 |
|
|
414
|
-
| Card 内左右对齐 |
|
|
412
|
+
| 嵌套结构 | PageShell → OpSidebar + OpPageContainer → PageHeader/TimeToolbar/Sections | 100% |
|
|
413
|
+
| Card 内左右对齐 | OpPageContainer 内白卡 p-6 (24px),内部组件 padding = 0 | 100% |
|
|
415
414
|
| TimeToolbar | 时间粒度 + 时间范围 + 刷新按钮三部分完整 | 正确 |
|
|
416
415
|
| URL 持久化 | 时间参数(granularity/range/start/end)同步 URL | 正确 |
|
|
417
416
|
| 图表色彩 | 全部使用 `hsl(var(--chart-N))`,无硬编码色值 | 100% |
|
|
@@ -24,9 +24,9 @@
|
|
|
24
24
|
|
|
25
25
|
```
|
|
26
26
|
┌─ PageShell (components/page-shell) ──────────────────────────────────────┐
|
|
27
|
-
│ sidebar:
|
|
27
|
+
│ sidebar: OpSidebar (components/business/op-sidebar) │
|
|
28
28
|
│ children: │
|
|
29
|
-
│ ┌─
|
|
29
|
+
│ ┌─ OpPageContainer (components/business/op-page-container) ─────────┐ │
|
|
30
30
|
│ │ PageHeader (components/page-header): │ │
|
|
31
31
|
│ │ Heading: "指标监控" (18px/500) │ │
|
|
32
32
|
│ │ Description: "应用层·资产层·模型服务层 — 全方位监控系统运行态势" │ │
|
|
@@ -68,8 +68,8 @@
|
|
|
68
68
|
| 区域 | UI 组件库引用 | 用途 | 必需 |
|
|
69
69
|
|------|--------------|------|------|
|
|
70
70
|
| 页面框架 | `components/page-shell` → `PageShell` | L1 级页面壳 | ✅ |
|
|
71
|
-
| 侧边导航 | `components/sidebar` → `
|
|
72
|
-
|
|
|
71
|
+
| 侧边导航 | `components/business/op-sidebar` → `OpSidebar` | 左侧导航(OpenTrek 整装侧边栏) | ✅ |
|
|
72
|
+
| 页面容器 | `components/business/op-page-container` → `OpPageContainer` | 灰底 + 白卡容器 | ✅ |
|
|
73
73
|
| 页面标题 | `components/page-header` → `PageHeader` + `PageHeaderHeading` + `PageHeaderDescription` | 标题+描述 | ✅ |
|
|
74
74
|
| 时间粒度 | `components/toggle-group` → `ToggleGroup`(type='single') + `ToggleGroupItem` | 分钟/小时/天 | ✅ |
|
|
75
75
|
| 时间范围 | `components/toggle-group` → `ToggleGroup`(type='single') + `ToggleGroupItem` | 近7日/近30日/近1年/自定义 | ✅ |
|
|
@@ -141,8 +141,8 @@
|
|
|
141
141
|
|
|
142
142
|
```
|
|
143
143
|
┌─ PageShell ──────────────────────────────────────────────────────────────┐
|
|
144
|
-
│ sidebar:
|
|
145
|
-
│ ┌─
|
|
144
|
+
│ sidebar: OpSidebar │
|
|
145
|
+
│ ┌─ OpPageContainer ────────────────────────────────────────────────────┐ │
|
|
146
146
|
│ │ Breadcrumb: 知识库 > 产品文档库 - 观测 │ │
|
|
147
147
|
│ │ │ │
|
|
148
148
|
│ │ ToolbarRow (flex, justify-between): │ │
|