@teamix-evo/skills 0.2.0 → 0.4.0

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

@@ -0,0 +1,356 @@
+# List Page — 列表页模式（uni-manager）
+
+> **触发**：用户描述含"列表/表格/查询/检索/卡片管理"。
+> **核心特征**：多条结构化数据 + 搜索/筛选 + 分页。
+> **页面级别**：L1（标题模式 PageHeader，自动继承 um-topbar + Sidebar）。
+> **uni-manager 增强**：高密度行（36-40px）+ 跨云 CloudBadge 列 + 多租户 / 多区域筛选维度 + 批量操作高频。
+
+---
+
+## 1. 子类型路由
+
+| 子类型              | 关键词                             | 布局                          | 核心组件                            |
+| ------------------- | ---------------------------------- | ----------------------------- | ----------------------------------- |
+| **standard**        | "列表"/"表格"/"查询"               | TWO_COL                       | DataTable + Pagination              |
+| **l2-sidebar**      | "分类"/"分组"/"左侧树"             | TWO_COL + 内部 Sidebar(240px) | Sidebar + DataTable                 |
+| **expandable**      | "展开"/"子项"/"详情行"             | TWO_COL                       | DataTable（行内展开）               |
+| **drawer**          | "弹窗列表"/"选择器"                | Drawer 内                     | DataTable ⊂ Drawer                  |
+| **pure-card**       | "纯卡片"/"卡片管理"/"资源卡片管理" | SINGLE_COL                    | CardGrid + ItemCard + CardActionBar |
+| **standard-card**   | "卡片列表"/"分类卡片"              | TWO_COL                       | Sidebar + CardGrid + ItemCard       |
+| **view-toggle**     | "视图切换"/"列表卡片切换"          | TWO_COL + ViewToggle          | ViewToggle + DataTable/CardGrid     |
+| **advanced-filter** | "高级筛选"/"更多条件"              | TWO_COL                       | AdvancedFilterPanel + DataTable     |
+| **multi-cloud**     | "多云资源"/"跨云列表"/"跨账号"     | TWO_COL                       | DataTable + CloudBadge 首列         |
+
+### 路由优先级
+
+1. "多云资源"/"跨云列表"/"跨账号" → multi-cloud
+2. "纯卡片"/"卡片管理" → pure-card
+3. "卡片列表"/"分类卡片" → standard-card
+4. "视图切换"/"列表卡片" → view-toggle
+5. "高级筛选" → advanced-filter
+6. "展开"/"子项" → expandable
+7. "分类"/"分组"/"左侧树" → l2-sidebar
+8. "弹窗列表"/"选择器" → drawer
+9. 默认 → standard
+
+---
+
+## 2. 标准结构
+
+```
+┌────────────────────────────────────────────┐
+│ um-topbar (框架级，含租户 / 区域切换)      │
+├────────────────────────────────────────────┤
+│ PageHeader: 标题模式              [新建]   │  ← Header zone
+├────────────────────────────────────────────┤
+│ ActionToolbar: 🔍 搜索 [筛选▼] [刷新]      │  ← Toolbar zone
+├────────────────────────────────────────────┤
+│ ▢ ☁ ID         │ 状态  │ 创建时间  │ 操作  │  ← Main zone (含 CloudBadge 列)
+│ ▢☁阿里 i-001 │ 运行中│ 2026-05-13│ ⋯    │
+│ ▢☁AWS  i-002 │ 已完成│ 2026-05-12│ ⋯    │
+├────────────────────────────────────────────┤
+│ [已选 2 项] 批量启动 / 批量停止 / 批量删除  │  ← BulkActionBar (按需)
+├────────────────────────────────────────────┤
+│        ←  1 / 24 →  [50/页 ▼]   共 1200条 │  ← Footer zone
+└────────────────────────────────────────────┘
+```
+
+---
+
+## 3. 必需组件
+
+| 组件                          | 位置    | 说明                                                        |
+| ----------------------------- | ------- | ----------------------------------------------------------- |
+| **PageHeader**                | top     | 标题模式（L1 页面）；右侧主操作（如「新建」）               |
+| **ActionToolbar**             | toolbar | 单行 flex（nowrap）；左 actions + 中 SearchCombo + 右 tools |
+| **DataTable** 或 **CardGrid** | main    | 二选一，按子类型                                            |
+| **Pagination**                | footer  | 默认 10 条/页（标准列表）/ 12 条/页（卡片）                 |
+
+**框架级**（自动继承，不在 skill 内声明）：um-topbar、Sidebar。
+
+---
+
+## 4. SearchCombo 规范
+
+> ListPage 顶部搜索 + 筛选的标准复合组件。**禁止**用 Input + Select 散件拼装。
+
+### 4.1 在 ActionToolbar 中的位置（硬约束）
+
+- SearchCombo 是 ActionToolbar 的**直接子元素**，位于 `.left-actions` 之后、`.right-tools` 之前
+- 与 `.left-actions` 间距 = **20px**
+
+### 4.2 结构
+
+```
+[ 维度Select | 分隔线 | 搜索Input | 搜索Button(图标) ]
+```
+
+- 容器统一 border + radius **2px**（uni-manager 锐利圆角）+ height 32px + min-width 200px
+- 内部元素无独立边框
+
+### 4.3 交互规则
+
+| 触发                      | 行为                             |
+| ------------------------- | -------------------------------- |
+| 切换维度                  | input.value 清空 → input.focus() |
+| 输入框回车 / 点击搜索按钮 | 执行搜索 → 重置到第 1 页         |
+| 输入框 hover 显示 ×       | 清空输入 → 维度切回"全部"        |
+| 输入框为空时点搜索        | 清除当前条件 → 重置分页          |
+
+### 4.4 FilterTag 展示
+
+- 已应用的搜索条件以 FilterTag 形式展示
+- 单条 Tag 含 `label: value ×`
+- 多条提供「清空全部」链接
+
+### 4.5 搜索维度配置示例（uni-manager 多云增强）
+
+> 维度按业务上下文动态配置；默认含「全部」。**uni-manager 默认在维度中暴露"租户 / 区域 / 云厂商"**。
+
+```json
+// 默认维度（多云资源）
+[
+  { "label": "全部", "value": "all" },
+  { "label": "名称", "value": "name" },
+  { "label": "ID", "value": "id" },
+  { "label": "云厂商", "value": "cloud" },
+  { "label": "区域", "value": "region" },
+  { "label": "租户", "value": "tenant" }
+]
+
+// ECS 实例列表示例（多云）
+[
+  { "label": "全部", "value": "all" },
+  { "label": "实例 ID/名称", "value": "instance" },
+  { "label": "IP", "value": "ip" },
+  { "label": "标签", "value": "tag" },
+  { "label": "云厂商", "value": "cloud" },
+  { "label": "区域", "value": "region" }
+]
+```
+
+---
+
+## 5. DataTable 规则（核心）
+
+### 5.1 列元规则（每列必备）
+
+| 规则     | 说明                                  |
+| -------- | ------------------------------------- |
+| 唯一 ID  | 用于列宽 / 显隐持久化                 |
+| 显隐规则 | "始终显示" 或 "条件显示" + 触发条件   |
+| 宽度定义 | 固定 px / 百分比 / minmax             |
+| 对齐方式 | left（默认）/ center / right          |
+| 排序能力 | 是否支持服务端排序                    |
+| 固定方向 | left（前缀列）/ right（操作列）/ none |
+| 字体     | ID/IP/Hash 等机器列用 `font-mono`     |
+
+### 5.2 列固定
+
+- 左固定：Checkbox(48px) + ID/名称（20%）
+- 右固定：操作列（140px）
+- 固定列与滚动列交界处 `box-shadow: 1px 0 0 var(--border)`
+- 固定列 `z-index: 10`，滚动列 `z-index: 1`
+- **uni-manager 多云列表**：CloudBadge 列建议固定为左侧第二列（紧邻 Checkbox）
+
+### 5.3 行高（uni-manager 高密度）
+
+| 类型               | 行高     | 说明                                   |
+| ------------------ | -------- | -------------------------------------- |
+| 单行内容（默认）   | **36px** | uni-manager 高密度（OpenTrek 是 56px） |
+| 双行内容（带规格） | **44px** | 第二行附属信息（规格 / 标签）          |
+| 多行内容（含监控） | 56px+    | 含小型监控图 / 多标签                  |
+
+### 5.4 选择框三态
+
+| 状态   | 视觉             | 触发            |
+| ------ | ---------------- | --------------- |
+| 未选 ☐ | 默认             | —               |
+| 半选 ☐̲ | 当前页有部分选中 | 自动计算        |
+| 全选 ☑ | 当前页全选       | 点表头 checkbox |
+
+### 5.5 行选择交互
+
+- Checkbox：切换当前行
+- 行点击（非操作区）：跳转 DetailPage
+- Shift+点击：范围选中
+- Ctrl/Cmd+点击：切换单行
+- 选中样式：背景 `bg-accent`（与 Checkbox 选中态一致）
+
+### 5.6 列宽拖拽
+
+- 拖拽手柄置于列头右边界，宽 2px，`cursor: col-resize`
+- 仅对 `visibility: always` 的列允许拖拽
+- 最小宽度取列定义的 `minWidth`（无定义时默认 100px，状态/监控类窄列 80px）
+- 最大宽度不超过表格宽度的 50%
+- 拖拽过程对 `document.body` 加 `cursor: col-resize` + `user-select: none`，防鼠标越界丢失光标
+- 拖拽结束写入 `localStorage`（key 命名 `columnWidths:{产品ID}`）；初始化时读取恢复
+- 列配置弹窗提供「恢复默认列宽」按钮，清 localStorage 后刷新
+
+### 5.7 列排序
+
+- 表头右侧 `⇅` 图标（`text-tertiary`、12px）
+- 升序 `↑` / 降序 `↓` 用 `primary` 色
+- 点击循环：默认 → 升序 → 降序 → 默认
+- 排序状态持久化到 `localStorage`
+
+### 5.8 文字换行
+
+| 列类型     | 处理                                               |
+| ---------- | -------------------------------------------------- |
+| ID / IP    | `font-mono` + `word-break: break-all` + `truncate` |
+| 规格       | 多行展示，不截断                                   |
+| 标签       | 最多 3 个 + `+N`，不自动换行                       |
+| CloudBadge | icon + label，不换行                               |
+
+---
+
+## 6. 操作列规范（硬约束）
+
+### 6.1 结构
+
+操作列 = 主操作 + 分隔线 + 次要操作 + 分隔线 + 状态操作 + 分隔线 + 更多
+
+| 元素                | 样式     | 禁用                             |
+| ------------------- | -------- | -------------------------------- |
+| 主操作（管理/查看） | 链接样式 | —                                |
+| `\|` 分隔线         | —        | —                                |
+| 次要操作            | 文字按钮 | `opacity-45 pointer-events-none` |
+| 状态操作            | 下拉按钮 | 同上                             |
+| "..." 更多          | Dropdown | —                                |
+
+### 6.2 水平对齐（硬约束）
+
+- `text-align: left`，**表头与表体均需显式声明**
+- 表头「操作」左边缘 X = 表体「详情」链接左边缘 X
+- ❌ 禁止操作列内容居中
+- ❌ 禁止只在 `.col-action` 上设 text-align（部分浏览器会被覆盖）
+
+### 6.3 操作列行为映射
+
+| 操作      | 触发     | 前置       | 二次确认           | 目标              | 返回行为                             |
+| --------- | -------- | ---------- | ------------------ | ----------------- | ------------------------------------ |
+| 查看/管理 | 点链接   | —          | 否                 | DetailPage        | 返回列表保持筛选+分页                |
+| 编辑      | 点按钮   | —          | 否                 | FormPage / Drawer | 保存成功返回列表 + Toast「保存成功」 |
+| 删除      | 点按钮   | 资源已停止 | 是（输入资源名称） | Dialog 确认       | 确认后刷新 + Toast「删除成功」       |
+| 更多      | Dropdown | —          | 按操作分级         | Dropdown 菜单     | 选择子操作                           |
+
+---
+
+## 7. Card 内对齐规则（硬约束）
+
+水平 padding 分层模型：
+
+- **Card.paddingX = 24px**：提供 Card 外缘 ↔ 非 Table 子组件的呼吸
+- **Table 中间列 padding = 12px**（左右 12+12=24，列间 24px）
+- **Table 首列 padding-left = 20px**（额外缩进）
+- **Table 末列 padding-right = 20px**
+
+| 组件                                                    | 水平 padding        | 起始 X         |
+| ------------------------------------------------------- | ------------------- | -------------- |
+| Card 白卡容器                                           | **24px**            | Card 外缘      |
+| PageHeader / ActionToolbar / BulkActionBar / Pagination | **0**               | Card 外缘 + 24 |
+| Table 中间列 td                                         | 12px                | —              |
+| Table 首列 td                                           | padding-left: 20px  | Card 外缘 + 44 |
+| Table 末列 td                                           | padding-right: 20px | Card 右缘 - 44 |
+
+### 禁止项
+
+- ❌ 在 PageHeader / ActionToolbar / Pagination 上重复设 paddingX（会与 Card.paddingX 叠加为 48px）
+- ❌ Table 中间列 padding 不为 12px
+- ❌ Table 首/末列 padding 不为 20px
+- ❌ 用 `px-4` `px-6` 字面量 — 用 `px-3 first:pl-5 last:pr-5`
+- ❌ 在 Card 与子组件间插入额外 paddingX 包裹层
+
+### 验证
+
+1. PageHeader / ActionToolbar / Pagination 起始 X = Card 左缘 + 24
+2. Table 首列（checkbox）内容 X = Card 左缘 + 44
+3. Table 相邻中间列内容间距 = 24
+
+---
+
+## 8. 状态-操作模式
+
+### 8.1 元规则
+
+- 每个状态必须定义操作可用性矩阵
+- 禁用样式统一 `opacity-45 pointer-events-none`
+- 混合状态时批量按钮禁用，hover 提示原因
+- 异步操作必须有 Toast + 列表刷新机制
+
+### 8.2 操作确认分级（uni-manager 强化）
+
+| 级别                 | 适用                 | 确认方式                           |
+| -------------------- | -------------------- | ---------------------------------- |
+| **一级**（可逆）     | 查看、编辑、远程连接 | 直接执行                           |
+| **二级**（影响状态） | 启动、停止、重启     | AlertDialog 确认                   |
+| **三级**（不可逆）   | 删除、释放、销毁     | AlertDialog + 输入**资源名称**确认 |
+
+### 8.3 异步反馈
+
+| 操作     | Toast 文案                | 列表         |
+| -------- | ------------------------- | ------------ |
+| 状态变更 | "操作已提交"              | 轮询状态     |
+| 删除     | "删除已提交"              | 移除行或刷新 |
+| 批量     | "批量操作已提交，共 N 条" | 轮询         |
+
+### 8.4 页面间导航交互
+
+- **操作列「查看/管理」** → DetailPage（页面跳转）；面包屑返回，保持筛选+分页
+- **操作列「编辑」** → FormPage 或 Drawer（跳转/侧滑）；保存/取消返回列表，保存附 Toast
+- **创建操作** → FormPage（页面跳转）；创建成功/取消返回列表
+- **搜索执行** → 当前列表（数据刷新）；重置到第 1 页
+- **筛选条件变更** → 当前列表（数据刷新）；重置到第 1 页，保持筛选条件
+- **um-topbar 切换租户/区域** → 当前列表 URL 改写 + 数据刷新（见 flows.md §1.E）
+
+---
+
+## 9. 嵌套约束
+
+| 父子关系                                                                                                    | 状态                         |
+| ----------------------------------------------------------------------------------------------------------- | ---------------------------- |
+| um-topbar → PageContainer → ContentWrapper → Card(白卡容器) → PageHeader/ActionToolbar/DataTable/Pagination | ALLOW                        |
+| ContentWrapper → 业务组件（无 Card 包裹）                                                                   | **FORBID**                   |
+| Card → Card                                                                                                 | **FORBID**（白卡单例）       |
+| ActionToolbar → SearchCombo                                                                                 | ALLOW                        |
+| CardGrid → ItemCard → CardActionBar                                                                         | ALLOW                        |
+| DataTable → Pagination                                                                                      | ALLOW                        |
+| DataTable → Form                                                                                            | **FORBID**（用 Drawer 触发） |
+| 自建 topbar                                                                                                 | **FORBID**（UM1）            |
+
+---
+
+## 10. 禁止项
+
+| 禁项                    | 原因                                |
+| ----------------------- | ----------------------------------- |
+| Form 直接出现在内容区   | 应通过 Dialog/Drawer/FormPage 触发  |
+| Chart 出现在标准列表    | 图表归属 Dashboard                  |
+| 内联编辑                | 编辑必须通过 Drawer/Dialog/FormPage |
+| 拖拽排序                | 表格数据为服务端排序                |
+| 无限滚动                | B2B 管理场景需精确分页              |
+| 悬浮操作栏              | 遮挡数据，可发现性差                |
+| 右键菜单                | 移动端不兼容                        |
+| `hr` / section-divider  | 间距通过 padding/margin 控制        |
+| 跨云资源不带 CloudBadge | 违反 UM3                            |
+
+---
+
+## 11. 列表页特有自检
+
+- [ ] PageHeader / ActionToolbar / DataTable / Pagination 嵌套结构正确
+- [ ] um-topbar 在框架层就位（UM1）
+- [ ] Card 内统一左右 padding 24px（除 Table 列）
+- [ ] 子类型组件正确（standard 用 DataTable，pure-card 用 CardGrid，multi-cloud 含 CloudBadge 列）
+- [ ] SearchCombo 位置正确（间距 20px）+ 圆角 2px（uni-manager 锐利风）
+- [ ] 高密度行高 36px（默认）/ 44px（双行）
+- [ ] 操作列水平对齐左对齐
+- [ ] 状态-操作矩阵在所有状态下正确
+- [ ] 二次确认按级别正确（启动/停止 = AlertDialog；删除 = 输入**资源名称**确认）
+- [ ] 批量操作按钮：选中 ≥1 行显示，混合状态禁用
+- [ ] 搜索：回车执行、维度切换清空、FilterTag 展示
+- [ ] 多云场景：搜索维度暴露"云厂商 / 区域 / 租户"
+- [ ] 跨云资源在主区有 CloudBadge 列（UM3）
+- [ ] 分页：保持筛选 + "共 N 条"
+- [ ] 边界：空数据 Empty + 加载 Loading + 错误 ErrorState

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

@@ -0,0 +1,165 @@
+# Page Types — 5 种标准页面类型（uni-manager）
+
+> AI 生成页面前**必须先识别页面类型**，再选择对应模式。本文档是 generation-flow.md Step 2 的核心输入。
+>
+> uni-manager 与 OpenTrek 五型同构，差异在于：**Dashboard 默认承担"Console Home"**、所有 L1/L2 页面**必须挂在 `um-topbar` 之下**。
+
+---
+
+## 1. 类型概览
+
+| 类型             | 用途                           | 核心组件                                        | 子文件                    |
+| ---------------- | ------------------------------ | ----------------------------------------------- | ------------------------- |
+| **ListPage**     | 资源集合的查询、筛选、批量操作 | DataTable / CardGrid + SearchCombo + Pagination | `list-page.md`            |
+| **DetailPage**   | 单个资源的完整信息展示         | Tabs + DescriptionList + ActionToolbar          | `detail-page.md`          |
+| **FormPage**     | 资源的创建 / 编辑              | Form(FieldGroup + Field) + SubmitBar            | `form-page.md`            |
+| **Dashboard**    | 控制台首页 / 数据概览与监控    | StatCard + Chart + Timeline                     | `dashboard.md`            |
+| **Dialog/Sheet** | 二次确认、快速操作             | AlertDialog / Dialog / Sheet                    | （见 components.md §3.1） |
+
+---
+
+## 2. 识别决策树（uni-manager 增强版）
+
+```text
+用户描述包含什么？
+├─ "控制台首页"/"工作台"/"Console Home" → Dashboard (Console Home 子类型)
+├─ "列表"/"表格"/"查询"/"检索"/"卡片管理" → ListPage
+├─ "详情"/"查看"/"信息"/"概览（单资源）" → DetailPage
+├─ "新建"/"创建"/"编辑"/"修改"/"复制" → FormPage
+├─ "仪表盘"/"概览大屏"/"监控"/"统计"/"资源分布" → Dashboard
+├─ "确认"/"删除二次确认"/"快速重命名" → Dialog
+└─ 不确定 → 优先 ListPage（最通用入口）
+```
+
+**优先级裁决**：
+
+- 出现"批量操作" → ListPage（即使页面看起来像 Dashboard）
+- 出现"步骤"/"分步" → FormPage（Wizard 变体）
+- 出现"对比" → DetailPage（对比型）
+- 出现"租户切换"/"区域切换" → 任何页面都要带 `um-topbar`（框架级，不影响类型判定）
+- 用户说"管理控制台"/"运维门户" 且未指明具体页 → **Dashboard (Console Home)**
+
+---
+
+## 3. 页面级别 (L1 / L2 / L0)
+
+| 级别   | 适用类型             | PageHeader 模式           | um-topbar | Sidebar  |
+| ------ | -------------------- | ------------------------- | --------- | -------- |
+| **L0** | Dialog / Sheet 内部  | 无 PageHeader             | 不渲染    | 无       |
+| **L1** | ListPage、Dashboard  | title 模式（仅标题）      | 必有      | 自动继承 |
+| **L2** | DetailPage、FormPage | breadcrumb 模式（含路径） | 必有      | 自动继承 |
+
+**框架自动继承**：L1 / L2 页面**不需要在 skill 中显式声明** Sidebar / um-topbar / PageHeader — 由 page-frame 统一管理。
+
+---
+
+## 4. Zone Map（区域命名约定）
+
+| Zone            | 位置          | 用途                                                                 |
+| --------------- | ------------- | -------------------------------------------------------------------- |
+| **um-topbar**   | 顶顶          | 全局 topbar：logo + 租户/区域切换 + 用户菜单（uni-manager 专属壳层） |
+| **header**      | um-topbar 下  | PageHeader（标题或面包屑 + 主操作）                                  |
+| **toolbar**     | header 下     | ActionToolbar（搜索 + 筛选 + 视图切换）                              |
+| **main**        | 中部主体      | 主要内容区（DataTable / Form / DescriptionList）                     |
+| **bulk-action** | main 浮于底部 | BulkActionBar（仅 ListPage 选中行时）                                |
+| **footer**      | 底部固定      | Pagination 或 SubmitBar                                              |
+| **sidebar**     | 左侧          | 全局导航（框架级，自动继承）                                         |
+| **aside**       | 右侧          | 侧边详情 / AI 面板（按 variant 启用）                                |
+
+**默认壳层结构**：`um-topbar(顶) + Sidebar(左) + Header(顶下) + Main(中)`。
+
+---
+
+## 5. Dashboard（含 Console Home）
+
+> **完整规范见 [`dashboard.md`](./dashboard.md)** —— Console Home / 资源概览 / 业务概览 / 监控概览 四子类型 + StatCard 下钻规则 + 跨云资产分布。
+
+---
+
+## 6. 页间流转
+
+> 单页内部规则在 §1-§5，本节是**跨页流转**视角。完整的"五条核心用户旅程"（A 资源查找 / B 创建 / C 异常 / D 批量 / E 上下文切换）见 [`flows.md`](../flows.md)。
+
+### 6.1 后台主流转图
+
+```text
+              ┌─────────────────────┐
+              │  um-topbar / Console│  ← Console Home 是登录默认
+              └──────────┬──────────┘
+                         │ 选择模块
+                         ▼
+┌──────────┐ 创建 ┌──────────┐ 查看  ┌────────────┐
+│ FormPage │◄────│ ListPage │──────►│ DetailPage │
+└────┬─────┘     └─────┬────┘       └─────┬──────┘
+     │ 成功            │                   │
+     └────────────────►│◄──────────────────┘
+                       │ 编辑                返回
+                       ▼
+              ┌──────────────┐
+              │   FormPage   │
+              └──────────────┘
+
+   Console Home ──下钻──► ListPage(预筛选)
+   um-topbar 切租户/区域 ──> 当前页 URL 改写 + 数据刷新
+```
+
+### 6.2 流转设计规则
+
+1. **导航深度 ≤ 4 层** — 超过即是信息架构问题
+2. **每层都有返回路径** — 面包屑 / 返回按钮 / Esc 快捷键
+3. **um-topbar 始终可见** — 仅"全屏编辑 / 大屏展示"模式可隐藏
+4. **状态保持** — 列表筛选条件、表单未保存内容必须保留；切换租户 / 区域时给出二次确认（见 flows.md §1.E）
+5. **快捷路径** — 高频操作建议提供 `Cmd+K` 入口
+6. **不创建死胡同** — 任何成功 / 失败页面都必须有"下一步"按钮
+7. **跨云资源在列表 / 详情中均要标注 CloudBadge** — 让用户始终知道"我在哪片云的哪个区域"
+
+### 6.3 资源生命周期
+
+| 阶段 | 发现     | 创建     | 配置       | 监控      | 变更     | 删除     |
+| ---- | -------- | -------- | ---------- | --------- | -------- | -------- |
+| 页面 | ListPage | FormPage | DetailPage | Dashboard | FormPage | Dialog   |
+| 动作 | 搜索定位 | 填写表单 | 查看明细   | 处置异常  | 编辑提交 | 二次确认 |
+
+> "资源" 泛指云上业务对象（实例 / 数据库 / 用户 / 工单 / 配置项 / 日志…）。
+
+### 6.4 CRUD 流转速查
+
+| 意图       | 关键词         | 目标页                       | 完成后          |
+| ---------- | -------------- | ---------------------------- | --------------- |
+| 看首页     | 控制台/工作台  | Dashboard (Console Home)     | —               |
+| 查看列表   | 列表/查询/检索 | ListPage                     | —               |
+| 查看详情   | 详情/查看/信息 | DetailPage                   | 可返回列表      |
+| 新建       | 新建/创建/新增 | FormPage(新建)               | 保存后返回列表  |
+| 编辑       | 编辑/修改      | FormPage(编辑) 或 Drawer     | 保存后返回原页  |
+| 删除       | 删除/移除      | Dialog (输入名称确认)        | 确认后刷新列表  |
+| 复制       | 复制/克隆      | FormPage(复制新建)           | 保存后返回列表  |
+| 切换上下文 | 切租户/切区域  | um-topbar 触发 + AlertDialog | URL 改写 + 刷新 |
+
+---
+
+## 7. 通用结构铁律（所有页面类型共享）
+
+1. **um-topbar → PageContainer → ContentWrapper → Card(白卡容器) → 业务组件**
+   - 业务组件**必须**经白卡容器包裹，禁止直接放在 ContentWrapper 内
+2. **Card(白卡容器) 不可嵌套** — 白卡是单例
+3. **页头不可重复** — 子页面禁止自建 header / topbar，PageHeader / um-topbar 由框架管控（UM1 / UM2）
+4. **不在内容区直接放 Form 整体** — 必须用 FieldGroup + Field（详见 boundaries.md C7）
+5. **不在 ListPage / DetailPage 内嵌 Chart 整体** — 图表归属 Dashboard
+6. **不在 FormPage / DetailPage 内嵌 DataTable 整体** — 关联数据通过 Tabs / Drawer 组织
+7. **跨云资源在 ListPage / DetailPage 主区必须有 CloudBadge** — 不可只在 Tooltip 中提示（UM3）
+
+---
+
+## 8. 类型选择自检
+
+完成识别后必须能回答：
+
+- [ ] 这是 L0 / L1 / L2 哪一级？
+- [ ] PageHeader 用 title 还是 breadcrumb 模式？
+- [ ] um-topbar 是否就位（L1/L2 必须）
+- [ ] Main 区核心组件是什么？（DataTable / DescriptionList / FieldGroup）
+- [ ] 是否需要 toolbar / bulk-action / footer Zone？
+- [ ] 跨云资源是否带 CloudBadge？
+- [ ] 错位风险：是否在不该出现的页面类型里出现了 Form / DataTable / Chart？
+
+类型识别错误 = 后续所有约束都错位。**错则回到 Step 1 重判。**

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

@@ -0,0 +1,106 @@
+# 设计哲学 · Uni-Manager
+
+> 回答**"为什么这么做"**。具体规则见 [boundaries.md](./boundaries.md) / [foundations.md](./foundations.md)。
+
+---
+
+## 1. 我们是谁
+
+Uni-Manager 是面向**专有云 / 混合云 / 多租户管控平台**的设计语言。用户是云平台管理员、运维工程师、SRE、合规审计员 — 他们的工作环境特征：
+
+- 每天面对来自多个云厂商（阿里云 / 腾讯云 / AWS / 私有 IDC）的资源
+- 在多个租户 / 项目 / 区域上下文之间频繁切换
+- 操作影响面大、可见性要求高、可审计可回滚
+- 屏幕长期保持高密度信息驻留（一屏看尽几十条资源）
+
+**核心主张**：**让多云、多租户、多区域的复杂性变成"可枚举、可预期、可审计"的统一管理体验**。
+
+**三条不可让步的底层信念**：
+
+1. 设计是降低认知负荷的手段，不是展示创意的舞台
+2. 每一个视觉元素必须承载功能价值或信息语义
+3. **一致性是云管平台的生命线** — 不同云、不同区域、不同模块都应让用户产生"同一个工具"的感受
+
+---
+
+## 2. 四大设计原则（按优先级降序）
+
+冲突时裁决顺序：**Safety > Predictability > Clarity > Efficiency**。
+
+### P1 · Safety — 安全防护（最高优先级）
+
+> 关键资源操作必须有防护栏。云管平台一次误操作可能影响整片资源。
+
+- 危险操作（删除 / 释放 / 停机）二次确认 → `AlertDialog variant="destructive"` + 输入资源名称确认
+- 跨租户 / 跨区域操作显式提示（Banner 或 Drawer 顶部）
+- 表单未保存离开提示 → `beforeunload`
+- 无权限操作隐藏或禁用 → `usePermission`
+- 操作记录可查（OperationLog 全局可访问）
+
+**评判**：一次误操作的最大损失是否被框定在可恢复的范围内？
+
+### P2 · Predictability — 可预期性
+
+> 用户不应该猜测"点击这个会发生什么"。云管面对几十种资源类型，一致性是底线。
+
+- 同类资源使用同一套页面模板（List / Detail / Form）
+- 同类操作出现在固定位置（Zone Map + 一致性三件套，见 brand.md §3.2）
+- 操作后 ≤ 200ms 给出反馈
+- 跨云资源操作的语义统一（"释放" 在所有云厂商页面下都对应同一动作）
+
+**评判**：用户在 A 云的实例页学会的操作，能否无障碍迁移到 B 云的实例页？
+
+### P3 · Clarity — 清晰优先
+
+> 界面的首要职责是传递信息，不是展示装饰。多云场景"看清归属"比"看着漂亮"重要。
+
+- 文字对比度 ≥ 4.5:1（WCAG AA） — 走 `text-foreground` on `bg-background`
+- 状态语义 = **颜色 + 图标 + 文字**三重传达 — `Badge variant` + Icon + Label
+- 跨云资源 **必须** 用 cloud-provider Badge 标注归属
+- 资源 ID / Hash 一律 `font-mono` + 复制按钮
+- 3 级信息层级：标题 / 正文 / 辅助
+
+**评判**：新用户是否能在 3 秒内识别"这条记录属于哪朵云、哪个区域、什么状态"？
+
+### P4 · Efficiency — 效率至上
+
+> 运维每天面对数百次重复操作，减少一次点击就是减少一次出错机会。
+
+- 高频操作 ≤ 2 次点击可达
+- 支持多选 + 批量操作 → `BulkActionBar` + Checkbox 列
+- 列表页必须提供搜索入口 → `SearchCombo` / `FilterBar`
+- 筛选条件持久化（URL Params + localStorage）
+- 上下文切换器（租户 / 项目 / 区域）固定在 um-topbar，全局可达
+
+**评判**：完成核心任务的步骤数是否为同类产品最少？
+
+---
+
+## 3. 原则冲突示例
+
+| 场景                           | 候选                                             | 选  | 理由                        |
+| ------------------------------ | ------------------------------------------------ | --- | --------------------------- |
+| 释放实例要不要二次确认？       | A. 直接释放<br>B. AlertDialog + 输入名称确认     | B   | Safety > Efficiency         |
+| 跨租户切换要不要确认？         | A. 静默切换<br>B. 显式 Banner 提示当前租户已切换 | B   | Safety > Efficiency         |
+| 多云资源用一个表格还是分 Tab？ | A. 按云厂商分 Tab<br>B. 单表格 + cloud Badge 列  | B   | Predictability + Efficiency |
+| 状态用什么表达？               | A. 仅颜色<br>B. 颜色 + 图标 + 文字               | B   | Clarity > Efficiency        |
+
+---
+
+## 4. 决策框架（套用顺序）
+
+1. Safety > Predictability > Clarity > Efficiency
+2. 业务正确性 > 视觉美观
+3. **一致性 > 创新性**（云管底线）
+4. 可访问性 > 视觉丰富度
+5. 性能 > 动效丰富度
+
+---
+
+文件分工：
+
+- **philosophy.md** — 为什么（含云管特殊主张）
+- **boundaries.md** — 不能做什么（含 UM1-UM3 专有云一致性硬约束）
+- **foundations.md** — 用什么 token（hybridcloud 真值）
+- **patterns/** — 具体页面怎么搭（含 Console Home）
+- **brand.md** — 品牌画像 + 一致性三件套