refactor: clean up tag management and dataset handling, update API endpoints

2025-10-22 14:41:14 +08:00
parent 1c97afed7d
commit b9a7e7a0a9
11 changed files with 106 additions and 135 deletions
--- a/frontend/src/pages/DataAnnotation/Create/components/CreateAnnptationTaskDialog.tsx
+++ b/frontend/src/pages/DataAnnotation/Create/components/CreateAnnptationTaskDialog.tsx
@@ -1,5 +1,8 @@
 import { queryDatasetsUsingGet } from "@/pages/DataManagement/dataset.api";
-import { datasetTypeMap } from "@/pages/DataManagement/dataset.const";
+import {
+  datasetTypeMap,
+  mapDataset,
+} from "@/pages/DataManagement/dataset.const";
 import { Button, Form, Input, Modal, Select } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import { Database } from "lucide-react";
@@ -26,7 +29,7 @@ export default function CreateAnnotationTask({
        page: 0,
        size: 1000,
      });
-      setDatasets(data.content || []);
+      setDatasets(data.content.map(mapDataset) || []);
    };
    fetchDatasets();
  }, [open]);
@@ -74,22 +77,20 @@ export default function CreateAnnotationTask({
        >
          <Select
            placeholder="请选择数据集"
-            options={datasets.map((dataset) => ({
-              label: (
-                <div className="flex items-center justify-between gap-3 py-2">
-                  <div className="flex items-center font-sm text-gray-900">
-                    <span>
-                      {dataset.icon || <Database className="w-4 h-4 mr-2" />}
-                    </span>
-                    <span>{dataset.name}</span>
+            options={datasets.map((dataset) => {
+              return {
+                label: (
+                  <div className="flex items-center justify-between gap-3 py-2">
+                    <div className="flex items-center font-sm text-gray-900">
+                      <span className="mr-2">{dataset.icon}</span>
+                      <span>{dataset.name}</span>
+                    </div>
+                    <div className="text-xs text-gray-500">{dataset.size}</div>
                  </div>
-                  <div className="text-xs text-gray-500">
-                    {datasetTypeMap[dataset?.datasetType]?.label}
-                  </div>
-                </div>
-              ),
-              value: dataset.id,
-            }))}
+                ),
+                value: dataset.id,
+              };
+            })}
          />
        </Form.Item>
      </Form>
--- a/frontend/src/pages/DataAnnotation/Home/DataAnnotation.tsx
+++ b/frontend/src/pages/DataAnnotation/Home/DataAnnotation.tsx
@@ -19,8 +19,10 @@ import {
 import { mapAnnotationTask } from "../annotation.const";
 import CreateAnnotationTask from "../Create/components/CreateAnnptationTaskDialog";
 import { ColumnType } from "antd/es/table";
+import DevelopmentInProgress from "@/components/DevelopmentInProgress";

 export default function DataAnnotation() {
+  return <DevelopmentInProgress />;
  const navigate = useNavigate();
  const [viewMode, setViewMode] = useState<"list" | "card">("list");
  const [showCreateDialog, setShowCreateDialog] = useState(false);
--- a/frontend/src/pages/DataAnnotation/annotation.api.ts
+++ b/frontend/src/pages/DataAnnotation/annotation.api.ts
@@ -2,7 +2,7 @@ import { get, post, put, del, download } from "@/utils/request";

 // 标注任务管理相关接口
 export function queryAnnotationTasksUsingGet(params?: any) {
-  return get("/api/project/mappings/list", params);
+  return get("/project/mappings/list", params);
 }

 export function createAnnotationTaskUsingPost(data: any) {
--- a/frontend/src/pages/DataCleansing/Create/components/CreateTaskStepOne.tsx
+++ b/frontend/src/pages/DataCleansing/Create/components/CreateTaskStepOne.tsx
@@ -3,6 +3,7 @@ import { queryDatasetsUsingGet } from "@/pages/DataManagement/dataset.api";
 import {
  datasetTypeMap,
  datasetTypes,
+  mapDataset,
 } from "@/pages/DataManagement/dataset.const";
 import {
  Dataset,
@@ -34,7 +35,7 @@ export default function CreateTaskStepOne({

  const fetchDatasets = async () => {
    const { data } = await queryDatasetsUsingGet({ page: 0, size: 1000 });
-    setDatasets(data.content || []);
+    setDatasets(data.content.map(mapDataset) || []);
  };

  useEffect(() => {
@@ -76,22 +77,20 @@ export default function CreateTaskStepOne({
      <Form.Item label="源数据集" name="srcDatasetId" required>
        <Select
          placeholder="请选择源数据集"
-          options={datasets.map((dataset) => ({
-            label: (
-              <div className="flex items-center justify-between gap-3 py-2">
-                <div className="flex items-center font-sm text-gray-900">
-                  <span>
-                    {dataset.icon || <Database className="w-4 h-4 mr-2" />}
-                  </span>
-                  <span>{dataset.name}</span>
+          options={datasets.map((dataset) => {
+            return {
+              label: (
+                <div className="flex items-center justify-between gap-3 py-2">
+                  <div className="flex items-center font-sm text-gray-900">
+                    <span className="mr-2">{dataset.icon}</span>
+                    <span>{dataset.name}</span>
+                  </div>
+                  <div className="text-xs text-gray-500">{dataset.size}</div>
                </div>
-                <div className="text-xs text-gray-500">
-                  {datasetTypeMap[dataset?.datasetType]?.label}
-                </div>
-              </div>
-            ),
-            value: dataset.id,
-          }))}
+              ),
+              value: dataset.id,
+            };
+          })}
        />
      </Form.Item>
      <Form.Item label="目标数据集名称" name="destDatasetName" required>
--- a/frontend/src/pages/DataManagement/Create/components/BasicInformation.tsx
+++ b/frontend/src/pages/DataManagement/Create/components/BasicInformation.tsx
@@ -2,7 +2,6 @@ import RadioCard from "@/components/RadioCard";
 import { Input, Select, Form } from "antd";
 import { datasetTypes } from "../../dataset.const";
 import { useEffect, useState } from "react";
-import { mockPreparedTags } from "@/components/TagManagement";
 import { queryDatasetTagsUsingGet } from "../../dataset.api";

 export default function BasicInformation({
@@ -26,26 +25,11 @@ export default function BasicInformation({
  const fetchTags = async () => {
    try {
      const { data } = await queryDatasetTagsUsingGet();
-      const preparedTags = mockPreparedTags.map((tag) => ({
-        label: tag.name,
-        value: tag.name,
-      }));
      const customTags = data.map((tag) => ({
        label: tag.name,
        value: tag.name,
      }));
-      setTagOptions([
-        {
-          label: <span>预置标签</span>,
-          title: "prepared",
-          options: preparedTags,
-        },
-        {
-          label: <span>自定义标签</span>,
-          title: "custom",
-          options: customTags,
-        },
-      ]);
+      setTagOptions(customTags);
    } catch (error) {
      console.error("Error fetching tags: ", error);
    }
--- a/frontend/src/pages/DataManagement/Detail/DatasetDetail.tsx
+++ b/frontend/src/pages/DataManagement/Detail/DatasetDetail.tsx
@@ -121,7 +121,7 @@ export default function DatasetDetail() {
    {
      icon: <Clock className="text-blue-400 w-4 h-4" />,
      key: "time",
-      value: dataset?.createdAt,
+      value: dataset?.updatedAt,
    },
  ];

--- a/frontend/src/pages/DataManagement/Home/DataManagement.tsx
+++ b/frontend/src/pages/DataManagement/Home/DataManagement.tsx
@@ -20,8 +20,8 @@ import {
  deleteDatasetByIdUsingDelete,
  createDatasetTagUsingPost,
  queryDatasetTagsUsingGet,
-  updateDatasetTagByIdUsingPut,
-  deleteDatasetTagByIdUsingDelete,
+  deleteDatasetTagUsingDelete,
+  updateDatasetTagUsingPut,
 } from "../dataset.api";
 import { formatBytes } from "@/utils/unit";
 import EditDataset from "../Create/EditDataset";
@@ -295,8 +295,8 @@ export default function DatasetManagementPage() {
          {/* tasks */}
          <TagManager
            onCreate={createDatasetTagUsingPost}
-            onDelete={deleteDatasetTagByIdUsingDelete}
-            onUpdate={updateDatasetTagByIdUsingPut}
+            onDelete={(ids: string) => deleteDatasetTagUsingDelete({ ids })}
+            onUpdate={updateDatasetTagUsingPut}
            onFetch={queryDatasetTagsUsingGet}
          />
          <Link to="/data/management/create">
--- a/frontend/src/pages/DataManagement/dataset.api.ts
+++ b/frontend/src/pages/DataManagement/dataset.api.ts
@@ -97,13 +97,13 @@ export function createDatasetTagUsingPost(data: any) {
 }

 // 更新数据集标签
-export function updateDatasetTagByIdUsingPut(id: string | number, data: any) {
-  return put(`/api/data-management/tags/${id}`, data);
+export function updateDatasetTagUsingPut(data: any) {
+  return put(`/api/data-management/tags`, data);
 }

 // 删除数据集标签
-export function deleteDatasetTagByIdUsingDelete(id: string | number) {
-  return del(`/api/data-management/tags/${id}`);
+export function deleteDatasetTagUsingDelete(data: any) {
+  return del(`/api/data-management/tags`, data);
 }

 // 数据集质量检查
--- a/frontend/src/pages/DataManagement/dataset.const.tsx
+++ b/frontend/src/pages/DataManagement/dataset.const.tsx
@@ -23,6 +23,8 @@ import {
  Music,
  Videotape,
  Database,
+  Image,
+  ScanText,
 } from "lucide-react";

 export const datasetTypeMap: Record<
@@ -41,8 +43,8 @@ export const datasetTypeMap: Record<
    value: DatasetType.TEXT,
    label: "文本",
    order: 1,
-    icon: FileText,
-    iconColor: "#3b82f6",
+    icon: ScanText,
+    iconColor: "blue",
    children: [
      DatasetSubType.TEXT_DOCUMENT,
      DatasetSubType.TEXT_WEB,
@@ -54,8 +56,8 @@ export const datasetTypeMap: Record<
    value: DatasetType.IMAGE,
    label: "图像",
    order: 2,
-    icon: FileImage,
-    iconColor: "#3b82f6",
+    icon: Image,
+    iconColor: "green",
    children: [DatasetSubType.IMAGE_IMAGE, DatasetSubType.IMAGE_CAPTION],
    description: "用于处理和分析图像数据的数据集",
  },
@@ -64,7 +66,7 @@ export const datasetTypeMap: Record<
    label: "音频",
    order: 3,
    icon: Music,
-    iconColor: "#3b82f6",
+    iconColor: "orange",
    children: [DatasetSubType.AUDIO_AUDIO, DatasetSubType.AUDIO_JSONL],
    description: "用于处理和分析音频数据的数据集",
  },
@@ -73,7 +75,7 @@ export const datasetTypeMap: Record<
    label: "视频",
    order: 3,
    icon: Video,
-    iconColor: "#3b82f6",
+    iconColor: "purple",
    children: [DatasetSubType.VIDEO_VIDEO, DatasetSubType.VIDEO_JSONL],
    description: "用于处理和分析视频数据的数据集",
  },
@@ -193,14 +195,22 @@ export const dataSourceMap: Record<string, { label: string; value: string }> = {
 export const dataSourceOptions = Object.values(dataSourceMap);

 export function mapDataset(dataset: Dataset) {
-  const IconComponent = datasetTypeMap[dataset?.datasetType]?.icon || null;
+  const { icon: IconComponent, iconColor } =
+    datasetTypeMap[dataset?.datasetType] || {};
  return {
    ...dataset,
    type: datasetTypeMap[dataset.datasetType]?.label || "未知",
    size: formatBytes(dataset.totalSize || 0),
    createdAt: formatDateTime(dataset.createdAt) || "--",
    updatedAt: formatDateTime(dataset?.updatedAt) || "--",
-    icon: IconComponent ? <IconComponent className="w-4 h-4" /> : <Database />,
+    icon: IconComponent ? (
+      <IconComponent
+        className="w-5 h-5 text-gray-500"
+        // style={{ color: iconColor }}
+      />
+    ) : (
+      <Database />
+    ),
    status: datasetStatusMap[dataset.status],
    statistics: [
      { label: "文件数", value: dataset.fileCount || 0 },
--- a/frontend/src/pages/Layout/Sidebar.tsx
+++ b/frontend/src/pages/Layout/Sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import { Button, Menu, Popover } from "antd";
 import {
  CloseOutlined,
@@ -105,7 +105,6 @@ const AsiderAndHeaderLayout = () => {
          defaultOpenKeys={["synthesis"]}
          onClick={({ key }) => {
            setActiveItem(key);
-            console.log(`/data/${key}`);
            navigate(`/data/${key}`);
          }}
        />
@@ -169,10 +168,7 @@ const AsiderAndHeaderLayout = () => {
        <div
          className="fixed inset-0 z-40"
          onClick={() => {
-            console.log("clicked outside");
-
            setTaskCenterVisible(false);
-            toggleShowTaskPopover(false);
          }}
        />
      )}