feat(annotation): 添加文本分段索引显示功能

- 实现了分段索引数组的生成逻辑
- 添加了分段索引网格显示界面
- 支持当前分段高亮显示
- 优化了分段导航的用户体验
- 替换了原有的分段提示文字为可视化索引组件

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">
+                  <div className="grid grid-cols-[repeat(auto-fill,minmax(44px,1fr))] gap-1">
-                    <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+                    {segmentIndices.map((segmentIndex) => {
-                      分段列表已关闭，请使用“保存并跳转到下一段/下一条”顺序标注。
+                      const isCurrent = segmentIndex === currentSegmentIndex;
-                    </Typography.Text>
+                      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">