-
{t('dataAnnotation.home.confirm.deleteTaskContent1')}
-
{t('dataAnnotation.home.confirm.deleteTaskContent2')}
-
-
{t('dataAnnotation.home.messages.syncToDbContent1')}
-
{t('dataAnnotation.home.messages.syncToDbContent2')}
-
- //
{t('dataAnnotation.home.messages.syncToDbContent1')}
- //
{t('dataAnnotation.home.messages.syncToDbContent2')}
- //
-
{t('dataAnnotation.home.confirm.deleteTaskContent1')}
-
{t('dataAnnotation.home.confirm.deleteTaskContent2')}
-
- //
- //
- // {processed} / {total}
- //
- //
- {task._kind === "manual" && (
- <>
- }
- onClick={() => handleAnnotate(task)}
- title={t('dataAnnotation.home.actions.annotate')}
- >
- {t('dataAnnotation.home.actions.edit')}
-
- }
- onClick={() => handleSyncManualToDatabase(task)}
- title={t('dataAnnotation.home.actions.syncToDb')}
- >
- {t('dataAnnotation.home.actions.syncToDb')}
-
-
- ,
- onClick: () => handleImportManualFromLabelStudio(task),
- },
- {
- key: "edit-dataset",
- label: t('dataAnnotation.home.editDataset'),
- icon: ,
- onClick: () => handleEditManualTaskDataset(task),
- },
- {
- key: "delete",
- label: t('dataAnnotation.home.actions.delete'),
- icon: ,
- danger: true,
- onClick: () => handleDelete(task),
- },
- ],
- }}
- trigger={["click"]}
- >
- } title={t('dataAnnotation.home.actions.moreActions')} />
-
-
- )}
- {/* 自动标注任务操作按钮已屏蔽（保留代码在注释中） */}
- {/* {task._kind === "auto" && (
- <>
- }
- onClick={() => handleAnnotateAuto(task)}
- title={t('dataAnnotation.home.actions.annotate')}
- >
- {t('dataAnnotation.home.actions.edit')}
-
-
- }
- onClick={() => handleSyncAutoToDatabase(task)}
- title={t('dataAnnotation.home.actions.syncToDb')}
- >
- {t('dataAnnotation.home.actions.syncToDb')}
-
-
- ,
- onClick: () => handleImportAutoFromLabelStudio(task),
- },
- {
- key: "edit-dataset",
- label: t('dataAnnotation.home.editDataset'),
- icon: ,
- onClick: () => handleEditAutoTaskDataset(task),
- },
- {
- key: "delete",
- label: t('dataAnnotation.home.actions.delete'),
- icon: ,
- danger: true,
- onClick: () => handleDeleteAuto(task),
- },
- ],
- }}
- trigger={["click"]}
- >
- }
- title={t('dataAnnotation.home.actions.moreActions')}
- />
-
-
- )} */}
-
- ),
- },
- ];
-
- return (
-
- {/* Header */}
-
-
{t('dataAnnotation.home.title')}
-
-
- {/* Tabs */}
-
- {/* Search, Filters and Buttons in one row */}
-
- {/* Left side: Search and view controls */}
-
-
-
-
- {/* Right side: All action buttons */}
-
-
-
- }
- onClick={() => setShowCreateDialog(true)}
- >
- {t('dataAnnotation.home.createTask')}
-
-
-
{
- setSelectedRowKeys(keys as (string | number)[]);
- setSelectedRows(rows as any[]);
- },
- }}
- scroll={{ x: "max-content", y: "calc(100vh - 24rem)" }}
- />
-
- ) : (
-
- )}
-
- setShowCreateDialog(false)}
- onRefresh={() => {
- // 手动标注创建成功后刷新标注任务列表
- fetchData();
- // 自动标注创建成功后刷新已屏蔽
- // if (mode === "auto") {
- // refreshAutoTasks(true);
- // }
- }}
- />
-
- ),
- },
- {
- key: "templates",
- label: t('dataAnnotation.home.tabs.templates'),
- children: ,
- },
- ]}
- />
-
- {/* {editingAutoTask && (
- {
- setShowEditAutoDatasetDialog(false);
- setEditingAutoTask(null);
- }}
- onSuccess={() => {
- setShowEditAutoDatasetDialog(false);
- setEditingAutoTask(null);
- // refreshAutoTasks();
- }}
- />
- )} */}
-
- {editingManualTask && (
- {
- setShowEditManualDatasetDialog(false);
- setEditingManualTask(null);
- }}
- onSuccess={() => {
- setShowEditManualDatasetDialog(false);
- setEditingManualTask(null);
- }}
- />
- )}
-
- {importingManualTask && (
- {
- setShowImportManualDialog(false);
- setImportingManualTask(null);
- }}
- onSuccess={() => {
- setShowImportManualDialog(false);
- setImportingManualTask(null);
- }}
- />
- )}
-
- {/* 自动标注导入对话框已屏蔽（保留代码在注释中） */}
- {/* {importingAutoTask && (
- {
- setShowImportAutoDialog(false);
- setImportingAutoTask(null);
- }}
- onSuccess={() => {
- setShowImportAutoDialog(false);
- setImportingAutoTask(null);
- }}
- />
- )} */}
-
- );
-}
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router";
+import { Card, Button, Table, message, Modal, Tabs, Tag, Progress, Tooltip, Dropdown } from "antd";
+import {
+ PlusOutlined,
+ EditOutlined,
+ DeleteOutlined,
+ SyncOutlined,
+ MoreOutlined,
+ SettingOutlined,
+ ExportOutlined,
+ ImportOutlined,
+} from "@ant-design/icons";
+import { SearchControls } from "@/components/SearchControls";
+import CardView from "@/components/CardView";
+import type { AnnotationTask } from "../annotation.model";
+import useFetchData from "@/hooks/useFetchData";
+import {
+ deleteAnnotationTaskByIdUsingDelete,
+ queryAnnotationTasksUsingGet,
+ syncAnnotationTaskUsingPost,
+ // 自动标注API已屏蔽（保留代码在注释中）
+ // queryAutoAnnotationTasksUsingGet,
+ // deleteAutoAnnotationTaskByIdUsingDelete,
+ // getAutoAnnotationLabelStudioProjectUsingGet,
+ loginAnnotationUsingGet,
+ syncManualAnnotationToDatabaseUsingPost,
+ // syncAutoAnnotationToDatabaseUsingPost,
+} from "../annotation.api";
+import { mapAnnotationTask } from "../annotation.const";
+import CreateAnnotationTask from "../Create/components/CreateAnnotationTaskDialog";
+import { ColumnType } from "antd/es/table";
+import { TemplateList } from "../Template";
+// 自动标注组件导入已屏蔽（保留代码在注释中）
+// import EditAutoAnnotationDatasetDialog from "../AutoAnnotation/components/EditAutoAnnotationDatasetDialog";
+// import ImportFromLabelStudioDialog from "../AutoAnnotation/components/ImportFromLabelStudioDialog";
+import ManualImportFromLabelStudioDialog from "../ManualImportFromLabelStudioDialog";
+import EditManualAnnotationDatasetDialog from "../EditManualAnnotationDatasetDialog";
+import { useTranslation } from "react-i18next";
+// Note: DevelopmentInProgress intentionally not used here
+
+export default function DataAnnotation() {
+ const { t } = useTranslation();
+ const navigate = useNavigate();
+ // return ;
+ const [activeTab, setActiveTab] = useState("tasks");
+ const [viewMode, setViewMode] = useState<"list" | "card">("list");
+ const [showCreateDialog, setShowCreateDialog] = useState(false);
+ // 自动标注任务state已屏蔽（保留代码在注释中）
+ // const [autoTasks, setAutoTasks] = useState([]);
+
+ const {
+ loading,
+ tableData,
+ pagination,
+ searchParams,
+ fetchData,
+ handleFiltersChange,
+ handleKeywordChange,
+ } = useFetchData(queryAnnotationTasksUsingGet, (item) => mapAnnotationTask(item, t), 30000, true, [], 0);
+
+ const [labelStudioBase, setLabelStudioBase] = useState(null);
+ const [selectedRowKeys, setSelectedRowKeys] = useState<(string | number)[]>([]);
+ const [selectedRows, setSelectedRows] = useState([]);
+ const [datasetProjectMap, setDatasetProjectMap] = useState>({});
+ // 自动标注相关state已屏蔽（保留代码在注释中）
+ // const [editingAutoTask, setEditingAutoTask] = useState(null);
+ // const [showEditAutoDatasetDialog, setShowEditAutoDatasetDialog] = useState(false);
+ const [editingManualTask, setEditingManualTask] = useState(null);
+ const [showEditManualDatasetDialog, setShowEditManualDatasetDialog] = useState(false);
+ // 自动标注相关state已屏蔽（保留代码在注释中）
+ // const [importingAutoTask, setImportingAutoTask] = useState(null);
+ // const [showImportAutoDialog, setShowImportAutoDialog] = useState(false);
+ const [importingManualTask, setImportingManualTask] = useState(null);
+ const [showImportManualDialog, setShowImportManualDialog] = useState(false);
+
+ // 自动标注任务拉取函数已屏蔽（保留代码在注释中）
+ // const refreshAutoTasks = async (silent = false) => {
+ // try {
+ // const response = await queryAutoAnnotationTasksUsingGet();
+ // const tasks = (response as any)?.data || response || [];
+ // if (Array.isArray(tasks)) {
+ // setAutoTasks(tasks);
+ // }
+ // } catch (error) {
+ // console.error("Failed to fetch auto annotation tasks:", error);
+ // if (!silent) {
+ // message.error(t('dataAnnotation.home.messages.fetchAutoTasksFailed'));
+ // }
+ // }
+ // };
+
+ // prefetch config on mount so clicking annotate is fast and we know whether base URL exists
+ // useEffect ensures this runs once
+ useEffect(() => {
+ let mounted = true;
+ (async () => {
+ try {
+ const baseUrl = `http://${window.location.hostname}:${parseInt(window.location.port) + 1}`;
+ if (mounted) setLabelStudioBase(baseUrl);
+ } catch (e) {
+ if (mounted) setLabelStudioBase(null);
+ }
+ })();
+ return () => {
+ mounted = false;
+ };
+ }, []);
+
+ // 基于手动标注任务构建 datasetId -> Label Studio project 映射，供自动标注跳转使用
+ useEffect(() => {
+ const map: Record = {};
+ (tableData as any[]).forEach((task: any) => {
+ const datasetId = task.datasetId || task.dataset_id;
+ const projId = task.labelingProjId || task.projId || task.labeling_project_id;
+ if (datasetId && projId) {
+ map[String(datasetId)] = String(projId);
+ }
+ });
+ setDatasetProjectMap(map);
+ }, [tableData]);
+
+ // 自动标注任务轮询已屏蔽（保留代码在注释中）
+ // useEffect(() => {
+ // refreshAutoTasks();
+ // const timer = setInterval(() => refreshAutoTasks(true), 3000);
+ // return () => {
+ // clearInterval(timer);
+ // };
+ // }, []);
+
+ const handleAnnotate = (task: AnnotationTask) => {
+ // Open Label Studio project page in a new tab
+ (async () => {
+ try {
+ // `labelingProjId` = Label Studio project ID (integer), used for LS URL only
+ // `mappingId` = mapping UUID, used for backend API calls
+ let labelingProjId = (task as any).labelingProjId || (task as any).projId || undefined;
+ let mappingId = (task as any).id || undefined;
+
+ // no fallback external mapping lookup; rely on normalized fields from mapAnnotationTask
+
+ // use prefetched base if available
+ const base = labelStudioBase;
+
+ // no debug logging in production
+ await loginAnnotationUsingGet(mappingId)
+ if (labelingProjId) {
+ // only open external Label Studio when we have a configured base url
+ if (base) {
+ const target = `${base}/projects/${labelingProjId}/data`;
+ window.open(target, "_blank");
+ } else {
+ // no external Label Studio URL configured — do not perform internal redirect in this version
+ message.error(t('dataAnnotation.home.messages.cannotJumpNoBase'));
+ return;
+ }
+ } else {
+ // no labeling project id available — do not attempt internal redirect in this version
+ message.error(t('dataAnnotation.home.messages.cannotJumpNoMapping'));
+ return;
+ }
+ } catch (error) {
+ // on error, surface a user-friendly message instead of redirecting
+ message.error(t('dataAnnotation.home.messages.cannotJumpError'));
+ return;
+ }
+ })();
+ };
+
+ const handleDelete = (task: AnnotationTask) => {
+ Modal.confirm({
+ title: t('dataAnnotation.home.confirm.deleteTaskTitle', { name: task.name }),
+ content: (
+
+
{t('dataAnnotation.home.confirm.deleteTaskContent1')}
+
{t('dataAnnotation.home.confirm.deleteTaskContent2')}
+
{t('dataAnnotation.home.confirm.deleteAutoTaskContent')}
,
+ // okText: t('dataAnnotation.home.confirm.deleteOkText'),
+ // okType: "danger",
+ // cancelText: t('dataAnnotation.home.confirm.deleteCancelText'),
+ // onOk: async () => {
+ // try {
+ // await deleteAutoAnnotationTaskByIdUsingDelete(task.id);
+ // message.success(t('dataAnnotation.home.messages.autoTaskDeleteSuccess'));
+ // setAutoTasks((prev) => prev.filter((t: any) => t.id !== task.id));
+ // setSelectedRowKeys((keys) => keys.filter((k) => k !== task.id));
+ // setSelectedRows((rows) => rows.filter((r) => r.id !== task.id));
+ // } catch (e) {
+ // console.error(e);
+ // message.error(t('dataAnnotation.home.messages.deleteFailed'));
+ // }
+ // },
+ // });
+ // };
+
+ // 自动标注编辑数据集函数已屏蔽（保留代码在注释中）
+ // const handleEditAutoTaskDataset = (row: any) => {
+ // if (!row?.id) {
+ // message.error(t('dataAnnotation.home.messages.autoTaskNotFound'));
+ // return;
+ // }
+ // const full = autoTasks.find((t: any) => t.id === row.id);
+ // if (!full) {
+ // message.error(t('dataAnnotation.home.messages.autoTaskNotFound') + t('dataAnnotation.home.messages.deleteFailed').split('，')[1]);
+ // return;
+ // }
+ // setEditingAutoTask(full);
+ // setShowEditAutoDatasetDialog(true);
+ // };
+
+ const handleEditManualTaskDataset = (task: AnnotationTask) => {
+ if (!task?.id) {
+ message.error(t('dataAnnotation.home.messages.taskNotFound'));
+ return;
+ }
+ setEditingManualTask(task);
+ setShowEditManualDatasetDialog(true);
+ };
+
+ const handleImportManualFromLabelStudio = (task: AnnotationTask) => {
+ if (!task?.id) {
+ message.error(t('dataAnnotation.home.messages.taskNotFound'));
+ return;
+ }
+
+ setImportingManualTask(task);
+ setShowImportManualDialog(true);
+ };
+
+ const handleSyncManualToDatabase = async (task: AnnotationTask) => {
+ if (!task?.id) {
+ message.error(t('dataAnnotation.home.messages.taskNotFound'));
+ return;
+ }
+
+ Modal.confirm({
+ title: t('dataAnnotation.home.messages.syncToDbTitle', { name: task.name }),
+ content: (
+
+
{t('dataAnnotation.home.messages.syncToDbContent1')}
+
{t('dataAnnotation.home.messages.syncToDbContent2')}
+
+ //
{t('dataAnnotation.home.messages.syncToDbContent1')}
+ //
{t('dataAnnotation.home.messages.syncToDbContent2')}
+ //
+
{t('dataAnnotation.home.confirm.syncContent1')}
+
{t('dataAnnotation.home.confirm.syncContent2')}
+
+
{t('dataAnnotation.home.confirm.syncContent1')}
+
{t('dataAnnotation.home.confirm.syncContent2')}
+
+
{t('dataAnnotation.home.confirm.deleteTaskContent1')}
+
{t('dataAnnotation.home.confirm.deleteTaskContent2')}
+
+ //
+ //
+ // {processed} / {total}
+ //
+ //
+ {task._kind === "manual" && (
+ <>
+ }
+ onClick={() => handleAnnotate(task)}
+ title={t('dataAnnotation.home.actions.annotate')}
+ >
+ {t('dataAnnotation.home.actions.edit')}
+
+ }
+ onClick={() => handleSyncManualToDatabase(task)}
+ title={t('dataAnnotation.home.actions.syncToDb')}
+ >
+ {t('dataAnnotation.home.actions.syncToDb')}
+
+
+ ,
+ onClick: () => handleImportManualFromLabelStudio(task),
+ },
+ {
+ key: "edit-dataset",
+ label: t('dataAnnotation.home.editDataset'),
+ icon: ,
+ onClick: () => handleEditManualTaskDataset(task),
+ },
+ {
+ key: "delete",
+ label: t('dataAnnotation.home.actions.delete'),
+ icon: ,
+ danger: true,
+ onClick: () => handleDelete(task),
+ },
+ ],
+ }}
+ trigger={["click"]}
+ >
+ } title={t('dataAnnotation.home.actions.moreActions')} />
+
+
+ )}
+ {/* 自动标注任务操作按钮已屏蔽（保留代码在注释中） */}
+ {/* {task._kind === "auto" && (
+ <>
+ }
+ onClick={() => handleAnnotateAuto(task)}
+ title={t('dataAnnotation.home.actions.annotate')}
+ >
+ {t('dataAnnotation.home.actions.edit')}
+
+
+ }
+ onClick={() => handleSyncAutoToDatabase(task)}
+ title={t('dataAnnotation.home.actions.syncToDb')}
+ >
+ {t('dataAnnotation.home.actions.syncToDb')}
+
+
+ ,
+ onClick: () => handleImportAutoFromLabelStudio(task),
+ },
+ {
+ key: "edit-dataset",
+ label: t('dataAnnotation.home.editDataset'),
+ icon: ,
+ onClick: () => handleEditAutoTaskDataset(task),
+ },
+ {
+ key: "delete",
+ label: t('dataAnnotation.home.actions.delete'),
+ icon: ,
+ danger: true,
+ onClick: () => handleDeleteAuto(task),
+ },
+ ],
+ }}
+ trigger={["click"]}
+ >
+ }
+ title={t('dataAnnotation.home.actions.moreActions')}
+ />
+
+
+ )} */}
+
+ ),
+ },
+ ];
+
+ return (
+
+ {/* Header */}
+
+
{t('dataAnnotation.home.title')}
+
+
+ {/* Tabs */}
+
+ {/* Search, Filters and Buttons in one row */}
+
+ {/* Left side: Search and view controls */}
+
+
+
+
+ {/* Right side: All action buttons */}
+
+
+
+ }
+ onClick={() => setShowCreateDialog(true)}
+ >
+ {t('dataAnnotation.home.createTask')}
+
+
+
{
+ setSelectedRowKeys(keys as (string | number)[]);
+ setSelectedRows(rows as any[]);
+ },
+ }}
+ scroll={{ x: "max-content", y: "calc(100vh - 24rem)" }}
+ />
+
+ ) : (
+
+ )}
+
+ setShowCreateDialog(false)}
+ onRefresh={() => {
+ // 手动标注创建成功后刷新标注任务列表
+ fetchData();
+ // 自动标注创建成功后刷新已屏蔽
+ // if (mode === "auto") {
+ // refreshAutoTasks(true);
+ // }
+ }}
+ />
+
+ ),
+ },
+ {
+ key: "templates",
+ label: t('dataAnnotation.home.tabs.templates'),
+ children: ,
+ },
+ ]}
+ />
+
+ {/* {editingAutoTask && (
+ {
+ setShowEditAutoDatasetDialog(false);
+ setEditingAutoTask(null);
+ }}
+ onSuccess={() => {
+ setShowEditAutoDatasetDialog(false);
+ setEditingAutoTask(null);
+ // refreshAutoTasks();
+ }}
+ />
+ )} */}
+
+ {editingManualTask && (
+ {
+ setShowEditManualDatasetDialog(false);
+ setEditingManualTask(null);
+ }}
+ onSuccess={() => {
+ setShowEditManualDatasetDialog(false);
+ setEditingManualTask(null);
+ }}
+ />
+ )}
+
+ {importingManualTask && (
+ {
+ setShowImportManualDialog(false);
+ setImportingManualTask(null);
+ }}
+ onSuccess={() => {
+ setShowImportManualDialog(false);
+ setImportingManualTask(null);
+ }}
+ />
+ )}
+
+ {/* 自动标注导入对话框已屏蔽（保留代码在注释中） */}
+ {/* {importingAutoTask && (
+ {
+ setShowImportAutoDialog(false);
+ setImportingAutoTask(null);
+ }}
+ onSuccess={() => {
+ setShowImportAutoDialog(false);
+ setImportingAutoTask(null);
+ }}
+ />
+ )} */}
+
+ );
+}