@koi-br/ocr-web-sdk 1.0.37 → 1.0.39

package/package.json

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

package/preview/ImagePreview.vue

@@ -116,7 +116,17 @@
       @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"
@@ -390,6 +400,24 @@ 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) => {
+    // 如果有新的图片URL，且启用自适应宽度，立即隐藏图片
+    if (newUrls && newUrls.length > 0 && props.autoFitWidth) {
+      isImageReady.value = false;
+      isCalculatingAutoFit.value = true;
+    } else if (!props.autoFitWidth) {
+      // 如果没有启用自适应宽度，立即显示
+      isImageReady.value = true;
+    }
+  },
+  { immediate: true }
+);
 const isUserZooming = ref(false); // 标记用户是否主动缩放
 
 // 滚动翻页相关
@@ -938,20 +966,49 @@ const onImageLoad = (event: Event, pageNum: number) => {
   if (pageNum === 1 && props.autoFitWidth) {
     // 重置用户缩放标记
     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 {
+            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 确保在下一帧显示，避免闪烁
+            requestAnimationFrame(() => {
+              isImageReady.value = true;
+            });
           }
         }, 100); // 增加延迟，确保所有图片都已加载
       });
     });
+  } else if (!props.autoFitWidth) {
+    // 如果没有启用自适应宽度，立即显示图片
+    isImageReady.value = true;
+    isCalculatingAutoFit.value = false;
   }
   
   // 如果第一页已经加载完成，且当前页不是第一页，也应用自适应宽度
@@ -2270,6 +2327,10 @@ const handleContainerResize = () => {
     resizeTimer = null;
   }
 
+  // 隐藏图片，显示 loading
+  isImageReady.value = false;
+  isCalculatingAutoFit.value = true;
+
   // 立即计算并应用新的缩放比例，避免过渡期间露出底色
   // 使用 requestAnimationFrame 确保在浏览器重绘前更新
   requestAnimationFrame(() => {
@@ -2287,6 +2348,11 @@ const handleContainerResize = () => {
         scale.value = finalScale;
         initialAutoFitScale.value = finalScale;
       }
+      // 计算完成后，显示图片并隐藏 loading
+      isCalculatingAutoFit.value = false;
+      requestAnimationFrame(() => {
+        isImageReady.value = true;
+      });
     }, 350); // 350ms 延迟，略大于过渡动画时间（300ms），确保过渡完成后稳定
   });
 };
@@ -2300,18 +2366,44 @@ 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;
   }
 
   // 监听容器尺寸变化（用于响应外部收起/展开操作）
@@ -2381,6 +2473,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;