@spacecorexdev/core 0.0.2 → 0.0.5

package/src/ui/FileManager/index.tsx

@@ -0,0 +1,580 @@
+import React, { useEffect, useRef, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Card, Modal, Input, Checkbox, Button, Spin } from 'antd';
+import { ProjectRole, ProjectFile, FileManagerApi, FileManagerFeatures, FileSortBy } from './types';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { projectFileManagerApi } from './projectFileManagerApi';
+import { UIFilePreview } from '../UIFilePreview/index';
+import { useEffectResize } from '../../utils/htmlUtils';
+import { getViewMode, setViewMode as saveViewMode } from '../../utils/CacheViewToggleInfo';
+import { buildFileTree, sortFiles } from './utils/fileTree';
+import { FileTableView } from './FileTableView';
+import { FileGridView } from './FileGridView';
+import { FileToolbar } from './FileToolbar';
+import { FileContextMenu } from './FileContextMenu';
+import { MoveCopyToProjectModal } from './MoveCopyToProjectModal';
+import { FileVersionHistoryModal } from './FileVersionHistoryModal';
+import { ShareToWechatModal } from './ShareToWechatModal';
+import { useFileManagerState } from './hooks/useFileManagerState';
+import { useFileManagerActions } from './hooks/useFileManagerActions';
+
+const PAGE_KEY = 'file-manager';
+const FILE_DESCS_MAX_LENGTH = 255;
+
+/** 在文件树中按 id 查找节点 */
+const findNodeInTree = (items: ProjectFile[], id: string): ProjectFile | undefined => {
+  for (const item of items) {
+    if (item.id === id) return item;
+    if (item.children && item.children.length > 0) {
+      const found = findNodeInTree(item.children, id);
+      if (found) return found;
+    }
+  }
+  return undefined;
+};
+
+interface FileManagerProps {
+  projectId: string;
+  fileId?: string | null;
+  currentUserRole: ProjectRole | null;
+  /** 当前文件 tab 是否处于激活状态：重新激活时刷新文件列表（例如在合同 tab 新建合同后切回） */
+  isActive?: boolean;
+  className?: string;
+  /** 数据接口适配器，缺省为项目文件 API（CRM 等场景注入自定义实现） */
+  api?: FileManagerApi;
+  /** 功能开关，缺省全部开启（合同、跨项目移动复制、微信分享、版本历史、外部预览链接） */
+  features?: FileManagerFeatures;
+}
+
+export const FileManager: React.FC<FileManagerProps> = ({
+  projectId,
+  currentUserRole,
+  isActive = true,
+  className,
+  api: apiProp,
+  features: featuresProp,
+}) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [state, actions] = useFileManagerState();
+
+  // 数据接口与功能开关：解析缺省值并计算各功能入口是否可用
+  const resolvedApi = apiProp || projectFileManagerApi;
+  const features = useMemo(() => featuresProp || {}, [featuresProp]);
+  const enableContracts = features.contracts !== false;
+  const enableMoveCopyToProject = features.moveCopyToProject !== false;
+  const enableShareToWechat = features.shareToWechat !== false;
+  const enableVersionHistory = features.versionHistory !== false;
+  const enableExternalLink = features.externalLink !== false;
+  const hasTempAccessToken = !!resolvedApi.generateTempAccessToken;
+  const hasCopyFileToProject = !!resolvedApi.copyFileToProject;
+
+  const hookOptions = useMemo(() => ({ api: resolvedApi, features }), [resolvedApi, features]);
+  // 预览时按当前适配器查询文件详情（CRM 场景走 /api/crm/file/detail，而非项目文件接口）
+  const fetchFileDetail = useMemo(
+    () => (fileId: string) => resolvedApi.getDetail(fileId),
+    [resolvedApi],
+  );
+  const fileManagerActions = useFileManagerActions(projectId, currentUserRole, state, actions, hookOptions);
+  const fileManagerActionsRef = useRef(fileManagerActions);
+  fileManagerActionsRef.current = fileManagerActions;
+
+  const currentFileId = searchParams.get('fileid');
+  const dragUploadProgressPercent = state.dragUploadPercent === undefined ? 0 : Math.min(100, Math.round(state.dragUploadPercent * 100));
+
+  useEffect(() => {
+    const { initUserRole, loadFiles } = fileManagerActionsRef.current;
+    initUserRole();
+    loadFiles();
+  }, [projectId]);
+
+  // 从其他 tab（如合同 tab）切回文件视图时刷新列表，确保新建/变更的合同文件夹能及时显示
+  const isActiveRef = useRef(isActive);
+  useEffect(() => {
+    if (isActive && !isActiveRef.current) {
+      fileManagerActionsRef.current.loadFiles();
+    }
+    isActiveRef.current = isActive;
+  }, [isActive]);
+
+  useEffect(() => {
+    if (currentFileId && state.files.length > 0) {
+      const file = state.files.find(f => f.id === currentFileId);
+      if (file && file.fileType !== 'folder') {
+        actions.setPreviewFileName(file.fileName);
+        actions.setPreviewUrl(file.fileResourcePath);
+        actions.setPreviewVisible(true);
+      }
+    }
+  }, [currentFileId, state.files]);
+
+  // 当 URL 中无 fileid 时关闭预览（如用户后退导航）。
+  // 仅依赖 currentFileId，不依赖 state.previewVisible —— 否则 handlePreview
+  // 设置 previewVisible=true 后，若 setSearchParams 尚未同步到 currentFileId，
+  // 此 effect 会把 previewVisible 重置为 false，导致首次请求被 abort。
+  const previewVisibleRef = useRef(state.previewVisible);
+  previewVisibleRef.current = state.previewVisible;
+  useEffect(() => {
+    if (!currentFileId && previewVisibleRef.current) {
+      actions.setPreviewVisible(false);
+      actions.setPreviewUrl(null);
+      actions.setPreviewingFile(null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentFileId]);
+
+  useEffectResize(() => {
+    actions.setSmallView(true);
+    actions.setViewMode('grid');
+  }, () => {
+    actions.setSmallView(false);
+    actions.setViewMode('table');
+  }, 500);
+
+  useEffect(() => {
+    const loadCachedViewMode = async () => {
+      const cached = await getViewMode(PAGE_KEY);
+      if (cached && (cached === 'grid' || cached === 'table')) {
+        actions.setViewMode(cached);
+      }
+    };
+    loadCachedViewMode();
+  }, []);
+
+  // 排序切换处理：相同字段切换顺序，不同字段设为升序
+  const handleSortByChange = (by: FileSortBy) => {
+    if (by === state.sortBy) {
+      actions.setSortOrder(state.sortOrder === 'asc' ? 'desc' : 'asc');
+    } else {
+      actions.setSortBy(by);
+      actions.setSortOrder('asc');
+    }
+  };
+
+  const handleSortOrderToggle = () => {
+    actions.setSortOrder(state.sortOrder === 'asc' ? 'desc' : 'asc');
+  };
+
+  // grid 视图目录导航：当前所在目录节点（用于顶部返回上级按钮）
+  const currentGridFolder = state.viewMode === 'grid' && state.selectedFolderId
+    ? findNodeInTree(state.fileTreeData, state.selectedFolderId)
+    : undefined;
+
+  const handleGridBack = () => {
+    actions.setSelectedFolderId(currentGridFolder?.parentId || null);
+  };
+
+  useEffect(() => {
+    if (state.viewMode === 'grid') {
+      actions.setExpandedRowKeys([]);
+    } else {
+      actions.setFileTreeData(buildFileTree(sortFiles(state.files)));
+    }
+  }, [state.viewMode, state.files]);
+
+  useEffect(() => {
+    const handleClick = () => {
+      if (state.contextMenuVisible) {
+        actions.setContextMenuVisible(false);
+        actions.setContextMenuRecord(null);
+      }
+    };
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [state.contextMenuVisible]);
+
+  const handleClosePreview = () => {
+    actions.setUploadPercent(undefined);
+    actions.setPreviewFileName(null);
+    actions.setUploadSuccess(undefined);
+    if (state.previewVisible) {
+      actions.setPreviewVisible(false);
+      actions.setPreviewingFile(null);
+      setSearchParams(prev => {
+        const newParams = new URLSearchParams(prev);
+        newParams.delete('fileid');
+        return newParams;
+      }, { replace: true });
+    } else if (state.editorVisible) {
+      actions.setEditorVisible(false);
+      actions.setEditingFile(null);
+    } else if (state.creatorVisible) {
+      actions.setCreatorVisible(false);
+      actions.setCreatingFileName('');
+      actions.setCreatingFileType(null);
+    }
+  };
+
+  return (
+    <Card
+      className={className}
+      styles={{
+        body: { padding: 0 },
+        header: { paddingLeft: state.smallView ? 16 : 0, paddingRight: state.smallView ? 16 : 0 },
+        extra: { margin: 0, marginLeft: 'auto', marginRight: state.smallView ? 0 : '8px' },
+      }}
+      title={currentGridFolder ? (
+        <Button
+          type="text"
+          size="small"
+          icon={<ArrowLeftOutlined />}
+          onClick={handleGridBack}
+          title="返回上级目录"
+          style={{ marginLeft: state.smallView ? 0 : 16 }}
+        />
+      ) : undefined}
+      extra={
+        <FileToolbar
+          currentUserRole={currentUserRole}
+          viewMode={state.viewMode}
+          onToggleViewMode={(mode) => { actions.setViewMode(mode); saveViewMode(PAGE_KEY, mode); }}
+          onCreateFolder={fileManagerActions.handleCreateFolder}
+          onCreateMarkdown={fileManagerActions.handleCreateMarkdown}
+          onCreateRdoc={fileManagerActions.handleCreateRdoc}
+          onCreateExcel={fileManagerActions.handleCreateExcel}
+          onCreateWord={fileManagerActions.handleCreateWord}
+          onUploadFiles={fileManagerActions.uploadFiles}
+        />
+      }
+    >
+      <div
+        className={`flex justify-center items-center rounded border ${state.rootDragOver ? 'border-blue-500 bg-blue-50' : 'border-dashed border-gray-300 bg-white'}`}
+        style={{
+          opacity: state.dragSourceId ? 1 : 0,
+          textAlign: 'center',
+          zIndex: 40,
+          position: 'absolute',
+          height: '40px',
+          left: 0,
+          right: 0,
+          margin: 'auto',
+          transition: 'all 0.2s',
+          borderWidth: '2px',
+          pointerEvents: state.dragSourceId ? 'auto' : 'none',
+        }}
+        onDragOver={fileManagerActions.handleRootDragOver}
+        onDragLeave={fileManagerActions.handleRootDragLeave}
+        onDrop={fileManagerActions.handleRootDrop}
+      >
+        移动到根目录
+      </div>
+
+      <div
+        className="relative"
+        onDragEnter={fileManagerActions.handleExternalDragEnter}
+        onDragOver={fileManagerActions.handleExternalDragOver}
+        onDragLeave={fileManagerActions.handleExternalDragLeave}
+        onDrop={fileManagerActions.handleExternalDrop}
+      >
+        {state.dragUploadPercent !== undefined && (
+          <Button
+            className="absolute right-3 top-3 z-50 shadow-md"
+            type={state.dragUploadSuccess === false ? 'default' : 'primary'}
+            danger={state.dragUploadSuccess === false}
+            loading={state.dragUploadSuccess !== false && dragUploadProgressPercent < 100}
+            disabled
+          >
+            {state.dragUploadSuccess === false
+              ? '拖拽上传失败'
+              : dragUploadProgressPercent >= 100
+                ? '拖拽上传完成'
+                : `拖拽上传中 ${dragUploadProgressPercent}%`}
+            {state.dragUploadingFileName ? `：${state.dragUploadingFileName}` : ''}
+          </Button>
+        )}
+
+        {state.isExternalDragOver && (
+          <div
+            className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-blue-500/10 border-2 border-blue-500 border-dashed rounded m-2"
+            style={{ pointerEvents: 'none' }}
+          >
+            <div className="text-blue-600 text-lg font-medium">释放以上传文件</div>
+            <div className="text-blue-400 text-sm mt-1">
+              {state.selectedFolderId
+                ? `上传到当前文件夹`
+                : '上传到根目录'}
+            </div>
+          </div>
+        )}
+
+        <Spin spinning={state.loading}>
+          <div className="min-h-[400px]">
+            {state.viewMode === 'table' ? (
+          <FileTableView
+            dataSource={state.fileTreeData}
+            expandedRowKeys={state.expandedRowKeys}
+            selectedFolderId={state.selectedFolderId}
+            dragOverId={state.dragOverId}
+            dragSourceId={state.dragSourceId}
+            smallView={state.smallView}
+            isFolderExpanded={fileManagerActions.isFolderExpanded}
+            onExpand={fileManagerActions.handleExpand}
+            onPreview={fileManagerActions.handlePreview}
+            onDownload={fileManagerActions.handleDownload}
+            onDownloadFolder={state.isManager ? fileManagerActions.handleDownloadFolder : undefined}
+            onCopyLink={enableExternalLink ? fileManagerActions.handleCopyLink : undefined}
+            onRename={fileManagerActions.handleRename}
+            onEditDescs={fileManagerActions.handleEditDescs}
+            onDelete={fileManagerActions.handleDelete}
+            onEdit={fileManagerActions.handleEditFile}
+            onGenerateTempLink={hasTempAccessToken ? fileManagerActions.handleGenerateTempLink : undefined}
+            onMove={fileManagerActions.handleMove}
+            onDragStart={fileManagerActions.handleDragStart}
+            onDragEnd={fileManagerActions.handleDragEnd}
+            onDragOver={fileManagerActions.handleDragOver}
+            onDragLeave={fileManagerActions.handleDragLeave}
+            onDrop={fileManagerActions.handleDrop}
+            onRowContextMenu={fileManagerActions.handleContextMenu}
+            onMoveToProject={enableMoveCopyToProject ? fileManagerActions.handleMoveToProject : undefined}
+            onCopyToProject={enableMoveCopyToProject ? fileManagerActions.handleCopyToProject : undefined}
+            onCopyToSelf={hasCopyFileToProject ? fileManagerActions.handleCopyToSelf : undefined}
+            onViewVersionHistory={enableVersionHistory ? fileManagerActions.handleViewVersionHistory : undefined}
+            onJumpToContract={enableContracts ? fileManagerActions.handleJumpToContract : undefined}
+            sortBy={state.sortBy}
+            sortOrder={state.sortOrder}
+            onSortByChange={handleSortByChange}
+          />
+        ) : (
+          <FileGridView
+            dataSource={state.fileTreeData}
+            selectedFolderId={state.selectedFolderId}
+            dragOverId={state.dragOverId}
+            dragSourceId={state.dragSourceId}
+            isFolderExpanded={fileManagerActions.isFolderExpanded}
+            smallView={state.smallView}
+            onPreview={fileManagerActions.handlePreview}
+            onDownload={fileManagerActions.handleDownload}
+            onDownloadFolder={state.isManager ? fileManagerActions.handleDownloadFolder : undefined}
+            onCopyLink={enableExternalLink ? fileManagerActions.handleCopyLink : undefined}
+            onRename={fileManagerActions.handleRename}
+            onEditDescs={fileManagerActions.handleEditDescs}
+            onDelete={fileManagerActions.handleDelete}
+            onEdit={fileManagerActions.handleEditFile}
+            onGenerateTempLink={hasTempAccessToken ? fileManagerActions.handleGenerateTempLink : undefined}
+            onFolderChange={actions.setSelectedFolderId}
+            onMove={fileManagerActions.handleMove}
+            onDragStart={fileManagerActions.handleDragStart}
+            onDragEnd={fileManagerActions.handleDragEnd}
+            onDragOver={fileManagerActions.handleDragOver}
+            onDragLeave={fileManagerActions.handleDragLeave}
+            onDrop={fileManagerActions.handleDrop}
+            onRowContextMenu={fileManagerActions.handleContextMenu}
+            onMoveToProject={enableMoveCopyToProject ? fileManagerActions.handleMoveToProject : undefined}
+            onCopyToProject={enableMoveCopyToProject ? fileManagerActions.handleCopyToProject : undefined}
+            onCopyToSelf={hasCopyFileToProject ? fileManagerActions.handleCopyToSelf : undefined}
+            onViewVersionHistory={enableVersionHistory ? fileManagerActions.handleViewVersionHistory : undefined}
+            onJumpToContract={enableContracts ? fileManagerActions.handleJumpToContract : undefined}
+            sortBy={state.sortBy}
+            sortOrder={state.sortOrder}
+            onSortByChange={handleSortByChange}
+            onSortOrderToggle={handleSortOrderToggle}
+          />
+        )}
+          </div>
+        </Spin>
+      </div>
+
+      <Modal
+        className='ant-modal-nofull'
+        title="新建文件夹"
+        open={state.createFolderVisible}
+        onOk={() => fileManagerActions.handleCreateFolderConfirm(state.newFolderName, state.newFolderDescs, state.isEncryptedFolder)}
+        onCancel={() => actions.setCreateFolderVisible(false)}
+        okText="创建"
+        cancelText="取消"
+      >
+        <Input
+          placeholder="请输入文件夹名称"
+          value={state.newFolderName}
+          onChange={(event) => actions.setNewFolderName(event.target.value)}
+        />
+        <Input.TextArea
+          className="mt-3"
+          placeholder="请输入备注（可选）"
+          value={state.newFolderDescs}
+          autoSize={{ minRows: 3, maxRows: 6 }}
+          maxLength={FILE_DESCS_MAX_LENGTH}
+          showCount
+          style={{ marginBottom: 24 }}
+          onChange={(event) => actions.setNewFolderDescs(event.target.value)}
+        />
+
+        {state.isManager && <Checkbox className="mt-2" checked={state.isEncryptedFolder} onChange={(e) => actions.setIsEncryptedFolder(e.target.checked)}>加密文件夹<span className="text-sm text-gray-500 font-thin">（仅对管理员可见)</span></Checkbox>}
+      </Modal>
+
+      <Modal
+        className='ant-modal-nofull'
+        title="新建文件"
+        open={state.createFileVisible}
+        onOk={() => fileManagerActions.handleCreateFileConfirm(state.newFileName, state.pendingFileType)}
+        onCancel={() => actions.setCreateFileVisible(false)}
+        okText="创建"
+        cancelText="取消"
+      >
+        <Input
+          placeholder="请输入文件名称"
+          value={state.newFileName}
+          onChange={(event) => actions.setNewFileName(event.target.value)}
+          onPressEnter={() => fileManagerActions.handleCreateFileConfirm(state.newFileName, state.pendingFileType)}
+          autoFocus
+        />
+      </Modal>
+
+      <Modal
+        title="编辑备注"
+        className='ant-modal-nofull'
+        open={state.descsVisible}
+        onOk={() => fileManagerActions.handleDescsConfirm(state.descsFileId, state.descsValue)}
+        onCancel={() => {
+          actions.setDescsVisible(false);
+          actions.setDescsFileId(null);
+          actions.setDescsValue('');
+        }}
+        okText="保存"
+        cancelText="取消"
+      >
+        <Input.TextArea
+          placeholder="请输入备注"
+          value={state.descsValue}
+          autoSize={{ minRows: 4, maxRows: 8 }}
+          maxLength={FILE_DESCS_MAX_LENGTH}
+          showCount
+          style={{ marginBottom: 24 }}
+          onChange={(event) => actions.setDescsValue(event.target.value)}
+        />
+      </Modal>
+
+      <Modal
+        title="重命名"
+        className='ant-modal-nofull'
+        open={state.renameVisible}
+        onOk={() => fileManagerActions.handleRenameConfirm(state.renameFileId, state.renameFileName)}
+        onCancel={() => actions.setRenameVisible(false)}
+        okText="确定"
+        cancelText="取消"
+      >
+        <Input
+          placeholder="请输入新名称"
+          value={state.renameFileName}
+          onChange={(event) => actions.setRenameFileName(event.target.value)}
+          onPressEnter={() => fileManagerActions.handleRenameConfirm(state.renameFileId, state.renameFileName)}
+        />
+      </Modal>
+
+      {(() => {
+        // previewFile 优先取 previewingFile（handlePreview 同步设置），
+        // 避免 setSearchParams 异步更新 currentFileId 时首次渲染取到旧文件。
+        const previewFile = state.editingFile || state.previewingFile || (currentFileId ? state.files.find(f => f.id === currentFileId) : undefined);
+        const isOffline = !state.isOnline;
+        // 本地文件 / 未同步修改 → 可编辑模式需要上传回调；离线时服务器文件禁用上传按钮
+        const shouldHideUpload = isOffline && !state.previewIsLocalOnly;
+        const editingOrCreating = state.editorVisible || state.creatorVisible;
+        const effectiveLocalId = state.previewLocalId || previewFile?.localId;
+
+        return (
+          <UIFilePreview
+            fileUrl={state.previewVisible ? state.previewUrl : (state.editingFile?.fileResourcePath || null)}
+            visible={state.previewVisible || state.editorVisible || state.creatorVisible}
+            editable={editingOrCreating}
+            isCreate={state.creatorVisible || !!state.previewIsLocalOnly}
+            fileName={state.editingFile?.fileName || state.creatingFileName || state.previewFileName || undefined}
+            uploadPercent={state.uploadPercent}
+            uploadSuccess={state.uploadSuccess}
+            onClose={handleClosePreview}
+            onUploadBlob={!shouldHideUpload
+              ? (state.editorVisible
+                ? async (initialBlob, blob, fileName) => fileManagerActions.handleUploadBlob(state.editingFile, initialBlob, blob, fileName)
+                : (state.creatorVisible
+                  ? async (initialBlob, blob, fileName) => fileManagerActions.handleCreateUploadBlob(initialBlob, blob, fileName)
+                  : undefined))
+              : undefined}
+            onUploadMarkdown={!shouldHideUpload
+              ? (state.editorVisible
+                ? async (oldContent, content, fileName) => fileManagerActions.handleUploadMarkdown(state.editingFile, oldContent, content, fileName)
+                : (state.creatorVisible
+                  ? async (oldContent, content, fileName) => fileManagerActions.handleCreateUploadMarkdown(oldContent, content, fileName)
+                  : undefined))
+              : undefined}
+            onSaveLocalBlob={(blob, fileName, markUnsynced) => fileManagerActions.handleSaveLocalBlob(effectiveLocalId, blob, fileName, markUnsynced)}
+            onSaveLocalMarkdown={(content, fileName, markUnsynced) => fileManagerActions.handleSaveLocalMarkdown(effectiveLocalId, content, fileName, markUnsynced)}
+            fileId={previewFile?.isContractLink ? undefined : previewFile?.id}
+            localId={effectiveLocalId}
+            isLocalOnly={state.previewIsLocalOnly || !!previewFile?.isLocalOnly}
+            hasUnsyncedChanges={state.previewHasUnsyncedChanges || !!previewFile?.hasUnsyncedChanges}
+            isOffline={isOffline}
+            crc32={state.previewCrc32}
+            fetchFileDetail={fetchFileDetail}
+            onCacheSaved={fileManagerActions.handleCacheSaved}
+          />
+        );
+      })()}
+
+      {state.contextMenuVisible && state.contextMenuRecord && (
+        <FileContextMenu
+          record={state.contextMenuRecord}
+          onPreview={fileManagerActions.handlePreview}
+          onDownload={fileManagerActions.handleDownload}
+          onDownloadFolder={state.isManager ? fileManagerActions.handleDownloadFolder : undefined}
+          onCopyLink={enableExternalLink ? fileManagerActions.handleCopyLink : undefined}
+          onRename={fileManagerActions.handleRename}
+          onEditDescs={fileManagerActions.handleEditDescs}
+          onDelete={fileManagerActions.handleDelete}
+          onEdit={fileManagerActions.handleEditFile}
+          onGenerateTempLink={hasTempAccessToken ? fileManagerActions.handleGenerateTempLink : undefined}
+          onMoveToProject={enableMoveCopyToProject ? fileManagerActions.handleMoveToProject : undefined}
+          onCopyToProject={enableMoveCopyToProject ? fileManagerActions.handleCopyToProject : undefined}
+          onCopyToSelf={hasCopyFileToProject ? fileManagerActions.handleCopyToSelf : undefined}
+          onViewVersionHistory={enableVersionHistory ? fileManagerActions.handleViewVersionHistory : undefined}
+          onJumpToContract={enableContracts ? fileManagerActions.handleJumpToContract : undefined}
+          onCreateContract={enableContracts ? fileManagerActions.handleCreateContract : undefined}
+          onShareToWechat={enableShareToWechat ? fileManagerActions.handleShareToWechat : undefined}
+          onClearCache={fileManagerActions.handleClearCache}
+          onOpenInNewWindow={enableExternalLink ? fileManagerActions.handleOpenInNewWindow : undefined}
+          isAdminOrOwner={state.isManager}
+          open={true}
+          position={state.contextMenuPosition}
+        />
+      )}
+
+      {enableMoveCopyToProject && (
+        <MoveCopyToProjectModal
+          visible={state.moveCopyModalVisible}
+          fileIds={state.moveCopyFiles.map(f => f.id)}
+          files={state.moveCopyFiles.map(f => ({ fileName: f.fileName, fileType: f.fileType }))}
+          currentProjectId={projectId}
+          mode={state.moveCopyMode}
+          onCancel={() => {
+            actions.setMoveCopyModalVisible(false);
+            actions.setMoveCopyFiles([]);
+          }}
+          onSuccess={fileManagerActions.handleMoveCopySuccess}
+        />
+      )}
+
+      {enableVersionHistory && (
+        <FileVersionHistoryModal
+          visible={state.versionHistoryModalVisible}
+          file={state.versionHistoryFile}
+          onClose={() => {
+            actions.setVersionHistoryModalVisible(false);
+            actions.setVersionHistoryFile(null);
+          }}
+        />
+      )}
+
+      {enableShareToWechat && (
+        <ShareToWechatModal
+          visible={state.shareToWechatVisible}
+          file={state.shareToWechatFile}
+          onFileCached={fileManagerActions.handleCacheSaved}
+          onClose={() => {
+            actions.setShareToWechatVisible(false);
+            actions.setShareToWechatFile(null);
+          }}
+        />
+      )}
+
+    </Card>
+  );
+};

package/src/ui/FileManager/projectFileManagerApi.ts

@@ -0,0 +1,57 @@
+import { API } from '../../api/index';
+import { ResponseCode } from '../../api/_base';
+import { CacheUserInfo } from '../../utils/CacheUserInfo';
+import { FileManagerApi, ProjectFile, ProjectRole } from './types';
+
+/**
+ * 项目文件场景的默认 FileManagerApi 实现：包装 API.project.*。
+ * FileManager 未传入自定义 api 时使用。
+ */
+export const projectFileManagerApi: FileManagerApi = {
+  listFiles: (scopeId) =>
+    API.project.file.listFiles({ projectId: scopeId }) as Promise<{
+      code: number;
+      message?: string;
+      data?: ProjectFile[];
+    }>,
+  getDetail: (fileId) =>
+    API.project.file.getDetail({ fileId }) as Promise<{
+      code: number;
+      message?: string;
+      data?: ProjectFile;
+    }>,
+  addFile: (scopeId, data) => API.project.file.addFile({ projectId: scopeId }, data),
+  removeFile: (fileId) => API.project.file.removeFile({ fileId }),
+  moveFile: (scopeId, data) => API.project.file.moveFile({ projectId: scopeId }, data),
+  updateFileDescs: (data) => API.project.file.updateFileDescs(data),
+  updateFile: (data) => API.project.file.updateFile(data),
+  updateFileDelta: (data) => API.project.file.updateFileDelta(data),
+  copyFileToProject: (scopeId, fileId) =>
+    API.project.file.copyFileToProject({ projectId: scopeId, fileId }),
+  generateTempAccessToken: (fileId, expireSeconds) =>
+    API.project.file.generateTempAccessToken({ fileId, expireSeconds }),
+  downloadFolder: (scopeId, folderPath, folderName) =>
+    API.project.file.folderDownload(
+      { projectId: scopeId },
+      { folderPath, folderName },
+    ) as Promise<{ code: number; message?: string; data?: { jobId: string } }>,
+  getFolderDownloadStatus: (jobId) =>
+    API.project.file.folderDownloadStatus({ jobId }) as Promise<{
+      code: number;
+      message?: string;
+      data?: import('./types').FolderDownloadJobStatus;
+    }>,
+  resolveIsManager: async (scopeId) => {
+    const user = await CacheUserInfo.getUserInfo({ forceRefresh: true });
+    const projectRes = await API.project.project.getProjectMembers({ projectId: scopeId });
+    if (projectRes.code == ResponseCode.SUCCESS) {
+      const ret = projectRes.data?.find(
+        (value) =>
+          value.userId == user?.id &&
+          (value.role == ProjectRole.MANAGER || value.role == ProjectRole.OWNER),
+      );
+      return !!ret;
+    }
+    return false;
+  },
+};