@spacecorexdev/core 0.0.4 → 0.0.5

package/src/ui/UserSelector/index.tsx

@@ -0,0 +1,583 @@
+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 ReactDOM from 'react-dom/client';
+import { CacheUserInfo, UserInfo } from '../../utils/CacheUserInfo';
+
+/******
+使用示例：
+
+<UserSelector
+  value={selectedUserIds}
+  onChange={(userIds, users) => {
+    setSelectedUserIds(userIds);
+  }}
+  placeholder="请选择用户"
+  multiple={false}
+  userType="all"
+  excludeUserIds={[]}
+  showAvatar={true}
+  showUsername={true}
+  showNickname={false}  
+  showPhone={false}
+/>
+
+****/
+
+const { Text } = Typography;
+
+export interface UserSelectorProps extends Omit<SelectProps, 'options' | 'value' | 'onChange'> {
+  // 是否允许多选
+  multiple?: boolean;
+  // 用户类型过滤：'admin' | 'user' | 'all'
+  userType?: 'admin' | 'user' | 'all';
+  // 需要排除的用户ID列表
+  excludeUserIds?: string[];
+  // 是否显示头像
+  showAvatar?: boolean;
+  // 是否显示用户名
+  showUsername?: boolean;
+  // 是否显示昵称
+  showNickname?: boolean;
+  // 是否显示手机号
+  showPhone?: boolean;
+  // 自定义搜索字段
+  searchFields?: ('username' | 'nickname' | 'phone')[];
+  // 每页加载数量
+  pageSize?: number;
+  // 是否允许清除选择
+  allowClear?: boolean;
+  // 选中的用户ID数组
+  value?: string[];
+  // 初始已选用户信息（用于回显头像/昵称，避免用户列表异步加载完成前显示为 ID）
+  initialUsers?: UserInfo[];
+  // 选中用户变化时的回调
+  onChange?: (userIds: string[], selectedUsers: UserInfo[]) => void;
+}
+
+const UserSelector: React.FC<UserSelectorProps> = ({
+  multiple = false,
+  userType = 'all',
+  excludeUserIds = [],
+  showAvatar = true,
+  showUsername = true,
+  showNickname = true,
+  showPhone = true,
+  searchFields = ['username', 'nickname', 'phone'],
+  pageSize = 10,
+  allowClear = true,
+  value,
+  initialUsers,
+  onChange,
+  ...props
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [options, setOptions] = useState<UserInfo[]>([]);
+  const [searchValue, setSearchValue] = useState('');
+  const [pageNum, setPageNum] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [selectedUsers, setSelectedUsers] = useState<UserInfo[]>([]);
+  const optionsRef = useRef<UserInfo[]>([]);
+  const selectedUsersRef = useRef<UserInfo[]>([]);
+  const initialUsersRef = useRef<UserInfo[]>([]);
+
+  // 按 ID 查找用户：选项 → 已选 → 外部初始用户
+  const findUserById = useCallback((id: string): UserInfo | undefined => {
+    return optionsRef.current.find(user => user.id === id)
+      || selectedUsersRef.current.find(user => user.id === id)
+      || (initialUsersRef.current || []).find(user => user.id === id);
+  }, []);
+
+  useEffect(() => {
+    initialUsersRef.current = initialUsers || [];
+  }, [initialUsers]);
+
+    // 获取人员列表
+  const fetchUsers = useCallback(async (search: string|null) => {
+    try {
+      setLoading(true);
+
+      // 使用 getUserInfos 获取用户信息
+      const userInfosMap = await CacheUserInfo.getUserInfos({ keywords: (search ? search : ''),  forceRefresh: false });
+      
+      // 将 Map 转换为数组
+      let usersArray = Array.from(userInfosMap.values());
+      
+      // 过滤管理员
+      usersArray = usersArray.filter(user => user.username !== 'admin');
+      
+      // 根据用户类型过滤
+      if (userType === 'admin') {
+        usersArray = usersArray.filter(user => user.isAdmin);
+      } else if (userType === 'user') {
+        usersArray = usersArray.filter(user => !user.isAdmin);
+      }
+      
+      // 搜索过滤
+      if (search) {
+        usersArray = usersArray.filter(user => 
+          searchFields.some(field => {
+            const value = user[field];
+            return value && value.toLowerCase().includes(search.toLowerCase());
+          })
+        );
+      }
+      
+      // 排除用户
+      if (excludeUserIds.length > 0) {
+        usersArray = usersArray.filter(user => !excludeUserIds.includes(user.id));
+      }
+      
+      // 按用户名排序
+      usersArray.sort((a, b) => (a.username || '').localeCompare(b.username || ''));
+      
+      // 转换数据格式以匹配 UserInfo 接口
+      const transformedUsers: UserInfo[] = usersArray;
+      
+      setOptions(prev => [...prev, ...transformedUsers]);
+      setHasMore(false); // getUserInfos 不支持分页，暂时设为 false
+    } catch (error) {
+      console.error('获取人员列表失败:', error);
+      message.error('获取人员列表失败，请稍后重试');
+    } finally {
+      setLoading(false);
+    }
+  }, [userType, excludeUserIds, searchFields]);
+
+  
+  // 初始加载
+  useEffect(() => {
+    fetchUsers(null);
+  }, [fetchUsers]);
+  
+  // 更新 refs
+  useEffect(() => {
+    optionsRef.current = options;
+  }, [options]);
+
+  useEffect(() => {
+    selectedUsersRef.current = selectedUsers;
+  }, [selectedUsers]);
+
+  // 处理选择变化
+  const handleChange = useCallback((newValue: string[] | null) => {
+    if (!newValue || newValue.length == 0) {
+      setSelectedUsers([]);
+      onChange?.([], []);
+      return;
+    }
+
+    // 根据模式处理值
+    const userIds = Array.isArray(newValue) ? newValue : [newValue];
+    let users = [] as UserInfo[];
+    for (let i = 0; i < userIds.length; i++) {
+      const id = userIds[i];
+      const found = findUserById(id);
+      if (found) {
+        users.push(found);
+      } else {
+        users.push({
+          id,
+          username: id,
+          nickname: '',
+          phone: '',
+          avatar: { avatar_small: '' }
+        } as UserInfo);
+      } // if..else.
+    } // for.
+      
+    if (selectedUsers.length == users.length) {
+      let i = 0;
+      for (i = 0; i < users.length; i++) {
+        if (selectedUsers.find((value) => { return value.id == users[i].id ? value : null; })) {
+          break;
+        }
+      }
+      if (i < users.length) {
+        return;
+      }
+    } // if.
+
+    setSelectedUsers(users.slice());
+
+    onChange?.(userIds, users);
+  }, [onChange, selectedUsers]);
+
+  // 当外部 value 变化时更新选中状态
+  useEffect(() => {
+    // setTimeout(() => {
+    // console.log('外部 value 变化:', value, selectedUsers);
+    if (!value || value.length == 0) {
+      if (!selectedUsers || selectedUsers.length == 0) return;
+      setSelectedUsers([]);
+      return;
+    }
+
+    value.sort();
+    let selected = [] as string[];
+    if (selectedUsers) {
+      selected = selectedUsers.map(user => user.id);
+      selected.sort();
+    }
+    if (value.join(',') == selected.join(',')) return;
+
+    // 根据模式处理值
+    handleChange(value);
+    // }, 100);
+
+  }, [value, multiple, handleChange, selectedUsers]);
+
+  // 当 options 更新时，更新 selectedUsers 中的用户信息
+  useEffect(() => {
+    if (!value || value.length == 0) return;
+
+    const userIds = value;
+
+    const users = userIds.map(id => {
+      const found = findUserById(id);
+      if (found) return found;
+
+      return {
+        id,
+        username: id,
+        nickname: '',
+        phone: '',
+        type: null,
+      } as any;
+    }).filter((user): user is UserInfo => user !== undefined);
+
+    // 只在有变化时更新
+    setSelectedUsers(prev => {
+      if (prev.length !== users.length || prev.some((u, i) => u.id !== users[i]?.id || u.username !== users[i]?.username)) {
+        return users;
+      }
+      return prev;
+    });
+  }, [options, value, initialUsers, findUserById]);
+
+  // 搜索防抖
+  const debouncedSearch = useMemo(
+    () => debounce((value: string) => {
+      setSearchValue(value);
+      setPageNum(1);
+      fetchUsers(value);
+    }, 300),
+    [fetchUsers]
+  );
+
+  // 滚动加载更多
+  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);
+      fetchUsers(searchValue);
+    }
+  }, [loading, hasMore, pageNum, searchValue, fetchUsers]);
+
+  // 渲染用户信息卡片
+  const renderUserInfoCard = (user: UserInfo) => {
+    return (
+      <Card size="small" style={{ width: 280 }}>
+        <Space direction="vertical" size="small" style={{ width: '100%' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <Avatar
+              src={user?.avatar?.avatar_small}
+              size={40}
+            >
+              {user.nickname?.[0] || user.username?.[0]}
+            </Avatar>
+            <div>
+              <div style={{ fontWeight: 'bold' }}>{user.nickname || user.username}</div>
+              {user.title && (
+                <Text type="secondary" style={{ fontSize: 12 }}>{user.title}</Text>
+              )}
+            </div>
+          </div>
+          {user.phone && (
+            <div>
+              <Text type="secondary" style={{ fontSize: 12 }}>手机号：</Text>
+              <Text style={{ fontSize: 12 }}>{user.phone}</Text>
+            </div>
+          )}
+          {user.departmentInfo?.department_names && (
+            <div>
+              <Text type="secondary" style={{ fontSize: 12 }}>所属部门：</Text>
+              <Text style={{ fontSize: 12 }}>
+                {user.departmentInfo?.department_names.join('、')}
+              </Text>
+            </div>
+          )}
+        </Space>
+      </Card>
+    );
+  };
+
+  // 渲染选项
+  const renderOption = useMemo(() => (user: UserInfo) => {
+    const parts = [];
+    if (showAvatar) {
+      parts.push(
+        <Avatar
+          key="avatar"
+          src={user?.avatar?.avatar_small}
+          size={20}
+          style={{
+            marginRight: 8,
+            verticalAlign: 'middle',
+            flexShrink: 0
+          }}
+        >
+          {user.nickname?.[0] || user.username?.[0]}
+        </Avatar>
+      );
+    }
+    if (showNickname && user.nickname) {
+      parts.push(
+        <span key="nickname" style={{
+          verticalAlign: 'middle',
+          lineHeight: '20px'
+        }}>
+          {user.nickname}
+        </span>
+      );
+    }
+    if (showUsername) {
+      parts.push(
+        <span key="username" style={{
+          marginLeft: 8,
+          color: 'rgb(var(--color-gray-400))',
+          verticalAlign: 'middle',
+          lineHeight: '20px'
+        }}>
+          ({user.username})
+        </span>
+      );
+    }
+    if (showPhone && user.phone) {
+      parts.push(
+        <span key="phone" style={{
+          marginLeft: 8,
+          color: 'rgb(var(--color-gray-400))',
+          verticalAlign: 'middle',
+          lineHeight: '20px'
+        }}>
+          {user.phone}
+        </span>
+      );
+    }
+    return (
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        minHeight: '24px'
+      }}>
+        {parts}
+      </div>
+    );
+  }, [showAvatar, showUsername, showNickname, showPhone]);
+
+  // 使用 useMemo 缓存选项数据
+  const selectOptions = useMemo(() => {
+    const allUsers = [...options, ...selectedUsers];
+    const uniqueUsers = allUsers.filter((user, index, self) =>
+      self.findIndex(u => u.id === user.id) === index
+    );
+    return uniqueUsers.map(user => ({
+      label: renderOption(user),
+      value: user.id,
+      user, // 将用户信息存储在选项中
+    }));
+  },
+    [options, selectedUsers, renderOption]
+  );
+
+  // 自定义标签渲染
+  const customTagRender = useCallback((props: any): ReactElement => {
+    const { value, closable, onClose } = props;
+    const user = options.find(u => u.id === value)
+      || selectedUsers.find(u => u.id === value)
+      || (initialUsers || []).find(u => u.id === value);
+
+    if (!user) {
+      return <div>{value}</div>;
+    }
+
+    return (
+      <Popover
+        content={renderUserInfoCard(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))'
+        }}>
+          <Avatar
+            src={user?.avatar?.avatar_small}
+            size={20}
+            style={{ marginRight: 8 }}
+          >
+            {user.nickname?.[0] || user.username?.[0]}
+          </Avatar>
+          <span style={{ marginRight: 8 }}>{user.nickname || user.username}</span>
+          {closable && (
+            <span
+              onClick={onClose}
+              style={{
+                cursor: 'pointer',
+                color: 'rgb(var(--color-gray-400))',
+                fontSize: 12,
+                padding: '0 4px'
+              }}
+            >
+              ×
+            </span>
+          )}
+        </div>
+      </Popover>
+    );
+  }, [options, selectedUsers, initialUsers]);
+
+  // 自定义选中值的渲染
+  const customSingleValueRender = useCallback((value: string): ReactElement => {
+    const user = options.find(u => u.id === value)
+      || selectedUsers.find(u => u.id === value)
+      || (initialUsers || []).find(u => u.id === value);
+
+    if (!user) {
+      return <div>{value}</div>;
+    }
+
+    return (
+      <Popover
+        content={renderUserInfoCard(user)}
+        trigger="click"
+        placement="right"
+      >
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          cursor: 'pointer',
+          height: '100%'
+        }}>
+          <Avatar
+            src={user?.avatar?.avatar_small}
+            size={20}
+            style={{ marginRight: 8 }}
+          >
+            {user.nickname?.[0] || user.username?.[0]}
+          </Avatar>
+          <span>{user.nickname || user.username}</span>
+        </div>
+      </Popover>
+    );
+  }, [options, selectedUsers, initialUsers]);
+
+  // 获取当前选中的用户
+  const getCurrentUser = useCallback((currentValue:string[] | null | undefined) => {
+    if (!currentValue || currentValue.length == 0) return null;
+    const userId = currentValue[0];
+    return options.find(u => u.id === userId)
+      || selectedUsers.find(u => u.id === userId)
+      || (initialUsers || []).find(u => u.id === userId);
+  }, [options, selectedUsers, initialUsers]);
+
+  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={value}
+      onChange={handleChange}
+      options={selectOptions}
+      style={{
+        ...props.style,
+        minHeight: '32px'
+      }}
+      tagRender={multiple ? customTagRender : undefined}
+      fieldNames={{
+        label: 'label',
+        value: 'value',
+      }}
+      // 自定义选中值的渲染
+      popupRender={multiple ? undefined : (menu) => {
+        const currentUser = getCurrentUser(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 = getCurrentUser(value);
+              if (currentUser) {
+                // 创建一个临时的 Popover 实例
+                const popover = document.createElement('div');
+                document.body.appendChild(popover);
+                const root = ReactDOM.createRoot(popover);
+                root.render(
+                  <Popover
+                    content={renderUserInfoCard(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 UserSelector; 

package/src/ui/index.ts

@@ -0,0 +1,84 @@
+// UI 公共组件桶导出
+export * from './UIAlert';
+export * from './UIAlertExample';
+export * from './UIConfirm';
+export * from './UIConfirmExample';
+export * from './UIDatePicker';
+export * from './UIDateRangePicker';
+export * from './UIImageUpload';
+export * from './UILoading';
+export * from './UILoadingExample';
+export * from './UISelect';
+export * from './UIToast';
+export * from './UIToastExample';
+export * from './UIToastSingle';
+export * from './UIViewToggle';
+// 带内部状态/缓存的选择器
+export * from './CommentTimeline';
+export * from './ProjectSelector';
+export * from './RoleSelector';
+export * from './UserSelector';
+// 重量级组件（文件管理、预览、发票、上传）
+export * from './FileManager';
+export * from './FileManager/types';
+export * from './UIFilePreview';
+export * from './InvoiceRecordsList';
+export * from './MyFileSelectorModal';
+export * from './UIFileUpload';
+
+// 仅以 default 方式导出的组件，这里再以具名形式暴露，供模块统一从包入口导入
+export { default as uiAlert } from './UIAlert';
+export { default as uiConfirm } from './UIConfirm';
+export { default as uiToast } from './UIToast';
+export { default as UserSelector } from './UserSelector';
+export { default as ProjectSelector } from './ProjectSelector';
+export { default as RoleSelector } from './RoleSelector';
+
+// 文件上传能力
+export { FileUploadHandler } from './upload';
+export { compressImage } from './upload/image';
+
+// 文件预览工具函数
+export {
+  fetchFileBuffer,
+  downloadFile,
+  downloadBlob,
+  getFileUrl,
+  getFilePreviewType,
+  getFileIcon,
+  ARCHIVE_FILE_EXTENSIONS,
+  CAD_FILE_EXTENSIONS,
+} from './UIFilePreview/previewUtils';
+export { default as MarkdownEditor } from './UIFilePreview/MarkdownEditor';
+
+// 文件树 / 文件工具
+export {
+  buildFileTree,
+  sortFiles,
+  sortTree,
+  getDescendantIds,
+  getDescendantIdsOptimized,
+  getFileDescendants,
+} from './FileManager/utils/fileTree';
+export {
+  formatFileSize,
+  isEditableFileType,
+  getDisplayName,
+  CONTRACTS_VIRTUAL_FOLDER_ID,
+  NOTES_ROOT_FOLDER_NAME,
+  isNotesRootName,
+} from './FileManager/utils/fileUtils';
+export {
+  getMimeType,
+  sanitizeFileName,
+  stripFileExtension,
+  calculateCRC32,
+  uploadFileBlob,
+  uploadMarkdownContent,
+  uploadFileDelta,
+  uploadMarkdownDelta,
+  extractFilesFromDrop,
+} from './FileManager/utils/fileUpload';
+
+// 角色缓存
+export { clearRoleCache } from './RoleSelector/roleCache';