@teamix-evo/skills 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamix-evo/skills",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Skills (AI IDE capabilities) for Teamix Evo",
   "type": "module",
   "files": [

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

@@ -34,13 +34,13 @@ description: |
 
 ## 2. 页面类型索引
 
-| 类型 ID                                                                                           | 中文名 | 核心特征                               | 子技能目录             | 状态   |
-| ------------------------------------------------------------------------------------------------- | ------ | -------------------------------------- | ---------------------- | ------ |
-| ListPage                                                                                          | 列表页 | 多条结构化数据 + 搜索/筛选 + 分页      | `./pages/list-page/`   | 已就绪 |
-| DetailPage                                                                                        | 详情页 | 单条记录只读展示 + 描述列表 + 操作按钮 | `./pages/detail-page/` | 已就绪 |
-| FormPage                                                                                          | 表单页 | 用户输入数据 + 字段校验 + 提交         | `./pages/form-page/`   | 已就绪 |
-| Dashboard                                                                                         | 仪表板 | 数据可视化 / 统计聚合                  | —                      | 待开发 |
-| WizardPage / ResultPage / ExceptionPage / WorkspacePage / KanbanPage / WelcomePage / OverviewPage | —      | 见 patterns/page-types.md              | —                      | 待开发 |
+| 类型 ID                                                                                           | 中文名 | 核心特征                               | 子技能目录                | 状态   |
+| ------------------------------------------------------------------------------------------------- | ------ | -------------------------------------- | ------------------------- | ------ |
+| ListPage                                                                                          | 列表页 | 多条结构化数据 + 搜索/筛选 + 分页      | `./pages/list-page/`      | 已就绪 |
+| DetailPage                                                                                        | 详情页 | 单条记录只读展示 + 描述列表 + 操作按钮 | `./pages/detail-page/`    | 已就绪 |
+| FormPage                                                                                          | 表单页 | 用户输入数据 + 字段校验 + 提交         | `./pages/form-page/`      | 已就绪 |
+| Dashboard                                                                                         | 仪表板 | 数据可视化 / 统计聚合                  | `./pages/dashboard-page/` | 已就绪 |
+| WizardPage / ResultPage / ExceptionPage / WorkspacePage / KanbanPage / WelcomePage / OverviewPage | —      | 见 patterns/page-types.md              | —                         | 待开发 |
 
 > 决策树、Zone Map、易混点速查、子类型识别详见 [patterns/page-types.md](./patterns/page-types.md)。
 
@@ -50,21 +50,22 @@ description: |
 
 > 📖 **读取顺序**：生成/翻新页面时，**主入口 = `./pages/{type}-page/`**（完整规范与布局硬约束）；`./patterns/{type}-page.md` 仅作为**索引概览**用于快速判断子类型。
 
-| 子技能 ID   | 名称       | 子类型数 | 入口文件                                                                                                                                      |
-| ----------- | ---------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| list-page   | 列表页技能 | 6        | **生成入口**：[`./pages/list-page/`](./pages/list-page/) ← 完整规范 ｜ 索引概览：[`./patterns/list-page.md`](./patterns/list-page.md)         |
-| detail-page | 详情页技能 | 2        | **生成入口**：[`./pages/detail-page/`](./pages/detail-page/) ← 完整规范 ｜ 索引概览：[`./patterns/detail-page.md`](./patterns/detail-page.md) |
-| form-page   | 表单页技能 | 3        | **生成入口**：[`./pages/form-page/`](./pages/form-page/) ← 完整规范 ｜ 索引概览：[`./patterns/form-page.md`](./patterns/form-page.md)         |
+| 子技能 ID      | 名称       | 子类型数 | 入口文件                                                                                                                                        |
+| -------------- | ---------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| list-page      | 列表页技能 | 6        | **生成入口**：[`./pages/list-page/`](./pages/list-page/) ← 完整规范 ｜ 索引概览：[`./patterns/list-page.md`](./patterns/list-page.md)           |
+| detail-page    | 详情页技能 | 2        | **生成入口**：[`./pages/detail-page/`](./pages/detail-page/) ← 完整规范 ｜ 索引概览：[`./patterns/detail-page.md`](./patterns/detail-page.md)   |
+| form-page      | 表单页技能 | 3        | **生成入口**：[`./pages/form-page/`](./pages/form-page/) ← 完整规范 ｜ 索引概览：[`./patterns/form-page.md`](./patterns/form-page.md)           |
+| dashboard-page | 仪表板技能 | 3        | **生成入口**：[`./pages/dashboard-page/`](./pages/dashboard-page/) ← 完整规范 ｜ 索引概览：[`./patterns/dashboard.md`](./patterns/dashboard.md) |
 
 ### 关键词 → 子技能路由
 
-| 关键词                                 | 路由到                                                                     |
-| -------------------------------------- | -------------------------------------------------------------------------- |
-| "列表"/"表格"/"查询"/"检索"/"数据列表" | → `./pages/list-page/`                                                     |
-| "详情"/"查看"/"信息"/"配置详情"        | → `./pages/detail-page/`                                                   |
-| "表单"/"创建"/"编辑"/"填写"/"新建"     | → `./pages/form-page/`                                                     |
-| "仪表板"/"统计"/"分析"/"指标"          | → [`./patterns/dashboard.md`](./patterns/dashboard.md)（完整子技能待开发） |
-| 其他通用问题                           | 根技能 + `./rules/` 索引                                                   |
+| 关键词                                             | 路由到                                                               |
+| -------------------------------------------------- | -------------------------------------------------------------------- |
+| "列表"/"表格"/"查询"/"检索"/"数据列表"             | → `./pages/list-page/`                                               |
+| "详情"/"查看"/"信息"/"配置详情"                    | → `./pages/detail-page/`                                             |
+| "表单"/"创建"/"编辑"/"填写"/"新建"                 | → `./pages/form-page/`                                               |
+| "仪表板"/"统计"/"分析"/"指标"/"监控"/"概览"/"观测" | → [`./pages/dashboard-page/`](./pages/dashboard-page/)（完整子技能） |
+| 其他通用问题                                       | 根技能 + `./rules/` 索引                                             |
 
 ### 高频业务场景速查
 
@@ -220,6 +221,13 @@ description: |
 4. **语义清晰**：使用 @teamix-evo/ui 的 variant 体系
 5. **可追溯**：HTML 注释中标注拼装来源和决策原因
 
+### 6.6 组件尺寸策略
+
+- **默认规则**：无特殊说明时，所有组件一律使用 `default` 尺寸（不主动传 `size='sm'`）
+- **允许 sm 的场景**：仅当 `component-specs.json` 或子技能 patterns 文档中**显式指定**了 `size='sm'` 时才使用（如 Pagination 的 SelectTrigger、Dashboard 工具栏按钮、卡片内 Tag）
+- **判定优先级**：组件文档（component-specs.json） > 页面子技能（patterns） > 默认（default）
+- **典型误用**：AI 不得因“看起来小一点”而自行决定用 `sm`；截图中的视觉尺寸通过 Token 与组件默认值对齐，不走 size prop 降级
+
 ---
 
 ## 7. 与 code-opentrek skill 协作

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

@@ -0,0 +1,429 @@
+---
+name: page-rule-dashboard
+parent: page-rule-system
+description: >
+  仪表板页(PageType: Dashboard)完整规则。涵盖通用规则（时间工具栏/统计卡片/图表面板/布局网格）+
+  子类型变体（overview 总览/metric-detail 明细指标/realtime 实时监控）。
+  OpenTrek 业务规则路由到 patterns/dashboard-opentrek.md（指标监控/观测面板/导航卡片）。
+  三层参数化架构（v7.0）：元规则（固化）+ 产品配置（灵活）+ 模式细节。
+  触发：需要仪表板规则、匹配仪表板模板、生成仪表板页面、指标监控、数据概览。
+  Version: 1.0
+---
+
+# 仪表板页路由规则
+
+## 1. 类型定义
+
+**页面类型**: Dashboard
+**核心特征**: 数据可视化 / 统计聚合 / 指标监控 / 趋势分析
+**识别条件**: 页面以图表（Chart）+ 统计卡片（StatCard）+ 时间范围选择器为核心，无数据编辑操作
+
+---
+
+## 2. 子类型路由表
+
+| 子类型ID | 识别关键词 | 路由到 | 布局模式 | 核心组件 |
+|----------|-----------|--------|----------|----------|
+| overview | "概览"/"总览"/"监控首页"/"仪表板"/"指标监控" | → 本文件 §6 | 模式E-GRID | TimeToolbar + StatCardRow + ChartPanel(multi) |
+| metric-detail | "观测"/"指标详情"/"明细指标"/"性能监控" | → 本文件 §7 | 模式E-GRID | Breadcrumb + FilterBar + ChartGrid |
+| realtime | "实时"/"实时监控"/"实时数据" | → 本文件 §8 | 模式E-STREAM | TimeToolbar + LiveChart + AlertTimeline |
+
+### 路由判定优先级
+
+1. 含"观测"/"明细指标"/"性能监控"关键词 → metric-detail
+2. 含"实时"/"实时监控"关键词 → realtime
+3. 其他仪表板场景 → overview（默认）
+
+---
+
+## 3. 通用属性模型
+
+| 属性 | 值 | 说明 |
+|------|-----|------|
+| layout.type | SINGLE_COL | 仪表板通常为全宽单列，内部使用 Grid 布局 |
+| layout.frame | L1 / L2 | 总览为 L1（无面包屑），明细为 L2（带面包屑） |
+| responsive | Desktop ≥1200px(完整), Tablet 768-1199px(2列→1列), Mobile <768px(不推荐) |
+| refresh | 支持手动刷新 + 可选自动刷新（30s/60s/5min） |
+
+> **框架组件自动继承**：Sidebar 的存在性由 `rules/page-frame.json` 统一管理。
+
+---
+
+## 4. 组件推荐
+
+### 必需组件
+
+| 组件 | 引用 | 层级 | 位置 | 说明 |
+|------|------|------|------|------|
+| PageHeader | `components/page-header` | ORGANISM | top | 页面标题(18px/medium) + 可选描述 |
+| TimeToolbar | 自定义组合 | ORGANISM | top-right | 时间粒度 + 时间范围 + 刷新按钮 |
+| StatCard | `components/statistic` + `components/card` | MOLECULAR | section | 核心指标数值卡片 |
+
+### 可选组件
+
+| 组件 | 引用 | 条件 | 说明 |
+|------|------|------|------|
+| Breadcrumb | `components/breadcrumb` | L2 级页面 | 面包屑导航 |
+| Select | `components/select` | 有筛选维度 | 维度筛选下拉 |
+| ToggleGroup | `components/toggle-group` | 切换数据视角 | 调用量/Tokens 切换 |
+| Tooltip | `components/tooltip` | 指标说明 | ⓘ 悬浮说明 |
+| Badge | `components/badge` | 状态指示 | 颜色圆点 |
+
+### 禁止组件
+
+| 组件 | 约束 | 原因 |
+|------|------|------|
+| DataTable(ORGANISM) | 禁止作为主体 | 表格是 ListPage 职责 |
+| Form(ORGANISM) | 禁止 | 仪表板为只读，编辑跳转 FormPage |
+| 内联编辑 | 禁止 | 仪表板数据不可编辑 |
+| Pagination | 禁止 | 仪表板无分页概念 |
+
+---
+
+## 5. 通用规则
+
+### 5.1 TimeToolbar（时间工具栏）
+
+仪表板核心交互组件，控制所有图表的时间范围。
+
+#### 结构
+
+```
+┌────────────────────────────────────────────────────────────────────┐
+│ [分钟|小时|天]  [今日|近7日|近30日|近1年|自定义]  [↻ 刷新]           │
+└────────────────────────────────────────────────────────────────────┘
+```
+
+#### 规范
+
+| 元素 | 组件 | 样式 | 说明 |
+|------|------|------|------|
+| 时间粒度 | `ToggleGroup`(type='single') | variant='outline', size='sm' | 分钟/小时/天 互斥切换 |
+| 时间范围 | `ToggleGroup`(type='single') | variant='outline', size='sm', 选中项高亮 `bg-primary text-primary-foreground` | 近7日/近30日/近1年/自定义 |
+| 自定义 | `DateRangePicker` | 选择"自定义"后展开 DateRangePicker | 精确日期区间 |
+| 刷新 | `Button`(variant='outline', size='sm') | icon: RefreshCw | 手动刷新所有图表 |
+
+#### 行为
+
+| 规则 | 说明 |
+|------|------|
+| 联动 | 切换时间范围/粒度后，页面内所有图表统一刷新 |
+| URL 持久化 | 时间参数同步到 URL searchParams（granularity / range / start / end） |
+| 默认值 | 粒度=天，范围=近7日 |
+| 位置 | 与 PageHeader 同行右侧对齐，或 PageHeader 下方独立一行 |
+
+### 5.2 StatCard（统计指标卡片）
+
+#### 结构
+
+```
+┌─────────────────────────────┐
+│ ● 标题标签          累计指标   │
+│                              │
+│   128                        │
+│   空间累计智能体数 ⓘ           │
+│   ┄┄┄┄ (sparkline)          │
+└─────────────────────────────┘
+```
+
+#### 规范
+
+| 元素 | 组件/样式 | 说明 |
+|------|-----------|------|
+| 容器 | `Card` + `CardContent`，padding 16px 20px | 白卡容器 |
+| 色彩圆点 | 8px 圆形，色值按 `chart-1` ~ `chart-6` 顺序消费 | 指标标识色 |
+| 标签 | `text-xs text-muted-foreground` + `Badge`(variant='secondary') | "累计指标" 等 |
+| 数值 | `Statistic` → value，`text-3xl font-bold tabular-nums` | 核心数字 |
+| 描述 | `text-sm text-muted-foreground` | 指标名称 |
+| Tooltip | `Tooltip` 包裹 ⓘ 图标 | 指标解释 |
+| Sparkline | 迷你面积图，高度 32px，无坐标轴 | 趋势缩略 |
+
+#### 排列
+
+| 数量 | 布局 | 说明 |
+|------|------|------|
+| 3-4 个 | 1 行 × 3-4 列 | `grid-cols-3` 或 `grid-cols-4` |
+| 5-6 个 | 1 行 × 5-6 列（可滚动） | `grid-cols-6`，窄屏横滚 |
+| 7-8 个 | 2 行 × 4 列 | `grid-cols-4 grid-rows-2` |
+| > 8 个 | 禁止 | 超过 8 个改用 ListPage 或分 Tab |
+
+### 5.3 ChartPanel（图表面板）
+
+#### 结构
+
+```
+┌─────────────────────────────────────────────────────┐
+│ 📈 Section Title                   [附加操作/时间说明] │
+│ ┌─────────────────────────────────────────────────┐ │
+│ │              Chart Area                          │ │
+│ │         (Area/Line/Bar/Pie/Donut)               │ │
+│ │                                                  │ │
+│ └─────────────────────────────────────────────────┘ │
+│ [Legend]                                             │
+└─────────────────────────────────────────────────────┘
+```
+
+#### 规范
+
+| 元素 | 样式 | 说明 |
+|------|------|------|
+| Section 容器 | `Card` + `CardHeader` + `CardContent` | 独立白卡 |
+| Section 标题 | icon(20px) + `text-base font-medium` | 左侧图标 + 标题文本 |
+| 副文本 | `text-xs text-muted-foreground` 右侧对齐 | "近7天统计数据" |
+| 图表高度 | 最小 200px，推荐 280-320px | 保证可读性 |
+| Legend | 图表下方或右侧，圆点 + 文本 + 数值 | 颜色标识 |
+
+#### 图表色彩规则【硬约束】
+
+| 规则 | 说明 |
+|------|------|
+| 色彩顺序 | 严格按 `chart-1` → `chart-2` → `chart-3` → ... 顺序消费 |
+| 禁止 | 禁止硬编码 hex/rgb 色值，必须使用 `hsl(var(--chart-N))` |
+| 对比色 | 同一图表中相邻系列需有足够对比度 |
+| 面积填充 | 填充色使用 `hsl(var(--chart-N) / 0.1~0.3)` 半透明 |
+
+### 5.4 布局网格
+
+仪表板使用 CSS Grid 布局，内容区在白卡容器内：
+
+```css
+.dashboard-grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+}
+```
+
+| 布局模式 | CSS Grid | 适用场景 |
+|----------|----------|----------|
+| 全宽单列 | `grid-cols-1` | 宽图表（趋势线） |
+| 双列 | `grid-cols-2` | 趋势 + 分布并排 |
+| 三列 | `grid-cols-3` | 多维度明细指标 |
+| 混合 | `grid-cols-3` + `col-span-2` | 主图表占 2/3 + 辅助图 1/3 |
+
+### 5.5 Section 分区规范
+
+仪表板页面按功能分区，每个 Section 独立成卡：
+
+| 规则 | 说明 |
+|------|------|
+| Section 间距 | gap = 16px（同 grid gap） |
+| Section 标题 | 左侧 icon(20px, text-muted-foreground) + 标题(text-base font-medium) |
+| Section 卡片 | 使用 `Card`（shadow-sm, border-radius: radius-lg），无 border |
+| 内部 padding | Card padding: 20px（与列表页一致） |
+
+---
+
+## 6. overview 子类型（总览仪表板）
+
+> 典型页面：指标监控首页、概览（L1 级，无面包屑）
+
+### 布局骨架
+
+```
+┌─ PageShell ──────────────────────────────────────────────────────────────┐
+│ sidebar: Sidebar                                                          │
+│ ┌─ ContentCard ──────────────────────────────────────────────────────┐   │
+│ │ PageHeader: "指标监控"                                                │   │
+│ │   Description: "应用层 · 资产层 · 模型服务层 — 全方位监控系统运行态势"       │   │
+│ │                                                                    │   │
+│ │ TimeToolbar (右侧对齐):                                             │   │
+│ │   [分钟|小时|天]  [近7日|近30日|近1年|自定义]  [↻ 刷新]                  │   │
+│ │                                                                    │   │
+│ │ NavigationCards (可选, flex row):                                   │   │
+│ │   ┌─NavCard─┐  ┌─NavCard─┐  ┌─NavCard─┐                           │   │
+│ │   │🔷应用层 →│  │🔷资产层 →│  │🔷模型服务层→│                         │   │
+│ │   └─────────┘  └─────────┘  └──────────┘                           │   │
+│ │                                                                    │   │
+│ │ Section: 总览指标                                                    │   │
+│ │   StatCardRow (grid-cols-6):                                       │   │
+│ │   [128][356][89][12.6K][42.9K][1.1M] + sparklines                  │   │
+│ │                                                                    │   │
+│ │ Section Grid (grid-cols-2):                                        │   │
+│ │   ┌─ 调用趋势(col-span-2/3) ─┐  ┌─ 类型分布(col-span-1/3) ─┐     │   │
+│ │   │   Area/Line Chart        │  │   Donut Chart + Legend     │     │   │
+│ │   └──────────────────────────┘  └───────────────────────────┘     │   │
+│ └────────────────────────────────────────────────────────────────────┘   │
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+### NavigationCard 规范
+
+| 元素 | 样式 | 说明 |
+|------|------|------|
+| 容器 | `Card` + hover:shadow-md + cursor-pointer | 可点击卡片 |
+| 图标 | 40px 圆形图标容器，`bg-primary/10` 背景 | 分类标识 |
+| 标题 | `text-base font-medium` | 分类名称 |
+| 描述 | `text-sm text-muted-foreground` | 一句话说明 |
+| 箭头 | `→` icon，右侧对齐，`text-muted-foreground` | 导航指示 |
+| 选中态 | `ring-2 ring-primary` 蓝色边框高亮 | 当前选中分类 |
+| 数量 | 3-5 个 | 超过 5 个使用 Tabs 替代 |
+
+### overview 验证清单
+
+| 验证项 | 检查点 | 目标 |
+|--------|--------|------|
+| TimeToolbar | 粒度+范围+刷新 三部分完整 | 正确 |
+| StatCard | 数量 ≤ 8，使用 chart-N 色彩 | 正确 |
+| 图表色 | 无硬编码 hex，使用 hsl(var(--chart-N)) | 100% |
+| 布局 | Grid 布局，gap=16px | 正确 |
+| NavigationCard | 可点击，hover 有反馈 | 正确 |
+| URL 持久化 | 时间参数同步 URL | 正确 |
+
+---
+
+## 7. metric-detail 子类型（明细指标）
+
+> 典型页面：知识库 > 产品文档库 - 观测（L2 级，有面包屑）
+
+### 布局骨架
+
+```
+┌─ PageShell ──────────────────────────────────────────────────────────────┐
+│ sidebar: Sidebar                                                          │
+│ ┌─ ContentCard ──────────────────────────────────────────────────────┐   │
+│ │ Breadcrumb: 知识库 > 产品文档库 - 观测                                  │   │
+│ │                                                                    │   │
+│ │ FilterBar + TimeToolbar (同行):                                    │   │
+│ │   [调用方式▼] [调用空间▼]    [分钟|小时|天] [近7日|...] [↻刷新]         │   │
+│ │                                                                    │   │
+│ │ Section: 明细指标                                 "近7日统计数据"      │   │
+│ │   ChartGrid (grid-cols-3):                                         │   │
+│ │   ┌─ChartCard─┐ ┌─ChartCard─┐ ┌─ChartCard─┐                      │   │
+│ │   │ 调用量     │ │ 成功率     │ │ 平均耗时    │                      │   │
+│ │   │ AreaChart  │ │ AreaChart  │ │ AreaChart  │                      │   │
+│ │   └───────────┘ └───────────┘ └───────────┘                      │   │
+│ │   ┌─ChartCard─┐ ┌─ChartCard─┐ ┌─ChartCard─┐                      │   │
+│ │   │ 解析tokens│ │ 索引tokens │ │ 检索tokens │                      │   │
+│ │   │ AreaChart  │ │ AreaChart  │ │ AreaChart  │                      │   │
+│ │   └───────────┘ └───────────┘ └───────────┘                      │   │
+│ └────────────────────────────────────────────────────────────────────┘   │
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+### ChartCard 规范
+
+| 元素 | 样式 | 说明 |
+|------|------|------|
+| 容器 | `Card`(shadow-sm, padding 16px 20px) | 独立白卡 |
+| 标题 | `text-sm font-medium` + 可选 `Tooltip`(ⓘ) | 指标名 |
+| 图表 | 面积图（Area Chart），高度 160-200px | 时序趋势 |
+| X轴 | 日期，格式 `M/D`，`text-xs text-muted-foreground` | 时间轴 |
+| Y轴 | 数值，自适应刻度，`text-xs text-muted-foreground` | 量度轴 |
+| 填充色 | `hsl(var(--chart-N) / 0.2)` 半透明面积 | 与线色同系列 |
+| 线色 | `hsl(var(--chart-N))` 实线 2px | 趋势线 |
+
+### ChartGrid 布局
+
+| 规则 | 说明 |
+|------|------|
+| 列数 | 默认 `grid-cols-3`（≥1200px），平板 `grid-cols-2`，手机 `grid-cols-1` |
+| 行数 | 自适应，通常 2-3 行 |
+| 间距 | gap = 16px |
+| 图表数量 | 3-12 个，超过 12 个需分 Tab/分页 |
+
+### metric-detail 验证清单
+
+| 验证项 | 检查点 | 目标 |
+|--------|--------|------|
+| Breadcrumb | L2 级面包屑正确 | 正确 |
+| FilterBar | 筛选下拉 + TimeToolbar 同行 | 正确 |
+| ChartGrid | 3列网格，均匀分布 | 正确 |
+| ChartCard | 标题 + 图表 + 正确色彩 | 正确 |
+| 响应式 | 窄屏自动降列 | 正确 |
+
+---
+
+## 8. realtime 子类型（实时监控）
+
+> 典型页面：实时调用监控、实时告警（当前截图未覆盖，预留）
+
+### 核心差异
+
+| 维度 | overview | realtime |
+|------|----------|----------|
+| 数据更新 | 手动/定时刷新 | **自动推送（WebSocket/SSE）** |
+| 图表类型 | 静态图表 | **滚动时序图（最近 N 分钟）** |
+| 告警 | 无 | **实时告警 Timeline** |
+| 自动刷新 | 可选 | **默认开启（5s/10s/30s）** |
+
+> 完整规范待后续截图补充。
+
+---
+
+## 9. 嵌套约束
+
+| 父子关系 | 状态 | 说明 |
+|----------|------|------|
+| PageContainer → ContentWrapper | ALLOW | 右侧内容大容器 |
+| ContentWrapper → Card(白卡容器) | ALLOW | 白色卡片容器 |
+| Card(白卡容器) → PageHeader | ALLOW | 标准结构 |
+| Card(白卡容器) → TimeToolbar | ALLOW | 时间控制栏 |
+| Card(白卡容器) → StatCardRow | ALLOW | 统计指标行 |
+| Card(白卡容器) → ChartPanel | ALLOW | 图表面板 |
+| Card(白卡容器) → NavigationCards | ALLOW | 导航卡片行 |
+| Card(白卡容器) → DataTable | WARN | 仅辅助表格（如 top-N），非主体 |
+| Card(白卡容器) → Form | FORBID | 仪表板只读 |
+| ChartPanel → ChartPanel | FORBID | 图表面板禁止嵌套 |
+
+---
+
+## 10. 页面级组件清单
+
+| 区域 | UI 组件库引用 | 用途 |
+|------|--------------|------|
+| 页面框架 | `components/page-shell` → `PageShell` | L1/L2 级页面壳 |
+| 侧边导航 | `components/sidebar` → `Sidebar` | 左侧导航 |
+| 白卡容器 | `components/card` → `Card` + `CardContent` + `CardHeader` | 内容区白色容器 |
+| 页面标题 | `components/page-header` → `PageHeader` + `PageHeaderHeading` + `PageHeaderDescription` | 标题+描述 |
+| 面包屑 | `components/breadcrumb` → `Breadcrumb` + `BreadcrumbItem` + `BreadcrumbLink` | L2 导航 |
+| 统计数值 | `components/statistic` → `Statistic` | 核心指标数值 |
+| 时间粒度 | `components/toggle-group` → `ToggleGroup`(type='single') + `ToggleGroupItem` | 分钟/小时/天 |
+| 时间范围 | `components/toggle-group` → `ToggleGroup`(type='single') + `ToggleGroupItem` | 近7日/近30日/... |
+| 日期范围 | `components/date-picker` → `DateRangePicker` | 自定义日期 |
+| 刷新按钮 | `components/button` → `Button`(variant='outline', size='sm') | 手动刷新 |
+| 下拉筛选 | `components/select` → `Select` + `SelectTrigger` + `SelectContent` + `SelectItem` | 维度筛选 |
+| 视角切换 | `components/toggle-group` → `ToggleGroup` + `ToggleGroupItem` | 调用量/Tokens |
+| 提示 | `components/tooltip` → `Tooltip` + `TooltipTrigger` + `TooltipContent` | ⓘ 指标说明 |
+| 状态徽章 | `components/badge` → `Badge` | 色彩圆点 |
+
+> 图表组件：使用 Recharts（或项目约定的图表库），非 UI 组件库原子组件。图表色彩必须引用 CSS 变量 `--chart-1` ~ `--chart-6`。
+
+---
+
+## 11. 规范引用
+
+- **读取路径**：见根技能 `../../SKILL.md` §4.5 四阶段读取决策树
+  - 阶段①：`page-types.json` + `business-mapping.json`
+  - 阶段②：`page-frame.json` + `layout-rules.json`；OpenTrek 业务规则追加读取 `patterns/dashboard-opentrek.md`
+  - 阶段③（生成 HTML 时）：`design-tokens.json` + `design-tokens.css` + `styling.json` + `../../boundaries.md` + `../../foundations.md`
+
+> `rules/design-tokens.css` 是设计 Token 的唯一真相源（:root 变量定义），图表色 `--chart-1` ~ `--chart-6` 定义在其中。
+
+---
+
+## 12. 验证清单 (Validation Checklist)
+
+> **通用检查项**（布局分区/颜色Token/间距/字体/尺寸）见根技能 `../../docs/validation-workflow.md`。
+
+### 通用检查项（所有 Dashboard 子类型）
+
+| 检查项 | 检查点 | 目标 |
+|--------|--------|------|
+| 嵌套结构 | PageContainer → ContentWrapper → Card → PageHeader/TimeToolbar/Sections | 100% |
+| Card 内左右对齐 | Card.paddingX = 20px，内部组件 padding = 0 | 100% |
+| TimeToolbar | 时间粒度 + 时间范围 + 刷新按钮三部分完整 | 正确 |
+| URL 持久化 | 时间参数（granularity/range/start/end）同步 URL | 正确 |
+| 图表色彩 | 全部使用 `hsl(var(--chart-N))`，无硬编码色值 | 100% |
+| 统计卡片 | 数量 ≤ 8，使用 Statistic 组件，tabular-nums | 正确 |
+| 只读约束 | 无 Form / 无内联编辑 / 无 Pagination | 0 个违反 |
+| Grid 布局 | gap = 16px，列数合理 | 正确 |
+| 响应式 | 窄屏自动降列（3→2→1） | 正确 |
+
+### 子类型差异验证
+
+| 子类型 | 额外验证项 |
+|--------|-----------|
+| overview (§6) | NavigationCard 可点击、选中态 ring-2、StatCardRow sparkline |
+| metric-detail (§7) | Breadcrumb L2、FilterBar + TimeToolbar 同行、ChartGrid 3列 |
+| realtime (§8) | 自动刷新默认开启、WebSocket 连接、滚动时序图 |