web-map/src/utils/message.ts

// 消息提示工具
export interface MessageOptions {
    type: 'success' | 'error' | 'warning' | 'info';
    message: string;
    duration?: number;
  }
  
// 创建消息提示元素
const createMessageElement = (options: MessageOptions): HTMLElement => {
  const messageEl = document.createElement('div');
  messageEl.className = `storage-message storage-message-${options.type}`;
  messageEl.textContent = options.message;
    
  // 添加样式
  Object.assign(messageEl.style, {
    position: 'fixed',
    top: '20px',
    left: '50%',
    transform: 'translateX(-50%)',
    zIndex: '9999',
    padding: '12px 24px',
    borderRadius: '6px',
    color: 'white',
    fontSize: '14px',
    fontWeight: '500',
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
    transition: 'all 0.3s ease',
    maxWidth: '400px',
    textAlign: 'center',
    wordWrap: 'break-word',
  });
  
  // 根据类型设置背景色
  const colors = {
    success: '#52c41a',
    error: '#ff4d4f',
    warning: '#faad14',
    info: '#1890ff',
  };
    
  messageEl.style.backgroundColor = colors[options.type];
    
  return messageEl;
};
  
// 显示消息
export const showMessage = (options: MessageOptions): void => {
  const messageEl = createMessageElement(options);
    
  // 添加到页面
  document.body.appendChild(messageEl);
    
  // 添加进入动画
  requestAnimationFrame(() => {
    messageEl.style.opacity = '1';
    messageEl.style.transform = 'translateX(-50%) translateY(0)';
  });
    
  // 自动移除
  const duration = options.duration || 3000;
  setTimeout(() => {
    messageEl.style.opacity = '0';
    messageEl.style.transform = 'translateX(-50%) translateY(-20px)';
      
    setTimeout(() => {
      if (messageEl.parentNode) {
        messageEl.parentNode.removeChild(messageEl);
      }
    }, 300);
  }, duration);
};
  
// 便捷方法
export const message = {
  success: (message: string, duration?: number) => 
    showMessage({ type: 'success', message, duration }),
    
  error: (message: string, duration?: number) => 
    showMessage({ type: 'error', message, duration }),
    
  warning: (message: string, duration?: number) => 
    showMessage({ type: 'warning', message, duration }),
    
  info: (message: string, duration?: number) => 
    showMessage({ type: 'info', message, duration }),
};
  
// 添加全局样式
const addGlobalStyles = () => {
  if (document.getElementById('storage-message-styles')) return;
    
  const style = document.createElement('style');
  style.id = 'storage-message-styles';
  style.textContent = `
      .storage-message {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
      }
      
      .storage-message-success {
        background-color: #52c41a;
      }
      
      .storage-message-error {
        background-color: #ff4d4f;
      }
      
      .storage-message-warning {
        background-color: #faad14;
      }
      
      .storage-message-info {
        background-color: #1890ff;
      }
    `;
    
  document.head.appendChild(style);
};
  
// 初始化样式
addGlobalStyles();