From a778ac23b54a00b8281b62166475eaccab0b5fc9 Mon Sep 17 00:00:00 2001
From: Jerry Yan <792602257@qq.com>
Date: Mon, 19 Jan 2026 15:55:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(annotation):=20=E6=B7=BB=E5=8A=A0=E6=A8=A1?=
 =?UTF-8?q?=E6=9D=BF=E5=8F=97=E9=99=90=E7=BC=96=E8=BE=91=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 引入 restrictedMode 属性控制表单编辑权限
- 在数据对象区域显示锁定状态提示
- 禁用受限制字段的输入功能
- 隐藏受限制时的删除和添加按钮
- 在标签控件区域显示可编辑状态提示
- 更新XML编辑器为只读模式并显示相应提示
- 添加模板选择状态跟踪功能
---
 .../components/CreateAnnotationTaskDialog.tsx |  35 ++++--
 .../components/TemplateConfigurationForm.tsx  | 118 ++++++++++++------
 2 files changed, 106 insertions(+), 47 deletions(-)

diff --git a/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx b/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx
index 1aedcc5..bef90ec 100644
--- a/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx
+++ b/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx
@@ -1,6 +1,6 @@
 import { queryDatasetsUsingGet } from "@/pages/DataManagement/dataset.api";
 import { mapDataset } from "@/pages/DataManagement/dataset.const";
-import { Button, Form, Input, Modal, Select, message, Tabs, Radio, Typography } from "antd";
+import { Button, Form, Input, Modal, Select, message, Tabs, Radio } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import { useEffect, useState } from "react";
 import {
@@ -33,6 +33,8 @@ export default function CreateAnnotationTask({
   const [previewTaskData, setPreviewTaskData] = useState<Record<string, any>>({});
   const [configMode, setConfigMode] = useState<"template" | "custom">("template");
   const [templateEditTab, setTemplateEditTab] = useState<"visual" | "xml">("visual");
+  // 是否已选择模板（用于启用受限编辑模式）
+  const [hasSelectedTemplate, setHasSelectedTemplate] = useState(false);
 
   useEffect(() => {
     if (!open) return;
@@ -76,6 +78,7 @@ export default function CreateAnnotationTask({
       setPreviewTaskData({});
       setConfigMode("template");
       setTemplateEditTab("visual");
+      setHasSelectedTemplate(false);
     }
   }, [open, manualForm]);
 
@@ -179,6 +182,15 @@ export default function CreateAnnotationTask({
 
   // 当选择模板时，加载模板配置到表单
   const handleTemplateSelect = (value: string, option: any) => {
+    // 处理清除选择的情况
+    if (!value) {
+      setHasSelectedTemplate(false);
+      setCustomXml("");
+      return;
+    }
+
+    setHasSelectedTemplate(true);
+
     if (option && option.config) {
       setCustomXml(option.config);
     }
@@ -297,7 +309,7 @@ export default function CreateAnnotationTask({
             <Form.Item
               label="数据集"
               name="datasetId"
-              rules={[{ required: true, message: "请选择数据集" }]} 
+              rules={[{ required: true, message: "请选择数据集" }]}
             >
               <Select
                 placeholder="请选择数据集"
@@ -440,23 +452,29 @@ export default function CreateAnnotationTask({
                   setTemplateEditTab(key as "visual" | "xml");
                 }}
                 size="small"
-                items={[ 
+                items={[
                   {
                     key: "visual",
                     label: "可视化配置",
                     children: (
                       <div style={{ maxHeight: '350px', overflowY: 'auto' }}>
-                        <TemplateConfigurationForm form={manualForm} />
+                        <TemplateConfigurationForm
+                          form={manualForm}
+                          restrictedMode={hasSelectedTemplate}
+                        />
                       </div>
                     ),
                   },
                   {
                     key: "xml",
-                    label: "XML编辑器（高级）",
+                    label: hasSelectedTemplate ? "XML配置（只读）" : "XML编辑器（高级）",
                     children: (
                       <div>
                         <div className="mb-2 text-xs text-gray-500">
-                          直接编辑 Label Studio XML 配置。注意：在此修改后切换回可视化配置可能会丢失部分高级设置。
+                          {hasSelectedTemplate
+                            ? "基于模板创建时，XML 配置为只读。如需完全自定义，请切换'自定义配置'模式。"
+                            : "直接编辑 Label Studio XML 配置。注意：在此修改后切换回可视化配置可能会丢失部分高级设置。"
+                          }
                         </div>
                         <TextArea
                           rows={10}
@@ -464,6 +482,7 @@ export default function CreateAnnotationTask({
                           onChange={(e) => setCustomXml(e.target.value)}
                           placeholder="<View>...</View>"
                           style={{ fontFamily: 'monospace', fontSize: 12 }}
+                          disabled={hasSelectedTemplate}
                         />
                       </div>
                     ),
@@ -486,7 +505,7 @@ export default function CreateAnnotationTask({
         onCancel={() => setShowPreview(false)}
         title="标注界面预览"
         width={1000}
-        footer={[ 
+        footer={[
           <Button key="close" onClick={() => setShowPreview(false)}>
             关闭
           </Button>
@@ -506,4 +525,4 @@ export default function CreateAnnotationTask({
       </Modal>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/DataAnnotation/components/TemplateConfigurationForm.tsx b/frontend/src/pages/DataAnnotation/components/TemplateConfigurationForm.tsx
index 90995ea..1fc6950 100644
--- a/frontend/src/pages/DataAnnotation/components/TemplateConfigurationForm.tsx
+++ b/frontend/src/pages/DataAnnotation/components/TemplateConfigurationForm.tsx
@@ -8,18 +8,28 @@ import {
   Divider,
   Card,
   Checkbox,
+  Typography,
 } from "antd";
-import { PlusOutlined, MinusCircleOutlined } from "@ant-design/icons";
+import { PlusOutlined, MinusCircleOutlined, LockOutlined } from "@ant-design/icons";
 import TagSelector from "../Template/components/TagSelector";
 
 const { Option } = Select;
+const { Text } = Typography;
 
 interface TemplateConfigurationFormProps {
   form: any;
+  /**
+   * 受限编辑模式：选择现有模板时启用
+   * - 数据对象部分完全只读
+   * - 标签控件的结构（类型、来源名称、目标对象等）只读
+   * - 只允许编辑标签/选项的值
+   */
+  restrictedMode?: boolean;
 }
 
 const TemplateConfigurationForm: React.FC<TemplateConfigurationFormProps> = ({
   form,
+  restrictedMode = false,
 }) => {
   const needsOptions = (type: string) => {
     return ["Choices", "RectangleLabels", "PolygonLabels", "Labels"].includes(
@@ -29,7 +39,14 @@ const TemplateConfigurationForm: React.FC<TemplateConfigurationFormProps> = ({
 
   return (
     <>
-      <Divider orientation="left">数据对象</Divider>
+      <Divider orientation="left">
+        数据对象
+        {restrictedMode && (
+          <Text type="secondary" style={{ fontSize: 12, marginLeft: 8 }}>
+            <LockOutlined /> 由模板定义，不可修改
+          </Text>
+        )}
+      </Divider>
       <Form.List name="objects">
         {(fields, { add, remove }) => (
           <>
@@ -43,7 +60,7 @@ const TemplateConfigurationForm: React.FC<TemplateConfigurationFormProps> = ({
                     rules={[{ required: true, message: "必填" }]}
                     style={{ marginBottom: 0, width: 150 }}
                   >
-                    <Input placeholder="例如：image" />
+                    <Input placeholder="例如：image" disabled={restrictedMode} />
                   </Form.Item>
 
                   <Form.Item
@@ -53,7 +70,7 @@ const TemplateConfigurationForm: React.FC<TemplateConfigurationFormProps> = ({
                     rules={[{ required: true, message: "必填" }]}
                     style={{ marginBottom: 0, width: 150 }}
                   >
-                    <TagSelector type="object" />
+                    <TagSelector type="object" disabled={restrictedMode} />
                   </Form.Item>
 
                   <Form.Item
@@ -66,10 +83,10 @@ const TemplateConfigurationForm: React.FC<TemplateConfigurationFormProps> = ({
                     ]}
                     style={{ marginBottom: 0, width: 150 }}
                   >
-                    <Input placeholder="$image" />
+                    <Input placeholder="$image" disabled={restrictedMode} />
                   </Form.Item>
 
-                  {fields.length > 1 && (
+                  {!restrictedMode && fields.length > 1 && (
                     <MinusCircleOutlined
                       style={{ marginTop: 30, color: "red" }}
                       onClick={() => remove(field.name)}
@@ -78,19 +95,28 @@ const TemplateConfigurationForm: React.FC<TemplateConfigurationFormProps> = ({
                 </Space>
               </Card>
             ))}
-            <Button
-              type="dashed"
-              onClick={() => add()}
-              block
-              icon={<PlusOutlined />}
-            >
-              添加对象
-            </Button>
+            {!restrictedMode && (
+              <Button
+                type="dashed"
+                onClick={() => add()}
+                block
+                icon={<PlusOutlined />}
+              >
+                添加对象
+              </Button>
+            )}
           </>
         )}
       </Form.List>
 
-      <Divider orientation="left">标签控件</Divider>
+      <Divider orientation="left">
+        标签控件
+        {restrictedMode && (
+          <Text type="secondary" style={{ fontSize: 12, marginLeft: 8 }}>
+            仅可修改标签/选项值
+          </Text>
+        )}
+      </Divider>
       <Form.List name="labels">
         {(fields, { add, remove }) => (
           <>
@@ -134,10 +160,12 @@ const TemplateConfigurationForm: React.FC<TemplateConfigurationFormProps> = ({
                   </Space>
                 }
                 extra={
-                  <MinusCircleOutlined
-                    style={{ color: "red" }}
-                    onClick={() => remove(field.name)}
-                  />
+                  !restrictedMode && (
+                    <MinusCircleOutlined
+                      style={{ color: "red" }}
+                      onClick={() => remove(field.name)}
+                    />
+                  )
                 }
               >
                 <Space
@@ -162,7 +190,7 @@ const TemplateConfigurationForm: React.FC<TemplateConfigurationFormProps> = ({
                       style={{ marginBottom: 0 }}
                       tooltip="此控件的唯一标识符"
                     >
-                      <Input placeholder="例如：choice" />
+                      <Input placeholder="例如：choice" disabled={restrictedMode} />
                     </Form.Item>
 
                     <Form.Item
@@ -174,7 +202,7 @@ const TemplateConfigurationForm: React.FC<TemplateConfigurationFormProps> = ({
                       tooltip="选择此控件将标注哪个数据对象"
                       dependencies={["objects"]}
                     >
-                      <Select placeholder="选择数据对象">
+                      <Select placeholder="选择数据对象" disabled={restrictedMode}>
                         {(form.getFieldValue("objects") || []).map(
                           (obj: any, idx: number) => (
                             <Option key={idx} value={obj?.name || ""}>
@@ -193,7 +221,7 @@ const TemplateConfigurationForm: React.FC<TemplateConfigurationFormProps> = ({
                       rules={[{ required: true, message: "必填" }]}
                       style={{ marginBottom: 0 }}
                     >
-                      <TagSelector type="control" />
+                      <TagSelector type="control" disabled={restrictedMode} />
                     </Form.Item>
 
                     <Form.Item
@@ -203,7 +231,7 @@ const TemplateConfigurationForm: React.FC<TemplateConfigurationFormProps> = ({
                       valuePropName="checked"
                       style={{ marginBottom: 0 }}
                     >
-                      <Checkbox>必填</Checkbox>
+                      <Checkbox disabled={restrictedMode}>必填</Checkbox>
                     </Form.Item>
                   </div>
 
@@ -229,7 +257,16 @@ const TemplateConfigurationForm: React.FC<TemplateConfigurationFormProps> = ({
                         return (
                           <Form.Item
                             {...field}
-                            label={controlType === "Choices" ? "选项" : "标签"}
+                            label={
+                              <>
+                                {controlType === "Choices" ? "选项" : "标签"}
+                                {restrictedMode && (
+                                  <Text type="success" style={{ fontSize: 11, marginLeft: 6 }}>
+                                    可编辑
+                                  </Text>
+                                )}
+                              </>
+                            }
                             name={[field.name, fieldName]}
                             rules={[
                               { required: true, message: "至少需要一个选项" },
@@ -264,26 +301,29 @@ const TemplateConfigurationForm: React.FC<TemplateConfigurationFormProps> = ({
                     <Input
                       placeholder="为标注人员提供此控件的使用说明"
                       maxLength={200}
+                      disabled={restrictedMode}
                     />
                   </Form.Item>
                 </Space>
               </Card>
             ))}
-            <Button
-              type="dashed"
-              onClick={() =>
-                add({
-                  fromName: "",
-                  toName: "",
-                  type: "Choices",
-                  required: false,
-                })
-              }
-              block
-              icon={<PlusOutlined />}
-            >
-              添加标签控件
-            </Button>
+            {!restrictedMode && (
+              <Button
+                type="dashed"
+                onClick={() =>
+                  add({
+                    fromName: "",
+                    toName: "",
+                    type: "Choices",
+                    required: false,
+                  })
+                }
+                block
+                icon={<PlusOutlined />}
+              >
+                添加标签控件
+              </Button>
+            )}
           </>
         )}
       </Form.List>