fixbug: 数据集详情添加编辑功能

Author: chenghh-9609

frontend/src/components/DetailHeader.tsx

@@ -71,11 +71,7 @@ function DetailHeader<T>({
             {data?.tags && (
               <div className="flex flex-wrap mb-2">
                 {data?.tags?.map((tag) => (
-                  <Tag
-                    key={tag.id}
-                    className="mr-1"
-                    style={{ background: tag?.color }}
-                  >
+                  <Tag key={tag.id} className="mr-1">
                     {tag.name}
                   </Tag>
                 ))}

frontend/src/pages/DataManagement/Create/EditDataset.tsx

@@ -11,10 +11,12 @@ export default function EditDataset({
   open,
   data,
   onClose,
+  onRefresh,
 }: {
   open: boolean;
   data: Dataset | null;
   onClose: () => void;
+  onRefresh?: () => void;
 }) {
   const [form] = Form.useForm();
   const { message } = App.useApp();
@@ -58,6 +60,7 @@ export default function EditDataset({
       await updateDatasetByIdUsingPut(data?.id, params);
       onClose();
       message.success("数据集更新成功");
+      onRefresh?.();
     } catch (error) {
       console.error(error);
       message.error("数据集更新失败，请重试");

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Breadcrumb, Modal, App, Tabs } from "antd";
 import {
   ReloadOutlined,
@@ -12,7 +12,7 @@ import {
 import DetailHeader from "@/components/DetailHeader";
 import { mapDataset, datasetTypeMap } from "../dataset.const";
 import type { Dataset } from "@/pages/DataManagement/dataset.model";
-import { Link, useNavigate, useParams } from "react-router";
+import { Link, useParams } from "react-router";
 import { useFilesOperation, useImportFile } from "../hooks";
 import {
   createDatasetTagUsingPost,
@@ -25,15 +25,7 @@ import DataQuality from "./components/DataQuality";
 import DataLineageFlow from "./components/DataLineageFlow";
 import Overview from "./components/Overview";
 import { Activity, Clock, File, FileType } from "lucide-react";
-
-const navigateItems = [
-  {
-    title: <Link to="/data/management">数据管理</Link>,
-  },
-  {
-    title: "数据集详情",
-  },
-];
+import EditDataset from "../Create/EditDataset";
 
 const tabList = [
   {
@@ -51,17 +43,27 @@ const tabList = [
 ];
 
 export default function DatasetDetail() {
-  const navigate = useNavigate();
   const { id } = useParams(); // 获取动态路由参数
   const [activeTab, setActiveTab] = useState("overview");
   const { message } = App.useApp();
+  const [showEditDialog, setShowEditDialog] = useState(false);
 
   const [dataset, setDataset] = useState<Dataset>({} as Dataset);
   const { importFileRender, handleUpload } = useImportFile();
   const filesOperation = useFilesOperation(dataset);
 
   const [showUploadDialog, setShowUploadDialog] = useState(false);
-
+  const navigateItems = useMemo(
+    () => [
+      {
+        title: <Link to="/data/management">数据管理</Link>,
+      },
+      {
+        title: dataset.name || "数据集详情",
+      },
+    ],
+    [dataset]
+  );
   const fetchDataset = async () => {
     const { data } = await queryDatasetByIdUsingGet(id as unknown as number);
     setDataset(mapDataset(data));
@@ -130,7 +132,7 @@ export default function DatasetDetail() {
       label: "编辑",
       icon: <EditOutlined />,
       onClick: () => {
-        navigate(`/data/management/create/${dataset.id}`);
+        setShowEditDialog(true);
       },
     },
     {
@@ -218,6 +220,12 @@ export default function DatasetDetail() {
       >
         {importFileRender()}
       </Modal>
+      <EditDataset
+        data={dataset}
+        open={showEditDialog}
+        onClose={() => setShowEditDialog(false)}
+        onRefresh={handleRefresh}
+      />
     </div>
   );
 }

frontend/src/pages/DataManagement/Home/DataManagement.tsx

@@ -313,6 +313,7 @@ export default function DatasetManagementPage() {
         open={editDatasetOpen}
         data={currentDataset}
         onClose={() => setEditDatasetOpen(false)}
+        onRefresh={fetchData}
       />
     </div>
   );