# 跨组件选型指引

> 本文档帮助在相似组件间做出正确选择。从各组件 README.md 中的跨组件描述汇总生成。

## Button vs Link

**何时用 Button：**
- 需要 `onClick` 处理逻辑的交互
- 需要 disabled 状态
- 需要 loading / 异步操作反馈

**何时用 Link：**
- 只需 `href` 导航跳转
- 需要浏览器原生快捷键（中键新标签页、⌘+点击）
- 在 Table 等行内场景中，Link 与文字行高一致，Button 不是

**注意：**
- `<a>` 原生不支持 disabled（除非 CSS `pointer-events: none`），所以需要禁用态时用 Button
- `<Button type="plain">` 视觉上类似链接，但语义是按钮；如果是导航跳转应该用 Link
- 在 Table 中，纯链接操作用 `<Link />`，不要用 `<Button type="plain" />`

## Select vs Suggest

**Select：**
- 选项是**静态已知**的有限集合
- 值用 `SelectOption['value']` 标识（类似 HTML `<select>`）
- 适合：状态选择、类型筛选、固定枚举

**Suggest：**
- 选项是**异步获取**的（搜索联想）
- 值是完整的 `SuggestOption` 对象（包含 value + label），因为选项不常驻内存
- 适合：搜索框、远程数据联想、需要回填展示值的场景

**为什么 Suggest 的值是对象而非 ID？**
- Suggest 的 options 是异步的，组件不会一直持有全部选项
- 外部设值（回填、联动）时需要同时提供 value 和 label
- Select 的 options 是静态持有的，用单个 value 字段即可定位到完整 option

## Select vs Cascade

**Select：**
- 单层平铺选项
- 单选或多选

**Cascade：**
- 多层级树形数据
- 逐级展开选择
- 支持联动/非联动模式

## Dialog vs Drawer

**Dialog（模态对话框）：**
- 需要用户**必须处理**后才能继续的操作
- 确认/取消类决策
- 表单填写后提交
- 居中展示，强打断

**Drawer（抽屉）：**
- 辅助信息展示，不强制打断主流程
- 详情面板、配置面板
- 从边缘滑出，保留主页面上下文

## Dialog vs PopoverConfirm

**Dialog / confirm()：**
- 重要操作的二次确认（删除、提交）
- 需要用户明确感知"这是一个重要决策"
- 强模态打断

**PopoverConfirm：**
- 轻量级二次确认
- 相对"非强烈打断"的体验
- 不适合复杂输入——如果确认浮层里需要用户填写内容，应该用 Dialog
- 非控制型 PopoverConfirm 在 onConfirm 时立即关闭，不支持异步等待结果后关闭

## Toast vs Message vs Notification

**Toast：**
- 全局消息反馈，自动消失
- 交互作用是"将信息反馈传达给用户"
- 最小停留时间 3 秒（设计规范要求，保证基本阅读）
- 适合：操作成功/失败的简短反馈

**Message：**
- 函数式调用（`message.info()` / `message.success()` 等）
- 页面顶部居中展示
- 适合：全局操作反馈

**Notification：**
- 函数式调用，四角定位
- 支持标题 + 内容 + 操作按钮
- 适合：需要更多信息或用户操作的通知（如"新消息到达，点击查看"）

## Popover vs Tooltip vs Popper

**Tooltip：**
- 纯文字提示，hover 触发
- 无交互内容

**Popover：**
- 可包含富内容（按钮、表单等）
- 支持 confirm 模式
- click 或 hover 触发

**Popper：**
- 底层定位引擎（基于 popperjs v2）
- 不直接使用，Tooltip/Popover/DropMenu 等都基于它
- 只在需要自定义浮层定位时直接使用

## Table 中的组件搭配

Table 行内使用其他组件时的注意事项：

- 纯文字行高与 Checkbox、Switch、Button 不同
- 需要针对这些组件做样式修正以保证行高一致
- 链接操作用 `<Link />`（行高与文字一致），不要用 `<Button type="plain" />`
- `<Button type="plain">` 在 Table 中会导致行高不一致

## Icon 颜色规则

- 默认情况下 icon 不跟随父/兄弟节点的文字颜色（这是更常见的情况）
- 例外：纯 icon 按钮、tip 图标、select/suggest/datepicker 的 suffix icon 等使用默认颜色
- Toast/Alert 的 prefix icon、Loading spinner、Table 列头 icon 等都有独立颜色，不继承文字色