@spacecorexdev/core 0.0.2 → 0.0.5

package/src/ui/MyFileSelectorModal.tsx

@@ -0,0 +1,261 @@
+import { useEffect, useMemo, useState } from 'react';
+import type { Key } from 'react';
+import { ReloadOutlined } from '@ant-design/icons';
+import { Button, Empty, Input, Modal, Spin, Tree, message } from 'antd';
+import type { DataNode } from 'antd/es/tree';
+import { API } from '../api/index';
+import { ResponseCode } from '../api/_base';
+import type { ProjectFile } from './FileManager/types';
+import { buildFileTree, sortFiles } from './FileManager/utils/fileTree';
+import { filterNotesRootFiles } from './FileManager/utils/fileUtils';
+import { uiFilePreview } from './UIFilePreview/index';
+import { CacheUserInfo } from '../utils/CacheUserInfo';
+
+interface MyFileSelectorModalProps {
+  open: boolean;
+  confirmLoading?: boolean;
+  title?: string;
+  searchPlaceholder?: string;
+  selectionMode?: 'single' | 'multiple';
+  okText?: string | ((selectedFiles: ProjectFile[]) => string);
+  emptyDescription?: string;
+  helperText?: string | ((selectedFiles: ProjectFile[]) => string);
+  fileFilter?: (file: ProjectFile) => boolean;
+  onCancel: () => void;
+  onConfirm: (files: ProjectFile[]) => void | Promise<void>;
+}
+
+const isFolderFile = (file: ProjectFile) => file.fileType === 'folder';
+
+const formatFileSize = (size?: number) => {
+  if (!size || size <= 0) {
+    return '';
+  }
+  if (size < 1024) {
+    return `${size} B`;
+  }
+  if (size < 1024 * 1024) {
+    return `${(size / 1024).toFixed(1)} KB`;
+  }
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+};
+
+const flattenFiles = (files: ProjectFile[]): ProjectFile[] =>
+  files.flatMap((file) => [file, ...flattenFiles(file.children || [])]);
+
+const getFileDisplayPath = (file: ProjectFile) => {
+  const folderPath = file.filePath && file.filePath !== '/' ? file.filePath : '/';
+  return `${folderPath}${folderPath.endsWith('/') ? '' : '/'}${file.fileName}`;
+};
+
+const getDefaultOkText = (selectedFiles: ProjectFile[], selectionMode: 'single' | 'multiple') => {
+  if (selectionMode === 'single') {
+    return selectedFiles.length ? '选择文件' : '请选择文件';
+  }
+  return selectedFiles.length ? `添加 ${selectedFiles.length} 个文件` : '添加文件';
+};
+
+const getDefaultHelperText = (selectedFiles: ProjectFile[], selectionMode: 'single' | 'multiple') => {
+  if (selectionMode === 'single') {
+    return selectedFiles.length ? `已选择：${selectedFiles[0].fileName}` : '只能选择文件，文件夹不会被选中。';
+  }
+  return `只能选择文件，文件夹不会被添加。已选择 ${selectedFiles.length} 个文件。`;
+};
+
+const filterTreeFiles = (
+  files: ProjectFile[],
+  keyword: string,
+  fileFilter?: (file: ProjectFile) => boolean,
+): ProjectFile[] => {
+  const normalizedKeyword = keyword.trim().toLowerCase();
+
+  return files.flatMap((file) => {
+    if (isFolderFile(file)) {
+      const children = filterTreeFiles(file.children || [], keyword, fileFilter);
+      return children.length ? [{ ...file, children }] : [];
+    }
+
+    const matchesKeyword = !normalizedKeyword || getFileDisplayPath(file).toLowerCase().includes(normalizedKeyword);
+    const matchesFilter = fileFilter ? fileFilter(file) : true;
+    return matchesKeyword && matchesFilter ? [file] : [];
+  });
+};
+
+const toTreeNodes = (
+  files: ProjectFile[],
+  selectableFileIds: Set<string>,
+  selectionMode: 'single' | 'multiple',
+): DataNode[] =>
+  files.map((file) => {
+    const selectable = selectableFileIds.has(file.id);
+    return {
+      key: file.id,
+      selectable: selectionMode === 'single' ? selectable : false,
+      disableCheckbox: selectionMode === 'multiple' ? !selectable : undefined,
+      title: (
+        <div className="flex w-full min-w-0 max-w-full items-center gap-2 whitespace-nowrap">
+          <span className="flex h-5 w-5 shrink-0 items-center justify-center text-base text-muted">
+            {uiFilePreview.getFileIcon({
+              fileName: file.fileName,
+              fileType: file.fileType,
+              size: 18,
+            })}
+          </span>
+          <span className="min-w-0 flex-1 truncate" title={file.fileName}>{file.fileName}</span>
+          {!isFolderFile(file) && (
+            <span className="w-16 shrink-0 text-right text-xs text-muted">{formatFileSize(file.fileSize || 0)}</span>
+          )}
+        </div>
+      ),
+      children: file.children?.length ? toTreeNodes(file.children, selectableFileIds, selectionMode) : undefined,
+    };
+  });
+
+export const MyFileSelectorModal = ({
+  open,
+  confirmLoading = false,
+  title = '从我的文件选择文件',
+  searchPlaceholder = '搜索我的文件',
+  selectionMode = 'multiple',
+  okText,
+  emptyDescription,
+  helperText,
+  fileFilter,
+  onCancel,
+  onConfirm,
+}: MyFileSelectorModalProps) => {
+  const [loading, setLoading] = useState(false);
+  const [projectId, setProjectId] = useState('');
+  const [files, setFiles] = useState<ProjectFile[]>([]);
+  const [selectedKeys, setSelectedKeys] = useState<Key[]>([]);
+  const [keyword, setKeyword] = useState('');
+
+  const loadFiles = async () => {
+    const user = CacheUserInfo.currentLocalUser();
+    if (!user?.id) {
+      message.warning('请先登录后再选择我的文件');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      let nextProjectId = user.id;
+      const projectRes = await API.project.project.getProjectName({ projectId: user.id });
+      if (!projectRes.data) {
+        const enableRes = await API.project.project.enableUserPrivateProject();
+        if (enableRes.code !== ResponseCode.SUCCESS || !enableRes.data) {
+          message.error(enableRes.message || '启用我的文件失败');
+          return;
+        }
+        nextProjectId = enableRes.data;
+      }
+
+      setProjectId(nextProjectId);
+      const listRes = await API.project.file.listFiles({ projectId: nextProjectId });
+      if (listRes.code !== ResponseCode.SUCCESS) {
+        message.error(listRes.message || '加载我的文件失败');
+        return;
+      }
+
+      setFiles(sortFiles(filterNotesRootFiles((listRes.data || []) as ProjectFile[])));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      setSelectedKeys([]);
+      setKeyword('');
+      return;
+    }
+
+    void loadFiles();
+  }, [open]);
+
+  const fileTreeData = useMemo(() => buildFileTree(files), [files]);
+  const allFiles = useMemo(() => flattenFiles(fileTreeData), [fileTreeData]);
+  const selectableFiles = useMemo(
+    () => allFiles.filter((file) => !isFolderFile(file) && (!fileFilter || fileFilter(file))),
+    [allFiles, fileFilter],
+  );
+  const selectableFileIds = useMemo(() => new Set(selectableFiles.map((file) => file.id)), [selectableFiles]);
+  const fileMap = useMemo(() => new Map(selectableFiles.map((file) => [file.id, file])), [selectableFiles]);
+  const selectedFiles = useMemo(
+    () => selectedKeys.flatMap((key) => {
+      const file = fileMap.get(String(key));
+      return file ? [file] : [];
+    }),
+    [selectedKeys, fileMap],
+  );
+  const treeData = useMemo(
+    () => toTreeNodes(filterTreeFiles(fileTreeData, keyword, fileFilter), selectableFileIds, selectionMode),
+    [fileFilter, fileTreeData, keyword, selectableFileIds, selectionMode],
+  );
+
+  const resolvedOkText = typeof okText === 'function' ? okText(selectedFiles) : okText || getDefaultOkText(selectedFiles, selectionMode);
+  const resolvedHelperText = typeof helperText === 'function'
+    ? helperText(selectedFiles)
+    : helperText || getDefaultHelperText(selectedFiles, selectionMode);
+
+  return (
+    <Modal
+      title={title}
+      open={open}
+      width={720}
+      className="max-md:!top-2 max-md:!max-w-[calc(100vw-16px)] max-md:[&_.ant-modal-body]:!flex max-md:[&_.ant-modal-body]:!min-h-0 max-md:[&_.ant-modal-body]:!flex-1 max-md:[&_.ant-modal-body]:!flex-col max-md:[&_.ant-modal-body]:!overflow-hidden max-md:[&_.ant-modal-content]:!flex max-md:[&_.ant-modal-content]:!h-[calc(100dvh-16px)] max-md:[&_.ant-modal-content]:!flex-col max-md:[&_.ant-modal-footer]:!shrink-0"
+      okText={resolvedOkText}
+      cancelText="取消"
+      confirmLoading={confirmLoading}
+      okButtonProps={{ disabled: selectedFiles.length === 0 }}
+      onCancel={confirmLoading ? undefined : onCancel}
+      onOk={() => onConfirm(selectedFiles)}
+    >
+      <div className="flex min-h-0 flex-col gap-3 max-md:flex-1">
+        <div className="flex shrink-0 items-center gap-2">
+          <Input.Search
+            allowClear
+            placeholder={searchPlaceholder}
+            value={keyword}
+            onChange={(event) => setKeyword(event.target.value)}
+          />
+          <Button icon={<ReloadOutlined />} disabled={loading || confirmLoading} onClick={loadFiles}>
+            刷新
+          </Button>
+        </div>
+
+        <div className="max-h-[52vh] min-h-[360px] overflow-y-auto overflow-x-hidden rounded-xl border border-email-divider bg-surface p-3 max-md:min-h-0 max-md:flex-1 max-md:max-h-none">
+          <Spin spinning={loading}>
+            {treeData.length ? (
+              <Tree
+                className="w-full [&_.ant-tree-list-holder-inner]:!w-full [&_.ant-tree-node-content-wrapper]:!min-w-0 [&_.ant-tree-node-content-wrapper]:!flex-1 [&_.ant-tree-node-content-wrapper]:!overflow-hidden [&_.ant-tree-title]:!block [&_.ant-tree-title]:!min-w-0 [&_.ant-tree-title]:!w-full [&_.ant-tree-treenode]:!w-full [&_.ant-tree-treenode]:!min-w-0"
+                checkable={selectionMode === 'multiple'}
+                selectable={selectionMode === 'single'}
+                checkStrictly
+                treeData={treeData}
+                checkedKeys={selectionMode === 'multiple' ? selectedKeys : undefined}
+                selectedKeys={selectionMode === 'single' ? selectedKeys : undefined}
+                defaultExpandAll={Boolean(keyword.trim())}
+                onCheck={(keys) => {
+                  const nextKeys = Array.isArray(keys) ? keys : keys.checked;
+                  setSelectedKeys(nextKeys.filter((key) => selectableFileIds.has(String(key))));
+                }}
+                onSelect={(keys) => {
+                  setSelectedKeys(keys.filter((key) => selectableFileIds.has(String(key))).slice(0, 1));
+                }}
+              />
+            ) : (
+              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={projectId ? emptyDescription || '暂无可选择的文件' : '我的文件尚未启用'} />
+            )}
+          </Spin>
+        </div>
+
+        <div className="shrink-0 text-xs text-muted">
+          {resolvedHelperText}
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default MyFileSelectorModal;