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

package/dist/{tiff.min-BOpS7e2e.mjs → tiff.min-Cf15IJWV.mjs}

@@ -1,4 +1,4 @@
-import { g as getAugmentedNamespace, a as getDefaultExportFromCjs } from "./index-Ck53H0Dd.mjs";
+import { g as getAugmentedNamespace, a as getDefaultExportFromCjs } from "./index-BkDBuqYg.mjs";
 function _mergeNamespaces(U, W) {
   for (var Z = 0; Z < W.length; Z++) {
     const s0 = W[Z];

package/package.json

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

package/preview/ImagePreview.vue

@@ -120,6 +120,13 @@
       <div v-if="isCalculatingAutoFit && autoFitWidth" class="auto-fit-loading">
         <div class="loading-spinner"></div>
         <div class="loading-text">加载中...</div>
+        <!-- 调试信息（开发环境显示） -->
+        <div style="font-size: 12px; color: #999; margin-top: 8px; text-align: center;">
+          isImageReady: {{ isImageReady }}, 
+          isCalculatingAutoFit: {{ isCalculatingAutoFit }}, 
+          autoFitWidth: {{ autoFitWidth }},
+          scale: {{ scale }}
+        </div>
       </div>
       
       <div 
@@ -407,13 +414,24 @@ const isImageReady = ref(false); // 标记图片是否已准备好显示（自
 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 }
@@ -916,13 +934,25 @@ 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;
   }
 
@@ -932,6 +962,7 @@ const calculateAutoFitScale = () => {
   const containerWidth = containerRect.width - 4;
 
   if (containerWidth <= 0) {
+    console.log('[ImagePreview] calculateAutoFitScale 返回 1 (容器宽度无效)', containerWidth);
     return 1;
   }
 
@@ -942,20 +973,38 @@ 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,
@@ -964,35 +1013,65 @@ const onImageLoad = (event: Event, pageNum: number) => {
 
   // 如果是第一页且启用自适应宽度，计算并设置初始缩放比例
   if (pageNum === 1 && props.autoFitWidth) {
+    console.log('[ImagePreview] 第一页加载完成，开始计算自适应宽度');
     // 重置用户缩放标记
     isUserZooming.value = false;
     
-    // 隐藏图片，显示 loading
-    isImageReady.value = false;
-    isCalculatingAutoFit.value = true;
+    // 确保图片是隐藏的（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; // 记录初始自适应缩放比例
+              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: 图片已准备好显示');
+            });
           }
-          // 计算完成后，显示图片并隐藏 loading
-          isCalculatingAutoFit.value = false;
-          // 使用 requestAnimationFrame 确保在下一帧显示，避免闪烁
-          requestAnimationFrame(() => {
-            isImageReady.value = true;
-          });
         }, 100); // 增加延迟，确保所有图片都已加载
       });
     });
   } else if (!props.autoFitWidth) {
     // 如果没有启用自适应宽度，立即显示图片
     isImageReady.value = true;
+    isCalculatingAutoFit.value = false;
   }
   
   // 如果第一页已经加载完成，且当前页不是第一页，也应用自适应宽度
@@ -2353,19 +2432,34 @@ onMounted(() => {
       // 隐藏图片，显示 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;
+              });
             }
-            // 计算完成后，显示图片并隐藏 loading
-            isCalculatingAutoFit.value = false;
-            requestAnimationFrame(() => {
-              isImageReady.value = true;
-            });
           }, 100);
         });
       });