Skyroc Admin React
专题能力

全局反馈 API

showMessage / showNotification / showModal 系列函数的签名、参数与返回值速查

这一页是 Ant Design 全局反馈函数的 API 速查。接入方式、初始化时机和与通知中心的区别见 Ant Design 全局反馈;这里只列签名、参数和返回值。

所有函数定义在 packages/web/admin-theme/src/antd/ui.ts,由 @skyroc/web-admin-theme 导出,并经 apps/admin/src/config.ts re-export。页面推荐从 @/config 导入:

import {
  showConfirmModal,
  showErrorMessage,
  showLoadingMessage,
  showSuccessMessage,
  showSuccessNotification
} from '@/config';

这些函数读取 AntdProviderinitAntdUI() 保存的实例,必须在 AntdProvider 挂载之后调用。未初始化时调用会抛出 xxx is not initialized

Message

底层是 antd message 实例。show*Message 复用 antd 的 TypeOpen 签名,既能传字符串内容,也能传配置对象。

函数签名说明
showMessage(config: MessageArgsProps) => MessageType通用消息,需传配置对象。
showSuccessMessage(content, duration?, onClose?) | (config) => MessageType成功消息。
showErrorMessage(content, duration?, onClose?) | (config) => MessageType错误消息。
showInfoMessage(content, duration?, onClose?) | (config) => MessageType信息消息。
showWarningMessage(content, duration?, onClose?) | (config) => MessageType警告消息。
showLoadingMessage(content, duration?, onClose?) | (config) => MessageType加载消息,duration0 时不自动关闭。
destroyMessage(key?: React.Key) => void销毁指定消息;不传 key 销毁全部。

TypeOpen 入参:

参数类型说明
contentReactNode | MessageArgsProps消息内容,或完整配置对象。
durationnumber自动关闭秒数;0 表示不自动关闭。
onClose() => void关闭后回调。

返回值 MessageType 是一个可调用的关闭函数(同时是 Promise)。showLoadingMessage 常用它手动关闭:

const hide = showLoadingMessage('加载中...', 0);
// ...完成后
hide();

Notification

底层是 antd notification 实例,统一接收配置对象 ArgsProps(含 message / description / duration / placement 等)。

函数签名说明
showNotification(config: ArgsProps) => void通用通知(notification.open)。
showSuccessNotification(config: ArgsProps) => void成功通知。
showErrorNotification(config: ArgsProps) => void错误通知。
showInfoNotification(config: ArgsProps) => void信息通知。
showWarningNotification(config: ArgsProps) => void警告通知。
destroyNotification(key?: React.Key) => void销毁指定通知;不传 key 销毁全部。

ArgsProps 常用字段:

字段类型说明
messageReactNode通知标题。
descriptionReactNode通知正文。
durationnumber | null自动关闭秒数;null 表示不自动关闭。
placement'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight'弹出位置。
keyReact.Key通知唯一标识,配合 destroyNotification 使用。
onClick / onClose() => void点击 / 关闭回调。

底层是 antd modal 实例(App.useApp() 提供)。所有 show*Modal 复用 ModalFunc 签名。

函数签名说明
showModal(config: ModalFuncProps) => { destroy; update }等价于 modal.confirm
showConfirmModal(config: ModalFuncProps) => { destroy; update }确认弹窗。
showInfoModal(config: ModalFuncProps) => { destroy; update }信息弹窗。
showSuccessModal(config: ModalFuncProps) => { destroy; update }成功弹窗。
showErrorModal(config: ModalFuncProps) => { destroy; update }错误弹窗。
showWarningModal(config: ModalFuncProps) => { destroy; update }警告弹窗。

ModalFuncProps 常用字段:

字段类型说明
titleReactNode弹窗标题。
contentReactNode弹窗内容。
onOk() => void | Promise<any>确认回调;返回 Promise 时弹窗会等待其完成再关闭。
onCancel() => void | Promise<any>取消回调。
okText / cancelTextReactNode按钮文案。
okButtonProps / cancelButtonPropsButtonProps按钮属性。

返回值含 destroy()update(config),可在外部主动关闭或更新弹窗。

内部 API(不建议业务直接使用)

函数说明
initAntdUI(message, modal, notification)AntdProvider 内的 ContextHolder 调用,保存三个 antd 实例。@internal,业务代码不应调用。

相关链接

On this page