┌─────────────────┐       ┌─────────────────┐       ┌─────────────────┐
│  消息发送请求     │──────▶│  useNotifier    │──────▶│  消息队列管理    │
└─────────────────┘       │  (消息通知器)     │       └─────────────────┘
                                  │                         │
                                  │                         ▼
                                  │                  ┌─────────────────┐
                                  │                  │  Ant Design     │
                                  │                  │  Message/Modal  │
                                  │                  │  Notification   │
                                  │                  └─────────────────┘
                                  │
                                  ▼
                          ┌─────────────────┐
                          │  事件总线集成    │
                          │  (可选)         │
                          └─────────────────┘

export const MESSAGE_TYPES = {
  SUCCESS: "success", // 成功消息
  ERROR: "error", // 错误消息
  WARNING: "warning", // 警告消息
  INFO: "info", // 信息消息
  LOADING: "loading", // 加载状态
};

export const MODAL_TYPES = {
  INFO: "info", // 信息弹窗
  SUCCESS: "success", // 成功弹窗
  ERROR: "error", // 错误弹窗
  WARNING: "warning", // 警告弹窗
  CONFIRM: "confirm", // 确认弹窗
};

export const NOTIFICATION_TYPES = {
  SUCCESS: "success", // 成功通知
  ERROR: "error", // 错误通知
  WARNING: "warning", // 警告通知
  INFO: "info", // 信息通知
  LOADING: "loading", // 加载通知
};

import { message, Modal, notification } from "antd";
import { useNotifier } from "@/hooks/useNotifier";

const MyComponent = () => {
  const [messageApi, messageContextHolder] = message.useMessage();
  const [modalApi, modalContextHolder] = Modal.useModal();
  const [notificationApi, notificationContextHolder] = notification.useNotification();

  const {
    // 消息相关
    sendMessage,
    success,
    error,
    warning,
    info,
    loading,
    // 弹窗相关
    sendModal,
    modalInfo,
    modalSuccess,
    modalError,
    modalWarning,
    modalConfirm,
    // 通知相关
    sendNotification,
    notificationSuccess,
    notificationError,
    notificationWarning,
    notificationInfo,
  } = useNotifier(messageApi, modalApi, notificationApi);

  return (
    <>
      {messageContextHolder}
      {modalContextHolder}
      {notificationContextHolder}
      {/* 你的组件内容 */}
    </>
  );
};

import React from "react";
import { message, Modal, notification, Button } from "antd";
import { useNotifier } from "@/hooks/useNotifier";

const MessageExample = () => {
  const [messageApi, messageContextHolder] = message.useMessage();
  const [modalApi, modalContextHolder] = Modal.useModal();
  const [notificationApi, notificationContextHolder] = notification.useNotification();

  const { success, error, warning, info, loading } = useNotifier(
    messageApi,
    modalApi,
    notificationApi
  );

  return (
    <>
      {messageContextHolder}
      {modalContextHolder}
      {notificationContextHolder}
      <div>
        <Button onClick={() => success("操作成功！")}>成功消息</Button>
        <Button onClick={() => error("操作失败！")}>错误消息</Button>
        <Button onClick={() => warning("警告信息")}>警告消息</Button>
        <Button onClick={() => info("提示信息")}>信息消息</Button>
      </div>
    </>
  );
};

import React from "react";
import { Button } from "antd";
import { useGlobalMessageContext } from "@/contexts/GlobalMessageContext";

const MessageExample = () => {
  const { success, error, warning, info } = useGlobalMessageContext();

  return (
    <div>
      <Button onClick={() => success("操作成功！")}>成功消息</Button>
      <Button onClick={() => error("操作失败！")}>错误消息</Button>
      <Button onClick={() => warning("警告信息")}>警告消息</Button>
      <Button onClick={() => info("提示信息")}>信息消息</Button>
    </div>
  );
};

const { success, error, warning, info } = useGlobalMessageContext();

// 成功消息
success("数据保存成功！");

// 错误消息
error("保存失败，请重试");

// 警告消息
warning("请注意数据格式");

// 信息消息
info("操作已完成");

const { success, error } = useGlobalMessageContext();

// 自定义持续时间
success("操作成功", { duration: 5 });

// 自定义样式
error("错误信息", {
  duration: 0, // 不自动关闭
  className: "custom-error-message",
  style: { color: "#ff4d4f" },
});

// 添加关闭回调
success("操作成功", {
  onClose: () => {
    console.log("消息已关闭");
  },
});

const { loading } = useGlobalMessageContext();

const handleAsyncOperation = async () => {
  // 显示加载消息
  const hide = loading("正在处理...");

  try {
    await someAsyncOperation();
    hide(); // 手动关闭加载消息
    success("处理完成");
  } catch (error) {
    hide();
    error("处理失败");
  }
};

const { modalInfo, modalSuccess, modalError, modalWarning, modalConfirm } =
  useGlobalMessageContext();

// 信息弹窗
modalInfo("提示", "这是一个信息弹窗");

// 成功弹窗
modalSuccess("成功", "操作已成功完成");

// 错误弹窗
modalError("错误", "操作失败，请检查");

// 警告弹窗
modalWarning("警告", "此操作可能会影响系统");

const { modalConfirm } = useGlobalMessageContext();

const handleDelete = () => {
  modalConfirm("确认删除", "确定要删除这个项目吗？此操作不可恢复。", {
    okText: "确认删除",
    cancelText: "取消",
    okType: "danger",
    onOk: async () => {
      try {
        await deleteItem();
        success("删除成功");
      } catch (error) {
        error("删除失败");
      }
    },
    onCancel: () => {
      info("已取消删除");
    },
  });
};

const { modalInfo } = useGlobalMessageContext();

modalInfo("详细信息", "这是弹窗内容", {
  width: 800,
  className: "custom-modal",
  okText: "我知道了",
  onOk: () => {
    console.log("用户点击了确定");
  },
});

const { notificationSuccess, notificationError, notificationWarning, notificationInfo } =
  useGlobalMessageContext();

// 成功通知
notificationSuccess("操作成功", "数据已成功保存到服务器");

// 错误通知
notificationError("操作失败", "网络连接异常，请检查后重试");

// 警告通知
notificationWarning("注意", "您的账户余额不足");

// 信息通知
notificationInfo("新消息", "您有一条新的系统消息");

const { notificationInfo } = useGlobalMessageContext();

notificationInfo("系统通知", "这是一条重要的系统消息", {
  duration: 10, // 10秒后自动关闭
  showProgress: true, // 显示进度条
  className: "custom-notification",
  onClose: () => {
    console.log("通知已关闭");
  },
});

const { success } = useGlobalMessageContext();

const sendMultipleMessages = () => {
  // 连续发送多条消息，系统会自动加入队列并按顺序显示
  for (let i = 1; i <= 10; i++) {
    success(`这是第 ${i} 条消息`);
  }
};

import { globalMessageUtils } from "@/hooks/useGlobalMessage";

// 通过事件发送消息
globalMessageUtils.success("操作成功");
globalMessageUtils.error("操作失败");

// 通过事件发送弹窗
globalMessageUtils.modalConfirm("确认", "确定要执行此操作吗？", {
  onOk: () => {
    console.log("用户确认");
  },
});

import React from "react";
import { GlobalMessageProvider } from "@/contexts/GlobalMessageContext";
import App from "./App";

const Root = () => {
  return (
    <GlobalMessageProvider>
      <App />
    </GlobalMessageProvider>
  );
};

import { useGlobalMessageContext } from "@/contexts/GlobalMessageContext";

const MyComponent = () => {
  const { success, error, modalConfirm } = useGlobalMessageContext();

  return (
    <div>
      <button onClick={() => success("成功")}>成功</button>
      <button onClick={() => error("失败")}>失败</button>
    </div>
  );
};

import { globalMessageUtils } from "@/hooks/useGlobalMessage";

// 发送消息
globalMessageUtils.success("操作成功");
globalMessageUtils.error("操作失败");
globalMessageUtils.warning("警告信息");
globalMessageUtils.info("提示信息");

// 发送弹窗
globalMessageUtils.modalInfo("提示", "这是信息弹窗");
globalMessageUtils.modalConfirm("确认", "确定要执行吗？", {
  onOk: () => {
    console.log("确认");
  },
});

import { globalMessageUtils } from "@/hooks/useGlobalMessage";

async function handleApiRequest(url, options) {
  try {
    globalMessageUtils.info("正在发送请求...");
    const response = await fetch(url, options);

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    globalMessageUtils.success("请求成功");
    return data;
  } catch (error) {
    globalMessageUtils.error(`请求失败: ${error.message}`);
    throw error;
  }
}

// 确保正确初始化
const [messageApi, messageContextHolder] = message.useMessage();
const [modalApi, modalContextHolder] = Modal.useModal();
const [notificationApi, notificationContextHolder] = notification.useNotification();

// 确保在组件中渲染 contextHolder
return (
  <>
    {messageContextHolder}
    {modalContextHolder}
    {notificationContextHolder}
    {/* 组件内容 */}
  </>
);

modalConfirm("确认", "确定吗？", {
  onOk: () => {
    // 处理确认逻辑
  },
  onCancel: () => {
    // 处理取消逻辑（可选）
  },
});