@spacecorexdev/core 0.0.4 → 0.0.5

package/src/ui/UIToast.tsx

@@ -0,0 +1,381 @@
+/* eslint-disable react-refresh/only-export-components */
+/**
+ * UIToast - 全局消息提示组件
+ * 
+ * 使用示例：
+ * 
+ * 1. 直接调用 API（推荐）：
+ *    import uiToast from './UIToast';
+ *    
+ *    // 简单消息
+ *    uiToast.success('操作成功');
+ *    uiToast.error('操作失败');
+ *    uiToast.info('提示信息');
+ *    uiToast.warning('警告信息');
+ *    
+ *    // 完整配置
+ *    uiToast.success({
+ *      message: '操作成功',
+ *      descs: '这是一个详细描述',
+ *      duration: 5, // 秒
+ *      placement: 'topRight',
+ *      onClose: () => console.log('Toast已关闭')
+ *    });
+ * 
+ * 2. 使用组件形式（较少使用）：
+ *    import { UIToast } from './UIToast';
+ *    
+ *    <UIToast type="success" message="操作成功" />
+ */
+
+import React, { useEffect, useState, useRef } from 'react';
+import { notification } from 'antd';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import { CheckCircleOutlined, CloseCircleOutlined, InfoCircleOutlined, WarningOutlined } from '@ant-design/icons';
+import type { NotificationArgsProps } from 'antd';
+
+// Toast类型定义
+export type UIToastType = 'success' | 'error' | 'info' | 'warning';
+
+// Toast组件属性接口
+export interface UIToastProps {
+  type: UIToastType;
+  message: string;
+  descs?: string;
+  duration?: number;
+  placement?: NotificationArgsProps['placement'];
+  onClose?: () => void;
+}
+
+// 图标映射
+const iconMap = {
+  success: <CheckCircleOutlined style={{ color: '#52c41a' }} />,
+  error: <CloseCircleOutlined style={{ color: '#ff4d4f' }} />,
+  info: <InfoCircleOutlined style={{ color: '#1677ff' }} />,
+  warning: <WarningOutlined style={{ color: '#faad14' }} />
+};
+
+// Toast组件
+export const UIToast: React.FC<UIToastProps> = ({ 
+  type, 
+  message, 
+  descs = '', 
+  duration = 3, 
+  placement = 'topRight',
+  onClose 
+}) => {
+  const [api, contextHolder] = notification.useNotification();
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const notificationConfig = {
+      message,
+      descs,
+      placement,
+      duration,
+      icon: iconMap[type],
+      onClose: () => {
+        setIsVisible(false);
+        onClose?.();
+      }
+    };
+
+    // 根据类型显示不同的通知
+    if (isVisible) {
+      switch (type) {
+        case 'success':
+          api.success(notificationConfig);
+          break;
+        case 'error':
+          api.error(notificationConfig);
+          break;
+        case 'info':
+          api.info(notificationConfig);
+          break;
+        case 'warning':
+          api.warning(notificationConfig);
+          break;
+        default:
+          api.info(notificationConfig);
+      }
+    }
+  }, [type, message, descs, duration, placement, isVisible, api, onClose]);
+
+  return <>{contextHolder}</>;
+};
+
+// 配置全局消息提示样式
+notification.config({
+  placement: 'topRight',
+  duration: 3,
+  // 确保 toast 显示在全屏 Modal（z-index 1000+）之上，避免被弹窗遮挡
+  ...({ zIndex: 10000 } as Record<string, unknown>),
+});
+
+// Singleton Toast 全局唯一Toast管理器
+interface SingletonToastConfig {
+  key: string;
+  type: UIToastType;
+  message: string;
+  descs?: string;
+  duration: number;
+  placement?: NotificationArgsProps['placement'];
+  onClose?: () => void;
+}
+
+interface SingletonToastState {
+  key: string;
+  type: UIToastType;
+  message: string;
+  descs?: string;
+  duration: number;
+  placement?: NotificationArgsProps['placement'];
+  timer: NodeJS.Timeout | null;
+}
+
+class SingletonToastManager {
+  private static instance: SingletonToastManager;
+  private currentToast: SingletonToastState | null = null;
+  private api: NotificationInstance | null = null;
+  private isInitialized = false;
+  private pendingToast: SingletonToastConfig | null = null;
+
+  private constructor() {}
+
+  static getInstance(): SingletonToastManager {
+    if (!SingletonToastManager.instance) {
+      SingletonToastManager.instance = new SingletonToastManager();
+    }
+    return SingletonToastManager.instance;
+  }
+
+  // 初始化 API
+  init(api: NotificationInstance) {
+    this.api = api;
+    this.isInitialized = true;
+    
+    // 如果有等待中的 toast，立即显示
+    if (this.pendingToast) {
+      const config = this.pendingToast;
+      this.pendingToast = null;
+      this.show(config);
+    }
+  }
+
+  // 显示全局唯一Toast
+  show(config: SingletonToastConfig) {
+    const { key, type, message, descs, duration, placement, onClose } = config;
+
+    // 如果 API 未初始化，保存配置等待初始化
+    if (!this.isInitialized || !this.api) {
+      this.pendingToast = config;
+      return;
+    }
+
+    // 清除之前的定时器
+    if (this.currentToast?.timer) {
+      clearTimeout(this.currentToast.timer);
+    }
+
+    // 如果是同一个类型的 toast（相同 key），只更新内容并重置时间
+    if (this.currentToast && this.currentToast.key === key) {
+      // 销毁旧的通知
+      notification.destroy(key);
+      
+      // 重新创建（通过重新调用来实现时间重置）
+      this.createNotification({ key, type, message, descs, duration, placement, onClose });
+    } else {
+      // 销毁之前的 toast（如果存在不同 key）
+      if (this.currentToast) {
+        notification.destroy(this.currentToast.key);
+      }
+      
+      // 创建新的 toast
+      this.createNotification({ key, type, message, descs, duration, placement, onClose });
+    }
+  }
+
+  // 创建通知
+  private createNotification(config: SingletonToastConfig) {
+    if (!this.api) return;
+
+    const { key, type, message, descs, duration, placement, onClose } = config;
+
+    const notificationMethod = {
+      success: this.api.success.bind(this.api),
+      error: this.api.error.bind(this.api),
+      info: this.api.info.bind(this.api),
+      warning: this.api.warning.bind(this.api)
+    }[type];
+
+    notificationMethod({
+      key,
+      message,
+      description: descs,
+      duration,
+      placement: placement || 'topRight',
+      icon: iconMap[type],
+      onClose: () => {
+        if (this.currentToast?.key === key) {
+          if (this.currentToast.timer) {
+            clearTimeout(this.currentToast.timer);
+          }
+          this.currentToast = null;
+        }
+        onClose?.();
+      }
+    });
+
+    // 保存当前 toast 状态
+    this.currentToast = {
+      key,
+      type,
+      message,
+      descs,
+      duration,
+      placement,
+      timer: null
+    };
+  }
+
+  // 关闭当前 toast
+  close() {
+    if (this.currentToast) {
+      if (this.currentToast.timer) {
+        clearTimeout(this.currentToast.timer);
+      }
+      notification.destroy(this.currentToast.key);
+      this.currentToast = null;
+    }
+  }
+
+  // 销毁所有 toast
+  destroy() {
+    this.close();
+    notification.destroy();
+  }
+}
+
+// 获取 SingletonToastManager 实例
+const singletonManager = SingletonToastManager.getInstance();
+
+// 辅助函数：解析 toast 选项
+function parseToastOptions(options: UIToastOptions | string): UIToastOptions {
+  if (typeof options === 'string') {
+    return { message: options, duration: 3 };
+  }
+  return options;
+}
+
+// 辅助函数：获取图标
+function getIcon(type: UIToastType) {
+  return iconMap[type];
+}
+
+// 通用toast选项接口
+interface UIToastOptions {
+  message: string;
+  descs?: string;
+  duration?: number;
+  placement?: NotificationArgsProps['placement'];
+  onClose?: () => void;
+}
+
+// 创建toast API
+const uiToast = {
+  success: (options: UIToastOptions | string) => {
+    if (!options) return;
+    const config = parseToastOptions(options);
+    
+    notification.success({
+      message: config.message,
+      description: config.descs,
+      duration: config.duration,
+      placement: config.placement,
+      icon: getIcon('success'),
+      onClose: config.onClose
+    });
+  },
+  
+  error: (options: UIToastOptions | string) => {
+    if (!options) return;
+    const config = parseToastOptions(options);
+    
+    notification.error({
+      message: config.message,
+      description: config.descs,
+      duration: config.duration,
+      placement: config.placement,
+      icon: getIcon('error'),
+      onClose: config.onClose
+    });
+  },
+  
+  info: (options: UIToastOptions | string) => {
+    if (!options) return;
+    const config = parseToastOptions(options);
+    
+    notification.info({
+      message: config.message,
+      description: config.descs,
+      duration: config.duration,
+      placement: config.placement,
+      icon: getIcon('info'),
+      onClose: config.onClose
+    });
+  },
+  
+  warning: (options: UIToastOptions | string) => {
+    if (!options) return;
+    const config = parseToastOptions(options);
+    
+    notification.warning({
+      message: config.message,
+      description: config.descs,
+      duration: config.duration,
+      placement: config.placement,
+      icon: getIcon('warning'),
+      onClose: config.onClose
+    });
+  },
+  
+  // 自定义类型的toast
+  custom: (type: UIToastType, options: UIToastOptions) => {
+    const { message, descs, duration, placement, onClose } = options;
+    
+    notification[type]({
+      message,
+      description: descs,
+      duration,
+      placement,
+      icon: getIcon(type),
+      onClose
+    });
+  }
+};
+
+// SingletonToast 组件 - 用于初始化 Singleton API
+interface SingletonToastProviderProps {
+  children: React.ReactNode;
+}
+
+export const SingletonToastProvider: React.FC<SingletonToastProviderProps> = ({ children }) => {
+  const [api, contextHolder] = notification.useNotification();
+  const hasInitialized = useRef(false);
+
+  useEffect(() => {
+    if (!hasInitialized.current) {
+      singletonManager.init(api);
+      hasInitialized.current = true;
+    }
+  }, [api]);
+
+  return (
+    <>
+      {contextHolder}
+      {children}
+    </>
+  );
+};
+
+export default uiToast; 

package/src/ui/UIToastExample.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+import uiToast from './UIToast';
+
+const ToastExample: React.FC = () => {
+  // 简单字符串用法
+  const showSimpleSuccess = () => {
+    uiToast.success('操作成功！');
+  };
+
+  // 带描述的用法
+  const showDetailedError = () => {
+    uiToast.error({
+      message: '操作失败',
+      descs: '服务器连接超时，请稍后再试。',
+      duration: 5
+    });
+  };
+
+  // 信息提示
+  const showInfo = () => {
+    uiToast.info({
+      message: '系统通知',
+      descs: '系统将在30分钟后进行维护。',
+      placement: 'top'
+    });
+  };
+
+  // 警告提示
+  const showWarning = () => {
+    uiToast.warning('请注意，您的操作可能导致数据丢失！');
+  };
+
+  // 自定义提示
+  const showCustom = () => {
+    uiToast.custom('info', {
+      message: '自定义提示',
+      descs: '这是使用custom方法创建的提示',
+      duration: 4,
+      placement: 'bottomRight',
+      onClose: () => console.log('提示已关闭')
+    });
+  };
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h2>Toast 提示示例</h2>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <Button type="primary" onClick={showSimpleSuccess}>
+          显示成功提示
+        </Button>
+        <Button danger onClick={showDetailedError}>
+          显示错误提示（带详情）
+        </Button>
+        <Button onClick={showInfo}>
+          显示信息提示（顶部）
+        </Button>
+        <Button onClick={showWarning}>
+          显示警告提示
+        </Button>
+        <Button type="dashed" onClick={showCustom}>
+          显示自定义提示（右下角）
+        </Button>
+      </Space>
+    </div>
+  );
+};
+
+export default ToastExample;