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/Create/components/CreateAnnptationTaskDialog.tsx

@@ -1,14 +1,12 @@
 import { queryDatasetsUsingGet } from "@/pages/DataManagement/dataset.api";
-import {
-  datasetTypeMap,
-  mapDataset,
-} from "@/pages/DataManagement/dataset.const";
-import { Button, Form, Input, Modal, Select } from "antd";
+import { mapDataset } from "@/pages/DataManagement/dataset.const";
+import { Button, Form, Input, Modal, Select, message } from "antd";
 import TextArea from "antd/es/input/TextArea";
-import { Database } from "lucide-react";
 import { useEffect, useState } from "react";
 import { createAnnotationTaskUsingPost } from "../../annotation.api";
 import { Dataset } from "@/pages/DataManagement/dataset.model";
+import LabelingConfigEditor from "./LabelingConfigEditor";
+import { useRef } from "react";
 
 export default function CreateAnnotationTask({
   open,
@@ -21,6 +19,10 @@ export default function CreateAnnotationTask({
 }) {
   const [form] = Form.useForm();
   const [datasets, setDatasets] = useState<Dataset[]>([]);
+  const [submitting, setSubmitting] = useState(false);
+  const [nameManuallyEdited, setNameManuallyEdited] = useState(false);
+  const editorRef = useRef<any>(null);
+  const EDITOR_LIST_HEIGHT = 420;
 
   useEffect(() => {
     if (!open) return;
@@ -34,11 +36,36 @@ export default function CreateAnnotationTask({
     fetchDatasets();
   }, [open]);
 
+  // Reset form and manual-edit flag when modal opens
+  useEffect(() => {
+    if (open) {
+      form.resetFields();
+      setNameManuallyEdited(false);
+    }
+  }, [open, form]);
+
   const handleSubmit = async () => {
-    const values = await form.validateFields();
-    await createAnnotationTaskUsingPost(values);
-    onClose();
-    onRefresh();
+    try {
+      const values = await form.validateFields();
+      setSubmitting(true);
+      await createAnnotationTaskUsingPost(values);
+      message?.success?.("创建标注任务成功");
+      onClose();
+      onRefresh();
+    } catch (err: any) {
+      console.error("Create annotation task failed", err);
+      const msg = err?.message || err?.data?.message || "创建失败，请稍后重试";
+      // show a user friendly message
+      (message as any)?.error?.(msg);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // Placeholder function: generates labeling interface from config
+  // For now it simply returns the parsed config (per requirement)
+  const generateLabelingInterface = (config: any) => {
+    return config;
   };
 
   return (
@@ -48,51 +75,124 @@ export default function CreateAnnotationTask({
       title="创建标注任务"
       footer={
         <>
-          <Button onClick={onClose}>取消</Button>
-          <Button type="primary" onClick={handleSubmit}>
+          <Button onClick={onClose} disabled={submitting}>
+            取消
+          </Button>
+          <Button type="primary" onClick={handleSubmit} loading={submitting}>
             确定
           </Button>
         </>
       }
+      width={1200}
     >
-      <Form layout="vertical">
-        <Form.Item
-          label="名称"
-          name="name"
-          rules={[{ required: true, message: "请输入任务名称" }]}
-        >
-          <Input placeholder="输入任务名称" />
-        </Form.Item>
-        <Form.Item
-          label="描述"
-          name="description"
-          rules={[{ required: true, message: "请输入任务描述" }]}
-        >
-          <TextArea placeholder="详细描述标注任务的要求和目标" rows={3} />
-        </Form.Item>
-        <Form.Item
-          label="数据集"
-          name="datasetId"
-          rules={[{ required: true, message: "请选择数据集" }]}
-        >
-          <Select
-            placeholder="请选择数据集"
-            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>
+      <Form form={form} layout="vertical">
+        {/* 数据集 与 标注工程名称 并排显示（数据集在左） */}
+        <div className="grid grid-cols-2 gap-4">
+          <Form.Item
+            label="数据集"
+            name="datasetId"
+            rules={[{ required: true, message: "请选择数据集" }]}
+          >
+            <Select
+              placeholder="请选择数据集"
+              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 as any).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">{dataset.size}</div>
-                  </div>
-                ),
-                value: dataset.id,
-              };
-            })}
-          />
+                  ),
+                  value: dataset.id,
+                };
+              })}
+              onChange={(value) => {
+                // 如果用户未手动修改名称，则用数据集名称作为默认任务名
+                if (!nameManuallyEdited) {
+                  const ds = datasets.find((d) => d.id === value);
+                  if (ds) {
+                    form.setFieldsValue({ name: ds.name });
+                  }
+                }
+              }}
+            />
+          </Form.Item>
+
+          <Form.Item
+            label="标注工程名称"
+            name="name"
+            rules={[{ required: true, message: "请输入任务名称" }]}
+          >
+            <Input
+              placeholder="输入标注工程名称"
+              onChange={() => setNameManuallyEdited(true)}
+            />
+          </Form.Item>
+        </div>
+        {/* 描述变为可选 */}
+        <Form.Item label="描述" name="description">
+          <TextArea placeholder="（可选）详细描述标注任务的要求和目标" rows={3} />
         </Form.Item>
+
+        {/* 标注页面设计 模块：左侧为配置编辑，右侧为预览（作为表单的一部分，与其他字段同级） */}
+        <div style={{ marginTop: 8 }}>
+          <label className="block font-medium mb-2">标注页面设计</label>
+          <div style={{ display: "grid", gridTemplateColumns: "minmax(360px, 1fr) 1fr", gridTemplateRows: "auto 1fr", gap: 16 }}>
+            {/* Row 1: buttons on the left, spacer on the right so preview aligns with editor below */}
+            <div style={{ gridColumn: 1, gridRow: 1, display: 'flex', gap: 8 }}>
+              <Button onClick={() => editorRef.current?.addLabel?.()}>添加标签</Button>
+              <Button type="primary" onClick={() => editorRef.current?.generate?.()}>生成标注页面配置</Button>
+            </div>
+
+            {/* empty spacer to occupy top-right cell so preview starts on the second row */}
+            <div style={{ gridColumn: 2, gridRow: 1 }} />
+
+            {/* Row 2, Col 1: 编辑列表（固定高度） */}
+            <div style={{ gridColumn: 1, gridRow: 2, height: EDITOR_LIST_HEIGHT, overflowY: 'auto', paddingRight: 8, border: '1px solid #e6e6e6', borderRadius: 6, padding: 12 }}>
+              <LabelingConfigEditor
+                ref={editorRef}
+                hideFooter={true}
+                initial={undefined}
+                onGenerate={(config: any) => {
+                  form.setFieldsValue({ labelingConfig: JSON.stringify(config, null, 2), labelingInterface: JSON.stringify(generateLabelingInterface(config), null, 2) });
+                }}
+              />
+              <Form.Item
+                name="labelingConfig"
+                rules={[
+                  {
+                    validator: async (_, value) => {
+                      if (!value || value === "") return Promise.resolve();
+                      try {
+                        JSON.parse(value);
+                        return Promise.resolve();
+                      } catch (e) {
+                        return Promise.reject(new Error("请输入有效的 JSON"));
+                      }
+                    },
+                  },
+                ]}
+                style={{ display: "none" }}
+              >
+                <Input />
+              </Form.Item>
+            </div>
+
+            {/* Row 2, Col 2: 预览，与编辑列表在同一行，保持一致高度 */}
+            <div style={{ gridColumn: 2, gridRow: 2, display: 'flex', flexDirection: 'column' }}>
+              <Form.Item name="labelingInterface" style={{ flex: 1 }}>
+                <TextArea
+                  placeholder="标注页面设计（只读，由标注配置生成）"
+                  disabled
+                  style={{ height: EDITOR_LIST_HEIGHT, resize: 'none' }}
+                />
+              </Form.Item>
+            </div>
+          </div>
+        </div>
       </Form>
     </Modal>
   );

frontend/src/pages/DataAnnotation/Create/components/LabelingConfigEditor.tsx

@@ -0,0 +1,187 @@
+import { Button, Card, Input, InputNumber, Popconfirm, Select, Switch, Tooltip } from "antd";
+import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
+import { useState, useImperativeHandle, forwardRef } from "react";
+
+type LabelType = "string" | "number" | "enum";
+
+type LabelItem = {
+    id: string;
+    name: string;
+    type: LabelType;
+    required?: boolean;
+    // for enum: values; for number: min/max
+    values?: string[];
+    min?: number | null;
+    max?: number | null;
+    step?: number | null;
+};
+
+type LabelingConfigEditorProps = {
+    initial?: any;
+    onGenerate: (config: any) => void;
+    hideFooter?: boolean;
+};
+
+export default forwardRef<any, LabelingConfigEditorProps>(function LabelingConfigEditor(
+    { initial, onGenerate, hideFooter }: LabelingConfigEditorProps,
+    ref: any
+) {
+    const [labels, setLabels] = useState<LabelItem[]>(() => {
+        if (initial && initial.labels && Array.isArray(initial.labels)) {
+            return initial.labels.map((l: any, idx: number) => ({
+                id: `${Date.now()}-${idx}`,
+                name: l.name || "",
+                type: l.type || "string",
+                required: !!l.required,
+                values: l.values || (l.type === "enum" ? [] : undefined),
+                min: l.min ?? null,
+                max: l.max ?? null,
+            }));
+        }
+        return [];
+    });
+
+    const addLabel = () => {
+        setLabels((s) => [
+            ...s,
+            { id: `${Date.now()}-${Math.random()}`, name: "", type: "string", required: false, step: null },
+        ]);
+    };
+
+    const updateLabel = (id: string, patch: Partial<LabelItem>) => {
+        setLabels((s) => s.map((l) => (l.id === id ? { ...l, ...patch } : l)));
+    };
+
+    const removeLabel = (id: string) => {
+        setLabels((s) => s.filter((l) => l.id !== id));
+    };
+
+    const generate = () => {
+        // basic validation: label name non-empty
+        for (const l of labels) {
+            if (!l.name || l.name.trim() === "") {
+                // focus not available here, just abort
+                // Could show a more friendly UI; keep simple for now
+                // eslint-disable-next-line no-alert
+                alert("请为所有标签填写名称");
+                return;
+            }
+            if (l.type === "enum") {
+                if (!l.values || l.values.length === 0) {
+                    alert(`枚举标签 ${l.name} 需要至少一个取值`);
+                    return;
+                }
+            }
+            if (l.type === "number") {
+                // validate min/max
+                if (l.min != null && l.max != null && l.min > l.max) {
+                    alert(`数值标签 ${l.name} 的最小值不能大于最大值`);
+                    return;
+                }
+                // validate step
+                if (l.step != null && (!(typeof l.step === "number") || l.step <= 0)) {
+                    alert(`数值标签 ${l.name} 的步长必须为大于 0 的数值`);
+                    return;
+                }
+            }
+        }
+
+        const config = {
+            labels: labels.map((l) => {
+                const item: any = { name: l.name, type: l.type, required: !!l.required };
+                if (l.type === "enum") item.values = l.values || [];
+                if (l.type === "number") {
+                    if (l.min != null) item.min = l.min;
+                    if (l.max != null) item.max = l.max;
+                }
+                return item;
+            }),
+        };
+
+        onGenerate(config);
+    };
+
+    useImperativeHandle(ref, () => ({
+        addLabel,
+        generate,
+    }));
+
+    return (
+        <div>
+            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+                {labels.map((label) => (
+                    <Card size="small" key={label.id} styles={{ body: { padding: 10 } }}>
+                        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }}>
+                            <Input
+                                placeholder="标签名称"
+                                value={label.name}
+                                onChange={(e) => updateLabel(label.id, { name: e.target.value })}
+                                style={{ flex: "1 1 160px", minWidth: 120 }}
+                            />
+                            <Select
+                                value={label.type}
+                                onChange={(v) => updateLabel(label.id, { type: v as LabelType })}
+                                options={[{ label: "文本", value: "string" }, { label: "数值", value: "number" }, { label: "枚举", value: "enum" }]}
+                                style={{ width: 120, flex: "0 0 120px" }}
+                            />
+
+                            {label.type === "enum" && (
+                                <Input.TextArea
+                                    placeholder="每行一个枚举值，按回车换行"
+                                    value={(label.values || []).join("\n")}
+                                    onChange={(e) => updateLabel(label.id, { values: e.target.value.split(/\r?\n/).map((s) => s.trim()).filter(Boolean) })}
+                                    onKeyDown={(e) => {
+                                        // Prevent parent handlers (like Form submit or modal shortcuts) from intercepting Enter
+                                        e.stopPropagation();
+                                    }}
+                                    rows={3}
+                                    style={{ flex: "1 1 220px", minWidth: 160, width: "100%", resize: "vertical" }}
+                                />
+                            )}
+
+                            {label.type === "number" && (
+                                <div style={{ display: "flex", gap: 8, alignItems: "center", flex: "0 0 auto" }}>
+                                    <Tooltip title="最小值">
+                                        <InputNumber value={label.min ?? null} onChange={(v) => updateLabel(label.id, { min: v ?? null })} placeholder="min" />
+                                    </Tooltip>
+                                    <Tooltip title="最大值">
+                                        <InputNumber value={label.max ?? null} onChange={(v) => updateLabel(label.id, { max: v ?? null })} placeholder="max" />
+                                    </Tooltip>
+                                    <Tooltip title="步长 (step)">
+                                        <InputNumber value={label.step ?? null} onChange={(v) => updateLabel(label.id, { step: v ?? null })} placeholder="step" min={0} />
+                                    </Tooltip>
+                                </div>
+                            )}
+
+                            <div style={{ display: "flex", alignItems: "center", gap: 8, marginLeft: "auto" }}>
+                                <span style={{ fontSize: 12, color: "rgba(0,0,0,0.65)" }}>必填</span>
+                                <Switch checked={!!label.required} onChange={(v) => updateLabel(label.id, { required: v })} />
+                                <Popconfirm title="确认删除该标签？" onConfirm={() => removeLabel(label.id)}>
+                                    <Button type="text" icon={<DeleteOutlined />} />
+                                </Popconfirm>
+                            </div>
+                        </div>
+                        <div style={{ marginTop: 8, color: "rgba(0,0,0,0.45)", fontSize: 12 }}>
+                            {label.type === "string" && <span>类型：文本</span>}
+                            {label.type === "number" && <span>类型：数值，支持 min / max / step</span>}
+                            {label.type === "enum" && <span>类型：枚举，每行一个取值（示例：一行写一个值）</span>}
+                        </div>
+                    </Card>
+                ))}
+
+                {!hideFooter && (
+                    <div style={{ display: "flex", gap: 8 }}>
+                        <Button icon={<PlusOutlined />} onClick={addLabel}>
+                            添加标签
+                        </Button>
+                        <Button type="primary" onClick={generate}>
+                            生成 JSON 配置
+                        </Button>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+);