版本挑选器 <EditionPicker />
3–6 张单选卡片（每行 3 张）：图标、小标签、名称、说明和底部“适合”一行；右上角是单选圆点。选中的卡片描强调色边并打勾，每按一次 → 选中下一张。
- 分组
- 选项 · 几个版本 / 方案逐个介绍
- 组件
EditionPicker·#edition-picker- 交互
- 配 build: 'focus'：每按一次 → 选中框移到下一张卡片
适合
- 产品的几个版本、套餐、发行版本，各有用途
- 想逐个讲“这一个适合谁”
不适合
- 有价格要比：用 PricingTiers
- 选项超过 6 个：拆页或用 FilterChips
内容上限
| 1 | options 3–6 个 |
| 2 | name ≤ 12 个拉丁字符或 ≤ 8 字；tag ≤ 6 字 |
| 3 | desc ≤ 40 字（6 个时 ≤ 30 字） |
| 4 | fit ≤ 24 字（6 个时 ≤ 14 字） |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
options · 必填 | { name, icon?, tag?, desc, fit? }[] | 选项卡片 |
selected | number | 完整状态选中的卡片，默认 0 |
fitLabel | string | “适合”一行的标签，默认“适合” |
示例代码
<EditionPicker kicker="Editions" title="六个正式版本" options={[{ name: 'Workstation', icon: 'laptop', tag: '桌面', desc: '搭载最新 GNOME 桌面的版本。', fit: '笔记本和台式机' }, …]} />