新增提示Toast组件
This commit is contained in:
@@ -0,0 +1,204 @@
|
||||
import { useState } from 'react';
|
||||
import { MessageModal, messageService, MessageModalProvider } from '~/components/ui/MessageModal';
|
||||
import type { MessageType } from '~/components/ui/MessageModal';
|
||||
import { LinksFunction } from '@remix-run/node';
|
||||
import messageModalStyles from '~/styles/components/message-modal.css?url';
|
||||
|
||||
export const links: LinksFunction = () => [
|
||||
{ rel: "stylesheet", href: messageModalStyles },
|
||||
];
|
||||
|
||||
export default function MessageModalExample() {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [modalType, setModalType] = useState<MessageType>('info');
|
||||
const [modalTitle, setModalTitle] = useState('');
|
||||
const [modalMessage, setModalMessage] = useState('');
|
||||
const [withConfirm, setWithConfirm] = useState(false);
|
||||
const [autoClose, setAutoClose] = useState(false);
|
||||
|
||||
// 打开普通模态框
|
||||
const openModal = (type: MessageType, title: string, message: string) => {
|
||||
setModalType(type);
|
||||
setModalTitle(title);
|
||||
setModalMessage(message);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
// 打开各类型的服务提示框
|
||||
const showSuccessMessage = () => {
|
||||
messageService.success('操作成功完成！', {
|
||||
title: '成功提示',
|
||||
autoClose: true
|
||||
});
|
||||
};
|
||||
|
||||
const showErrorMessage = () => {
|
||||
messageService.error('操作过程中发生错误，请重试。', {
|
||||
title: '错误提示'
|
||||
});
|
||||
};
|
||||
|
||||
const showWarningMessage = () => {
|
||||
messageService.warning('此操作可能产生不可逆转的结果。', {
|
||||
title: '警告提示',
|
||||
onConfirm: () => {
|
||||
messageService.success('您已确认继续操作')
|
||||
},
|
||||
confirmText: '继续操作',
|
||||
cancelText: '取消'
|
||||
});
|
||||
};
|
||||
|
||||
const showInfoMessage = () => {
|
||||
messageService.info('系统将于今晚10点进行升级维护。', {
|
||||
title: '通知',
|
||||
autoClose: true,
|
||||
autoCloseDelay: 5000
|
||||
});
|
||||
};
|
||||
|
||||
const showCustomMessage = () => {
|
||||
messageService.show({
|
||||
title: '自定义消息',
|
||||
message: '这是一个带有自定义内容的消息',
|
||||
type: 'info',
|
||||
confirmText: '了解',
|
||||
children: (
|
||||
<div style={{
|
||||
padding: '10px',
|
||||
backgroundColor: '#f0f0f0',
|
||||
borderRadius: '6px',
|
||||
marginTop: '10px'
|
||||
}}>
|
||||
<p>这里可以放置更复杂的自定义内容。</p>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginTop: '10px'
|
||||
}}>
|
||||
<i className="ri-information-line" style={{ marginRight: '8px', color: '#1890ff' }}></i>
|
||||
<span>比如详细的操作说明或其他信息。</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
});
|
||||
};
|
||||
|
||||
// 处理确认
|
||||
const handleConfirm = () => {
|
||||
messageService.success('您点击了确认按钮！', { autoClose: true });
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<MessageModalProvider>
|
||||
<div className="container mx-auto p-6">
|
||||
<h1 className="text-2xl font-bold mb-6">消息模态框示例</h1>
|
||||
|
||||
<div className="bg-white rounded-lg p-6 shadow-md mb-8">
|
||||
<h2 className="text-xl font-semibold mb-4">基本用法</h2>
|
||||
<p className="mb-4">您可以直接使用MessageModal组件来控制模态框的显示和隐藏。</p>
|
||||
|
||||
<div className="flex flex-wrap gap-3 mb-6">
|
||||
<button
|
||||
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
|
||||
onClick={() => openModal('info', '信息提示', '这是一个普通的信息提示框')}
|
||||
>
|
||||
信息提示框
|
||||
</button>
|
||||
<button
|
||||
className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
|
||||
onClick={() => openModal('success', '成功提示', '操作已成功完成')}
|
||||
>
|
||||
成功提示框
|
||||
</button>
|
||||
<button
|
||||
className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
|
||||
onClick={() => openModal('error', '错误提示', '操作失败，请检查输入')}
|
||||
>
|
||||
错误提示框
|
||||
</button>
|
||||
<button
|
||||
className="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600"
|
||||
onClick={() => openModal('warning', '警告提示', '此操作将删除数据，是否继续？')}
|
||||
>
|
||||
警告提示框
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-4 mb-4">
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={withConfirm}
|
||||
onChange={(e) => setWithConfirm(e.target.checked)}
|
||||
className="mr-2"
|
||||
/>
|
||||
添加确认按钮
|
||||
</label>
|
||||
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={autoClose}
|
||||
onChange={(e) => setAutoClose(e.target.checked)}
|
||||
className="mr-2"
|
||||
/>
|
||||
自动关闭 (3秒)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<MessageModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
title={modalTitle}
|
||||
message={modalMessage}
|
||||
type={modalType}
|
||||
autoClose={autoClose}
|
||||
onConfirm={withConfirm ? handleConfirm : undefined}
|
||||
confirmText={withConfirm ? "确认" : "我知道了"}
|
||||
cancelText="取消"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-6 shadow-md mb-8">
|
||||
<h2 className="text-xl font-semibold mb-4">全局消息服务</h2>
|
||||
<p className="mb-4">使用messageService可以在任何组件中方便地显示消息提示，而无需手动管理状态。</p>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button
|
||||
className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
|
||||
onClick={showSuccessMessage}
|
||||
>
|
||||
成功提示 (自动关闭)
|
||||
</button>
|
||||
<button
|
||||
className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
|
||||
onClick={showErrorMessage}
|
||||
>
|
||||
错误提示
|
||||
</button>
|
||||
<button
|
||||
className="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600"
|
||||
onClick={showWarningMessage}
|
||||
>
|
||||
警告提示 (带确认)
|
||||
</button>
|
||||
<button
|
||||
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
|
||||
onClick={showInfoMessage}
|
||||
>
|
||||
信息提示 (5秒后关闭)
|
||||
</button>
|
||||
<button
|
||||
className="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600"
|
||||
onClick={showCustomMessage}
|
||||
>
|
||||
自定义内容提示
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MessageModalProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user