@spacecorexdev/core 0.0.4 → 0.0.5

package/src/ui/UIAlert.tsx

@@ -0,0 +1,399 @@
+/* eslint-disable react-refresh/only-export-components */
+/**
+ * UIAlert - 全局警告/提示对话框组件
+ * 
+ * 使用示例：
+ * 
+ * 1. 直接调用 API（推荐）：
+ *    import uiAlert from './UIAlert';
+ *    
+ *    // 简单提示
+ *    const close = uiAlert.success('操作成功');
+ *    const close = uiAlert.error('操作失败');
+ *    const close = uiAlert.warning('警告信息');
+ *    const close = uiAlert.info('提示信息');
+ *    
+ *    // 手动关闭
+ *    close();
+ *    // 或使用全局关闭
+ *    uiAlert.close();
+ *    
+ *    // 完整配置
+ *    uiAlert.success({
+ *      title: '成功',
+ *      content: '数据保存成功！',
+ *      okText: '确定',
+ *      okType: 'primary',
+ *      onOk: () => console.log('用户点击了确定'),
+ *      autoClose: 3000, // 3秒后自动关闭（毫秒）
+ *      showIcon: true
+ *    });
+ *    
+ *    // 确认对话框
+ *    uiAlert.confirm({
+ *      title: '确认',
+ *      content: '确定要删除吗？',
+ *      onOk: () => console.log('用户点击了确定'),
+ *      onCancel: () => console.log('用户点击了取消')
+ *    });
+ *    
+ *    // 自定义按钮
+ *    uiAlert.custom({
+ *      title: '选择操作',
+ *      content: '请选择您的操作',
+ *      buttons: [
+ *        { text: '删除', type: 'danger', onClick: () => console.log('删除') },
+ *        { text: '修改', type: 'primary', onClick: () => console.log('修改') },
+ *        { text: '取消', onClick: () => console.log('取消') }
+ *      ]
+ *    });
+ * 
+ * 特点：
+ * - 支持多种类型：success, error, warning, info, confirm
+ * - 支持自定义按钮
+ * - 支持自动关闭
+ * - 返回关闭方法，可以手动调用
+ */
+
+import React from 'react';
+import { Modal, Button, Space, Typography } from 'antd';
+import { CheckCircleFilled, CloseCircleFilled, ExclamationCircleFilled, InfoCircleFilled, QuestionCircleFilled } from '@ant-design/icons';
+import { createRoot, Root } from 'react-dom/client';
+import type { ButtonProps } from 'antd/es/button';
+
+const { Text, Title } = Typography;
+
+// Alert类型定义
+export type UIAlertType = 'success' | 'error' | 'warning' | 'info' | 'confirm';
+
+// Alert按钮定义
+export interface UIAlertButton {
+  text: string;
+  type?: ButtonProps['type'];
+  onClick?: () => void;
+}
+
+// Alert选项接口
+export interface UIAlertOptions {
+  type?: UIAlertType;
+  title?: React.ReactNode;
+  content?: React.ReactNode;
+  width?: number | string;
+  centered?: boolean;
+  closable?: boolean;
+  maskClosable?: boolean;
+  okText?: string;
+  okType?: ButtonProps['type'];
+  cancelText?: string;
+  buttons?: UIAlertButton[];
+  onOk?: () => void | Promise<void>;
+  onCancel?: () => void;
+  afterClose?: () => void;
+  className?: string;
+  autoClose?: number; // 自动关闭时间（毫秒），0表示不自动关闭
+  showIcon?: boolean;
+}
+
+// 默认选项
+const defaultOptions: UIAlertOptions = {
+  type: 'info',
+  title: '提示',
+  content: '',
+  width: 420,
+  centered: true,
+  closable: true,
+  maskClosable: true,
+  okText: '确定',
+  okType: 'primary',
+  cancelText: '取消',
+  autoClose: 0,
+  showIcon: false,
+};
+
+// 单例管理
+let alertInstance: HTMLDivElement | null = null;
+let rootInstance: Root | null = null;
+let autoCloseTimer: number | null = null;
+
+// Alert组件
+const AlertComponent: React.FC<UIAlertOptions & { open: boolean; onClose: () => void }> = (props) => {
+  const { 
+    type = 'info', 
+    title, 
+    content, 
+    width, 
+    centered, 
+    closable, 
+    maskClosable, 
+    okText, 
+    okType, 
+    cancelText, 
+    buttons,
+    onOk, 
+    onCancel, 
+    open, 
+    onClose, 
+    className,
+    showIcon
+  } = props;
+
+  // 图标映射
+  const iconMap = {
+    success: <CheckCircleFilled style={{ color: '#52c41a', fontSize: 24, marginRight: 8 }} />,
+    error: <CloseCircleFilled style={{ color: '#ff4d4f', fontSize: 24, marginRight: 8 }} />,
+    warning: <ExclamationCircleFilled style={{ color: '#faad14', fontSize: 24, marginRight: 8 }} />,
+    info: <InfoCircleFilled style={{ color: '#1677ff', fontSize: 24, marginRight: 8 }} />,
+    confirm: <QuestionCircleFilled style={{ color: '#1677ff', fontSize: 24, marginRight: 8 }} />
+  };
+
+  // 处理确定按钮点击
+  const handleOk = async () => {
+    if (onOk) {
+      await onOk();
+    }
+    onClose();
+  };
+
+  // 处理取消按钮点击
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    }
+    onClose();
+  };
+
+  // 渲染自定义按钮
+  const renderFooter = () => {
+    if (buttons && buttons.length > 0) {
+      return (
+        <Space style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          {buttons.map((btn, index) => (
+            <Button
+              key={index}
+              type={btn.type || 'default'}
+              onClick={() => {
+                if (btn.onClick) {
+                  btn.onClick();
+                }
+                onClose();
+              }}
+            >
+              {btn.text}
+            </Button>
+          ))}
+        </Space>
+      );
+    }
+
+    // 不同类型的默认按钮
+    if (type === 'confirm') {
+      return (
+        <Space style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <Button onClick={handleCancel}>{cancelText}</Button>
+          <Button type={okType} onClick={handleOk}>{okText}</Button>
+        </Space>
+      );
+    }
+
+    return (
+      <Button type={okType} onClick={handleOk}>{okText}</Button>
+    );
+  };
+
+  // 渲染标题
+  const renderTitle = () => {
+    if (!title) return null;
+    
+    return (
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        {showIcon && iconMap[type]}
+        <Title level={4} style={{ margin: 0 }}>{title}</Title>
+      </div>
+    );
+  };
+
+  return (
+    <Modal
+      title={renderTitle()}
+      open={open}
+      width={width}
+      centered={centered}
+      closable={closable}
+      maskClosable={maskClosable}
+      onCancel={handleCancel}
+      footer={renderFooter()}
+      className={className ? className + ' ant-modal-nofull' : 'ant-modal-nofull'}
+    >
+      <div style={{ marginLeft: showIcon ? 32 : 0 }}>
+        {typeof content === 'string' ? <Text>{content}</Text> : content}
+      </div>
+    </Modal>
+  );
+};
+
+// 创建Alert实例
+const createAlertInstance = (options: UIAlertOptions, open: boolean = true) => {
+  // 清除自动关闭计时器
+  if (autoCloseTimer) {
+    window.clearTimeout(autoCloseTimer);
+    autoCloseTimer = null;
+  }
+
+  // 合并选项
+  const mergedOptions = { ...defaultOptions, ...options };
+
+  // 关闭Alert的方法
+  const closeAlert = () => {
+    if (alertInstance && rootInstance) {
+      rootInstance.render(
+        <AlertComponent 
+          {...mergedOptions} 
+          open={false} 
+          onClose={() => {
+            if (mergedOptions.afterClose) {
+              mergedOptions.afterClose();
+            }
+            
+            if (alertInstance && rootInstance) {
+              setTimeout(() => {
+                rootInstance?.unmount();
+                document.body.removeChild(alertInstance!);
+                alertInstance = null;
+                rootInstance = null;
+              }, 300); // 等待动画结束
+            }
+          }} 
+        />
+      );
+    }
+  };
+
+  // 如果已存在实例，则更新内容
+  if (alertInstance && rootInstance) {
+    rootInstance.render(
+      <AlertComponent 
+        {...mergedOptions} 
+        open={open} 
+        onClose={closeAlert} 
+      />
+    );
+  } else {
+    // 创建新实例
+    alertInstance = document.createElement('div');
+    document.body.appendChild(alertInstance);
+    rootInstance = createRoot(alertInstance);
+    rootInstance.render(
+      <AlertComponent 
+        {...mergedOptions} 
+        open={open} 
+        onClose={closeAlert} 
+      />
+    );
+  }
+
+  // 如果设置了自动关闭
+  if (mergedOptions.autoClose && mergedOptions.autoClose > 0) {
+    autoCloseTimer = window.setTimeout(() => {
+      closeAlert();
+      autoCloseTimer = null;
+    }, mergedOptions.autoClose);
+  }
+
+  // 返回关闭方法
+  return closeAlert;
+};
+
+// 全局Alert API
+const uiAlert = {
+  // 成功提示
+  success: (options: string | UIAlertOptions) => {
+    const config = typeof options === 'string' 
+      ? { content: options } 
+      : options;
+    
+    return createAlertInstance({
+      ...config,
+      type: 'success',
+      title: config.title || '成功',
+    });
+  },
+
+  // 错误提示
+  error: (options: string | UIAlertOptions) => {
+    const config = typeof options === 'string' 
+      ? { content: options } 
+      : options;
+    
+    return createAlertInstance({
+      ...config,
+      type: 'error',
+      title: config.title || '错误',
+    });
+  },
+
+  // 警告提示
+  warning: (options: string | UIAlertOptions) => {
+    const config = typeof options === 'string' 
+      ? { content: options } 
+      : options;
+    
+    return createAlertInstance({
+      ...config,
+      type: 'warning',
+      title: config.title || '警告',
+    });
+  },
+
+  // 信息提示
+  info: (options: string | UIAlertOptions) => {
+    const config = typeof options === 'string' 
+      ? { content: options } 
+      : options;
+    
+    return createAlertInstance({
+      ...config,
+      type: 'info',
+      title: config.title || '提示',
+    });
+  },
+
+  // 确认提示
+  confirm: (options: string | UIAlertOptions) => {
+    const config = typeof options === 'string' 
+      ? { content: options } 
+      : options;
+    
+    return createAlertInstance({
+      ...config,
+      type: 'confirm',
+      title: config.title || '确认',
+    });
+  },
+
+  // 自定义提示
+  custom: (options: UIAlertOptions) => {
+    return createAlertInstance(options);
+  },
+
+  // 关闭当前显示的Alert
+  close: () => {
+    if (alertInstance && rootInstance) {
+      rootInstance.render(
+        <AlertComponent 
+          {...defaultOptions} 
+          open={false} 
+          onClose={() => {
+            if (alertInstance && rootInstance) {
+              rootInstance.unmount();
+              document.body.removeChild(alertInstance);
+              alertInstance = null;
+              rootInstance = null;
+            }
+          }} 
+        />
+      );
+    }
+  },
+};
+
+export default uiAlert; 

package/src/ui/UIAlertExample.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Button, Space, Card, Divider } from 'antd';
+import uiAlert from './UIAlert';
+
+const AlertExample: React.FC = () => {
+  // 成功提示
+  const showSuccessAlert = () => {
+    uiAlert.success('操作已成功完成');
+  };
+
+  // 错误提示
+  const showErrorAlert = () => {
+    uiAlert.error({
+      title: '操作失败',
+      content: '服务器连接超时，请稍后再试',
+      okText: '我知道了'
+    });
+  };
+
+  // 警告提示
+  const showWarningAlert = () => {
+    uiAlert.warning({
+      content: '此操作将删除所选项目，是否继续？',
+      onOk: () => console.log('用户确认删除')
+    });
+  };
+
+  // 信息提示
+  const showInfoAlert = () => {
+    uiAlert.info('系统将于今晚22:00进行维护，届时服务将暂停使用');
+  };
+
+  // 确认对话框
+  const showConfirmAlert = () => {
+    uiAlert.confirm({
+      title: '确认操作',
+      content: '您确定要提交这些更改吗？提交后将不可撤销',
+      onOk: () => console.log('用户确认提交'),
+      onCancel: () => console.log('用户取消提交')
+    });
+  };
+
+  // 自定义按钮提示
+  const showCustomButtonsAlert = () => {
+    uiAlert.custom({
+      type: 'info',
+      title: '选择操作',
+      content: '请选择要执行的操作：',
+      buttons: [
+        { text: '保存', type: 'primary', onClick: () => console.log('保存操作') },
+        { text: '保存并发布', type: 'default', onClick: () => console.log('保存并发布') },
+        { text: '取消', type: 'dashed', onClick: () => console.log('取消操作') }
+      ],
+      closable: true
+    });
+  };
+
+  // 自动关闭提示
+  const showAutoCloseAlert = () => {
+    uiAlert.success({
+      title: '上传成功',
+      content: '文件已成功上传到服务器',
+      autoClose: 3000, // 3秒后自动关闭
+      onOk: () => console.log('用户点击了确定')
+    });
+  };
+
+  // 复杂内容示例
+  const showComplexContentAlert = () => {
+    uiAlert.custom({
+      type: 'info',
+      title: '用户信息',
+      content: (
+        <div>
+          <p>以下是您的账户信息摘要：</p>
+          <ul style={{ marginBottom: 0 }}>
+            <li>用户名：admin</li>
+            <li>注册时间：2023-05-01</li>
+            <li>上次登录：2023-06-15</li>
+            <li>账户状态：<span style={{ color: '#52c41a' }}>正常</span></li>
+          </ul>
+        </div>
+      ),
+      width: 500
+    });
+  };
+
+  return (
+    <Card title="Alert 提示示例" style={{ width: '100%', maxWidth: 600, margin: '20px auto' }}>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <Button type="primary" block onClick={showSuccessAlert}>
+          显示成功提示
+        </Button>
+        
+        <Button danger block onClick={showErrorAlert}>
+          显示错误提示
+        </Button>
+        
+        <Button type="default" block onClick={showWarningAlert}>
+          显示警告提示
+        </Button>
+        
+        <Button type="dashed" block onClick={showInfoAlert}>
+          显示信息提示
+        </Button>
+        
+        <Divider>高级用法</Divider>
+        
+        <Button type="primary" ghost block onClick={showConfirmAlert}>
+          显示确认对话框
+        </Button>
+        
+        <Button block onClick={showCustomButtonsAlert}>
+          显示自定义按钮提示
+        </Button>
+        
+        <Button type="default" block onClick={showAutoCloseAlert}>
+          显示自动关闭提示(3秒)
+        </Button>
+        
+        <Button type="dashed" block onClick={showComplexContentAlert}>
+          显示复杂内容提示
+        </Button>
+      </Space>
+    </Card>
+  );
+};
+
+export default AlertExample;