新增提示Toast组件

2025-04-21 09:22:13 +08:00
parent 01d93522b8
commit 5c2c367856
36 changed files with 2609 additions and 478 deletions
@@ -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>
+  );
+} 
@@ -0,0 +1,164 @@
+import { useState } from 'react';
+import { Toast, toastService } from '~/components/ui/Toast';
+import type { ToastType } from '~/components/ui/Toast';
+import { LinksFunction } from '@remix-run/node';
+import toastStyles from '~/styles/components/toast.css?url';
+
+export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: toastStyles },
+];
+
+export default function ToastExample() {
+  const [isToastOpen, setIsToastOpen] = useState(false);
+  const [toastType, setToastType] = useState<ToastType>('info');
+  const [toastMessage, setToastMessage] = useState('');
+  const [autoClose, setAutoClose] = useState(true);
+  
+  // 打开普通通知
+  const openToast = (type: ToastType, message: string) => {
+    setToastType(type);
+    setToastMessage(message);
+    setIsToastOpen(true);
+  };
+  
+  // 使用服务显示不同类型通知
+  const showSuccessToast = () => {
+    toastService.success('操作成功完成！');
+  };
+  
+  const showErrorToast = () => {
+    toastService.error('操作过程中发生错误，请重试。');
+  };
+  
+  const showWarningToast = () => {
+    toastService.warning('此操作可能产生不可逆转的结果。');
+  };
+  
+  const showInfoToast = () => {
+    toastService.info('系统将于今晚10点进行升级维护。');
+  };
+  
+  // 显示多行文本的长通知
+  const showLongToast = () => {
+    toastService.info('这是一个具有很长内容的通知，将自动换行以适应容器宽度，并且最多显示三行，超出部分会被截断。系统会自动处理长文本的换行和截断，确保显示效果一致。');
+  };
+  
+  // 短时间内显示多个通知
+  const showMultipleToasts = () => {
+    toastService.success('第一条通知');
+    setTimeout(() => {
+      toastService.info('第二条通知');
+    }, 300);
+    setTimeout(() => {
+      toastService.warning('第三条通知');
+    }, 600);
+    setTimeout(() => {
+      toastService.error('第四条通知');
+    }, 900);
+  };
+  
+  return (
+    <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">您可以直接使用Toast组件来控制通知的显示和隐藏。</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={() => openToast('info', '这是一个信息通知')}
+          >
+            信息通知
+          </button>
+          <button 
+            className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
+            onClick={() => openToast('success', '操作已成功完成')}
+          >
+            成功通知
+          </button>
+          <button 
+            className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+            onClick={() => openToast('error', '操作失败，请检查输入')}
+          >
+            错误通知
+          </button>
+          <button 
+            className="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600"
+            onClick={() => openToast('warning', '请注意，这是一个警告通知')}
+          >
+            警告通知
+          </button>
+        </div>
+        
+        <div className="mb-4">
+          <label className="flex items-center">
+            <input 
+              type="checkbox"
+              checked={autoClose}
+              onChange={(e) => setAutoClose(e.target.checked)}
+              className="mr-2"
+            />
+            自动关闭 (3秒)
+          </label>
+        </div>
+        
+        <Toast
+          isOpen={isToastOpen}
+          onClose={() => setIsToastOpen(false)}
+          message={toastMessage}
+          type={toastType}
+          autoClose={autoClose}
+        />
+      </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">使用toastService可以在任何组件中方便地显示通知，而无需手动管理状态。</p>
+        
+        <div className="flex flex-wrap gap-3 mb-6">
+          <button 
+            className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
+            onClick={showSuccessToast}
+          >
+            成功通知
+          </button>
+          <button 
+            className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+            onClick={showErrorToast}
+          >
+            错误通知
+          </button>
+          <button 
+            className="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600"
+            onClick={showWarningToast}
+          >
+            警告通知
+          </button>
+          <button 
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+            onClick={showInfoToast}
+          >
+            信息通知
+          </button>
+        </div>
+        
+        <div className="flex flex-wrap gap-3">
+          <button 
+            className="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600"
+            onClick={showLongToast}
+          >
+            长文本通知
+          </button>
+          <button 
+            className="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600"
+            onClick={showMultipleToasts}
+          >
+            多个通知
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}