feat(annotation): 替换模板配置表单为树形编辑器组件

- 移除 TemplateConfigurationForm 组件并引入 TemplateConfigurationTreeEditor
- 使用 useTagConfig Hook 获取标签配置
- 将自定义XML状态 customXml 替换为 labelConfig
- 删除模板编辑标签页和选择模板状态管理
- 更新XML解析逻辑支持更多对象和标注控件类型
- 添加配置验证功能确保至少包含数据对象和标注控件
- 在模板详情页面使用树形编辑器显示配置详情
- 更新任务创建页面集成新的树形配置编辑器
- 调整预览数据生成功能适配新的XML解析方式

frontend/src/pages/DataAnnotation/Template/TemplateForm.tsx

@@ -13,7 +13,7 @@ import {
 } from "../annotation.api";
 import type { AnnotationTemplate } from "../annotation.model";
 import { DataTypeMap, ClassificationMap, AnnotationTypeMap } from "../annotation.const";
-import TemplateConfigurationForm from "../components/TemplateConfigurationForm";
+import TemplateConfigurationTreeEditor from "../components/TemplateConfigurationTreeEditor";
 
 const { TextArea } = Input;
 const { Option } = Select;
@@ -35,6 +35,7 @@ const TemplateForm: React.FC<TemplateFormProps> = ({
 }) => {
     const [form] = Form.useForm();
     const [loading, setLoading] = useState(false);
+    const [labelConfig, setLabelConfig] = useState("");
 
     useEffect(() => {
         if (visible && template && mode === "edit") {
@@ -45,24 +46,26 @@ const TemplateForm: React.FC<TemplateFormProps> = ({
                 labelingType: template.labelingType,
                 style: template.style,
                 category: template.category,
-                labels: template.configuration.labels,
-                objects: template.configuration.objects,
             });
+            setLabelConfig(template.labelConfig || "");
         } else if (visible && mode === "create") {
             form.resetFields();
             // Set default values
             form.setFieldsValue({
                 style: "horizontal",
                 category: "custom",
-                labels: [],
-                objects: [{ name: "image", type: "Image", value: "$image" }],
             });
+            setLabelConfig("");
         }
     }, [visible, template, mode, form]);
 
     const handleSubmit = async () => {
         try {
             const values = await form.validateFields();
+            if (!labelConfig.trim()) {
+                message.error("请配置标注模板");
+                return;
+            }
             setLoading(true);
 
             console.log("Form values:", values);
@@ -74,10 +77,7 @@ const TemplateForm: React.FC<TemplateFormProps> = ({
                 labelingType: values.labelingType,
                 style: values.style,
                 category: values.category,
-                configuration: {
-                    labels: values.labels,
-                    objects: values.objects,
-                },
+                labelConfig: labelConfig.trim(),
             };
 
             console.log("Request data:", requestData);
@@ -190,7 +190,13 @@ const TemplateForm: React.FC<TemplateFormProps> = ({
                     </Form.Item>
                 </Space>
 
-                <TemplateConfigurationForm form={form} />
+                <div className="bg-gray-50 p-4 rounded-md border border-gray-200">
+                    <TemplateConfigurationTreeEditor
+                        value={labelConfig}
+                        onChange={setLabelConfig}
+                        height={420}
+                    />
+                </div>
             </Form>
         </Modal>
     );