@spacecorexdev/core 0.0.4 → 0.0.5

package/src/ui/RoleSelector/index.tsx

@@ -0,0 +1,473 @@
+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 { Role } from '../../types/user/role';
+import { API } from '../../api/index';
+import { CacheRoleInfo } from '../../utils/CacheRoleInfo';
+import { roleCacheManager } from './roleCache';
+
+/******
+使用示例：
+
+<RoleSelector
+  value={selectedRoleIds}
+  onChange={(roleIds, roles) => {
+    setSelectedRoleIds(roleIds);
+  }}`
+  placeholder="请选择角色"
+  multiple={false}
+  excludeRoleIds={[]}
+/>
+
+****/
+
+
+const { Text } = Typography;
+
+export interface RoleSelectorProps extends Omit<SelectProps, 'options' | 'value' | 'onChange'> {
+  // 是否允许多选
+  multiple?: boolean;
+  // 需要排除的角色ID列表
+  excludeRoleIds?: string[];
+  // 是否允许清除选择
+  allowClear?: boolean;
+  // 请求超时时间（毫秒）
+  timeout?: number;
+  // 请求重试次数
+  retryCount?: number;
+  // 是否启用缓存
+  enableCache?: boolean;
+  // 缓存过期时间（毫秒）
+  cacheExpireTime?: number;
+  // 选中的角色ID数组
+  value?: string[];
+  // 选中角色变化时的回调
+  onChange?: (roleIds: string[], selectedRoles: Role[]) => void;
+}
+
+const RoleSelector: React.FC<RoleSelectorProps> = ({
+  multiple = false,
+  allowClear = true,
+  timeout = 10000,
+  retryCount = 3,
+  enableCache = true,
+  excludeRoleIds = [],
+  cacheExpireTime,
+  value,
+  onChange,
+  ...props
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [options, setOptions] = useState<Role[]>([]);
+  const [searchValue, setSearchValue] = useState('');
+  const [pageNum, setPageNum] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [selectedRoles, setSelectedRoles] = useState<Role[]>([]);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const optionsRef = useRef<Role[]>([]);
+  const selectedRolesRef = useRef<Role[]>([]);
+
+  // 更新 refs
+  useEffect(() => {
+    optionsRef.current = options;
+  }, [options]);
+
+  useEffect(() => {
+    selectedRolesRef.current = selectedRoles;
+  }, [selectedRoles]);
+
+  // 根据选中的用户ID获取完整的用户信息
+  const getSelectedRolesInfo = useCallback((userIds: string[]) => {
+    return userIds.map(id => {
+      // 先从已加载的选项中查找
+      const found = optionsRef.current.find(user => user.id === id);
+      if (found) return found;
+
+      // 如果选项中没有，则从已选中的用户中查找
+      return selectedRolesRef.current.find(user => user.id === id);
+    }).filter((user): user is Role => user !== undefined);
+  }, []); // 移除 options 和 selectedRoles 依赖
+
+  // 处理选择变化
+  const handleChange = useCallback((newValue: string | string[] | null) => {
+    if (!newValue) {
+      setSelectedRoles([]);
+      onChange?.([], []);
+      return;
+    }
+
+    // 根据模式处理值
+    const userIds = multiple 
+      ? (Array.isArray(newValue) ? newValue : [newValue])
+      : (typeof newValue === 'string' ? [newValue] : newValue);
+    
+    if (userIds.length === 0) {
+      setSelectedRoles([]);
+      onChange?.([], []);
+      return;
+    }
+
+    const users = getSelectedRolesInfo(userIds);
+    setSelectedRoles(users);
+    onChange?.(userIds, users);
+  }, [getSelectedRolesInfo, onChange, multiple]);
+
+  // 当外部 value 变化时更新选中状态
+  useEffect(() => {
+    if (!value || value.length == 0) {
+      setSelectedRoles([]);
+      return;
+    }
+
+    // 根据模式处理值
+    const userIds = multiple 
+      ? (Array.isArray(value) ? value : [])
+      : (typeof value === 'string' ? [value] : []);
+    
+    const users = getSelectedRolesInfo(userIds);
+
+    if (selectedRoles.length == users.length) {
+      let i = 0;
+      for (i = 0; i < users.length; i++) {
+        if (selectedRoles.find((value) => { return value.id == users[i].id ? value : null; })) {
+          break;
+        }
+      }
+      if (i < users.length) {
+        return;
+      }
+    } // if.
+
+    setSelectedRoles(users);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, getSelectedRolesInfo, 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 fetchRoles = useCallback(async (search: string, append: boolean = false) => {
+    try {
+      setLoading(true);
+
+      // 生成缓存key
+      const cacheKey = `roles_${search}`;
+      
+      // 检查缓存
+      if (enableCache && !search) {
+        const cachedData = roleCacheManager.get(cacheKey);
+        if (cachedData) {
+          setOptions(prev => append ? [...prev, ...cachedData] : cachedData);
+          setHasMore(false);
+          return;
+        }
+      }
+
+      const res = await fetchWithRetry(async () => {
+        const result = await CacheRoleInfo.getRoleList({ forceRefresh: true }) || [];
+        return result;
+      });
+
+      const filteredUsers = res.filter((user: Role) => {
+        // 过滤排除的用户
+        if (excludeRoleIds.includes(user.id)) {
+          return false;
+        }
+        return true;
+      });
+
+      // 更新缓存
+      if (enableCache && !search) {
+        roleCacheManager.set(cacheKey, filteredUsers, cacheExpireTime);
+      }
+
+      setOptions(prev => append ? [...prev, ...filteredUsers] : filteredUsers);
+      setHasMore(false);
+    } catch (error) {
+      console.error('获取角色列表失败:', error);
+      message.error('获取角色列表失败，请稍后重试');
+    } finally {
+      setLoading(false);
+    }
+  }, [excludeRoleIds, fetchWithRetry, enableCache, cacheExpireTime]);
+
+  // 组件卸载时取消未完成的请求
+  useEffect(() => {
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, []);
+
+  // 搜索防抖
+  const debouncedSearch = useMemo(
+    () => debounce((value: string) => {
+      setSearchValue(value);
+      setPageNum(1);
+      fetchRoles(value, false);
+    }, 300),
+    [fetchRoles]
+  );
+
+  // 滚动加载更多
+  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);
+      fetchRoles(searchValue, true);
+    }
+  }, [loading, hasMore, pageNum, searchValue, fetchRoles]);
+
+  // 初始加载
+  useEffect(() => {
+    fetchRoles('', false);
+  }, [fetchRoles]);
+
+  // 渲染用户信息卡片
+  const renderRoleInfoCard = (role: Role) => {
+    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: Role) => {
+    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 => ({
+      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) || selectedRoles.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, selectedRoles]);
+
+  // 自定义选中值的渲染
+  const customSingleValueRender = useCallback((value: string): ReactElement => {
+    const user = options.find(u => u.id === value) || selectedRoles.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, selectedRoles]);
+
+  // 获取当前选中的用户
+  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) || selectedRoles.find(u => u.id === userId);
+  }, [options, selectedRoles]);
+
+  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 RoleSelector; 

package/src/ui/RoleSelector/roleCache.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 roleCacheManager = new CacheManager();
+
+export function clearRoleCache() {
+  roleCacheManager.clear();
+}