import React from 'react'
// 自定义消息组件
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);
}
};
type MessageType = 'success' | 'error' | 'warning' | 'info';
// 自定义消息显示函数
const showCustomMessage = (type: MessageType, message: string) => {
// 移除已存在的消息
const existingMessages = document.querySelectorAll('.custom-message');
existingMessages.forEach(msg => msg.remove());
const messageContainer = document.createElement('div');
messageContainer.className = `custom-message fixed top-5 left-1/2 gap-2 flex justify-center items-center leading-[18px] rounded-lg px-4 py-2
bg-[#fff] min-w-[200px] z-[10000] transition-all duration-300 shadow-[0_4px_12px_rgb(0_0_0/0.15)] -translate-x-1/2`;
// messageContainer.style.cssText = `
// font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
// `;
let icon = '';
// 根据不同类型设置样式和图标
switch (type) {
case 'success':
messageContainer.style.color = '#52c41a';
icon = '';
break;
case 'error':
messageContainer.style.color = '#ff4d4f';
icon = '';
break;
case 'warning':
messageContainer.style.color = '#faad14';
icon = '';
break;
default:
messageContainer.style.color = '#1890ff';
icon = '';
}
messageContainer.innerHTML = `
${icon}
${message}
`;
document.body.appendChild(messageContainer);
// 3秒后自动移除
setTimeout(() => {
if (messageContainer.parentNode) {
messageContainer.parentNode.removeChild(messageContainer);
}
}, 3000);
};