leaudit-platform-frontend/app/routes/examples/toast.tsx

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>
  );
}