@teamix-evo/skills 0.4.0 → 0.5.0

package/src/teamix-evo-design-opentrek/patterns/page-types.md

@@ -1,5 +1,7 @@
 # Page Types — 5 种标准页面类型
 
+> ⚠️ **Prerequisites**: 你必须由 [generation-flow.md](../generation-flow.md) Step 2 引导到这里。若未完成 Step 1（需求确认），请先返回。
+
 > AI 生成页面前**必须先识别页面类型**，再选择对应模式。本文档是 generation-flow.md Step 2 的核心输入。
 
 ---
@@ -66,7 +68,7 @@
 
 ## 5. Dashboard
 
-> **完整规范见 [`dashboard.md`](./dashboard.md)** — 标准结构 + 设计要点(关键指标字号、StatCard 数量、chart-* 色彩消费顺序)。
+> **完整规范见 [`dashboard.md`](./dashboard.md)** — 标准结构 + 设计要点(关键指标字号、StatCard 数量、chart-\* 色彩消费顺序)。
 
 ---
 
@@ -118,22 +120,25 @@
 
 ### 6.4 CRUD 流转速查
 
-| 意图     | 关键词         | 目标页                    | 完成后         |
-| -------- | -------------- | ------------------------- | -------------- |
-| 查看列表 | 列表/查询/检索 | ListPage                  | —              |
-| 查看详情 | 详情/查看/信息 | DetailPage                | 可返回列表     |
-| 新建     | 新建/创建/新增 | FormPage(新建)            | 保存后返回列表 |
-| 编辑     | 编辑/修改      | FormPage(编辑)或 Drawer   | 保存后返回原页 |
-| 删除     | 删除/移除      | Dialog(输入确认)          | 确认后刷新列表 |
-| 复制     | 复制/克隆      | FormPage(复制新建)        | 保存后返回列表 |
+| 意图     | 关键词         | 目标页                  | 完成后         |
+| -------- | -------------- | ----------------------- | -------------- |
+| 查看列表 | 列表/查询/检索 | ListPage                | —              |
+| 查看详情 | 详情/查看/信息 | DetailPage              | 可返回列表     |
+| 新建     | 新建/创建/新增 | FormPage(新建)          | 保存后返回列表 |
+| 编辑     | 编辑/修改      | FormPage(编辑)或 Drawer | 保存后返回原页 |
+| 删除     | 删除/移除      | Dialog(输入确认)        | 确认后刷新列表 |
+| 复制     | 复制/克隆      | FormPage(复制新建)      | 保存后返回列表 |
 
 ---
 
 ## 7. 通用结构铁律（所有页面类型共享）
 
-1. **PageContainer → ContentWrapper → Card(白卡容器) → 业务组件**
-   - 业务组件**必须**经白卡容器包裹，禁止直接放在 ContentWrapper 内
-2. **Card(白卡容器) 不可嵌套** — 白卡是单例
+1. **`<PageShell background="muted" sidebar={<OpSidebar/>}> → <OpPageContainer header={<PageHeader/>}> → 业务组件`**
+   - PageShell 来自 `@/components/ui/page-shell`(三明治壳;opentrek 主区背景用 `muted` 灰底,无 header slot)
+   - OpPageContainer 来自 `@/components/business/op-page-container`(padding `py-5 pr-5`,**内置无边框大白卡** `bg-card rounded-2xl`)
+   - PageHeader 来自 `@/components/ui/page-header`(本身无 padding,由 OpPageContainer 内白卡统一管)
+   - 业务组件(ListCard 网格 / DataTable / Form 等)直接作为 OpPageContainer children,**不要再手动包 `<Card>`** — 容器已经是白卡
+2. **主区白卡单例** — OpPageContainer 已内置 `bg-card rounded-2xl` 大白卡,主区内**不要再手写 `<Card>`** 包整个 PageHeader / DataTable / Form / FieldGroup(嵌套违反白卡单例)。卡片网格内的 ItemCard / 表单分区的子 Card 是局部容器,不算"嵌套主区白卡"
 3. **页头不可重复** — 子页面禁止自建 header，PageHeader 由框架管控
 4. **不在内容区直接放 Form 整体** — 必须用 FieldGroup + Field（详见 boundaries.md C7）
 5. **不在 ListPage / DetailPage 内嵌 Chart 整体** — 图表归属 Dashboard

package/src/teamix-evo-design-opentrek/patterns/sidebar.md

@@ -0,0 +1,122 @@
+# Sidebar Pattern — OpenTrek 侧边栏统一规范
+
+> ⚠️ **Prerequisites**: 你必须已在 [generation-flow.md](../generation-flow.md) Step 3 确认布局包含侧边栏，或由翻新/验证路径引导到这里。
+
+> AI 生成或翻新页面时必须引用本规则。所有色值与尺寸通过 token 引用，禁止硬编码。Token 真值见 `tokens/tokens.theme.css`。
+
+---
+
+## 1. 宽度与定位
+
+| 状态   | Token                       | 业务含义                        |
+| ------ | --------------------------- | ------------------------------- |
+| 展开态 | `--layout-sidebar-width`    | 侧边栏展开宽度                  |
+| 收起态 | `--sidebar-collapsed-width` | 仅图标，居中对齐于中轴线        |
+| 顶部条 | `--topbar-height`           | 与 Sidebar 顶部对齐，区分品牌区 |
+
+**布局规则**：
+
+- Sidebar 走 `position: fixed; top: 0; left: 0; bottom: 0; z-index: 100`
+- 主内容区通过 `margin-left: var(--layout-sidebar-width)` 补偿
+- **禁止**：把 Sidebar + 主内容区放进一个 flex 容器（不可预期的滚动行为）
+
+---
+
+## 2. 结构变体（2 选 1，按信息架构层级）
+
+### 2.1 三级结构（默认）
+
+适用：信息架构需要 3 层归类（顶层业务域 / 中层主导航 / 底层细分）。
+
+```
+aside.sidebar
+├─ div.sidebar-header        ← 品牌区
+├─ div.sidebar-content       ← 滚动容器
+│  ├─ div.sidebar-group-label  ← 分组标题（可重复）
+│  ├─ ul.sidebar-menu
+│  │  └─ li > a.sidebar-menu-item
+│  └─ ul.sidebar-sub-menu      ← 主菜单展开后显示
+│     └─ li > a.sidebar-menu-item
+├─ div.sidebar-divider
+└─ div.sidebar-footer
+```
+
+### 2.2 二级结构（v4.1 新增）
+
+适用：主菜单项语义对等，无需分组标题归类。
+
+- **禁止** `div.sidebar-group-label`
+- 所有主菜单项放进同一个 `ul.sidebar-menu`
+- 子菜单项与主菜单项**文字 x 坐标对齐**（同列），层级关系由展开箭头 + 字号 + 背景色表现，**不**通过左缩进
+- 子菜单项不带 `.item-icon`，只有文字
+
+### 2.3 选型决策
+
+| 信息架构层级深度 | 选用       |
+| ---------------- | ---------- |
+| 3 层归类         | threeLevel |
+| 2 层归类         | twoLevel   |
+
+> 与菜单项**个数无关**，只看信息架构。
+
+---
+
+## 3. 颜色映射（v4.1 品牌化）
+
+| 槽位                                | 用途                                        |
+| ----------------------------------- | ------------------------------------------- |
+| `--color-sidebar`                   | 侧边栏背景                                  |
+| `--color-sidebar-foreground`        | 默认文字                                    |
+| `--color-sidebar-active`            | 选中项背景（v4.1 走灰色，区别 hover）       |
+| `--color-sidebar-active-foreground` | 选中项文字（OpenTrek 蓝）                   |
+| `--color-sidebar-hover`             | hover 态背景                                |
+| `--color-sidebar-title`             | sidebar-group-label 文字                    |
+| `--color-sidebar-item-muted`        | 二级文字 / 次要项                           |
+| `--color-sidebar-primary`           | 品牌强调（`#0055EE`）— 高亮 logo / 选中态等 |
+| `--color-sidebar-border`            | 分隔线                                      |
+| `--color-sidebar-ring`              | 焦点圈                                      |
+
+**禁止**：
+
+- 直接用 `bg-blue-600` / `text-gray-500` 这类原始 Tailwind 色
+- 在 sidebar 内消费 `--color-primary` / `--color-foreground`（应走 sidebar 命名空间）
+
+---
+
+## 4. 收起态行为
+
+- 宽度 `--sidebar-collapsed-width`，`overflow: visible`（支持 flyout 浮层溢出）
+- 滚动能力下移到 `.sidebar-content`（`overflow-y: auto; overflow-x: hidden`）
+- 仅显示图标，隐藏所有文字（label / group title / count / expand-icon）
+- 选中态用 `--color-sidebar-active` 灰色背景，**不**显示左侧高亮条
+- 过渡走 `width var(--duration-normal) var(--easing-ease)`
+- 菜单项 40×40px，`border-radius: var(--radius-md)`，`li { display: flex; justify-content: center }` 保证居中于中轴线
+
+---
+
+## 5. Footer / Header 槽位
+
+| 槽位             | 内容                                                  |
+| ---------------- | ----------------------------------------------------- |
+| sidebar-header   | 展开态：品牌 logo；收起态：方形 logo +hover 展开 icon |
+| sidebar-avatar   | 用户头像                                              |
+| sidebar-username | 用户名（收起态隐藏）                                  |
+| sidebar-more     | 更多操作触发器                                        |
+
+---
+
+## 6. 禁止清单（硬约束）
+
+- [ERROR] 扁平化结构（直接 `<a>` 挂在 `nav`/`div` 下，无 `ul > li` 包裹）
+- [ERROR] Sidebar 整体使用 flex 布局（必须 `fixed` 定位）
+- [ERROR] 省略 `sidebar-content` 滚动容器
+- [ERROR] twoLevel 变体出现 `sidebar-group-label`
+- [ERROR] 无子菜单的菜单项出现 expand-icon 或 `data-toggle`（expand-icon 仅出现在有 `sidebar-sub-menu` 的主菜单项）
+- [WARN] 在 sidebar 里直接消费 `--color-primary`（应走 `--color-sidebar-primary`）
+- [WARN] 二级结构子菜单文字起点低于主菜单文字 x（隐藏层级关系）
+
+---
+
+## 7. 引用关系
+
+本规则是 OpenTrek sidebar 的 **single source of truth**。其他 skill 文件（page-frame / common-components / 子技能）须 `$ref` 本文件，禁止重复定义或冲突覆写。

package/src/teamix-evo-design-opentrek/philosophy.md

@@ -1,5 +1,7 @@
 # 设计哲学 · OpenTrek
 
+> ⚠️ **何时读本文件**: [generation-flow.md](./generation-flow.md) Step 1 强制要求读取。本文件建立"为什么这么做"的认知基础，是后续所有决策的裁判依据。
+
 > 回答**"为什么这么做"**。具体规则见 [boundaries.md](./boundaries.md) / [foundations.md](./foundations.md)。
 
 ---
@@ -70,11 +72,11 @@ OpenTrek 是面向**云资源管理 / 企业级控制台**的设计语言。用
 
 ## 3. 原则冲突示例
 
-| 场景                     | 候选                                                  | 选 | 理由                              |
-| ------------------------ | ----------------------------------------------------- | -- | --------------------------------- |
-| 删除按钮要不要二次确认？ | A. 直接删除（效率）<br>B. AlertDialog 确认（安全）    | B  | Safety > Efficiency               |
-| 创建按钮浮动还是固定？   | A. 跟随滚动浮动（醒目）<br>B. 固定右下角（一致）      | B  | Predictability > Clarity          |
-| 状态用什么表达？         | A. 仅颜色（简洁）<br>B. 颜色 + 图标 + 文字            | B  | Clarity > Efficiency（视觉简洁）  |
+| 场景                     | 候选                                               | 选  | 理由                             |
+| ------------------------ | -------------------------------------------------- | --- | -------------------------------- |
+| 删除按钮要不要二次确认？ | A. 直接删除（效率）<br>B. AlertDialog 确认（安全） | B   | Safety > Efficiency              |
+| 创建按钮浮动还是固定？   | A. 跟随滚动浮动（醒目）<br>B. 固定右下角（一致）   | B   | Predictability > Clarity         |
+| 状态用什么表达？         | A. 仅颜色（简洁）<br>B. 颜色 + 图标 + 文字         | B   | Clarity > Efficiency（视觉简洁） |
 
 ---
 

package/src/teamix-evo-design-uni-manager/SKILL.md

@@ -17,38 +17,29 @@ description: |
 
 <!-- teamix-evo:managed:start id="core" -->
 
-## 意图路由
+## ⚠️ 执行协议（MANDATORY — 跳步即失败）
 
-收到页面相关请求时，按意图分流：
+收到页面相关请求时，**必须先识别意图，再进入对应的唯一执行路径**。不允许跳过路径中的任何步骤。
 
-| 意图     | 识别关键词                                                        | 执行路径                                    |
-| -------- | ----------------------------------------------------------------- | ------------------------------------------- |
-| **生成** | "生成" / "创建" / "新建" / "设计一个" / "做一个" / "起一个控制台" | → generation-flow.md 六步流程               |
-| **翻新** | "改造" / "升级" / "翻新" / "对齐规范" / "重新生成"                | → generation-flow.md §翻新路径              |
-| **验证** | "检查" / "验证" / "评估" / "是否符合规范"                         | → checklist.md 逐项对照                     |
-| **查询** | "token" / "色值" / "间距" / "组件尺寸" / "圆角"                   | → foundations.md(MCP `tokens_*` 工具规划中) |
+### 意图路由
 
-## 三阶段 Dispatch
+| 意图     | 识别关键词                                                        | 唯一执行路径                                                            |
+| -------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| **生成** | "生成" / "创建" / "新建" / "设计一个" / "做一个" / "起一个控制台" | **必须完整执行** [generation-flow.md](./generation-flow.md) §1 六步门控 |
+| **翻新** | "改造" / "升级" / "翻新" / "对齐规范" / "重新生成"                | **必须完整执行** [generation-flow.md](./generation-flow.md) §2 翻新路径 |
+| **验证** | "检查" / "验证" / "评估" / "是否符合规范"                         | **必须完整执行** [generation-flow.md](./generation-flow.md) §3 验证路径 |
+| **查询** | "token" / "色值" / "间距" / "组件尺寸" / "圆角"                   | → [foundations.md](./foundations.md)（MCP `tokens_*` 工具规划中）       |
 
-```
-阶段 ① 确定页面类型
-  → 读 patterns/page-types.md 决策树（含 Console Home / 一致性三件套）
-  → 读 components.md 确认组件集（含 um-topbar 实物归属）
+### 不可跳过的前置读取
 
-阶段 ② 匹配子类型 + 布局
-  - List / Detail / Form    → patterns/{list|detail|form}-page.md
-  - Dashboard / Console     → patterns/dashboard.md
-  - Dialog/Sheet/Drawer     → 视为复合组件(非页面);走 components.md §3.1 选型
-                              + boundaries.md F8 / F9 / S7 / C2 / FF1-FF4 + UM1-UM3
-  → 读 patterns/page-types.md §6 确认页间流转
-  → 涉及租户/项目/区域切换、跨云资源旅程时读 flows.md（A 资源查找 / B 创建 / C 异常 / D 批量 / E 上下文切换）
+无论哪种意图，进入 generation-flow.md 后**每个 Step 都有明确的 MUST READ 文件清单**。AI 不得凭"已有知识"跳过任何文件读取 — 每次任务必须重新读取，因为文件内容可能已更新。
 
-阶段 ③ 生成代码
-  → 读 foundations.md (hybridcloud Token 约束 — 锐利圆角 / B50 / 8 档间距)
-  → 读 boundaries.md (硬规则 38 + UM1~UM3 专有云增量)
-  → MCP get_component_meta(id) 查组件 Props
-  → 对照 checklist.md 自检（含 doc 15/16/20 一致性自检）
-```
+### 禁止行为
+
+- ❌ 跳过 generation-flow.md 直接写代码
+- ❌ 只读 patterns/\*.md 不读 philosophy.md / boundaries.md / foundations.md
+- ❌ 选择性读取（"这个文件我已经知道内容了"）
+- ❌ 把 SKILL.md 文件索引当作"我可以只挑一个读"的菜单
 
 ## 文件索引
 

package/src/teamix-evo-design-uni-manager/boundaries.md

@@ -1,6 +1,9 @@
 # 硬约束 · Boundaries
 
-> 本文件列出所有"AI 生成页面 / 组件代码时**不能做什么**"的硬规则。共 41 条规则分 6 组：
+> ⚠️ **何时读本文件**: [generation-flow.md](./generation-flow.md) Step 6（自检）、翻新路径、验证路径均强制要求完整读取本文件。
+> 本文件是硬规则的**唯一真值**，不得跳过。
+
+> 本文件列出所有“AI 生成页面 / 组件代码时**不能做什么**”的硬规则。共 41 条规则分 6 组：
 >
 > - **F1-F10**：禁止项（视觉与 token 层面）
 > - **FF1-FF4**：表单专属硬约束（错误信息、必填、状态色块、Card 嵌套）

package/src/teamix-evo-design-uni-manager/components.md

@@ -1,5 +1,8 @@
 # Components — 选型决策与组合规则
 
+> ⚠️ **Prerequisites**: 你必须已完成 [generation-flow.md](./generation-flow.md) Step 1–3（已确定页面类型 + 子类型 + 区域骨架）后才能读本文件。
+> 若未完成前置步骤，请先返回 [generation-flow.md](./generation-flow.md) 从 Step 1 开始。
+
 > **本文档只回答"用什么组件、怎么搭配"，不写具体 Props / Examples / import 路径。**
 > 组件 API、Props、示例代码通过 MCP `get_component_meta` 实时查询；可用列表通过 `list_components` / `find_components` 查询。
 

package/src/teamix-evo-design-uni-manager/foundations.md

@@ -1,5 +1,8 @@
 # Foundations — Uni-Manager 视觉地基
 
+> ⚠️ **何时读本文件**: [generation-flow.md](./generation-flow.md) Step 5（视觉填充）强制要求完整读取。
+> 任何色彩、间距、字号、圆角、阴影、动效必须基于本文件的 Token 定义，不得凭记忆生成。
+
 > 排版 / 色彩 / 间距 / 圆角 / 阴影 / 动效 在 Uni-Manager 下的系统化使用规范。
 > 价值锚：**hybridcloud 锐利风 · 高密度信息可读性 · token-first**。
 > 真值源：`@teamix-evo/tokens/variants/uni-manager/theme.css`（Tailwind v4 `@theme` + `[data-theme='uni-manager']` scoped CSS）。

package/src/teamix-evo-design-uni-manager/generation-flow.md

@@ -1,6 +1,6 @@
 # 生成 / 翻新 / 验证流程
 
-> AI 在执行页面级任务时，按本文件的门控顺序执行。每一步都有明确的输入输出，跳步会导致结果不可控。
+> ⚠️ **本文件是页面级任务的唯一执行路径。每一步都有 GATE 门禁和 MUST READ 文件清单。** > **跳步 = 产出不合规。AI 不得凭"已有知识"省略任何文件读取。**
 
 ---
 
@@ -14,7 +14,11 @@ Step 1 需求确认 → Step 2 类型识别 → Step 3 子类型 + 布局
 Step 6 自检    ← Step 5 视觉填充  ← Step 4 组件挑选
 ```
 
-### Step 1 · 最小 quorum + 默认值
+> **每步必须产出明确输出后才能进入下一步（GATE 条件）。**
+
+## Step 1 · 最小 quorum + 默认值
+
+📖 **MUST READ**: [philosophy.md](./philosophy.md)（理解"为什么这么做" — 四大原则优先级）+ [brand.md](./brand.md)（视觉调性 + 文案语气基调）
 
 **只有两个信息缺一不可**（最小 quorum，缺则反问）：
 
@@ -39,7 +43,11 @@ Step 6 自检    ← Step 5 视觉填充  ← Step 4 组件挑选
 
 **输出**：页面类型 + 资源实体 + 一句话场景假设（"假设是平台管理员的实例 CRUD 列表，多云资源默认显示 cloud Badge，如有偏差请指正"）。
 
-### Step 2 · 页面类型识别
+## Step 2 · 页面类型识别
+
+🚧 **GATE**: Step 1 必须已产出"页面类型 + 资源实体 + 场景假设"
+
+📖 **MUST READ**: [patterns/page-types.md](./patterns/page-types.md) §决策树 + §Zone Map
 
 根据 [patterns/page-types.md](./patterns/page-types.md) §决策树匹配类型：
 
@@ -55,7 +63,11 @@ Step 6 自检    ← Step 5 视觉填充  ← Step 4 组件挑选
 
 **输出**：页面类型 ID（`ListPage` / `DetailPage` / `Console` / ...）。
 
-### Step 3 · 子类型识别 + 布局选择
+## Step 3 · 子类型识别 + 布局选择
+
+🚧 **GATE**: Step 2 必须已产出"页面类型 ID"
+
+📖 **MUST READ**: 对应的 `patterns/{type}-page.md` + [flows.md](./flows.md)（涉及租户/区域切换时）
 
 读对应 `patterns/{type}-page.md`：
 
@@ -66,7 +78,11 @@ Step 6 自检    ← Step 5 视觉填充  ← Step 4 组件挑选
 
 **输出**：子类型 ID + 区域骨架（参照 [patterns/page-types.md](./patterns/page-types.md) §Zone Map）。
 
-### Step 4 · 组件挑选
+## Step 4 · 组件挑选
+
+🚧 **GATE**: Step 3 必须已产出"子类型 ID + 区域骨架"
+
+📖 **MUST READ**: [components.md](./components.md) §0 兜底铁律 + §1 双层架构 + §3 决策树 + §5 拼装配方
 
 读 [components.md](./components.md) §选型决策树：
 
@@ -78,7 +94,11 @@ Step 6 自检    ← Step 5 视觉填充  ← Step 4 组件挑选
 
 **输出**：组件清单 + 每个组件的关键 Props。
 
-### Step 5 · 视觉填充（Token 绑定）
+## Step 5 · 视觉填充（Token 绑定）
+
+🚧 **GATE**: Step 4 必须已产出"组件清单 + 每个组件的关键 Props"
+
+📖 **MUST READ**: [foundations.md](./foundations.md) 全文（§1 Token 优先级 + §4 色彩 + §5 圆角 + §6 阴影 + §7 动效）+ [brand.md](./brand.md) §1 视觉五维（圆角/配色/密度/阴影/焦点风格对齐）
 
 读 [foundations.md](./foundations.md)，所有色彩、间距、字号、圆角、阴影、动效**必须**使用 Token：
 
@@ -95,7 +115,11 @@ Step 6 自检    ← Step 5 视觉填充  ← Step 4 组件挑选
 
 **输出**：含 Token 引用的可执行代码 / HTML。
 
-### Step 6 · 自检
+## Step 6 · 自检
+
+🚧 **GATE**: Step 5 必须已产出"含 Token 引用的可执行代码"
+
+📖 **MUST READ**: [boundaries.md](./boundaries.md) 全文（41+ 条硬规则）+ [checklist.md](./checklist.md) 全文
 
 对照 [checklist.md](./checklist.md) 12+ 项逐项验证：
 
@@ -110,6 +134,12 @@ Step 6 自检    ← Step 5 视觉填充  ← Step 4 组件挑选
 
 适用关键词：**"改造 / 升级 / 翻新 / 对齐规范 / 重新生成"**。
 
+📖 **MUST READ** (全部必读，不得省略)：
+
+1. [boundaries.md](./boundaries.md) — 硬规则真值
+2. [foundations.md](./foundations.md) — Token 真值
+3. [components.md](./components.md) — 组件选型
+
 ```
 1. 读取目标页面源码
 2. 扫描违规项（按 boundaries.md F1-F10 + S1-S8 + UM1-UM3）
@@ -132,6 +162,12 @@ Step 6 自检    ← Step 5 视觉填充  ← Step 4 组件挑选
 
 适用关键词：**"检查 / 验证 / 评估 / 是否符合规范"**。
 
+📖 **MUST READ** (全部必读，不得省略)：
+
+1. [boundaries.md](./boundaries.md) — 41+ 条硬规则
+2. [checklist.md](./checklist.md) — 13 强制项 + 5 一致性 + 7 建议项
+3. [foundations.md](./foundations.md) — Token 真值（用于校验是否符合）
+
 ```
 1. 读取目标页面源码
 2. 逐条对照 boundaries.md

package/src/teamix-evo-design-uni-manager/patterns/dashboard.md

@@ -1,8 +1,10 @@
 # Dashboard — 控制台首页 / 数据概览页
 
+> ⚠️ **Prerequisites**: 你必须已在 [generation-flow.md](../generation-flow.md) Step 2 确认页面类型为 **Dashboard**，并由 Step 3 引导到这里。
+
 > AI 实操路径：Step 2（页面类型识别）判定为 Dashboard 后，本文档接管。
 >
-> uni-manager 中 Dashboard **同时承担"控制台 Home"** 角色（资源总览 / 待办 / 跨云态势），是用户登录后第一屏。
+> uni-manager 中 Dashboard **同时承担“控制台 Home”** 角色（资源总览 / 待办 / 跨云态势），是用户登录后第一屏。
 
 ---
 

package/src/teamix-evo-design-uni-manager/patterns/detail-page.md

@@ -1,6 +1,8 @@
 # Detail Page — 详情页模式（uni-manager）
 
-> **触发**：用户描述含"详情/查看/信息/概览（单资源）"。
+> ⚠️ **Prerequisites**: 你必须已在 [generation-flow.md](../generation-flow.md) Step 2 确认页面类型为 **DetailPage**，并由 Step 3 引导到这里。
+
+> **触发**：用户描述含“详情/查看/信息/概览（单资源）”。
 > **核心特征**：单条记录的只读展示 + DescriptionList + 操作按钮。
 > **页面级别**：L2（面包屑模式 PageHeader，自动继承 um-topbar + Sidebar）。
 
@@ -20,7 +22,34 @@
 
 ---
 
-## 2. 标准结构（资源详情 — uni-manager 跨云增强）
+## 2. Template 组件拼装
+
+> 源自 `packages/create/variants/uni-manager/src/templates/detail-page.tsx`
+
+```tsx
+<PageShell header={<UmTopbar />} sidebar={<Sidebar />}>
+  <UmPageContainer header={<PageHeader breadcrumb={...} title="XX 详情" actions={...} />}>
+    {children}  {/* InfoCard / Tabs / DescriptionList / Timeline */}
+  </UmPageContainer>
+</PageShell>
+```
+
+| Slot         | 注入内容                                             | 说明       |
+| ------------ | ---------------------------------------------------- | ---------- |
+| `topbar`     | UmTopbar                                             | 框架级吃顶 |
+| `sidebar`    | Sidebar + 业务菜单                                   | 左导       |
+| `pageHeader` | PageHeader（面包屑 + 标题 + actions + 可选数据概览） | L2 页面    |
+| `children`   | InfoCard / Tabs / DescriptionList / Timeline 等      | 详情主区   |
+
+**壳层特征**：
+
+- 结构最简洁 — 只有 4 个 slot，业务组件全部走 children
+- InfoCard 是局部信息卡（业务子区域级），不算“主区白卡”
+- Tabs 用于多维度信息分类（基本信息 / 监控 / 关联资源 / 操作日志）
+
+---
+
+## 3. 标准结构（资源详情 — uni-manager 跨云增强）
 
 ```
 ┌─────────────────────────────────────────────┐
@@ -65,7 +94,7 @@
 
 ---
 
-## 3. 必需组件
+## 4. 必需组件
 
 | 组件                | 位置 | 说明                            |
 | ------------------- | ---- | ------------------------------- |
@@ -87,7 +116,7 @@
 
 ---
 
-## 4. DescriptionItem 字段交互
+## 5. DescriptionItem 字段交互
 
 | 类型           | 触发       | 反馈                              |
 | -------------- | ---------- | --------------------------------- |
@@ -102,7 +131,7 @@
 
 ---
 
-## 5. 操作按钮规则
+## 6. 操作按钮规则
 
 ### 5.1 位置
 
@@ -129,7 +158,7 @@
 
 ---
 
-## 6. Tab 切换交互
+## 7. Tab 切换交互
 
 | 场景       | 行为                          |
 | ---------- | ----------------------------- |
@@ -143,7 +172,7 @@
 
 ---
 
-## 7. 信息分组
+## 8. 信息分组
 
 - DescriptionList 按 ListSection 分组（基本信息 / 配置信息 / 网络信息）
 - 每组可独立展开/收起（可选）
@@ -153,7 +182,7 @@
 
 ---
 
-## 8. 嵌套约束
+## 9. 嵌套约束
 
 | 父子关系                                                                                                 | 状态                                |
 | -------------------------------------------------------------------------------------------------------- | ----------------------------------- |
@@ -168,7 +197,7 @@
 
 ---
 
-## 9. 禁止项
+## 10. 禁止项
 
 | 禁项                       | 原因                                  |
 | -------------------------- | ------------------------------------- |
@@ -182,7 +211,7 @@
 
 ---
 
-## 10. 边界情况
+## 11. 边界情况
 
 | 场景       | 处理                    |
 | ---------- | ----------------------- |
@@ -197,7 +226,7 @@
 
 ---
 
-## 11. 详情 → 列表返回约定
+## 12. 详情 → 列表返回约定
 
 - 面包屑父级项点击返回 ListPage
 - PageHeader 右侧可选 × 关闭按钮
@@ -208,7 +237,7 @@
 
 ---
 
-## 12. 详情页特有自检
+## 13. 详情页特有自检
 
 - [ ] PageHeader 用面包屑模式（L2 页面）
 - [ ] um-topbar 在框架层就位（UM1）