Notification
显示信息更丰富的全局通知。中文惯用名：通知提醒。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.notification |
| 名称 | Notification |
| 二级分类 | 反馈（feedback） |
| 用途 | 显示信息更丰富的全局通知 |
| 描述 | 中文惯用名：通知提醒。 |
预览
静态结构：Notification 是声明式全局富通知触发器，自身只渲染 hidden 标记节点 <div data-slot="notification" hidden>。title 引用变化且为非空字符串时（含首次挂载），经命令式 toast() 发一条富通知 toast——右上角视口弹出卡片：标题（font-medium）+ 正文 description（text-muted-foreground）+ 语义色条 + 关闭按钮，按 duration 自动消失。
DSL 结构
{
"type": "Notification",
"props": {
"title": "版本更新",
"description": "v2.4 已发布，包含 12 项改进。",
"variant": "info",
"duration": 5000
}
}何时用
何时使用
- 信息更丰富的全局通知：需要标题 + 正文的系统通知、异步任务完成提醒、审核结果。
- 用户稍后看到也能理解上下文的通知（标题概括 + description 补充细节）。
- 在 DSL 中以声明方式触发：把通知标题绑定给 title，赋非空值即弹出。
何时不用
- 一句话的操作结果反馈：使用 Message（更轻，无标题区）。
- 内容上下文中的持续提示：使用 Alert（就地展示，不自动消失）。
- 需要用户立即处理或确认的事项：使用 Dialog；Notification 只有关闭按钮，无操作区。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| info 信息（默认） | info 语义色条富通知 | 系统通知、一般提醒；variant 缺省即 info |
| success 成功 | success 语义色条富通知 | 异步任务完成（如「报表已生成，可前往下载」） |
| error 错误 | destructive 语义色条富通知 | 后台任务失败，附失败原因说明 |
| warning 警告 | warning 语义色条富通知 | 配额将满、配置过期等需留意的提醒 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | — | 通知标题：变为非空字符串时（含首次挂载）发一条富通知 toast；触发语义仅依赖 title 引用，description / variant / duration 变化不重发 |
description | string | — | 通知正文（toast description） |
variant | `'success' | 'error' | 'info' |
duration | number | — | 自动关闭时长（ms），透传 toast timeout；0 表示不自动关闭 |
className | string | — | 通用：标记节点 class |
style | CSSProperties | — | 通用：标记节点内联样式 |
使用规范
- 页面必须挂载 Sonner（全局 toast 挂载点）后通知才可见；与 Message 共用同一 ToastManager 与右上角视口。
- 声明式触发语义：触发仅依赖 title 引用变化——description / variant / duration 变化不重发，title 不变只改正文不会弹出。
- 标题概括结论（「导入完成」），正文写细节（「成功 120 条，失败 3 条」）；正文放不下的内容用 Dialog。
- 重要且需留存查看的通知（如审批结果）应配合可回访的入口，duration 过后 toast 即消失。
- 高频事件不要逐条弹 Notification：合并为一条汇总（如「3 个任务已完成」），避免并发堆叠刷屏。
正例
- ✓ 异步导出完成后：title「报表已生成」、description 说明文件与有效期，variant=success。
- ✓ 长任务失败：title「数据同步失败」、description 写失败原因与建议操作，variant=error。
- ✓ 系统维护提醒：title「今晚 23:00 例行维护」，duration 适当延长或置 0 让用户手动关闭。
反例
- ✕ 一句话成功提示也用 Notification（应使用更轻的 Message）。
- ✕ 在 description 里塞入需要用户勾选 / 确认的操作（应使用 Dialog）。
- ✕ 同一事件循环里连续推送多条通知刷屏（应合并为一条汇总通知）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。