fixbug: 修复数据集bug

Author: chenghh-9609

frontend/src/components/TagManagement.tsx

@@ -5,7 +5,7 @@ import { Edit, Save, TagIcon, X, Trash } from "lucide-react";
 import { TagItem } from "@/pages/DataManagement/dataset.model";
 
 function Tag({
-  isEditable,
+  isEditable = false,
   tag,
   editingTag,
   editingTagValue,
@@ -27,7 +27,7 @@ function Tag({
             onChange={(e) => setEditingTagValue(e.target.value)}
             onKeyPress={(e) => {
               if (e.key === "Enter") {
-                handleEditTag(tag.name, editingTagValue);
+                handleEditTag(tag, editingTagValue);
               }
               if (e.key === "Escape") {
                 setEditingTag(null);
@@ -98,7 +98,7 @@ const TagManager: React.FC = ({
   onUpdate,
 }: {
   onFetch: () => Promise<any>;
-  onCreate: (tag: TagItem) => Promise<{ ok: boolean }>;
+  onCreate: (tag: Pick<TagItem, "name">) => Promise<{ ok: boolean }>;
   onDelete: (tagId: number) => Promise<{ ok: boolean }>;
   onUpdate: (oldTagId: number, newTag: string) => Promise<{ ok: boolean }>;
 }) => {
@@ -125,17 +125,11 @@ const TagManager: React.FC = ({
   // 添加标签
   const addTag = async (tag: string) => {
     try {
-      const response = await onCreate?.({
+      await onCreate?.({
         name: tag,
-        color: "#111111",
-        description: "23",
       });
-      if (response.ok) {
-        fetchTags();
-        message.success("标签添加成功");
-      } else {
-        message.error("添加标签失败");
-      }
+      fetchTags();
+      message.success("标签添加成功");
     } catch (error) {
       message.error("添加标签失败");
     }
@@ -144,27 +138,19 @@ const TagManager: React.FC = ({
   // 删除标签
   const deleteTag = async (tag: string) => {
     try {
-      const response = await onDelete?.(tag.id);
-      if (response.ok) {
-        fetchTags();
-        message.success("标签删除成功");
-      } else {
-        message.error("删除标签失败");
-      }
+      await onDelete?.(tag.id);
+      fetchTags();
+      message.success("标签删除成功");
     } catch (error) {
       message.error("删除标签失败");
     }
   };
 
-  const updateTag = async (oldTag: string, newTag: string) => {
+  const updateTag = async (oldTag: TagItem, newTag: string) => {
     try {
-      const response = await onUpdate?.(oldTag.id, newTag);
-      if (response.ok) {
-        fetchTags();
-        message.success("标签更新成功");
-      } else {
-        message.error("更新标签失败");
-      }
+      await onUpdate?.(oldTag.id, newTag);
+      fetchTags();
+      message.success("标签更新成功");
     } catch (error) {
       message.error("更新标签失败");
     }
@@ -179,7 +165,7 @@ const TagManager: React.FC = ({
 
   const handleEditTag = (tag: string, value: string) => {
     if (value.trim()) {
-      updateTag(tag.id, value.trim());
+      updateTag(tag, value.trim());
       setEditingTag(null);
       setEditingTagValue("");
     }
@@ -197,8 +183,8 @@ const TagManager: React.FC = ({
   };
 
   useEffect(() => {
-    fetchTags();
-  }, []);
+    if (showTagManager) fetchTags();
+  }, [showTagManager]);
 
   return (
     <>

frontend/src/mock/mock-seed/data-management.cjs

@@ -16,17 +16,7 @@ function datasetItem() {
   return {
     id: Mock.Random.guid().replace(/[^a-zA-Z0-9]/g, ""),
     name: Mock.Random.ctitle(5, 20),
-    type: Mock.Random.pick([
-      "TEXT_DOCUMENT",
-      "TEXT_WEB",
-      "TEXT_DIALOG",
-      "IMAGE_IMAGE",
-      "IMAGE_CAPTION",
-      "AUDIO_AUDIO",
-      "AUDIO_JSONL",
-      "VIDEO_VIDEO",
-      "VIDEO_JSONL",
-    ]),
+    type: Mock.Random.pick(["TEXT", "IMAGE", "AUDIO", "VIDEO"]),
     status: Mock.Random.pick(["ACTIVE", "INACTIVE", "PROCESSING"]),
     tags: Mock.Random.shuffle(tagList).slice(0, Mock.Random.integer(1, 3)),
     totalSize: Mock.Random.integer(1024, 1024 * 1024 * 1024), // in bytes

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

@@ -6,37 +6,17 @@ import { Link, useNavigate } from "react-router";
 import { createDatasetUsingPost } from "../dataset.api";
 import { DatasetType, DataSource } from "../dataset.model";
 import BasicInformation from "./components/BasicInformation";
-import ImportConfiguration from "./components/ImportConfiguration";
-import { useImportFile } from "../hooks";
 
 export default function DatasetCreate() {
   const navigate = useNavigate();
   const { message } = App.useApp();
   const [form] = Form.useForm();
-  const { importFileRender, handleUpload } = useImportFile();
 
   const [newDataset, setNewDataset] = useState({
     name: "",
     description: "",
     datasetType: DatasetType.TEXT,
     tags: [],
-    config: {
-      source: DataSource.UPLOAD,
-      target: DataSource.UPLOAD,
-      nasHost: "",
-      sharePath: "",
-      username: "",
-      password: "",
-      endpoint: "",
-      bucket: "",
-      accessKey: "",
-      secretKey: "",
-      databaseType: "",
-      databaseName: "",
-      tableName: "",
-      dbType: "",
-      connectionString: "",
-    },
   });
 
   const handleSubmit = async () => {
@@ -46,13 +26,8 @@ export default function DatasetCreate() {
       ...formValues,
       files: undefined,
     };
-    let dataset;
     try {
-      const { data } = await createDatasetUsingPost(params);
-      dataset = data;
-      if (formValues?.config?.source === DataSource.UPLOAD) {
-        handleUpload(dataset);
-      }
+      await createDatasetUsingPost(params);
       message.success(`数据集创建成功`);
       navigate("/data/management");
     } catch (error) {
@@ -90,12 +65,6 @@ export default function DatasetCreate() {
             layout="vertical"
           >
             <BasicInformation data={newDataset} setData={setNewDataset} />
-
-            {/* Import Configuration */}
-            <ImportConfiguration
-              data={newDataset}
-              importFileRender={importFileRender}
-            />
           </Form>
         </div>
         <div className="flex gap-2 justify-end p-6 border-t border-gray-200">

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

@@ -5,7 +5,7 @@ import {
 } from "../dataset.api";
 import { useEffect, useState } from "react";
 import { Dataset, DatasetType } from "../dataset.model";
-import { App, Button, Drawer, Form } from "antd";
+import { App, Button, Drawer, Form, Modal } from "antd";
 
 export default function EditDataset({
   open,
@@ -69,19 +69,19 @@ export default function EditDataset({
   };
 
   return (
-    <Drawer
+    <Modal
       title={`编辑数据集${data?.name}`}
-      onClose={onClose}
+      onCancel={onClose}
       open={open}
       width={600}
       maskClosable={false}
       footer={
-        <div className="flex gap-2 justify-end p-6">
+        <>
           <Button onClick={onClose}>取消</Button>
           <Button type="primary" onClick={handleSubmit}>
             确定
           </Button>
-        </div>
+        </>
       }
     >
       <Form
@@ -96,6 +96,6 @@ export default function EditDataset({
           hidden={["datasetType"]}
         />
       </Form>
-    </Drawer>
+    </Modal>
   );
 }

frontend/src/pages/DataManagement/Create/components/BasicInformation.tsx

@@ -56,7 +56,6 @@ export default function BasicInformation({
   }, []);
   return (
     <>
-      <h2 className="font-medium text-gray-900 text-base mb-2">基本信息</h2>
       <Form.Item
         label="名称"
         name="name"

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

@@ -1,19 +1,16 @@
 import { useEffect, useMemo, useState } from "react";
-import { Breadcrumb, Modal, App, Tabs } from "antd";
+import { Breadcrumb, App, Tabs } from "antd";
 import {
   ReloadOutlined,
   DownloadOutlined,
   UploadOutlined,
-  FileTextOutlined,
-  DatabaseOutlined,
-  FileImageOutlined,
   EditOutlined,
 } from "@ant-design/icons";
 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, useImportFile } from "../hooks";
+import { useFilesOperation } from "../hooks";
 import {
   createDatasetTagUsingPost,
   downloadFile,
@@ -26,6 +23,7 @@ import DataLineageFlow from "./components/DataLineageFlow";
 import Overview from "./components/Overview";
 import { Activity, Clock, File, FileType } from "lucide-react";
 import EditDataset from "../Create/EditDataset";
+import ImportConfiguration from "./components/ImportConfiguration";
 
 const tabList = [
   {
@@ -49,7 +47,6 @@ export default function DatasetDetail() {
   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);
@@ -81,7 +78,7 @@ export default function DatasetDetail() {
   };
 
   const handleExportFormat = async ({ type }) => {
-    await downloadFile(dataset.id, type, `${dataset.name}-${type}.txt`);
+    await downloadFile(dataset.id, type, `${dataset.name}-${type}.zip`);
     message.success("文件下载成功");
   };
 
@@ -138,21 +135,21 @@ export default function DatasetDetail() {
 
     {
       key: "upload",
-      label: "上传文件",
+      label: "导入数据",
       icon: <UploadOutlined />,
       onClick: () => setShowUploadDialog(true),
     },
     {
       key: "export",
       label: "导出",
       icon: <DownloadOutlined />,
-      isDropdown: true,
-      items: [
-        { key: "alpaca", label: "Alpaca 格式", icon: <FileTextOutlined /> },
-        { key: "jsonl", label: "JSONL 格式", icon: <DatabaseOutlined /> },
-        { key: "csv", label: "CSV 格式", icon: <FileTextOutlined /> },
-        { key: "coco", label: "COCO 格式", icon: <FileImageOutlined /> },
-      ],
+      // isDropdown: true,
+      // items: [
+      //   { key: "alpaca", label: "Alpaca 格式", icon: <FileTextOutlined /> },
+      //   { key: "jsonl", label: "JSONL 格式", icon: <DatabaseOutlined /> },
+      //   { key: "csv", label: "CSV 格式", icon: <FileTextOutlined /> },
+      //   { key: "coco", label: "COCO 格式", icon: <FileImageOutlined /> },
+      // ],
       onMenuClick: handleExportFormat,
     },
     {
@@ -207,20 +204,12 @@ export default function DatasetDetail() {
           {activeTab === "quality" && <DataQuality />}
         </div>
       </div>
-
-      {/* Upload Dialog */}
-      <Modal
-        title="上传文件"
+      <ImportConfiguration
+        data={dataset}
         open={showUploadDialog}
-        onCancel={() => setShowUploadDialog(false)}
-        onOk={async () => {
-          await handleUpload(dataset);
-          setShowUploadDialog(false);
-          filesOperation.fetchFiles();
-        }}
-      >
-        {importFileRender()}
-      </Modal>
+        onClose={() => setShowUploadDialog(false)}
+        onRefresh={handleRefresh}
+      />
       <EditDataset
         data={dataset}
         open={showEditDialog}