@koi-br/ocr-web-sdk 1.0.28 → 1.0.30

package/package.json

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

package/preview/ImagePreview.vue

@@ -395,6 +395,9 @@ const annotationButtonRef = ref<HTMLElement>();
 // 图片尺寸（存储每页的尺寸）
 const imageSizes = new Map<number, { width: number; height: number }>();
 
+// 已渲染的页面集合（用于跟踪哪些页面已渲染）
+const renderedPages = ref<Set<number>>(new Set());
+
 // 设置图片引用
 const setImageRef = (el: any, pageNum: number) => {
   if (el) {
@@ -426,12 +429,18 @@ const imageSize = computed({
 });
 
 // 计算图片放大后的实际尺寸（考虑旋转）
+// 在自适应宽度模式下，使用第一页的尺寸；否则使用当前页的尺寸
 const scaledImageSize = computed(() => {
-  if (imageSize.value.width === 0 || imageSize.value.height === 0) {
+  // 如果启用自适应宽度，使用第一页的尺寸作为基准
+  const baseSize = props.autoFitWidth 
+    ? (imageSizes.get(1) || { width: 0, height: 0 })
+    : imageSize.value;
+    
+  if (baseSize.width === 0 || baseSize.height === 0) {
     return { width: 0, height: 0 };
   }
 
-  const { width, height } = imageSize.value;
+  const { width, height } = baseSize;
   const scaledWidth = width * scale.value;
   const scaledHeight = height * scale.value;
 
@@ -817,6 +826,9 @@ const reset = () => {
   annotationInput.value = "";
   activeBlockDiv.value = null;
   isHighlighted.value = false;
+  
+  // 清除已渲染页面集合
+  renderedPages.value.clear();
 };
 
 const original = () => {
@@ -825,11 +837,13 @@ const original = () => {
 
 // 计算自适应宽度的缩放比例
 const calculateAutoFitScale = () => {
-  if (
-    !props.autoFitWidth ||
-    !containerRef.value ||
-    imageSize.value.width === 0
-  ) {
+  if (!props.autoFitWidth || !containerRef.value) {
+    return 1;
+  }
+
+  // 使用第一页的图片尺寸作为基准（所有页面使用相同的缩放比例）
+  const firstPageSize = imageSizes.get(1);
+  if (!firstPageSize || firstPageSize.width === 0) {
     return 1;
   }
 
@@ -846,7 +860,7 @@ const calculateAutoFitScale = () => {
   const normalizedRotation = ((rotation.value % 360) + 360) % 360;
   const isRotated = normalizedRotation === 90 || normalizedRotation === 270;
 
-  const imageWidth = isRotated ? imageSize.value.height : imageSize.value.width;
+  const imageWidth = isRotated ? firstPageSize.height : firstPageSize.width;
 
   if (imageWidth <= 0) {
     return 1;
@@ -884,10 +898,18 @@ const onImageLoad = (event: Event, pageNum: number) => {
             scale.value = autoScale;
             initialAutoFitScale.value = autoScale; // 记录初始自适应缩放比例
           }
-        }, 50);
+        }, 100); // 增加延迟，确保所有图片都已加载
       });
     });
   }
+  
+  // 如果第一页已经加载完成，且当前页不是第一页，也应用自适应宽度
+  if (pageNum > 1 && props.autoFitWidth && initialAutoFitScale.value !== null) {
+    // 确保后续页面也使用相同的缩放比例
+    if (Math.abs(scale.value - initialAutoFitScale.value) > 0.01) {
+      scale.value = initialAutoFitScale.value;
+    }
+  }
 
   emit("load", {
     width: img.naturalWidth,
@@ -959,7 +981,7 @@ const calculateFontSize = (
 };
 
 /**
- * 渲染文本图层（使用 blocksData 数据）
+ * 渲染文本图层
  */
 const renderTextLayer = (pageNum?: number) => {
   const targetPage = pageNum || currentPage.value;
@@ -970,15 +992,35 @@ const renderTextLayer = (pageNum?: number) => {
     return;
   }
 
+  // 如果图片还没加载完成，等待加载完成后再渲染
+  if (!image.complete || image.naturalWidth === 0) {
+    return;
+  }
+
+  // 如果没有提供分块数据，跳过渲染（不标记为已渲染）
+  if (!props.blocksData || props.blocksData.length === 0) {
+    return;
+  }
+
   const pageBlocksData = getPageBlocksData(targetPage);
-  console.log("renderTextLayer", targetPage, pageBlocksData);
 
-  // 如果没有提供分块数据，跳过渲染
+  // 如果当前页面没有数据，跳过渲染（不标记为已渲染）
   if (!pageBlocksData || pageBlocksData.length === 0) {
-    textLayer.innerHTML = "";
     return;
   }
 
+  // 如果页面已渲染且用户正在交互，跳过渲染（避免打断用户）
+  if (renderedPages.value.has(targetPage) && showAnnotationPopup.value) {
+    return;
+  }
+
+  // 如果页面已渲染，但当前有数据，需要检查是否真的渲染过
+  // 如果textLayer是空的，说明之前没有真正渲染过，应该重新渲染
+  if (renderedPages.value.has(targetPage) && textLayer.children.length === 0) {
+    // 从已渲染集合中移除，允许重新渲染
+    renderedPages.value.delete(targetPage);
+  }
+
   try {
     // 设置文本图层的尺寸与图片尺寸一致
     textLayer.style.width = `${image.naturalWidth}px`;
@@ -987,7 +1029,19 @@ const renderTextLayer = (pageNum?: number) => {
     // 清空文本图层
     textLayer.innerHTML = "";
 
-    // 使用指定页码的 blocksData 创建可交互的块
+    // 如果清空前有激活的文本块，且该文本块属于当前页面，则清除引用
+    if (activeBlockDiv.value) {
+      const activePageElement = activeBlockDiv.value.closest(
+        ".image-page-container"
+      );
+      const currentPageElement = textLayer.closest(".image-page-container");
+      if (activePageElement === currentPageElement) {
+        activeBlockDiv.value = null;
+        showAnnotationPopup.value = false;
+      }
+    }
+
+    // 使用 blocksData 数据创建可交互的块
     pageBlocksData.forEach((block, index) => {
       const { content, bbox } = block;
 
@@ -996,14 +1050,11 @@ const renderTextLayer = (pageNum?: number) => {
       const width = x2 - x1;
       const height = y2 - y1;
 
-      // 自动计算字体大小
-      const calculatedFontSize = calculateFontSize(content, width, height);
-
-      // 创建文本块
+      // 创建文本块（不显示内容，只用于 hover 交互和批注功能）
       const blockDiv = document.createElement("div");
       blockDiv.className = "text-block";
-      blockDiv.dataset.text = content;
       blockDiv.dataset.bbox = JSON.stringify(bbox);
+      blockDiv.dataset.page = String(targetPage);
 
       // 设置基础样式
       blockDiv.style.position = "absolute";
@@ -1011,38 +1062,16 @@ const renderTextLayer = (pageNum?: number) => {
       blockDiv.style.top = `${y1}px`;
       blockDiv.style.width = `${width}px`;
       blockDiv.style.height = `${height}px`;
-      blockDiv.style.zIndex = "20"; // 确保文本块在图片上方
-      blockDiv.style.cursor = "text"; // 改为文本选择光标
-      // 设置文本内容（使用 textContent 而不是 innerHTML，避免 XSS 风险）
-      blockDiv.textContent = content;
-      // 设置文本样式，确保可以选择和显示
-      blockDiv.style.color = "red"; // 红色文字
-      blockDiv.style.fontSize = `${calculatedFontSize}px`; // 使用计算出的字体大小
-      blockDiv.style.fontFamily = "Arial, sans-serif"; // 设置明确的字体
-      blockDiv.style.lineHeight = "1.2"; // 设置合适的行高
-      blockDiv.style.whiteSpace = "pre-wrap"; // 保留换行和空格
-      blockDiv.style.overflow = "visible"; // 确保文字不被裁剪
-      blockDiv.style.display = "block"; // 确保是块级元素
-      blockDiv.style.visibility = "visible"; // 确保可见
-      // 允许文本选择
-      blockDiv.style.userSelect = "text";
-      blockDiv.style.webkitUserSelect = "text";
-      blockDiv.style.mozUserSelect = "text";
-      blockDiv.style.msUserSelect = "text";
-      // 允许指针事件，但不阻止文本选择
+      blockDiv.style.zIndex = "20";
+      blockDiv.style.cursor = "pointer";
+      blockDiv.style.borderRadius = "2px";
+      blockDiv.style.transition = "all 0.2s ease";
+      blockDiv.style.backgroundColor = "transparent";
       blockDiv.style.pointerEvents = "auto";
-
-      // 右键菜单：显示批注按钮
-      blockDiv.addEventListener("contextmenu", (e) => {
-        e.preventDefault();
-        // 设置当前文本块为激活状态
-        activeBlockDiv.value = blockDiv;
-        // 显示批注按钮
-        showAnnotationButtonForBlock(e, blockDiv);
-      });
+      blockDiv.style.userSelect = "none";
 
       // 检查是否有已有批注，如果有则显示批注标记
-      const existingAnnotation = getAnnotationForBlock(bbox);
+      const existingAnnotation = getAnnotationForBlock(bbox, targetPage);
       if (existingAnnotation) {
         // 添加批注标记样式类
         blockDiv.classList.add("has-annotation");
@@ -1073,13 +1102,57 @@ const renderTextLayer = (pageNum?: number) => {
         annotationMarker.style.boxShadow = "0 1px 3px rgba(0, 0, 0, 0.25)";
         annotationMarker.style.lineHeight = "1";
         blockDiv.appendChild(annotationMarker);
-      } else {
-        // 没有批注时设置为透明背景
-        blockDiv.style.backgroundColor = "transparent";
       }
 
+      // Hover 和点击事件
+      blockDiv.addEventListener("mouseenter", (e) => {
+        // 取消之前的隐藏定时器
+        if (hideTimer) {
+          clearTimeout(hideTimer);
+          hideTimer = null;
+        }
+
+        // 如果有之前激活的文本块，先恢复其样式
+        if (activeBlockDiv.value && activeBlockDiv.value !== blockDiv) {
+          restoreBlockStyle(activeBlockDiv.value);
+        }
+
+        // 设置当前文本块为激活状态
+        activeBlockDiv.value = blockDiv;
+
+        // 检查是否有批注，如果有批注，hover 时在批注样式基础上添加蓝色边框
+        const existingAnnotation = getAnnotationForBlock(bbox, targetPage);
+        if (existingAnnotation) {
+          // 如果有批注，保持批注背景色，但添加蓝色边框表示 hover
+          blockDiv.style.setProperty("background-color", "rgba(255, 243, 205, 0.5)", "important");
+          blockDiv.style.setProperty("border", "2px solid rgba(30, 144, 255, 0.8)", "important");
+          blockDiv.style.setProperty("border-radius", "3px", "important");
+          blockDiv.style.setProperty("padding", "1px 3px", "important");
+          blockDiv.style.setProperty("box-shadow", "0 0 0 2px rgba(30, 144, 255, 0.6), 0 1px 2px rgba(255, 193, 7, 0.25)", "important");
+        } else {
+          // 如果没有批注，使用 hover 样式（与 PdfPreview 保持一致）
+          blockDiv.style.backgroundColor =
+            "var(--s-color-brand-primary-transparent-3, rgba(0, 102, 255, .15))";
+          blockDiv.style.boxShadow = "0 0 0 2px rgba(30, 144, 255, 0.6)";
+          blockDiv.style.borderRadius = "2px";
+          blockDiv.style.padding = "1px 3px";
+          blockDiv.style.border = "none";
+        }
+
+        // 显示批注按钮浮层
+        showAnnotationButtonForBlock(e, blockDiv);
+      });
+
+      blockDiv.addEventListener("mouseleave", () => {
+        // 延迟隐藏，给用户时间移动到批注按钮
+        hideAnnotationButton();
+      });
+
       textLayer.appendChild(blockDiv);
     });
+
+    // 标记该页面已渲染
+    renderedPages.value.add(targetPage);
   } catch (error) {
     console.error("❌ 文本图层渲染失败:", error);
   }
@@ -1089,12 +1162,14 @@ const renderTextLayer = (pageNum?: number) => {
  * 获取文本块对应的批注
  */
 const getAnnotationForBlock = (
-  bbox: [number, number, number, number]
+  bbox: [number, number, number, number],
+  pageNum?: number
 ): AnnotationInfo | null => {
   if (!props.annotations || props.annotations.length === 0) {
     return null;
   }
 
+  const targetPage = pageNum !== undefined ? pageNum : currentPage.value;
   const tolerance = 2; // 容差
   return (
     props.annotations.find((annotation) => {
@@ -1105,7 +1180,7 @@ const getAnnotationForBlock = (
         Math.abs(x2 - bbox[2]) < tolerance &&
         Math.abs(y2 - bbox[3]) < tolerance &&
         (annotation.blockPage === undefined ||
-          annotation.blockPage === currentPage.value)
+          annotation.blockPage === targetPage)
       );
     }) || null
   );
@@ -1118,12 +1193,26 @@ const showAnnotationButtonForBlock = (
   event: MouseEvent,
   blockDiv: HTMLElement
 ) => {
-  const text = blockDiv.dataset.text || "";
   const bboxStr = blockDiv.dataset.bbox || "";
-  if (!text || !bboxStr) return;
+  if (!bboxStr) return;
 
   try {
     const bbox = JSON.parse(bboxStr) as [number, number, number, number];
+    
+    // 从 blocksData 中查找对应的 content
+    const pageBlocksData = getPageBlocksData(currentPage.value);
+    const blockData = pageBlocksData.find((block) => {
+      const [x1, y1, x2, y2] = block.bbox;
+      const tolerance = 2;
+      return (
+        Math.abs(x1 - bbox[0]) < tolerance &&
+        Math.abs(y1 - bbox[1]) < tolerance &&
+        Math.abs(x2 - bbox[2]) < tolerance &&
+        Math.abs(y2 - bbox[3]) < tolerance
+      );
+    });
+    
+    if (!blockData) return;
 
     const rect = blockDiv.getBoundingClientRect();
     const containerRect = containerRef.value?.getBoundingClientRect();
@@ -1206,7 +1295,78 @@ const showAnnotationButtonForBlock = (
 };
 
 /**
- * 隐藏批注按钮
+ * 恢复文本块样式（根据是否有批注）
+ */
+const restoreBlockStyle = (blockDiv: HTMLElement) => {
+  const bboxStr = blockDiv.dataset.bbox;
+  if (!bboxStr) {
+    console.log("restoreBlockStyle: 没有 bbox");
+    return;
+  }
+
+  try {
+    const bbox = JSON.parse(bboxStr) as [number, number, number, number];
+    const pageStr = blockDiv.dataset.page;
+    const pageNum = pageStr ? parseInt(pageStr, 10) : undefined;
+    const existingAnnotation = getAnnotationForBlock(bbox, pageNum);
+
+    console.log("restoreBlockStyle:", {
+      bbox,
+      pageNum,
+      existingAnnotation,
+      blockDiv: blockDiv,
+      width: blockDiv.style.width,
+      height: blockDiv.style.height,
+      computedStyle: {
+        backgroundColor: window.getComputedStyle(blockDiv).backgroundColor,
+        width: window.getComputedStyle(blockDiv).width,
+        height: window.getComputedStyle(blockDiv).height,
+        display: window.getComputedStyle(blockDiv).display,
+        visibility: window.getComputedStyle(blockDiv).visibility,
+      },
+      inlineStyle: {
+        backgroundColor: blockDiv.style.backgroundColor,
+        border: blockDiv.style.border,
+      },
+    });
+
+    if (existingAnnotation) {
+      // 如果有批注，保持批注样式（使用 !important 确保优先级）
+      blockDiv.style.setProperty("background-color", "rgba(255, 243, 205, 0.5)", "important");
+      blockDiv.style.setProperty("border", "1px solid rgba(255, 193, 7, 0.7)", "important");
+      blockDiv.style.setProperty("border-radius", "3px", "important");
+      blockDiv.style.setProperty("padding", "1px 3px", "important");
+      blockDiv.style.setProperty("box-shadow", "0 1px 2px rgba(255, 193, 7, 0.25)", "important");
+      
+      // 确保元素可见
+      blockDiv.style.setProperty("display", "block", "important");
+      blockDiv.style.setProperty("visibility", "visible", "important");
+      blockDiv.style.setProperty("opacity", "1", "important");
+      
+      console.log("restoreBlockStyle: 已设置批注样式", {
+        backgroundColor: blockDiv.style.backgroundColor,
+        border: blockDiv.style.border,
+        computedAfter: window.getComputedStyle(blockDiv).backgroundColor,
+      });
+    } else {
+      // 如果没有批注，恢复透明背景
+      blockDiv.style.backgroundColor = "transparent";
+      blockDiv.style.border = "none";
+      blockDiv.style.padding = "0";
+      blockDiv.style.boxShadow = "none";
+    }
+  } catch (error) {
+    console.error("restoreBlockStyle 错误:", error);
+    // 如果解析失败，恢复透明背景
+    blockDiv.style.backgroundColor = "transparent";
+    blockDiv.style.border = "none";
+    blockDiv.style.padding = "0";
+    blockDiv.style.boxShadow = "none";
+  }
+};
+
+/**
+ * 隐藏批注按钮和高亮
  */
 const hideAnnotationButton = () => {
   // 如果正在输入批注，不自动隐藏
@@ -1217,9 +1377,41 @@ const hideAnnotationButton = () => {
   hideTimer = setTimeout(() => {
     showAnnotationPopup.value = false;
 
-    if (activeBlockDiv.value && !isHighlighted.value) {
-      activeBlockDiv.value.style.backgroundColor = "transparent";
-      activeBlockDiv.value.style.boxShadow = "none";
+    // 恢复文本块的样式（如果有批注则保持批注样式）
+    if (activeBlockDiv.value) {
+      const bboxStr = activeBlockDiv.value.dataset.bbox;
+      if (bboxStr) {
+        try {
+          const bbox = JSON.parse(bboxStr) as [
+            number,
+            number,
+            number,
+            number
+          ];
+          const existingAnnotation = getAnnotationForBlock(bbox);
+          if (existingAnnotation) {
+            // 如果有批注，恢复批注样式
+            activeBlockDiv.value.style.backgroundColor =
+              "rgba(255, 243, 205, 0.5)";
+            activeBlockDiv.value.style.border =
+              "1px solid rgba(255, 193, 7, 0.7)";
+            activeBlockDiv.value.style.padding = "1px 3px";
+            activeBlockDiv.value.style.boxShadow =
+              "0 1px 2px rgba(255, 193, 7, 0.25)";
+          } else {
+            // 如果没有批注，恢复透明背景
+            activeBlockDiv.value.style.backgroundColor = "transparent";
+            activeBlockDiv.value.style.border = "none";
+            activeBlockDiv.value.style.padding = "0";
+            activeBlockDiv.value.style.boxShadow = "none";
+          }
+        } catch (error) {
+          activeBlockDiv.value.style.backgroundColor = "transparent";
+          activeBlockDiv.value.style.border = "none";
+          activeBlockDiv.value.style.padding = "0";
+          activeBlockDiv.value.style.boxShadow = "none";
+        }
+      }
       activeBlockDiv.value = null;
     }
   }, 300);
@@ -1244,14 +1436,36 @@ const openAnnotationInput = (e?: Event) => {
     e.stopPropagation();
   }
 
-  // 获取选中的文本
+  // 获取选中的文本或从文本块中获取
   const selection = window.getSelection();
   let selectedText = "";
 
   if (selection && selection.toString().trim().length > 0) {
     selectedText = selection.toString().trim();
   } else if (activeBlockDiv.value) {
-    selectedText = activeBlockDiv.value.dataset.text || "";
+    // 从 blocksData 中查找对应的 content
+    const bboxStr = activeBlockDiv.value.dataset.bbox || "";
+    if (bboxStr) {
+      try {
+        const bbox = JSON.parse(bboxStr) as [number, number, number, number];
+        const pageBlocksData = getPageBlocksData(currentPage.value);
+        const blockData = pageBlocksData.find((block) => {
+          const [x1, y1, x2, y2] = block.bbox;
+          const tolerance = 2;
+          return (
+            Math.abs(x1 - bbox[0]) < tolerance &&
+            Math.abs(y1 - bbox[1]) < tolerance &&
+            Math.abs(x2 - bbox[2]) < tolerance &&
+            Math.abs(y2 - bbox[3]) < tolerance
+          );
+        });
+        if (blockData) {
+          selectedText = blockData.content || "";
+        }
+      } catch (error) {
+        console.error("解析 bbox 失败:", error);
+      }
+    }
   }
 
   if (!selectedText && !activeBlockDiv.value) return;
@@ -1412,6 +1626,12 @@ const closeAnnotationInput = () => {
   currentAnnotationBlock.value = null;
   annotationInput.value = "";
   showAnnotationPopup.value = false;
+  
+  // 关闭批注输入弹窗后，恢复文本块的样式
+  if (activeBlockDiv.value && !isHighlighted.value) {
+    restoreBlockStyle(activeBlockDiv.value);
+    activeBlockDiv.value = null;
+  }
 };
 
 /**
@@ -1777,65 +1997,58 @@ const jumpToPosition = (
 };
 
 /**
- * 监听 blocksData 变化，重新渲染文本图层
+ * 监听 blocksData 变化，增量渲染所有页面的文本图层（避免闪烁）
  */
 watch(
   () => props.blocksData,
   () => {
     nextTick(() => {
-      renderTextLayer();
+      // 渲染所有页面的文本图层
+      for (let pageNum = 1; pageNum <= totalPages.value; pageNum++) {
+        renderTextLayer(pageNum);
+      }
     });
   },
-  { deep: true, immediate: false }
+  { deep: true, immediate: true }
 );
 
 /**
- * 监听 annotations 变化，重新渲染文本图层以显示批注标记
+ * 监听 annotations 变化，增量更新所有页面的文本图层以显示批注标记
  */
 watch(
   () => props.annotations,
   () => {
     nextTick(() => {
-      renderTextLayer();
+      // 更新所有页面的文本图层
+      for (let pageNum = 1; pageNum <= totalPages.value; pageNum++) {
+        renderTextLayer(pageNum);
+      }
     });
   },
   { deep: true }
 );
 
 /**
- * 监听当前页码变化，重新渲染文本图层
+ * 监听当前页码变化，确保当前页的文本图层已渲染
  */
 watch(
   () => currentPage.value,
   () => {
     nextTick(() => {
-      renderTextLayer();
+      renderTextLayer(currentPage.value);
     });
   }
 );
 
 /**
- * 监听当前页码的blocksData变化，重新渲染文本图层
- */
-watch(
-  () => currentPageBlocksData.value,
-  () => {
-    nextTick(() => {
-      renderTextLayer();
-    });
-  },
-  { deep: true }
-);
-
-/**
- * 监听图片尺寸变化，重新渲染文本图层
+ * 监听图片尺寸变化，重新渲染当前页的文本图层
  */
 watch(
   () => imageSize.value,
   () => {
     if (imageSize.value.width > 0 && imageSize.value.height > 0) {
       nextTick(() => {
-        renderTextLayer();
+        renderTextLayer(currentPage.value);
       });
     }
   },
@@ -1858,18 +2071,23 @@ watch(
  * 组件挂载时的初始化
  */
 onMounted(() => {
-  // 如果图片已经加载完成，立即渲染文本图层和自适应宽度
-  if (imageRef.value && imageRef.value.complete) {
-    nextTick(() => {
-      // 如果启用自适应宽度，计算并设置初始缩放比例
-      if (props.autoFitWidth && imageSize.value.width > 0) {
-        const autoScale = calculateAutoFitScale();
-        if (autoScale !== 1) {
-          scale.value = autoScale;
-        }
-      }
-      renderTextLayer();
-    });
+  // 如果第一页图片已经加载完成，立即计算自适应宽度
+  const firstPageImage = imageRefs.get(1);
+  if (firstPageImage && firstPageImage.complete && props.autoFitWidth) {
+    const firstPageSize = imageSizes.get(1);
+    if (firstPageSize && firstPageSize.width > 0) {
+      nextTick(() => {
+        nextTick(() => {
+          setTimeout(() => {
+            const autoScale = calculateAutoFitScale();
+            if (autoScale !== 1 && autoScale > 0) {
+              scale.value = autoScale;
+              initialAutoFitScale.value = autoScale;
+            }
+          }, 100);
+        });
+      });
+    }
   }
 });