@koi-br/ocr-web-sdk 1.0.67 → 1.1.0

package/dist/{tiff.min-C7mxi5R2.mjs → tiff.min-KAQAp3fU.mjs}

@@ -1,4 +1,4 @@
-import { g as getAugmentedNamespace, a as getDefaultExportFromCjs } from "./index-BwWdGx71.mjs";
+import { g as getAugmentedNamespace, a as getDefaultExportFromCjs } from "./index-DuCZ_Am_.mjs";
 function _mergeNamespaces(U, W) {
   for (var Z = 0; Z < W.length; Z++) {
     const s0 = W[Z];

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "@koi-br/ocr-web-sdk",
-  "version": "1.0.67",
+  "version": "1.1.0",
   "description": "一个支持多种Office文件格式预览的Vue3组件SDK，包括PDF、Word、Excel、图片、OFD、TIF等格式",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
+  "browser": "dist/index.umd.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
-      "require": "./dist/index.js",
+      "require": "./dist/index.cjs.js",
+      "browser": "./dist/index.umd.js",
       "types": "./dist/index.d.ts"
     },
     "./style.css": "./dist/style.css"
@@ -55,9 +57,10 @@
     "less": "^4.4.2",
     "typescript": "^5.3.0",
     "vite": "^5.0.0",
-    "vite-plugin-dts": "^3.6.0"
+    "vite-plugin-dts": "^3.6.0",
+    "vue-router": "^4.6.4"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
   }
-}
+}

package/preview/ImagePreview.vue

@@ -1577,41 +1577,6 @@ const renderTextLayer = (pageNum?: number) => {
       blockDiv.style.backgroundColor = "transparent";
       blockDiv.style.pointerEvents = "auto";
       blockDiv.style.userSelect = "none";
-
-      // 检查是否有已有批注，如果有则显示批注标记
-      const existingAnnotation = getAnnotationForBlock(bbox, targetPage);
-      if (existingAnnotation) {
-        // 添加批注标记样式类
-        blockDiv.classList.add("has-annotation");
-        blockDiv.title = `已有批注: ${existingAnnotation.content}`;
-        // 直接设置样式，确保生效（内联样式优先级高于CSS类）
-        blockDiv.style.backgroundColor = "rgba(255, 243, 205, 0.5)";
-        blockDiv.style.border = "1px solid rgba(255, 193, 7, 0.7)";
-        blockDiv.style.borderRadius = "3px";
-        blockDiv.style.padding = "1px 3px";
-        blockDiv.style.boxShadow = "0 1px 2px rgba(255, 193, 7, 0.25)";
-
-        // 创建批注图标标记
-        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";
-        blockDiv.appendChild(annotationMarker);
-      }
-
       // Hover 和点击事件
       blockDiv.addEventListener("mouseenter", (e) => {
         // ✅ 输入态：锚点已锁定，禁止 hover 驱动位置/激活块变化
@@ -1624,6 +1589,43 @@ const renderTextLayer = (pageNum?: number) => {
           return;
         }
 
+        // 🔑 关键修复：如果鼠标是从批注按钮移动过来的，不处理hover事件
+        // 这样可以避免鼠标移动到批注按钮时触发其他文本块的hover
+        const relatedTarget = (e as MouseEvent).relatedTarget as HTMLElement;
+        if (relatedTarget) {
+          // 检查鼠标是否从批注按钮区域移动过来
+          const annotationButton = relatedTarget.closest?.(".annotation-button-popup");
+          const annotationButtonAction = relatedTarget.closest?.(".annotation-button-action");
+          if (annotationButton || annotationButtonAction) {
+            // 鼠标正在从批注按钮移动到文本块，不处理hover事件
+            return;
+          }
+        }
+
+        // 🔑 关键修复：如果批注按钮正在显示，且当前激活的文本块不是这个块，检查鼠标位置
+        // 如果鼠标在批注按钮附近，不更新激活的文本块（避免按钮位置被更新）
+        if (showAnnotationPopup.value && activeBlockDiv.value && activeBlockDiv.value !== blockDiv) {
+          const buttonElement = annotationButtonRef.value;
+          if (buttonElement) {
+            const buttonRect = buttonElement.getBoundingClientRect();
+            const mouseX = (e as MouseEvent).clientX;
+            const mouseY = (e as MouseEvent).clientY;
+            
+            // 检查鼠标是否在批注按钮的"安全区域"内（按钮周围20px的区域）
+            const safeAreaPadding = 20;
+            const isInSafeArea = 
+              mouseX >= buttonRect.left - safeAreaPadding &&
+              mouseX <= buttonRect.right + safeAreaPadding &&
+              mouseY >= buttonRect.top - safeAreaPadding &&
+              mouseY <= buttonRect.bottom + safeAreaPadding;
+            
+            if (isInSafeArea) {
+              // 鼠标在批注按钮的安全区域内，不更新激活的文本块
+              return;
+            }
+          }
+        }
+
         // 取消之前的隐藏定时器
         if (hideTimer) {
           clearTimeout(hideTimer);
@@ -1642,15 +1644,14 @@ const renderTextLayer = (pageNum?: number) => {
         // 设置当前文本块为激活状态
         activeBlockDiv.value = blockDiv;
 
-        // 检查是否有批注，应用对应的 hover 样式
-        const existingAnnotation = getAnnotationForBlock(bbox, targetPage);
-        applyHoverStyle(blockDiv, !!existingAnnotation);
+        // 应用 hover 样式
+        applyHoverStyle(blockDiv);
 
         // 显示批注按钮浮层
         showAnnotationButtonForBlock(e, blockDiv);
       });
 
-      blockDiv.addEventListener("mouseleave", () => {
+      blockDiv.addEventListener("mouseleave", (e) => {
         // ✅ 输入态：不再启动 auto-hide 逻辑
         if (currentAnnotationBlock.value) {
           return;
@@ -1661,6 +1662,18 @@ const renderTextLayer = (pageNum?: number) => {
           return;
         }
 
+        // 🔑 关键修复：如果鼠标是移动到批注按钮，不启动隐藏定时器
+        const relatedTarget = (e as MouseEvent).relatedTarget as HTMLElement;
+        if (relatedTarget) {
+          // 检查鼠标是否移动到批注按钮区域
+          const annotationButton = relatedTarget.closest?.(".annotation-button-popup");
+          const annotationButtonAction = relatedTarget.closest?.(".annotation-button-action");
+          if (annotationButton || annotationButtonAction) {
+            // 鼠标正在移动到批注按钮，不启动隐藏定时器
+            return;
+          }
+        }
+
         // 延迟隐藏，给用户时间移动到批注按钮
         if (props.enableHoverAutoHide) {
           hideTimer = setTimeout(() => {
@@ -1912,57 +1925,15 @@ const clearAllHighlights = (
       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");
-    }
+    // 清除所有高亮样式
+    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");
   });
 };
 
@@ -1970,143 +1941,38 @@ const clearAllHighlights = (
  * 恢复文本块样式（根据是否有批注）
  */
 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.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");
-  }
+  // 恢复透明背景（清除所有高亮相关样式）
+  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");
 };
 
 /**
  * 应用 hover 样式
  */
-const applyHoverStyle = (blockDiv: HTMLElement, hasAnnotation: boolean) => {
-  if (hasAnnotation) {
-    // 有批注时使用 annotationHoverStyle
-    const style = props.annotationHoverStyle;
-    if (style.backgroundColor) {
-      blockDiv.style.setProperty(
-        "background-color",
-        style.backgroundColor,
-        "important"
-      );
-    }
-    if (style.border) {
-      blockDiv.style.setProperty("border", style.border, "important");
-    }
-    if (style.borderRadius) {
-      blockDiv.style.setProperty(
-        "border-radius",
-        style.borderRadius,
-        "important"
-      );
-    }
-    if (style.padding) {
-      blockDiv.style.setProperty("padding", style.padding, "important");
-    }
-    if (style.boxShadow) {
-      blockDiv.style.setProperty("box-shadow", style.boxShadow, "important");
-    }
-  } else {
-    // 无批注时使用 hoverStyle
-    const style = props.hoverStyle;
-    if (style.backgroundColor) {
-      blockDiv.style.backgroundColor = style.backgroundColor;
-    }
-    if (style.border) {
-      blockDiv.style.border = style.border;
-    }
-    if (style.borderRadius) {
-      blockDiv.style.borderRadius = style.borderRadius;
-    }
-    if (style.padding) {
-      blockDiv.style.padding = style.padding;
-    }
-    if (style.boxShadow) {
-      blockDiv.style.boxShadow = style.boxShadow;
-    }
+const applyHoverStyle = (blockDiv: HTMLElement) => {
+  // 统一使用 hoverStyle，不再区分是否有批注
+  const style = props.hoverStyle;
+  if (style.backgroundColor) {
+    blockDiv.style.backgroundColor = style.backgroundColor;
+  }
+  if (style.border) {
+    blockDiv.style.border = style.border;
+  }
+  if (style.borderRadius) {
+    blockDiv.style.borderRadius = style.borderRadius;
+  }
+  if (style.padding) {
+    blockDiv.style.padding = style.padding;
+  }
+  if (style.boxShadow) {
+    blockDiv.style.boxShadow = style.boxShadow;
   }
 };
 
@@ -2127,47 +1993,18 @@ const hideAnnotationButton = () => {
   hideTimer = setTimeout(() => {
     showAnnotationPopup.value = false;
 
-    // 恢复文本块的样式（如果有批注则保持批注样式）
+    // 恢复文本块的样式
     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.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");
-        }
-      }
+      // 恢复透明背景（清除所有高亮相关样式）
+      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;
@@ -2264,15 +2101,9 @@ const openAnnotationInput = (e?: Event) => {
     return;
   }
 
-  // 检查是否已有批注
-  const existingAnnotation = getAnnotationForBlock(bbox);
-  if (existingAnnotation) {
-    annotationInput.value = existingAnnotation.content;
-    currentEditingAnnotation.value = existingAnnotation; // 保存当前编辑的批注信息
-  } else {
-    annotationInput.value = "";
-    currentEditingAnnotation.value = null; // 新批注，清空编辑信息
-  }
+  // 每次打开批注输入框都是新的，清空输入内容
+  annotationInput.value = "";
+  currentEditingAnnotation.value = null;
 
   currentAnnotationBlock.value = {
     bbox,
@@ -2298,8 +2129,8 @@ const openAnnotationInput = (e?: Event) => {
     // 清除其它块的高亮，避免竞态残留
     clearAllHighlights(lockedAnnotationDiv.value);
 
-    // 保持该块的 hover/批注样式
-    applyHoverStyle(lockedAnnotationDiv.value, !!existingAnnotation);
+    // 保持该块的 hover 样式
+    applyHoverStyle(lockedAnnotationDiv.value);
 
     // 使用 outline 作为“锁定态”标识（不依赖 scoped CSS）
     applyLockedAnnotationOutline(lockedAnnotationDiv.value);
@@ -2532,7 +2363,7 @@ const saveAnnotation = () => {
   // 关闭输入框
   closeAnnotationInput();
 
-  // 重新渲染文本图层以显示批注标记
+  // 重新渲染文本图层以更新批注数据
   nextTick(() => {
     renderTextLayer();
   });
@@ -2755,34 +2586,15 @@ const highlightPosition = (
     // 这样可以避免多个高亮框同时存在的问题
     const hadHighlight = activeBlockDiv.value !== null && isHighlighted.value;
 
-    // ✅ 如果当前有批注输入态锁定块，先记录它的批注状态，清理后再补回样式
+    // ✅ 如果当前有批注输入态锁定块，清理后再补回样式
     const lockedDiv = lockedAnnotationDiv.value;
-    let lockedHasAnnotation = false;
-    if (lockedDiv) {
-      const bboxStr = lockedDiv.dataset.bbox;
-      const pageStr = lockedDiv.dataset.page;
-      const lockedPageNum = pageStr ? parseInt(pageStr, 10) : undefined;
-      if (bboxStr) {
-        try {
-          const bbox = JSON.parse(bboxStr) as [
-            number,
-            number,
-            number,
-            number
-          ];
-          lockedHasAnnotation = !!getAnnotationForBlock(bbox, lockedPageNum);
-        } catch (_e) {
-          lockedHasAnnotation = false;
-        }
-      }
-    }
 
     // 清除所有高亮（包括所有页面的文本块），不排除任何元素
     clearAllHighlights();
 
     // ✅ 清理后补回锁定块样式（避免 jump/highlight 清掉输入态的背景高亮）
     if (lockedDiv) {
-      applyHoverStyle(lockedDiv, lockedHasAnnotation);
+      applyHoverStyle(lockedDiv);
       applyLockedAnnotationOutline(lockedDiv);
     }
 
@@ -3050,34 +2862,15 @@ const jumpToPosition = (
       isHighlighted: isHighlighted.value,
       reason: previousPositioningId ? '之前的定位被新定位覆盖' : '清除残留的高亮'
     });
-    // ✅ 如果当前有批注输入态锁定块，先记录它的批注状态，清理后再补回样式
+    // ✅ 如果当前有批注输入态锁定块，清理后再补回样式
     const lockedDiv = lockedAnnotationDiv.value;
-    let lockedHasAnnotation = false;
-    if (lockedDiv) {
-      const bboxStr = lockedDiv.dataset.bbox;
-      const pageStr = lockedDiv.dataset.page;
-      const lockedPageNum = pageStr ? parseInt(pageStr, 10) : undefined;
-      if (bboxStr) {
-        try {
-          const lockedBbox = JSON.parse(bboxStr) as [
-            number,
-            number,
-            number,
-            number
-          ];
-          lockedHasAnnotation = !!getAnnotationForBlock(lockedBbox, lockedPageNum);
-        } catch (_e) {
-          lockedHasAnnotation = false;
-        }
-      }
-    }
 
     // 清除所有页面的高亮元素，不排除任何元素
     clearAllHighlights();
 
     // ✅ 清理后补回锁定块样式（避免跳转清掉输入态的背景高亮）
     if (lockedDiv) {
-      applyHoverStyle(lockedDiv, lockedHasAnnotation);
+      applyHoverStyle(lockedDiv);
       applyLockedAnnotationOutline(lockedDiv);
     }
   }
@@ -3239,7 +3032,7 @@ watch(
 );
 
 /**
- * 监听 annotations 变化，增量更新所有页面的文本图层以显示批注标记
+ * 监听 annotations 变化，增量更新所有页面的文本图层以更新批注数据
  */
 watch(
   () => props.annotations,
@@ -3713,12 +3506,14 @@ defineExpose({
   // 确保可见
   visibility: visible !important;
   display: block !important;
+  // 🔑 确保文本块的z-index低于批注按钮，避免遮挡批注按钮
+  z-index: 20 !important;
 }
 
 // 批注按钮浮层
 .annotation-button-popup {
   position: absolute;
-  z-index: 1000;
+  z-index: 10000; // 🔑 提高z-index，确保批注按钮在所有文本块之上
   display: flex;
   flex-direction: row;
   width: fit-content;
@@ -3728,6 +3523,8 @@ defineExpose({
   border-radius: 6px;
   box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
   animation: fade-in 0.2s ease;
+  // 🔑 确保批注按钮可以接收鼠标事件，不被其他元素遮挡
+  isolation: isolate;
 
   .annotation-button-action {
     display: flex;
@@ -3740,6 +3537,10 @@ defineExpose({
     white-space: nowrap;
     cursor: pointer;
     border-radius: 4px;
+    // 🔑 确保按钮可以接收鼠标事件
+    pointer-events: auto;
+    position: relative;
+    z-index: 10001; // 确保按钮在浮层之上
   }
 
   .annotation-button-action:hover {
@@ -3872,45 +3673,6 @@ defineExpose({
 }
 
 // 有批注的文本块样式
-.text-block.has-annotation {
-  position: relative;
-  // 添加背景色区分
-  background-color: rgba(255, 243, 205, 0.5) !important; // 浅黄色背景
-  // 添加边框
-  border: 1px solid rgba(255, 193, 7, 0.7) !important; // 黄色边框
-  border-radius: 3px;
-  // 添加内边距，让文字不贴边
-  padding: 1px 3px;
-  // 添加阴影效果
-  box-shadow: 0 1px 2px rgba(255, 193, 7, 0.25) !important;
-
-  // 鼠标悬停时加深效果
-  &:hover {
-    background-color: rgba(255, 243, 205, 0.7) !important;
-    border-color: rgba(255, 193, 7, 0.9) !important;
-    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.35) !important;
-  }
-
-  // 使用伪元素添加批注标记图标
-  &::before {
-    content: "📝";
-    position: absolute;
-    top: -6px;
-    right: -6px;
-    font-size: 11px;
-    background-color: rgba(255, 193, 7, 0.95);
-    border-radius: 50%;
-    width: 16px;
-    height: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 30;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
-    line-height: 1;
-  }
-}
-
 // 淡入动画
 @keyframes fade-in {
   from {