选择列表

用途

模态选择场景——从若干候选中单选其一,行由图标 + 主文本 + 次行说明组成,底部配「取消 / 确定」按钮行。用例参考:抓取前选择目标游戏窗口。预览可点击换选。

设计规范 · macOS 26 / 27

• inset 列表直接坐在窗底上,是内容层的数据列表——与「侧边栏」的区别:侧栏是浮于内容之上的玻璃导航层,本组件不是玻璃。
• 行高 44px(h-11)命中桌面端点击目标,行圆角 rounded-[10px];行距 not-first:mt-2(8px)。
• 选中为持久高亮 bg-black/8 / 暗 white/12,与侧栏行同款;无 hover / 按压瞬时效果。
• 图标与主文本用 label 主色,次行用 secondaryLabel——双行层级一眼可分。

状态与交互

• 单击选中(持久);双击即确认;键盘 ↑↓ 移动选中并 scrollIntoView,Enter 确认、Esc 取消。
• 未选中任何行时「确定」按钮 disabled——选择先于确认。

参考实现

Web 参考:picker/App.vue;生产用语义工具类 text-label / text-secondary,本例以等值字面量代替。原生对应 inset 样式的 NSTableView。演示状态机提供 value / setValue。