Maas-Model-platform/frontend/components/NotificationExample.tsx

/**
 * 通知系统使用示例
 * 
 * 这个文件展示了如何在组件中使用 useToast 和 useConfirm
 */

import React from 'react';
import { useToast } from '../contexts/NotificationContext';
import { useConfirm } from '../contexts/NotificationContext';

const NotificationExample: React.FC = () => {
  const { showToast } = useToast();
  const { showConfirm } = useConfirm();

  // ============ Toast 使用示例 ============
  
  // 替换 alert('操作成功')
  const handleSuccess = () => {
    showToast('操作成功', 'success');
  };

  // 替换 alert('操作失败')
  const handleError = () => {
    showToast('操作失败，请重试', 'error');
  };

  // ============ Confirm 使用示例 ============
  
  // 替换 if (!confirm('确定删除吗？')) return;
  const handleDelete = async () => {
    const confirmed = await showConfirm({
      title: '确认删除',
      message: '确定要删除这条记录吗？',
      confirmText: '删除',
      cancelText: '取消',
      danger: true
    });

    if (confirmed) {
      // 执行删除操作
      showToast('删除成功', 'success');
    }
  };

  // 普通确认对话框
  const handleSave = async () => {
    const confirmed = await showConfirm({
      title: '保存更改',
      message: '确定要保存当前的更改吗？',
      confirmText: '保存',
      cancelText: '取消'
    });

    if (confirmed) {
      // 执行保存操作
      showToast('保存成功', 'success');
    }
  };

  // 多行消息
  const handleComplexConfirm = async () => {
    const confirmed = await showConfirm({
      title: '批量删除',
      message: '确定要删除选中的 5 个文档吗？\n\n此操作不可恢复，请谨慎操作。',
      confirmText: '确定删除',
      cancelText: '取消',
      danger: true
    });

    if (confirmed) {
      showToast('批量删除成功', 'success');
    }
  };

  return (
    <div className="p-8 space-y-4">
      <h2 className="text-2xl font-bold mb-6">通知系统使用示例</h2>
      
      <div className="space-y-2">
        <h3 className="text-lg font-semibold">Toast 示例</h3>
        <button
          onClick={handleSuccess}
          className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 mr-2"
        >
          显示成功提示
        </button>
        <button
          onClick={handleError}
          className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
        >
          显示错误提示
        </button>
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-semibold">Confirm 示例</h3>
        <button
          onClick={handleDelete}
          className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 mr-2"
        >
          删除操作（危险）
        </button>
        <button
          onClick={handleSave}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 mr-2"
        >
          保存操作（普通）
        </button>
        <button
          onClick={handleComplexConfirm}
          className="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700"
        >
          复杂确认
        </button>
      </div>
    </div>
  );
};

export default NotificationExample;