@teamix-evo/skills 0.11.0 → 0.11.1

package/src/teamix-evo-design-opentrek/pages/form-page/SKILL.md

@@ -2,10 +2,11 @@
 name: page-rule-form
 parent: page-rule-system
 description: >
-  表单页(PageType: FormPage)模版规则。包含表单页类型定义、子类型识别、属性模型、
-  标准布局骨架、组件推荐规则及约束、页面交互补充。基于 @teamix-evo/ui 表单规范构建。
-  触发：需要表单页规则、匹配表单页模板、生成表单页。
-  Version: 7.0
+  表单页(PageType: FormPage)模版规则。覆盖三类容器：FormPage 全页表单、Dialog 弹窗表单、
+  Sheet 抽屉表单、Settings 多列卡片表单。包含子类型识别、属性模型、布局骨架、组件推荐、
+  字段交互、OpenTrek 容器模式（OT-FM-1/2/3）。基于 @teamix-evo/ui 表单规范构建。
+  触发：需要表单页规则、匹配表单页模板、生成表单页（含弹窗/抽屉/设置型表单）。
+  Version: 7.1
 ---
 
 # 表单页技能
@@ -335,6 +336,388 @@ description: >
 PageContainer → ContentWrapper → Breadcrumb + PageHeader + Card[FieldGroup] + Separator + Card[FieldGroup] + SubmitBar
 ```
 
+## 7. OpenTrek 表单容器模式
+
+> 本章基于 OpenTrek DEV 平台实际页面截图沉淀，定义 **表单容器级** 组合规则。
+> §1-§6 描述的是 **FormPage（L2 全页表单）** 的规则；本章补充 **Dialog / Sheet / Settings** 三种轻量容器模式。
+> 所有 UI 组件引用均指向 `packages/ui/src/components/`，开发时必须从该路径导入。
+
+### 7.1 表单容器模式速查表
+
+| 模式 ID | 名称 | 容器 | 典型页面 | 核心结构 |
+|---------|------|------|----------|----------|
+| **OT-FM-1** | Dialog 表单 | 居中弹窗 | 编辑沙箱规格 / 添加自定义数据源 | Dialog → Title + FormFields + Footer |
+| **OT-FM-2** | Sheet 表单 | 右侧抽屉 | 上架Skill / 新建记忆体 | Sheet(side='right') → Title + FormFields + Footer |
+| **OT-FM-3** | Settings 表单 | 内嵌多列卡片 | 整理策略 | Tabs → CardGrid(3col) → SettingsCard × N |
+
+#### 模式选择矩阵
+
+| 字段数量 | 操作复杂度 | 推荐模式 | 说明 |
+|----------|-----------|----------|------|
+| 1-4 个 | 简单编辑 | **OT-FM-1** (Dialog) | 快速操作，不离开当前页面 |
+| 5-10 个 | 创建/详细编辑 | **OT-FM-2** (Sheet) | 需要更多空间，支持滚动 |
+| 多组开关/策略 | 配置型 | **OT-FM-3** (Settings) | 多维度同时可见，无显式提交 |
+| >10 个 / 含分步 | 复杂表单 | **FormPage** (§4) 或 **WizardPage** | 全页布局或分步向导 |
+
+### 7.2 OT-FM-1：Dialog 表单（居中弹窗）
+
+> 典型页面：编辑沙箱规格、添加自定义数据源
+
+#### 布局骨架
+
+```
+┌─ Backdrop (半透明遮罩 rgba(0,0,0,0.5)) ─────────────────────────────┐
+│                                                                     │
+│   ┌─ Dialog (components/dialog → DialogContent) ──────────────┐    │
+│   │ DialogHeader:                                              │    │
+│   │   DialogTitle: "编辑沙箱规格" / "添加自定义数据源"          │    │
+│   │   Close Button (×) — 右上角                                │    │
+│   │                                                            │    │
+│   │ DialogBody (form fields):                                  │    │
+│   │   ┌─ FormField ──────────────────────────────────────┐    │    │
+│   │   │ Label: "沙箱名称" / "数据源名称 *"                │    │    │
+│   │   │ Input (full width)                                │    │    │
+│   │   └──────────────────────────────────────────────────┘    │    │
+│   │   ┌─ FormField (2-col) ──────────────────────────────┐    │    │
+│   │   │ Label: "CPU"     │  Label: "内存"                 │    │    │
+│   │   │ Select ▼         │  Select ▼                      │    │    │
+│   │   └──────────────────────────────────────────────────┘    │    │
+│   │   [*可选* 引导区块 / Checkbox / Alert]                     │    │
+│   │                                                            │    │
+│   │ DialogFooter (right-aligned):                              │    │
+│   │                              [取消]  [保存/添加]           │    │
+│   └────────────────────────────────────────────────────────────┘    │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+#### Dialog 尺寸 / Header / Footer 规格
+
+| 属性 | 值 | token / 引用 |
+|------|---|-------------|
+| width (小型, ≤4 字段) | 540px | — |
+| width (中型, 5-8 字段) | 640px | — |
+| max-height | `calc(100vh - 120px)` | 超长内容滚动 |
+| border-radius | 12px | `var(--radius-lg)` |
+| padding | 24px | — |
+| backdrop | `rgba(0,0,0,0.5)` | — |
+| title font | 16px / 600 (semibold) | `DialogTitle` |
+| title color | `var(--gray-primary)` | — |
+| close button | 24×24, 右上角, `var(--gray-tertiary)` | `DialogContent` 自带 |
+| header → body 间距 | 20px | — |
+| footer layout | flex, justify-end, gap 12px | — |
+| footer 按钮顺序 | `[取消(outline)] [主操作(default+primary)]` | 右对齐 |
+| footer 距 body | 24px (margin-top) | 无 border-top |
+
+#### 字段规格（Dialog）
+
+| 属性 | 值 | 说明 |
+|------|---|------|
+| field 垂直间距 | 20px | — |
+| label font | 14px / 500, color `var(--gray-primary)` | — |
+| label → control 间距 | 8px | — |
+| required 标识 | 红色 `*`, color `var(--destructive)` | 紧跟 label |
+| Input/Select height | 36px | `size='default'` |
+| placeholder color | `var(--gray-quaternary)` | — |
+
+#### 2-column 字段布局（Dialog 内）
+
+> 截图实证：编辑沙箱规格 CPU + 内存 并排
+
+```css
+.dialog-field-row--2col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+```
+
+适用条件：同类字段可并排（CPU/内存、宽/高）。
+
+#### 扩展元素（中型 Dialog）
+
+| 元素 | 规格 | UI 组件 |
+|------|------|---------|
+| 引导区块 | 标题 14px/500 + 描述 12px/`var(--gray-tertiary)` + 链接卡片 | — |
+| 链接卡片 | border 1px solid `var(--gray-border)`, radius 8px, padding 12px 16px | `Button` variant='outline' 或自定义 |
+| Checkbox 确认 | 16px checkbox + 14px label | `components/checkbox` → `Checkbox` |
+| Alert 横幅 | variant='warning', 12px, ⚠️ icon, yellow bg | `components/alert` → `Alert` |
+
+#### Dialog 表单实例
+
+| 页面 | 标题 | 字段 | 主操作 |
+|------|------|------|--------|
+| 沙箱管理 > 编辑 | 编辑沙箱规格 | 沙箱名称(Input) + CPU(Select) + 内存(Select, 2col) | 保存 |
+| 数据源管理 > 添加 | 添加自定义数据源 | 数据源名称*(Input) + 引导区块 + Checkbox + Alert | 添加 |
+
+### 7.3 OT-FM-2：Sheet 表单（右侧抽屉）
+
+> 典型页面：上架Skill、新建记忆体
+
+#### 布局骨架
+
+```
+┌─ 原页面（左侧, 被遮罩） ─┬─ Sheet (components/sheet) ─────────────┐
+│                          │ SheetHeader:                            │
+│                          │   SheetTitle: "上架Skill" / "新建记忆体" │
+│                          │   Close (×)                              │
+│                          │                                         │
+│                          │ SheetBody (scrollable):                 │
+│                          │   FormField → Label + Upload/Input/...  │
+│                          │   FormField → Label + Select+Settings   │
+│                          │   FormField → Label + RadioGroup        │
+│                          │   [Alert warning/info inline]           │
+│                          │                                         │
+│                          │ SheetFooter (sticky bottom):            │
+│                          │   [创建/确认上架] [取消]                  │
+└──────────────────────────┴─────────────────────────────────────────┘
+```
+
+#### Sheet 尺寸 / Header / Footer 规格
+
+| 属性 | 值 | token / 引用 |
+|------|---|-------------|
+| side | `right` | 从右滑入 |
+| width (标准) | 480px (~33% viewport) | 字段较少 |
+| width (宽) | 560px (~40% viewport) | 含上传/复杂字段 |
+| height | 100vh | 全屏高 |
+| border-left | 1px solid `var(--gray-border)` | — |
+| shadow | `var(--shadow-lg)` | — |
+| padding | 24px | — |
+| background | `var(--card)` (white) | — |
+| title font | 18px / 600 | `SheetTitle` |
+| header → body 间距 | 24px | — |
+| 右上角辅助文字 | 12px / `var(--primary)` link-style | 可选, 如 "上传文件后将进行扫描" |
+| footer position | sticky bottom: 0 | — |
+| footer border-top | 1px solid `var(--gray-line)` | — |
+| footer padding | 16px 24px | — |
+| footer background | `var(--card)` | 防止内容穿透 |
+| **footer 按钮顺序** | `[主操作(default+primary)] [取消(outline)]` | **主操作在左（与 Dialog 相反）** |
+
+#### 字段规格（Sheet）
+
+| 属性 | 值 | 说明 |
+|------|---|------|
+| field 垂直间距 | 24px | 比 Dialog 宽松 |
+| label font | 14px / 500, color `var(--gray-primary)` | — |
+| label → control 间距 | 8px | — |
+| required 标识 | 红色 `*`, color `var(--destructive)` | — |
+| description font | 12px / 400, color `var(--gray-tertiary)` | label 下 4px 或 control 下 8px |
+
+#### Upload Zone 规格（OT-FM-2 扩展）
+
+> 截图实证：上架Skill 的文件上传区
+
+| 属性 | 值 | UI 组件 |
+|------|---|---------|
+| border | 1px dashed `var(--gray-border)` | `components/upload` → `Upload` |
+| border-radius | 8px (`var(--radius-md)`) | — |
+| padding | 32px | — |
+| background | `var(--gray-fill-light)` | — |
+| 中心图标 | upload arrow 24px, `var(--gray-tertiary)` | lucide `upload` |
+| 提示文字 | 14px / `var(--gray-secondary)` | "拖拽上传，支持.zip" |
+| 操作按钮 | `Button`(variant='default', color='primary', size='sm') | "查看本地文件" |
+| hover 态 | border-color: `var(--primary)` | — |
+
+#### Select + 设置按钮组合（OT-FM-2 扩展）
+
+> 截图实证：新建记忆体 - 检索记忆向量模型
+
+```
+┌─ Select + SettingsButton ───────────────────┐
+│ ┌─ Select (flex: 1) ──────┐  ┌─ IconBtn ─┐ │
+│ │ 选择模型            ▼   │  │   ⚙️     │ │
+│ └─────────────────────────┘  └───────────┘ │
+└─────────────────────────────────────────────┘
+```
+
+| 属性 | 值 | UI 组件 |
+|------|---|---------|
+| layout | flex, gap: 8px | — |
+| Select | flex: 1 | `components/select` → `Select` |
+| SettingsButton | 36×36, variant='outline', icon-only | `Button` + lucide `settings-2` |
+
+#### 字段内 Alert 规格
+
+> 截图实证：新建记忆体字段下方的提示
+
+| 变体 | background | text color | 图标 | UI 组件 |
+|------|-----------|-----------|------|---------|
+| warning (橙) | `hsl(var(--warning) / 0.08)` | `var(--warning)` 或 `var(--destructive)` | ⚠ | `Alert` |
+| info (蓝) | `hsl(var(--primary) / 0.05)` | `var(--gray-secondary)` | ℹ | `Alert` |
+
+| 属性 | 值 |
+|------|---|
+| border-radius | `var(--radius-md)` (8px) |
+| padding | 10px 12px |
+| font-size | 12px |
+| margin-top | 8px (距上方 control) |
+| icon size / gap | 14px / 8px |
+
+#### Sheet 表单实例
+
+| 页面 | 标题 | 字段 | 主操作 |
+|------|------|------|--------|
+| 内置资产 > 上架Skill | 上架Skill | 上传文件*(Upload) + 备注名称(Input) + 分类标签(Select) | 确认上架 |
+| 记忆体 > 新建 | 新建记忆体 | 名称*(Input) + 描述(Textarea) + 模型*(Select+Settings ×2) + 属性*(RadioGroup) | 创建 |
+
+### 7.4 OT-FM-3：Settings 表单（多列配置卡片）
+
+> 典型页面：记忆体 > 整理策略
+
+#### 布局骨架
+
+```
+┌─ PageShell ──────────────────────────────────────────────────────┐
+│ sidebar: Sidebar                                                  │
+│ children:                                                         │
+│ ┌─ Card(白卡容器) ────────────────────────────────────────────┐  │
+│ │ Breadcrumb: 记忆体 > 空间共用                                │  │
+│ │ Tabs (variant='line'):                                       │  │
+│ │   [记忆总览 | 生成策略 | **整理策略** | 记忆动态]             │  │
+│ │                                                              │  │
+│ │ ┌── SettingsCardGrid (3-col) ──────────────────────────┐   │  │
+│ │ │ ┌─SettingsCard─┐ ┌─SettingsCard─┐ ┌─SettingsCard─┐  │   │  │
+│ │ │ │ [🟦] 常驻     │ │ [🟦] 检索     │ │ [🟦] 用户     │  │   │  │
+│ │ │ │ 记忆整理      │ │ 记忆整理      │ │ 记忆整理      │  │   │  │
+│ │ │ │ ──────────── │ │ ──────────── │ │ ──────────── │  │   │  │
+│ │ │ │ 智能合并 [○]  │ │ 自动清除 [●]  │ │ 智能合并 [○]  │  │   │  │
+│ │ │ │ 自动清除 [●]  │ │ ...          │ │ 自动清除 [●]  │  │   │  │
+│ │ │ │  └ 清除策略   │ │              │ │  └ 清除策略   │  │   │  │
+│ │ │ │  └ [Alert]   │ │              │ │  └ [Alert]   │  │   │  │
+│ │ │ │  └ 最大保留   │ │              │ │  └ 最大保留   │  │   │  │
+│ │ │ │  └ [☑]优先   │ │              │ │  └ [☑]优先   │  │   │  │
+│ │ │ │ 冲突处理 [○]  │ │ 冲突处理 [○]  │ │ 冲突处理 [○]  │  │   │  │
+│ │ │ │ ─────────── │ │ ─────────── │ │              │  │   │  │
+│ │ │ │ 整理触发时机  │ │ 整理触发时机  │ │ 整理触发时机  │  │   │  │
+│ │ │ │ [定时|空闲|…] │ │ [定时|空闲|…] │ │ (描述文字)    │  │   │  │
+│ │ │ └──────────────┘ └──────────────┘ └──────────────┘  │   │  │
+│ │ └──────────────────────────────────────────────────────┘   │  │
+│ └─────────────────────────────────────────────────────────────┘  │
+└──────────────────────────────────────────────────────────────────┘
+```
+
+#### SettingsCardGrid 规格
+
+| 属性 | 值 |
+|------|---|
+| layout | `grid-template-columns: repeat(3, 1fr)` |
+| gap | 16px (`var(--card-gap)`) |
+| responsive | ≥1200px: 3col / 768-1200: 2col / <768: 1col |
+
+#### SettingsCard 规格
+
+| 属性 | 值 | UI 组件 |
+|------|---|---------|
+| border | 1px solid `var(--gray-border)` | `components/card` → `Card` |
+| border-radius | 12px (`var(--radius-lg)`) | — |
+| padding | 20px | — |
+| background | `var(--card)` (white) | — |
+
+#### SettingsCard Header 规格
+
+| 属性 | 值 | UI 组件 |
+|------|---|---------|
+| icon 容器 | 32×32 圆角矩形, bg `var(--primary)`, 白色图标 | `components/avatar` → `Avatar` + `AvatarFallback` |
+| icon border-radius | 8px (`var(--input-radius)`) | — |
+| title font | 16px / 600, color `var(--gray-primary)` | — |
+| icon → title gap | 12px | — |
+| header → body gap | 20px | — |
+
+#### Switch + Label 行规格
+
+```
+┌─ SwitchRow (flex, justify-between, align-center) ────────────────┐
+│  Label (14px/500) + Tooltip(ⓘ)                     Switch [○/●]  │
+└──────────────────────────────────────────────────────────────────┘
+```
+
+| 属性 | 值 | UI 组件 |
+|------|---|---------|
+| layout | flex, space-between, align-center | — |
+| label | 14px / 500, color `var(--gray-primary)` | — |
+| tooltip icon | 14px ⓘ, `var(--gray-quaternary)`, gap 4px | `components/tooltip` |
+| switch size | 36×20 (default) | `components/switch` → `Switch` |
+| switch active | `var(--primary)` | — |
+| switch inactive | `var(--gray-border)` | — |
+| row 间距 | 16px | — |
+
+#### 条件字段（Switch ON 时展示）
+
+> 截图实证：自动清除开启后显示清除策略、最大保留等子字段
+
+| 属性 | 值 |
+|------|---|
+| indent | padding-left: 0（同级对齐，不缩进） |
+| show/hide | `display: none`，带过渡动画 |
+| margin-top | 12px (距 Switch 行) |
+| 子字段间距 | 12px |
+
+#### 条件字段内部控件
+
+| 控件 | 规格 | UI 组件 |
+|------|------|---------|
+| Select (策略选择) | height 36px, full-width | `Select` |
+| Alert (说明) | variant='warning', yellow bg, 12px | `Alert` |
+| NumberInput + 后缀 | `Input(type='number')` width 80px + "条" 文字 | `Input` |
+| Checkbox | 16px + label 14px/400 | `Checkbox` |
+
+#### ToggleGroup（触发时机选择）
+
+> 截图实证：整理触发时机 [定时整理 | 空闲整理 | 跟随记忆加工触发]
+
+| 属性 | 值 | UI 组件 |
+|------|---|---------|
+| type | `single` (互斥) | `components/toggle-group` |
+| 选中态 | bg `var(--primary)`, color white | — |
+| 未选中态 | bg transparent, color `var(--gray-secondary)`, border 1px solid `var(--gray-border)` | — |
+| height | 32px | — |
+| padding | 0 12px | — |
+| border-radius | `var(--radius-md)` (6px) | — |
+| gap | 0 (紧密排列) | — |
+
+#### 时间选择器（条件显示）
+
+> 截图实证：定时整理选中后显示 "整理时间 [03时 ▼] [00分 ▼]"
+
+| 属性 | 值 |
+|------|---|
+| layout | flex, align-center, gap 8px |
+| label | "整理时间" 14px/400 `var(--gray-secondary)` |
+| hour Select | width 80px, suffix "时" |
+| minute Select | width 80px, suffix "分" |
+| margin-top | 12px |
+
+#### Settings 特殊规则
+
+| 规则 | 说明 |
+|------|------|
+| 无显式提交按钮 | 设置即生效（auto-save），无 SubmitBar |
+| 分隔线 | 不同功能区块间使用 `Separator` |
+| 多卡片独立 | 每张 SettingsCard 内的表单状态独立 |
+
+### 7.5 OpenTrek 容器模式 UI 组件索引
+
+> 基础路径：`packages/ui/src/components/`
+
+| 容器/场景 | 必需组件 | 路径 |
+|----------|---------|------|
+| OT-FM-1 Dialog | `Dialog`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogFooter`, `DialogClose` | `components/dialog` |
+| OT-FM-2 Sheet | `Sheet`, `SheetContent`, `SheetHeader`, `SheetTitle`, `SheetFooter`, `SheetClose` | `components/sheet` |
+| OT-FM-3 Settings | `Card`, `CardHeader`, `CardContent`, `Tabs`, `Avatar`, `Separator` | `components/{card,tabs,avatar,separator}` |
+| 字段控件 | 见 §5 可选组件表 | `components/{input,textarea,select,switch,checkbox,radio-group,toggle-group}` |
+| 文件上传 (OT-FM-2) | `Upload` | `components/upload` |
+| 字段内提示 | `Alert`, `Tooltip` | `components/{alert,tooltip}` |
+
+### 7.6 各页面截图 → 模式映射表
+
+| 页面 | 容器类型 | 模式 | 字段构成 | 主操作 |
+|------|----------|------|----------|--------|
+| 内置服务 > 沙箱管理 > 编辑 | Dialog (540px) | OT-FM-1 | 沙箱名称(Input) + CPU/内存(2col Select) | 保存 |
+| 内置服务 > 数据源管理 > 添加 | Dialog (640px) | OT-FM-1 | 数据源名称*(Input) + 引导区块 + Checkbox + Alert | 添加 |
+| 内置资产 > 上架Skill | Sheet (right, 560px) | OT-FM-2 | 上传文件*(Upload) + 备注名称(Input) + 分类标签(Select) | 确认上架 |
+| 记忆体 > 新建 | Sheet (right, 480px) | OT-FM-2 | 名称*(Input) + 描述(Textarea) + 模型*(Select×2) + 属性*(Radio) | 创建 |
+| 记忆体 > 空间共用 > 整理策略 | Inline (3-col cards) | OT-FM-3 | Switch×3 + 条件字段 + ToggleGroup + TimePicker | 无（auto-save） |
+
 ## 规范引用
 
 - **读取路径**：见根技能 `../../SKILL.md` §4.5 三阶段读取决策树
@@ -344,7 +727,7 @@ PageContainer → ContentWrapper → Breadcrumb + PageHeader + Card[FieldGroup]
 
 > `rules/design-tokens.css` 是设计 Token 的唯一真相源（:root 变量定义）：生成 HTML 原型时需将 :root 变量块嵌入页面 `<style>` 标签；生成 React/TSX 需确保项目已通过 `@import` 引入该 CSS 文件。
 
-## 7. 验证清单 (Validation Checklist)
+## 8. 验证清单 (Validation Checklist)
 
 > **通用检查项**（布局分区/颜色Token/间距/字体/尺寸/禁用样式/异步操作/空数据/加载中）见根技能 `../../docs/validation-workflow.md` 验证清单。此处仅列出表单页特有检查项。
 
@@ -360,3 +743,38 @@ PageContainer → ContentWrapper → Breadcrumb + PageHeader + Card[FieldGroup]
 | 取消确认 | 未保存内容时 Dialog确认 | 正确 |
 | 按钮 loading | SubmitBar 按钮 disabled + Spinner(C4) | 正确 |
 | 分区表单 | Card 分组、Separator 分隔 | 正确 |
+
+### OT-FM-1 Dialog 容器特有检查项
+
+| 检查项 | 检查点 | 目标 |
+|--------|--------|------|
+| 容器组件 | 使用 `components/dialog` 全套（DialogContent/Header/Title/Footer） | 正确 |
+| Dialog 尺寸 | width 540px(≤4 字段) / 640px(5-8 字段), max-height `calc(100vh - 120px)` | 符合 |
+| Footer 按钮顺序 | `[取消(outline)] [主操作(default+primary)]`，右对齐 | 正确 |
+| 字段间距 | 垂直 20px，2-col 横向 gap 16px | 符合 |
+| 圆角 / 内边距 | radius 12px (`var(--radius-lg)`), padding 24px | 符合 |
+
+### OT-FM-2 Sheet 容器特有检查项
+
+| 检查项 | 检查点 | 目标 |
+|--------|--------|------|
+| 容器组件 | 使用 `components/sheet` 全套，side='right' | 正确 |
+| Sheet 宽度 | 480px(标准) / 560px(含上传) | 符合 |
+| Footer 按钮顺序 | `[主操作(default+primary)] [取消(outline)]`（**主操作在左，与 Dialog 相反**） | 正确 |
+| Footer 固定 | sticky bottom: 0 + border-top + bg `var(--card)` | 符合 |
+| 字段间距 | 垂直 24px（比 Dialog 宽松） | 符合 |
+| Upload Zone | dashed border + 32px padding + 中心 icon (仅含上传场景) | 符合 |
+| 字段内 Alert | margin-top 8px, padding 10px 12px, font 12px | 符合 |
+
+### OT-FM-3 Settings 容器特有检查项
+
+| 检查项 | 检查点 | 目标 |
+|--------|--------|------|
+| 网格布局 | `grid-template-columns: repeat(3, 1fr)` + gap 16px，响应式降级 | 正确 |
+| SettingsCard | radius 12px + padding 20px + 1px solid `var(--gray-border)` | 符合 |
+| Header icon | 32×32, radius 8px, bg `var(--primary)` (`Avatar` + `AvatarFallback`) | 正确 |
+| Switch 行 | flex justify-between，label 左 + Switch 右 | 正确 |
+| 条件字段 | Switch ON 时展示，不缩进，margin-top 12px | 正确 |
+| ToggleGroup | type='single', height 32px, gap 0 | 正确 |
+| 无 SubmitBar | auto-save 模式，禁止出现提交按钮 | 0 个 SubmitBar |
+