Notification
notification通知 · 四角堆叠卡片 + 图标/操作区/位置 + 命令式 API(比 Toast 重)
用法
五类型
notification.success / error / info / warning / open，派生左侧色条与默认图标。
tsx
notification.success({ title: "保存成功", description: "更改已同步。" });
notification.error({ title: "上传失败", description: "文件过大，请压缩后重试。" });
notification.info({ title: "系统通知", description: "维护窗口将于今晚开始。" });
notification.warning({ title: "空间不足", description: "剩余容量低于 10%。" });带操作按钮 + 常驻
btn 槽放操作按钮，duration=0 时不自动关闭。
tsx
notification.open({
title: "收到一条好友请求",
description: "来自 设计部·小琏",
duration: 0,
btn: <Button size="sm">查看</Button>,
});四角位置
placement 指定弹出位置：topRight / topLeft / bottomRight / bottomLeft。
tsx
notification.info({ title: "提示", description: "弹在指定角落", placement: "bottomLeft" });何时用
需要在四角弹出带标题+描述+操作按钮的较重通知卡片时用（比如「收到好友请求 / 上传失败可重试」）。比 Toast 信息量大、可常驻、可带操作；只需一行短反馈、自动消失时用 Toast。命令式调用，无需在 JSX 里挂节点（但 NotificationProvider 须由 layout 单挂一次）。
导入
ts
import { notification, NotificationProvider, hulianNotificationManager } from "@hulianui/ui"Props
notification.success/error/info/warning/open(options) 接收 NotificationOptions：
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| type | "open"｜"success"｜"error"｜"info"｜"warning" | — | 经方法名隐含（open 为中性无图标）；派生左侧色条 + 默认图标，token 同 Alert（info→primary） |
| duration | number | 4500 | 自动关闭毫秒数；0 = 不自动关（常驻） |
| placement | "topRight"｜"topLeft"｜"bottomRight"｜"bottomLeft" | "topRight" | 弹出位置（四角） |
调用返回 NotificationInstance，含 destroy(): void 立即关闭该通知。
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onClose | () => void | 关闭时回调（自动/手动/编程关闭均触发一次） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| title | ReactNode | 标题（加粗主行） |
| description | ReactNode | 描述（次行，恒 text-muted） |
| icon | ReactNode | 自定义图标，覆盖默认（不传按类型派生） |
| btn | ReactNode | 操作区（按钮等），渲染在描述下方 |
禁忌 / 坑
NotificationProvider须在 layout 单挂一次（同 Toast/Modal 范式），不要在每个调用点或 showcase 里挂 Provider，否则通知无处渲染。duration: 0才是常驻；不传 duration 默认 4500ms 自动关，需要用户必看的通知务必显式置 0。- 命令式触发的副作用通知，注意「触发即忘」的回调语义——
onClose仅保证触发一次，别在其中做依赖外部最新状态的操作。参见 [[fire-and-forget-side-effect-notification]]。
相关
Playground
notification.success({
title: "操作成功",
description: "数据已成功同步到云端。",
placement: "topRight",
duration: 4500,
})