@koi-br/ocr-web-sdk 1.0.32 → 1.0.34

package/dist/{tiff.min-CehJk-e3.mjs → tiff.min-x7pMh_Bz.mjs}

@@ -1,4 +1,4 @@
-import { g as getAugmentedNamespace, a as getDefaultExportFromCjs } from "./index-Bf47RAC6.mjs";
+import { g as getAugmentedNamespace, a as getDefaultExportFromCjs } from "./index-DXnzd_-3.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.32",
+  "version": "1.0.34",
   "description": "一个支持多种Office文件格式预览的Vue3组件SDK，包括PDF、Word、Excel、图片、OFD、TIF等格式",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/preview/ImagePreview.vue

@@ -123,6 +123,7 @@
           :key="pageIndex"
           :data-page-number="pageIndex + 1"
           class="image-page-container"
+          :style="getPageContainerStyle(pageIndex + 1)"
         >
           <div
             class="image-wrapper"
@@ -395,6 +396,10 @@ const isUserZooming = ref(false); // 标记用户是否主动缩放
 let scrollPagingTimer: any = null;
 const isScrollPaging = ref(false); // 标记是否正在进行滚动翻页
 
+// ResizeObserver 相关
+let resizeObserver: ResizeObserver | null = null;
+let resizeTimer: any = null; // 防抖定时器
+
 // 图片和容器引用
 const containerRef = ref<HTMLElement>();
 const imageRefs = new Map<number, HTMLImageElement>();
@@ -514,6 +519,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;
 
@@ -2173,6 +2207,35 @@ watch(
   { deep: true }
 );
 
+/**
+ * 处理容器尺寸变化，重新计算自适应缩放比例
+ */
+const handleContainerResize = () => {
+  // 如果禁用了自适应宽度，或者用户主动缩放过，不自动调整
+  if (!props.autoFitWidth || isUserZooming.value) {
+    return;
+  }
+
+  // 如果第一页图片还没有加载完成，不处理
+  const firstPageSize = imageSizes.get(1);
+  if (!firstPageSize || firstPageSize.width === 0) {
+    return;
+  }
+
+  // 使用防抖，避免频繁计算
+  if (resizeTimer) {
+    clearTimeout(resizeTimer);
+  }
+
+  resizeTimer = setTimeout(() => {
+    const newScale = calculateAutoFitScale();
+    if (newScale > 0 && Math.abs(newScale - scale.value) > 0.01) {
+      scale.value = newScale;
+      initialAutoFitScale.value = newScale;
+    }
+  }, 150); // 150ms 防抖延迟
+};
+
 /**
  * 组件挂载时的初始化
  */
@@ -2195,6 +2258,19 @@ onMounted(() => {
       });
     }
   }
+
+  // 监听容器尺寸变化（用于响应外部收起/展开操作）
+  nextTick(() => {
+    if (containerRef.value && typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => {
+        handleContainerResize();
+      });
+      resizeObserver.observe(containerRef.value);
+    } else {
+      // 降级方案：监听窗口大小变化
+      window.addEventListener('resize', handleContainerResize);
+    }
+  });
 });
 
 /**
@@ -2209,6 +2285,16 @@ onBeforeUnmount(() => {
     clearTimeout(scrollPagingTimer);
     scrollPagingTimer = null;
   }
+  if (resizeTimer) {
+    clearTimeout(resizeTimer);
+    resizeTimer = null;
+  }
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+  // 移除窗口 resize 监听器（降级方案）
+  window.removeEventListener('resize', handleContainerResize);
 });
 
 defineExpose({