@koi-br/ocr-web-sdk 1.0.51 → 1.0.52

package/dist/{tiff.min-BqIx66pA.mjs → tiff.min-CFrZ2Wj3.mjs}

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

package/preview/ImagePreview.vue

@@ -2059,7 +2059,6 @@ const saveAnnotation = () => {
   } else {
     // 添加新批注
     emit("annotation-add", annotation);
-    Message.success("批注已添加");
   }
 
   // 关闭输入框
@@ -2253,6 +2252,8 @@ const highlightPosition = (
   // 清除之前的高亮
   const hadHighlight = activeBlockDiv.value !== null && isHighlighted.value;
   if (activeBlockDiv.value) {
+    // 移除动画类
+    activeBlockDiv.value.classList.remove("highlight-animated");
     activeBlockDiv.value.style.backgroundColor = "transparent";
     activeBlockDiv.value.style.boxShadow = "none";
     activeBlockDiv.value.style.border = "none";
@@ -2346,6 +2347,65 @@ const highlightPosition = (
     elementRef.style.border = "none";
   }
 
+  // 添加明显的放大-缩小动画
+  // 保存原来的 transition 和 transform，临时禁用以避免与动画冲突
+  const originalTransition = elementRef.style.transition || "";
+  const originalTransform = elementRef.style.transform || "";
+  
+  // 先移除可能存在的动画类，确保可以重新触发
+  elementRef.classList.remove("highlight-animated");
+  
+  // 强制浏览器重新计算样式（触发重排），确保动画可以重新开始
+  void elementRef.offsetHeight;
+  
+  // 使用 requestAnimationFrame 确保动画正确触发
+  requestAnimationFrame(() => {
+    // 临时禁用 transition，避免与动画的 transform 冲突
+    elementRef.style.transition = "none";
+    // 清除内联 transform，让动画的 transform 生效
+    elementRef.style.transform = "";
+    elementRef.style.transformOrigin = "center center";
+    
+    // 使用内联样式直接设置动画（优先级最高）
+    elementRef.style.animation = "highlightPulse 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 2";
+    elementRef.style.animationFillMode = "forwards";
+    
+    // 调试：检查动画是否应用
+    const computedStyle = window.getComputedStyle(elementRef);
+    console.log("跳转高亮动画已应用:", {
+      element: elementRef,
+      inlineAnimation: elementRef.style.animation,
+      computedAnimation: computedStyle.animation,
+      transform: computedStyle.transform,
+      transformOrigin: computedStyle.transformOrigin,
+    });
+    
+    // 监听动画开始事件（用于调试）
+    const handleAnimationStart = (e: AnimationEvent) => {
+      console.log("动画开始", e);
+      elementRef.removeEventListener("animationstart", handleAnimationStart);
+    };
+    elementRef.addEventListener("animationstart", handleAnimationStart);
+    
+    // 监听动画结束事件，移除动画并恢复样式（确保动画可以重复触发）
+    const handleAnimationEnd = (e: AnimationEvent) => {
+      console.log("动画结束", e);
+      // 清除动画
+      elementRef.style.animation = "";
+      elementRef.style.animationFillMode = "";
+      elementRef.style.transform = "";
+      elementRef.style.transformOrigin = "";
+      // 恢复原来的 transition
+      if (originalTransition) {
+        elementRef.style.transition = originalTransition;
+      } else {
+        elementRef.style.transition = "all 0.2s ease";
+      }
+      elementRef.removeEventListener("animationend", handleAnimationEnd);
+    };
+    elementRef.addEventListener("animationend", handleAnimationEnd);
+  });
+
   // 只有在需要滚动且元素不在视口内时才滚动
   if (shouldScroll && containerRef.value) {
     const isVisible = isElementVisible(elementRef, containerRef.value);
@@ -2365,6 +2425,8 @@ const highlightPosition = (
   // 5秒后自动取消高亮
   setTimeout(() => {
     if (activeBlockDiv.value === elementRef && isHighlighted.value) {
+      // 移除动画类
+      elementRef.classList.remove("highlight-animated");
       elementRef.style.backgroundColor = "transparent";
       elementRef.style.boxShadow = "none";
       elementRef.style.border = "none";
@@ -2725,6 +2787,28 @@ defineExpose({
 });
 </script>
 
+<!-- 全局动画样式（非 scoped，供内联样式引用） -->
+<style lang="less">
+// 跳转高亮放大-缩小动画（明显的动画效果）
+@keyframes highlightPulse {
+  0% {
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(1.15);
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.15);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>
+
 <style lang="less" scoped>
 // 样式已统一到公共样式文件，这里只保留组件特定样式
 .toolbar-group {
@@ -3031,4 +3115,40 @@ defineExpose({
     transform: translateY(0);
   }
 }
+
+// 跳转高亮放大-缩小动画（明显的动画效果）
+@keyframes highlightPulse {
+  0% {
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(1.15);
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.15);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+// 跳转高亮动画类
+.text-block.highlight-animated {
+  animation: highlightPulse 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
+  // 闪烁两次后停止
+  animation-iteration-count: 2;
+  // 确保动画不影响布局（使用 transform 而不是改变尺寸）
+  transform-origin: center center !important;
+  // 确保 overflow 可见，允许放大时超出边界
+  overflow: visible !important;
+  // 优化动画性能
+  will-change: transform !important;
+  // 确保动画的 transform 能够正确应用，即使父元素也有 transform
+  isolation: isolate;
+  // 确保 z-index 足够高
+  z-index: 30 !important;
+}
 </style>