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

package/preview/ImagePreview.vue

@@ -10,30 +10,20 @@
         <slot name="left-top"></slot>
       </div>
       <div class="toolbar-group">
-        <span class="scale-text">
-          {{ Math.round(scale * 100) }}%
-        </span>
+        <span class="scale-text"> {{ Math.round(scale * 100) }}% </span>
         <div class="toolbar-divider"></div>
-        <ATooltip mini position="bottom" content="重置">
-          <AButton
-            size="small"
-            type="outline"
-            @click="reset"
-          >
-            <RefreshCcw :size="16" />
-          </AButton>
-        </ATooltip>
         <ATooltip
-          v-if="originalId"
+          v-if="showResetButton"
           mini
           position="bottom"
-          content="查看原图"
+          content="重置"
         >
-          <AButton
-            size="small"
-            type="outline"
-            @click="original"
-          >
+          <AButton size="small" type="outline" @click="reset">
+            <RefreshCcw :size="16" />
+          </AButton>
+        </ATooltip>
+        <ATooltip v-if="originalId" mini position="bottom" content="查看原图">
+          <AButton size="small" type="outline" @click="original">
             <Maximize2 :size="16" />
           </AButton>
         </ATooltip>
@@ -58,16 +48,12 @@
           </AButton>
         </ATooltip>
         <ATooltip
-          v-if="isDownload"
+          v-if="showDownloadButton"
           mini
           position="bottom"
           content="下载"
         >
-          <AButton
-            size="small"
-            type="outline"
-            @click="emit('download')"
-          >
+          <AButton size="small" type="outline" @click="emit('download')">
             <Download :size="16" />
           </AButton>
         </ATooltip>
@@ -78,11 +64,7 @@
           position="bottom"
           content="向左旋转"
         >
-          <AButton
-            size="small"
-            type="outline"
-            @click="rotateImage('left')"
-          >
+          <AButton size="small" type="outline" @click="rotateImage('left')">
             <RotateCw :size="16" />
           </AButton>
         </ATooltip>
@@ -92,11 +74,7 @@
           position="bottom"
           content="向右旋转"
         >
-          <AButton
-            size="small"
-            type="outline"
-            @click="rotateImage('right')"
-          >
+          <AButton size="small" type="outline" @click="rotateImage('right')">
             <RotateCcw :size="16" />
           </AButton>
         </ATooltip>
@@ -113,13 +91,12 @@
               <ChevronLeft :size="16" />
             </AButton>
           </ATooltip>
-          <span class="page-info">
-            {{ currentPage }} / {{ totalPages }}
-          </span>
+          <span class="page-info"> {{ currentPage }} / {{ totalPages }} </span>
           <ATooltip mini position="bottom" content="下一页">
             <AButton
               size="small"
               type="outline"
+              style="padding-right: 0px;"
               :disabled="currentPage >= totalPages"
               @click="goToNextPage"
             >
@@ -139,38 +116,46 @@
       @mouseleave="stopPan"
       @scroll="handleScroll"
     >
-      <div 
-        class="image-wrapper-container"
-        :style="containerStyle"
-      >
+      <div class="image-wrapper-container" :style="containerStyle">
+        <!-- 渲染所有图片页面 -->
         <div
-          class="image-wrapper"
-          :style="{
-            transform: `translate(${position.x}px, ${position.y}px) rotate(${rotation}deg) scale(${scale})`,
-            transformOrigin: 'top center'
-          }"
+          v-for="(imageUrl, pageIndex) in imageUrls"
+          :key="pageIndex"
+          :data-page-number="pageIndex + 1"
+          class="image-page-container"
         >
-        <img
-          v-if="currentImageUrl"
-          ref="imageRef"
-          :src="currentImageUrl"
-          alt="预览图片"
-          :style="{
-            cursor: isPanning ? 'grabbing' : 'grab',
-            display: 'block',
-            pointerEvents: currentPageBlocksData.value && currentPageBlocksData.value.length > 0 ? 'none' : 'auto'
-        }"
-        @contextmenu.prevent
-        @mousedown="handleImageMouseDown"
-        @load="onImageLoad"
-      />
-        
-        <!-- 文本图层（用于文本块选择和定位） -->
-        <div
-          v-if="currentPageBlocksData && currentPageBlocksData.length > 0"
-          ref="textLayerRef"
-          class="text-layer"
-        ></div>
+          <div
+            class="image-wrapper"
+            :style="{
+              transform: `translate(${position.x}px, ${position.y}px) rotate(${rotation}deg) scale(${scale})`,
+              transformOrigin: 'top center',
+            }"
+          >
+            <img
+              :ref="(el) => setImageRef(el, pageIndex + 1)"
+              :src="imageUrl"
+              :alt="`预览图片 ${pageIndex + 1}`"
+              :style="{
+                cursor: isPanning ? 'grabbing' : 'grab',
+                display: 'block',
+                pointerEvents:
+                  getPageBlocksData(pageIndex + 1) &&
+                  getPageBlocksData(pageIndex + 1).length > 0
+                    ? 'none'
+                    : 'auto',
+              }"
+              @contextmenu.prevent
+              @mousedown="handleImageMouseDown"
+              @load="(e) => onImageLoad(e, pageIndex + 1)"
+            />
+
+            <!-- 文本图层（用于文本块选择和定位） -->
+            <div
+              v-if="getPageBlocksData(pageIndex + 1) && getPageBlocksData(pageIndex + 1).length > 0"
+              :ref="(el) => setTextLayerRef(el, pageIndex + 1)"
+              class="text-layer"
+            ></div>
+          </div>
         </div>
       </div>
 
@@ -221,7 +206,12 @@
           <AButton size="small" type="outline" @click="closeAnnotationInput">
             取消
           </AButton>
-          <AButton size="small" type="primary" @click="saveAnnotation" :disabled="!annotationInput.trim()">
+          <AButton
+            size="small"
+            type="primary"
+            @click="saveAnnotation"
+            :disabled="!annotationInput.trim()"
+          >
             保存
           </AButton>
         </div>
@@ -231,9 +221,35 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, nextTick, onMounted, onBeforeUnmount, computed } from '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';
+import {
+  ref,
+  watch,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+  computed,
+} from "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";
 
 /**
  * 文本块数据结构
@@ -260,71 +276,86 @@ const props = defineProps({
   // 支持单个URL（向后兼容）或URL数组
   url: {
     type: [String, Array] as () => string | string[],
-    required: true
+    required: true,
   },
   minScale: {
     type: Number,
-    default: 0.1
+    default: 0.1,
   },
   maxScale: {
     type: Number,
-    default: 5
+    default: 5,
   },
   clickStep: {
     type: Number,
-    default: 0.25
+    default: 0.25,
   },
   wheelStep: {
     type: Number,
-    default: 0.1
+    default: 0.1,
   },
   originalId: {
     type: String,
-    default: ''
+    default: "",
   },
   isDownload: {
     type: Boolean,
-    default: false
+    default: false,
   },
   blocksData: {
     type: Array as () => BlockInfo[],
-    default: () => []
+    default: () => [],
   },
   enableWheelZoom: {
     type: Boolean,
-    default: true // 默认启用滚轮缩放，保持向后兼容
+    default: true, // 默认启用滚轮缩放，保持向后兼容
   },
   // 批注数据（从外部传入，用于显示已有批注）
   annotations: {
     type: Array as () => AnnotationInfo[],
-    default: () => []
+    default: () => [],
   },
   // 是否在初始加载时自适应宽度
   autoFitWidth: {
     type: Boolean,
-    default: true
+    default: true,
   },
   // 是否启用滚动翻页
   enableScrollPaging: {
     type: Boolean,
-    default: true
+    default: true,
   },
   // 是否显示旋转按钮
   showRotateButtons: {
     type: Boolean,
-    default: true
-  }
+    default: true,
+  },
+  // 是否显示重置按钮
+  showResetButton: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否显示下载按钮
+  showDownloadButton: {
+    type: Boolean,
+    default: true, // 默认不显示，保持向后兼容（isDownload 的默认值）
+  },
 });
 
 const emit = defineEmits<{
-  'original': [];
-  'download': [];
-  '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]; // 删除批注事件
+  original: [];
+  download: [];
+  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数组和当前页码
@@ -340,7 +371,7 @@ const totalPages = computed(() => imageUrls.value.length);
 
 // 当前显示的图片URL
 const currentImageUrl = computed(() => {
-  return imageUrls.value[currentPage.value - 1] || '';
+  return imageUrls.value[currentPage.value - 1] || "";
 });
 
 const rotation = ref(0);
@@ -357,12 +388,42 @@ const isScrollPaging = ref(false); // 标记是否正在进行滚动翻页
 
 // 图片和容器引用
 const containerRef = ref<HTMLElement>();
-const imageRef = ref<HTMLImageElement>();
-const textLayerRef = ref<HTMLElement>();
+const imageRefs = new Map<number, HTMLImageElement>();
+const textLayerRefs = new Map<number, HTMLElement>();
 const annotationButtonRef = ref<HTMLElement>();
 
-// 图片尺寸
-const imageSize = ref({ width: 0, height: 0 });
+// 图片尺寸（存储每页的尺寸）
+const imageSizes = new Map<number, { width: number; height: number }>();
+
+// 设置图片引用
+const setImageRef = (el: any, pageNum: number) => {
+  if (el) {
+    imageRefs.set(pageNum, el);
+  } else {
+    imageRefs.delete(pageNum);
+  }
+};
+
+// 设置文本图层引用
+const setTextLayerRef = (el: any, pageNum: number) => {
+  if (el) {
+    textLayerRefs.set(pageNum, el);
+  } else {
+    textLayerRefs.delete(pageNum);
+  }
+};
+
+// 获取当前页的图片引用（用于兼容旧代码）
+const imageRef = computed(() => imageRefs.get(currentPage.value));
+const textLayerRef = computed(() => textLayerRefs.get(currentPage.value));
+
+// 图片尺寸（用于兼容旧代码，返回当前页的尺寸）
+const imageSize = computed({
+  get: () => imageSizes.get(currentPage.value) || { width: 0, height: 0 },
+  set: (value) => {
+    imageSizes.set(currentPage.value, value);
+  },
+});
 
 // 计算图片放大后的实际尺寸（考虑旋转）
 const scaledImageSize = computed(() => {
@@ -380,7 +441,7 @@ const scaledImageSize = computed(() => {
 
   return {
     width: isRotated ? scaledHeight : scaledWidth,
-    height: isRotated ? scaledWidth : scaledHeight
+    height: isRotated ? scaledWidth : scaledHeight,
   };
 });
 
@@ -392,23 +453,26 @@ const containerStyle = computed(() => {
   // 让容器自适应内容，避免横向滚动条
   if (props.autoFitWidth) {
     return {
-      minWidth: '100%', // 使用 100% 让容器自适应父容器宽度
-      minHeight: height > 0 ? `${height}px` : '100%'
+      minWidth: "100%", // 使用 100% 让容器自适应父容器宽度
+      minHeight: height > 0 ? `${height}px` : "100%",
     };
   }
 
   // 未启用自适应宽度时，使用原始逻辑
   return {
-    minWidth: width > 0 ? `${width}px` : '100%',
-    minHeight: height > 0 ? `${height}px` : '100%'
+    minWidth: width > 0 ? `${width}px` : "100%",
+    minHeight: height > 0 ? `${height}px` : "100%",
   };
 });
 
 // 批注相关状态
 const showAnnotationPopup = ref(false); // 是否显示批注弹窗
 const annotationPopupStyle = ref<any>({}); // 批注弹窗样式
-const annotationInput = ref(''); // 批注输入内容
-const currentAnnotationBlock = ref<{ bbox: [number, number, number, number]; content: string } | null>(null); // 当前正在添加批注的文本块
+const annotationInput = ref(""); // 批注输入内容
+const currentAnnotationBlock = ref<{
+  bbox: [number, number, number, number];
+  content: string;
+} | null>(null); // 当前正在添加批注的文本块
 const annotationPopupRef = ref<HTMLElement>(); // 批注弹窗引用
 
 // 文本选择相关状态（保留用于兼容）
@@ -421,14 +485,22 @@ const currentPageBlocksData = computed(() => {
     return [];
   }
   // 根据当前页码过滤
-  return props.blocksData.filter(block => block.pageNo === currentPage.value);
+  return props.blocksData.filter((block) => block.pageNo === currentPage.value);
 });
 
+// 获取指定页码的blocksData
+const getPageBlocksData = (pageNo: number) => {
+  if (!props.blocksData || props.blocksData.length === 0) {
+    return [];
+  }
+  return props.blocksData.filter((block) => block.pageNo === pageNo);
+};
+
 // 隐藏定时器
 let hideTimer: any = null;
 
-const rotateImage = direction => {
-  if (direction === 'left') {
+const rotateImage = (direction) => {
+  if (direction === "left") {
     rotation.value = (rotation.value - 90) % 360;
   } else {
     rotation.value = (rotation.value + 90) % 360;
@@ -438,7 +510,7 @@ 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) {
@@ -464,7 +536,7 @@ const handleWheel = (e: WheelEvent) => {
 const startPan = (e: MouseEvent) => {
   // 只在左键点击时启用拖拽
   if (e.button !== 0) return;
-  
+
   // 如果有文本图层数据，默认允许文本选择，不拖拽
   // 只有在按住 Ctrl 或 Meta 键时才允许拖拽
   if (currentPageBlocksData.value && currentPageBlocksData.value.length > 0) {
@@ -478,7 +550,7 @@ const startPan = (e: MouseEvent) => {
       return;
     }
   }
-  
+
   isPanning.value = true;
   lastPosition.value = { x: e.clientX, y: e.clientY };
   e.preventDefault(); // 阻止默认行为，避免与滚动冲突
@@ -492,7 +564,7 @@ const pan = (e: MouseEvent) => {
 
   position.value = {
     x: position.value.x + deltaX,
-    y: position.value.y + deltaY
+    y: position.value.y + deltaY,
   };
 
   lastPosition.value = { x: e.clientX, y: e.clientY };
@@ -501,23 +573,35 @@ 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) {
+  if (
+    props.autoFitWidth &&
+    !isUserZooming.value &&
+    initialAutoFitScale.value !== null &&
+    Math.abs(scale.value - initialAutoFitScale.value) > 0.01
+  ) {
     // 拖拽操作不应该改变缩放比例，如果被改变了，恢复它
     scale.value = initialAutoFitScale.value;
   }
+};
 
+// 处理图片鼠标按下事件（允许文本选择）
+const handleImageMouseDown = (e: MouseEvent) => {
+  // 如果点击的是文本块，不阻止默认行为，允许文本选择
+  const target = e.target as HTMLElement;
+  if (target.closest(".text-block")) {
+    return; // 允许文本选择
+  }
+  // 否则阻止默认行为，允许拖拽
+  e.preventDefault();
 };
 
 // 处理鼠标抬起事件（检测文本选择）
 const handleMouseUp = (e: MouseEvent) => {
   // 先执行停止拖拽的逻辑
   stopPan();
-  
+
   // 延迟检测文本选择，确保选择已完成
   setTimeout(() => {
     checkTextSelection(e);
@@ -530,19 +614,25 @@ 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')) {
+  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 (
+      !target.closest(".text-block") &&
+      !target.closest(".annotation-input-popup")
+    ) {
       // 只有在没有打开批注输入弹窗时才隐藏批注按钮
       if (!currentAnnotationBlock.value) {
         showAnnotationPopup.value = false;
@@ -551,92 +641,100 @@ const checkTextSelection = (e: MouseEvent) => {
     }
     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;
-  
+  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')) {
+    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 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);
-  
+
+  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 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;
+
+  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;
@@ -644,12 +742,12 @@ const checkTextSelection = (e: MouseEvent) => {
   if (left < spacing) {
     left = spacing;
   }
-  
+
   annotationPopupStyle.value = {
     left: `${left}px`,
-    top: `${top}px`
+    top: `${top}px`,
   };
-  
+
   // 显示批注按钮
   showAnnotationPopup.value = true;
 };
@@ -671,53 +769,38 @@ 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 = '';
+  annotationInput.value = "";
   activeBlockDiv.value = null;
   isHighlighted.value = false;
-  
-  // 先更新页码，这样图片会立即切换
+
+  // 更新页码
   currentPage.value = page;
-  
+
   // 触发页码变化事件
-  emit('page-change', page, totalPages.value);
-  
-  // 确保滚动位置在顶部（在滚动翻页时已经设置，这里作为保险）
+  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 pageElement = containerRef.value.querySelector(
+      `[data-page-number="${page}"]`
+    ) as HTMLElement;
+    if (pageElement) {
+      pageElement.scrollIntoView({ behavior: "smooth", block: "start" });
+      // 更新 lastScrollTop，确保滚动方向判断准确
+      nextTick(() => {
+        lastScrollTop = containerRef.value?.scrollTop || 0;
+      });
     }
-  });
+  }
 };
 
 const reset = () => {
   rotation.value = 0;
-  
+
   // 如果启用自适应宽度且有初始缩放比例，恢复到初始缩放比例
   if (props.autoFitWidth && initialAutoFitScale.value !== null) {
     scale.value = initialAutoFitScale.value;
@@ -725,24 +808,28 @@ const reset = () => {
   } else {
     scale.value = 1;
   }
-  
+
   position.value = { x: 0, y: 0 };
-  
+
   // 重置文本选择状态和批注状态
   showAnnotationPopup.value = false;
   currentAnnotationBlock.value = null;
-  annotationInput.value = '';
+  annotationInput.value = "";
   activeBlockDiv.value = null;
   isHighlighted.value = false;
 };
 
 const original = () => {
-  emit('original');
+  emit("original");
 };
 
 // 计算自适应宽度的缩放比例
 const calculateAutoFitScale = () => {
-  if (!props.autoFitWidth || !containerRef.value || imageSize.value.width === 0) {
+  if (
+    !props.autoFitWidth ||
+    !containerRef.value ||
+    imageSize.value.width === 0
+  ) {
     return 1;
   }
 
@@ -750,7 +837,7 @@ const calculateAutoFitScale = () => {
   // 使用容器的完整宽度，但预留足够空间避免因浏览器渲染误差导致横向滚动条
   // 预留 4px 以确保不会因为任何渲染误差导致滚动条
   const containerWidth = containerRect.width - 4;
-  
+
   if (containerWidth <= 0) {
     return 1;
   }
@@ -758,33 +845,35 @@ const calculateAutoFitScale = () => {
   // 考虑旋转角度，如果旋转了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 onImageLoad = (event: Event, pageNum: number) => {
   const img = event.target as HTMLImageElement;
-  imageSize.value = {
-    width: img.naturalWidth,
-    height: img.naturalHeight
-  };
   
-  // 如果启用自适应宽度，计算并设置初始缩放比例
-  if (props.autoFitWidth) {
+  // 存储该页的图片尺寸
+  imageSizes.set(pageNum, {
+    width: img.naturalWidth,
+    height: img.naturalHeight,
+  });
+
+  // 如果是第一页且启用自适应宽度，计算并设置初始缩放比例
+  if (pageNum === 1 && props.autoFitWidth) {
     // 重置用户缩放标记
     isUserZooming.value = false;
-    
+
     // 使用双重 nextTick 确保容器尺寸已确定
     nextTick(() => {
       nextTick(() => {
@@ -799,17 +888,17 @@ const onImageLoad = (event: Event) => {
       });
     });
   }
-  
-  emit('load', {
+
+  emit("load", {
     width: img.naturalWidth,
     height: img.naturalHeight,
-    page: currentPage.value,
-    totalPages: totalPages.value
+    page: pageNum,
+    totalPages: totalPages.value,
   });
-  
-  // 图片加载完成后，渲染文本图层
+
+  // 图片加载完成后，渲染该页的文本图层
   nextTick(() => {
-    renderTextLayer();
+    renderTextLayer(pageNum);
   });
 };
 
@@ -825,7 +914,7 @@ const onImageLoad = (event: Event) => {
 const calculateFontSize = (
   text: string,
   targetWidth: number,
-  targetHeight: number,
+  targetHeight: number
 ): number => {
   // 创建一个离屏 Canvas 用于测量文本
   const canvas = document.createElement("canvas");
@@ -872,19 +961,21 @@ const calculateFontSize = (
 /**
  * 渲染文本图层（使用 blocksData 数据）
  */
-const renderTextLayer = () => {
-  const textLayer = textLayerRef.value;
-  const image = imageRef.value;
+const renderTextLayer = (pageNum?: number) => {
+  const targetPage = pageNum || currentPage.value;
+  const textLayer = textLayerRefs.get(targetPage);
+  const image = imageRefs.get(targetPage);
 
   if (!textLayer || !image) {
     return;
   }
 
-  console.log('renderTextLayer', currentPageBlocksData.value);
+  const pageBlocksData = getPageBlocksData(targetPage);
+  console.log("renderTextLayer", targetPage, pageBlocksData);
 
   // 如果没有提供分块数据，跳过渲染
-  if (!currentPageBlocksData.value || currentPageBlocksData.value.length === 0) {
-    textLayer.innerHTML = '';
+  if (!pageBlocksData || pageBlocksData.length === 0) {
+    textLayer.innerHTML = "";
     return;
   }
 
@@ -894,10 +985,10 @@ const renderTextLayer = () => {
     textLayer.style.height = `${image.naturalHeight}px`;
 
     // 清空文本图层
-    textLayer.innerHTML = '';
+    textLayer.innerHTML = "";
 
-    // 使用当前页码的 blocksData 创建可交互的块
-    currentPageBlocksData.value.forEach((block, index) => {
+    // 使用指定页码的 blocksData 创建可交互的块
+    pageBlocksData.forEach((block, index) => {
       const { content, bbox } = block;
 
       // bbox 格式: [x1, y1, x2, y2]
@@ -909,40 +1000,40 @@ const renderTextLayer = () => {
       const calculatedFontSize = calculateFontSize(content, width, height);
 
       // 创建文本块
-      const blockDiv = document.createElement('div');
-      blockDiv.className = 'text-block';
+      const blockDiv = document.createElement("div");
+      blockDiv.className = "text-block";
       blockDiv.dataset.text = content;
       blockDiv.dataset.bbox = JSON.stringify(bbox);
 
       // 设置基础样式
-      blockDiv.style.position = 'absolute';
+      blockDiv.style.position = "absolute";
       blockDiv.style.left = `${x1}px`;
       blockDiv.style.top = `${y1}px`;
       blockDiv.style.width = `${width}px`;
       blockDiv.style.height = `${height}px`;
-      blockDiv.style.zIndex = '20'; // 确保文本块在图片上方
-      blockDiv.style.cursor = 'text'; // 改为文本选择光标
+      blockDiv.style.zIndex = "20"; // 确保文本块在图片上方
+      blockDiv.style.cursor = "text"; // 改为文本选择光标
       // 设置文本内容（使用 textContent 而不是 innerHTML，避免 XSS 风险）
       blockDiv.textContent = content;
       // 设置文本样式，确保可以选择和显示
-      blockDiv.style.color = 'red'; // 红色文字
+      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.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.userSelect = "text";
+      blockDiv.style.webkitUserSelect = "text";
+      blockDiv.style.mozUserSelect = "text";
+      blockDiv.style.msUserSelect = "text";
       // 允许指针事件，但不阻止文本选择
-      blockDiv.style.pointerEvents = 'auto';
+      blockDiv.style.pointerEvents = "auto";
 
       // 右键菜单：显示批注按钮
-      blockDiv.addEventListener('contextmenu', (e) => {
+      blockDiv.addEventListener("contextmenu", (e) => {
         e.preventDefault();
         // 设置当前文本块为激活状态
         activeBlockDiv.value = blockDiv;
@@ -954,78 +1045,86 @@ const renderTextLayer = () => {
       const existingAnnotation = getAnnotationForBlock(bbox);
       if (existingAnnotation) {
         // 添加批注标记样式类
-        blockDiv.classList.add('has-annotation');
+        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)';
-        
+        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';
+        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';
+        blockDiv.style.backgroundColor = "transparent";
       }
 
       textLayer.appendChild(blockDiv);
     });
   } catch (error) {
-    console.error('❌ 文本图层渲染失败:', error);
+    console.error("❌ 文本图层渲染失败:", error);
   }
 };
 
 /**
  * 获取文本块对应的批注
  */
-const getAnnotationForBlock = (bbox: [number, number, number, number]): AnnotationInfo | null => {
+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;
+  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
+  );
 };
 
 /**
  * 显示文本块的批注按钮
  */
-const showAnnotationButtonForBlock = (event: MouseEvent, blockDiv: HTMLElement) => {
-  const text = blockDiv.dataset.text || '';
-  const bboxStr = blockDiv.dataset.bbox || '';
+const showAnnotationButtonForBlock = (
+  event: MouseEvent,
+  blockDiv: HTMLElement
+) => {
+  const text = blockDiv.dataset.text || "";
+  const bboxStr = blockDiv.dataset.bbox || "";
   if (!text || !bboxStr) return;
 
   try {
     const bbox = JSON.parse(bboxStr) as [number, number, number, number];
-    
+
     const rect = blockDiv.getBoundingClientRect();
     const containerRect = containerRef.value?.getBoundingClientRect();
 
@@ -1038,8 +1137,10 @@ const showAnnotationButtonForBlock = (event: MouseEvent, blockDiv: HTMLElement)
     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;
@@ -1053,7 +1154,9 @@ const showAnnotationButtonForBlock = (event: MouseEvent, blockDiv: HTMLElement)
     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;
@@ -1069,14 +1172,16 @@ const showAnnotationButtonForBlock = (event: MouseEvent, blockDiv: HTMLElement)
     }
 
     // 边界检查
-    const popupTopInViewport = top - containerRef.value.scrollTop + containerRect.top;
+    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;
+    const newPopupTopInViewport =
+      top - containerRef.value.scrollTop + containerRect.top;
     if (newPopupTopInViewport < containerTop + spacing) {
       top = relativeY + rect.height + spacing;
     }
@@ -1091,12 +1196,12 @@ const showAnnotationButtonForBlock = (event: MouseEvent, blockDiv: HTMLElement)
 
     annotationPopupStyle.value = {
       left: `${left}px`,
-      top: `${top}px`
+      top: `${top}px`,
     };
 
     showAnnotationPopup.value = true;
   } catch (error) {
-    console.error('解析bbox失败:', error);
+    console.error("解析bbox失败:", error);
   }
 };
 
@@ -1108,13 +1213,13 @@ const hideAnnotationButton = () => {
   if (currentAnnotationBlock.value) {
     return;
   }
-  
+
   hideTimer = setTimeout(() => {
     showAnnotationPopup.value = false;
 
     if (activeBlockDiv.value && !isHighlighted.value) {
-      activeBlockDiv.value.style.backgroundColor = 'transparent';
-      activeBlockDiv.value.style.boxShadow = 'none';
+      activeBlockDiv.value.style.backgroundColor = "transparent";
+      activeBlockDiv.value.style.boxShadow = "none";
       activeBlockDiv.value = null;
     }
   }, 300);
@@ -1138,69 +1243,71 @@ const openAnnotationInput = (e?: Event) => {
   if (e) {
     e.stopPropagation();
   }
-  
+
   // 获取选中的文本
   const selection = window.getSelection();
-  let selectedText = '';
-  
+  let selectedText = "";
+
   if (selection && selection.toString().trim().length > 0) {
     selectedText = selection.toString().trim();
   } else if (activeBlockDiv.value) {
-    selectedText = activeBlockDiv.value.dataset.text || '';
+    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 || '';
+    const bboxStr = activeBlockDiv.value.dataset.bbox || "";
     try {
       bbox = JSON.parse(bboxStr) as [number, number, number, number];
     } catch (error) {
-      console.error('解析 bbox 失败:', error);
+      console.error("解析 bbox 失败:", error);
     }
   }
-  
+
   // 如果没有 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;
+      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
+        relativeY + rect.height,
       ];
     }
   }
-  
+
   if (!bbox) {
-    Message.warning('无法确定文本位置');
+    Message.warning("无法确定文本位置");
     return;
   }
-  
+
   // 检查是否已有批注
   const existingAnnotation = getAnnotationForBlock(bbox);
   if (existingAnnotation) {
     annotationInput.value = existingAnnotation.content;
   } else {
-    annotationInput.value = '';
+    annotationInput.value = "";
   }
-  
+
   currentAnnotationBlock.value = {
     bbox,
-    content: selectedText
+    content: selectedText,
   };
-  
+
   // 确保弹窗显示
   showAnnotationPopup.value = true;
-  
+
   // 重新计算弹窗位置（输入框更大）
   nextTick(() => {
     adjustAnnotationPopupPosition();
@@ -1213,56 +1320,62 @@ const openAnnotationInput = (e?: Event) => {
 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 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 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 {
       top = relativeY - popupHeight - spacing;
     }
-    
+
     // 边界检查
-    const popupTopInViewport = top - containerRef.value.scrollTop + containerRect.top;
+    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;
+
+    const newPopupTopInViewport =
+      top - containerRef.value.scrollTop + containerRect.top;
     if (newPopupTopInViewport < containerTop + spacing) {
       top = relativeY + rect.height + spacing;
     }
@@ -1270,13 +1383,13 @@ const adjustAnnotationPopupPosition = () => {
     // 如果没有文本块，使用当前按钮位置（作为后备方案）
     const currentStyle = annotationPopupStyle.value;
     if (currentStyle && currentStyle.left && currentStyle.top) {
-      left = parseFloat(currentStyle.left.toString().replace('px', ''));
-      top = parseFloat(currentStyle.top.toString().replace('px', ''));
+      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) {
@@ -1285,10 +1398,10 @@ const adjustAnnotationPopupPosition = () => {
   if (left < spacing) {
     left = spacing;
   }
-  
+
   annotationPopupStyle.value = {
     left: `${left}px`,
-    top: `${top}px`
+    top: `${top}px`,
   };
 };
 
@@ -1297,7 +1410,7 @@ const adjustAnnotationPopupPosition = () => {
  */
 const closeAnnotationInput = () => {
   currentAnnotationBlock.value = null;
-  annotationInput.value = '';
+  annotationInput.value = "";
   showAnnotationPopup.value = false;
 };
 
@@ -1310,7 +1423,7 @@ const handleAnnotationPopupLeave = (e: MouseEvent) => {
   if (relatedTarget && annotationPopupRef.value?.contains(relatedTarget)) {
     return;
   }
-  
+
   // 延迟关闭，给用户时间操作
   hideTimer = setTimeout(() => {
     closeAnnotationInput();
@@ -1324,35 +1437,37 @@ 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)}`,
+    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()
+    createTime: existingAnnotation?.createTime || Date.now(),
   };
-  
+
   if (existingAnnotation) {
     // 更新已有批注
-    emit('annotation-update', annotation);
-    Message.success('批注已更新');
+    emit("annotation-update", annotation);
+    Message.success("批注已更新");
   } else {
     // 添加新批注
-    emit('annotation-add', annotation);
-    Message.success('批注已添加');
+    emit("annotation-add", annotation);
+    Message.success("批注已添加");
   }
-  
+
   // 关闭输入框
   closeAnnotationInput();
-  
+
   // 重新渲染文本图层以显示批注标记
   nextTick(() => {
     renderTextLayer();
@@ -1372,85 +1487,134 @@ const handleScroll = (e: Event) => {
     showAnnotationPopup.value = false;
     activeBlockDiv.value = null;
   }
-  
+
   // 在自适应宽度模式下，滚动操作不应该改变缩放比例
   // 如果缩放比例被意外改变，恢复它
-  if (props.autoFitWidth && 
-      !isUserZooming.value && 
-      initialAutoFitScale.value !== null &&
-      Math.abs(scale.value - initialAutoFitScale.value) > 0.01) {
+  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) {
+  if (
+    props.enableScrollPaging &&
+    totalPages.value > 1 &&
+    !isScrollPaging.value
+  ) {
     handleScrollPaging(e);
   }
 };
 
+// 记录上次滚动位置，用于判断滚动方向
+let lastScrollTop = 0;
+
 /**
- * 处理滚动翻页
+ * 处理滚动翻页（通过滚动位置判断当前页）
+ * 向下滑动：当视口顶部到达下一页的顶部时，切换到下一页
+ * 向上滑动：当视口底部到达上一页的底部时，切换到上一页
  */
 const handleScrollPaging = (e: Event) => {
   const container = e.target as HTMLElement;
-  if (!container) return;
-  
+  if (!container || !containerRef.value) 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;
+    const scrollBottom = scrollTop + clientHeight;
+    
+    // 判断滚动方向
+    const isScrollingDown = scrollTop > lastScrollTop;
+    lastScrollTop = scrollTop;
+
+    // 获取当前页的元素
+    const currentPageElement = container.querySelector(
+      `[data-page-number="${currentPage.value}"]`
+    ) as HTMLElement;
     
-    // 滚动到底部（留 100px 的缓冲区，避免误触发）
-    if (scrollTop + clientHeight >= scrollHeight - 100) {
+    if (!currentPageElement) return;
+
+    const currentPageTop = currentPageElement.offsetTop;
+    const currentPageHeight = currentPageElement.offsetHeight;
+    const currentPageBottom = currentPageTop + currentPageHeight;
+
+    let newPage = currentPage.value;
+
+    if (isScrollingDown) {
+      // 向下滑动：当视口顶部到达或超过下一页的顶部时，切换到下一页
       if (currentPage.value < totalPages.value) {
-        isScrollPaging.value = true;
-        // 先重置滚动位置，避免看到下一页的开头
-        container.scrollTop = 0;
-        // 然后切换页面
-        goToNextPage();
-        // 延迟解锁，确保页面切换完成
-        setTimeout(() => {
-          isScrollPaging.value = false;
-        }, 300);
+        const nextPageElement = container.querySelector(
+          `[data-page-number="${currentPage.value + 1}"]`
+        ) as HTMLElement;
+        
+        if (nextPageElement) {
+          const nextPageTop = nextPageElement.offsetTop;
+          // 当视口顶部到达或超过下一页的顶部时，切换到下一页
+          if (scrollTop >= nextPageTop) {
+            newPage = currentPage.value + 1;
+          }
+        }
       }
-    }
-    // 滚动到顶部（留 100px 的缓冲区）
-    else if (scrollTop <= 100) {
+    } else {
+      // 向上滑动：当视口底部到达或超过上一页的底部时，切换到上一页
       if (currentPage.value > 1) {
-        isScrollPaging.value = true;
-        // 先重置滚动位置，避免看到上一页的开头
-        container.scrollTop = 0;
-        // 然后切换页面
-        goToPreviousPage();
-        // 延迟解锁，确保页面切换完成
-        setTimeout(() => {
-          isScrollPaging.value = false;
-        }, 300);
+        const prevPageElement = container.querySelector(
+          `[data-page-number="${currentPage.value - 1}"]`
+        ) as HTMLElement;
+        
+        if (prevPageElement) {
+          const prevPageTop = prevPageElement.offsetTop;
+          const prevPageHeight = prevPageElement.offsetHeight;
+          const prevPageBottom = prevPageTop + prevPageHeight;
+          
+          // 当视口底部到达或超过上一页的底部时，切换到上一页
+          if (scrollBottom <= prevPageBottom) {
+            newPage = currentPage.value - 1;
+          }
+        }
       }
     }
-  }, 200); // 增加防抖时间到 200ms，减少卡顿
+
+    // 如果页码发生变化，更新当前页
+    if (newPage !== currentPage.value) {
+      isScrollPaging.value = true;
+      currentPage.value = newPage;
+      emit("page-change", newPage, totalPages.value);
+      
+      // 延迟解锁，确保页面切换完成
+      setTimeout(() => {
+        isScrollPaging.value = false;
+      }, 100);
+    }
+  }, 100);
 };
 
 /**
  * 检查元素是否在视口内可见
  */
-const isElementVisible = (element: HTMLElement, container: HTMLElement): boolean => {
+const isElementVisible = (
+  element: HTMLElement,
+  container: HTMLElement
+): boolean => {
   const elementRect = element.getBoundingClientRect();
   const containerRect = container.getBoundingClientRect();
 
@@ -1464,38 +1628,51 @@ const isElementVisible = (element: HTMLElement, container: HTMLElement): boolean
 
 /**
  * 高亮指定位置
- * @param bbox 块的边界框 [x1, y1, x2, y2]
+ * @param pageNum 页码
+ * @param bbox 块的边界框 [x1, y1, x2, y2]（相对于该页面的坐标）
  * @param shouldScroll 是否应该滚动到元素位置
  * @returns 是否成功找到并高亮了元素
  */
 const highlightPosition = (
+  pageNum: number,
   bbox: [number, number, number, number],
   shouldScroll: boolean = true
 ): boolean => {
   // 清除之前的高亮
   if (activeBlockDiv.value) {
-    activeBlockDiv.value.style.backgroundColor = 'transparent';
-    activeBlockDiv.value.style.boxShadow = 'none';
+    activeBlockDiv.value.style.backgroundColor = "transparent";
+    activeBlockDiv.value.style.boxShadow = "none";
     activeBlockDiv.value = null;
   }
   isHighlighted.value = false;
 
-  const textLayer = textLayerRef.value;
+  // 如果页码不在有效范围内，返回 false
+  if (pageNum < 1 || pageNum > totalPages.value) {
+    return false;
+  }
+
+  // 在指定页面的文本图层中查找
+  const textLayer = textLayerRefs.get(pageNum);
   if (!textLayer) return false;
 
-  // 查找对应的块元素，使用存储的bbox数据匹配（使用容差）
-  const blockDivs = textLayer.querySelectorAll('.text-block');
   const tolerance = 2;
-
   let matchedElement: HTMLElement | null = null;
 
+  // 查找对应的块元素，使用存储的bbox数据匹配（使用容差）
+  const blockDivs = textLayer.querySelectorAll(".text-block");
+
   blockDivs.forEach((div) => {
     const el = div as HTMLElement;
     const storedBbox = el.dataset.bbox;
     if (!storedBbox) return;
 
     try {
-      const parsedBbox = JSON.parse(storedBbox) as [number, number, number, number];
+      const parsedBbox = JSON.parse(storedBbox) as [
+        number,
+        number,
+        number,
+        number
+      ];
 
       const isMatch =
         Math.abs(parsedBbox[0] - bbox[0]) < tolerance &&
@@ -1507,35 +1684,48 @@ const highlightPosition = (
         matchedElement = el;
       }
     } catch (error) {
-      console.warn('解析bbox失败:', error);
+      console.warn("解析bbox失败:", error);
     }
   });
 
   if (!matchedElement) return false;
 
+  // 如果找到的元素不在当前页，切换到对应页面
+  if (pageNum !== currentPage.value) {
+    switchToPage(pageNum);
+    // 等待页面切换完成后再高亮
+    nextTick(() => {
+      setTimeout(() => {
+        highlightPosition(pageNum, bbox, shouldScroll);
+      }, 300);
+    });
+    return true;
+  }
+
   // 保存引用
-  const elementRef = matchedElement;
+  const elementRef = matchedElement as HTMLElement;
 
   activeBlockDiv.value = elementRef;
   isHighlighted.value = true;
 
   // 使用一致的高亮样式
-  elementRef.style.backgroundColor = 'var(--s-color-brand-primary-transparent-3, rgba(0, 102, 255, .15))';
-  elementRef.style.boxShadow = '0 0 0 2px rgba(30, 144, 255, 0.6)';
+  elementRef.style.backgroundColor =
+    "var(--s-color-brand-primary-transparent-3, rgba(0, 102, 255, .15))";
+  elementRef.style.boxShadow = "0 0 0 2px rgba(30, 144, 255, 0.6)";
 
   // 只有在需要滚动且元素不在视口内时才滚动
   if (shouldScroll && containerRef.value) {
     const isVisible = isElementVisible(elementRef, containerRef.value);
     if (!isVisible) {
-      elementRef.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      elementRef.scrollIntoView({ behavior: "smooth", block: "center" });
     }
   }
 
   // 5秒后自动取消高亮
   setTimeout(() => {
     if (activeBlockDiv.value === elementRef && isHighlighted.value) {
-      elementRef.style.backgroundColor = 'transparent';
-      elementRef.style.boxShadow = 'none';
+      elementRef.style.backgroundColor = "transparent";
+      elementRef.style.boxShadow = "none";
       activeBlockDiv.value = null;
       isHighlighted.value = false;
     }
@@ -1546,13 +1736,21 @@ const highlightPosition = (
 
 /**
  * 跳转到指定位置并高亮（外部调用接口）
- * @param bbox 位置的边界框 [x1, y1, x2, y2]
+ * @param pageNum 页码（必须）
+ * @param bbox 位置的边界框 [x1, y1, x2, y2]（相对于该页面的坐标）
  * @param emitEvent 是否触发跳转事件，默认为 true
  */
 const jumpToPosition = (
+  pageNum: number,
   bbox: [number, number, number, number],
   emitEvent: boolean = true
 ) => {
+  // 如果页码不在有效范围内，直接返回
+  if (pageNum < 1 || pageNum > totalPages.value) {
+    console.warn(`页码 ${pageNum} 不在有效范围内 (1-${totalPages.value})`);
+    return;
+  }
+
   // 等待DOM更新后再高亮
   nextTick(() => {
     let retryCount = 0;
@@ -1560,17 +1758,17 @@ const jumpToPosition = (
     const retryDelay = 200;
 
     const tryHighlight = () => {
-      const success = highlightPosition(bbox, true);
+      const success = highlightPosition(pageNum, bbox, true);
       if (success) {
         // 高亮成功，触发事件
         if (emitEvent) {
-          emit('position-jump', bbox, 'block');
+          emit("position-jump", bbox, "block");
         }
       } else if (retryCount < maxRetries) {
         retryCount++;
         setTimeout(tryHighlight, retryDelay);
       } else {
-        console.warn(`无法找到并高亮指定位置: bbox: [${bbox.join(', ')}]`);
+        console.warn(`无法找到并高亮指定位置: 页码 ${pageNum}, bbox: [${bbox.join(", ")}]`);
       }
     };
 
@@ -1647,10 +1845,14 @@ watch(
 /**
  * 监听缩放、旋转、位置变化，更新文本图层位置
  */
-watch([scale, rotation, position], () => {
-  // 文本图层会跟随图片的 transform，不需要手动更新位置
-  // 但需要确保文本图层与图片同步变换
-}, { deep: true });
+watch(
+  [scale, rotation, position],
+  () => {
+    // 文本图层会跟随图片的 transform，不需要手动更新位置
+    // 但需要确保文本图层与图片同步变换
+  },
+  { deep: true }
+);
 
 /**
  * 组件挂载时的初始化
@@ -1690,12 +1892,15 @@ defineExpose({
   jumpToPosition, // 暴露定位方法给父组件
   goToPage: switchToPage, // 暴露翻页方法给父组件
   getCurrentPage: () => currentPage.value, // 获取当前页码
-  getTotalPages: () => totalPages.value // 获取总页数
+  getTotalPages: () => totalPages.value, // 获取总页数
 });
 </script>
 
 <style lang="less" scoped>
 // 样式已统一到公共样式文件，这里只保留组件特定样式
+.toolbar-group {
+  gap: 0 !important;
+}
 
 // 图片容器
 .image-container {
@@ -1719,8 +1924,8 @@ defineExpose({
 // 图片包装器容器（用于居中显示和提供滚动空间）
 .image-wrapper-container {
   display: flex;
-  align-items: flex-start; // 改为顶部对齐，避免垂直居中产生间隙
-  justify-content: center;
+  flex-direction: column; // 垂直排列所有页面
+  align-items: center; // 水平居中
   width: 100%;
   min-height: 100%;
   box-sizing: border-box;
@@ -1734,6 +1939,17 @@ defineExpose({
   padding: 0;
 }
 
+// 每个页面的容器
+.image-page-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+}
+
 // 图片包装器（包含图片和文本图层）
 .image-wrapper {
   position: relative;
@@ -1747,7 +1963,7 @@ defineExpose({
   margin: 0;
   padding: 0;
   line-height: 0;
-  
+
   img {
     display: block; // 移除图片底部默认间隙
     margin: 0;
@@ -1808,7 +2024,7 @@ defineExpose({
   border-radius: 6px;
   box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
   animation: fade-in 0.2s ease;
-  
+
   .annotation-button-action {
     display: flex;
     flex-direction: row;
@@ -1838,20 +2054,20 @@ defineExpose({
   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;
@@ -1865,22 +2081,22 @@ defineExpose({
       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;
@@ -1903,17 +2119,17 @@ defineExpose({
   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: '📝';
+    content: "📝";
     position: absolute;
     top: -6px;
     right: -6px;