From 30c40179bec62b68bbc9d9641672a0de6d6e6265 Mon Sep 17 00:00:00 2001
From: MoeexT <yuwancumian666@outlook.com>
Date: Wed, 11 Mar 2026 16:59:29 +0800
Subject: [PATCH] :sparkles: multi-select file

---
 frontend/package-lock.json                    |   1 +
 frontend/package.json                         |   1 +
 .../Detail/components/Overview.tsx            |  43 ++-
 .../Detail/useFilesOperation.ts               | 262 ++++++++++++++++--
 4 files changed, 274 insertions(+), 33 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5c835945..d5d8550d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,6 +13,7 @@
         "antd": "^5.27.0",
         "i18next": "^25.8.0",
         "jssha": "^3.3.1",
+        "jszip": "^3.10.1",
         "lucide-react": "^0.539.0",
         "mammoth": "^1.11.0",
         "react": "^18.1.1",
diff --git a/frontend/package.json b/frontend/package.json
index e517ad48..b3be598e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,6 +16,7 @@
     "antd": "^5.27.0",
     "i18next": "^25.8.0",
     "jssha": "^3.3.1",
+    "jszip": "^3.10.1",
     "lucide-react": "^0.539.0",
     "mammoth": "^1.11.0",
     "react": "^18.1.1",
diff --git a/frontend/src/pages/DataManagement/Detail/components/Overview.tsx b/frontend/src/pages/DataManagement/Detail/components/Overview.tsx
index ff1853f0..4e65298f 100644
--- a/frontend/src/pages/DataManagement/Detail/components/Overview.tsx
+++ b/frontend/src/pages/DataManagement/Detail/components/Overview.tsx
@@ -30,6 +30,7 @@ export default function Overview({ dataset, filesOperation, fetchDataset }) {
     pagination,
     selectedFiles,
     setSelectedFiles,
+    clearSelection,
     previewVisible,
     previewFileName,
     previewContent,
@@ -43,6 +44,7 @@ export default function Overview({ dataset, filesOperation, fetchDataset }) {
     handleDownloadFile,
     handleBatchDeleteFiles,
     handleBatchExport,
+    handleSelectionChange,
     handleCreateDirectory,
     handleDownloadDirectory,
     handleDeleteDirectory,
@@ -50,11 +52,15 @@ export default function Overview({ dataset, filesOperation, fetchDataset }) {
     handleRenameDirectory,
   } = filesOperation;
 
-  // 文件列表多选配置
+  // 文件列表多选配置（支持跨页选择）
   const rowSelection = {
-    onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
-      setSelectedFiles(selectedRowKeys as number[]);
-    },
+    selectedRowKeys: selectedFiles,
+    onChange: handleSelectionChange,
+    preserveSelectedRowKeys: true, // 关键：跨页时保持选中状态
+    getCheckboxProps: (record: any) => ({
+      // 目录和文件都可以选择
+      name: record.fileName,
+    }),
   };
 
   // 显示删除确认弹窗
@@ -428,18 +434,36 @@ export default function Overview({ dataset, filesOperation, fetchDataset }) {
         {selectedFiles.length > 0 && (
           <div className="flex items-center gap-2 p-3 bg-blue-50 rounded-lg border border-blue-200">
             <span className="text-sm text-blue-700 font-medium">
-              {t("dataManagement.detail.selectedFiles", { count: selectedFiles.length })}
+              已选择 {selectedFiles.length} 项
+              {(() => {
+                const dirCount = selectedFiles.filter(id => typeof id === 'string' && id.startsWith('directory-')).length;
+                const fileCount = selectedFiles.length - dirCount;
+                if (dirCount > 0 && fileCount > 0) {
+                  return ` (${fileCount} 个文件, ${dirCount} 个文件夹)`;
+                } else if (dirCount > 0) {
+                  return ` (${dirCount} 个文件夹)`;
+                } else if (fileCount > 0) {
+                  return ` (${fileCount} 个文件)`;
+                }
+                return '';
+              })()}
             </span>
+            <Button
+              onClick={clearSelection}
+              className="ml-auto"
+            >
+              取消选择
+            </Button>
             <Button
               onClick={handleBatchExport}
-              className="ml-auto bg-transparent"
+              className="bg-white"
             >
               <Download className="w-4 h-4 mr-2" />
               {t("dataManagement.actions.batchExport")}
             </Button>
             <Button
               onClick={handleBatchDeleteFiles}
-              className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent"
+              danger
             >
               <Trash2 className="w-4 h-4 mr-2" />
               {t("dataManagement.actions.batchDelete")}
@@ -497,14 +521,15 @@ export default function Overview({ dataset, filesOperation, fetchDataset }) {
             rowKey="id"
             columns={columns}
             dataSource={fileList}
-            // rowSelection={rowSelection}
-            scroll={{ x: "max-content", y: 600 }}
+            rowSelection={rowSelection}
+            scroll={{ x: "max-content" }}
             pagination={{
               current: pagination.current,
               pageSize: pagination.pageSize,
               total: pagination.total,
               showTotal: (total) => t("dataManagement.detail.totalItems", { total }),
               showSizeChanger: true,
+              pageSizeOptions: [10, 20, 50, 100],
               onChange: (page, pageSize) => {
                 filesOperation.fetchFiles(filesOperation.pagination.prefix, page, pageSize);
               }
diff --git a/frontend/src/pages/DataManagement/Detail/useFilesOperation.ts b/frontend/src/pages/DataManagement/Detail/useFilesOperation.ts
index 06be5bc7..f14bf033 100644
--- a/frontend/src/pages/DataManagement/Detail/useFilesOperation.ts
+++ b/frontend/src/pages/DataManagement/Detail/useFilesOperation.ts
@@ -4,10 +4,10 @@ import type {
 } from "@/pages/DataManagement/dataset.model";
 import { App } from "antd";
 import { useState } from "react";
+import JSZip from "jszip";
 import {
   deleteDatasetFileUsingDelete,
   downloadFileByIdUsingGet,
-  exportDatasetUsingPost,
   queryDatasetFilesUsingGet,
   createDatasetDirectoryUsingPost,
   downloadDirectoryUsingGet,
@@ -24,7 +24,9 @@ export function useFilesOperation(dataset: Dataset) {
 
   // 文件相关状态
   const [fileList, setFileList] = useState<DatasetFile[]>([]);
-  const [selectedFiles, setSelectedFiles] = useState<number[]>([]);
+  const [selectedFiles, setSelectedFiles] = useState<React.Key[]>([]);
+  // 保存跨页选中的文件的完整信息
+  const [selectedFilesMap, setSelectedFilesMap] = useState<Map<React.Key, DatasetFile>>(new Map());
   const [pagination, setPagination] = useState<{
     current: number;
     pageSize: number;
@@ -65,22 +67,112 @@ export function useFilesOperation(dataset: Dataset) {
     }));
   };
 
-  const handleBatchDeleteFiles = () => {
+  // 处理文件选择变化（支持跨页选择）
+  const handleSelectionChange = (selectedRowKeys: React.Key[], selectedRows: DatasetFile[]) => {
+    setSelectedFiles(selectedRowKeys);
+
+    // 更新文件映射
+    const newMap = new Map(selectedFilesMap);
+
+    // 添加当前页选中的文件
+    selectedRows.forEach(file => {
+      newMap.set(file.id, file);
+    });
+
+    // 移除被取消选择的文件（不在 selectedRowKeys 中的）
+    const allKeysInMap = Array.from(newMap.keys());
+    allKeysInMap.forEach(key => {
+      if (!selectedRowKeys.includes(key)) {
+        newMap.delete(key);
+      }
+    });
+
+    setSelectedFilesMap(newMap);
+  };
+
+  // 清空选中状态
+  const clearSelection = () => {
+    setSelectedFiles([]);
+    setSelectedFilesMap(new Map());
+  };
+
+  const handleBatchDeleteFiles = async () => {
     if (selectedFiles.length === 0) {
       message.warning({ content: "请先选择要删除的文件" });
       return;
     }
-    // 执行批量删除逻辑
-    selectedFiles.forEach(async (fileId) => {
-      await fetch(`/api/datasets/${dataset.id}/files/${fileId}`, {
-        method: "DELETE",
+
+    const hide = message.loading({ content: `正在删除 ${selectedFiles.length} 个项目...`, duration: 0 });
+
+    try {
+      const prefix = pagination.prefix || "";
+      let successCount = 0;
+      let failCount = 0;
+
+      // 分类：文件和目录
+      const directories: any[] = [];
+      const files: any[] = [];
+
+      selectedFiles.forEach((fileId) => {
+        const file = selectedFilesMap.get(fileId);
+        if (!file) return; // 文件不在当前页，跳过（实际应该都存在）
+
+        if (typeof fileId === "string" && fileId.startsWith("directory-")) {
+          directories.push(file);
+        } else {
+          files.push(file);
+        }
       });
-    });
-    fetchFiles(); // 刷新文件列表
-    setSelectedFiles([]); // 清空选中状态
-    message.success({
-      content: `已删除 ${selectedFiles.length} 个文件`,
-    });
+
+      // 并发删除文件（限制并发数为 5）
+      const deleteFile = async (file: any) => {
+        try {
+          await deleteDatasetFileUsingDelete(dataset.id, file.id, prefix);
+          successCount++;
+        } catch (error) {
+          console.error(`删除文件失败: ${file.fileName}`, error);
+          failCount++;
+        }
+      };
+
+      const CONCURRENT_LIMIT = 5;
+      for (let i = 0; i < files.length; i += CONCURRENT_LIMIT) {
+        await Promise.all(
+          files.slice(i, i + CONCURRENT_LIMIT).map(deleteFile)
+        );
+      }
+
+      // 递归删除目录
+      const deleteDirectory = async (dir: any) => {
+        try {
+          const dirPath = `${prefix}${dir.fileName}/`;
+          await deleteDirectoryRecursively(dirPath);
+          successCount++;
+        } catch (error) {
+          console.error(`删除目录失败: ${dir.fileName}`, error);
+          failCount++;
+        }
+      };
+
+      // 目录删除也要并发，但数量通常较少
+      await Promise.all(directories.map(deleteDirectory));
+
+      // 刷新文件列表
+      await fetchFiles(prefix, 1, pagination.pageSize);
+      setSelectedFiles([]);
+      setSelectedFilesMap(new Map());
+
+      hide();
+
+      if (failCount === 0) {
+        message.success({ content: `成功删除 ${successCount} 个项目` });
+      } else {
+        message.warning({ content: `删除完成：成功 ${successCount} 个，失败 ${failCount} 个` });
+      }
+    } catch (error) {
+      hide();
+      message.error({ content: "批量删除失败" });
+    }
   };
 
   const handleDownloadFile = async (file: DatasetFile) => {
@@ -183,24 +275,144 @@ export function useFilesOperation(dataset: Dataset) {
     }
   };
 
-  const handleBatchExport = () => {
+  const handleBatchExport = async () => {
     if (selectedFiles.length === 0) {
       message.warning({ content: "请先选择要导出的文件" });
       return;
     }
-    // 执行批量导出逻辑
-    exportDatasetUsingPost(dataset.id, { fileIds: selectedFiles })
-      .then(() => {
-        message.success({
-          content: `已导出 ${selectedFiles.length} 个文件`,
+
+    try {
+      // 检查选中的是否包含目录
+      const hasDirectory = selectedFiles.some(
+        (fileId) => typeof fileId === "string" && fileId.startsWith("directory-")
+      );
+
+      if (hasDirectory) {
+        message.warning({ content: "暂不支持导出目录，请仅选择文件" });
+        return;
+      }
+
+      // 获取选中的文件列表并计算总大小
+      const files = Array.from(selectedFilesMap.values());
+      const totalSize = files.reduce((sum, f) => sum + (f.fileSize || 0), 0);
+      const MAX_SIZE = 500 * 1024 * 1024; // 500MB 限制
+
+      if (totalSize > MAX_SIZE) {
+        message.warning({
+          content: `所选文件总大小超过 500MB，建议分批导出（当前：${(totalSize / 1024 / 1024).toFixed(2)} MB）`,
         });
-        setSelectedFiles([]); // 清空选中状态
-      })
-      .catch(() => {
-        message.error({
-          content: "导出失败，请稍后再试",
+        return;
+      }
+
+      const hide = message.loading({
+        content: `正在准备下载 ${files.length} 个文件...`,
+        duration: 0
+      });
+
+      const prefix = pagination.prefix || "";
+      const zip = new JSZip();
+      let successCount = 0;
+      let failCount = 0;
+      let downloadedSize = 0;
+
+      // 并发下载文件（动态调整并发数）
+      const CONCURRENT_LIMIT = files.length > 20 ? 6 : 4;
+
+      for (let i = 0; i < files.length; i += CONCURRENT_LIMIT) {
+        const batch = files.slice(i, i + CONCURRENT_LIMIT);
+
+        // 更新进度提示
+        hide();
+        const progressMsg = message.loading({
+          content: `正在下载 ${successCount + 1}/${files.length} 个文件 (${((downloadedSize / totalSize) * 100).toFixed(0)}%)...`,
+          duration: 0
         });
+
+        await Promise.all(
+          batch.map(async (file) => {
+            try {
+              const { blob } = await downloadFileByIdUsingGet(
+                dataset.id,
+                prefix,
+                file.id,
+                file.fileName,
+                "preview"
+              );
+
+              downloadedSize += blob.size;
+
+              // 处理文件路径（移除前缀，保留相对路径）
+              let relativePath = file.fileName;
+              if (prefix && file.fileName.startsWith(prefix)) {
+                relativePath = file.fileName.substring(prefix.length);
+              }
+
+              // 添加到 zip
+              zip.file(relativePath, blob);
+              successCount++;
+            } catch (error) {
+              console.error(`下载文件失败: ${file.fileName}`, error);
+              failCount++;
+            }
+          })
+        );
+
+        progressMsg();
+      }
+
+      if (successCount === 0) {
+        hide();
+        message.error({ content: "所有文件下载失败" });
+        return;
+      }
+
+      // 生成 zip 文件
+      hide();
+      const loading = message.loading({
+        content: `正在压缩 ${successCount} 个文件（大小：${(totalSize / 1024 / 1024).toFixed(2)} MB）...`,
+        duration: 0
+      });
+
+      // 使用分块生成，避免大文件阻塞
+      try {
+        const zipBlob = await zip.generateAsync({
+          type: "blob",
+          compression: "DEFLATE",
+          compressionOptions: { level: 6 } // 平衡速度和压缩率
+        });
+
+        const downloadUrl = window.URL.createObjectURL(zipBlob);
+        const link = document.createElement("a");
+        link.href = downloadUrl;
+        link.download = `${dataset.name || 'dataset'}_${Date.now()}.zip`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(downloadUrl);
+
+        loading();
+
+        if (failCount === 0) {
+          message.success({
+            content: `成功导出 ${successCount} 个文件（${(totalSize / 1024 / 1024).toFixed(2)} MB）`,
+          });
+        } else {
+          message.warning({
+            content: `导出完成：成功 ${successCount} 个，失败 ${failCount} 个`,
+          });
+        }
+
+        setSelectedFiles([]);
+        setSelectedFilesMap(new Map());
+      } catch (error) {
+        loading();
+        message.error({ content: "生成压缩包失败，可能文件过大" });
+      }
+    } catch (error) {
+      message.error({
+        content: "导出失败，请稍后再试",
       });
+    }
   };
 
   const deleteDirectoryRecursively = async (directoryPath: string) => {
@@ -255,6 +467,7 @@ export function useFilesOperation(dataset: Dataset) {
     fileList,
     selectedFiles,
     setSelectedFiles,
+    clearSelection,
     pagination,
     setPagination,
     previewVisible,
@@ -269,6 +482,7 @@ export function useFilesOperation(dataset: Dataset) {
     setPreviewFileName,
     fetchFiles,
     setFileList,
+    handleSelectionChange,
     handleBatchDeleteFiles,
     handleDownloadFile,
     handlePreviewFile,