Develop/dataset detail perf (#407)

MoeexT · web-flow · commit 4b9ba3af808a · 2026-03-06T09:27:30.000+08:00
* 🎨 perf dataset detail page

* 🐛 fix dataset detail page edit button
diff --git a/frontend/src/i18n/locales/en/common.json b/frontend/src/i18n/locales/en/common.json
@@ -277,6 +277,7 @@
     "description": "Create, import and manage datasets",
     "actions": {
       "createDataset": "Create Dataset",
+      "detail": "Details",
       "edit": "Edit",
       "import": "Import",
       "importData": "Import Data",
@@ -394,7 +395,8 @@
       "previewTitle": "File Preview: {{name}}",
       "previewEmpty": "No preview available or unsupported file type.",
       "previewInfoTitle": "File Info",
-      "editTitle": "Edit Dataset - {{name}}"
+      "editTitle": "Edit Dataset - {{name}}",
+      "datasetDetail": "Dataset Details"
     },
     "labels": {
       "id": "ID",
diff --git a/frontend/src/i18n/locales/zh/common.json b/frontend/src/i18n/locales/zh/common.json
@@ -277,6 +277,7 @@
     "description": "创建、导入和管理数据集",
     "actions": {
       "createDataset": "创建数据集",
+      "detail": "详情",
       "edit": "编辑",
       "import": "导入",
       "importData": "导入数据",
@@ -394,7 +395,8 @@
       "previewTitle": "文件预览：{{name}}",
       "previewEmpty": "暂无预览内容，或当前文件类型暂不支持预览。",
       "previewInfoTitle": "文件信息",
-      "editTitle": "编辑数据集 - {{name}}"
+      "editTitle": "编辑数据集 - {{name}}",
+      "datasetDetail": "数据集详细信息"
     },
     "labels": {
       "id": "ID",
diff --git a/frontend/src/pages/DataManagement/Create/EditDataset.tsx b/frontend/src/pages/DataManagement/Create/EditDataset.tsx
@@ -29,26 +29,21 @@ export default function EditDataset({
     datasetType: DatasetType.TEXT,
     tags: [],
   });
-  const fetchDataset = async () => {
-    if (!open) return;
-    // 如果有id，说明是编辑模式
-    if (data && data.id) {
-      const { data: newData } = await queryDatasetByIdUsingGet(data.id);
+
+  // 当对话框打开时，使用传入的 data 初始化表单
+  useEffect(() => {
+    if (open && data && data.id) {
       const updatedDataset = {
-        ...newData,
-        type: newData.type,
-        tags: (newData.tags || []).map((tag) =>
+        ...data,
+        type: data.type,
+        tags: (data.tags || []).map((tag) =>
           typeof tag === "string" ? tag : tag.name
         ),
       };
       setNewDataset(updatedDataset);
       form.setFieldsValue(updatedDataset);
     }
-  };
-
-  useEffect(() => {
-    fetchDataset();
-  }, [data]);
+  }, [open, data, form]);
 
   const handleValuesChange = (_, allValues) => {
     setNewDataset({ ...newDataset, ...allValues });
diff --git a/frontend/src/pages/DataManagement/Detail/DatasetDetail.tsx b/frontend/src/pages/DataManagement/Detail/DatasetDetail.tsx
@@ -1,11 +1,12 @@
 import { useEffect, useMemo, useState } from "react";
-import { Breadcrumb, App, Tabs } from "antd";
+import { Breadcrumb, App, Tabs, Drawer, Descriptions } from "antd";
 import {
   ReloadOutlined,
   DownloadOutlined,
   UploadOutlined,
   EditOutlined,
   DeleteOutlined,
+  InfoCircleOutlined,
 } from "@ant-design/icons";
 import DetailHeader from "@/components/DetailHeader";
 import { getDatasetTypeMap, mapDataset } from "../dataset.const";
@@ -36,6 +37,7 @@ export default function DatasetDetail() {
   const { t } = useTranslation();
   const datasetTypeMap = getDatasetTypeMap(t);
   const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showDetailDrawer, setShowDetailDrawer] = useState(false);
 
   const [dataset, setDataset] = useState<Dataset>({} as Dataset);
   const filesOperation = useFilesOperation(dataset);
@@ -135,6 +137,14 @@ export default function DatasetDetail() {
 
   // 数据集操作列表
   const operations = [
+    {
+      key: "detail",
+      label: t("dataManagement.actions.detail"),
+      icon: <InfoCircleOutlined />,
+      onClick: () => {
+        setShowDetailDrawer(true);
+      },
+    },
     {
       key: "edit",
       label: t("dataManagement.actions.edit"),
@@ -266,6 +276,70 @@ export default function DatasetDetail() {
         onClose={() => setShowEditDialog(false)}
         onRefresh={handleRefresh}
       />
+      <Drawer
+        title={t("dataManagement.detail.datasetDetail")}
+        open={showDetailDrawer}
+        onClose={() => setShowDetailDrawer(false)}
+        width={600}
+      >
+        <Descriptions
+          layout="vertical"
+          size="small"
+          column={1}
+          items={[
+            {
+              key: "id",
+              label: t("dataManagement.labels.id"),
+              children: dataset.id,
+            },
+            {
+              key: "name",
+              label: t("dataManagement.labels.name"),
+              children: dataset.name,
+            },
+            {
+              key: "description",
+              label: t("dataManagement.labels.description"),
+              children: dataset.description || t("dataManagement.defaults.none"),
+            },
+            {
+              key: "datasetType",
+              label: t("dataManagement.labels.type"),
+              children: datasetTypeMap[dataset?.datasetType]?.label || t("dataManagement.defaults.unknown"),
+            },
+            {
+              key: "status",
+              label: t("dataManagement.labels.status"),
+              children: dataset?.status?.label || t("dataManagement.defaults.unknown"),
+            },
+            {
+              key: "createdBy",
+              label: t("dataManagement.labels.creator"),
+              children: dataset.createdBy || t("dataManagement.defaults.unknown"),
+            },
+            {
+              key: "targetLocation",
+              label: t("dataManagement.labels.storagePath"),
+              children: dataset.targetLocation || t("dataManagement.defaults.unknown"),
+            },
+            {
+              key: "pvcName",
+              label: t("dataManagement.labels.storageName"),
+              children: dataset.pvcName || t("dataManagement.defaults.unknown"),
+            },
+            {
+              key: "createdAt",
+              label: t("dataManagement.labels.createdAt"),
+              children: dataset.createdAt,
+            },
+            {
+              key: "updatedAt",
+              label: t("dataManagement.labels.updatedAt"),
+              children: dataset.updatedAt,
+            },
+          ]}
+        />
+      </Drawer>
     </div>
   );
 }
diff --git a/frontend/src/pages/DataManagement/Detail/components/Overview.tsx b/frontend/src/pages/DataManagement/Detail/components/Overview.tsx
@@ -1,4 +1,4 @@
-import { App, Button, Descriptions, DescriptionsProps, Modal, Table, Input, Spin } from "antd";
+import { App, Button, Modal, Table, Input, Spin } from "antd";
 import { formatBytes, formatDateTime } from "@/utils/unit";
 import { Download, Trash2, Folder, File } from "lucide-react";
 import { getDatasetTypeMap } from "../../dataset.const";
@@ -59,70 +59,6 @@ export default function Overview({ dataset, filesOperation, fetchDataset }) {
       );
     },
   };
-  // 基本信息
-  const items: DescriptionsProps["items"] = [
-    {
-      key: "id",
-      label: t("dataManagement.labels.id"),
-      children: dataset.id,
-    },
-    {
-      key: "name",
-      label: t("dataManagement.labels.name"),
-      children: dataset.name,
-    },
-    {
-      key: "fileCount",
-      label: t("dataManagement.labels.fileCount"),
-      children: dataset.fileCount || 0,
-    },
-    {
-      key: "size",
-      label: t("dataManagement.labels.dataSize"),
-      children: dataset.size || "0 B",
-    },
-
-    {
-      key: "datasetType",
-      label: t("dataManagement.labels.type"),
-      children: datasetTypeMap[dataset?.datasetType]?.label || t("dataManagement.defaults.unknown"),
-    },
-    {
-      key: "status",
-      label: t("dataManagement.labels.status"),
-      children: dataset?.status?.label || t("dataManagement.defaults.unknown"),
-    },
-    {
-      key: "createdBy",
-      label: t("dataManagement.labels.creator"),
-      children: dataset.createdBy || t("dataManagement.defaults.unknown"),
-    },
-    {
-      key: "targetLocation",
-      label: t("dataManagement.labels.storagePath"),
-      children: dataset.targetLocation || t("dataManagement.defaults.unknown"),
-    },
-    {
-      key: "pvcName",
-      label: t("dataManagement.labels.storageName"),
-      children: dataset.pvcName || t("dataManagement.defaults.unknown"),
-    },
-    {
-      key: "createdAt",
-      label: t("dataManagement.labels.createdAt"),
-      children: dataset.createdAt,
-    },
-    {
-      key: "updatedAt",
-      label: t("dataManagement.labels.updatedAt"),
-      children: dataset.updatedAt,
-    },
-    {
-      key: "description",
-      label: t("dataManagement.labels.description"),
-      children: dataset.description || t("dataManagement.defaults.none"),
-    },
-  ];
 
   // 显示删除确认弹窗
   const showDeleteConfirm = (
@@ -183,8 +119,19 @@ export default function Overview({ dataset, filesOperation, fetchDataset }) {
                 const newPath = `${currentPath}${record.fileName}/`;
                 filesOperation.fetchFiles(newPath, 1, filesOperation.pagination.pageSize);
               }}
+              className="hover:text-blue-600 transition-colors duration-200"
+              style={{
+                padding: 0,
+                height: 'auto',
+                fontWeight: 500
+              }}
             >
-              {content}
+              <div className="flex items-center group">
+                <Folder className="mr-2 text-blue-500 group-hover:text-blue-600 transition-colors" size={iconSize} />
+                <span className="truncate underline-transparent group-hover:underline group-hover:text-blue-600 transition-all">
+                  {displayName}
+                </span>
+              </div>
             </Button>
           );
         }
@@ -193,8 +140,19 @@ export default function Overview({ dataset, filesOperation, fetchDataset }) {
             <Button
               type="link"
               onClick={() => handlePreviewFile(record)}
+              className="hover:text-blue-600 transition-colors duration-200"
+              style={{
+                padding: 0,
+                height: 'auto',
+                fontWeight: 500
+              }}
             >
-              {content}
+              <div className="flex items-center group">
+                <File className="mr-2 text-black group-hover:text-blue-600 transition-colors" size={iconSize} />
+                <span className="truncate underline-transparent group-hover:underline group-hover:text-blue-600 transition-all">
+                  {displayName}
+                </span>
+              </div>
             </Button>
           );
       },
@@ -434,15 +392,6 @@ export default function Overview({ dataset, filesOperation, fetchDataset }) {
   return (
     <>
       <div className=" flex flex-col gap-4">
-        {/* 基本信息 */}
-        <Descriptions
-          title={t("dataManagement.detail.sectionBasicInfo")}
-          layout="vertical"
-          size="small"
-          items={items}
-          column={5}
-        />
-
         {/* 文件列表 */}
         <div className="flex items-center justify-between mt-8 mb-2">
           <h2 className="text-base font-semibold">
