@spacecorexdev/core 0.0.4 → 0.0.5

package/src/ui/UILoading.tsx

@@ -0,0 +1,255 @@
+/* eslint-disable react-refresh/only-export-components */
+/**
+ * UILoading - 全局加载组件
+ * 
+ * 使用示例：
+ * 
+ * 1. 直接调用 API（推荐）：
+ *    import uiLoading from './UILoading';
+ *    
+ *    // 显示加载
+ *    uiLoading.show({
+ *      tip: '加载中...',
+ *      fullscreen: true,
+ *      mask: true,
+ *      delay: 0 // 延迟显示时间（毫秒）
+ *    });
+ *    
+ *    // 隐藏加载
+ *    uiLoading.hide();
+ *    
+ *    // 使用 service 方法自动管理
+ *    const fetchData = async () => {
+ *      const data = await uiLoading.service(
+ *        fetch('/api/data'),
+ *        { tip: '正在获取数据...' }
+ *      );
+ *      return data;
+ *    };
+ *    
+ *    // 多次调用，会计数，只有最后一个 hide 才会真正关闭
+ *    uiLoading.show();
+ *    uiLoading.show();
+ *    uiLoading.hide(); // 计数减 1，仍显示
+ *    uiLoading.hide(); // 计数减 1，关闭
+ * 
+ * 2. 使用组件形式（较少使用）：
+ *    import { UILoading } from './UILoading';
+ *    
+ *    <UILoading tip="加载中..." />
+ * 
+ * 特点：
+ * - 支持计数，多次 show 需要对应次数的 hide
+ * - 支持延迟显示，避免闪烁
+ * - service 方法自动在 Promise 完成后隐藏
+ */
+
+/**
+ * 同时只能有一个timeout
+ */
+
+import React from 'react';
+import { Spin } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+import { createRoot, Root } from 'react-dom/client';
+
+const loadingSymbol = Symbol('loading');
+
+interface LoadingGlobalProps {
+  count: number;
+  timeoutId: number;
+  inTimeout: boolean;
+}
+
+function getLoadingGlobalProps() {
+  let props: LoadingGlobalProps = (window as any)[loadingSymbol] as LoadingGlobalProps;
+  if (!props) {
+    props = { count: 0, timeoutId: 0, inTimeout: false };
+    (window as any)[loadingSymbol] = props;
+  }
+  return props;
+}
+
+
+
+// 加载选项接口
+export interface UILoadingOptions {
+  tip?: string;
+  fullscreen?: boolean;
+  delay?: number;
+  mask?: boolean;
+  maskStyle?: React.CSSProperties;
+  iconSize?: number;
+  iconStyle?: React.CSSProperties;
+  containerStyle?: React.CSSProperties;
+  wrapperClassName?: string;
+}
+
+// 默认的Loading选项
+const defaultOptions: UILoadingOptions = {
+  tip: '',
+  fullscreen: true,
+  delay: 0,
+  mask: true,
+  iconSize: 40,
+  wrapperClassName: 'ui-loading-wrapper',
+};
+
+// 创建Loading组件
+export const UILoading: React.FC<UILoadingOptions> = (props) => {
+  const options = { ...defaultOptions, ...props };
+  const { 
+    tip, 
+    fullscreen, 
+    mask, 
+    maskStyle, 
+    iconSize, 
+    iconStyle, 
+    containerStyle,
+    wrapperClassName 
+  } = options;
+  
+  // 自定义加载图标
+  const loadingIcon = (
+    <LoadingOutlined 
+      style={{ 
+        fontSize: iconSize, 
+        color: '#1677ff', 
+        ...iconStyle 
+      }} 
+      spin 
+    />
+  );
+
+  // 全屏加载样式
+  const fullscreenStyle: React.CSSProperties = fullscreen ? {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 9999,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: mask ? 'rgba(0, 0, 0, 0.45)' : 'transparent',
+    ...maskStyle
+  } : {};
+
+  // 容器样式
+  const containerStyles: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...containerStyle
+  };
+
+  return (
+    <div style={fullscreenStyle} className={wrapperClassName}>
+      <div style={containerStyles}>
+        <Spin indicator={loadingIcon}>
+          {tip}
+        </Spin>
+      </div>
+    </div>
+  );
+};
+
+// 单例管理
+let loadingInstance: HTMLDivElement | null = null;
+let rootInstance: Root | null = null;
+
+// 创建Loading实例
+const createLoadingInstance = (options: UILoadingOptions = {}) => {  
+  // 如果已存在实例，则先移除
+  if (loadingInstance && rootInstance) {
+    rootInstance.unmount();
+    document.body.removeChild(loadingInstance);
+    loadingInstance = null;
+    rootInstance = null;
+  }
+
+  // 创建挂载点
+  loadingInstance = document.createElement('div');
+  document.body.appendChild(loadingInstance);
+
+  // 使用createRoot API渲染组件
+  rootInstance = createRoot(loadingInstance);
+  rootInstance.render(<UILoading {...options} />);
+
+  return loadingInstance;
+};
+
+// 全局Loading API
+const uiLoading = {
+  // 显示加载
+  show: (options: UILoadingOptions = {}) => {
+    let props = getLoadingGlobalProps();
+    props.count++;
+
+    const mergedOptions = { ...defaultOptions, ...options };
+    
+    // 如果设置了延迟显示
+    if (mergedOptions.delay && mergedOptions.delay > 0) {
+      if (props.timeoutId != 0) {
+        window.clearTimeout(props.timeoutId);
+        props.timeoutId = 0;
+      }
+
+      props.timeoutId = window.setTimeout(() => {
+        props.timeoutId = 0;
+        createLoadingInstance(mergedOptions);
+      }, mergedOptions.delay);
+      return;
+    }
+    else {
+      createLoadingInstance(mergedOptions);
+    }
+  },
+
+  // 隐藏加载
+  hide: () => {
+    let props = getLoadingGlobalProps();
+    if (props.count <= 0) {
+      console.warn('Loading count is less than 0');
+      return;
+    }
+
+    props.count--;
+
+    // 清除延迟显示的定时器
+    if (props.timeoutId != 0) {
+      window.clearTimeout(props.timeoutId);
+      props.timeoutId = 0;
+    }
+
+    // 移除Loading实例
+    if (props.count == 0 && loadingInstance && rootInstance) {
+      rootInstance.unmount();
+      document.body.removeChild(loadingInstance);
+      loadingInstance = null;
+      rootInstance = null;
+    }
+  },
+
+  // 服务方法 - 自动在Promise完成后隐藏
+  service: <T,>(
+    promise: Promise<T>,
+    options: UILoadingOptions = {}
+  ): Promise<T> => {
+    uiLoading.show(options);
+
+    return promise
+      .then((res) => {
+        uiLoading.hide();
+        return res;
+      })
+      .catch((err) => {
+        uiLoading.hide();
+        throw err;
+      });
+  }
+};
+
+export default uiLoading; 

package/src/ui/UILoadingExample.tsx

@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import { Button, Space, Card, Divider, Select } from 'antd';
+import uiLoading from './UILoading';
+
+const LoadingExample: React.FC = () => {
+  const [delay, setDelay] = useState<number>(0);
+  
+  // 简单加载示例
+  const showSimpleLoading = () => {
+    uiLoading.show();
+    
+    // 3秒后自动隐藏
+    setTimeout(() => {
+      uiLoading.hide();
+    }, 3000);
+  };
+  
+  // 自定义文字加载
+  const showCustomTipLoading = () => {
+    uiLoading.show({
+      tip: '数据加载中，请稍候...',
+    });
+    
+    // 3秒后自动隐藏
+    setTimeout(() => {
+      uiLoading.hide();
+    }, 3000);
+  };
+  
+  // 无遮罩层加载
+  const showNoMaskLoading = () => {
+    uiLoading.show({
+      mask: false,
+      tip: '透明背景加载',
+    });
+    
+    // 3秒后自动隐藏
+    setTimeout(() => {
+      uiLoading.hide();
+    }, 3000);
+  };
+  
+  // 延迟显示加载
+  const showDelayedLoading = () => {
+    uiLoading.show({
+      delay,
+      tip: `${delay}毫秒后显示`,
+    });
+    
+    // 3秒后自动隐藏
+    setTimeout(() => {
+      uiLoading.hide();
+    }, 3000 + delay);
+  };
+  
+  // 处理Promise的加载示例
+  const handlePromiseLoading = () => {
+    // 模拟异步请求
+    const mockAsyncRequest = () => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve('请求成功');
+        }, 2000);
+      });
+    };
+    
+    // 使用service方法自动处理Loading的显示和隐藏
+    uiLoading.service(
+      mockAsyncRequest(),
+      { tip: '' }
+    ).then((result) => {
+      console.log(result);
+    });
+  };
+  
+  // 使用自定义样式加载
+  const showCustomStyledLoading = () => {
+    uiLoading.show({
+      tip: '自定义样式',
+      iconSize: 60,
+      iconStyle: { color: '#ff4d4f' },
+      maskStyle: { backgroundColor: 'rgba(0, 0, 0, 0.7)' },
+    });
+    
+    // 3秒后自动隐藏
+    setTimeout(() => {
+      uiLoading.hide();
+    }, 3000);
+  };
+
+  return (
+    <Card title="Loading 加载示例" style={{ width: '100%', maxWidth: 600, margin: '20px auto' }}>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <Button type="primary" block onClick={showSimpleLoading}>
+          显示基本加载
+        </Button>
+        
+        <Button block onClick={showCustomTipLoading}>
+          显示自定义文字加载
+        </Button>
+        
+        <Button block onClick={showNoMaskLoading}>
+          显示无遮罩层加载
+        </Button>
+        
+        <Divider>延迟加载</Divider>
+        
+        <Space style={{ width: '100%' }}>
+          <Select
+            value={delay}
+            onChange={(value) => setDelay(value)}
+            options={[
+              { value: 0, label: '不延迟' },
+              { value: 500, label: '延迟500ms' },
+              { value: 1000, label: '延迟1000ms' },
+              { value: 2000, label: '延迟2000ms' },
+            ]}
+            style={{ width: 120 }}
+          />
+          <Button type="dashed" onClick={showDelayedLoading}>
+            延迟显示加载
+          </Button>
+        </Space>
+        
+        <Divider>高级用法</Divider>
+        
+        <Button type="primary" ghost block onClick={handlePromiseLoading}>
+          Promise自动加载
+        </Button>
+        
+        <Button danger block onClick={showCustomStyledLoading}>
+          自定义样式加载
+        </Button>
+      </Space>
+    </Card>
+  );
+};
+
+export default LoadingExample; 

package/src/ui/UISelect.tsx

@@ -0,0 +1,105 @@
+/**
+ * UISelect - 自定义下拉选择组件
+ * 
+ * 使用示例：
+ * 
+ * 1. 基础用法：
+ *    import { UISelect } from './UISelect';
+ *    
+ *    const [value, setValue] = useState('');
+ *    
+ *    <UISelect
+ *      options={[
+ *        { value: 'option1', label: '选项1' },
+ *        { value: 'option2', label: '选项2' },
+ *        { value: 'option3', label: '选项3' }
+ *      ]}
+ *      value={value}
+ *      onChange={setValue}
+ *      placeholder="请选择"
+ *    />
+ * 
+ * 特点：
+ * - 支持点击外部关闭
+ * - 支持自定义样式
+ * - iOS 风格设计
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { Button } from 'antd';
+
+interface UISelectOption {
+  value: string;
+  label: string;
+}
+
+interface UISelectProps {
+  options: UISelectOption[];
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export function UISelect({ options, value, onChange, placeholder = '请选择', className = '' }: UISelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const selectRef = useRef<HTMLDivElement>(null);
+  const selectedOption = options.find(option => option.value === value);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (selectRef.current && !selectRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <div className={`relative ${className}`} ref={selectRef}>
+      <Button
+        type="text"
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full bg-white border border-ios-gray-200 rounded-ios py-2.5 pl-3 pr-10 text-left 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"
+      >
+        <span className="block truncate text-sm text-ios-gray-700">
+          {selectedOption ? selectedOption.label : placeholder}
+        </span>
+        <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+          <ChevronDown className={`h-4 w-4 text-ios-gray-400 transition-transform duration-200 ${isOpen ? 'transform rotate-180' : ''}`} />
+        </span>
+      </Button>
+
+      {isOpen && (
+        <div className="absolute z-10 mt-1 w-full bg-white shadow-ios-md max-h-60 rounded-ios py-1 text-base ring-1 ring-ios-gray-200 ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+          {options.map((option) => (
+            <div
+              key={option.value}
+              className={`cursor-pointer select-none relative py-2.5 pl-3 pr-9 hover:bg-ios-blue-50 transition-colors duration-150 ${
+                option.value === value ? 'bg-ios-blue-50 text-ios-blue-600 font-medium' : 'text-ios-gray-700'
+              }`}
+              onClick={() => {
+                onChange(option.value);
+                setIsOpen(false);
+              }}
+            >
+              <span className="block truncate text-sm">
+                {option.label}
+              </span>
+              {option.value === value && (
+                <span className="absolute inset-y-0 right-0 flex items-center pr-4 text-ios-blue-500">
+                  <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                  </svg>
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}