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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koi-br/ocr-web-sdk",
-  "version": "1.0.29",
+  "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) {
@@ -823,6 +826,9 @@ const reset = () => {
   annotationInput.value = "";
   activeBlockDiv.value = null;
   isHighlighted.value = false;
+  
+  // 清除已渲染页面集合
+  renderedPages.value.clear();
 };
 
 const original = () => {
@@ -975,7 +981,7 @@ const calculateFontSize = (
 };
 
 /**
- * 渲染文本图层（使用 blocksData 数据，支持增量渲染）
+ * 渲染文本图层
  */
 const renderTextLayer = (pageNum?: number) => {
   const targetPage = pageNum || currentPage.value;
@@ -991,33 +997,51 @@ const renderTextLayer = (pageNum?: number) => {
     return;
   }
 
-  const pageBlocksData = getPageBlocksData(targetPage);
-  console.log("renderTextLayer", targetPage, pageBlocksData);
+  // 如果没有提供分块数据，跳过渲染（不标记为已渲染）
+  if (!props.blocksData || props.blocksData.length === 0) {
+    return;
+  }
 
-  // 设置文本图层的尺寸与图片尺寸一致
-  textLayer.style.width = `${image.naturalWidth}px`;
-  textLayer.style.height = `${image.naturalHeight}px`;
+  const pageBlocksData = getPageBlocksData(targetPage);
 
-  // 如果没有提供分块数据，清空文本图层
+  // 如果当前页面没有数据，跳过渲染（不标记为已渲染）
   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 {
-    // 增量渲染：获取现有的文本块
-    const existingBlocks = new Map<string, HTMLElement>();
-    textLayer.querySelectorAll(".text-block").forEach((el) => {
-      const bboxStr = (el as HTMLElement).dataset.bbox;
-      if (bboxStr) {
-        existingBlocks.set(bboxStr, el as HTMLElement);
-      }
-    });
+    // 设置文本图层的尺寸与图片尺寸一致
+    textLayer.style.width = `${image.naturalWidth}px`;
+    textLayer.style.height = `${image.naturalHeight}px`;
+
+    // 清空文本图层
+    textLayer.innerHTML = "";
 
-    // 创建新的文本块 Map，用于跟踪需要保留的块
-    const newBlocksMap = new Map<string, boolean>();
+    // 如果清空前有激活的文本块，且该文本块属于当前页面，则清除引用
+    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 创建或更新可交互的块
+    // 使用 blocksData 数据创建可交互的块
     pageBlocksData.forEach((block, index) => {
       const { content, bbox } = block;
 
@@ -1026,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";
@@ -1041,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");
@@ -1103,82 +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";
       }
 
-      // 检查是否已存在相同的文本块（通过 bbox 匹配）
-      const bboxKey = JSON.stringify(bbox);
-      const existingBlock = existingBlocks.get(bboxKey);
-      
-      if (existingBlock) {
-        // 如果已存在，更新内容（增量更新，避免闪烁）
-        existingBlock.textContent = content;
-        existingBlock.dataset.text = content;
-        // 更新批注状态
-        const existingAnnotation = getAnnotationForBlock(bbox);
+      // 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) {
-          if (!existingBlock.classList.contains("has-annotation")) {
-            existingBlock.classList.add("has-annotation");
-            existingBlock.title = `已有批注: ${existingAnnotation.content}`;
-            existingBlock.style.backgroundColor = "rgba(255, 243, 205, 0.5)";
-            existingBlock.style.border = "1px solid rgba(255, 193, 7, 0.7)";
-            existingBlock.style.borderRadius = "3px";
-            existingBlock.style.padding = "1px 3px";
-            existingBlock.style.boxShadow = "0 1px 2px rgba(255, 193, 7, 0.25)";
-            
-            // 添加批注标记（如果还没有）
-            if (!existingBlock.querySelector(".annotation-marker")) {
-              const annotationMarker = document.createElement("span");
-              annotationMarker.className = "annotation-marker";
-              annotationMarker.textContent = "📝";
-              annotationMarker.style.position = "absolute";
-              annotationMarker.style.top = "-6px";
-              annotationMarker.style.right = "-6px";
-              annotationMarker.style.fontSize = "11px";
-              annotationMarker.style.backgroundColor = "rgba(255, 193, 7, 0.95)";
-              annotationMarker.style.borderRadius = "50%";
-              annotationMarker.style.width = "16px";
-              annotationMarker.style.height = "16px";
-              annotationMarker.style.display = "flex";
-              annotationMarker.style.alignItems = "center";
-              annotationMarker.style.justifyContent = "center";
-              annotationMarker.style.zIndex = "30";
-              annotationMarker.style.boxShadow = "0 1px 3px rgba(0, 0, 0, 0.25)";
-              annotationMarker.style.lineHeight = "1";
-              existingBlock.appendChild(annotationMarker);
-            }
-          }
+          // 如果有批注，保持批注背景色，但添加蓝色边框表示 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 {
-          // 移除批注标记
-          if (existingBlock.classList.contains("has-annotation")) {
-            existingBlock.classList.remove("has-annotation");
-            existingBlock.title = "";
-            existingBlock.style.backgroundColor = "transparent";
-            existingBlock.style.border = "none";
-            existingBlock.style.padding = "0";
-            existingBlock.style.boxShadow = "none";
-            const marker = existingBlock.querySelector(".annotation-marker");
-            if (marker) {
-              marker.remove();
-            }
-          }
+          // 如果没有批注，使用 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";
         }
-        newBlocksMap.set(bboxKey, true);
-      } else {
-        // 如果不存在，创建新的文本块
-        textLayer.appendChild(blockDiv);
-        newBlocksMap.set(bboxKey, true);
-      }
-    });
 
-    // 删除不再存在的文本块（增量删除）
-    existingBlocks.forEach((block, bboxKey) => {
-      if (!newBlocksMap.has(bboxKey)) {
-        block.remove();
-      }
+        // 显示批注按钮浮层
+        showAnnotationButtonForBlock(e, blockDiv);
+      });
+
+      blockDiv.addEventListener("mouseleave", () => {
+        // 延迟隐藏，给用户时间移动到批注按钮
+        hideAnnotationButton();
+      });
+
+      textLayer.appendChild(blockDiv);
     });
+
+    // 标记该页面已渲染
+    renderedPages.value.add(targetPage);
   } catch (error) {
     console.error("❌ 文本图层渲染失败:", error);
   }
@@ -1188,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) => {
@@ -1204,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
   );
@@ -1217,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();
@@ -1305,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 = () => {
   // 如果正在输入批注，不自动隐藏
@@ -1316,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);
@@ -1343,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;
@@ -1511,6 +1626,12 @@ const closeAnnotationInput = () => {
   currentAnnotationBlock.value = null;
   annotationInput.value = "";
   showAnnotationPopup.value = false;
+  
+  // 关闭批注输入弹窗后，恢复文本块的样式
+  if (activeBlockDiv.value && !isHighlighted.value) {
+    restoreBlockStyle(activeBlockDiv.value);
+    activeBlockDiv.value = null;
+  }
 };
 
 /**