From e6d1e4763fb8d46fcf35f6162ed7492c9f28aad5 Mon Sep 17 00:00:00 2001
From: Jerry Yan <792602257@qq.com>
Date: Sat, 24 Jan 2026 17:36:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(template):=20=E6=B7=BB=E5=8A=A0=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E6=98=BE=E7=A4=BA=E5=90=8D=E7=A7=B0=E6=98=A0=E5=B0=84?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 引入 COMMON_TAG_DISPLAY_NAMES 映射表，为常用标签提供中文显示名称
- 更新布局控件选项以使用中文显示名称
- 修改容器选项以使用中文显示名称
- 添加 getTagDisplayName 回调函数，统一处理标签名称显示逻辑
- 优化节点标题显示，结合标签类型和属性值展示更友好的名称
- 更新依赖数组以包含新的显示名称函数
---
 .../TemplateConfigurationTreeEditor.tsx       | 48 +++++++++++++++----
 1 file changed, 39 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/DataAnnotation/components/TemplateConfigurationTreeEditor.tsx b/frontend/src/pages/DataAnnotation/components/TemplateConfigurationTreeEditor.tsx
index 99f5099..79bb4c4 100644
--- a/frontend/src/pages/DataAnnotation/components/TemplateConfigurationTreeEditor.tsx
+++ b/frontend/src/pages/DataAnnotation/components/TemplateConfigurationTreeEditor.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   Alert,
   Button,
@@ -204,9 +204,20 @@ const isDescendant = (node: XmlNode, targetId: string): boolean => {
   return node.children.some((child) => isDescendant(child, targetId));
 };
 
-const getNodeLabel = (node: XmlNode) => {
-  const name = node.attrs.name || node.attrs.value;
-  return name ? `${node.tag} (${name})` : node.tag;
+const COMMON_TAG_DISPLAY_NAMES: Record<string, string> = {
+  View: "容器",
+  Header: "标题",
+  Style: "样式",
+  Label: "标签项",
+  Choice: "选项",
+  Relation: "关系",
+  Relations: "关系组",
+  Item: "列表项",
+  Path: "路径",
+  Channel: "通道",
+  Collapse: "折叠面板",
+  Filter: "过滤器",
+  Shortcut: "快捷键",
 };
 
 const getDefaultName = (tag: string) => {
@@ -478,7 +489,10 @@ const TemplateConfigurationTreeEditor = ({
       .map(([tag]) => ({ value: tag, label: getControlDisplayName(tag) }));
     const layout = Object.entries(config.controls)
       .filter(([, item]) => item.category === "layout")
-      .map(([tag]) => ({ value: tag, label: tag }));
+      .map(([tag]) => ({
+        value: tag,
+        label: COMMON_TAG_DISPLAY_NAMES[tag] || tag,
+      }));
     return { labeling, layout };
   }, [config]);
 
@@ -497,7 +511,7 @@ const TemplateConfigurationTreeEditor = ({
     }[];
     options.push({
       label: "容器",
-      options: [{ value: "View", label: "View" }],
+      options: [{ value: "View", label: COMMON_TAG_DISPLAY_NAMES.View }],
     });
     if (objectOptions.length > 0) {
       options.push({ label: "数据对象", options: objectOptions });
@@ -510,11 +524,23 @@ const TemplateConfigurationTreeEditor = ({
     }
     options.push({
       label: "子标签",
-      options: CHILD_TAGS.map((tag) => ({ value: tag, label: tag })),
+      options: CHILD_TAGS.map((tag) => ({
+        value: tag,
+        label: COMMON_TAG_DISPLAY_NAMES[tag] || tag,
+      })),
     });
     return options;
   }, [objectOptions, controlOptions]);
 
+  const getTagDisplayName = useCallback(
+    (tag: string) => {
+      if (config?.objects?.[tag]) return getObjectDisplayName(tag);
+      if (config?.controls?.[tag]) return getControlDisplayName(tag);
+      return COMMON_TAG_DISPLAY_NAMES[tag] || tag;
+    },
+    [config]
+  );
+
   const handleAddNode = (tag: string, mode: "child" | "sibling") => {
     if (isStructureLocked) return;
     const newNode = createNode(tag, config || null, objectNames);
@@ -630,12 +656,16 @@ const TemplateConfigurationTreeEditor = ({
       const issue = validationIssues[node.id];
       const hasError = issue?.errors?.length > 0;
       const hasWarning = issue?.warnings?.length > 0;
+      const name = node.attrs.name || node.attrs.value;
+      const title = name
+        ? `${getTagDisplayName(node.tag)} (${name})`
+        : getTagDisplayName(node.tag);
       return {
         key: node.id,
         title: (
           <Space size={6}>
             <span className={hasError ? "text-red-600" : undefined}>
-              {getNodeLabel(node)}
+              {title}
             </span>
             {hasError && <Tag color="red">错误</Tag>}
             {!hasError && hasWarning && <Tag color="gold">提示</Tag>}
@@ -646,7 +676,7 @@ const TemplateConfigurationTreeEditor = ({
       };
     };
     return [build(tree)];
-  }, [tree, validationIssues, isStructureLocked]);
+  }, [tree, validationIssues, isStructureLocked, getTagDisplayName]);
 
   const onDrop: TreeProps["onDrop"] = (info) => {
     if (isStructureLocked) return;