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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koi-br/ocr-web-sdk",
-  "version": "1.0.36",
+  "version": "1.0.38",
   "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); // 标记用户是否主动缩放
 
 // 滚动翻页相关
@@ -841,10 +869,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
       });
     }
   }
@@ -930,6 +966,10 @@ const onImageLoad = (event: Event, pageNum: number) => {
   if (pageNum === 1 && props.autoFitWidth) {
     // 重置用户缩放标记
     isUserZooming.value = false;
+    
+    // 隐藏图片，显示 loading
+    isImageReady.value = false;
+    isCalculatingAutoFit.value = true;
 
     // 使用双重 nextTick 确保容器尺寸已确定
     nextTick(() => {
@@ -941,9 +981,18 @@ const onImageLoad = (event: Event, pageNum: number) => {
             scale.value = autoScale;
             initialAutoFitScale.value = autoScale; // 记录初始自适应缩放比例
           }
+          // 计算完成后，显示图片并隐藏 loading
+          isCalculatingAutoFit.value = false;
+          // 使用 requestAnimationFrame 确保在下一帧显示，避免闪烁
+          requestAnimationFrame(() => {
+            isImageReady.value = true;
+          });
         }, 100); // 增加延迟，确保所有图片都已加载
       });
     });
+  } else if (!props.autoFitWidth) {
+    // 如果没有启用自适应宽度，立即显示图片
+    isImageReady.value = true;
   }
   
   // 如果第一页已经加载完成，且当前页不是第一页，也应用自适应宽度
@@ -1840,6 +1889,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);
   }
@@ -1861,16 +1937,22 @@ const handleScroll = (e: Event) => {
     scale.value = initialAutoFitScale.value;
   }
 
-  // 滚动翻页功能
+  // 滚动翻页功能（用户主动滚动时）
   if (
     props.enableScrollPaging &&
     totalPages.value > 1 &&
     !isScrollPaging.value
   ) {
+    // 立即更新页码（使用 requestAnimationFrame 确保在渲染后更新）
+    requestAnimationFrame(() => {
+      updateCurrentPageFromScroll();
+    });
+    // 同时使用防抖处理其他逻辑（如事件触发）
     handleScrollPaging(e);
   }
 };
 
+
 // 记录上次滚动位置，用于判断滚动方向
 let lastScrollTop = 0;
 
@@ -1939,6 +2021,7 @@ const handleScrollPaging = (e: Event) => {
   }
 
   // 使用防抖，避免频繁触发
+  // 减少延迟到50ms，提高响应速度
   scrollPagingTimer = setTimeout(() => {
     // 再次检查是否正在翻页
     if (isScrollPaging.value) {
@@ -1947,7 +2030,7 @@ const handleScrollPaging = (e: Event) => {
 
     // 更新当前页码（基于视口中心最近的页面）
     updateCurrentPageFromScroll();
-  }, 100);
+  }, 50);
 };
 
 /**
@@ -2228,6 +2311,10 @@ const handleContainerResize = () => {
     resizeTimer = null;
   }
 
+  // 隐藏图片，显示 loading
+  isImageReady.value = false;
+  isCalculatingAutoFit.value = true;
+
   // 立即计算并应用新的缩放比例，避免过渡期间露出底色
   // 使用 requestAnimationFrame 确保在浏览器重绘前更新
   requestAnimationFrame(() => {
@@ -2245,6 +2332,11 @@ const handleContainerResize = () => {
         scale.value = finalScale;
         initialAutoFitScale.value = finalScale;
       }
+      // 计算完成后，显示图片并隐藏 loading
+      isCalculatingAutoFit.value = false;
+      requestAnimationFrame(() => {
+        isImageReady.value = true;
+      });
     }, 350); // 350ms 延迟，略大于过渡动画时间（300ms），确保过渡完成后稳定
   });
 };
@@ -2258,6 +2350,9 @@ onMounted(() => {
   if (firstPageImage && firstPageImage.complete && props.autoFitWidth) {
     const firstPageSize = imageSizes.get(1);
     if (firstPageSize && firstPageSize.width > 0) {
+      // 隐藏图片，显示 loading
+      isImageReady.value = false;
+      isCalculatingAutoFit.value = true;
       nextTick(() => {
         nextTick(() => {
           setTimeout(() => {
@@ -2266,10 +2361,18 @@ onMounted(() => {
               scale.value = autoScale;
               initialAutoFitScale.value = autoScale;
             }
+            // 计算完成后，显示图片并隐藏 loading
+            isCalculatingAutoFit.value = false;
+            requestAnimationFrame(() => {
+              isImageReady.value = true;
+            });
           }, 100);
         });
       });
     }
+  } else if (!props.autoFitWidth) {
+    // 如果没有启用自适应宽度，立即显示图片
+    isImageReady.value = true;
   }
 
   // 监听容器尺寸变化（用于响应外部收起/展开操作）
@@ -2339,6 +2442,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;