From 473f4e717fee9701fb75aed1e007b531d3797e1f Mon Sep 17 00:00:00 2001
From: Jerry Yan <792602257@qq.com>
Date: Wed, 4 Feb 2026 19:16:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(annotation):=20=E6=B7=BB=E5=8A=A0=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E5=88=86=E6=AE=B5=E7=B4=A2=E5=BC=95=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 实现了分段索引数组的生成逻辑
- 添加了分段索引网格显示界面
- 支持当前分段高亮显示
- 优化了分段导航的用户体验
- 替换了原有的分段提示文字为可视化索引组件
---
 .../Annotate/LabelStudioTextEditor.tsx        | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/DataAnnotation/Annotate/LabelStudioTextEditor.tsx b/frontend/src/pages/DataAnnotation/Annotate/LabelStudioTextEditor.tsx
index c8e3017..18b2a21 100644
--- a/frontend/src/pages/DataAnnotation/Annotate/LabelStudioTextEditor.tsx
+++ b/frontend/src/pages/DataAnnotation/Annotate/LabelStudioTextEditor.tsx
@@ -264,6 +264,10 @@ export default function LabelStudioTextEditor() {
     () => (project?.datasetType || "").toUpperCase() === "TEXT",
     [project?.datasetType],
   );
+  const segmentIndices = useMemo(() => {
+    if (segmentTotal <= 0) return [] as number[];
+    return Array.from({ length: segmentTotal }, (_, index) => index);
+  }, [segmentTotal]);
 
   const focusIframe = useCallback(() => {
     const iframe = iframeRef.current;
@@ -982,10 +986,22 @@ export default function LabelStudioTextEditor() {
               </div>
               <div className="flex-1 min-h-0 overflow-auto px-2 py-2">
                 {segmentTotal > 0 ? (
-                  <div className="py-6">
-                    <Typography.Text type="secondary" style={{ fontSize: 12 }}>
-                      分段列表已关闭，请使用“保存并跳转到下一段/下一条”顺序标注。
-                    </Typography.Text>
+                  <div className="grid grid-cols-[repeat(auto-fill,minmax(44px,1fr))] gap-1">
+                    {segmentIndices.map((segmentIndex) => {
+                      const isCurrent = segmentIndex === currentSegmentIndex;
+                      return (
+                        <div
+                          key={segmentIndex}
+                          className={
+                            isCurrent
+                              ? "h-7 leading-7 rounded bg-blue-500 text-white text-center text-xs font-medium"
+                              : "h-7 leading-7 rounded bg-gray-100 text-gray-700 text-center text-xs"
+                          }
+                        >
+                          {segmentIndex + 1}
+                        </div>
+                      );
+                    })}
                   </div>
                 ) : (
                   <div className="py-6">