# 场景方案
以「完整可拷贝」为标准的组合模式集。每个食谱演示多个组件如何组成一个真实业务形态。
## 多维表格式记录编辑表单
**场景**：`oas-table` 用字段类型列展示结构化记录（badge / 进度 / 日期 / 勾选），点击行弹出 `oas-form` 编辑表单，校验通过后回写表格行——「表格浏览 → 表单编辑」的完整闭环。
取消
保存
最近保存：—
**模式要点**：
1. **字段类型列负责展示**（`type` 声明即得 badge / 日期 / 勾选态），编辑走表单——展示与编辑各用最合适的组件
2. **行点击读行数据动态构建表单**（字段按行生成）；校验规则 `rules` 声明在 **`oas-form` 上**（形状 `{ 字段名: [{ required, pattern, message, ... }] }`，按字段 `name` 取规则）——保存调 `form.submit()`，校验通过后表单派发 `oas-submit`（`detail.values` 即按 `name` 收集的全表值）
3. **回写是「读全量 → 改一行 → 整体 setAttribute」**（表格数据通道的非受控回写语义，与行内编辑通道互补）
4. 行内快速改单值用 `editable` + `editComponent`（见表格组件页）；整行多字段编辑用本食谱的表单模式
## 看板驱动任务流转
`oas-kanban` 的 `oas-change` 事件即数据变更协议——宿主把 `from/to/index` 映射到后端状态迁移即可：
```ts
const laneField = 'state' // 泳道字段（按业务实际字段名替换）
document.querySelector('oas-kanban').addEventListener('oas-change', async (e) => {
const { id, from, to, index, ids, swimlane } = e.detail
await api.moveCards({
cardIds: ids ?? [id], // 多选批量时 ids 为数组
toColumn: to,
toIndex: index,
...(swimlane ? { [laneField]: swimlane.to } : {}),
})
})
```
WIP 限制为提示语义（`data-over-limit` 标记），强制阻断由宿主在事件后自行回退。
## 画册视图（按字段分组的卡片墙）
**场景**：多维表格的「画册」形态——记录不按行展示，而是按某字段值分组，每组一叠富卡片。用 `oas-card` + 分组渲染即可拼装，无需专门组件。
**模式要点**：分组键驱动列（`new Set(records.map(r => r.cat))`）+ 卡片即记录富展示（`oas-card` + `oas-tag` 状态徽章）——画册本质是「分组 + 卡片」的组合，字段类型徽章 / 格式化沿用表格的 `type` 语义（价格 / 库存 / 状态同一套数据）。
## 日历视图（记录按日期铺格）
**场景**：多维表格的「日历」形态——把记录按日期字段铺到日历的日期格。`oas-calendar` 的 `oas-cell-render` 事件是铺格通道（每个日单元格渲染时派发，宿主追加内容）。
**模式要点**：`oas-cell-render` 的 `detail.element` 即日格容器——追加 `.cell-dot`（内置标记点样式）+ `element.title` 承载悬停明细；事件数据按 `date` 字段索引——注意 `detail.date` 是 **Date 对象**（`parseISODate` 返回），需格式化为 ISO key（`YYYY-MM-DD`）再与事件数据比对（直接 `ev.date === detail.date` 会因类型错配恒 false）；与画册共用同一份记录数据时，三种视图（表格 / 画册 / 日历）是同一数据的三种投影。