用途:实现一致的用户反馈与通知系统,向用户传达系统状态、显示消息并处理确认操作,同时增强表单、数据可视化、表格、AI 对话、仪表盘、搜索、媒体等其他组件技能。
主要能力:按紧急度选择反馈机制——严重且阻塞用模态对话框,重要非阻塞用警告横幅,成功/信息临时提示用 Toast/Snackbar,上下文帮助用 Tooltip/Popover,进行中用进度指示器,无数据用空状态。提供通知时序建议:成功 3-4 秒、信息 4-5 秒、警告 5-7 秒、错误 7-10 秒或手动关闭,带操作按钮则 10 秒以上或不自动关闭;进度阈值:小于 100ms 不显示,100ms-5s 用加载动画,5s-30s 用进度条,超过 30s 加取消选项。
使用方式:推荐现代 React 技术栈,安装命令为 npm install sonner @radix-ui/react-dialog。Toast 使用 Sonner,在应用根节点放置 <Toaster position="bottom-right" />,通过 toast.success 或 toast.promise 触发通知;模态框使用 Radix UI 的 Dialog 组件。无障碍方面使用 ARIA 实时区域:非关键通知用 role="status" aria-live="polite",关键警报用 role="alert" aria-live="assertive";模态框需管理焦点:打开前保存焦点、移入首个可交互元素、在模态内循环、关闭后恢复。样式通过设计令牌统一主题,如 --toast-bg、--toast-padding 等。
适用场景:表单验证反馈与成功确认、数据可视化加载与错误、表格批量操作反馈、AI 对话流式指示与限流警告、仪表盘组件加载与系统状态、搜索零结果与进度、媒体上传进度与处理状态。
限制:资料未提供具体收费、价格、平台支持范围或效果数据;库选择需依据项目需求,资料仅给出 Sonner、react-hot-toast、react-toastify、Radix UI、Headless UI 的简要对比,未提供完整基准测试。