@koi-br/ocr-web-sdk 1.0.40 → 1.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koi-br/ocr-web-sdk",
-  "version": "1.0.40",
+  "version": "1.0.41",
   "description": "一个支持多种Office文件格式预览的Vue3组件SDK，包括PDF、Word、Excel、图片、OFD、TIF等格式",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/preview/ImagePreview.vue

@@ -444,7 +444,10 @@ const isScrollPaging = ref(false); // 标记是否正在进行滚动翻页
 
 // ResizeObserver 相关
 let resizeObserver: ResizeObserver | null = null;
-let resizeTimer: any = null; // 防抖定时器
+let resizeTimer: any = null; // handleContainerResize 内部的定时器
+let resizeDebounceTimer: any = null; // ResizeObserver 的防抖定时器
+let isResizing = false; // 标记是否正在处理 resize
+let lastContainerWidth = 0; // 记录上次容器宽度，用于判断是否真的变化了
 
 // 图片和容器引用
 const containerRef = ref<HTMLElement>();
@@ -1047,6 +1050,10 @@ const onImageLoad = (event: Event, pageNum: number) => {
             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);
@@ -2384,6 +2391,33 @@ const handleContainerResize = () => {
     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);
@@ -2391,31 +2425,46 @@ const handleContainerResize = () => {
   }
 
   // 隐藏图片，显示 loading
+  console.log('[ImagePreview] handleContainerResize: 开始重新计算');
   isImageReady.value = false;
   isCalculatingAutoFit.value = true;
 
   // 立即计算并应用新的缩放比例，避免过渡期间露出底色
   // 使用 requestAnimationFrame 确保在浏览器重绘前更新
   requestAnimationFrame(() => {
-    const newScale = calculateAutoFitScale();
-    if (newScale > 0) {
-      // 即使变化很小也立即更新，确保过渡期间图片始终填满容器
-      scale.value = newScale;
-      initialAutoFitScale.value = newScale;
+    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(() => {
-      const finalScale = calculateAutoFitScale();
-      if (finalScale > 0 && Math.abs(finalScale - scale.value) > 0.01) {
-        scale.value = finalScale;
-        initialAutoFitScale.value = finalScale;
+      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: 更新状态完成');
+        isCalculatingAutoFit.value = false;
+        isResizing = false; // 重置标记
+        requestAnimationFrame(() => {
+          isImageReady.value = true;
+        });
       }
-      // 计算完成后，显示图片并隐藏 loading
-      isCalculatingAutoFit.value = false;
-      requestAnimationFrame(() => {
-        isImageReady.value = true;
-      });
     }, 350); // 350ms 延迟，略大于过渡动画时间（300ms），确保过渡完成后稳定
   });
 };
@@ -2473,11 +2522,17 @@ onMounted(() => {
   nextTick(() => {
     if (containerRef.value && typeof ResizeObserver !== 'undefined') {
       resizeObserver = new ResizeObserver((entries) => {
-        // 使用 entries 参数立即获取新尺寸，避免延迟
-        for (const entry of entries) {
-          // 立即响应尺寸变化，避免过渡期间露出底色
-          handleContainerResize();
+        // 使用防抖，避免频繁触发
+        if (resizeDebounceTimer) {
+          clearTimeout(resizeDebounceTimer);
         }
+        resizeDebounceTimer = setTimeout(() => {
+          // 使用 entries 参数立即获取新尺寸，避免延迟
+          for (const entry of entries) {
+            // 立即响应尺寸变化，避免过渡期间露出底色
+            handleContainerResize();
+          }
+        }, 100); // 100ms 防抖，避免频繁触发
       });
       resizeObserver.observe(containerRef.value);
     } else {
@@ -2503,6 +2558,10 @@ onBeforeUnmount(() => {
     clearTimeout(resizeTimer);
     resizeTimer = null;
   }
+  if (resizeDebounceTimer) {
+    clearTimeout(resizeDebounceTimer);
+    resizeDebounceTimer = null;
+  }
   if (resizeObserver) {
     resizeObserver.disconnect();
     resizeObserver = null;