使用指南
组件选择指南
常见组件在真实业务中的选择边界
组件选择的核心不是“哪个看起来合适”，而是“用户正在表达什么意图”。下面这些组件经常外观相近，但语义不同。
Button、Toggle、Switch
| 组件 | 用户意图 | 示例 |
|---|---|---|
Button | 触发一次动作 | 保存、提交、刷新、删除 |
Toggle | 开关一个局部工具状态 | 加粗、显示网格、固定列 |
Switch | 修改一个持久设置 | 启用通知、打开暗色模式 |
如果行为会立即执行一次操作，使用 Button。如果行为表示当前是否处于某种状态，使用 Toggle 或 Switch。
Segment、Tabs
| 组件 | 使用边界 |
|---|---|
Segment | 切换轻量模式，不改变页面信息架构 |
Tabs | 切换同一对象下的不同内容面板 |
示例：
<Segment items={['列表', '卡片']} />
<Tabs items={['基础信息', '成员', '权限']} />Dropdown Menu、Context Menu、Command
| 组件 | 使用边界 |
|---|---|
DropdownMenu | 主动点击按钮后出现的操作列表 |
ContextMenu | 右键或长按触发的上下文操作 |
Command | 搜索式命令入口，适合大量动作或导航 |
当操作数量少且和某个按钮强相关时，优先使用 DropdownMenu。当用户需要搜索动作、页面或资源时，再使用 Command。
Dialog、Drawer、Popover
| 组件 | 使用边界 |
|---|---|
Dialog | 当前页面上的短任务，需要明确确认或取消 |
Drawer | 侧向展开的任务流，适合展示更多上下文 |
Popover | 不打断主流程的轻量补充内容 |
弹层越重，越需要明确标题、关闭方式和焦点返回。不要用 Popover 承载复杂表单，也不要用 Dialog 展示一两句说明。
Badge、Tag、Alert
| 组件 | 使用边界 |
|---|---|
Badge | 短状态、计数、等级 |
Tag | 分类标签、可读属性 |
Alert | 需要用户理解的一段状态说明 |
Badge 和 Tag 用于对象局部信息，Alert 用于页面或流程级信息。