chrome-extension/.history/components/CustomMessage_20250814103039.tsx

// 在 DesignPic.tsx 中添加自定义消息组件
export const CustomMessage = {
  success: (content: string) => {
    showCustomMessage('success', content);
  },
  error: (content: string) => {
    showCustomMessage('error', content);
  },
  warning: (content: string) => {
    showCustomMessage('warning', content);
  },
  info: (content: string) => {
    showCustomMessage('info', content);
  }
};

// 自定义消息显示函数
const showCustomMessage = (type: 'success' | 'error' | 'warning' | 'info', message: string) => {
  // 移除已存在的消息
  const existingMessages = document.querySelectorAll('.custom-message');
  existingMessages.forEach(msg => msg.remove());

  const messageContainer = document.createElement('div');
  messageContainer.className = 'custom-message';
  messageContainer.style.cssText = `
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: 4px;
    color: white;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 200px;
    text-align: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  `;
  
  let icon = '';
  // 根据不同类型设置样式和图标
  switch(type) {
    case 'success':
      messageContainer.style.background = '#52c41a';
      icon = '✓';
      break;
    case 'error':
      messageContainer.style.background = '#ff4d4f';
      icon = '✗';
      break;
    case 'warning':
      messageContainer.style.background = '#faad14';
      icon = '⚠';
      break;
    default:
      messageContainer.style.background = '#1890ff';
      icon = 'ℹ';
  }
  
  messageContainer.innerHTML = `
    <span style="font-size: 16px;">${icon}</span>
    <span>${message}</span>
  `;
  
  document.body.appendChild(messageContainer);
  
  // 3秒后自动移除
  setTimeout(() => {
    if (messageContainer.parentNode) {
      messageContainer.parentNode.removeChild(messageContainer);
    }
  }, 3000);
};

// 然后在你的代码中替换所有的 Message 调用
// 原来的:
// Message.success("图片上传结束")

// 替换为:
// CustomMessage.success("图片上传结束")