# Dashboard 布局 Recipe（先选 recipe，再写 JSX）

## 0. 生成前硬门禁

1. 先在 `PAGE_ARCHETYPES.md` 命中一个 Pattern
2. 再在本文件选 **1 个主 recipe**
3. 再去 `LAYOUT_RULES.md` 写骨架（栅格/面板/滚动）

## 1. 快查索引

- **我只知道“要总览/监控/评测”**：先看「§2 Recipe 选型矩阵」
- **我想固定筛选区 + 模块区滚动**：选 `filter-sticky-modules-scroll`
- **我想做监控大屏（尽量不滚）**：选 `monitor-no-scroll` / `monitor-wall-split-columns`
- **我想做钻取对比（左右对照）**：选 `drilldown-compare`
- **关联阅读**：
  - 页面范式：`PAGE_ARCHETYPES.md`
  - 具体滚动决策树与间距/高度规则：`LAYOUT_RULES.md`

## 2. Recipe 选型矩阵（pattern + recipe = 稳定骨架，只选一个）

| Recipe id | 触发场景（pattern + user intent） | 推荐 Pattern | 滚动 owner | 禁止项 |
| --- | --- | --- | --- | --- |
| `dashboard-overview` | 多模块总览驾驶舱：健康度 + 趋势 + 拆解 | `ServiceDataScreenPattern` | 模块区（主内容面板） | 整页滚导致筛选/标题滚走；堆 12+ KPI 卡；模块无分组标题 |
| `filter-sticky-modules-scroll` | “筛选区固定 + 模块区滚动”：筛选与结果必须对照 | `ServiceDataScreenPattern` / `AIFullLinkDashboardTestPattern` | 模块区（滚动容器唯一） | body 与面板双滚；筛选区跟随滚走；筛选区高度无限长 |
| `monitor-no-scroll` | 监控大屏：一屏尽量全展示（告警/异常/排行/趋势） | `Monitor315Pattern` | 不滚（或仅列表/评论内滚） | 整页滚；图表高度随 legend/tooltip 抖动；大面积渐变/阴影装饰抢主线 |
| `monitor-wall-split-columns` | 监控双列墙：左趋势/分布，右榜单/评论流 | `Monitor315Pattern` | 列内局部滚（右列列表） | 两列同时长滚；列宽随内容撑爆；用负 margin 修对齐 |
| `monitor-audio-feedback` | 原声反馈：顶部指标 + 趋势分析 + 原声聚类/列表 | `VoiceFeedbackScreenPattern` | 原声列表容器内滚 | 原声列表跟随整页滚走；摘要区高度不控导致挤压趋势图 |
| `drilldown-compare` | 钻取对比：左（TopN/聚类/排行）+ 右（明细表/详情）强对照 | `AIFullLinkDashboardTestPattern` / `CustomerServiceOpsCockpitTestPattern` | 右侧明细面板（或模块区） | 整页滚导致对照丢失；左右两侧同时滚；表格无稳定高度 |

## 3. 每个 recipe 的“容器骨架契约”（必须显式写出来）

> 你选中的 recipe，必须在输出中写出以下 4 个“契约字段”，否则视为未执行 recipe：

- **recipeId**：上表的 recipe id
- **patternId/Pattern**：来自 `src/data/systems/dashboard/patterns.js` 的真实 Pattern（或对应页面骨架）
- **scrollOwner**：唯一滚动容器（body / 模块区 / 列内列表 / 明细表面板）
- **moduleSpacing**：模块间距，**默认 `--spacing-3`（12px，模块与列的常规态）**，小屏可降到 `gap-2`（8px）；只允许 `--spacing-3/4/6` 这种 token，禁止任意值。卡片内边距是唯一豁免项，用 `DASHBOARD_CARD_PADDING_CLASS`（上16/左右下20，见 `LAYOUT_RULES.md` §2）。

## 4. Recipe 与组件选择的联动建议（pattern + recipe → kind）

- **总览类**：优先选择 `business` 类组件（指标卡/榜单/表格）+ `basic` 图表（line/bar/pie）
- **监控类**：优先 `ranking-card`、`comment-card`、`multi-tab-chart`，并控制“图表高度稳定”（见 `LAYOUT_RULES.md` §3/§4）
- **评测/钻取对比**：优先表格容器（来自 `@tfdesign/dashboard` 内置基础组件）+ 左侧 TopN/聚类（`ranking-card`/`ai-summary`）
