@koi-br/ocr-web-sdk 1.0.25 → 1.0.26

package/preview/ImagePreview.vue

@@ -71,8 +71,13 @@
             <Download :size="16" />
           </AButton>
         </ATooltip>
-        <div class="toolbar-divider"></div>
-        <ATooltip mini position="bottom" content="向左旋转">
+        <div v-if="showRotateButtons" class="toolbar-divider"></div>
+        <ATooltip
+          v-if="showRotateButtons"
+          mini
+          position="bottom"
+          content="向左旋转"
+        >
           <AButton
             size="small"
             type="outline"
@@ -81,7 +86,12 @@
             <RotateCw :size="16" />
           </AButton>
         </ATooltip>
-        <ATooltip mini position="bottom" content="向右旋转">
+        <ATooltip
+          v-if="showRotateButtons"
+          mini
+          position="bottom"
+          content="向右旋转"
+        >
           <AButton
             size="small"
             type="outline"
@@ -90,6 +100,33 @@
             <RotateCcw :size="16" />
           </AButton>
         </ATooltip>
+        <!-- 翻页控件（仅在有多张图片时显示，放在最右侧） -->
+        <template v-if="totalPages > 1">
+          <div class="toolbar-divider"></div>
+          <ATooltip mini position="bottom" content="上一页">
+            <AButton
+              size="small"
+              type="outline"
+              :disabled="currentPage <= 1"
+              @click="goToPreviousPage"
+            >
+              <ChevronLeft :size="16" />
+            </AButton>
+          </ATooltip>
+          <span class="page-info">
+            {{ currentPage }} / {{ totalPages }}
+          </span>
+          <ATooltip mini position="bottom" content="下一页">
+            <AButton
+              size="small"
+              type="outline"
+              :disabled="currentPage >= totalPages"
+              @click="goToNextPage"
+            >
+              <ChevronRight :size="16" />
+            </AButton>
+          </ATooltip>
+        </template>
       </div>
     </div>
 
@@ -98,7 +135,7 @@
       class="image-container"
       @mousedown="startPan"
       @mousemove="pan"
-      @mouseup="stopPan"
+      @mouseup="handleMouseUp"
       @mouseleave="stopPan"
       @scroll="handleScroll"
     >
@@ -110,44 +147,83 @@
           class="image-wrapper"
           :style="{
             transform: `translate(${position.x}px, ${position.y}px) rotate(${rotation}deg) scale(${scale})`,
-            transformOrigin: 'center center'
+            transformOrigin: 'top center'
           }"
         >
         <img
-          v-if="url"
+          v-if="currentImageUrl"
           ref="imageRef"
-          :src="url"
+          :src="currentImageUrl"
           alt="预览图片"
           :style="{
             cursor: isPanning ? 'grabbing' : 'grab',
-            display: 'block'
+            display: 'block',
+            pointerEvents: currentPageBlocksData.value && currentPageBlocksData.value.length > 0 ? 'none' : 'auto'
         }"
         @contextmenu.prevent
-        @mousedown.prevent
+        @mousedown="handleImageMouseDown"
         @load="onImageLoad"
       />
         
         <!-- 文本图层（用于文本块选择和定位） -->
         <div
-          v-if="blocksData && blocksData.length > 0"
+          v-if="currentPageBlocksData && currentPageBlocksData.length > 0"
           ref="textLayerRef"
           class="text-layer"
         ></div>
         </div>
       </div>
 
-      <!-- 复制按钮浮层 -->
+      <!-- 批注按钮浮层（通过右键菜单触发） -->
+      <div
+        v-if="showAnnotationPopup && !currentAnnotationBlock"
+        ref="annotationButtonRef"
+        class="annotation-button-popup"
+        :style="annotationPopupStyle"
+        @mouseenter="cancelHideAnnotationButton"
+        @mouseleave="hideAnnotationButton"
+      >
+        <div class="annotation-button-action" @click.stop="openAnnotationInput">
+          <MessageSquare :size="12" style="margin-right: 4px" />
+          批注
+        </div>
+      </div>
+
+      <!-- 批注输入弹窗 -->
       <div
-        v-if="showCopyButton"
-        ref="copyButtonRef"
-        class="copy-button-popup"
-        :style="copyButtonStyle"
-        @mouseenter="cancelHideCopyButton"
-        @mouseleave="hideCopyButtonAndHighlight"
+        v-if="showAnnotationPopup && currentAnnotationBlock"
+        ref="annotationPopupRef"
+        class="annotation-input-popup"
+        :style="annotationPopupStyle"
+        @mouseenter="cancelHideAnnotationButton"
       >
-        <div class="copy-button-popup-action" @click="copySelectedText">
-          <Copy :size="12" style="margin-right: 4px" />
-          复制
+        <div class="annotation-input-header">
+          <span class="annotation-input-title">添加批注</span>
+          <button class="annotation-close-btn" @click="closeAnnotationInput">
+            <X :size="14" />
+          </button>
+        </div>
+        <div class="annotation-input-content">
+          <Textarea
+            v-model="annotationInput"
+            :auto-size="{ minRows: 3, maxRows: 6 }"
+            placeholder="请输入批注内容..."
+            class="annotation-textarea"
+            @keydown.ctrl.enter="saveAnnotation"
+            @keydown.meta.enter="saveAnnotation"
+            @focus="cancelHideAnnotationButton"
+            @blur="cancelHideAnnotationButton"
+            @click.stop
+            @mousedown.stop
+          />
+        </div>
+        <div class="annotation-input-footer">
+          <AButton size="small" type="outline" @click="closeAnnotationInput">
+            取消
+          </AButton>
+          <AButton size="small" type="primary" @click="saveAnnotation" :disabled="!annotationInput.trim()">
+            保存
+          </AButton>
         </div>
       </div>
     </div>
@@ -156,22 +232,34 @@
 
 <script setup lang="ts">
 import { ref, watch, nextTick, onMounted, onBeforeUnmount, computed } from 'vue';
-import { ZoomIn, ZoomOut, RefreshCcw, RotateCw, RotateCcw, Download, Maximize2, Copy } from 'lucide-vue-next';
-import { Button as AButton, Tooltip as ATooltip, Message } from '@arco-design/web-vue';
+import { ZoomIn, ZoomOut, RefreshCcw, RotateCw, RotateCcw, Download, Maximize2, Copy, ChevronLeft, ChevronRight, MessageSquare, X } from 'lucide-vue-next';
+import { Button as AButton, Tooltip as ATooltip, Message, Input, Textarea } from '@arco-design/web-vue';
 
 /**
- * 文本块数据结构（与 PdfPreview 保持一致）
+ * 文本块数据结构
  */
 interface BlockInfo {
-  blockLabel: string; // 块标签
-  blockContent: string; // 块内容
-  blockBbox: [number, number, number, number]; // 块的边界框 [x1, y1, x2, y2]
-  blockPage?: number; // 块所属的页码（图片预览中通常为1，可选）
+  pageNo: number; // 页码
+  content: string; // 内容
+  bbox: [number, number, number, number]; // 边界框 [x1, y1, x2, y2]
+}
+
+/**
+ * 批注数据结构
+ */
+interface AnnotationInfo {
+  id: string; // 批注唯一ID
+  blockBbox: [number, number, number, number]; // 关联的文本块边界框
+  blockContent: string; // 关联的文本内容
+  blockPage?: number; // 所属页码
+  content: string; // 批注内容
+  createTime: number; // 创建时间戳
 }
 
 const props = defineProps({
+  // 支持单个URL（向后兼容）或URL数组
   url: {
-    type: String,
+    type: [String, Array] as () => string | string[],
     required: true
   },
   minScale: {
@@ -205,27 +293,73 @@ const props = defineProps({
   enableWheelZoom: {
     type: Boolean,
     default: true // 默认启用滚轮缩放，保持向后兼容
+  },
+  // 批注数据（从外部传入，用于显示已有批注）
+  annotations: {
+    type: Array as () => AnnotationInfo[],
+    default: () => []
+  },
+  // 是否在初始加载时自适应宽度
+  autoFitWidth: {
+    type: Boolean,
+    default: true
+  },
+  // 是否启用滚动翻页
+  enableScrollPaging: {
+    type: Boolean,
+    default: true
+  },
+  // 是否显示旋转按钮
+  showRotateButtons: {
+    type: Boolean,
+    default: true
   }
 });
 
 const emit = defineEmits<{
   'original': [];
   'download': [];
-  'load': [data: { width: number; height: number }];
+  'load': [data: { width: number; height: number; page?: number; totalPages?: number }];
   'position-jump': [bbox: [number, number, number, number], type: 'block' | 'seal'];
+  'page-change': [page: number, totalPages: number];
+  'annotation-add': [annotation: AnnotationInfo]; // 添加批注事件
+  'annotation-update': [annotation: AnnotationInfo]; // 更新批注事件
+  'annotation-delete': [annotationId: string]; // 删除批注事件
 }>();
 
+// 图片URL数组和当前页码
+const imageUrls = computed(() => {
+  if (Array.isArray(props.url)) {
+    return props.url;
+  }
+  return [props.url];
+});
+
+const currentPage = ref(1);
+const totalPages = computed(() => imageUrls.value.length);
+
+// 当前显示的图片URL
+const currentImageUrl = computed(() => {
+  return imageUrls.value[currentPage.value - 1] || '';
+});
+
 const rotation = ref(0);
 const scale = ref(1);
 const position = ref({ x: 0, y: 0 });
 const isPanning = ref(false);
 const lastPosition = ref({ x: 0, y: 0 });
+const initialAutoFitScale = ref<number | null>(null); // 记录初始自适应缩放比例
+const isUserZooming = ref(false); // 标记用户是否主动缩放
+
+// 滚动翻页相关
+let scrollPagingTimer: any = null;
+const isScrollPaging = ref(false); // 标记是否正在进行滚动翻页
 
 // 图片和容器引用
 const containerRef = ref<HTMLElement>();
 const imageRef = ref<HTMLImageElement>();
 const textLayerRef = ref<HTMLElement>();
-const copyButtonRef = ref<HTMLElement>();
+const annotationButtonRef = ref<HTMLElement>();
 
 // 图片尺寸
 const imageSize = ref({ width: 0, height: 0 });
@@ -253,21 +387,43 @@ const scaledImageSize = computed(() => {
 // 容器样式，动态设置最小尺寸以支持滚动
 const containerStyle = computed(() => {
   const { width, height } = scaledImageSize.value;
-  const padding = 40; // 左右各20px，共40px
 
+  // 如果启用自适应宽度，不设置固定的 minWidth
+  // 让容器自适应内容，避免横向滚动条
+  if (props.autoFitWidth) {
+    return {
+      minWidth: '100%', // 使用 100% 让容器自适应父容器宽度
+      minHeight: height > 0 ? `${height}px` : '100%'
+    };
+  }
+
+  // 未启用自适应宽度时，使用原始逻辑
   return {
-    minWidth: width > 0 ? `${width + padding}px` : '100%',
-    minHeight: height > 0 ? `${height + padding}px` : '100%'
+    minWidth: width > 0 ? `${width}px` : '100%',
+    minHeight: height > 0 ? `${height}px` : '100%'
   };
 });
 
-// 文本选择相关状态
-const showCopyButton = ref(false);
-const selectedText = ref('');
-const copyButtonStyle = ref<any>({});
+// 批注相关状态
+const showAnnotationPopup = ref(false); // 是否显示批注弹窗
+const annotationPopupStyle = ref<any>({}); // 批注弹窗样式
+const annotationInput = ref(''); // 批注输入内容
+const currentAnnotationBlock = ref<{ bbox: [number, number, number, number]; content: string } | null>(null); // 当前正在添加批注的文本块
+const annotationPopupRef = ref<HTMLElement>(); // 批注弹窗引用
+
+// 文本选择相关状态（保留用于兼容）
 const activeBlockDiv = ref<HTMLElement | null>(null);
 const isHighlighted = ref(false); // 标识是否为定位点击的高亮
 
+// 根据当前页码过滤blocksData
+const currentPageBlocksData = computed(() => {
+  if (!props.blocksData || props.blocksData.length === 0) {
+    return [];
+  }
+  // 根据当前页码过滤
+  return props.blocksData.filter(block => block.pageNo === currentPage.value);
+});
+
 // 隐藏定时器
 let hideTimer: any = null;
 
@@ -280,6 +436,9 @@ const rotateImage = direction => {
 };
 
 const zoom = (delta, isWheel = false) => {
+  // 用户主动缩放时，标记为手动缩放
+  isUserZooming.value = true;
+  
   const step = isWheel ? props.wheelStep : props.clickStep; // 滚轮缩放使用更小的步长
   const newScale = scale.value + delta * step;
   if (newScale <= props.minScale) {
@@ -305,12 +464,21 @@ const handleWheel = (e: WheelEvent) => {
 const startPan = (e: MouseEvent) => {
   // 只在左键点击时启用拖拽
   if (e.button !== 0) return;
-  // 如果按住 Ctrl 或 Meta 键，允许拖拽（避免与文本选择冲突）
-  // 如果没有文本图层数据，或者按住修饰键，允许拖拽
-  if (props.blocksData && props.blocksData.length > 0 && !e.ctrlKey && !e.metaKey) {
-    // 有文本图层时，默认不拖拽，允许文本选择
-    return;
+  
+  // 如果有文本图层数据，默认允许文本选择，不拖拽
+  // 只有在按住 Ctrl 或 Meta 键时才允许拖拽
+  if (currentPageBlocksData.value && currentPageBlocksData.value.length > 0) {
+    // 如果用户正在选择文本，不启用拖拽
+    const selection = window.getSelection();
+    if (selection && selection.toString().length > 0) {
+      return;
+    }
+    // 如果没有按住修饰键，允许文本选择，不拖拽
+    if (!e.ctrlKey && !e.metaKey) {
+      return;
+    }
   }
+  
   isPanning.value = true;
   lastPosition.value = { x: e.clientX, y: e.clientY };
   e.preventDefault(); // 阻止默认行为，避免与滚动冲突
@@ -333,16 +501,237 @@ const pan = (e: MouseEvent) => {
 
 const stopPan = () => {
   isPanning.value = false;
+  
+  // 在自适应宽度模式下，如果用户没有主动缩放，确保缩放比例保持初始值
+  if (props.autoFitWidth && 
+      !isUserZooming.value && 
+      initialAutoFitScale.value !== null &&
+      Math.abs(scale.value - initialAutoFitScale.value) > 0.01) {
+    // 拖拽操作不应该改变缩放比例，如果被改变了，恢复它
+    scale.value = initialAutoFitScale.value;
+  }
+
+};
+
+// 处理鼠标抬起事件（检测文本选择）
+const handleMouseUp = (e: MouseEvent) => {
+  // 先执行停止拖拽的逻辑
+  stopPan();
+  
+  // 延迟检测文本选择，确保选择已完成
+  setTimeout(() => {
+    checkTextSelection(e);
+  }, 10);
+};
+
+// 检测文本选择并显示批注按钮
+const checkTextSelection = (e: MouseEvent) => {
+  // 如果正在显示批注弹窗，不执行文本选择检测
+  if (currentAnnotationBlock.value) {
+    return;
+  }
+  
+  const target = e.target as HTMLElement;
+  // 如果点击的是批注按钮或批注弹窗，不执行文本选择检测
+  if (target.closest('.annotation-button-popup') || target.closest('.annotation-input-popup')) {
+    return;
+  }
+  
+  const selection = window.getSelection();
+  
+  // 如果没有选中文本，隐藏批注按钮（但不关闭批注输入弹窗）
+  if (!selection || selection.toString().trim().length === 0) {
+    // 如果点击的不是文本块，且不在批注弹窗内，隐藏批注按钮
+    if (!target.closest('.text-block') && !target.closest('.annotation-input-popup')) {
+      // 只有在没有打开批注输入弹窗时才隐藏批注按钮
+      if (!currentAnnotationBlock.value) {
+        showAnnotationPopup.value = false;
+        activeBlockDiv.value = null;
+      }
+    }
+    return;
+  }
+  
+  // 获取选中的文本
+  const selectedText = selection.toString().trim();
+  if (!selectedText) {
+    return;
+  }
+  
+  // 检查选中的文本是否在文本块内
+  const range = selection.getRangeAt(0);
+  const container = range.commonAncestorContainer;
+  
+  // 向上查找最近的文本块元素
+  let textBlockElement: HTMLElement | null = null;
+  let node: Node | null = container.nodeType === Node.TEXT_NODE ? container.parentElement : container as HTMLElement;
+  
+  while (node && node !== document.body) {
+    if (node instanceof HTMLElement && node.classList.contains('text-block')) {
+      textBlockElement = node;
+      break;
+    }
+    node = node.parentElement;
+  }
+  
+  if (!textBlockElement) {
+    return;
+  }
+  
+  // 设置当前激活的文本块
+  activeBlockDiv.value = textBlockElement;
+  
+  // 获取选中文本的位置
+  const rect = range.getBoundingClientRect();
+  const containerRect = containerRef.value?.getBoundingClientRect();
+  
+  if (!containerRect || !containerRef.value) return;
+  
+  // 计算批注按钮的位置
+  const buttonWidth = 80;
+  const popupWidth = buttonWidth + 8;
+  const popupHeight = 38;
+  const spacing = 4; // 减少间距，让按钮更靠近文字
+  
+  // 计算相对于容器的坐标（考虑滚动）
+  const relativeX = rect.left - containerRect.left + containerRef.value.scrollLeft;
+  const relativeY = rect.top - containerRect.top + containerRef.value.scrollTop;
+  
+  // 容器可用空间
+  const containerWidth = containerRef.value.clientWidth;
+  
+  // 计算可用空间
+  const rectBottom = rect.bottom;
+  const rectTop = rect.top;
+  const containerBottom = containerRect.bottom;
+  const containerTop = containerRect.top;
+  
+  const bottomSpace = containerBottom - rectBottom;
+  const topSpace = rectTop - containerTop;
+  
+  const showOnBottom = bottomSpace >= popupHeight + spacing || (bottomSpace > 0 && bottomSpace >= topSpace);
+  
+  // 计算最终位置
+  let left: number;
+  let top: number;
+  
+  const centerX = relativeX + rect.width / 2;
+  left = centerX - popupWidth / 2;
+  
+  if (showOnBottom) {
+    top = relativeY + rect.height + spacing;
+  } else {
+    top = relativeY - popupHeight - spacing;
+  }
+  
+  // 边界检查
+  const popupTopInViewport = top - containerRef.value.scrollTop + containerRect.top;
+  const popupBottomInViewport = popupTopInViewport + popupHeight;
+  
+  if (popupBottomInViewport > containerBottom - spacing) {
+    top = relativeY - popupHeight - spacing;
+  }
+  
+  const newPopupTopInViewport = top - containerRef.value.scrollTop + containerRect.top;
+  if (newPopupTopInViewport < containerTop + spacing) {
+    top = relativeY + rect.height + spacing;
+  }
+  
+  // 确保不超出容器边界
+  if (left + popupWidth > containerWidth - spacing) {
+    left = containerWidth - popupWidth - spacing;
+  }
+  if (left < spacing) {
+    left = spacing;
+  }
+  
+  annotationPopupStyle.value = {
+    left: `${left}px`,
+    top: `${top}px`
+  };
+  
+  // 显示批注按钮
+  showAnnotationPopup.value = true;
+};
+
+// 翻页相关方法
+const goToPreviousPage = () => {
+  if (currentPage.value > 1) {
+    switchToPage(currentPage.value - 1);
+  }
+};
+
+const goToNextPage = () => {
+  if (currentPage.value < totalPages.value) {
+    switchToPage(currentPage.value + 1);
+  }
+};
+
+const switchToPage = (page: number) => {
+  if (page < 1 || page > totalPages.value) {
+    return;
+  }
+  
+  // 切换页码前重置状态（但不重置缩放，等图片加载后再设置）
+  rotation.value = 0;
+  position.value = { x: 0, y: 0 };
+  isUserZooming.value = false;
+  
+  // 重置文本选择状态和批注状态
+  showAnnotationPopup.value = false;
+  currentAnnotationBlock.value = null;
+  annotationInput.value = '';
+  activeBlockDiv.value = null;
+  isHighlighted.value = false;
+  
+  // 先更新页码，这样图片会立即切换
+  currentPage.value = page;
+  
+  // 触发页码变化事件
+  emit('page-change', page, totalPages.value);
+  
+  // 确保滚动位置在顶部（在滚动翻页时已经设置，这里作为保险）
+  if (containerRef.value) {
+    containerRef.value.scrollTop = 0;
+  }
+  
+  // 等待图片加载后重新渲染文本图层和自适应宽度
+  nextTick(() => {
+    if (imageRef.value && imageRef.value.complete) {
+      // 如果启用自适应宽度，重新计算缩放比例
+      if (props.autoFitWidth) {
+        nextTick(() => {
+          setTimeout(() => {
+            const autoScale = calculateAutoFitScale();
+            if (autoScale !== 1 && autoScale > 0) {
+              scale.value = autoScale;
+              initialAutoFitScale.value = autoScale; // 更新初始自适应缩放比例
+            }
+          }, 50);
+        });
+      }
+      renderTextLayer();
+    }
+  });
 };
 
 const reset = () => {
   rotation.value = 0;
-  scale.value = 1;
+  
+  // 如果启用自适应宽度且有初始缩放比例，恢复到初始缩放比例
+  if (props.autoFitWidth && initialAutoFitScale.value !== null) {
+    scale.value = initialAutoFitScale.value;
+    isUserZooming.value = false;
+  } else {
+    scale.value = 1;
+  }
+  
   position.value = { x: 0, y: 0 };
   
-  // 重置文本选择状态
-  showCopyButton.value = false;
-  selectedText.value = '';
+  // 重置文本选择状态和批注状态
+  showAnnotationPopup.value = false;
+  currentAnnotationBlock.value = null;
+  annotationInput.value = '';
   activeBlockDiv.value = null;
   isHighlighted.value = false;
 };
@@ -351,6 +740,38 @@ const original = () => {
   emit('original');
 };
 
+// 计算自适应宽度的缩放比例
+const calculateAutoFitScale = () => {
+  if (!props.autoFitWidth || !containerRef.value || imageSize.value.width === 0) {
+    return 1;
+  }
+
+  const containerRect = containerRef.value.getBoundingClientRect();
+  // 使用容器的完整宽度，但预留足够空间避免因浏览器渲染误差导致横向滚动条
+  // 预留 4px 以确保不会因为任何渲染误差导致滚动条
+  const containerWidth = containerRect.width - 4;
+  
+  if (containerWidth <= 0) {
+    return 1;
+  }
+
+  // 考虑旋转角度，如果旋转了90度或270度，需要交换宽高
+  const normalizedRotation = ((rotation.value % 360) + 360) % 360;
+  const isRotated = normalizedRotation === 90 || normalizedRotation === 270;
+  
+  const imageWidth = isRotated ? imageSize.value.height : imageSize.value.width;
+  
+  if (imageWidth <= 0) {
+    return 1;
+  }
+  
+  // 计算缩放比例，使图片宽度完全适应容器宽度
+  const calculatedScale = containerWidth / imageWidth;
+  
+  // 确保缩放比例在允许的范围内
+  return Math.max(props.minScale, Math.min(props.maxScale, calculatedScale));
+};
+
 // 图片加载完成处理
 const onImageLoad = (event: Event) => {
   const img = event.target as HTMLImageElement;
@@ -358,9 +779,32 @@ const onImageLoad = (event: Event) => {
     width: img.naturalWidth,
     height: img.naturalHeight
   };
+  
+  // 如果启用自适应宽度，计算并设置初始缩放比例
+  if (props.autoFitWidth) {
+    // 重置用户缩放标记
+    isUserZooming.value = false;
+    
+    // 使用双重 nextTick 确保容器尺寸已确定
+    nextTick(() => {
+      nextTick(() => {
+        // 添加小延迟确保容器完全渲染
+        setTimeout(() => {
+          const autoScale = calculateAutoFitScale();
+          if (autoScale !== 1 && autoScale > 0) {
+            scale.value = autoScale;
+            initialAutoFitScale.value = autoScale; // 记录初始自适应缩放比例
+          }
+        }, 50);
+      });
+    });
+  }
+  
   emit('load', {
     width: img.naturalWidth,
-    height: img.naturalHeight
+    height: img.naturalHeight,
+    page: currentPage.value,
+    totalPages: totalPages.value
   });
   
   // 图片加载完成后，渲染文本图层
@@ -369,6 +813,62 @@ const onImageLoad = (event: Event) => {
   });
 };
 
+/**
+ * 准确计算文本的字体大小
+ * 使用二分查找算法，通过 Canvas 测量文本宽度来找到最合适的字体大小
+ *
+ * @param text 文本内容
+ * @param targetWidth 目标宽度（OCR 边界框的宽度）
+ * @param targetHeight 目标高度（OCR 边界框的高度）
+ * @returns 计算出的字体大小（px）
+ */
+const calculateFontSize = (
+  text: string,
+  targetWidth: number,
+  targetHeight: number,
+): number => {
+  // 创建一个离屏 Canvas 用于测量文本
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+
+  if (!ctx) {
+    // 如果无法创建 context，使用简单估算
+    return targetHeight * 0.8;
+  }
+
+  // 二分查找的范围：最小字体和最大字体
+  let minSize = 1;
+  let maxSize = targetHeight * 2; // 最大不超过高度的2倍
+  let bestSize = targetHeight * 0.8; // 默认值
+
+  // 二分查找最合适的字体大小（最多迭代20次）
+  for (let i = 0; i < 20; i++) {
+    const midSize = (minSize + maxSize) / 2;
+
+    // 使用系统默认字体测量（通常是 Arial, sans-serif）
+    ctx.font = `${midSize}px Arial, sans-serif`;
+    const metrics = ctx.measureText(text);
+    const measuredWidth = metrics.width;
+
+    // 如果测量宽度接近目标宽度（误差在5%以内），认为找到了
+    if (Math.abs(measuredWidth - targetWidth) / targetWidth < 0.05) {
+      bestSize = midSize;
+      break;
+    }
+
+    // 调整搜索范围
+    if (measuredWidth < targetWidth) {
+      minSize = midSize; // 字体太小，增大下限
+      bestSize = midSize; // 更新最佳值
+    } else {
+      maxSize = midSize; // 字体太大，减小上限
+    }
+  }
+
+  // 限制字体大小在合理范围内（不小于6px，不大于目标高度的1.5倍）
+  return Math.max(6, Math.min(bestSize, targetHeight * 1.5));
+};
+
 /**
  * 渲染文本图层（使用 blocksData 数据）
  */
@@ -380,8 +880,10 @@ const renderTextLayer = () => {
     return;
   }
 
+  console.log('renderTextLayer', currentPageBlocksData.value);
+
   // 如果没有提供分块数据，跳过渲染
-  if (!props.blocksData || props.blocksData.length === 0) {
+  if (!currentPageBlocksData.value || currentPageBlocksData.value.length === 0) {
     textLayer.innerHTML = '';
     return;
   }
@@ -394,21 +896,23 @@ const renderTextLayer = () => {
     // 清空文本图层
     textLayer.innerHTML = '';
 
-    // 使用 blocksData 创建可交互的块
-    props.blocksData.forEach((block, index) => {
-      const { blockLabel, blockContent, blockBbox } = block;
+    // 使用当前页码的 blocksData 创建可交互的块
+    currentPageBlocksData.value.forEach((block, index) => {
+      const { content, bbox } = block;
 
-      // blockBbox 格式: [x1, y1, x2, y2]
-      const [x1, y1, x2, y2] = blockBbox;
+      // bbox 格式: [x1, y1, x2, y2]
+      const [x1, y1, x2, y2] = bbox;
       const width = x2 - x1;
       const height = y2 - y1;
 
+      // 自动计算字体大小
+      const calculatedFontSize = calculateFontSize(content, width, height);
+
       // 创建文本块
       const blockDiv = document.createElement('div');
       blockDiv.className = 'text-block';
-      blockDiv.dataset.text = blockContent;
-      blockDiv.dataset.label = blockLabel;
-      blockDiv.dataset.bbox = JSON.stringify(blockBbox);
+      blockDiv.dataset.text = content;
+      blockDiv.dataset.bbox = JSON.stringify(bbox);
 
       // 设置基础样式
       blockDiv.style.position = 'absolute';
@@ -416,45 +920,72 @@ const renderTextLayer = () => {
       blockDiv.style.top = `${y1}px`;
       blockDiv.style.width = `${width}px`;
       blockDiv.style.height = `${height}px`;
-      blockDiv.style.zIndex = '10';
-      blockDiv.style.cursor = 'pointer';
-      blockDiv.style.borderRadius = '2px';
-      blockDiv.style.transition = 'all 0.2s ease';
-      blockDiv.style.backgroundColor = 'transparent';
-
-      // Hover 和点击事件
-      blockDiv.addEventListener('mouseenter', (e) => {
-        // 取消之前的隐藏定时器
-        if (hideTimer) {
-          clearTimeout(hideTimer);
-          hideTimer = null;
-        }
-
-        // 如果有之前激活的文本块，先恢复其样式
-        if (activeBlockDiv.value && activeBlockDiv.value !== blockDiv) {
-          if (isHighlighted.value) {
-            isHighlighted.value = false;
-          }
-          activeBlockDiv.value.style.backgroundColor = 'transparent';
-          activeBlockDiv.value.style.boxShadow = 'none';
-        }
-
+      blockDiv.style.zIndex = '20'; // 确保文本块在图片上方
+      blockDiv.style.cursor = 'text'; // 改为文本选择光标
+      // 设置文本内容（使用 textContent 而不是 innerHTML，避免 XSS 风险）
+      blockDiv.textContent = content;
+      // 设置文本样式，确保可以选择和显示
+      blockDiv.style.color = 'red'; // 红色文字
+      blockDiv.style.fontSize = `${calculatedFontSize}px`; // 使用计算出的字体大小
+      blockDiv.style.fontFamily = 'Arial, sans-serif'; // 设置明确的字体
+      blockDiv.style.lineHeight = '1.2'; // 设置合适的行高
+      blockDiv.style.whiteSpace = 'pre-wrap'; // 保留换行和空格
+      blockDiv.style.overflow = 'visible'; // 确保文字不被裁剪
+      blockDiv.style.display = 'block'; // 确保是块级元素
+      blockDiv.style.visibility = 'visible'; // 确保可见
+      // 允许文本选择
+      blockDiv.style.userSelect = 'text';
+      blockDiv.style.webkitUserSelect = 'text';
+      blockDiv.style.mozUserSelect = 'text';
+      blockDiv.style.msUserSelect = 'text';
+      // 允许指针事件，但不阻止文本选择
+      blockDiv.style.pointerEvents = 'auto';
+
+      // 右键菜单：显示批注按钮
+      blockDiv.addEventListener('contextmenu', (e) => {
+        e.preventDefault();
         // 设置当前文本块为激活状态
         activeBlockDiv.value = blockDiv;
-        isHighlighted.value = false; // 鼠标悬停时清除定位高亮标志
-
-        // 直接设置 hover 样式
-        blockDiv.style.backgroundColor = 'var(--s-color-brand-primary-transparent-3, rgba(0, 102, 255, .15))';
-        blockDiv.style.boxShadow = '0 0 0 2px rgba(30, 144, 255, 0.6)';
-
-        // 显示复制按钮
-        showCopyButtonForBlock(e, blockDiv);
+        // 显示批注按钮
+        showAnnotationButtonForBlock(e, blockDiv);
       });
 
-      blockDiv.addEventListener('mouseleave', () => {
-        // 延迟隐藏，给用户时间移动到复制按钮
-        hideCopyButtonAndHighlight();
-      });
+      // 检查是否有已有批注，如果有则显示批注标记
+      const existingAnnotation = getAnnotationForBlock(bbox);
+      if (existingAnnotation) {
+        // 添加批注标记样式类
+        blockDiv.classList.add('has-annotation');
+        blockDiv.title = `已有批注: ${existingAnnotation.content}`;
+        // 直接设置样式，确保生效（内联样式优先级高于CSS类）
+        blockDiv.style.backgroundColor = 'rgba(255, 243, 205, 0.5)';
+        blockDiv.style.border = '1px solid rgba(255, 193, 7, 0.7)';
+        blockDiv.style.borderRadius = '3px';
+        blockDiv.style.padding = '1px 3px';
+        blockDiv.style.boxShadow = '0 1px 2px rgba(255, 193, 7, 0.25)';
+        
+        // 创建批注图标标记
+        const annotationMarker = document.createElement('span');
+        annotationMarker.className = 'annotation-marker';
+        annotationMarker.textContent = '📝';
+        annotationMarker.style.position = 'absolute';
+        annotationMarker.style.top = '-6px';
+        annotationMarker.style.right = '-6px';
+        annotationMarker.style.fontSize = '11px';
+        annotationMarker.style.backgroundColor = 'rgba(255, 193, 7, 0.95)';
+        annotationMarker.style.borderRadius = '50%';
+        annotationMarker.style.width = '16px';
+        annotationMarker.style.height = '16px';
+        annotationMarker.style.display = 'flex';
+        annotationMarker.style.alignItems = 'center';
+        annotationMarker.style.justifyContent = 'center';
+        annotationMarker.style.zIndex = '30';
+        annotationMarker.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.25)';
+        annotationMarker.style.lineHeight = '1';
+        blockDiv.appendChild(annotationMarker);
+      } else {
+        // 没有批注时设置为透明背景
+        blockDiv.style.backgroundColor = 'transparent';
+      }
 
       textLayer.appendChild(blockDiv);
     });
@@ -464,92 +995,122 @@ const renderTextLayer = () => {
 };
 
 /**
- * 显示文本块的复制按钮
+ * 获取文本块对应的批注
  */
-const showCopyButtonForBlock = (event: MouseEvent, blockDiv: HTMLElement) => {
-  const text = blockDiv.dataset.text || '';
-  if (!text) return;
+const getAnnotationForBlock = (bbox: [number, number, number, number]): AnnotationInfo | null => {
+  if (!props.annotations || props.annotations.length === 0) {
+    return null;
+  }
+  
+  const tolerance = 2; // 容差
+  return props.annotations.find(annotation => {
+    const [x1, y1, x2, y2] = annotation.blockBbox;
+    return (
+      Math.abs(x1 - bbox[0]) < tolerance &&
+      Math.abs(y1 - bbox[1]) < tolerance &&
+      Math.abs(x2 - bbox[2]) < tolerance &&
+      Math.abs(y2 - bbox[3]) < tolerance &&
+      (annotation.blockPage === undefined || annotation.blockPage === currentPage.value)
+    );
+  }) || null;
+};
 
-  selectedText.value = text;
+/**
+ * 显示文本块的批注按钮
+ */
+const showAnnotationButtonForBlock = (event: MouseEvent, blockDiv: HTMLElement) => {
+  const text = blockDiv.dataset.text || '';
+  const bboxStr = blockDiv.dataset.bbox || '';
+  if (!text || !bboxStr) return;
 
-  const rect = blockDiv.getBoundingClientRect();
-  const containerRect = containerRef.value?.getBoundingClientRect();
+  try {
+    const bbox = JSON.parse(bboxStr) as [number, number, number, number];
+    
+    const rect = blockDiv.getBoundingClientRect();
+    const containerRect = containerRef.value?.getBoundingClientRect();
 
-  if (!containerRect || !containerRef.value) return;
+    if (!containerRect || !containerRef.value) return;
 
-  // 计算复制按钮的位置
-  const buttonCount = 1;
-  const buttonWidth = 80;
-  const popupWidth = buttonCount * buttonWidth + 8;
-  const popupHeight = 38;
-  const spacing = 8;
+    // 计算批注按钮的位置
+    const buttonWidth = 80;
+    const popupWidth = buttonWidth + 8;
+    const popupHeight = 38;
+    const spacing = 8;
 
-  // 计算相对于容器的坐标（考虑滚动）
-  const relativeX = rect.left - containerRect.left + containerRef.value.scrollLeft;
-  const relativeY = rect.top - containerRect.top + containerRef.value.scrollTop;
+    // 计算相对于容器的坐标（考虑滚动）
+    const relativeX = rect.left - containerRect.left + containerRef.value.scrollLeft;
+    const relativeY = rect.top - containerRect.top + containerRef.value.scrollTop;
 
-  // 容器可用空间
-  const containerWidth = containerRef.value.clientWidth;
+    // 容器可用空间
+    const containerWidth = containerRef.value.clientWidth;
 
-  // 计算可用空间
-  const rectBottom = rect.bottom;
-  const rectTop = rect.top;
-  const containerBottom = containerRect.bottom;
-  const containerTop = containerRect.top;
+    // 计算可用空间
+    const rectBottom = rect.bottom;
+    const rectTop = rect.top;
+    const containerBottom = containerRect.bottom;
+    const containerTop = containerRect.top;
 
-  const bottomSpace = containerBottom - rectBottom;
-  const topSpace = rectTop - containerTop;
+    const bottomSpace = containerBottom - rectBottom;
+    const topSpace = rectTop - containerTop;
 
-  const showOnBottom = bottomSpace >= popupHeight + spacing || (bottomSpace > 0 && bottomSpace >= topSpace);
+    const showOnBottom = bottomSpace >= popupHeight + spacing || (bottomSpace > 0 && bottomSpace >= topSpace);
 
-  // 计算最终位置
-  let left: number;
-  let top: number;
+    // 计算最终位置
+    let left: number;
+    let top: number;
 
-  const centerX = relativeX + rect.width / 2;
-  left = centerX - popupWidth / 2;
+    const centerX = relativeX + rect.width / 2;
+    left = centerX - popupWidth / 2;
 
-  if (showOnBottom) {
-    top = relativeY + rect.height + spacing;
-  } else {
-    top = relativeY - popupHeight - spacing;
-  }
+    if (showOnBottom) {
+      top = relativeY + rect.height + spacing;
+    } else {
+      top = relativeY - popupHeight - spacing;
+    }
 
-  // 边界检查
-  const popupTopInViewport = top - containerRef.value.scrollTop + containerRect.top;
-  const popupBottomInViewport = popupTopInViewport + popupHeight;
+    // 边界检查
+    const popupTopInViewport = top - containerRef.value.scrollTop + containerRect.top;
+    const popupBottomInViewport = popupTopInViewport + popupHeight;
 
-  if (popupBottomInViewport > containerBottom - spacing) {
-    top = relativeY - popupHeight - spacing;
-  }
+    if (popupBottomInViewport > containerBottom - spacing) {
+      top = relativeY - popupHeight - spacing;
+    }
 
-  const newPopupTopInViewport = top - containerRef.value.scrollTop + containerRect.top;
-  if (newPopupTopInViewport < containerTop + spacing) {
-    top = relativeY + rect.height + spacing;
-  }
+    const newPopupTopInViewport = top - containerRef.value.scrollTop + containerRect.top;
+    if (newPopupTopInViewport < containerTop + spacing) {
+      top = relativeY + rect.height + spacing;
+    }
 
-  // 确保不超出容器边界
-  if (left + popupWidth > containerWidth - spacing) {
-    left = containerWidth - popupWidth - spacing;
-  }
-  if (left < spacing) {
-    left = spacing;
-  }
+    // 确保不超出容器边界
+    if (left + popupWidth > containerWidth - spacing) {
+      left = containerWidth - popupWidth - spacing;
+    }
+    if (left < spacing) {
+      left = spacing;
+    }
 
-  copyButtonStyle.value = {
-    left: `${left}px`,
-    top: `${top}px`
-  };
+    annotationPopupStyle.value = {
+      left: `${left}px`,
+      top: `${top}px`
+    };
 
-  showCopyButton.value = true;
+    showAnnotationPopup.value = true;
+  } catch (error) {
+    console.error('解析bbox失败:', error);
+  }
 };
 
 /**
- * 隐藏复制按钮并移除文本块高亮
+ * 隐藏批注按钮
  */
-const hideCopyButtonAndHighlight = () => {
+const hideAnnotationButton = () => {
+  // 如果正在输入批注，不自动隐藏
+  if (currentAnnotationBlock.value) {
+    return;
+  }
+  
   hideTimer = setTimeout(() => {
-    showCopyButton.value = false;
+    showAnnotationPopup.value = false;
 
     if (activeBlockDiv.value && !isHighlighted.value) {
       activeBlockDiv.value.style.backgroundColor = 'transparent';
@@ -560,9 +1121,9 @@ const hideCopyButtonAndHighlight = () => {
 };
 
 /**
- * 取消隐藏（鼠标进入复制按钮时调用）
+ * 取消隐藏（鼠标进入批注按钮时调用）
  */
-const cancelHideCopyButton = () => {
+const cancelHideAnnotationButton = () => {
   if (hideTimer) {
     clearTimeout(hideTimer);
     hideTimer = null;
@@ -570,129 +1131,320 @@ const cancelHideCopyButton = () => {
 };
 
 /**
- * 将HTML表格转换为纯文本格式
+ * 打开批注输入框
  */
-const convertHtmlTableToText = (htmlString: string): string => {
-  if (!/<[^>]+>/g.test(htmlString)) {
-    return htmlString;
+const openAnnotationInput = (e?: Event) => {
+  // 阻止事件冒泡，避免触发 handleMouseUp
+  if (e) {
+    e.stopPropagation();
   }
-
-  try {
-    const tempDiv = document.createElement('div');
-    tempDiv.innerHTML = htmlString;
-
-    const tables = tempDiv.querySelectorAll('table');
-
-    if (tables.length === 0) {
-      return tempDiv.textContent || htmlString;
+  
+  // 获取选中的文本
+  const selection = window.getSelection();
+  let selectedText = '';
+  
+  if (selection && selection.toString().trim().length > 0) {
+    selectedText = selection.toString().trim();
+  } else if (activeBlockDiv.value) {
+    selectedText = activeBlockDiv.value.dataset.text || '';
+  }
+  
+  if (!selectedText && !activeBlockDiv.value) return;
+  
+  // 如果有激活的文本块，使用文本块的 bbox
+  let bbox: [number, number, number, number] | null = null;
+  if (activeBlockDiv.value) {
+    const bboxStr = activeBlockDiv.value.dataset.bbox || '';
+    try {
+      bbox = JSON.parse(bboxStr) as [number, number, number, number];
+    } catch (error) {
+      console.error('解析 bbox 失败:', error);
     }
-
-    let result = '';
-
-    tables.forEach((table, tableIndex) => {
-      if (tableIndex > 0) {
-        result += '\n\n';
-      }
-
-      const rows = table.querySelectorAll('tr');
-
-      rows.forEach((row) => {
-        const cells = row.querySelectorAll('td, th');
-        const cellTexts: string[] = [];
-
-        cells.forEach((cell) => {
-          const text = (cell.textContent || '').trim();
-          cellTexts.push(text);
-        });
-
-        if (cellTexts.length > 0) {
-          result += `| ${cellTexts.join(' | ')} |\n`;
-        }
-      });
-    });
-
-    return result.trim();
-  } catch (error) {
-    console.error('HTML表格转换失败:', error);
-    return htmlString.replace(/<[^>]+>/g, '');
   }
+  
+  // 如果没有 bbox，尝试从选中文本的位置计算
+  if (!bbox && selection && selection.rangeCount > 0) {
+    const range = selection.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+    const containerRect = containerRef.value?.getBoundingClientRect();
+    
+    if (containerRect && containerRef.value) {
+      const relativeX = rect.left - containerRect.left + containerRef.value.scrollLeft;
+      const relativeY = rect.top - containerRect.top + containerRef.value.scrollTop;
+      bbox = [
+        relativeX,
+        relativeY,
+        relativeX + rect.width,
+        relativeY + rect.height
+      ];
+    }
+  }
+  
+  if (!bbox) {
+    Message.warning('无法确定文本位置');
+    return;
+  }
+  
+  // 检查是否已有批注
+  const existingAnnotation = getAnnotationForBlock(bbox);
+  if (existingAnnotation) {
+    annotationInput.value = existingAnnotation.content;
+  } else {
+    annotationInput.value = '';
+  }
+  
+  currentAnnotationBlock.value = {
+    bbox,
+    content: selectedText
+  };
+  
+  // 确保弹窗显示
+  showAnnotationPopup.value = true;
+  
+  // 重新计算弹窗位置（输入框更大）
+  nextTick(() => {
+    adjustAnnotationPopupPosition();
+  });
 };
 
 /**
- * 复制选中的文本
+ * 调整批注输入弹窗位置
  */
-const copySelectedText = async () => {
-  try {
-    const textToCopy = convertHtmlTableToText(selectedText.value);
-
-    if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
-      try {
-        await navigator.clipboard.writeText(textToCopy);
-      } catch (clipboardError) {
-        console.warn('Clipboard API 失败，使用降级方案:', clipboardError);
-        fallbackCopyText(textToCopy);
-      }
+const adjustAnnotationPopupPosition = () => {
+  const containerRect = containerRef.value?.getBoundingClientRect();
+  const popup = annotationPopupRef.value;
+  
+  if (!containerRect || !containerRef.value) {
+    return;
+  }
+  
+  const popupWidth = popup?.getBoundingClientRect().width || 320; // 默认宽度
+  const popupHeight = popup?.getBoundingClientRect().height || 200; // 默认高度
+  const spacing = 4; // 减少间距，让弹窗更靠近文字
+  
+  // 优先使用文本块位置（和批注按钮位置计算逻辑一致）
+  let left: number;
+  let top: number;
+  
+  if (activeBlockDiv.value) {
+    // 使用文本块位置，和批注按钮使用相同的计算逻辑
+    const rect = activeBlockDiv.value.getBoundingClientRect();
+    const relativeX = rect.left - containerRect.left + containerRef.value.scrollLeft;
+    const relativeY = rect.top - containerRect.top + containerRef.value.scrollTop;
+    
+    // 计算可用空间
+    const rectBottom = rect.bottom;
+    const rectTop = rect.top;
+    const containerBottom = containerRect.bottom;
+    const containerTop = containerRect.top;
+    
+    const bottomSpace = containerBottom - rectBottom;
+    const topSpace = rectTop - containerTop;
+    
+    // 判断弹窗显示在文字下方还是上方
+    const showOnBottom = bottomSpace >= popupHeight + spacing || (bottomSpace > 0 && bottomSpace >= topSpace);
+    
+    // 计算位置（和批注按钮位置计算一致）
+    const centerX = relativeX + rect.width / 2;
+    left = centerX - popupWidth / 2;
+    
+    if (showOnBottom) {
+      top = relativeY + rect.height + spacing;
     } else {
-      fallbackCopyText(textToCopy);
+      top = relativeY - popupHeight - spacing;
     }
-
-    showCopyButton.value = false;
-
-    if (activeBlockDiv.value && !isHighlighted.value) {
-      activeBlockDiv.value.style.backgroundColor = 'transparent';
-      activeBlockDiv.value.style.boxShadow = 'none';
-      activeBlockDiv.value = null;
+    
+    // 边界检查
+    const popupTopInViewport = top - containerRef.value.scrollTop + containerRect.top;
+    const popupBottomInViewport = popupTopInViewport + popupHeight;
+    
+    if (popupBottomInViewport > containerBottom - spacing) {
+      top = relativeY - popupHeight - spacing;
     }
-
-    window.getSelection()?.removeAllRanges();
-  } catch (error) {
-    console.error('复制失败:', error);
-    Message.error('复制失败，请手动选择并复制文本');
+    
+    const newPopupTopInViewport = top - containerRef.value.scrollTop + containerRect.top;
+    if (newPopupTopInViewport < containerTop + spacing) {
+      top = relativeY + rect.height + spacing;
+    }
+  } else {
+    // 如果没有文本块，使用当前按钮位置（作为后备方案）
+    const currentStyle = annotationPopupStyle.value;
+    if (currentStyle && currentStyle.left && currentStyle.top) {
+      left = parseFloat(currentStyle.left.toString().replace('px', ''));
+      top = parseFloat(currentStyle.top.toString().replace('px', ''));
+    } else {
+      return;
+    }
+  }
+  
+  // 确保不超出容器边界
+  const containerWidth = containerRef.value.clientWidth;
+  if (left + popupWidth > containerWidth - spacing) {
+    left = containerWidth - popupWidth - spacing;
   }
+  if (left < spacing) {
+    left = spacing;
+  }
+  
+  annotationPopupStyle.value = {
+    left: `${left}px`,
+    top: `${top}px`
+  };
 };
 
 /**
- * 降级复制方案
+ * 关闭批注输入框
  */
-const fallbackCopyText = (text: string) => {
-  const textarea = document.createElement('textarea');
-  textarea.value = text;
-  textarea.style.position = 'fixed';
-  textarea.style.top = '-9999px';
-  textarea.style.left = '-9999px';
-  textarea.style.opacity = '0';
-  textarea.style.pointerEvents = 'none';
+const closeAnnotationInput = () => {
+  currentAnnotationBlock.value = null;
+  annotationInput.value = '';
+  showAnnotationPopup.value = false;
+};
 
-  document.body.appendChild(textarea);
+/**
+ * 处理批注弹窗鼠标离开事件
+ */
+const handleAnnotationPopupLeave = (e: MouseEvent) => {
+  // 检查鼠标是否移动到弹窗内部的其他元素
+  const relatedTarget = e.relatedTarget as HTMLElement;
+  if (relatedTarget && annotationPopupRef.value?.contains(relatedTarget)) {
+    return;
+  }
+  
+  // 延迟关闭，给用户时间操作
+  hideTimer = setTimeout(() => {
+    closeAnnotationInput();
+  }, 200);
+};
 
-  try {
-    textarea.focus();
-    textarea.select();
-    textarea.setSelectionRange(0, textarea.value.length);
-    const successful = document.execCommand('copy');
-    if (!successful) {
-      throw new Error('execCommand("copy") 返回 false');
-    }
-  } finally {
-    document.body.removeChild(textarea);
+/**
+ * 保存批注
+ */
+const saveAnnotation = () => {
+  if (!currentAnnotationBlock.value || !annotationInput.value.trim()) {
+    return;
+  }
+  
+  const { bbox, content } = currentAnnotationBlock.value;
+  const annotationContent = annotationInput.value.trim();
+  
+  // 检查是否已有批注
+  const existingAnnotation = getAnnotationForBlock(bbox);
+  
+  const annotation: AnnotationInfo = {
+    id: existingAnnotation?.id || `annotation_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+    blockBbox: bbox,
+    blockContent: content,
+    blockPage: currentPage.value,
+    content: annotationContent,
+    createTime: existingAnnotation?.createTime || Date.now()
+  };
+  
+  if (existingAnnotation) {
+    // 更新已有批注
+    emit('annotation-update', annotation);
+    Message.success('批注已更新');
+  } else {
+    // 添加新批注
+    emit('annotation-add', annotation);
+    Message.success('批注已添加');
   }
+  
+  // 关闭输入框
+  closeAnnotationInput();
+  
+  // 重新渲染文本图层以显示批注标记
+  nextTick(() => {
+    renderTextLayer();
+  });
 };
 
 /**
- * 处理滚动事件（隐藏复制按钮和文本块高亮）
+ * 处理滚动事件（隐藏批注按钮和文本块高亮，以及滚动翻页）
  */
-const handleScroll = () => {
+const handleScroll = (e: Event) => {
   if (hideTimer) {
     clearTimeout(hideTimer);
   }
 
-  showCopyButton.value = false;
-
-  if (activeBlockDiv.value && !isHighlighted.value) {
-    activeBlockDiv.value.style.backgroundColor = 'transparent';
-    activeBlockDiv.value.style.boxShadow = 'none';
+  // 如果正在输入批注，不关闭
+  if (!currentAnnotationBlock.value) {
+    showAnnotationPopup.value = false;
     activeBlockDiv.value = null;
   }
+  
+  // 在自适应宽度模式下，滚动操作不应该改变缩放比例
+  // 如果缩放比例被意外改变，恢复它
+  if (props.autoFitWidth && 
+      !isUserZooming.value && 
+      initialAutoFitScale.value !== null &&
+      Math.abs(scale.value - initialAutoFitScale.value) > 0.01) {
+    scale.value = initialAutoFitScale.value;
+  }
+  
+  // 滚动翻页功能
+  if (props.enableScrollPaging && totalPages.value > 1 && !isScrollPaging.value) {
+    handleScrollPaging(e);
+  }
+};
+
+/**
+ * 处理滚动翻页
+ */
+const handleScrollPaging = (e: Event) => {
+  const container = e.target as HTMLElement;
+  if (!container) return;
+  
+  // 如果正在翻页中，直接返回
+  if (isScrollPaging.value) {
+    return;
+  }
+  
+  // 清除之前的定时器
+  if (scrollPagingTimer) {
+    clearTimeout(scrollPagingTimer);
+  }
+  
+  // 使用防抖，避免频繁触发（增加延迟时间减少卡顿）
+  scrollPagingTimer = setTimeout(() => {
+    // 再次检查是否正在翻页
+    if (isScrollPaging.value) {
+      return;
+    }
+    
+    const scrollTop = container.scrollTop;
+    const scrollHeight = container.scrollHeight;
+    const clientHeight = container.clientHeight;
+    
+    // 滚动到底部（留 100px 的缓冲区，避免误触发）
+    if (scrollTop + clientHeight >= scrollHeight - 100) {
+      if (currentPage.value < totalPages.value) {
+        isScrollPaging.value = true;
+        // 先重置滚动位置，避免看到下一页的开头
+        container.scrollTop = 0;
+        // 然后切换页面
+        goToNextPage();
+        // 延迟解锁，确保页面切换完成
+        setTimeout(() => {
+          isScrollPaging.value = false;
+        }, 300);
+      }
+    }
+    // 滚动到顶部（留 100px 的缓冲区）
+    else if (scrollTop <= 100) {
+      if (currentPage.value > 1) {
+        isScrollPaging.value = true;
+        // 先重置滚动位置，避免看到上一页的开头
+        container.scrollTop = 0;
+        // 然后切换页面
+        goToPreviousPage();
+        // 延迟解锁，确保页面切换完成
+        setTimeout(() => {
+          isScrollPaging.value = false;
+        }, 300);
+      }
+    }
+  }, 200); // 增加防抖时间到 200ms，减少卡顿
 };
 
 /**
@@ -812,10 +1564,7 @@ const jumpToPosition = (
       if (success) {
         // 高亮成功，触发事件
         if (emitEvent) {
-          const matchedElement = activeBlockDiv.value;
-          const label = matchedElement?.dataset.label || '';
-          const type = label === 'seal' ? 'seal' : 'block';
-          emit('position-jump', bbox, type);
+          emit('position-jump', bbox, 'block');
         }
       } else if (retryCount < maxRetries) {
         retryCount++;
@@ -842,6 +1591,44 @@ watch(
   { deep: true, immediate: false }
 );
 
+/**
+ * 监听 annotations 变化，重新渲染文本图层以显示批注标记
+ */
+watch(
+  () => props.annotations,
+  () => {
+    nextTick(() => {
+      renderTextLayer();
+    });
+  },
+  { deep: true }
+);
+
+/**
+ * 监听当前页码变化，重新渲染文本图层
+ */
+watch(
+  () => currentPage.value,
+  () => {
+    nextTick(() => {
+      renderTextLayer();
+    });
+  }
+);
+
+/**
+ * 监听当前页码的blocksData变化，重新渲染文本图层
+ */
+watch(
+  () => currentPageBlocksData.value,
+  () => {
+    nextTick(() => {
+      renderTextLayer();
+    });
+  },
+  { deep: true }
+);
+
 /**
  * 监听图片尺寸变化，重新渲染文本图层
  */
@@ -869,9 +1656,16 @@ watch([scale, rotation, position], () => {
  * 组件挂载时的初始化
  */
 onMounted(() => {
-  // 如果图片已经加载完成，立即渲染文本图层
+  // 如果图片已经加载完成，立即渲染文本图层和自适应宽度
   if (imageRef.value && imageRef.value.complete) {
     nextTick(() => {
+      // 如果启用自适应宽度，计算并设置初始缩放比例
+      if (props.autoFitWidth && imageSize.value.width > 0) {
+        const autoScale = calculateAutoFitScale();
+        if (autoScale !== 1) {
+          scale.value = autoScale;
+        }
+      }
       renderTextLayer();
     });
   }
@@ -885,11 +1679,18 @@ onBeforeUnmount(() => {
     clearTimeout(hideTimer);
     hideTimer = null;
   }
+  if (scrollPagingTimer) {
+    clearTimeout(scrollPagingTimer);
+    scrollPagingTimer = null;
+  }
 });
 
 defineExpose({
   reset,
-  jumpToPosition // 暴露定位方法给父组件
+  jumpToPosition, // 暴露定位方法给父组件
+  goToPage: switchToPage, // 暴露翻页方法给父组件
+  getCurrentPage: () => currentPage.value, // 获取当前页码
+  getTotalPages: () => totalPages.value // 获取总页数
 });
 </script>
 
@@ -903,48 +1704,57 @@ defineExpose({
   width: 100%;
   height: 100%;
   overflow: auto;
-  
-  // 自定义滚动条
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #d1d5db;
-    border-radius: 3px;
-
-    &:hover {
-      background-color: rgb(0 0 0 / 30%);
-    }
-  }
+}
 
-  &::-webkit-scrollbar-track {
-    background-color: rgb(243 244 246);
-  }
+// 页码信息样式
+.page-info {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  font-size: 12px;
+  color: #1d2129;
+  white-space: nowrap;
 }
 
 // 图片包装器容器（用于居中显示和提供滚动空间）
 .image-wrapper-container {
   display: flex;
-  align-items: center;
+  align-items: flex-start; // 改为顶部对齐，避免垂直居中产生间隙
   justify-content: center;
   width: 100%;
   min-height: 100%;
-  padding: 20px; // 添加内边距，确保放大后的图片有滚动空间
   box-sizing: border-box;
   // 确保容器能够正确滚动
   position: relative;
+  // 移除可能的默认间隙
+  line-height: 0;
+  font-size: 0;
+  // 移除可能的内边距和外边距
+  margin: 0;
+  padding: 0;
 }
 
 // 图片包装器（包含图片和文本图层）
 .image-wrapper {
   position: relative;
-  display: inline-block;
-  transform-origin: center center;
+  display: block; // 改用 block 避免 inline-block 的间隙问题
+  transform-origin: top center; // 从顶部中心缩放，避免顶部产生间隙
   flex-shrink: 0;
   // 确保包装器能够正确占据空间，支持滚动
   max-width: none;
   max-height: none;
+  // 移除可能的默认间隙
+  margin: 0;
+  padding: 0;
+  line-height: 0;
+  
+  img {
+    display: block; // 移除图片底部默认间隙
+    margin: 0;
+    padding: 0;
+    position: relative; // 确保图片在文本下方
+    z-index: 1; // 图片的 z-index 低于文本
+  }
 }
 
 // 文本图层样式
@@ -955,10 +1765,38 @@ defineExpose({
   width: 100%;
   height: 100%;
   pointer-events: auto; // 允许鼠标事件
+  z-index: 20; // 确保文本图层在图片上方
 }
 
-// 复制按钮浮层
-.copy-button-popup {
+// 文本块样式
+.text-block {
+  // 确保文本可以选中
+  user-select: text !important;
+  -webkit-user-select: text !important;
+  -moz-user-select: text !important;
+  -ms-user-select: text !important;
+  // 红色文字，确保可见
+  color: red !important;
+  // 设置明确的字体大小和样式
+  font-size: 14px !important;
+  font-family: Arial, sans-serif !important;
+  line-height: 1.2 !important;
+  // 确保文本可以复制
+  cursor: text !important;
+  // 确保文本可以交互
+  pointer-events: auto !important;
+  // 确保文本可以选中和复制
+  -webkit-touch-callout: default;
+  -webkit-tap-highlight-color: transparent;
+  // 确保文字不被裁剪
+  overflow: visible !important;
+  // 确保可见
+  visibility: visible !important;
+  display: block !important;
+}
+
+// 批注按钮浮层
+.annotation-button-popup {
   position: absolute;
   z-index: 1000;
   display: flex;
@@ -971,7 +1809,7 @@ defineExpose({
   box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
   animation: fade-in 0.2s ease;
   
-  .copy-button-popup-action {
+  .annotation-button-action {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -984,11 +1822,115 @@ defineExpose({
     border-radius: 4px;
   }
 
-  .copy-button-popup-action:hover {
+  .annotation-button-action:hover {
     background-color: #f0f0f0;
   }
 }
 
+// 批注输入弹窗
+.annotation-input-popup {
+  position: absolute;
+  z-index: 1001;
+  width: 320px;
+  pointer-events: auto;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
+  animation: fade-in 0.2s ease;
+  overflow: hidden;
+  
+  .annotation-input-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid #e5e7eb;
+    
+    .annotation-input-title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #1d2129;
+    }
+    
+    .annotation-close-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      border-radius: 4px;
+      color: #86909c;
+      transition: all 0.2s;
+      
+      &:hover {
+        background-color: #f0f0f0;
+        color: #1d2129;
+      }
+    }
+  }
+  
+  .annotation-input-content {
+    padding: 12px 16px;
+    
+    .annotation-textarea {
+      width: 100%;
+    }
+  }
+  
+  .annotation-input-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 12px 16px;
+    border-top: 1px solid #e5e7eb;
+  }
+}
+
+// 有批注的文本块样式
+.text-block.has-annotation {
+  position: relative;
+  // 添加背景色区分
+  background-color: rgba(255, 243, 205, 0.5) !important; // 浅黄色背景
+  // 添加边框
+  border: 1px solid rgba(255, 193, 7, 0.7) !important; // 黄色边框
+  border-radius: 3px;
+  // 添加内边距，让文字不贴边
+  padding: 1px 3px;
+  // 添加阴影效果
+  box-shadow: 0 1px 2px rgba(255, 193, 7, 0.25) !important;
+  
+  // 鼠标悬停时加深效果
+  &:hover {
+    background-color: rgba(255, 243, 205, 0.7) !important;
+    border-color: rgba(255, 193, 7, 0.9) !important;
+    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.35) !important;
+  }
+  
+  // 使用伪元素添加批注标记图标
+  &::before {
+    content: '📝';
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    font-size: 11px;
+    background-color: rgba(255, 193, 7, 0.95);
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 30;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+    line-height: 1;
+  }
+}
+
 // 淡入动画
 @keyframes fade-in {
   from {