@spacecorexdev/core 0.0.2 → 0.0.5

package/src/ui/UIToastSingle.tsx

@@ -0,0 +1,279 @@
+/* eslint-disable react-refresh/only-export-components */
+/**
+ * UIToastSingle - 全局唯一消息提示组件
+ * 
+ * 使用示例：
+ * 
+ * 1. 直接调用 API（推荐）：
+ *    import { UIToastSingle } from './UIToastSingle';
+ *    
+ *    // 简单消息
+ *    UIToastSingle.success('操作成功');
+ *    UIToastSingle.error('操作失败');
+ *    UIToastSingle.info('提示信息');
+ *    UIToastSingle.warning('警告信息');
+ *    
+ *    // 完整配置
+ *    UIToastSingle.success({
+ *      key: 'my-toast', // 唯一标识，用于更新或关闭
+ *      message: '操作成功',
+ *      descs: '这是一个详细描述',
+ *      duration: 5, // 秒，0表示不自动关闭
+ *      placement: 'topRight',
+ *      onClose: () => console.log('Toast已关闭')
+ *    });
+ *    
+ *    // 下载进度提示（不自动关闭，手动关闭）
+ *    UIToastSingle.info({
+ *      key: 'download-progress',
+ *      message: '下载进度: 50%',
+ *      duration: 0 // 不自动关闭
+ *    });
+ *    // 下载完成后手动关闭
+ *    UIToastSingle.close('download-progress');
+ *    
+ *    // 销毁所有 toast
+ *    UIToastSingle.destroy();
+ * 
+ * 特点：
+ * - 同一类型的 toast 只会显示一个，新的会替换旧的
+ * - 可以通过 key 自定义唯一标识
+ * - 可以手动关闭指定 key 的 toast
+ */
+
+import React from 'react';
+import { notification } from 'antd';
+import { CheckCircleOutlined, CloseCircleOutlined, InfoCircleOutlined, WarningOutlined } from '@ant-design/icons';
+
+// Toast 类型定义
+type UIToastSingleType = 'success' | 'error' | 'info' | 'warning';
+
+// Singleton Toast 配置选项
+export interface UIToastSingleOptions {
+  key?: string;
+  message: React.ReactNode;
+  descs?: React.ReactNode;
+  duration?: number; // 单位：秒
+  placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'top' | 'bottom';
+  onClose?: () => void;
+}
+
+// 内部使用的完整配置对象
+interface SingletonToastConfig {
+  key: string;
+  type: UIToastSingleType;
+  message: React.ReactNode;
+  descs?: React.ReactNode;
+  duration: number;
+  placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'top' | 'bottom';
+  onClose?: () => void;
+}
+
+// 当前活动的 toast 状态
+interface CurrentToastState {
+  key: string;
+  type: UIToastSingleType;
+  message: React.ReactNode;
+  descs?: React.ReactNode;
+  duration: number;
+  placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'top' | 'bottom';
+}
+
+// 图标映射
+const iconMap: Record<UIToastSingleType, React.ReactNode> = {
+  success: <CheckCircleOutlined style={{ color: '#52c41a' }} />,
+  error: <CloseCircleOutlined style={{ color: '#ff4d4f' }} />,
+  info: <InfoCircleOutlined style={{ color: '#1890ff' }} />,
+  warning: <WarningOutlined style={{ color: '#faad14' }} />
+};
+
+// 全局唯一的 toast 状态管理类
+class SingletonToastManager {
+  private currentToast: CurrentToastState | null = null;
+  // 由代码主动 destroy/close 的 key 集合：这些关闭属于"编程式替换/关闭"，
+  // 不能触发调用方传入的 onClose（例如下载进度 toast 的 onClose 是取消下载，
+  // 若被其他 toast 替换或同 key 刷新时误触发，会导致下载被意外 abort）。
+  private suppressedCloseKeys = new Set<string>();
+
+  // 编程式销毁通知：抑制该通知的用户 onClose 回调
+  private destroySilently(key: string) {
+    this.suppressedCloseKeys.add(key);
+    notification.destroy(key);
+  }
+
+  // 显示全局唯一Toast
+  show(config: SingletonToastConfig) {
+    const { key, type, message, descs, duration, placement, onClose } = config;
+
+    // 如果是同一个 key 的 toast，直接用相同 key 再次 open：
+    // antd 5（rc-notification）对相同 key 会原位更新通知内容并重置计时，
+    // 不会触发 onClose。绝不能先 destroy 再重建——destroy 会触发旧通知的
+    // onClose，导致例如下载进度回调每次刷新都把下载 abort 掉。
+    if (this.currentToast && this.currentToast.key === key) {
+      this.createNotification({ key, type, message, descs, duration, placement, onClose });
+    } else {
+      // 不同 key 替换旧 toast 属于编程式关闭，不应执行旧 toast 的 onClose
+      if (this.currentToast) {
+        this.destroySilently(this.currentToast.key);
+      }
+
+      // 创建新的 toast
+      this.createNotification({ key, type, message, descs, duration, placement, onClose });
+    }
+  }
+
+  // 创建通知
+  private createNotification(config: SingletonToastConfig) {
+    const { key, type, message, descs, duration, placement, onClose } = config;
+
+    // 清除可能残留的编程式关闭标记（destroy 时通知已不存在，onClose 不会触发），
+    // 否则该 key 以后真正被用户手动关闭时回调会被错误吞掉
+    this.suppressedCloseKeys.delete(key);
+
+    const notificationMethod = {
+      success: notification.success,
+      error: notification.error,
+      info: notification.info,
+      warning: notification.warning
+    }[type];
+
+    notificationMethod({
+      key,
+      message,
+      description: descs,
+      duration,
+      placement: placement || 'topRight',
+      icon: iconMap[type],
+      onClose: () => {
+        // 编程式关闭（被替换/同 key 刷新/主动 close）直接忽略用户回调，
+        // 只有用户手动点关闭按钮才执行 onClose
+        if (this.suppressedCloseKeys.has(key)) {
+          this.suppressedCloseKeys.delete(key);
+          if (this.currentToast?.key === key) {
+            this.currentToast = null;
+          }
+          return;
+        }
+        if (this.currentToast?.key === key) {
+          this.currentToast = null;
+        }
+        onClose?.();
+      }
+    });
+
+    // 保存当前 toast 状态
+    this.currentToast = {
+      key,
+      type,
+      message,
+      descs,
+      duration,
+      placement
+    };
+  }
+
+  // 关闭当前 toast
+  close(toastKey?: string) {
+    if (!this.currentToast) {
+      // 没有活动单例 toast 时，仅尝试销毁指定 key 的通知本身
+      if (toastKey) {
+        notification.destroy(toastKey);
+      }
+      return;
+    }
+    const key = toastKey || this.currentToast.key;
+    if (key !== this.currentToast.key) {
+      // 指定关闭的不是当前 toast（例如下载进度 toast 已被其他 toast 替换），
+      // 只销毁该通知，不能清空 currentToast，否则会误伤当前活动的 toast
+      notification.destroy(toastKey);
+      return;
+    }
+    this.destroySilently(key);
+    this.currentToast = null;
+  }
+
+  // 销毁所有 toast
+  destroy() {
+    if (this.currentToast) {
+      this.destroySilently(this.currentToast.key);
+      this.currentToast = null;
+    }
+    // notification.destroy() 不带 key 会销毁所有（包括其他来源的通知），
+    // 无法逐个抑制；当前单例自身管理的通知已在上面静默关闭。
+    notification.destroy();
+  }
+}
+
+// 单例实例
+const singletonManager = new SingletonToastManager();
+
+// Singleton Toast API
+export const UIToastSingle = {
+  success: (options: UIToastSingleOptions | React.ReactNode, duration: number = 3) => {
+    const config = buildConfig('success', options, duration);
+    singletonManager.show(config);
+  },
+  
+  error: (options: UIToastSingleOptions | React.ReactNode, duration: number = 3) => {
+    const config = buildConfig('error', options, duration);
+    singletonManager.show(config);
+  },
+  
+  info: (options: UIToastSingleOptions | React.ReactNode, duration: number = 3) => {
+    const config = buildConfig('info', options, duration);
+    singletonManager.show(config);
+  },
+  
+  warning: (options: UIToastSingleOptions | React.ReactNode, duration: number = 3) => {
+    const config = buildConfig('warning', options, duration);
+    singletonManager.show(config);
+  },
+  
+  custom: (type: UIToastSingleType, options: UIToastSingleOptions | React.ReactNode, duration: number = 3) => {
+    const config = buildConfig(type, options, duration);
+    singletonManager.show(config);
+  },
+  
+  close: (key?: string) => {
+    singletonManager.close(key);
+  },
+  
+  destroy: () => {
+    singletonManager.destroy();
+  }
+};
+
+// 构建配置对象
+function buildConfig(
+  type: UIToastSingleType, 
+  options: UIToastSingleOptions | React.ReactNode, 
+  defaultDuration: number
+): SingletonToastConfig {
+  // 如果是字符串或数字等基本类型，转换为 ReactNode
+  const config: UIToastSingleOptions = (typeof options === 'object' && options !== null
+    ? options
+    : { message: options }) as UIToastSingleOptions;
+  
+  // 使用固定 key，基于类型，不基于消息内容
+  // 这样同一类型的 toast 只会创建/更新一个
+  const key = config.key || `singleton-${type}`;
+  
+  return {
+    key,
+    type,
+    message: config.message,
+    descs: config.descs,
+    duration: config.duration ?? defaultDuration,
+    placement: config.placement,
+    onClose: config.onClose
+  };
+}
+
+// UIToastSingleProvider - 现在只是一个空包装器，用于保持 API 兼容性
+export interface UIToastSingleProviderProps {
+  children: React.ReactNode;
+}
+
+export const UIToastSingleProvider: React.FC<UIToastSingleProviderProps> = ({ children }) => {
+  return <>{children}</>;
+};

package/src/ui/UIViewToggle.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Button } from 'antd';
+import { TableOutlined, AppstoreOutlined } from '@ant-design/icons';
+
+interface ViewToggleProps<T extends string> {
+  className?: string;
+  viewMode: T;
+  onToggle: (mode: T) => void;
+  options: {
+    value: T;
+    icon: React.ReactNode;
+    tooltip?: string;
+  }[];
+}
+
+export function UIViewToggle<T extends string>({ className = "", viewMode, onToggle, options = [] }: ViewToggleProps<T>) {
+  return (
+    <div className={`flex justify-end ${className}`}>
+      <div className="bg-gray-100 rounded-button p-1 flex">
+        {options.map((option, index) => (
+          <Button 
+            key={option.value}
+            type={viewMode === option.value ? 'primary' : 'text'} 
+            icon={option.icon}
+            onClick={() => onToggle(option.value)}
+            className={`${index < options.length - 1 ? "mr-1" : ""} rounded-button`}
+            size="small"
+            title={option.tooltip}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function UITableGridViewToggle({ 
+  viewMode, 
+  onToggle,
+  className = ""
+}: { 
+  viewMode: 'table' | 'grid'; 
+  onToggle: (mode: 'table' | 'grid') => void;
+  className?: string;
+}) {
+  return (
+    <UIViewToggle<'table' | 'grid'>
+      viewMode={viewMode}
+      onToggle={onToggle}
+      className={className}
+      options={[
+        {
+          value: 'table',
+          icon: <TableOutlined />,
+          tooltip: '表格视图'
+        },
+        {
+          value: 'grid',
+          icon: <AppstoreOutlined />,
+          tooltip: '网格视图'
+        }
+      ]}
+    />
+  );
+}