场景方案
以「完整可拷贝」为标准的组合模式集。每个食谱演示多个组件如何组成一个真实业务形态。
多维表格式记录编辑表单
场景：oas-table 用字段类型列展示结构化记录（badge / 进度 / 日期 / 勾选），点击行弹出 oas-form 编辑表单，校验通过后回写表格行——「表格浏览 → 表单编辑」的完整闭环。
点击行弹出编辑表单（校验 + 回写）
最近保存：—
模式要点：
- 字段类型列负责展示（
type声明即得 badge / 日期 / 勾选态），编辑走表单——展示与编辑各用最合适的组件 - 行点击读行数据动态构建表单（字段按行生成）；校验规则
rules声明在oas-form上（形状{ 字段名: [{ required, pattern, message, ... }] }，按字段name取规则）——保存调form.submit()，校验通过后表单派发oas-submit（detail.values即按name收集的全表值） - 回写是「读全量 → 改一行 → 整体 setAttribute」（表格数据通道的非受控回写语义，与行内编辑通道互补）
- 行内快速改单值用
editable+editComponent（见表格组件页）；整行多字段编辑用本食谱的表单模式
看板驱动任务流转
oas-kanban 的 oas-change 事件即数据变更协议——宿主把 from/to/index 映射到后端状态迁移即可：
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）；与画册共用同一份记录数据时，三种视图（表格 / 画册 / 日历）是同一数据的三种投影。