ruoyi-react-front/app/_modules/globalMessage.ts

// 定义消息类型
type MessageType = 'success' | 'error' | 'default' | 'warning' | 'info';

// 定义消息配置接口
interface MessageConfig {
  content: string;
  type?: MessageType;
  duration?: number;
}

// 定义消息返回接口
interface MessageInstance {
  close: () => void;
}

// 消息容器样式
const containerStyle = `
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
`;

// 消息基础样式
const baseMessageStyle = `
  padding: 12px 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 300px;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateX(100%);
  word-break: break-word;
`;

// 成功消息样式
const successStyle = `
  ${baseMessageStyle}
  background-color: #f0f9eb;
  border-left: 4px solid #52c41a;
  color: #1f6d31;
`;

// 警告消息样式
const warningStyle = `  ${baseMessageStyle}  background-color: #fffbe6;
  border-left: 4px solid #faad14;
  color: #d48806;`;

// 错误消息样式
const errorStyle = `
  ${baseMessageStyle}
  background-color: #fff2f0;
  border-left: 4px solid #ff4d4f;
  color: #b3261e;
`;

// 信息消息样式
const infoStyle = `
  ${baseMessageStyle}
  background-color: #e6f7ff;
  border-left: 4px solid #1890ff;
  color: #0c5460;
`;

// 默认消息样式
const defaultStyle = `
  ${baseMessageStyle}
  background-color: #f0f2f5;
  border-left: 4px solid #1890ff;
  color: #1890ff;
`;

// 图标样式
const iconStyle = `
  font-size: 16px;
`;

// 消息容器
let container: HTMLDivElement | null = null;
let messageCount = 0;

// 创建消息容器
function createContainer(): void {
  if (container) return;

  container = document.createElement('div');
  container.style.cssText = containerStyle;
  document.body.appendChild(container);
}

// 创建图标元素
function createIcon(type: MessageType): HTMLSpanElement {
  const icon = document.createElement('span');
  icon.style.cssText = iconStyle;

  switch(type) {
    case 'success':
      icon.innerHTML = '✓'; // 成功图标
      break;
    case 'error':
      icon.innerHTML = '✕'; // 错误图标
      break;
    case 'warning':
      icon.innerHTML = '⚠'; // 警告图标
      break;
    case 'info':
      icon.innerHTML = 'ℹ'; // 信息图标
      break;
    default:
      icon.innerHTML = 'i'; // 信息图标
  }

  return icon;
}

// 显示消息
function showMessage(
  content: string,
  type: MessageType = 'default',
  duration: number = 3000
): MessageInstance {
  createContainer();

  // 创建消息元素
  const messageId = `message-${Date.now()}-${messageCount++}`;
  const messageEl = document.createElement('div');
  messageEl.id = messageId;

  // 设置样式
  switch(type) {
    case 'success':
      messageEl.style.cssText = successStyle;
      break;
    case 'error':
      messageEl.style.cssText = errorStyle;
      break;
    case 'warning':
      messageEl.style.cssText = warningStyle;
      break;
    case 'info':
      messageEl.style.cssText = infoStyle;
      break;
    default:
      messageEl.style.cssText = defaultStyle;
  }

  // 创建图标和内容
  const icon = createIcon(type);
  const contentEl = document.createElement('span');
  contentEl.textContent = content;

  // 组装消息元素
  messageEl.appendChild(icon);
  messageEl.appendChild(contentEl);
  container!.appendChild(messageEl);

  // 触发动画
  setTimeout(() => {
    messageEl.style.opacity = '1';
    messageEl.style.transform = 'translateX(0)';
  }, 10);

  // 自动关闭
  const timer = setTimeout(() => {
    closeMessage(messageId);
  }, duration);

  // 点击关闭
  messageEl.addEventListener('click', () => {
    clearTimeout(timer);
    closeMessage(messageId);
  });

  return {
    close: () => {
      clearTimeout(timer);
      closeMessage(messageId);
    }
  };
}

// 关闭消息
function closeMessage(id: string): void {
  const messageEl = document.getElementById(id);
  if (!messageEl) return;

  // 触发退出动画
  messageEl.style.opacity = '0';
  messageEl.style.transform = 'translateX(100%)';

  // 移除元素
  setTimeout(() => {
    if (container && messageEl.parentNode === container) {
      container.removeChild(messageEl);
    }
  }, 300);
}

// 导出公共方法
export const message = {
  /**
   * 显示成功消息
   * @param content 消息内容
   * @param duration 显示时长(毫秒)，默认3000
   * @returns 包含close方法的消息实例
   */
  success: (content: string, duration: number = 3000): MessageInstance => {
    return showMessage(content, 'success', duration);
  },

  /**
   * 显示错误消息
   * @param content 消息内容
   * @param duration 显示时长(毫秒)，默认3000
   * @returns 包含close方法的消息实例
   */
  error: (content: string, duration: number = 3000): MessageInstance => {
    return showMessage(content, 'error', duration);
  },

  /**
   * 显示警告消息
   * @param content 消息内容
   * @param duration 显示时长(毫秒)，默认3000
   * @returns 包含close方法的消息实例
   */
  warning: (content: string, duration: number = 3000): MessageInstance => {
    return showMessage(content, 'warning', duration);
  },

  /**
   * 显示信息消息
   * @param content 消息内容
   * @param duration 显示时长(毫秒)，默认3000
   * @returns 包含close方法的消息实例
   */
  info: (content: string, duration: number = 3000): MessageInstance => {
    return showMessage(content, 'info', duration);
  },

  /**
   * 显示自定义消息
   * @param config 消息配置
   * @returns 包含close方法的消息实例
   */
  open: (config: MessageConfig): MessageInstance => {
    const { content, type = 'default', duration = 3000 } = config;
    return showMessage(content, type, duration);
  },

  /**
   * 关闭所有消息
   */
  destroy: (): void => {
    if (container) {
      container.innerHTML = '';
    }
  }
};

export default message;