@koi-br/ocr-web-sdk 1.0.43 → 1.0.45

package/preview/ImagePreview.vue

@@ -12,12 +12,7 @@
       <div class="toolbar-group">
         <span class="scale-text"> {{ Math.round(scale * 100) }}% </span>
         <div class="toolbar-divider"></div>
-        <ATooltip
-          v-if="showResetButton"
-          mini
-          position="bottom"
-          content="重置"
-        >
+        <ATooltip v-if="showResetButton" mini position="bottom" content="重置">
           <AButton size="small" type="outline" @click="reset">
             <RefreshCcw :size="16" />
           </AButton>
@@ -96,7 +91,7 @@
             <AButton
               size="small"
               type="outline"
-              style="padding-right: 0px;"
+              style="padding-right: 0px"
               :disabled="currentPage >= totalPages"
               @click="goToNextPage"
             >
@@ -116,13 +111,24 @@
       @mouseleave="stopPan"
       @scroll="handleScroll"
     >
-      <div class="image-wrapper-container" :style="containerStyle">
+      <!-- 自适应宽度计算 Loading -->
+      <div v-if="isCalculatingAutoFit && autoFitWidth" class="auto-fit-loading">
+        <div class="loading-spinner"></div>
+        <div class="loading-text">加载中...</div>
+      </div>
+
+      <div
+        class="image-wrapper-container"
+        :style="containerStyle"
+        :class="{ 'image-hidden': !isImageReady && autoFitWidth }"
+      >
         <!-- 渲染所有图片页面 -->
         <div
           v-for="(imageUrl, pageIndex) in imageUrls"
           :key="pageIndex"
           :data-page-number="pageIndex + 1"
           class="image-page-container"
+          :style="getPageContainerStyle(pageIndex + 1)"
         >
           <div
             class="image-wrapper"
@@ -151,7 +157,10 @@
 
             <!-- 文本图层（用于文本块选择和定位） -->
             <div
-              v-if="getPageBlocksData(pageIndex + 1) && getPageBlocksData(pageIndex + 1).length > 0"
+              v-if="
+                getPageBlocksData(pageIndex + 1) &&
+                getPageBlocksData(pageIndex + 1).length > 0
+              "
               :ref="(el) => setTextLayerRef(el, pageIndex + 1)"
               class="text-layer"
             ></div>
@@ -389,12 +398,48 @@ 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 isCalculatingAutoFit = ref(false); // 标记是否正在计算自适应宽度（显示 loading）
+const isImageReady = ref(false); // 标记图片是否已准备好显示（自适应宽度计算完成）
+
+// 监听图片URL变化，当有新图片时立即隐藏（等待自适应宽度计算）
+watch(
+  () => imageUrls.value,
+  (newUrls, oldUrls) => {
+    console.log("[ImagePreview] imageUrls changed:", {
+      newUrls: newUrls?.length,
+      oldUrls: oldUrls?.length,
+      autoFitWidth: props.autoFitWidth,
+      isImageReady: isImageReady.value,
+      isCalculatingAutoFit: isCalculatingAutoFit.value,
+    });
+
+    // 如果有新的图片URL，且启用自适应宽度，立即隐藏图片
+    if (newUrls && newUrls.length > 0 && props.autoFitWidth) {
+      console.log("[ImagePreview] 设置图片隐藏，等待自适应宽度计算");
+      isImageReady.value = false;
+      isCalculatingAutoFit.value = true;
+    } else if (!props.autoFitWidth) {
+      // 如果没有启用自适应宽度，立即显示
+      console.log("[ImagePreview] 未启用自适应宽度，立即显示图片");
+      isImageReady.value = true;
+      isCalculatingAutoFit.value = false;
+    }
+  },
+  { immediate: true }
+);
 const isUserZooming = ref(false); // 标记用户是否主动缩放
 
 // 滚动翻页相关
 let scrollPagingTimer: any = null;
 const isScrollPaging = ref(false); // 标记是否正在进行滚动翻页
 
+// ResizeObserver 相关
+let resizeObserver: ResizeObserver | null = null;
+let resizeTimer: any = null; // handleContainerResize 内部的定时器
+let resizeDebounceTimer: any = null; // ResizeObserver 的防抖定时器
+let isResizing = false; // 标记是否正在处理 resize
+let lastContainerWidth = 0; // 记录上次容器宽度，用于判断是否真的变化了
+
 // 图片和容器引用
 const containerRef = ref<HTMLElement>();
 const imageRefs = new Map<number, HTMLImageElement>();
@@ -441,10 +486,10 @@ const imageSize = computed({
 // 在自适应宽度模式下，使用第一页的尺寸；否则使用当前页的尺寸
 const scaledImageSize = computed(() => {
   // 如果启用自适应宽度，使用第一页的尺寸作为基准
-  const baseSize = props.autoFitWidth 
-    ? (imageSizes.get(1) || { width: 0, height: 0 })
+  const baseSize = props.autoFitWidth
+    ? imageSizes.get(1) || { width: 0, height: 0 }
     : imageSize.value;
-    
+
   if (baseSize.width === 0 || baseSize.height === 0) {
     return { width: 0, height: 0 };
   }
@@ -490,6 +535,7 @@ const annotationInput = ref(""); // 批注输入内容
 const currentAnnotationBlock = ref<{
   bbox: [number, number, number, number];
   content: string;
+  annotationId?: string; // 已有批注的ID（如果存在）
 } | null>(null); // 当前正在添加批注的文本块
 const annotationPopupRef = ref<HTMLElement>(); // 批注弹窗引用
 
@@ -514,6 +560,35 @@ const getPageBlocksData = (pageNo: number) => {
   return props.blocksData.filter((block) => block.pageNo === pageNo);
 };
 
+// 计算指定页面缩放后的尺寸（考虑旋转）
+const getPageScaledSize = (pageNo: number) => {
+  const pageSize = imageSizes.get(pageNo);
+  if (!pageSize || pageSize.width === 0 || pageSize.height === 0) {
+    return { width: 0, height: 0 };
+  }
+
+  const { width, height } = pageSize;
+  const scaledWidth = width * scale.value;
+  const scaledHeight = height * scale.value;
+
+  // 如果旋转了 90 度或 270 度，交换宽高
+  const normalizedRotation = ((rotation.value % 360) + 360) % 360;
+  const isRotated = normalizedRotation === 90 || normalizedRotation === 270;
+
+  return {
+    width: isRotated ? scaledHeight : scaledWidth,
+    height: isRotated ? scaledWidth : scaledHeight,
+  };
+};
+
+// 获取页面容器的样式（响应式，会根据缩放和旋转自动更新）
+const getPageContainerStyle = (pageNo: number) => {
+  const scaledSize = getPageScaledSize(pageNo);
+  return {
+    height: scaledSize.height > 0 ? `${scaledSize.height}px` : "auto",
+  };
+};
+
 // 隐藏定时器
 let hideTimer: any = null;
 
@@ -807,10 +882,18 @@ const switchToPage = (page: number) => {
       `[data-page-number="${page}"]`
     ) as HTMLElement;
     if (pageElement) {
+      // 标记这是翻页滚动，不应该被同步滚动干扰
+      containerRef.value.dataset.pageScrolling = "true";
       pageElement.scrollIntoView({ behavior: "smooth", block: "start" });
       // 更新 lastScrollTop，确保滚动方向判断准确
       nextTick(() => {
         lastScrollTop = containerRef.value?.scrollTop || 0;
+        // 延迟清除标记，确保滚动完成
+        setTimeout(() => {
+          if (containerRef.value) {
+            delete containerRef.value.dataset.pageScrolling;
+          }
+        }, 500); // scrollIntoView 的 smooth 动画通常需要 300-500ms
       });
     }
   }
@@ -835,7 +918,7 @@ const reset = () => {
   annotationInput.value = "";
   activeBlockDiv.value = null;
   isHighlighted.value = false;
-  
+
   // 清除已渲染页面集合
   renderedPages.value.clear();
 };
@@ -846,13 +929,28 @@ const original = () => {
 
 // 计算自适应宽度的缩放比例
 const calculateAutoFitScale = () => {
+  console.log("[ImagePreview] calculateAutoFitScale 开始:", {
+    autoFitWidth: props.autoFitWidth,
+    hasContainerRef: !!containerRef.value,
+    containerRect: containerRef.value?.getBoundingClientRect(),
+    firstPageSize: imageSizes.get(1),
+    rotation: rotation.value,
+    minScale: props.minScale,
+    maxScale: props.maxScale,
+  });
+
   if (!props.autoFitWidth || !containerRef.value) {
+    console.log("[ImagePreview] calculateAutoFitScale 返回 1 (条件不满足)");
     return 1;
   }
 
   // 使用第一页的图片尺寸作为基准（所有页面使用相同的缩放比例）
   const firstPageSize = imageSizes.get(1);
   if (!firstPageSize || firstPageSize.width === 0) {
+    console.log(
+      "[ImagePreview] calculateAutoFitScale 返回 1 (第一页尺寸无效)",
+      firstPageSize
+    );
     return 1;
   }
 
@@ -862,6 +960,10 @@ const calculateAutoFitScale = () => {
   const containerWidth = containerRect.width - 4;
 
   if (containerWidth <= 0) {
+    console.log(
+      "[ImagePreview] calculateAutoFitScale 返回 1 (容器宽度无效)",
+      containerWidth
+    );
     return 1;
   }
 
@@ -872,20 +974,44 @@ const calculateAutoFitScale = () => {
   const imageWidth = isRotated ? firstPageSize.height : firstPageSize.width;
 
   if (imageWidth <= 0) {
+    console.log(
+      "[ImagePreview] calculateAutoFitScale 返回 1 (图片宽度无效)",
+      imageWidth
+    );
     return 1;
   }
 
   // 计算缩放比例，使图片宽度完全适应容器宽度
   const calculatedScale = containerWidth / imageWidth;
+  const finalScale = Math.max(
+    props.minScale,
+    Math.min(props.maxScale, calculatedScale)
+  );
+
+  console.log("[ImagePreview] calculateAutoFitScale 计算结果:", {
+    containerWidth,
+    imageWidth,
+    calculatedScale,
+    finalScale,
+  });
 
   // 确保缩放比例在允许的范围内
-  return Math.max(props.minScale, Math.min(props.maxScale, calculatedScale));
+  return finalScale;
 };
 
 // 图片加载完成处理
 const onImageLoad = (event: Event, pageNum: number) => {
   const img = event.target as HTMLImageElement;
-  
+
+  console.log("[ImagePreview] 图片加载完成:", {
+    pageNum,
+    naturalWidth: img.naturalWidth,
+    naturalHeight: img.naturalHeight,
+    autoFitWidth: props.autoFitWidth,
+    isImageReady: isImageReady.value,
+    isCalculatingAutoFit: isCalculatingAutoFit.value,
+  });
+
   // 存储该页的图片尺寸
   imageSizes.set(pageNum, {
     width: img.naturalWidth,
@@ -894,24 +1020,84 @@ const onImageLoad = (event: Event, pageNum: number) => {
 
   // 如果是第一页且启用自适应宽度，计算并设置初始缩放比例
   if (pageNum === 1 && props.autoFitWidth) {
+    console.log("[ImagePreview] 第一页加载完成，开始计算自适应宽度");
     // 重置用户缩放标记
     isUserZooming.value = false;
 
+    // 确保图片是隐藏的（watch 已经设置了，这里再次确认）
+    if (!isImageReady.value) {
+      isCalculatingAutoFit.value = true;
+    }
+
+    // 设置超时保护，防止一直显示 loading（最多等待 3 秒）
+    const timeoutId = setTimeout(() => {
+      console.warn("自适应宽度计算超时，强制显示图片");
+      isCalculatingAutoFit.value = false;
+      isImageReady.value = true;
+    }, 3000);
+
     // 使用双重 nextTick 确保容器尺寸已确定
     nextTick(() => {
       nextTick(() => {
         // 添加小延迟确保容器完全渲染
         setTimeout(() => {
-          const autoScale = calculateAutoFitScale();
-          if (autoScale !== 1 && autoScale > 0) {
-            scale.value = autoScale;
-            initialAutoFitScale.value = autoScale; // 记录初始自适应缩放比例
+          try {
+            console.log("[ImagePreview] onImageLoad: 开始计算自适应宽度...");
+            const autoScale = calculateAutoFitScale();
+            console.log("[ImagePreview] onImageLoad: 自适应宽度计算结果:", {
+              autoScale,
+              containerRef: !!containerRef.value,
+              containerWidth:
+                containerRef.value?.getBoundingClientRect()?.width,
+              firstPageSize: imageSizes.get(1),
+            });
+
+            if (autoScale > 0) {
+              scale.value = autoScale;
+              initialAutoFitScale.value = autoScale; // 记录初始自适应缩放比例
+              // 记录当前容器宽度，用于后续 resize 检查
+              if (containerRef.value) {
+                lastContainerWidth =
+                  containerRef.value.getBoundingClientRect().width;
+              }
+              console.log(
+                "[ImagePreview] onImageLoad: 缩放比例已设置:",
+                autoScale
+              );
+            } else {
+              console.warn(
+                "[ImagePreview] onImageLoad: 计算出的缩放比例无效:",
+                autoScale
+              );
+            }
+          } catch (error) {
+            console.error(
+              "[ImagePreview] onImageLoad: 计算自适应宽度失败:",
+              error
+            );
+          } finally {
+            // 清除超时保护
+            clearTimeout(timeoutId);
+            console.log(
+              "[ImagePreview] onImageLoad: 更新状态: isCalculatingAutoFit = false, isImageReady = true"
+            );
+            // 无论计算结果如何，都要更新状态，避免一直显示 loading
+            isCalculatingAutoFit.value = false;
+            // 使用 requestAnimationFrame 确保在下一帧显示，避免闪烁
+            requestAnimationFrame(() => {
+              isImageReady.value = true;
+              console.log("[ImagePreview] onImageLoad: 图片已准备好显示");
+            });
           }
         }, 100); // 增加延迟，确保所有图片都已加载
       });
     });
+  } else if (!props.autoFitWidth) {
+    // 如果没有启用自适应宽度，立即显示图片
+    isImageReady.value = true;
+    isCalculatingAutoFit.value = false;
   }
-  
+
   // 如果第一页已经加载完成，且当前页不是第一页，也应用自适应宽度
   if (pageNum > 1 && props.autoFitWidth && initialAutoFitScale.value !== null) {
     // 确保后续页面也使用相同的缩放比例
@@ -1121,9 +1307,13 @@ const renderTextLayer = (pageNum?: number) => {
           hideTimer = null;
         }
 
-        // 如果有之前激活的文本块，先恢复其样式
-        if (activeBlockDiv.value && activeBlockDiv.value !== blockDiv) {
-          restoreBlockStyle(activeBlockDiv.value);
+        // 清除当前页面所有文本块的高亮样式（除了当前文本块）
+        // 这样可以防止多个文本块同时高亮的竞态条件
+        clearAllHighlights(blockDiv);
+
+        // 清除跳转高亮标志（如果之前是通过跳转高亮的）
+        if (isHighlighted.value) {
+          isHighlighted.value = false;
         }
 
         // 设置当前文本块为激活状态
@@ -1133,13 +1323,28 @@ const renderTextLayer = (pageNum?: number) => {
         const existingAnnotation = getAnnotationForBlock(bbox, targetPage);
         if (existingAnnotation) {
           // 如果有批注，保持批注背景色，但添加蓝色边框表示 hover
-          blockDiv.style.setProperty("background-color", "rgba(255, 243, 205, 0.5)", "important");
-          blockDiv.style.setProperty("border", "2px solid rgba(30, 144, 255, 0.8)", "important");
+          blockDiv.style.setProperty(
+            "background-color",
+            "rgba(255, 243, 205, 0.5)",
+            "important"
+          );
+          blockDiv.style.setProperty(
+            "border",
+            "2px solid rgba(30, 144, 255, 0.8)",
+            "important"
+          );
           blockDiv.style.setProperty("border-radius", "3px", "important");
           blockDiv.style.setProperty("padding", "1px 3px", "important");
-          blockDiv.style.setProperty("box-shadow", "0 0 0 2px rgba(30, 144, 255, 0.6), 0 1px 2px rgba(255, 193, 7, 0.25)", "important");
+          blockDiv.style.setProperty(
+            "box-shadow",
+            "0 0 0 2px rgba(30, 144, 255, 0.6), 0 1px 2px rgba(255, 193, 7, 0.25)",
+            "important"
+          );
         } else {
-          // 如果没有批注，使用 hover 样式（与 PdfPreview 保持一致）
+          // 如果没有批注，先清除可能残留的样式，再设置 hover 样式（与 PdfPreview 保持一致）
+          blockDiv.style.removeProperty("background-color");
+          blockDiv.style.removeProperty("border");
+          blockDiv.style.removeProperty("box-shadow");
           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)";
@@ -1207,7 +1412,7 @@ const showAnnotationButtonForBlock = (
 
   try {
     const bbox = JSON.parse(bboxStr) as [number, number, number, number];
-    
+
     // 从 blocksData 中查找对应的 content
     const pageBlocksData = getPageBlocksData(currentPage.value);
     const blockData = pageBlocksData.find((block) => {
@@ -1220,7 +1425,7 @@ const showAnnotationButtonForBlock = (
         Math.abs(y2 - bbox[3]) < tolerance
       );
     });
-    
+
     if (!blockData) return;
 
     const rect = blockDiv.getBoundingClientRect();
@@ -1303,6 +1508,90 @@ const showAnnotationButtonForBlock = (
   }
 };
 
+/**
+ * 清除指定页面所有文本块的高亮样式（除了指定的文本块）
+ * @param excludeBlockDiv 要排除的文本块（不清除它的样式）
+ * @param pageNum 要清除的页码，如果不提供则从 excludeBlockDiv 中获取
+ */
+const clearAllHighlights = (
+  excludeBlockDiv?: HTMLElement,
+  pageNum?: number
+) => {
+  // 确定要清除的页码
+  let targetPage = pageNum;
+  if (!targetPage && excludeBlockDiv) {
+    const pageStr = excludeBlockDiv.dataset.page;
+    targetPage = pageStr ? parseInt(pageStr, 10) : currentPage.value;
+  }
+  if (!targetPage) {
+    targetPage = currentPage.value;
+  }
+
+  const textLayer = textLayerRefs.get(targetPage);
+  if (!textLayer) return;
+
+  const blockDivs = textLayer.querySelectorAll(".text-block");
+  blockDivs.forEach((div) => {
+    const el = div as HTMLElement;
+    // 如果是指定的文本块，跳过
+    if (excludeBlockDiv && el === excludeBlockDiv) {
+      return;
+    }
+
+    // 检查是否有批注
+    const bboxStr = el.dataset.bbox;
+    if (!bboxStr) return;
+
+    try {
+      const bbox = JSON.parse(bboxStr) as [number, number, number, number];
+      const pageStr = el.dataset.page;
+      const pageNum = pageStr ? parseInt(pageStr, 10) : undefined;
+      const existingAnnotation = getAnnotationForBlock(bbox, pageNum);
+
+      if (existingAnnotation) {
+        // 如果有批注，恢复批注样式（不使用 hover 样式）
+        el.style.setProperty(
+          "background-color",
+          "rgba(255, 243, 205, 0.5)",
+          "important"
+        );
+        el.style.setProperty(
+          "border",
+          "1px solid rgba(255, 193, 7, 0.7)",
+          "important"
+        );
+        el.style.setProperty("border-radius", "3px", "important");
+        el.style.setProperty("padding", "1px 3px", "important");
+        el.style.setProperty(
+          "box-shadow",
+          "0 1px 2px rgba(255, 193, 7, 0.25)",
+          "important"
+        );
+      } else {
+        // 如果没有批注，清除所有高亮样式
+        el.style.backgroundColor = "transparent";
+        el.style.border = "none";
+        el.style.borderRadius = "2px";
+        el.style.padding = "0";
+        el.style.boxShadow = "none";
+        el.style.removeProperty("background-color");
+        el.style.removeProperty("border");
+        el.style.removeProperty("box-shadow");
+      }
+    } catch (error) {
+      // 如果解析失败，清除所有高亮样式
+      el.style.backgroundColor = "transparent";
+      el.style.border = "none";
+      el.style.borderRadius = "2px";
+      el.style.padding = "0";
+      el.style.boxShadow = "none";
+      el.style.removeProperty("background-color");
+      el.style.removeProperty("border");
+      el.style.removeProperty("box-shadow");
+    }
+  });
+};
+
 /**
  * 恢复文本块样式（根据是否有批注）
  */
@@ -1341,36 +1630,58 @@ const restoreBlockStyle = (blockDiv: HTMLElement) => {
 
     if (existingAnnotation) {
       // 如果有批注，保持批注样式（使用 !important 确保优先级）
-      blockDiv.style.setProperty("background-color", "rgba(255, 243, 205, 0.5)", "important");
-      blockDiv.style.setProperty("border", "1px solid rgba(255, 193, 7, 0.7)", "important");
+      blockDiv.style.setProperty(
+        "background-color",
+        "rgba(255, 243, 205, 0.5)",
+        "important"
+      );
+      blockDiv.style.setProperty(
+        "border",
+        "1px solid rgba(255, 193, 7, 0.7)",
+        "important"
+      );
       blockDiv.style.setProperty("border-radius", "3px", "important");
       blockDiv.style.setProperty("padding", "1px 3px", "important");
-      blockDiv.style.setProperty("box-shadow", "0 1px 2px rgba(255, 193, 7, 0.25)", "important");
-      
+      blockDiv.style.setProperty(
+        "box-shadow",
+        "0 1px 2px rgba(255, 193, 7, 0.25)",
+        "important"
+      );
+
       // 确保元素可见
       blockDiv.style.setProperty("display", "block", "important");
       blockDiv.style.setProperty("visibility", "visible", "important");
       blockDiv.style.setProperty("opacity", "1", "important");
-      
+
       console.log("restoreBlockStyle: 已设置批注样式", {
         backgroundColor: blockDiv.style.backgroundColor,
         border: blockDiv.style.border,
         computedAfter: window.getComputedStyle(blockDiv).backgroundColor,
       });
     } else {
-      // 如果没有批注，恢复透明背景
+      // 如果没有批注，恢复透明背景（清除所有高亮相关样式）
       blockDiv.style.backgroundColor = "transparent";
       blockDiv.style.border = "none";
+      blockDiv.style.borderRadius = "2px"; // 恢复默认值
       blockDiv.style.padding = "0";
       blockDiv.style.boxShadow = "none";
+      // 清除可能残留的样式属性
+      blockDiv.style.removeProperty("background-color");
+      blockDiv.style.removeProperty("border");
+      blockDiv.style.removeProperty("box-shadow");
     }
   } catch (error) {
     console.error("restoreBlockStyle 错误:", error);
-    // 如果解析失败，恢复透明背景
+    // 如果解析失败，恢复透明背景（清除所有高亮相关样式）
     blockDiv.style.backgroundColor = "transparent";
     blockDiv.style.border = "none";
+    blockDiv.style.borderRadius = "2px"; // 恢复默认值
     blockDiv.style.padding = "0";
     blockDiv.style.boxShadow = "none";
+    // 清除可能残留的样式属性
+    blockDiv.style.removeProperty("background-color");
+    blockDiv.style.removeProperty("border");
+    blockDiv.style.removeProperty("box-shadow");
   }
 };
 
@@ -1391,12 +1702,7 @@ const hideAnnotationButton = () => {
       const bboxStr = activeBlockDiv.value.dataset.bbox;
       if (bboxStr) {
         try {
-          const bbox = JSON.parse(bboxStr) as [
-            number,
-            number,
-            number,
-            number
-          ];
+          const bbox = JSON.parse(bboxStr) as [number, number, number, number];
           const existingAnnotation = getAnnotationForBlock(bbox);
           if (existingAnnotation) {
             // 如果有批注，恢复批注样式
@@ -1408,19 +1714,32 @@ const hideAnnotationButton = () => {
             activeBlockDiv.value.style.boxShadow =
               "0 1px 2px rgba(255, 193, 7, 0.25)";
           } else {
-            // 如果没有批注，恢复透明背景
+            // 如果没有批注，恢复透明背景（清除所有高亮相关样式）
             activeBlockDiv.value.style.backgroundColor = "transparent";
             activeBlockDiv.value.style.border = "none";
+            activeBlockDiv.value.style.borderRadius = "2px"; // 恢复默认值
             activeBlockDiv.value.style.padding = "0";
             activeBlockDiv.value.style.boxShadow = "none";
+            // 清除可能残留的样式属性
+            activeBlockDiv.value.style.removeProperty("background-color");
+            activeBlockDiv.value.style.removeProperty("border");
+            activeBlockDiv.value.style.removeProperty("box-shadow");
           }
         } catch (error) {
+          // 如果解析失败，恢复透明背景（清除所有高亮相关样式）
           activeBlockDiv.value.style.backgroundColor = "transparent";
           activeBlockDiv.value.style.border = "none";
+          activeBlockDiv.value.style.borderRadius = "2px"; // 恢复默认值
           activeBlockDiv.value.style.padding = "0";
           activeBlockDiv.value.style.boxShadow = "none";
+          // 清除可能残留的样式属性
+          activeBlockDiv.value.style.removeProperty("background-color");
+          activeBlockDiv.value.style.removeProperty("border");
+          activeBlockDiv.value.style.removeProperty("box-shadow");
         }
       }
+      // 清除高亮标志
+      isHighlighted.value = false;
       activeBlockDiv.value = null;
     }
   }, 300);
@@ -1526,6 +1845,7 @@ const openAnnotationInput = (e?: Event) => {
   currentAnnotationBlock.value = {
     bbox,
     content: selectedText,
+    annotationId: existingAnnotation?.id, // 保存已有批注的ID
   };
 
   // 确保弹窗显示
@@ -1635,7 +1955,7 @@ const closeAnnotationInput = () => {
   currentAnnotationBlock.value = null;
   annotationInput.value = "";
   showAnnotationPopup.value = false;
-  
+
   // 关闭批注输入弹窗后，恢复文本块的样式
   if (activeBlockDiv.value && !isHighlighted.value) {
     restoreBlockStyle(activeBlockDiv.value);
@@ -1667,16 +1987,22 @@ const saveAnnotation = () => {
     return;
   }
 
-  const { bbox, content } = currentAnnotationBlock.value;
+  const { bbox, content, annotationId } = currentAnnotationBlock.value;
   const annotationContent = annotationInput.value.trim();
 
-  // 检查是否已有批注
-  const existingAnnotation = getAnnotationForBlock(bbox);
+  // 优先使用保存的ID查找批注，如果没有ID则使用bbox查找（向后兼容）
+  let existingAnnotation: AnnotationInfo | null = null;
+  if (annotationId && props.annotations) {
+    existingAnnotation =
+      props.annotations.find((ann) => ann.id === annotationId) || null;
+  }
+  // 如果没有通过ID找到，则使用bbox查找（向后兼容）
+  if (!existingAnnotation) {
+    existingAnnotation = getAnnotationForBlock(bbox);
+  }
 
   const annotation: AnnotationInfo = {
-    id:
-      existingAnnotation?.id ||
-      `annotation_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+    id: existingAnnotation?.id || "",
     blockBbox: bbox,
     blockContent: content,
     blockPage: currentPage.value,
@@ -1707,6 +2033,33 @@ const saveAnnotation = () => {
  * 处理滚动事件（隐藏批注按钮和文本块高亮，以及滚动翻页）
  */
 const handleScroll = (e: Event) => {
+  const container = e.target as HTMLElement;
+
+  // 检查是否是同步滚动触发的
+  const isSyncing = container?.dataset?.syncingScroll === "true";
+  if (isSyncing) {
+    // 即使是被同步滚动触发的，也应该立即更新页码（但不触发翻页动画）
+    // 使用 requestAnimationFrame 确保在浏览器渲染后立即更新
+    if (
+      props.enableScrollPaging &&
+      totalPages.value > 1 &&
+      !isScrollPaging.value
+    ) {
+      // 立即更新页码，不等待防抖
+      requestAnimationFrame(() => {
+        updateCurrentPageFromScroll();
+        // 清除标记（在页码更新后）
+        delete container.dataset.syncingScroll;
+      });
+    } else {
+      // 如果没有启用滚动翻页，立即清除标记
+      delete container.dataset.syncingScroll;
+    }
+
+    // 同步滚动时，不执行其他逻辑（如隐藏批注按钮等）
+    return;
+  }
+
   if (hideTimer) {
     clearTimeout(hideTimer);
   }
@@ -1728,12 +2081,17 @@ const handleScroll = (e: Event) => {
     scale.value = initialAutoFitScale.value;
   }
 
-  // 滚动翻页功能
+  // 滚动翻页功能（用户主动滚动时）
   if (
     props.enableScrollPaging &&
     totalPages.value > 1 &&
     !isScrollPaging.value
   ) {
+    // 立即更新页码（使用 requestAnimationFrame 确保在渲染后更新）
+    requestAnimationFrame(() => {
+      updateCurrentPageFromScroll();
+    });
+    // 同时使用防抖处理其他逻辑（如事件触发）
     handleScrollPaging(e);
   }
 };
@@ -1741,10 +2099,55 @@ const handleScroll = (e: Event) => {
 // 记录上次滚动位置，用于判断滚动方向
 let lastScrollTop = 0;
 
+/**
+ * 根据滚动位置更新当前页码
+ * 通过找到距离视口中心最近的页面来确定当前页
+ * 使用 getBoundingClientRect() 获取实际渲染位置（考虑了 transform: scale）
+ */
+const updateCurrentPageFromScroll = () => {
+  if (!containerRef.value) return;
+
+  const container = containerRef.value;
+  const containerRect = container.getBoundingClientRect();
+  const containerTop = containerRect.top;
+  const containerHeight = container.clientHeight;
+  const containerCenter = containerTop + containerHeight / 2;
+
+  // 遍历所有页面，找到距离视口中心最近的页面
+  let closestPage = 1;
+  let closestDistance = Infinity;
+
+  for (let pageNum = 1; pageNum <= totalPages.value; pageNum++) {
+    const pageElement = container.querySelector(
+      `[data-page-number="${pageNum}"]`
+    ) as HTMLElement;
+
+    if (pageElement) {
+      // 使用 getBoundingClientRect() 获取实际渲染位置（考虑了 transform: scale）
+      // 而不是使用 offsetTop（不考虑 transform）
+      const pageRect = pageElement.getBoundingClientRect();
+      const pageTop = pageRect.top;
+      const pageHeight = pageRect.height;
+      const pageCenter = pageTop + pageHeight / 2;
+      const distance = Math.abs(pageCenter - containerCenter);
+
+      if (distance < closestDistance) {
+        closestDistance = distance;
+        closestPage = pageNum;
+      }
+    }
+  }
+
+  // 只有当页码真正改变时才更新
+  if (closestPage !== currentPage.value) {
+    currentPage.value = closestPage;
+    emit("page-change", closestPage, totalPages.value);
+  }
+};
+
 /**
  * 处理滚动翻页（通过滚动位置判断当前页）
- * 向下滑动：当视口顶部到达下一页的顶部时，切换到下一页
- * 向上滑动：当视口底部到达上一页的底部时，切换到上一页
+ * 使用视口中心最近的页面来确定当前页，更准确
  */
 const handleScrollPaging = (e: Event) => {
   const container = e.target as HTMLElement;
@@ -1761,80 +2164,16 @@ const handleScrollPaging = (e: Event) => {
   }
 
   // 使用防抖，避免频繁触发
+  // 减少延迟到50ms，提高响应速度
   scrollPagingTimer = setTimeout(() => {
     // 再次检查是否正在翻页
     if (isScrollPaging.value) {
       return;
     }
 
-    const scrollTop = container.scrollTop;
-    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;
-    
-    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) {
-        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;
-          }
-        }
-      }
-    } else {
-      // 向上滑动：当视口底部到达或超过上一页的底部时，切换到上一页
-      if (currentPage.value > 1) {
-        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;
-          }
-        }
-      }
-    }
-
-    // 如果页码发生变化，更新当前页
-    if (newPage !== currentPage.value) {
-      isScrollPaging.value = true;
-      currentPage.value = newPage;
-      emit("page-change", newPage, totalPages.value);
-      
-      // 延迟解锁，确保页面切换完成
-      setTimeout(() => {
-        isScrollPaging.value = false;
-      }, 100);
-    }
-  }, 100);
+    // 更新当前页码（基于视口中心最近的页面）
+    updateCurrentPageFromScroll();
+  }, 50);
 };
 
 /**
@@ -1962,7 +2301,15 @@ const highlightPosition = (
   if (shouldScroll && containerRef.value) {
     const isVisible = isElementVisible(elementRef, containerRef.value);
     if (!isVisible) {
+      // 标记这是定位滚动，不应该被同步滚动干扰
+      containerRef.value.dataset.pageScrolling = "true";
       elementRef.scrollIntoView({ behavior: "smooth", block: "center" });
+      // 延迟清除标记，确保滚动完成
+      setTimeout(() => {
+        if (containerRef.value) {
+          delete containerRef.value.dataset.pageScrolling;
+        }
+      }, 500); // scrollIntoView 的 smooth 动画通常需要 300-500ms
     }
   }
 
@@ -1998,7 +2345,12 @@ const jumpToPosition = (
     return;
   }
 
-  // 等待DOM更新后再高亮
+  // 先跳转到对应页面（如果不在当前页）
+  if (pageNum !== currentPage.value) {
+    switchToPage(pageNum);
+  }
+
+  // 等待页面跳转完成后再高亮
   nextTick(() => {
     let retryCount = 0;
     const maxRetries = 5;
@@ -2015,11 +2367,14 @@ const jumpToPosition = (
         retryCount++;
         setTimeout(tryHighlight, retryDelay);
       } else {
-        console.warn(`无法找到并高亮指定位置: 页码 ${pageNum}, bbox: [${bbox.join(", ")}]`);
+        console.warn(
+          `无法找到并高亮指定位置: 页码 ${pageNum}, bbox: [${bbox.join(", ")}]`
+        );
       }
     };
 
-    setTimeout(tryHighlight, 300);
+    // 增加延迟，确保页面跳转完成（特别是同步滚动场景）
+    setTimeout(tryHighlight, 500);
   });
 };
 
@@ -2094,6 +2449,98 @@ watch(
   { deep: true }
 );
 
+/**
+ * 处理容器尺寸变化，重新计算自适应缩放比例
+ */
+const handleContainerResize = () => {
+  // 如果禁用了自适应宽度，或者用户主动缩放过，不自动调整
+  if (!props.autoFitWidth || isUserZooming.value) {
+    return;
+  }
+
+  // 如果第一页图片还没有加载完成，不处理
+  const firstPageSize = imageSizes.get(1);
+  if (!firstPageSize || firstPageSize.width === 0) {
+    return;
+  }
+
+  // 如果正在计算中或正在处理 resize，跳过（避免重复计算）
+  if (isCalculatingAutoFit.value || isResizing) {
+    return;
+  }
+
+  // 检查容器尺寸是否真的变化了（避免无意义的重复计算）
+  if (containerRef.value) {
+    const currentWidth = containerRef.value.getBoundingClientRect().width;
+    // 如果宽度变化小于 5px，认为是渲染抖动，不处理
+    if (Math.abs(currentWidth - lastContainerWidth) < 5) {
+      return;
+    }
+    lastContainerWidth = currentWidth;
+  }
+
+  console.log("[ImagePreview] handleContainerResize 被调用:", {
+    autoFitWidth: props.autoFitWidth,
+    isUserZooming: isUserZooming.value,
+    isImageReady: isImageReady.value,
+    isCalculatingAutoFit: isCalculatingAutoFit.value,
+    hasFirstPageSize: !!imageSizes.get(1),
+    containerWidth: containerRef.value?.getBoundingClientRect()?.width,
+  });
+
+  // 标记正在处理 resize
+  isResizing = true;
+
+  // 清除之前的定时器
+  if (resizeTimer) {
+    clearTimeout(resizeTimer);
+    resizeTimer = null;
+  }
+
+  // 宽度变化时不显示 loading，只更新缩放比例（避免看起来像重新加载）
+  console.log("[ImagePreview] handleContainerResize: 开始重新计算");
+
+  // 立即计算并应用新的缩放比例，避免过渡期间露出底色
+  // 使用 requestAnimationFrame 确保在浏览器重绘前更新
+  requestAnimationFrame(() => {
+    try {
+      console.log(
+        "[ImagePreview] handleContainerResize: 开始计算自适应宽度..."
+      );
+      const newScale = calculateAutoFitScale();
+      console.log("[ImagePreview] handleContainerResize: 计算结果:", newScale);
+
+      if (newScale > 0) {
+        // 即使变化很小也立即更新，确保过渡期间图片始终填满容器
+        scale.value = newScale;
+        initialAutoFitScale.value = newScale;
+      }
+    } catch (error) {
+      console.error("[ImagePreview] handleContainerResize: 计算失败:", error);
+    }
+
+    // 在过渡动画完成后再次检查，确保最终状态正确（处理过渡动画期间的连续变化）
+    resizeTimer = setTimeout(() => {
+      try {
+        const finalScale = calculateAutoFitScale();
+        if (finalScale > 0 && Math.abs(finalScale - scale.value) > 0.01) {
+          scale.value = finalScale;
+          initialAutoFitScale.value = finalScale;
+        }
+      } catch (error) {
+        console.error(
+          "[ImagePreview] handleContainerResize: 最终计算失败:",
+          error
+        );
+      } finally {
+        // 计算完成，重置标记（不改变图片显示状态，因为宽度变化时不应该显示loading）
+        console.log("[ImagePreview] handleContainerResize: 更新状态完成");
+        isResizing = false; // 重置标记
+      }
+    }, 350); // 350ms 延迟，略大于过渡动画时间（300ms），确保过渡完成后稳定
+  });
+};
+
 /**
  * 组件挂载时的初始化
  */
@@ -2103,19 +2550,68 @@ onMounted(() => {
   if (firstPageImage && firstPageImage.complete && props.autoFitWidth) {
     const firstPageSize = imageSizes.get(1);
     if (firstPageSize && firstPageSize.width > 0) {
+      // 隐藏图片，显示 loading
+      isImageReady.value = false;
+      isCalculatingAutoFit.value = true;
+
+      // 设置超时保护，防止一直显示 loading（最多等待 3 秒）
+      const timeoutId = setTimeout(() => {
+        console.warn("自适应宽度计算超时，强制显示图片");
+        isCalculatingAutoFit.value = false;
+        isImageReady.value = true;
+      }, 3000);
+
       nextTick(() => {
         nextTick(() => {
           setTimeout(() => {
-            const autoScale = calculateAutoFitScale();
-            if (autoScale !== 1 && autoScale > 0) {
-              scale.value = autoScale;
-              initialAutoFitScale.value = autoScale;
+            try {
+              const autoScale = calculateAutoFitScale();
+              if (autoScale > 0) {
+                scale.value = autoScale;
+                initialAutoFitScale.value = autoScale;
+              }
+            } catch (error) {
+              console.warn("计算自适应宽度失败:", error);
+            } finally {
+              // 清除超时保护
+              clearTimeout(timeoutId);
+              // 无论计算结果如何，都要更新状态，避免一直显示 loading
+              isCalculatingAutoFit.value = false;
+              requestAnimationFrame(() => {
+                isImageReady.value = true;
+              });
             }
           }, 100);
         });
       });
     }
+  } else if (!props.autoFitWidth) {
+    // 如果没有启用自适应宽度，立即显示图片
+    isImageReady.value = true;
   }
+
+  // 监听容器尺寸变化（用于响应外部收起/展开操作）
+  nextTick(() => {
+    if (containerRef.value && typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver((entries) => {
+        // 使用防抖，避免频繁触发
+        if (resizeDebounceTimer) {
+          clearTimeout(resizeDebounceTimer);
+        }
+        resizeDebounceTimer = setTimeout(() => {
+          // 使用 entries 参数立即获取新尺寸，避免延迟
+          for (const entry of entries) {
+            // 立即响应尺寸变化，避免过渡期间露出底色
+            handleContainerResize();
+          }
+        }, 100); // 100ms 防抖，避免频繁触发
+      });
+      resizeObserver.observe(containerRef.value);
+    } else {
+      // 降级方案：监听窗口大小变化
+      window.addEventListener("resize", handleContainerResize);
+    }
+  });
 });
 
 /**
@@ -2130,6 +2626,20 @@ onBeforeUnmount(() => {
     clearTimeout(scrollPagingTimer);
     scrollPagingTimer = null;
   }
+  if (resizeTimer) {
+    clearTimeout(resizeTimer);
+    resizeTimer = null;
+  }
+  if (resizeDebounceTimer) {
+    clearTimeout(resizeDebounceTimer);
+    resizeDebounceTimer = null;
+  }
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+  // 移除窗口 resize 监听器（降级方案）
+  window.removeEventListener("resize", handleContainerResize);
 });
 
 defineExpose({
@@ -2138,6 +2648,7 @@ defineExpose({
   goToPage: switchToPage, // 暴露翻页方法给父组件
   getCurrentPage: () => currentPage.value, // 获取当前页码
   getTotalPages: () => totalPages.value, // 获取总页数
+  getContainer: () => containerRef.value, // 暴露容器引用，用于同步滚动
 });
 </script>
 
@@ -2156,6 +2667,47 @@ defineExpose({
   overflow: auto;
 }
 
+// 自适应宽度计算 Loading
+.auto-fit-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 30px;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #e5e7eb;
+  border-top-color: #1890ff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-text {
+  font-size: 14px;
+  color: #666;
+  white-space: nowrap;
+}
+
+// 图片隐藏状态（自适应宽度计算完成前）
+// 使用 display: none 确保图片完全不可见，不会在加载过程中显示
+.image-wrapper-container.image-hidden {
+  display: none !important;
+}
+
 // 页码信息样式
 .page-info {
   display: inline-flex;
@@ -2208,6 +2760,8 @@ defineExpose({
   margin: 0;
   padding: 0;
   line-height: 0;
+  // 添加平滑过渡，避免切换时露出底色
+  transition: transform 0.3s ease;
 
   img {
     display: block; // 移除图片底部默认间隙