feat: data annotation page adaptation to backend API. Improve labeling project creation module.

* feat: data annotation page adaptation to the backend API.

* feat: Implement labeling configuration editor and enhance annotation task creation form

frontend/src/pages/DataAnnotation/Home/DataAnnotation.tsx

@@ -1,5 +1,5 @@
-import { useState } from "react";
-import { Card, Button, Table, message } from "antd";
+import { useState, useEffect } from "react";
+import { Card, Button, Table, message, Modal } from "antd";
 import {
   PlusOutlined,
   EditOutlined,
@@ -8,22 +8,22 @@ import {
 } from "@ant-design/icons";
 import { SearchControls } from "@/components/SearchControls";
 import CardView from "@/components/CardView";
-import { useNavigate } from "react-router";
 import type { AnnotationTask } from "../annotation.model";
 import useFetchData from "@/hooks/useFetchData";
 import {
   deleteAnnotationTaskByIdUsingDelete,
   queryAnnotationTasksUsingGet,
   syncAnnotationTaskUsingPost,
+  getConfigUsingGet,
 } from "../annotation.api";
 import { mapAnnotationTask } from "../annotation.const";
 import CreateAnnotationTask from "../Create/components/CreateAnnptationTaskDialog";
 import { ColumnType } from "antd/es/table";
-import DevelopmentInProgress from "@/components/DevelopmentInProgress";
+// Note: DevelopmentInProgress intentionally not used here
 
 export default function DataAnnotation() {
-  return <DevelopmentInProgress showTime="2025.10.30" />;
-  const navigate = useNavigate();
+  // return <DevelopmentInProgress showTime="2025.10.30" />;
+  // navigate not needed for label studio external redirect
   const [viewMode, setViewMode] = useState<"list" | "card">("list");
   const [showCreateDialog, setShowCreateDialog] = useState(false);
 
@@ -35,22 +35,182 @@ export default function DataAnnotation() {
     setSearchParams,
     fetchData,
     handleFiltersChange,
-  } = useFetchData(queryAnnotationTasksUsingGet, mapAnnotationTask);
+  } = useFetchData(queryAnnotationTasksUsingGet, mapAnnotationTask, 30000, true, [], 0);
+
+  const [labelStudioBase, setLabelStudioBase] = useState<string | null>(null);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<(string | number)[]>([]);
+  const [selectedRows, setSelectedRows] = useState<any[]>([]);
+
+  // 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 cfg = await getConfigUsingGet();
+        const url = cfg?.data?.labelStudioUrl || "";
+        if (mounted) setLabelStudioBase((url).replace(/\/+$/, "") || null);
+      } catch (e) {
+        if (mounted) setLabelStudioBase(null);
+      }
+    })();
+    return () => {
+      mounted = false;
+    };
+  }, []);
 
   const handleAnnotate = (task: AnnotationTask) => {
-    navigate(`/data/annotation/task-annotate/${task.datasetType}/${task.id}`);
+    // Open Label Studio project page in a new tab
+    (async () => {
+      try {
+        // prefer using labeling project id already present on the task
+        // `mapAnnotationTask` normalizes upstream fields into `labelingProjId`/`projId`,
+        // so prefer those and fall back to the task id if necessary.
+        let labelingProjId = (task as any).labelingProjId || (task as any).projId || 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
+
+        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("无法跳转到 Label Studio：未配置 Label Studio 基础 URL");
+            return;
+          }
+        } else {
+          // no labeling project id available — do not attempt internal redirect in this version
+          message.error("无法跳转到 Label Studio：该映射未绑定标注项目");
+          return;
+        }
+      } catch (error) {
+        // on error, surface a user-friendly message instead of redirecting
+        message.error("无法跳转到 Label Studio：发生错误，请检查配置或控制台日志");
+        return;
+      }
+    })();
   };
 
-  const handleDelete = async (task: AnnotationTask) => {
-    await deleteAnnotationTaskByIdUsingDelete({
-      m: task.id,
-      proj: task.projId,
+  const handleDelete = (task: AnnotationTask) => {
+    Modal.confirm({
+      title: `确认删除标注任务「${task.name}」吗？`,
+      content: (
+        <div>
+          <div>删除标注任务不会删除对应数据集。</div>
+          <div>如需保留当前标注结果，请在同步后再删除。</div>
+        </div>
+      ),
+      okText: "删除",
+      okType: "danger",
+      cancelText: "取消",
+      onOk: async () => {
+        try {
+          await deleteAnnotationTaskByIdUsingDelete({ m: task.id, proj: task.labelingProjId });
+          message.success("映射删除成功");
+          fetchData();
+          // clear selection if deleted item was selected
+          setSelectedRowKeys((keys) => keys.filter((k) => k !== task.id));
+          setSelectedRows((rows) => rows.filter((r) => r.id !== task.id));
+        } catch (e) {
+          console.error(e);
+          message.error("删除失败，请稍后重试");
+        }
+      },
     });
   };
 
-  const handleSync = async (task: AnnotationTask, format: string) => {
-    await syncAnnotationTaskUsingPost({ task, format });
-    message.success("任务同步请求已发送");
+  const handleSync = (task: AnnotationTask, batchSize: number = 50) => {
+    Modal.confirm({
+      title: `确认同步标注任务「${task.name}」吗？`,
+      content: (
+        <div>
+          <div>标注工程中文件列表将与数据集保持一致，差异项将会被修正。</div>
+          <div>标注工程中的标签与数据集中标签将进行合并，冲突项将以最新一次内容为准。</div>
+        </div>
+      ),
+      okText: "同步",
+      cancelText: "取消",
+      onOk: async () => {
+        try {
+          await syncAnnotationTaskUsingPost({ id: task.id, batchSize });
+          message.success("任务同步请求已发送");
+          // optional: refresh list/status
+          fetchData();
+          // clear selection for the task
+          setSelectedRowKeys((keys) => keys.filter((k) => k !== task.id));
+          setSelectedRows((rows) => rows.filter((r) => r.id !== task.id));
+        } catch (e) {
+          console.error(e);
+          message.error("同步失败，请稍后重试");
+        }
+      },
+    });
+  };
+
+  const handleBatchSync = (batchSize: number = 50) => {
+    if (!selectedRows || selectedRows.length === 0) return;
+    Modal.confirm({
+      title: `确认同步所选 ${selectedRows.length} 个标注任务吗？`,
+      content: (
+        <div>
+          <div>标注工程中文件列表将与数据集保持一致，差异项将会被修正。</div>
+          <div>标注工程中的标签与数据集中标签将进行合并，冲突项将以最新一次内容为准。</div>
+        </div>
+      ),
+      okText: "同步",
+      cancelText: "取消",
+      onOk: async () => {
+        try {
+          await Promise.all(
+            selectedRows.map((r) => syncAnnotationTaskUsingPost({ id: r.id, batchSize }))
+          );
+          message.success("批量同步请求已发送");
+          fetchData();
+          setSelectedRowKeys([]);
+          setSelectedRows([]);
+        } catch (e) {
+          console.error(e);
+          message.error("批量同步失败，请稍后重试");
+        }
+      },
+    });
+  };
+
+  const handleBatchDelete = () => {
+    if (!selectedRows || selectedRows.length === 0) return;
+    Modal.confirm({
+      title: `确认删除所选 ${selectedRows.length} 个标注任务吗？`,
+      content: (
+        <div>
+          <div>删除标注任务不会删除对应数据集。</div>
+          <div>如需保留当前标注结果，请在同步后再删除。</div>
+        </div>
+      ),
+      okText: "删除",
+      okType: "danger",
+      cancelText: "取消",
+      onOk: async () => {
+        try {
+          await Promise.all(
+            selectedRows.map((r) => deleteAnnotationTaskByIdUsingDelete({ m: r.id, proj: r.labelingProjId }))
+          );
+          message.success("批量删除已完成");
+          fetchData();
+          setSelectedRowKeys([]);
+          setSelectedRows([]);
+        } catch (e) {
+          console.error(e);
+          message.error("批量删除失败，请稍后重试");
+        }
+      },
+    });
   };
 
   const operations = [
@@ -79,7 +239,7 @@ export default function DataAnnotation() {
     },
   ];
 
-  const columns: ColumnType[] = [
+  const columns: ColumnType<any>[] = [
     {
       title: "任务名称",
       dataIndex: "name",
@@ -115,14 +275,14 @@ export default function DataAnnotation() {
       fixed: "right" as const,
       width: 150,
       dataIndex: "actions",
-      render: (_: any, task: AnnotationTask) => (
+      render: (_: any, task: any) => (
         <div className="flex items-center justify-center space-x-1">
           {operations.map((operation) => (
             <Button
               key={operation.key}
               type="text"
               icon={operation.icon}
-              onClick={() => operation?.onClick?.(task)}
+              onClick={() => (operation?.onClick as any)?.(task)}
               title={operation.label}
             />
           ))}
@@ -136,13 +296,31 @@ export default function DataAnnotation() {
       {/* Header */}
       <div className="flex items-center justify-between">
         <h1 className="text-xl font-bold">数据标注</h1>
-        <Button
-          type="primary"
-          icon={<PlusOutlined />}
-          onClick={() => setShowCreateDialog(true)}
-        >
-          创建标注任务
-        </Button>
+        <div className="flex items-center space-x-2">
+          {/* Batch action buttons - availability depends on selection count */}
+          <div className="flex items-center space-x-1">
+            <Button
+              onClick={() => handleBatchSync(50)}
+              disabled={selectedRowKeys.length === 0}
+            >
+              批量同步
+            </Button>
+            <Button
+              danger
+              onClick={handleBatchDelete}
+              disabled={selectedRowKeys.length === 0}
+            >
+              批量删除
+            </Button>
+          </div>
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => setShowCreateDialog(true)}
+          >
+            创建标注任务
+          </Button>
+        </div>
       </div>
 
       {/* Filters Toolbar */}
@@ -163,15 +341,23 @@ export default function DataAnnotation() {
         <Card>
           <Table
             key="id"
+            rowKey="id"
             loading={loading}
             columns={columns}
             dataSource={tableData}
             pagination={pagination}
+            rowSelection={{
+              selectedRowKeys,
+              onChange: (keys, rows) => {
+                setSelectedRowKeys(keys as (string | number)[]);
+                setSelectedRows(rows as any[]);
+              },
+            }}
             scroll={{ x: "max-content", y: "calc(100vh - 20rem)" }}
           />
         </Card>
       ) : (
-        <CardView data={tableData} operations={operations} />
+        <CardView data={tableData} operations={operations as any} pagination={pagination} loading={loading} />
       )}
       <CreateAnnotationTask
         open={showCreateDialog}