Notification 通知提醒框

全局展示通知提醒信息，可指定六个方位。命令式 API（notification.success({ title })），浮层走 portal。

何时使用

• 需要比 message 更重、可带标题 + 描述 + 操作按钮的通知。
• 需要按方位出现（右上角 / 右下角 / 顶部居中…）。
• 需要「自动关闭倒计时」的进度条（showProgress）。
• ⚠️ 优先用 notification.useNotification() 的 contextHolder：静态方法无法消费 context。

见 demo/（14 个，覆盖 antd 的主要用户场景）：basic / component-token / custom-icon / duration / hooks / placement / progress-color / render-panel / show-with-progress / stack / style-class / update / with-btn / with-icon。

API

静态方法

方法	说明	签名
notification.success / info / warning / error	打开一条对应类型的通知	(config: ArgsProps) => void
notification.open	完整配置打开	(config: ArgsProps) => void
notification.destroy	关闭（传 key 关一条，不传清空）	(key?: string | number) => void
notification.config	全局默认配置（合并语义）	(config: GlobalConfigProps) => void
notification.useNotification	hooks 形态	(config?) => [NotificationInstance, () => VNode]
notification._InternalPanelDoNotUseOrYouWillBeFired	私有：单条静态面板	组件
notification._InternalListDoNotUseOrYouWillBeFired	私有：静态列表	组件

⚠️ open() 返回 void —— 与 message 不同，notification 没有 thenable/可调用句柄； 也没有 loading 类型（IconType 只有 4 个值）。

ArgsProps

参数	说明	类型	默认值
title	标题	VNodeChild	—
description	描述。与 title 同时存在时包 -notice-section	VNodeChild	—
actions	操作区	VNodeChild	—
type	'success' | 'info' | 'error' | 'warning'	—	—
placement	六个方位之一；单条优先于全局	NotificationPlacement	'topRight'
duration	秒；0 / false ⇒ 不自动关闭	number | false	4.5
showProgress	显示自动关闭倒计时进度条	boolean	—
pauseOnHover	悬停暂停计时	boolean	true
closable	关闭按钮。false / null ⇒ 不渲染按钮	boolean | null | { closeIcon?, disabled?, onClose? }	true
closeIcon	自定义关闭图标；null ⇒ 不渲染按钮（上游语义）	VNodeChild	—
icon	自定义图标（给了就不叠 -notice-icon-{type} 类）	VNodeChild	类型图标
role	notice 根的 ARIA 角色	'alert' | 'status'	'alert'
key	唯一标识；同 key 再 open ⇒ 复用同一条	string | number	自动生成
onClose	关闭按钮或超时调用最新订阅；destroy、淘汰、卸载不调用	() => void	—
onClick	点击订阅	(event: MouseEvent) => void	—
className / style / classNames / styles / props	单条根 class/style、单条语义对象及原生根属性	—	—
message / btn	⚠️ 已废弃：用 title / actions	—	—

Slots（C8-R2，仅 _InternalPanelDoNotUseOrYouWillBeFired 静态面板）

Slot	说明	参数
title	富标题（文本 title prop 等价，slot 优先）	—
message	⚠️ 废弃别名，同 title	—
description	富描述（文本 description prop 等价，slot 优先）	—
icon	自定义图标（空 slot 等价隐藏）	—
actions	操作区（空 slot 等价隐藏）	—
btn	⚠️ 废弃别名，同 actions	—
closeIcon	自定义关闭图标（空 slot 等价隐藏）	—

notification.open({ title, description, icon, actions, closeIcon }) 的命令式入参保持 VNodeChild（程序化上下文，无模板）。

GlobalConfigProps（config()）

top / bottom / duration / showProgress / pauseOnHover / prefixCls / getContainer / placement / closeIcon / closable / rtl / maxCount / props。

NotificationConfig（useNotification()）

同上，另有 stack（boolean | { threshold }，默认 { offset: 8 } ⇒ 默认就堆叠） 与 classNames / styles。

语义化槽位（11 个）

list / listContent                                    // 列表级
wrapper / root / title / description / actions / icon / section / close / progress   // 单条级

⚠️ classNames / styles 使用对象。list / listContent 只属于 NotificationConfig 和 PureList；单条 Args 与 PurePanel 只接受单条字段。

类型导出

NotificationArgsProps、NotificationGlobalConfigProps、NotificationConfig、 NotificationInstance、NotificationPlacement、NotificationIconType、NotificationSemanticType。

Theme（Component Token）

7 个键（CSS 变量 --apollo-notification-*），其中 3 个有默认值：

token	值
zIndexPopup	zIndexPopupBase + CONTAINER_MAX_OFFSET(1000) + 50 = 2050（⚠️ message 是 +10）
width	384
progressBg	linear-gradient(90deg, colorPrimaryBorderHover, colorPrimary)
colorSuccessBg / colorErrorBg / colorInfoBg / colorWarningBg	默认 undefined（产物是带 fallback 的 var()）

设计说明

与 message 共用通知内核

两者都建立在 notification/engine/（rc-notification 的 Vue 自建）之上；差异只在配置翻译 与 notice 内部的语义（notification 有标题 + 描述 + 操作区 + 关闭按钮，message 只有一行文本）。

默认就堆叠

DEFAULT_STACK_CONFIG = { offset: 8 } ⇒ 列表根恒带 -stack 类，超过阈值（默认 3）自动折叠。 message 的默认是 false（不堆叠）—— 这是两者最容易搞混的一处。

样式引入

import '@apollo-design/theme/dist/tokens.css';      // 主题变量，必须先引
import '@apollo-design/ui/notification/style.css';  // 按需
// 或
import '@apollo-design/ui/style.css';               // 汇总

FAQ

为什么关闭按钮有时没有图标？

closable: false 或 closeIcon: null 会整个移除按钮（上游语义）； 要「有按钮但不渲染图标」请用 closable: { closeIcon: null }。

duration: 0 和 duration: false 有区别吗？

没有 —— 都会被归一化成 false（不自动关闭）。

同 key 再 open 会怎样？

复用同一条通知并更新内容（update demo），不会新增一条。

Hook holder 内已打开通知保留 keyed 正文与用户样式；类型、图标和关闭按钮类跟随当前前缀，默认关闭可访问名跟随当前语言，显式 closable aria-label 优先。closable.disabled 禁用原生关闭按钮。

PurePanel 的 closable 只描述图标、disabled 和可访问名等展示配置，关闭使用类型化 @close。原来未被消费的嵌套 closable.onClose 已移除；命令式 Args、hook/global 的订阅职责保持。

Vue 契约与迁移

在 setup 中调用 useNotification，将零参 holder factory 作为组件渲染，或调用它取得 VNode。挂载前命令排队等候该 holder 就绪，owner 卸载后不再执行。同 key 更新保留内容身份并重新开始计时，数值 key 与字符串 key 保持独立。

PurePanel 将原生 class、style、attrs 和类型化 @click / @close 作用到实际宿主。旧 className 改用 class；富内容使用具名槽并保留 0 与显式空内容。PureList 的语义样式映射改用 styles，原生 style 设置其宿主样式。getContainer 可返回 HTMLElement 或 ShadowRoot。

当前 holder 配置和 Provider 对象可替换或撤除，七个 Token 与默认语言跟随当前上下文。列表数值 z-index 覆盖（含 0 和数值字符串）同时提供后代 popup 上下文；CSS 表达式保持原样，数值上下文使用当前 Token。静态方法读取 ConfigProvider 全局服务，不注入调用组件的上下文。