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

package/package.json

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

package/preview/ImagePreview.vue

@@ -272,6 +272,15 @@ interface AnnotationInfo {
   createTime: number; // 创建时间戳
 }
 
+/**
+ * 高亮样式配置
+ */
+interface HighlightStyle {
+  backgroundColor?: string; // 背景色
+  border?: string; // 边框样式（如 "2px solid rgba(30, 144, 255, 0.8)"）
+  boxShadow?: string; // 阴影样式
+}
+
 const props = defineProps({
   // 支持单个URL（向后兼容）或URL数组
   url: {
@@ -1112,9 +1121,13 @@ const renderTextLayer = (pageNum?: number) => {
           hideTimer = null;
         }
 
-        // 如果有之前激活的文本块，先恢复其样式
-        if (activeBlockDiv.value && activeBlockDiv.value !== blockDiv) {
-          restoreBlockStyle(activeBlockDiv.value);
+        // 清除当前页面所有文本块的高亮样式（除了当前文本块）
+        // 这样可以防止多个文本块同时高亮的竞态条件
+        clearAllHighlights(blockDiv);
+        
+        // 清除跳转高亮标志（如果之前是通过跳转高亮的）
+        if (isHighlighted.value) {
+          isHighlighted.value = false;
         }
 
         // 设置当前文本块为激活状态
@@ -1130,7 +1143,10 @@ const renderTextLayer = (pageNum?: number) => {
           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 保持一致）
+          // 如果没有批注，先清除可能残留的样式，再设置 hover 样式（与 PdfPreview 保持一致）
+          blockDiv.style.removeProperty("background-color");
+          blockDiv.style.removeProperty("border");
+          blockDiv.style.removeProperty("box-shadow");
           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)";
@@ -1294,6 +1310,75 @@ const showAnnotationButtonForBlock = (
   }
 };
 
+/**
+ * 清除指定页面所有文本块的高亮样式（除了指定的文本块）
+ * @param excludeBlockDiv 要排除的文本块（不清除它的样式）
+ * @param pageNum 要清除的页码，如果不提供则从 excludeBlockDiv 中获取
+ */
+const clearAllHighlights = (excludeBlockDiv?: HTMLElement, pageNum?: number) => {
+  // 确定要清除的页码
+  let targetPage = pageNum;
+  if (!targetPage && excludeBlockDiv) {
+    const pageStr = excludeBlockDiv.dataset.page;
+    targetPage = pageStr ? parseInt(pageStr, 10) : currentPage.value;
+  }
+  if (!targetPage) {
+    targetPage = currentPage.value;
+  }
+
+  const textLayer = textLayerRefs.get(targetPage);
+  if (!textLayer) return;
+
+  const blockDivs = textLayer.querySelectorAll(".text-block");
+  blockDivs.forEach((div) => {
+    const el = div as HTMLElement;
+    // 如果是指定的文本块，跳过
+    if (excludeBlockDiv && el === excludeBlockDiv) {
+      return;
+    }
+
+    // 检查是否有批注
+    const bboxStr = el.dataset.bbox;
+    if (!bboxStr) return;
+
+    try {
+      const bbox = JSON.parse(bboxStr) as [number, number, number, number];
+      const pageStr = el.dataset.page;
+      const pageNum = pageStr ? parseInt(pageStr, 10) : undefined;
+      const existingAnnotation = getAnnotationForBlock(bbox, pageNum);
+
+      if (existingAnnotation) {
+        // 如果有批注，恢复批注样式（不使用 hover 样式）
+        el.style.setProperty("background-color", "rgba(255, 243, 205, 0.5)", "important");
+        el.style.setProperty("border", "1px solid rgba(255, 193, 7, 0.7)", "important");
+        el.style.setProperty("border-radius", "3px", "important");
+        el.style.setProperty("padding", "1px 3px", "important");
+        el.style.setProperty("box-shadow", "0 1px 2px rgba(255, 193, 7, 0.25)", "important");
+      } else {
+        // 如果没有批注，清除所有高亮样式
+        el.style.backgroundColor = "transparent";
+        el.style.border = "none";
+        el.style.borderRadius = "2px";
+        el.style.padding = "0";
+        el.style.boxShadow = "none";
+        el.style.removeProperty("background-color");
+        el.style.removeProperty("border");
+        el.style.removeProperty("box-shadow");
+      }
+    } catch (error) {
+      // 如果解析失败，清除所有高亮样式
+      el.style.backgroundColor = "transparent";
+      el.style.border = "none";
+      el.style.borderRadius = "2px";
+      el.style.padding = "0";
+      el.style.boxShadow = "none";
+      el.style.removeProperty("background-color");
+      el.style.removeProperty("border");
+      el.style.removeProperty("box-shadow");
+    }
+  });
+};
+
 /**
  * 恢复文本块样式（根据是否有批注）
  */
@@ -1349,19 +1434,29 @@ const restoreBlockStyle = (blockDiv: HTMLElement) => {
         computedAfter: window.getComputedStyle(blockDiv).backgroundColor,
       });
     } else {
-      // 如果没有批注，恢复透明背景
+      // 如果没有批注，恢复透明背景（清除所有高亮相关样式）
       blockDiv.style.backgroundColor = "transparent";
       blockDiv.style.border = "none";
+      blockDiv.style.borderRadius = "2px"; // 恢复默认值
       blockDiv.style.padding = "0";
       blockDiv.style.boxShadow = "none";
+      // 清除可能残留的样式属性
+      blockDiv.style.removeProperty("background-color");
+      blockDiv.style.removeProperty("border");
+      blockDiv.style.removeProperty("box-shadow");
     }
   } catch (error) {
     console.error("restoreBlockStyle 错误:", error);
-    // 如果解析失败，恢复透明背景
+    // 如果解析失败，恢复透明背景（清除所有高亮相关样式）
     blockDiv.style.backgroundColor = "transparent";
     blockDiv.style.border = "none";
+    blockDiv.style.borderRadius = "2px"; // 恢复默认值
     blockDiv.style.padding = "0";
     blockDiv.style.boxShadow = "none";
+    // 清除可能残留的样式属性
+    blockDiv.style.removeProperty("background-color");
+    blockDiv.style.removeProperty("border");
+    blockDiv.style.removeProperty("box-shadow");
   }
 };
 
@@ -1399,19 +1494,32 @@ const hideAnnotationButton = () => {
             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.borderRadius = "2px"; // 恢复默认值
             activeBlockDiv.value.style.padding = "0";
             activeBlockDiv.value.style.boxShadow = "none";
+            // 清除可能残留的样式属性
+            activeBlockDiv.value.style.removeProperty("background-color");
+            activeBlockDiv.value.style.removeProperty("border");
+            activeBlockDiv.value.style.removeProperty("box-shadow");
           }
         } catch (error) {
+          // 如果解析失败，恢复透明背景（清除所有高亮相关样式）
           activeBlockDiv.value.style.backgroundColor = "transparent";
           activeBlockDiv.value.style.border = "none";
+          activeBlockDiv.value.style.borderRadius = "2px"; // 恢复默认值
           activeBlockDiv.value.style.padding = "0";
           activeBlockDiv.value.style.boxShadow = "none";
+          // 清除可能残留的样式属性
+          activeBlockDiv.value.style.removeProperty("background-color");
+          activeBlockDiv.value.style.removeProperty("border");
+          activeBlockDiv.value.style.removeProperty("box-shadow");
         }
       }
+      // 清除高亮标志
+      isHighlighted.value = false;
       activeBlockDiv.value = null;
     }
   }, 300);
@@ -1732,10 +1840,55 @@ const handleScroll = (e: Event) => {
 // 记录上次滚动位置，用于判断滚动方向
 let lastScrollTop = 0;
 
+/**
+ * 根据滚动位置更新当前页码
+ * 通过找到距离视口中心最近的页面来确定当前页
+ * 使用 getBoundingClientRect() 获取实际渲染位置（考虑了 transform: scale）
+ */
+const updateCurrentPageFromScroll = () => {
+  if (!containerRef.value) return;
+
+  const container = containerRef.value;
+  const containerRect = container.getBoundingClientRect();
+  const containerTop = containerRect.top;
+  const containerHeight = container.clientHeight;
+  const containerCenter = containerTop + containerHeight / 2;
+
+  // 遍历所有页面，找到距离视口中心最近的页面
+  let closestPage = 1;
+  let closestDistance = Infinity;
+
+  for (let pageNum = 1; pageNum <= totalPages.value; pageNum++) {
+    const pageElement = container.querySelector(
+      `[data-page-number="${pageNum}"]`
+    ) as HTMLElement;
+
+    if (pageElement) {
+      // 使用 getBoundingClientRect() 获取实际渲染位置（考虑了 transform: scale）
+      // 而不是使用 offsetTop（不考虑 transform）
+      const pageRect = pageElement.getBoundingClientRect();
+      const pageTop = pageRect.top;
+      const pageHeight = pageRect.height;
+      const pageCenter = pageTop + pageHeight / 2;
+      const distance = Math.abs(pageCenter - containerCenter);
+
+      if (distance < closestDistance) {
+        closestDistance = distance;
+        closestPage = pageNum;
+      }
+    }
+  }
+
+  // 只有当页码真正改变时才更新
+  if (closestPage !== currentPage.value) {
+    currentPage.value = closestPage;
+    emit("page-change", closestPage, totalPages.value);
+  }
+};
+
 /**
  * 处理滚动翻页（通过滚动位置判断当前页）
- * 向下滑动：当视口顶部到达下一页的顶部时，切换到下一页
- * 向上滑动：当视口底部到达上一页的底部时，切换到上一页
+ * 使用视口中心最近的页面来确定当前页，更准确
  */
 const handleScrollPaging = (e: Event) => {
   const container = e.target as HTMLElement;
@@ -1758,73 +1911,8 @@ const handleScrollPaging = (e: Event) => {
       return;
     }
 
-    const scrollTop = container.scrollTop;
-    const clientHeight = container.clientHeight;
-    const scrollBottom = scrollTop + clientHeight;
-    
-    // 判断滚动方向
-    const isScrollingDown = scrollTop > lastScrollTop;
-    lastScrollTop = scrollTop;
-
-    // 获取当前页的元素
-    const currentPageElement = container.querySelector(
-      `[data-page-number="${currentPage.value}"]`
-    ) as HTMLElement;
-    
-    if (!currentPageElement) return;
-
-    const currentPageTop = currentPageElement.offsetTop;
-    const currentPageHeight = currentPageElement.offsetHeight;
-    const currentPageBottom = currentPageTop + currentPageHeight;
-
-    let newPage = currentPage.value;
-
-    if (isScrollingDown) {
-      // 向下滑动：当视口顶部到达或超过下一页的顶部时，切换到下一页
-      if (currentPage.value < totalPages.value) {
-        const nextPageElement = container.querySelector(
-          `[data-page-number="${currentPage.value + 1}"]`
-        ) as HTMLElement;
-        
-        if (nextPageElement) {
-          const nextPageTop = nextPageElement.offsetTop;
-          // 当视口顶部到达或超过下一页的顶部时，切换到下一页
-          if (scrollTop >= nextPageTop) {
-            newPage = currentPage.value + 1;
-          }
-        }
-      }
-    } else {
-      // 向上滑动：当视口底部到达或超过上一页的底部时，切换到上一页
-      if (currentPage.value > 1) {
-        const prevPageElement = container.querySelector(
-          `[data-page-number="${currentPage.value - 1}"]`
-        ) as HTMLElement;
-        
-        if (prevPageElement) {
-          const prevPageTop = prevPageElement.offsetTop;
-          const prevPageHeight = prevPageElement.offsetHeight;
-          const prevPageBottom = prevPageTop + prevPageHeight;
-          
-          // 当视口底部到达或超过上一页的底部时，切换到上一页
-          if (scrollBottom <= prevPageBottom) {
-            newPage = currentPage.value - 1;
-          }
-        }
-      }
-    }
-
-    // 如果页码发生变化，更新当前页
-    if (newPage !== currentPage.value) {
-      isScrollPaging.value = true;
-      currentPage.value = newPage;
-      emit("page-change", newPage, totalPages.value);
-      
-      // 延迟解锁，确保页面切换完成
-      setTimeout(() => {
-        isScrollPaging.value = false;
-      }, 100);
-    }
+    // 更新当前页码（基于视口中心最近的页面）
+    updateCurrentPageFromScroll();
   }, 100);
 };
 
@@ -1856,12 +1944,14 @@ const isElementVisible = (
 const highlightPosition = (
   pageNum: number,
   bbox: [number, number, number, number],
-  shouldScroll: boolean = true
+  shouldScroll: boolean = true,
+  highlightStyle?: HighlightStyle
 ): boolean => {
   // 清除之前的高亮
   if (activeBlockDiv.value) {
     activeBlockDiv.value.style.backgroundColor = "transparent";
     activeBlockDiv.value.style.boxShadow = "none";
+    activeBlockDiv.value.style.border = "none";
     activeBlockDiv.value = null;
   }
   isHighlighted.value = false;
@@ -1916,7 +2006,7 @@ const highlightPosition = (
     // 等待页面切换完成后再高亮
     nextTick(() => {
       setTimeout(() => {
-        highlightPosition(pageNum, bbox, shouldScroll);
+        highlightPosition(pageNum, bbox, shouldScroll, highlightStyle);
       }, 300);
     });
     return true;
@@ -1928,10 +2018,24 @@ const highlightPosition = (
   activeBlockDiv.value = elementRef;
   isHighlighted.value = true;
 
-  // 使用一致的高亮样式
-  elementRef.style.backgroundColor =
-    "var(--s-color-brand-primary-transparent-3, rgba(0, 102, 255, .15))";
-  elementRef.style.boxShadow = "0 0 0 2px rgba(30, 144, 255, 0.6)";
+  // 使用传入的高亮样式，如果没有传入则使用默认样式
+  if (highlightStyle) {
+    if (highlightStyle.backgroundColor) {
+      elementRef.style.backgroundColor = highlightStyle.backgroundColor;
+    }
+    if (highlightStyle.border) {
+      elementRef.style.border = highlightStyle.border;
+    }
+    if (highlightStyle.boxShadow) {
+      elementRef.style.boxShadow = highlightStyle.boxShadow;
+    }
+  } else {
+    // 默认高亮样式
+    elementRef.style.backgroundColor =
+      "var(--s-color-brand-primary-transparent-3, rgba(0, 102, 255, .15))";
+    elementRef.style.boxShadow = "0 0 0 2px rgba(30, 144, 255, 0.6)";
+    elementRef.style.border = "none";
+  }
 
   // 只有在需要滚动且元素不在视口内时才滚动
   if (shouldScroll && containerRef.value) {
@@ -1946,6 +2050,7 @@ const highlightPosition = (
     if (activeBlockDiv.value === elementRef && isHighlighted.value) {
       elementRef.style.backgroundColor = "transparent";
       elementRef.style.boxShadow = "none";
+      elementRef.style.border = "none";
       activeBlockDiv.value = null;
       isHighlighted.value = false;
     }
@@ -1963,7 +2068,8 @@ const highlightPosition = (
 const jumpToPosition = (
   pageNum: number,
   bbox: [number, number, number, number],
-  emitEvent: boolean = true
+  emitEvent: boolean = true,
+  highlightStyle?: HighlightStyle
 ) => {
   // 如果页码不在有效范围内，直接返回
   if (pageNum < 1 || pageNum > totalPages.value) {
@@ -1978,7 +2084,7 @@ const jumpToPosition = (
     const retryDelay = 200;
 
     const tryHighlight = () => {
-      const success = highlightPosition(pageNum, bbox, true);
+      const success = highlightPosition(pageNum, bbox, true, highlightStyle);
       if (success) {
         // 高亮成功，触发事件
         if (emitEvent) {

package/preview/index.vue

@@ -483,14 +483,14 @@ defineExpose({
   getCurrentPreview: getCurrentPreviewRef,
   // PDF 预览的代理方法（方便使用）
   goToPage: (pageNum) => pdfPreviewRef.value?.goToPage(pageNum),
-  jumpToPosition: (pageNum, bbox, emitEvent) => {
+  jumpToPosition: (pageNum, bbox, emitEvent, highlightStyle) => {
     // PDF 预览的定位方法
     if (fileType.value === 'pdf' && pdfPreviewRef.value) {
-      return pdfPreviewRef.value.jumpToPosition(pageNum, bbox, emitEvent);
+      return pdfPreviewRef.value.jumpToPosition(pageNum, bbox, emitEvent, highlightStyle);
     }
-    // 图片预览的定位方法（现在也支持 pageNum）
+    // 图片预览的定位方法（现在也支持 pageNum 和 highlightStyle）
     if (fileType.value === 'image' && imagePreviewRef.value) {
-      return imagePreviewRef.value.jumpToPosition(pageNum, bbox, emitEvent);
+      return imagePreviewRef.value.jumpToPosition(pageNum, bbox, emitEvent, highlightStyle);
     }
   },
   getCurrentPage: () => pdfPreviewRef.value?.getCurrentPage(),