feat: Enhance DatasetDetail component with delete functionality and improved download handling

feat: Add automatic data refresh and improved user feedback in DatasetManagementPage

fix: Update dataset API to streamline download functionality and improve error handling

frontend/src/pages/DataManagement/Detail/DatasetDetail.tsx

@@ -10,11 +10,12 @@ import {
 import DetailHeader from "@/components/DetailHeader";
 import { mapDataset, datasetTypeMap } from "../dataset.const";
 import type { Dataset } from "@/pages/DataManagement/dataset.model";
-import { Link, useParams } from "react-router";
-import { useFilesOperation } from "../hooks";
+import { Link, useNavigate, useParams } from "react-router";
+import { useFilesOperation } from "./useFilesOperation";
 import {
   createDatasetTagUsingPost,
-  downloadFile,
+  deleteDatasetByIdUsingDelete,
+  downloadDatasetUsingGet,
   queryDatasetByIdUsingGet,
   queryDatasetTagsUsingGet,
   updateDatasetByIdUsingPut,
@@ -43,6 +44,7 @@ const tabList = [
 
 export default function DatasetDetail() {
   const { id } = useParams(); // 获取动态路由参数
+  const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState("overview");
   const { message } = App.useApp();
   const [showEditDialog, setShowEditDialog] = useState(false);
@@ -79,10 +81,16 @@ export default function DatasetDetail() {
   };
 
   const handleDownload = async () => {
-    await downloadFile(dataset.id);
+    await downloadDatasetUsingGet(dataset.id);
     message.success("文件下载成功");
   };
 
+  const handleDeleteDataset = async () => {
+    await deleteDatasetByIdUsingDelete(dataset.id);
+    navigate("/data/management");
+    message.success("数据集删除成功");
+  };
+
   useEffect(() => {
     const refreshDataset = () => {
       fetchDataset();
@@ -166,11 +174,16 @@ export default function DatasetDetail() {
       key: "delete",
       label: "删除",
       danger: true,
-      icon: <DeleteOutlined />,
-      onClick: () => {
-        console.log("delete dataset");
+      confirm: {
+        title: "确认删除该数据集？",
+        description: "删除后该数据集将无法恢复，请谨慎操作。",
+        okText: "删除",
+        cancelText: "取消",
+        okType: "danger",
       },
-    }
+      icon: <DeleteOutlined />,
+      onClick: handleDeleteDataset,
+    },
   ];
 
   return (

frontend/src/pages/DataManagement/Detail/components/ImportConfiguration.tsx

@@ -1,10 +1,21 @@
-import { Select, Input, Form, Radio, Modal, Button } from "antd";
+import {
+  Select,
+  Input,
+  Form,
+  Radio,
+  Modal,
+  Button,
+  App,
+  UploadFile,
+} from "antd";
+import { InboxOutlined } from "@ant-design/icons";
 import { dataSourceOptions } from "../../dataset.const";
 import { Dataset, DataSource } from "../../dataset.model";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { queryTasksUsingGet } from "@/pages/DataCollection/collection.apis";
-import { useImportFile } from "../../hooks";
 import { updateDatasetByIdUsingPut } from "../../dataset.api";
+import { sliceFile } from "@/utils/file.util";
+import Dragger from "antd/es/upload/Dragger";
 
 export default function ImportConfiguration({
   data,
@@ -15,16 +26,52 @@ export default function ImportConfiguration({
   data?: Dataset;
   open: boolean;
   onClose: () => void;
-  onRefresh?: () => void;
+  onRefresh?: (showMessage?: boolean) => void;
 }) {
+  const { message } = App.useApp();
   const [form] = Form.useForm();
   const [collectionOptions, setCollectionOptions] = useState([]);
   const [importConfig, setImportConfig] = useState<any>({
     source: DataSource.UPLOAD,
   });
-  const { importFileRender, handleUpload } = useImportFile();
 
-  // 获取归集任务列表
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
+  const fileSliceList = useMemo(() => {
+    const sliceList = fileList.map((file) => {
+      const slices = sliceFile(file);
+      return { originFile: file, slices, name: file.name, size: file.size };
+    });
+    return sliceList;
+  }, [fileList]);
+
+  // 本地上传文件相关逻辑
+
+  const resetFiles = () => {
+    setFileList([]);
+  };
+
+  const handleUpload = async (dataset: Dataset) => {
+    const formData = new FormData();
+    fileList.forEach((file) => {
+      formData.append("file", file);
+    });
+    window.dispatchEvent(
+      new CustomEvent("upload:dataset", {
+        detail: { dataset, files: fileSliceList },
+      })
+    );
+    resetFiles();
+  };
+
+  const handleBeforeUpload = (_, files: UploadFile[]) => {
+    setFileList([...fileList, ...files]);
+    return false;
+  };
+
+  const handleRemoveFile = (file: UploadFile) => {
+    setFileList((prev) => prev.filter((f) => f.uid !== file.uid));
+  };
+
   const fetchCollectionTasks = async () => {
     try {
       const res = await queryTasksUsingGet({ page: 0, size: 100 });
@@ -40,6 +87,8 @@ export default function ImportConfiguration({
 
   const resetState = () => {
     form.resetFields();
+    setFileList([]);
+    form.setFieldsValue({ files: null });
     setImportConfig({ source: DataSource.UPLOAD });
   };
 
@@ -51,13 +100,16 @@ export default function ImportConfiguration({
         ...importConfig,
       });
     }
-    resetState();
-    onRefresh?.();
+    message.success("数据已更新");
+    onRefresh?.(false);
     onClose();
   };
 
   useEffect(() => {
-    if (open) fetchCollectionTasks();
+    if (open) {
+      resetState();
+      fetchCollectionTasks();
+    }
   }, [open]);
 
   return (
@@ -65,12 +117,19 @@ export default function ImportConfiguration({
       title="导入数据"
       open={open}
       width={600}
-      onCancel={onClose}
+      onCancel={() => {
+        onClose();
+        resetState();
+      }}
       maskClosable={false}
       footer={
         <>
           <Button onClick={onClose}>取消</Button>
-          <Button type="primary" onClick={handleImportData}>
+          <Button
+            type="primary"
+            disabled={!fileList?.length && !importConfig.dataSource}
+            onClick={handleImportData}
+          >
             确定
           </Button>
         </>
@@ -132,6 +191,7 @@ export default function ImportConfiguration({
             </Form.Item>
           </div>
         )}
+
         {/* obs import */}
         {importConfig?.source === DataSource.OBS && (
           <div className="grid grid-cols-2 gap-3 p-4 bg-blue-50 rounded-lg">
@@ -185,7 +245,18 @@ export default function ImportConfiguration({
               },
             ]}
           >
-            {importFileRender()}
+            <Dragger
+              className="w-full"
+              onRemove={handleRemoveFile}
+              beforeUpload={handleBeforeUpload}
+              multiple
+            >
+              <p className="ant-upload-drag-icon">
+                <InboxOutlined />
+              </p>
+              <p className="ant-upload-text">本地文件上传</p>
+              <p className="ant-upload-hint">拖拽文件到此处或点击选择文件</p>
+            </Dragger>
           </Form.Item>
         )}
 

frontend/src/pages/DataManagement/Detail/components/Overview.tsx

@@ -82,11 +82,6 @@ export default function Overview({ dataset, filesOperation }) {
       label: "更新时间",
       children: dataset.updatedAt,
     },
-    {
-      key: "dataSource",
-      label: "数据源",
-      children: dataset.dataSource || "未知",
-    },
     {
       key: "description",
       label: "描述",

frontend/src/pages/DataManagement/Detail/useFilesOperation.ts

@@ -0,0 +1,124 @@
+import type {
+  Dataset,
+  DatasetFile,
+} from "@/pages/DataManagement/dataset.model";
+import { App } from "antd";
+import { useState } from "react";
+import {
+  deleteDatasetFileUsingDelete,
+  downloadFileByIdUsingGet,
+  exportDatasetUsingPost,
+  queryDatasetFilesUsingGet,
+} from "../dataset.api";
+import { useParams } from "react-router";
+
+export function useFilesOperation(dataset: Dataset) {
+  const { message } = App.useApp();
+  const { id } = useParams(); // 获取动态路由参数
+
+  // 文件相关状态
+  const [fileList, setFileList] = useState<DatasetFile[]>([]);
+  const [selectedFiles, setSelectedFiles] = useState<number[]>([]);
+
+  // 文件预览相关状态
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewContent, setPreviewContent] = useState("");
+  const [previewFileName, setPreviewFileName] = useState("");
+
+  const fetchFiles = async () => {
+    const { data } = await queryDatasetFilesUsingGet(id!);
+    setFileList(data.content || []);
+  };
+
+  const handleBatchDeleteFiles = () => {
+    if (selectedFiles.length === 0) {
+      message.warning({ content: "请先选择要删除的文件" });
+      return;
+    }
+    // 执行批量删除逻辑
+    selectedFiles.forEach(async (fileId) => {
+      await fetch(`/api/datasets/${dataset.id}/files/${fileId}`, {
+        method: "DELETE",
+      });
+    });
+    fetchFiles(); // 刷新文件列表
+    setSelectedFiles([]); // 清空选中状态
+    message.success({
+      content: `已删除 ${selectedFiles.length} 个文件`,
+    });
+  };
+
+  const handleDownloadFile = async (file: DatasetFile) => {
+    console.log("批量下载文件:", selectedFiles);
+    // 实际导出逻辑
+    await downloadFileByIdUsingGet(dataset.id, file.id, file.fileName);
+    // 假设导出成功
+    message.success({
+      content: `已导出 1 个文件`,
+    });
+    setSelectedFiles([]); // 清空选中状态
+  };
+
+  const handleShowFile = (file: any) => async () => {
+    // 请求文件内容并弹窗预览
+    try {
+      const res = await fetch(`/api/datasets/${dataset.id}/file/${file.id}`);
+      const data = await res.text();
+      setPreviewFileName(file.fileName);
+      setPreviewContent(data);
+      setPreviewVisible(true);
+    } catch (err) {
+      message.error({ content: "文件预览失败" });
+    }
+  };
+
+  const handleDeleteFile = async (file) => {
+    try {
+      await deleteDatasetFileUsingDelete(dataset.id, file.id);
+      fetchFiles(); // 刷新文件列表
+      message.success({ content: `文件 ${file.fileName} 已删除` });
+    } catch (error) {
+      message.error({ content: `文件 ${file.fileName} 删除失败` });
+    }
+  };
+
+  const handleBatchExport = () => {
+    if (selectedFiles.length === 0) {
+      message.warning({ content: "请先选择要导出的文件" });
+      return;
+    }
+    // 执行批量导出逻辑
+    console.log("批量导出文件:", selectedFiles);
+    exportDatasetUsingPost(dataset.id, { fileIds: selectedFiles })
+      .then(() => {
+        message.success({
+          content: `已导出 ${selectedFiles.length} 个文件`,
+        });
+        setSelectedFiles([]); // 清空选中状态
+      })
+      .catch(() => {
+        message.error({
+          content: "导出失败，请稍后再试",
+        });
+      });
+  };
+
+  return {
+    fileList,
+    selectedFiles,
+    setSelectedFiles,
+    previewVisible,
+    setPreviewVisible,
+    previewContent,
+    previewFileName,
+    setPreviewContent,
+    setPreviewFileName,
+    fetchFiles,
+    setFileList,
+    handleBatchDeleteFiles,
+    handleDownloadFile,
+    handleShowFile,
+    handleDeleteFile,
+    handleBatchExport,
+  };
+}