@spacecorexdev/core 0.0.2 → 0.0.5

package/src/ui/UIConfirm.tsx

@@ -0,0 +1,335 @@
+/* eslint-disable react-refresh/only-export-components */
+/**
+ * UIConfirm - 全局确认对话框组件
+ * 
+ * 使用示例：
+ * 
+ * 1. 直接调用 API（推荐）：
+ *    import uiConfirm from './UIConfirm';
+ *    
+ *    // 简单确认
+ *    uiConfirm.confirm('确定要删除吗？').then((confirmed) => {
+ *      if (confirmed) {
+ *        // 用户点击了确定
+ *      } else {
+ *        // 用户点击了取消
+ *      }
+ *    });
+ *    
+ *    // 完整配置
+ *    uiConfirm.confirm({
+ *      title: '警告',
+ *      content: '此操作不可恢复，确定要继续吗？',
+ *      okText: '继续',
+ *      cancelText: '取消',
+ *      okType: 'danger',
+ *      onOk: async () => {
+ *        // 执行异步操作
+ *        await fetch('/api/delete');
+ *      },
+ *      onCancel: () => {
+ *        console.log('用户取消了操作');
+ *      }
+ *    }).then((confirmed) => {
+ *      console.log('操作结果:', confirmed);
+ *    });
+ *    
+ *    // 警告对话框
+ *    uiConfirm.warning('这是一个警告信息');
+ *    
+ *    // 信息对话框
+ *    uiConfirm.info('这是一个提示信息');
+ *    
+ *    // 错误对话框
+ *    uiConfirm.error('操作失败');
+ * 
+ * 特点：
+ * - 返回 Promise，可以 await 或使用 then
+ * - 支持同步和异步 onOk
+ * - 自定义按钮文字和样式
+ */
+
+import React from 'react';
+import { Modal, Button, Space } from 'antd';
+import { ExclamationCircleFilled, InfoCircleFilled, QuestionCircleFilled, WarningFilled } from '@ant-design/icons';
+import { createRoot, Root } from 'react-dom/client';
+import type { ButtonProps } from 'antd/es/button';
+import { title } from 'process';
+
+// Confirm类型定义
+export type UIConfirmType = 'confirm' | 'warning' | 'info' | 'error';
+
+// Confirm选项接口
+export interface UIConfirmOptions {
+  type?: UIConfirmType;
+  title?: React.ReactNode;
+  content?: React.ReactNode;
+  width?: number | string;
+  centered?: boolean;
+  closable?: boolean;
+  maskClosable?: boolean;
+  okText?: string;
+  okType?: ButtonProps['type'];
+  cancelText?: string;
+  cancelButtonProps?: ButtonProps;
+  okButtonProps?: ButtonProps;
+  onOk?: () => void | Promise<void>;
+  onCancel?: () => void;
+  afterClose?: () => void;
+  className?: string;
+  showIcon?: boolean;
+  zIndex?: number;
+  keyboard?: boolean; // 是否支持键盘 esc 关闭
+  autoFocusButton?: 'ok' | 'cancel' | null; // 自动聚焦按钮
+}
+
+// 默认选项
+const defaultOptions: UIConfirmOptions = {
+  type: 'confirm',
+  title: '确认',
+  content: '',
+  width: 420,
+  centered: true,
+  closable: true,
+  maskClosable: false, // 默认点击遮罩层不关闭
+  okText: '确定',
+  okType: 'primary',
+  cancelText: '取消',
+  showIcon: false,
+  keyboard: true,
+  autoFocusButton: 'ok',
+  zIndex: 20000,
+};
+
+// 单例管理
+let confirmInstance: HTMLDivElement | null = null;
+let rootInstance: Root | null = null;
+
+// Confirm组件
+const ConfirmComponent: React.FC<UIConfirmOptions & { open: boolean; onClose: (confirmed: boolean) => void }> = (props) => {
+  const { 
+    type = 'confirm', 
+    title, 
+    content, 
+    width, 
+    centered, 
+    closable, 
+    maskClosable, 
+    okText, 
+    okType, 
+    cancelText,
+    okButtonProps,
+    cancelButtonProps, 
+    onOk, 
+    onCancel, 
+    open, 
+    onClose, 
+    className,
+    showIcon,
+    zIndex,
+    keyboard,
+    autoFocusButton
+  } = props;
+
+  // 图标映射
+  const iconMap = {
+    confirm: <QuestionCircleFilled style={{ color: '#1677ff', fontSize: 22, marginRight: 12 }} />,
+    warning: <ExclamationCircleFilled style={{ color: '#faad14', fontSize: 22, marginRight: 12 }} />,
+    info: <InfoCircleFilled style={{ color: '#1677ff', fontSize: 22, marginRight: 12 }} />,
+    error: <WarningFilled style={{ color: '#ff4d4f', fontSize: 22, marginRight: 12 }} />
+  };
+
+  // 处理确定按钮点击
+  const handleOk = async () => {
+    try {
+      if (onOk) {
+        const result = onOk();
+        if (result instanceof Promise) {
+          await result;
+        }
+      }
+      onClose(true);
+    } catch (error) {
+      console.error('Confirm onOk error:', error);
+      // 错误时不关闭对话框
+    }
+  };
+
+  // 处理取消按钮点击
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    }
+    onClose(false);
+  };
+
+  // 渲染标题
+  const renderTitle = () => {
+    if (!title) return null;
+    
+    return (
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        {showIcon && iconMap[type]}
+        <span>{title}</span>
+      </div>
+    );
+  };
+
+  return (
+    <Modal
+      title={renderTitle()}
+      open={open}
+      width={width}
+      centered={centered}
+      closable={closable}
+      maskClosable={maskClosable}
+      onCancel={handleCancel}
+      className={className ? className + ' ant-modal-nofull' : 'ant-modal-nofull'}
+      zIndex={zIndex}
+      keyboard={keyboard}
+      footer={(
+        <Space>
+          <Button 
+            onClick={handleCancel} 
+            {...cancelButtonProps}
+            autoFocus={autoFocusButton === 'cancel'}
+          >
+            {cancelText}
+          </Button>
+          <Button 
+            type={okType} 
+            onClick={handleOk} 
+            {...okButtonProps}
+            autoFocus={autoFocusButton === 'ok'}
+          >
+            {okText}
+          </Button>
+        </Space>
+      )}
+    >
+      <div style={{ marginLeft: showIcon ? 34 : 0 }}>
+        {content}
+      </div>
+    </Modal>
+  );
+};
+
+// 创建Confirm实例，返回Promise
+const createConfirmInstance = (options: UIConfirmOptions): Promise<boolean> => {
+  // 合并选项
+  const mergedOptions = { ...defaultOptions, ...options };
+
+  // 关闭已存在的实例
+  if (confirmInstance && rootInstance) {
+    rootInstance.unmount();
+    document.body.removeChild(confirmInstance);
+    confirmInstance = null;
+    rootInstance = null;
+  }
+
+  // 返回Promise
+  return new Promise((resolve) => {
+    // 关闭Confirm的方法
+    const closeConfirm = (confirmed: boolean) => {
+      if (confirmInstance && rootInstance) {
+        rootInstance.render(
+          <ConfirmComponent
+            {...mergedOptions}
+            open={false}
+            onClose={(confirmed) => {
+              if (mergedOptions.afterClose) {
+                mergedOptions.afterClose();
+              }
+              
+              setTimeout(() => {
+                if (confirmInstance && rootInstance) {
+                  rootInstance.unmount();
+                  document.body.removeChild(confirmInstance);
+                  confirmInstance = null;
+                  rootInstance = null;
+                }
+                resolve(confirmed);
+              }, 300); // 等待动画结束
+            }}
+          />
+        );
+        resolve(confirmed);
+      } else {
+        resolve(confirmed);
+      }
+    };
+
+    // 创建新实例
+    confirmInstance = document.createElement('div');
+    document.body.appendChild(confirmInstance);
+    rootInstance = createRoot(confirmInstance);
+    rootInstance.render(
+      <ConfirmComponent
+        {...mergedOptions}
+        open={true}
+        onClose={closeConfirm}
+      />
+    );
+  });
+};
+
+// 全局Confirm API
+const uiConfirm = {
+  // 基本确认对话框
+  confirm: (options: string | UIConfirmOptions): Promise<boolean> => {
+    const config = typeof options === 'string'
+      ? { content: options, showIcon: false, title: '' }
+      : options;
+    
+    return createConfirmInstance({
+      ...config,
+      type: 'confirm',
+    });
+  },
+
+  // 警告确认对话框
+  warning: (options: string | UIConfirmOptions): Promise<boolean> => {
+    const config = typeof options === 'string'
+      ? { content: options }
+      : options;
+    
+    return createConfirmInstance({
+      ...config,
+      type: 'warning',
+      title: config.title || '警告',
+    });
+  },
+
+  // 信息确认对话框
+  info: (options: string | UIConfirmOptions): Promise<boolean> => {
+    const config = typeof options === 'string'
+      ? { content: options }
+      : options;
+    
+    return createConfirmInstance({
+      ...config,
+      type: 'info',
+      title: config.title || '信息',
+    });
+  },
+
+  // 错误确认对话框
+  error: (options: string | UIConfirmOptions): Promise<boolean> => {
+    const config = typeof options === 'string'
+      ? { content: options }
+      : options;
+    
+    return createConfirmInstance({
+      ...config,
+      type: 'error',
+      title: config.title || '错误',
+    });
+  },
+
+  // 自定义确认对话框
+  custom: (options: UIConfirmOptions): Promise<boolean> => {
+    return createConfirmInstance(options);
+  },
+};
+
+export default uiConfirm; 

package/src/ui/UIConfirmExample.tsx

@@ -0,0 +1,165 @@
+import React, { useState } from 'react';
+import { Button, Space, Card, Divider, message } from 'antd';
+import uiConfirm from './UIConfirm';
+
+const ConfirmExample: React.FC = () => {
+  const [result, setResult] = useState<string>('未操作');
+
+  // 基本确认对话框
+  const showBasicConfirm = async () => {
+    const confirmed = await uiConfirm.confirm('您确定要执行此操作吗？');
+    setResult(confirmed ? '用户点击了确定' : '用户点击了取消');
+    
+    if (confirmed) {
+      message.success('操作已确认');
+    } else {
+      message.info('操作已取消');
+    }
+  };
+
+  // 警告确认对话框
+  const showWarningConfirm = async () => {
+    const confirmed = await uiConfirm.warning({
+      title: '删除警告',
+      content: '此操作将永久删除所选数据，确定要继续吗？',
+      okText: '删除',
+      okType: 'primary',
+      okButtonProps: { danger: true },
+      cancelText: '取消',
+    });
+
+    setResult(confirmed ? '用户确认删除' : '用户取消删除');
+    
+    if (confirmed) {
+      message.success('数据已删除');
+    }
+  };
+
+  // 信息确认对话框
+  const showInfoConfirm = async () => {
+    const confirmed = await uiConfirm.info({
+      title: '保存提醒',
+      content: '您有未保存的更改，是否保存后继续？',
+      okText: '保存',
+      cancelText: '不保存',
+    });
+
+    setResult(confirmed ? '用户选择保存' : '用户选择不保存');
+  };
+
+  // 错误确认对话框
+  const showErrorConfirm = async () => {
+    const confirmed = await uiConfirm.error({
+      title: '连接错误',
+      content: '服务器连接失败，是否重新尝试连接？',
+      okText: '重试',
+      cancelText: '取消',
+    });
+
+    setResult(confirmed ? '用户选择重试' : '用户选择取消');
+  };
+
+  // 带有异步操作的确认对话框
+  const showAsyncConfirm = async () => {
+    const confirmed = await uiConfirm.confirm({
+      title: '异步操作确认',
+      content: '确认后将执行一个异步操作（模拟3秒）',
+      onOk: async () => {
+        // 返回Promise将会阻止对话框关闭，直到Promise完成
+        return new Promise<void>((resolve) => {
+          setTimeout(() => {
+            resolve();
+          }, 3000);
+        });
+      }
+    });
+
+    setResult(confirmed ? '异步操作完成并确认' : '用户取消操作');
+  };
+
+  // 自定义焦点的确认对话框
+  const showFocusConfirm = async () => {
+    const confirmed = await uiConfirm.custom({
+      type: 'warning',
+      title: '危险操作',
+      content: '此操作有风险，默认焦点设置在取消按钮上',
+      autoFocusButton: 'cancel', // 自动聚焦到取消按钮
+      okType: 'primary',
+      okButtonProps: { danger: true },
+      cancelButtonProps: { type: 'primary' },
+    });
+
+    setResult(confirmed ? '用户确认风险操作' : '用户取消风险操作');
+  };
+
+  // 自定义宽度的确认对话框
+  const showWideConfirm = async () => {
+    const confirmed = await uiConfirm.custom({
+      type: 'info',
+      title: '详细信息确认',
+      content: (
+        <div>
+          <p>请查看以下详细信息，并确认是否继续：</p>
+          <ul>
+            <li>项目名称：示例项目</li>
+            <li>创建时间：2023-06-15</li>
+            <li>项目状态：待审核</li>
+            <li>提交人：管理员</li>
+            <li>备注：这是一个展示宽对话框的示例</li>
+          </ul>
+          <p>确认后将自动提交审核。</p>
+        </div>
+      ),
+      width: 600,
+    });
+
+    setResult(confirmed ? '用户确认提交' : '用户取消提交');
+  };
+
+  return (
+    <Card title="Confirm 确认对话框示例" style={{ width: '100%', maxWidth: 600, margin: '20px auto' }}>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <div style={{ marginBottom: 16 }}>
+          <h3>操作结果：</h3>
+          <div style={{ background: '#f0f0f0', padding: 10, borderRadius: 4 }}>
+            {result}
+          </div>
+        </div>
+
+        <Divider>基本用法</Divider>
+        
+        <Button type="primary" block onClick={showBasicConfirm}>
+          基本确认对话框
+        </Button>
+        
+        <Button danger block onClick={showWarningConfirm}>
+          警告确认对话框
+        </Button>
+        
+        <Button type="dashed" block onClick={showInfoConfirm}>
+          信息确认对话框
+        </Button>
+        
+        <Button type="default" block onClick={showErrorConfirm}>
+          错误确认对话框
+        </Button>
+        
+        <Divider>高级用法</Divider>
+        
+        <Button type="primary" ghost block onClick={showAsyncConfirm}>
+          异步操作确认对话框
+        </Button>
+        
+        <Button block onClick={showFocusConfirm}>
+          自定义焦点确认对话框
+        </Button>
+        
+        <Button type="default" block onClick={showWideConfirm}>
+          自定义宽度确认对话框
+        </Button>
+      </Space>
+    </Card>
+  );
+};
+
+export default ConfirmExample; 

package/src/ui/UIDatePicker.tsx

@@ -0,0 +1,146 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Calendar, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from 'antd';
+
+interface UIDatePickerProps {
+  value: string;
+  onChange: (value: string) => void;
+  type?: 'date' | 'month';
+  placeholder?: string;
+  className?: string;
+}
+
+export function UIDatePicker({ 
+  value, 
+  onChange, 
+  type = 'date', 
+  placeholder = '选择日期', 
+  className = '' 
+}: UIDatePickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const datePickerRef = useRef<HTMLDivElement>(null);
+  
+  const formattedValue = value ? formatDisplayDate(value, type) : '';
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (datePickerRef.current && !datePickerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  function formatDisplayDate(dateString: string, type: 'date' | 'month'): string {
+    if (!dateString) return '';
+    
+    try {
+      if (type === 'month') {
+        const [year, month] = dateString.split('-');
+        return `${year}年${month}月`;
+      } else {
+        const date = new Date(dateString);
+        return date.toLocaleDateString('zh-CN', {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric'
+        });
+      }
+    } catch (e) {
+      return dateString;
+    }
+  }
+
+  // Handle direct input change
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
+  };
+
+  // Handle click on input to open the custom date picker
+  const handleInputClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className={`relative ${className}`} ref={datePickerRef}>
+      <div className="relative cursor-pointer">
+        <input
+          type={type}
+          value={value}
+          onChange={handleInputChange}
+          onClick={handleInputClick}
+          className="w-full bg-white border border-ios-gray-200 rounded-ios py-2.5 pl-3 pr-10 text-sm text-ios-gray-700 shadow-ios focus:outline-none focus:ring-2 focus:ring-ios-blue-400 focus:border-transparent transition-all duration-200 hover:border-ios-blue-300 cursor-pointer"
+          placeholder={placeholder}
+        />
+        <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+          <Calendar className="h-4 w-4 text-ios-gray-400" />
+        </div>
+      </div>
+
+      {isOpen && (
+        <div className="absolute z-10 mt-1 bg-white rounded-ios shadow-ios-md p-4 ring-1 ring-ios-gray-200 ring-opacity-5">
+          <div className="flex justify-between items-center mb-4">
+            <Button
+              type="text"
+              className="p-1.5 hover:bg-ios-gray-100 rounded-full transition-colors duration-150"
+              icon={<ChevronLeft className="h-4 w-4 text-ios-gray-600" />}
+            >
+            </Button>
+            <span className="text-sm font-medium text-ios-gray-700">2024年5月</span>
+            <Button
+              type="text"
+              className="p-1.5 hover:bg-ios-gray-100 rounded-full transition-colors duration-150"
+              icon={<ChevronRight className="h-4 w-4 text-ios-gray-600" />}
+            >
+            </Button>
+          </div>
+          
+          <div className="grid grid-cols-7 gap-1 text-center text-xs">
+            <div className="text-ios-gray-500 font-medium">日</div>
+            <div className="text-ios-gray-500 font-medium">一</div>
+            <div className="text-ios-gray-500 font-medium">二</div>
+            <div className="text-ios-gray-500 font-medium">三</div>
+            <div className="text-ios-gray-500 font-medium">四</div>
+            <div className="text-ios-gray-500 font-medium">五</div>
+            <div className="text-ios-gray-500 font-medium">六</div>
+            
+            {/* Empty cells for days from previous month */}
+            <div className="text-ios-gray-300 py-1.5">30</div>
+            <div className="text-ios-gray-300 py-1.5">31</div>
+            
+            {/* Current month days */}
+            {Array.from({ length: 30 }).map((_, i) => (
+              <div 
+                key={i} 
+                className={`py-1.5 hover:bg-ios-blue-50 rounded-full cursor-pointer transition-colors duration-150 ${
+                  i === 14 ? 'bg-ios-blue-500 text-white' : 'text-ios-gray-700'
+                }`}
+                onClick={() => {
+                  // In a real implementation, this would set the actual date
+                  const day = i + 1;
+                  const dateStr = `2024-05-${day < 10 ? '0' + day : day}`;
+                  onChange(dateStr);
+                  setIsOpen(false);
+                }}
+              >
+                {i + 1}
+              </div>
+            ))}
+          </div>
+          
+          <div className="mt-4 flex justify-end">
+            <Button
+              type="text"
+              className="px-4 py-1.5 text-sm text-ios-blue-500 hover:bg-ios-blue-50 rounded-ios transition-colors duration-150"
+              onClick={() => setIsOpen(false)}
+            >
+              确定
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/UIDateRangePicker.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { UIDatePicker } from './UIDatePicker';
+
+interface UIDateRangePickerProps {
+  startDate: string;
+  endDate: string;
+  onStartDateChange: (date: string) => void;
+  onEndDateChange: (date: string) => void;
+  type?: 'date' | 'month';
+  className?: string;
+}
+
+export function UIDateRangePicker({
+  startDate,
+  endDate,
+  onStartDateChange,
+  onEndDateChange,
+  type = 'date',
+  className = ''
+}: UIDateRangePickerProps) {
+  return (
+    <div className={`flex items-center space-x-2 ${className}`}>
+      <UIDatePicker
+        value={startDate}
+        onChange={onStartDateChange}
+        type={type}
+        placeholder="开始日期"
+      />
+      <span className="text-gray-500">至</span>
+      <UIDatePicker
+        value={endDate}
+        onChange={onEndDateChange}
+        type={type}
+        placeholder="结束日期"
+      />
+    </div>
+  );
+}