- 分组
- 总览 · 紧跟封面
- 组件
Bento·#bento- 交互
- 点击或 Tab + Enter 展开；Esc 返回并把焦点还给原卡片；详情打开时方向键不会翻页。
适合
- 需要一页讲清“这是什么”，并允许听众按兴趣深入
- 有 6 个并列主题，其中 1 个是最重要的（放在第 1 格）
不适合
- 主题不足 6 个：不要凑数，改用 NumberedColumns
- 每个主题的详情你说不出一张图或一张表：详情页会空洞
- 一份演示里使用超过一次
内容上限
| 1 | cards 必须正好 6 张；顺序即位置：1 大卡（左），2–3 宽卡（右上），4–6 小卡（底部） |
| 2 | 标题必须预先断行且不会自动换行：第 1 格 1 行；第 2–3 格 ≤ 2 行 × 8 字；第 4–6 格 1 行 ≤ 12 字 |
| 3 | summary 1 行；lead ≤ 70 字 |
| 4 | feature.stats 正好 3 项，value ≤ 7 个字符 |
字段
| 字段 | 类型 | |
|---|---|---|
cards · 必填 | BentoCard[6] | id, title[], summary, lead, source, mini?, detail, aside?, figure? |
feature · 必填 | BentoFeature | 第 1 格专用：numeral, codename?, pill?, date?, stats[3] |
label | string | 无障碍名称 |
card.mini | ReactNode | 卡片上的小图形（第 2–6 格），纯 DOM/CSS，参考 decks/release/minis.tsx |
card.detail · 必填 | ReactNode | 详情页右栏：图表、代码对照、表格，参考 decks/release/details.tsx |
card.figure | { value, unit?, caption } | 详情页左下的锚点大数字 |
card.aside | ReactNode | 替代 figure 的自定义块，例如一条命令 |
示例代码
<Bento
cards={[
{ id: 'release', title: ['Lumen 13'], summary: '…', lead: '…', source: '…', detail: <ReleaseVisual /> },
{ id: 'apt', title: ['APT 源改用', 'deb822 格式'], summary: '…', lead: '…', source: '…',
mini: <MiniCode />, detail: <AptVisual />, aside: <AptAside /> },
// …共 6 张
]}
feature={{ numeral: '13', codename: 'aurora', pill: 'Stable', date: '2025.08.09',
stats: [{ label: '软件包总数', value: '69,830+' }, { label: '官方架构', value: '7' }, { label: '支持周期', value: '5 年' }] }}
/>