@spacecorexdev/core 0.0.4 → 0.0.5

package/src/ui/ProjectSelector/index.tsx

@@ -0,0 +1,472 @@
+import React, { useEffect, useState, useCallback, useRef, useMemo, ReactElement } from 'react';
+import { Select, Avatar, Spin, message, Popover, Card, Typography, Space } from 'antd';
+import { debounce } from 'lodash-es';
+import type { SelectProps } from 'antd/es/select';
+import { ResponseCode } from '../../api/_base';
+import ReactDOM from 'react-dom/client';
+import { API } from '../../api/index';
+import { Project } from '../../types/project/index';
+import { projectCacheManager } from './projectCache';
+
+/******
+使用示例：
+
+<ProjectSelector
+  value={selectedRoleIds}
+  onChange={(projectIds, projects) => {
+    setSelectedRoleIds(projectIds);
+  }}`
+  placeholder="请选择项目"
+  multiple={false}
+  excludeProjectIds={[]}
+/>
+
+****/
+
+
+const { Text } = Typography;
+
+export interface ProjectSelectorProps extends Omit<SelectProps, 'options' | 'value' | 'onChange'> {
+  // 是否允许多选
+  multiple?: boolean;
+  // 需要排除的项目ID列表
+  excludeProjectIds?: string[];
+  // 是否允许清除选择
+  allowClear?: boolean;
+  // 请求超时时间（毫秒）
+  timeout?: number;
+  // 请求重试次数
+  retryCount?: number;
+  // 是否启用缓存
+  enableCache?: boolean;
+  // 缓存过期时间（毫秒）
+  cacheExpireTime?: number;
+  // 选中的项目ID数组
+  value?: string[];
+  // 选中项目变化时的回调
+  onChange?: (projectIds: string[], selectedProjects: Project[]) => void;
+}
+
+const ProjectSelector: React.FC<ProjectSelectorProps> = ({
+  multiple = false,
+  allowClear = true,
+  timeout = 10000,
+  retryCount = 3,
+  enableCache = true,
+  excludeProjectIds = [],
+  cacheExpireTime,
+  value,
+  onChange,
+  ...props
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [options, setOptions] = useState<Project[]>([]);
+  const [searchValue, setSearchValue] = useState('');
+  const [pageNum, setPageNum] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [selectedProjects, setSelectedProjects] = useState<Project[]>([]);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const optionsRef = useRef<Project[]>([]);
+  const selectedProjectsRef = useRef<Project[]>([]);
+
+  // 更新 refs
+  useEffect(() => {
+    optionsRef.current = options;
+  }, [options]);
+
+  useEffect(() => {
+    selectedProjectsRef.current = selectedProjects;
+  }, [selectedProjects]);
+
+  // 根据选中的用户ID获取完整的用户信息
+  const getSelectedProjectsInfo = useCallback((projectIds: string[]) => {
+    return projectIds.map(id => {
+      // 先从已加载的选项中查找
+      const found = optionsRef.current.find(user => user.id === id);
+      if (found) return found;
+
+      // 如果选项中没有，则从已选中的用户中查找
+      return selectedProjectsRef.current.find(user => user.id === id);
+    }).filter((user): user is Project => user !== undefined);
+  }, []); // 移除 options 和 selectedProjects 依赖
+
+  // 处理选择变化
+  const handleChange = useCallback((newValue: string | string[] | null) => {
+    if (!newValue) {
+      setSelectedProjects([]);
+      onChange?.([], []);
+      return;
+    }
+
+    // 根据模式处理值
+    const projectIds = multiple 
+      ? (Array.isArray(newValue) ? newValue : [newValue])
+      : (typeof newValue === 'string' ? [newValue] : []);
+    
+    if (projectIds.length === 0) {
+      setSelectedProjects([]);
+      onChange?.([], []);
+      return;
+    }
+
+    const users = getSelectedProjectsInfo(projectIds);
+    setSelectedProjects(users);
+    onChange?.(projectIds, users);
+  }, [getSelectedProjectsInfo, onChange, multiple]);
+
+  // 当外部 value 变化时更新选中状态
+  useEffect(() => {
+    if (!value || value.length == 0) {
+      setSelectedProjects([]);
+      return;
+    }
+
+    // 根据模式处理值
+    const projectIds = multiple 
+      ? (Array.isArray(value) ? value : [])
+      : (typeof value === 'string' ? [value] : []);
+    
+    const users = getSelectedProjectsInfo(projectIds);
+    setSelectedProjects(users);
+  }, [value, getSelectedProjectsInfo, multiple]);
+
+  // 带重试的请求函数
+  const fetchWithRetry = useCallback(async (fn: () => Promise<any>, retries: number = retryCount): Promise<any> => {
+    try {
+      // 创建新的 AbortController
+      abortControllerRef.current = new AbortController();
+      const signal = abortControllerRef.current.signal;
+
+      // 设置超时
+      const timeoutPromise = new Promise((_, reject) => {
+        setTimeout(() => {
+          reject(new Error('请求超时'));
+          abortControllerRef.current?.abort();
+        }, timeout);
+      });
+
+      // 执行请求
+      const result = await Promise.race([
+        fn(),
+        timeoutPromise,
+      ]);
+
+      return result;
+    } catch (error) {
+      if (retries > 0 && !(error instanceof Error && error.name === 'AbortError')) {
+        // 如果不是取消请求，则重试
+        await new Promise(resolve => setTimeout(resolve, 1000)); // 等待1秒后重试
+        return fetchWithRetry(fn, retries - 1);
+      }
+      throw error;
+    }
+  }, [timeout, retryCount]);
+
+  // 获项目列表
+  const fetchProjects = useCallback(async (search: string, append: boolean = false) => {
+    try {
+      setLoading(true);
+
+      // 生成缓存key
+      const cacheKey = `projects_${search}`;
+      
+      // 检查缓存
+      if (enableCache && !search) {
+        const cachedData = projectCacheManager.get(cacheKey);
+        if (cachedData) {
+          setOptions(prev => append ? [...prev, ...cachedData] : cachedData);
+          setHasMore(false);
+          return;
+        }
+      }
+
+      const res = await fetchWithRetry(async () => {
+        const result = await API.project.project.listProjects({ pageNum, pageSize: 1000 });
+        if (result.code === ResponseCode.SUCCESS && result.data) {
+          return {
+            ...result,
+            data: result.data.list.map((admin) => ({
+              id: admin.id,
+              name: admin.name,
+              descs: admin.descs,
+            })),
+          };
+        }
+        
+        return result;
+      });
+
+      if (res.code === ResponseCode.SUCCESS && res.data) {
+        const filteredUsers = res.data.filter((user: Project) => {
+          // 过滤排除的用户
+          if (excludeProjectIds.includes(user.id)) {
+            return false;
+          }
+          return true;
+        });
+
+        // 更新缓存
+        if (enableCache && !search) {
+          projectCacheManager.set(cacheKey, filteredUsers, cacheExpireTime);
+        }
+
+        setOptions(prev => append ? [...prev, ...filteredUsers] : filteredUsers);
+        setHasMore(false);
+      }
+    } catch (error) {
+      console.error('获取项目列表失败:', error);
+      message.error('获取项目列表失败，请稍后重试');
+    } finally {
+      setLoading(false);
+    }
+  }, [excludeProjectIds, fetchWithRetry, pageNum, enableCache, cacheExpireTime]);
+
+  // 组件卸载时取消未完成的请求
+  useEffect(() => {
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, []);
+
+  // 搜索防抖
+  const debouncedSearch = useMemo(
+    () => debounce((value: string) => {
+      setSearchValue(value);
+      setPageNum(1);
+      fetchProjects(value, false);
+    }, 300),
+    [fetchProjects]
+  );
+
+  // 滚动加载更多
+  const handlePopupScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+    const { target } = e;
+    if (!target) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = target as HTMLDivElement;
+    if (scrollHeight - scrollTop <= clientHeight * 1.5 && !loading && hasMore) {
+      const nextPage = pageNum + 1;
+      setPageNum(nextPage);
+      fetchProjects(searchValue, true);
+    }
+  }, [loading, hasMore, pageNum, searchValue, fetchProjects]);
+
+  // 初始加载
+  useEffect(() => {
+    fetchProjects('', false);
+  }, [fetchProjects]);
+
+  // 渲染用户信息卡片
+  const renderRoleInfoCard = (role: Project) => {
+    return (
+      <Card size="small" style={{ width: 280 }}>
+        <Space direction="vertical" size="small" style={{ width: '100%' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <div>
+              <div style={{ fontWeight: 'bold' }}>{role.name}</div>
+            </div>
+          </div>
+        </Space>
+      </Card>
+    );
+  };
+
+  // 渲染选项
+  const renderOption = (user: Project) => {
+    const parts = [];
+    parts.push(
+      <span key="name" style={{ 
+        verticalAlign: 'middle',
+        lineHeight: '20px'
+      }}>
+        {user.name}
+      </span>
+    );
+    
+    return (
+      <div style={{ 
+        display: 'flex', 
+        alignItems: 'center',
+        minHeight: '24px'
+      }}>
+        {parts}
+      </div>
+    );
+  };
+
+  // 使用 useMemo 缓存选项数据
+  const selectOptions = useMemo(() => 
+    options.map(user => ({
+      key: user.id,
+      label: renderOption(user),
+      value: user.id,
+      user, // 将用户信息存储在选项中
+    })), 
+    [options]
+  );
+
+  // 自定义标签渲染
+  const customTagRender = useCallback((props: any): ReactElement => {
+    const { value, closable, onClose } = props;
+    const user = options.find(u => u.id === value) || selectedProjects.find(u => u.id === value);
+    
+    if (!user) {
+      return <div>{value}</div>;
+    }
+
+    return (
+      <Popover
+        content={renderRoleInfoCard(user)}
+        trigger="click"
+        placement="right"
+      >
+        <div style={{ 
+          display: 'flex', 
+          alignItems: 'center',
+          cursor: 'pointer',
+          padding: '2px 8px',
+          background: 'rgb(var(--color-gray-100))',
+          borderRadius: 4,
+          margin: '2px 4px',
+          border: '1px solid rgb(var(--color-border))'
+        }}>
+          <span style={{ marginRight: 8 }}>{user.name}</span>
+          {closable && (
+            <span 
+              onClick={onClose}
+              style={{ 
+                cursor: 'pointer',
+                color: 'rgb(var(--color-gray-400))',
+                fontSize: 12,
+                padding: '0 4px'
+              }}
+            >
+              ×
+            </span>
+          )}
+        </div>
+      </Popover>
+    );
+  }, [options, selectedProjects]);
+
+  // 自定义选中值的渲染
+  const customSingleValueRender = useCallback((value: string): ReactElement => {
+    const user = options.find(u => u.id === value) || selectedProjects.find(u => u.id === value);
+    
+    if (!user) {
+      return <div>{value}</div>;
+    }
+
+    return (
+      <Popover
+        content={renderRoleInfoCard(user)}
+        trigger="click"
+        placement="right"
+      >
+        <div style={{ 
+          display: 'flex', 
+          alignItems: 'center',
+          cursor: 'pointer',
+          height: '100%'
+        }}>
+          <span>{user.name}</span>
+        </div>
+      </Popover>
+    );
+  }, [options, selectedProjects]);
+
+  // 获取当前选中的用户
+  const getCurrentRole = useCallback((currentValue: string | string[] | null | undefined) => {
+    if (!currentValue) return null;
+    const userId = Array.isArray(currentValue) ? currentValue[0] : currentValue;
+    return options.find(u => u.id === userId) || selectedProjects.find(u => u.id === userId);
+  }, [options, selectedProjects]);
+
+  return (
+    <Select
+      {...props}
+      mode={multiple ? 'multiple' : undefined}
+      showSearch
+      loading={loading}
+      filterOption={false}
+      onSearch={debouncedSearch}
+      onPopupScroll={handlePopupScroll}
+      notFoundContent={loading ? <Spin size="small" /> : null}
+      allowClear={allowClear}
+      value={multiple ? value : (typeof value === 'string' ? value : value?.toString())}
+      onChange={handleChange}
+      options={selectOptions}
+      style={{ 
+        ...props.style,
+        minHeight: '32px'
+      }}
+      tagRender={multiple ? customTagRender : undefined}
+      fieldNames={{
+        label: 'label',
+        value: 'value',
+      }}
+      // 自定义选中值的渲染
+      popupRender={multiple ? undefined : (menu) => {
+        const currentUser = getCurrentRole(value);
+        if (!currentUser) return menu;
+        
+        return (
+          <div>
+            <div style={{ 
+              padding: '8px 12px', 
+              borderBottom: '1px solid rgb(var(--color-border))',
+              cursor: 'pointer'
+            }}>
+              {customSingleValueRender(currentUser.id)}
+            </div>
+            {menu}
+          </div>
+        );
+      }}
+      // 自定义选中值的显示
+      suffixIcon={multiple ? undefined : (
+        value ? (
+          <div 
+            onClick={(e) => {
+              e.stopPropagation();
+              const currentUser = getCurrentRole(value);
+              if (currentUser) {
+                // 创建一个临时的 Popover 实例
+                const popover = document.createElement('div');
+                document.body.appendChild(popover);
+                const root = ReactDOM.createRoot(popover);
+                root.render(
+                  <Popover
+                    content={renderRoleInfoCard(currentUser)}
+                    trigger="click"
+                    placement="right"
+                    open={true}
+                    onOpenChange={(visible) => {
+                      if (!visible) {
+                        root.unmount();
+                        document.body.removeChild(popover);
+                      }
+                    }}
+                  >
+                    <div style={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%' }} />
+                  </Popover>
+                );
+              }
+            }}
+            style={{ 
+              cursor: 'pointer',
+              padding: '0 8px',
+              height: '100%',
+              display: 'flex',
+              alignItems: 'center'
+            }}
+          >
+            <span className="ant-select-arrow" />
+          </div>
+        ) : <span className="ant-select-arrow" />
+      )}
+    />
+  );
+};
+
+export default ProjectSelector; 

package/src/ui/ProjectSelector/projectCache.ts

@@ -0,0 +1,40 @@
+interface CacheItem {
+  data: any;
+  timestamp: number;
+  expireTime: number;
+}
+
+class CacheManager {
+  private cache: Map<string, CacheItem> = new Map();
+  private readonly defaultExpireTime = 5 * 60 * 1000;
+
+  set(key: string, data: any, expireTime: number = this.defaultExpireTime) {
+    this.cache.set(key, {
+      data,
+      timestamp: Date.now(),
+      expireTime,
+    });
+  }
+
+  get(key: string): any | null {
+    const item = this.cache.get(key);
+    if (!item) return null;
+
+    if (Date.now() - item.timestamp > item.expireTime) {
+      this.cache.delete(key);
+      return null;
+    }
+
+    return item.data;
+  }
+
+  clear() {
+    this.cache.clear();
+  }
+}
+
+export const projectCacheManager = new CacheManager();
+
+export function clearProjectCache() {
+  projectCacheManager.clear();
+}