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

package/preview/ImagePreview.vue

@@ -12,12 +12,7 @@
       <div class="toolbar-group">
         <span class="scale-text"> {{ Math.round(scale * 100) }}% </span>
         <div class="toolbar-divider"></div>
-        <ATooltip
-          v-if="showResetButton"
-          mini
-          position="bottom"
-          content="重置"
-        >
+        <ATooltip v-if="showResetButton" mini position="bottom" content="重置">
           <AButton size="small" type="outline" @click="reset">
             <RefreshCcw :size="16" />
           </AButton>
@@ -96,7 +91,7 @@
             <AButton
               size="small"
               type="outline"
-              style="padding-right: 0px;"
+              style="padding-right: 0px"
               :disabled="currentPage >= totalPages"
               @click="goToNextPage"
             >
@@ -121,9 +116,9 @@
         <div class="loading-spinner"></div>
         <div class="loading-text">加载中...</div>
       </div>
-      
-      <div 
-        class="image-wrapper-container" 
+
+      <div
+        class="image-wrapper-container"
         :style="containerStyle"
         :class="{ 'image-hidden': !isImageReady && autoFitWidth }"
       >
@@ -162,7 +157,10 @@
 
             <!-- 文本图层（用于文本块选择和定位） -->
             <div
-              v-if="getPageBlocksData(pageIndex + 1) && getPageBlocksData(pageIndex + 1).length > 0"
+              v-if="
+                getPageBlocksData(pageIndex + 1) &&
+                getPageBlocksData(pageIndex + 1).length > 0
+              "
               :ref="(el) => setTextLayerRef(el, pageIndex + 1)"
               class="text-layer"
             ></div>
@@ -194,15 +192,48 @@
         @mouseenter="cancelHideAnnotationButton"
       >
         <div class="annotation-input-header">
-          <span class="annotation-input-title">添加批注</span>
+          <div class="annotation-input-header-title">
+            {{ currentAnnotationBlock?.content }}
+          </div>
           <button class="annotation-close-btn" @click="closeAnnotationInput">
             <X :size="14" />
           </button>
         </div>
         <div class="annotation-input-content">
+          <!-- 插槽：允许父组件自定义批注头部显示（包括用户名和头像） -->
+          <slot
+            name="annotation-header"
+            :annotation="currentEditingAnnotation"
+            :is-editing="!!currentEditingAnnotation"
+          >
+            <!-- 默认显示：如果没有使用插槽，且有用户信息，则显示用户名和头像 -->
+            <div
+              v-if="
+                currentEditingAnnotation?.username ||
+                currentEditingAnnotation?.avatar
+              "
+              class="annotation-header-user-info"
+            >
+              <img
+                v-if="currentEditingAnnotation?.avatar"
+                :src="currentEditingAnnotation.avatar"
+                :alt="currentEditingAnnotation.username || '用户'"
+                class="annotation-user-avatar"
+              />
+              <span
+                v-if="currentEditingAnnotation?.username"
+                class="annotation-username"
+              >
+                {{ currentEditingAnnotation.username }}
+              </span>
+            </div>
+            <span v-else class="annotation-input-title">
+              {{ currentEditingAnnotation ? "编辑批注" : "添加批注" }}
+            </span>
+          </slot>
           <Textarea
             v-model="annotationInput"
-            :auto-size="{ minRows: 3, maxRows: 6 }"
+            :auto-size="{ minRows: 1, maxRows: 3}"
             placeholder="请输入批注内容..."
             class="annotation-textarea"
             @keydown.ctrl.enter="saveAnnotation"
@@ -213,17 +244,18 @@
             @mousedown.stop
           />
         </div>
-        <div class="annotation-input-footer">
-          <AButton size="small" type="outline" @click="closeAnnotationInput">
+        <div class="annotation-input-footer" v-if="annotationInput">
+          <AButton size="small" type="outline" style="border:1px solid rgb(208, 211, 214);border-radius: 4px;" @click="closeAnnotationInput">
             取消
           </AButton>
           <AButton
             size="small"
             type="primary"
+            style="border-radius: 4px;"
             @click="saveAnnotation"
             :disabled="!annotationInput.trim()"
           >
-            保存
+            发送
           </AButton>
         </div>
       </div>
@@ -281,6 +313,10 @@ interface AnnotationInfo {
   blockPage?: number; // 所属页码
   content: string; // 批注内容
   createTime: number; // 创建时间戳
+  // 可选的用户信息（业务层可以自行决定是否传递）
+  username?: string; // 用户名
+  avatar?: string; // 头像URL
+  userId?: string | number; // 用户ID
 }
 
 /**
@@ -380,7 +416,8 @@ const props = defineProps({
   hoverStyle: {
     type: Object as () => HoverStyle,
     default: () => ({
-      backgroundColor: "var(--s-color-brand-primary-transparent-3, rgba(0, 102, 255, .15))",
+      backgroundColor:
+        "var(--s-color-brand-primary-transparent-3, rgba(0, 102, 255, .15))",
       boxShadow: "0 0 0 2px rgba(30, 144, 255, 0.6)",
       borderRadius: "2px",
       padding: "1px 3px",
@@ -395,7 +432,8 @@ const props = defineProps({
       border: "2px solid rgba(30, 144, 255, 0.8)",
       borderRadius: "3px",
       padding: "1px 3px",
-      boxShadow: "0 0 0 2px rgba(30, 144, 255, 0.6), 0 1px 2px rgba(255, 193, 7, 0.25)",
+      boxShadow:
+        "0 0 0 2px rgba(30, 144, 255, 0.6), 0 1px 2px rgba(255, 193, 7, 0.25)",
     }),
   },
   // hover 时批注按钮的隐藏延迟（毫秒）
@@ -456,22 +494,22 @@ const isImageReady = ref(false); // 标记图片是否已准备好显示（自
 watch(
   () => imageUrls.value,
   (newUrls, oldUrls) => {
-    console.log('[ImagePreview] imageUrls changed:', {
+    console.log("[ImagePreview] imageUrls changed:", {
       newUrls: newUrls?.length,
       oldUrls: oldUrls?.length,
       autoFitWidth: props.autoFitWidth,
       isImageReady: isImageReady.value,
       isCalculatingAutoFit: isCalculatingAutoFit.value,
     });
-    
+
     // 如果有新的图片URL，且启用自适应宽度，立即隐藏图片
     if (newUrls && newUrls.length > 0 && props.autoFitWidth) {
-      console.log('[ImagePreview] 设置图片隐藏，等待自适应宽度计算');
+      console.log("[ImagePreview] 设置图片隐藏，等待自适应宽度计算");
       isImageReady.value = false;
       isCalculatingAutoFit.value = true;
     } else if (!props.autoFitWidth) {
       // 如果没有启用自适应宽度，立即显示
-      console.log('[ImagePreview] 未启用自适应宽度，立即显示图片');
+      console.log("[ImagePreview] 未启用自适应宽度，立即显示图片");
       isImageReady.value = true;
       isCalculatingAutoFit.value = false;
     }
@@ -537,10 +575,10 @@ const imageSize = computed({
 // 在自适应宽度模式下，使用第一页的尺寸；否则使用当前页的尺寸
 const scaledImageSize = computed(() => {
   // 如果启用自适应宽度，使用第一页的尺寸作为基准
-  const baseSize = props.autoFitWidth 
-    ? (imageSizes.get(1) || { width: 0, 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 };
   }
@@ -587,6 +625,7 @@ const currentAnnotationBlock = ref<{
   bbox: [number, number, number, number];
   content: string;
 } | null>(null); // 当前正在添加批注的文本块
+const currentEditingAnnotation = ref<AnnotationInfo | null>(null); // 当前正在编辑的批注信息（如果有）
 const annotationPopupRef = ref<HTMLElement>(); // 批注弹窗引用
 
 // 文本选择相关状态（保留用于兼容）
@@ -635,7 +674,7 @@ const getPageScaledSize = (pageNo: number) => {
 const getPageContainerStyle = (pageNo: number) => {
   const scaledSize = getPageScaledSize(pageNo);
   return {
-    height: scaledSize.height > 0 ? `${scaledSize.height}px` : 'auto',
+    height: scaledSize.height > 0 ? `${scaledSize.height}px` : "auto",
   };
 };
 
@@ -939,7 +978,7 @@ const switchToPage = (page: number) => {
     ) as HTMLElement;
     if (pageElement) {
       // 标记这是翻页滚动，不应该被同步滚动干扰
-      containerRef.value.dataset.pageScrolling = 'true';
+      containerRef.value.dataset.pageScrolling = "true";
       pageElement.scrollIntoView({ behavior: "smooth", block: "start" });
       // 更新 lastScrollTop，确保滚动方向判断准确
       nextTick(() => {
@@ -975,12 +1014,12 @@ const reset = () => {
   const hadHighlight = isHighlighted.value && activeBlockDiv.value !== null;
   activeBlockDiv.value = null;
   isHighlighted.value = false;
-  
+
   // 如果之前有高亮，触发高亮清除事件
   if (hadHighlight) {
     emit("highlight-clear");
   }
-  
+
   // 清除已渲染页面集合
   renderedPages.value.clear();
 };
@@ -991,7 +1030,7 @@ const original = () => {
 
 // 计算自适应宽度的缩放比例
 const calculateAutoFitScale = () => {
-  console.log('[ImagePreview] calculateAutoFitScale 开始:', {
+  console.log("[ImagePreview] calculateAutoFitScale 开始:", {
     autoFitWidth: props.autoFitWidth,
     hasContainerRef: !!containerRef.value,
     containerRect: containerRef.value?.getBoundingClientRect(),
@@ -1000,16 +1039,19 @@ const calculateAutoFitScale = () => {
     minScale: props.minScale,
     maxScale: props.maxScale,
   });
-  
+
   if (!props.autoFitWidth || !containerRef.value) {
-    console.log('[ImagePreview] calculateAutoFitScale 返回 1 (条件不满足)');
+    console.log("[ImagePreview] calculateAutoFitScale 返回 1 (条件不满足)");
     return 1;
   }
 
   // 使用第一页的图片尺寸作为基准（所有页面使用相同的缩放比例）
   const firstPageSize = imageSizes.get(1);
   if (!firstPageSize || firstPageSize.width === 0) {
-    console.log('[ImagePreview] calculateAutoFitScale 返回 1 (第一页尺寸无效)', firstPageSize);
+    console.log(
+      "[ImagePreview] calculateAutoFitScale 返回 1 (第一页尺寸无效)",
+      firstPageSize
+    );
     return 1;
   }
 
@@ -1019,7 +1061,10 @@ const calculateAutoFitScale = () => {
   const containerWidth = containerRect.width - 4;
 
   if (containerWidth <= 0) {
-    console.log('[ImagePreview] calculateAutoFitScale 返回 1 (容器宽度无效)', containerWidth);
+    console.log(
+      "[ImagePreview] calculateAutoFitScale 返回 1 (容器宽度无效)",
+      containerWidth
+    );
     return 1;
   }
 
@@ -1030,15 +1075,21 @@ const calculateAutoFitScale = () => {
   const imageWidth = isRotated ? firstPageSize.height : firstPageSize.width;
 
   if (imageWidth <= 0) {
-    console.log('[ImagePreview] calculateAutoFitScale 返回 1 (图片宽度无效)', imageWidth);
+    console.log(
+      "[ImagePreview] calculateAutoFitScale 返回 1 (图片宽度无效)",
+      imageWidth
+    );
     return 1;
   }
 
   // 计算缩放比例，使图片宽度完全适应容器宽度
   const calculatedScale = containerWidth / imageWidth;
-  const finalScale = Math.max(props.minScale, Math.min(props.maxScale, calculatedScale));
-  
-  console.log('[ImagePreview] calculateAutoFitScale 计算结果:', {
+  const finalScale = Math.max(
+    props.minScale,
+    Math.min(props.maxScale, calculatedScale)
+  );
+
+  console.log("[ImagePreview] calculateAutoFitScale 计算结果:", {
     containerWidth,
     imageWidth,
     calculatedScale,
@@ -1052,8 +1103,8 @@ const calculateAutoFitScale = () => {
 // 图片加载完成处理
 const onImageLoad = (event: Event, pageNum: number) => {
   const img = event.target as HTMLImageElement;
-  
-  console.log('[ImagePreview] 图片加载完成:', {
+
+  console.log("[ImagePreview] 图片加载完成:", {
     pageNum,
     naturalWidth: img.naturalWidth,
     naturalHeight: img.naturalHeight,
@@ -1061,7 +1112,7 @@ const onImageLoad = (event: Event, pageNum: number) => {
     isImageReady: isImageReady.value,
     isCalculatingAutoFit: isCalculatingAutoFit.value,
   });
-  
+
   // 存储该页的图片尺寸
   imageSizes.set(pageNum, {
     width: img.naturalWidth,
@@ -1070,10 +1121,10 @@ const onImageLoad = (event: Event, pageNum: number) => {
 
   // 如果是第一页且启用自适应宽度，计算并设置初始缩放比例
   if (pageNum === 1 && props.autoFitWidth) {
-    console.log('[ImagePreview] 第一页加载完成，开始计算自适应宽度');
+    console.log("[ImagePreview] 第一页加载完成，开始计算自适应宽度");
     // 重置用户缩放标记
     isUserZooming.value = false;
-    
+
     // 确保图片是隐藏的（watch 已经设置了，这里再次确认）
     if (!isImageReady.value) {
       isCalculatingAutoFit.value = true;
@@ -1081,7 +1132,7 @@ const onImageLoad = (event: Event, pageNum: number) => {
 
     // 设置超时保护，防止一直显示 loading（最多等待 3 秒）
     const timeoutId = setTimeout(() => {
-      console.warn('自适应宽度计算超时，强制显示图片');
+      console.warn("自适应宽度计算超时，强制显示图片");
       isCalculatingAutoFit.value = false;
       isImageReady.value = true;
     }, 3000);
@@ -1092,38 +1143,51 @@ const onImageLoad = (event: Event, pageNum: number) => {
         // 添加小延迟确保容器完全渲染
         setTimeout(() => {
           try {
-            console.log('[ImagePreview] onImageLoad: 开始计算自适应宽度...');
+            console.log("[ImagePreview] onImageLoad: 开始计算自适应宽度...");
             const autoScale = calculateAutoFitScale();
-            console.log('[ImagePreview] onImageLoad: 自适应宽度计算结果:', {
+            console.log("[ImagePreview] onImageLoad: 自适应宽度计算结果:", {
               autoScale,
               containerRef: !!containerRef.value,
-              containerWidth: containerRef.value?.getBoundingClientRect()?.width,
+              containerWidth:
+                containerRef.value?.getBoundingClientRect()?.width,
               firstPageSize: imageSizes.get(1),
             });
-            
+
             if (autoScale > 0) {
               scale.value = autoScale;
               initialAutoFitScale.value = autoScale; // 记录初始自适应缩放比例
               // 记录当前容器宽度，用于后续 resize 检查
               if (containerRef.value) {
-                lastContainerWidth = containerRef.value.getBoundingClientRect().width;
+                lastContainerWidth =
+                  containerRef.value.getBoundingClientRect().width;
               }
-              console.log('[ImagePreview] onImageLoad: 缩放比例已设置:', autoScale);
+              console.log(
+                "[ImagePreview] onImageLoad: 缩放比例已设置:",
+                autoScale
+              );
             } else {
-              console.warn('[ImagePreview] onImageLoad: 计算出的缩放比例无效:', autoScale);
+              console.warn(
+                "[ImagePreview] onImageLoad: 计算出的缩放比例无效:",
+                autoScale
+              );
             }
           } catch (error) {
-            console.error('[ImagePreview] onImageLoad: 计算自适应宽度失败:', error);
+            console.error(
+              "[ImagePreview] onImageLoad: 计算自适应宽度失败:",
+              error
+            );
           } finally {
             // 清除超时保护
             clearTimeout(timeoutId);
-            console.log('[ImagePreview] onImageLoad: 更新状态: isCalculatingAutoFit = false, isImageReady = true');
+            console.log(
+              "[ImagePreview] onImageLoad: 更新状态: isCalculatingAutoFit = false, isImageReady = true"
+            );
             // 无论计算结果如何，都要更新状态，避免一直显示 loading
             isCalculatingAutoFit.value = false;
             // 使用 requestAnimationFrame 确保在下一帧显示，避免闪烁
             requestAnimationFrame(() => {
               isImageReady.value = true;
-              console.log('[ImagePreview] onImageLoad: 图片已准备好显示');
+              console.log("[ImagePreview] onImageLoad: 图片已准备好显示");
             });
           }
         }, 100); // 增加延迟，确保所有图片都已加载
@@ -1134,7 +1198,7 @@ const onImageLoad = (event: Event, pageNum: number) => {
     isImageReady.value = true;
     isCalculatingAutoFit.value = false;
   }
-  
+
   // 如果第一页已经加载完成，且当前页不是第一页，也应用自适应宽度
   if (pageNum > 1 && props.autoFitWidth && initialAutoFitScale.value !== null) {
     // 确保后续页面也使用相同的缩放比例
@@ -1352,7 +1416,7 @@ const renderTextLayer = (pageNum?: number) => {
         // 清除当前页面所有文本块的高亮样式（除了当前文本块）
         // 这样可以防止多个文本块同时高亮的竞态条件
         clearAllHighlights(blockDiv);
-        
+
         // 清除跳转高亮标志（如果之前是通过跳转高亮的）
         if (isHighlighted.value) {
           isHighlighted.value = false;
@@ -1436,7 +1500,7 @@ const showAnnotationButtonForBlock = (
 
   try {
     const bbox = JSON.parse(bboxStr) as [number, number, number, number];
-    
+
     // 从 blocksData 中查找对应的 content
     const pageBlocksData = getPageBlocksData(currentPage.value);
     const blockData = pageBlocksData.find((block) => {
@@ -1449,7 +1513,7 @@ const showAnnotationButtonForBlock = (
         Math.abs(y2 - bbox[3]) < tolerance
       );
     });
-    
+
     if (!blockData) return;
 
     const rect = blockDiv.getBoundingClientRect();
@@ -1537,7 +1601,10 @@ const showAnnotationButtonForBlock = (
  * @param excludeBlockDiv 要排除的文本块（不清除它的样式）
  * @param pageNum 要清除的页码，如果不提供则从 excludeBlockDiv 中获取
  */
-const clearAllHighlights = (excludeBlockDiv?: HTMLElement, pageNum?: number) => {
+const clearAllHighlights = (
+  excludeBlockDiv?: HTMLElement,
+  pageNum?: number
+) => {
   // 确定要清除的页码
   let targetPage = pageNum;
   if (!targetPage && excludeBlockDiv) {
@@ -1571,11 +1638,23 @@ const clearAllHighlights = (excludeBlockDiv?: HTMLElement, pageNum?: number) =>
 
       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(
+          "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");
+        el.style.setProperty(
+          "box-shadow",
+          "0 1px 2px rgba(255, 193, 7, 0.25)",
+          "important"
+        );
       } else {
         // 如果没有批注，清除所有高亮样式
         el.style.backgroundColor = "transparent";
@@ -1639,17 +1718,29 @@ const restoreBlockStyle = (blockDiv: HTMLElement) => {
 
     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(
+        "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(
+        "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,
@@ -1690,13 +1781,21 @@ const applyHoverStyle = (blockDiv: HTMLElement, hasAnnotation: boolean) => {
     // 有批注时使用 annotationHoverStyle
     const style = props.annotationHoverStyle;
     if (style.backgroundColor) {
-      blockDiv.style.setProperty("background-color", style.backgroundColor, "important");
+      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");
+      blockDiv.style.setProperty(
+        "border-radius",
+        style.borderRadius,
+        "important"
+      );
     }
     if (style.padding) {
       blockDiv.style.setProperty("padding", style.padding, "important");
@@ -1747,12 +1846,7 @@ const hideAnnotationButton = () => {
       const bboxStr = activeBlockDiv.value.dataset.bbox;
       if (bboxStr) {
         try {
-          const bbox = JSON.parse(bboxStr) as [
-            number,
-            number,
-            number,
-            number
-          ];
+          const bbox = JSON.parse(bboxStr) as [number, number, number, number];
           const existingAnnotation = getAnnotationForBlock(bbox);
           if (existingAnnotation) {
             // 如果有批注，恢复批注样式
@@ -1888,8 +1982,10 @@ const openAnnotationInput = (e?: Event) => {
   const existingAnnotation = getAnnotationForBlock(bbox);
   if (existingAnnotation) {
     annotationInput.value = existingAnnotation.content;
+    currentEditingAnnotation.value = existingAnnotation; // 保存当前编辑的批注信息
   } else {
     annotationInput.value = "";
+    currentEditingAnnotation.value = null; // 新批注，清空编辑信息
   }
 
   currentAnnotationBlock.value = {
@@ -2002,9 +2098,10 @@ const adjustAnnotationPopupPosition = () => {
  */
 const closeAnnotationInput = () => {
   currentAnnotationBlock.value = null;
+  currentEditingAnnotation.value = null; // 清空当前编辑的批注信息
   annotationInput.value = "";
   showAnnotationPopup.value = false;
-  
+
   // 关闭批注输入弹窗后，恢复文本块的样式
   if (activeBlockDiv.value && !isHighlighted.value) {
     restoreBlockStyle(activeBlockDiv.value);
@@ -2043,13 +2140,16 @@ const saveAnnotation = () => {
   const existingAnnotation = getAnnotationForBlock(bbox);
 
   const annotation: AnnotationInfo = {
-    id:
-      existingAnnotation?.id || "",
+    id: existingAnnotation?.id || "",
     blockBbox: bbox,
     blockContent: content,
     blockPage: currentPage.value,
     content: annotationContent,
     createTime: existingAnnotation?.createTime || Date.now(),
+    // 保留用户信息（如果存在）
+    username: existingAnnotation?.username,
+    avatar: existingAnnotation?.avatar,
+    userId: existingAnnotation?.userId,
   };
 
   if (existingAnnotation) {
@@ -2075,9 +2175,9 @@ const saveAnnotation = () => {
  */
 const handleScroll = (e: Event) => {
   const container = e.target as HTMLElement;
-  
+
   // 检查是否是同步滚动触发的
-  const isSyncing = container?.dataset?.syncingScroll === 'true';
+  const isSyncing = container?.dataset?.syncingScroll === "true";
   if (isSyncing) {
     // 即使是被同步滚动触发的，也应该立即更新页码（但不触发翻页动画）
     // 使用 requestAnimationFrame 确保在浏览器渲染后立即更新
@@ -2096,7 +2196,7 @@ const handleScroll = (e: Event) => {
       // 如果没有启用滚动翻页，立即清除标记
       delete container.dataset.syncingScroll;
     }
-    
+
     // 同步滚动时，不执行其他逻辑（如隐藏批注按钮等）
     return;
   }
@@ -2137,7 +2237,6 @@ const handleScroll = (e: Event) => {
   }
 };
 
-
 // 记录上次滚动位置，用于判断滚动方向
 let lastScrollTop = 0;
 
@@ -2260,7 +2359,7 @@ const highlightPosition = (
     activeBlockDiv.value = null;
   }
   isHighlighted.value = false;
-  
+
   // 如果之前有高亮，触发高亮清除事件
   if (hadHighlight) {
     emit("highlight-clear");
@@ -2351,13 +2450,13 @@ const highlightPosition = (
   // 保存原来的 transition 和 transform，临时禁用以避免与动画冲突
   const originalTransition = elementRef.style.transition || "";
   const originalTransform = elementRef.style.transform || "";
-  
+
   // 先移除可能存在的动画类，确保可以重新触发
   elementRef.classList.remove("highlight-animated");
-  
+
   // 强制浏览器重新计算样式（触发重排），确保动画可以重新开始
   void elementRef.offsetHeight;
-  
+
   // 使用 requestAnimationFrame 确保动画正确触发
   requestAnimationFrame(() => {
     // 临时禁用 transition，避免与动画的 transform 冲突
@@ -2365,11 +2464,12 @@ const highlightPosition = (
     // 清除内联 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.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("跳转高亮动画已应用:", {
@@ -2379,14 +2479,14 @@ const highlightPosition = (
       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);
@@ -2411,7 +2511,7 @@ const highlightPosition = (
     const isVisible = isElementVisible(elementRef, containerRef.value);
     if (!isVisible) {
       // 标记这是定位滚动，不应该被同步滚动干扰
-      containerRef.value.dataset.pageScrolling = 'true';
+      containerRef.value.dataset.pageScrolling = "true";
       elementRef.scrollIntoView({ behavior: "smooth", block: "center" });
       // 延迟清除标记，确保滚动完成
       setTimeout(() => {
@@ -2480,7 +2580,9 @@ const jumpToPosition = (
         retryCount++;
         setTimeout(tryHighlight, retryDelay);
       } else {
-        console.warn(`无法找到并高亮指定位置: 页码 ${pageNum}, bbox: [${bbox.join(", ")}]`);
+        console.warn(
+          `无法找到并高亮指定位置: 页码 ${pageNum}, bbox: [${bbox.join(", ")}]`
+        );
       }
     };
 
@@ -2590,7 +2692,7 @@ const handleContainerResize = () => {
     lastContainerWidth = currentWidth;
   }
 
-  console.log('[ImagePreview] handleContainerResize 被调用:', {
+  console.log("[ImagePreview] handleContainerResize 被调用:", {
     autoFitWidth: props.autoFitWidth,
     isUserZooming: isUserZooming.value,
     isImageReady: isImageReady.value,
@@ -2609,23 +2711,25 @@ const handleContainerResize = () => {
   }
 
   // 宽度变化时不显示 loading，只更新缩放比例（避免看起来像重新加载）
-  console.log('[ImagePreview] handleContainerResize: 开始重新计算');
+  console.log("[ImagePreview] handleContainerResize: 开始重新计算");
 
   // 立即计算并应用新的缩放比例，避免过渡期间露出底色
   // 使用 requestAnimationFrame 确保在浏览器重绘前更新
   requestAnimationFrame(() => {
     try {
-      console.log('[ImagePreview] handleContainerResize: 开始计算自适应宽度...');
+      console.log(
+        "[ImagePreview] handleContainerResize: 开始计算自适应宽度..."
+      );
       const newScale = calculateAutoFitScale();
-      console.log('[ImagePreview] handleContainerResize: 计算结果:', newScale);
-      
+      console.log("[ImagePreview] handleContainerResize: 计算结果:", newScale);
+
       if (newScale > 0) {
         // 即使变化很小也立即更新，确保过渡期间图片始终填满容器
         scale.value = newScale;
         initialAutoFitScale.value = newScale;
       }
     } catch (error) {
-      console.error('[ImagePreview] handleContainerResize: 计算失败:', error);
+      console.error("[ImagePreview] handleContainerResize: 计算失败:", error);
     }
 
     // 在过渡动画完成后再次检查，确保最终状态正确（处理过渡动画期间的连续变化）
@@ -2637,10 +2741,13 @@ const handleContainerResize = () => {
           initialAutoFitScale.value = finalScale;
         }
       } catch (error) {
-        console.error('[ImagePreview] handleContainerResize: 最终计算失败:', error);
+        console.error(
+          "[ImagePreview] handleContainerResize: 最终计算失败:",
+          error
+        );
       } finally {
         // 计算完成，重置标记（不改变图片显示状态，因为宽度变化时不应该显示loading）
-        console.log('[ImagePreview] handleContainerResize: 更新状态完成');
+        console.log("[ImagePreview] handleContainerResize: 更新状态完成");
         isResizing = false; // 重置标记
       }
     }, 350); // 350ms 延迟，略大于过渡动画时间（300ms），确保过渡完成后稳定
@@ -2659,14 +2766,14 @@ onMounted(() => {
       // 隐藏图片，显示 loading
       isImageReady.value = false;
       isCalculatingAutoFit.value = true;
-      
+
       // 设置超时保护，防止一直显示 loading（最多等待 3 秒）
       const timeoutId = setTimeout(() => {
-        console.warn('自适应宽度计算超时，强制显示图片');
+        console.warn("自适应宽度计算超时，强制显示图片");
         isCalculatingAutoFit.value = false;
         isImageReady.value = true;
       }, 3000);
-      
+
       nextTick(() => {
         nextTick(() => {
           setTimeout(() => {
@@ -2677,7 +2784,7 @@ onMounted(() => {
                 initialAutoFitScale.value = autoScale;
               }
             } catch (error) {
-              console.warn('计算自适应宽度失败:', error);
+              console.warn("计算自适应宽度失败:", error);
             } finally {
               // 清除超时保护
               clearTimeout(timeoutId);
@@ -2698,7 +2805,7 @@ onMounted(() => {
 
   // 监听容器尺寸变化（用于响应外部收起/展开操作）
   nextTick(() => {
-    if (containerRef.value && typeof ResizeObserver !== 'undefined') {
+    if (containerRef.value && typeof ResizeObserver !== "undefined") {
       resizeObserver = new ResizeObserver((entries) => {
         // 使用防抖，避免频繁触发
         if (resizeDebounceTimer) {
@@ -2715,7 +2822,7 @@ onMounted(() => {
       resizeObserver.observe(containerRef.value);
     } else {
       // 降级方案：监听窗口大小变化
-      window.addEventListener('resize', handleContainerResize);
+      window.addEventListener("resize", handleContainerResize);
     }
   });
 });
@@ -2745,7 +2852,7 @@ onBeforeUnmount(() => {
     resizeObserver = null;
   }
   // 移除窗口 resize 监听器（降级方案）
-  window.removeEventListener('resize', handleContainerResize);
+  window.removeEventListener("resize", handleContainerResize);
 });
 
 // 获取当前高亮位置信息（用于连接线功能）
@@ -3006,7 +3113,7 @@ defineExpose({
   width: 320px;
   pointer-events: auto;
   background-color: #fff;
-  border-radius: 8px;
+  border-radius: 6px;
   box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
   animation: fade-in 0.2s ease;
   overflow: hidden;
@@ -3016,7 +3123,33 @@ defineExpose({
     align-items: center;
     justify-content: space-between;
     padding: 12px 16px;
-    border-bottom: 1px solid #e5e7eb;
+    padding-bottom: 8px;
+
+    .annotation-input-header-title {
+      position: relative;
+      max-height: 21px;
+      padding-left: 12px; // 增加左侧内边距，为竖线留出空间
+      padding-right: 6px;
+      color: #8f959e;
+      font-size: 12px;
+      line-height: 20px;
+      overflow: hidden;
+      white-space: nowrap;
+      -o-text-overflow: ellipsis;
+      text-overflow: ellipsis;
+
+      // 左侧竖线，表示引用
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 2px;
+        width: 2px;
+        height: 16px;
+        background-color: #bbbfc4 !important;
+        border-radius: 1px;
+      }
+    }
 
     .annotation-input-title {
       font-size: 14px;
@@ -3024,6 +3157,27 @@ defineExpose({
       color: #1d2129;
     }
 
+    .annotation-header-user-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+    }
+
+    .annotation-user-avatar {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      object-fit: cover;
+      background-color: #f0f0f0;
+    }
+
+    .annotation-username {
+      font-size: 14px;
+      font-weight: 500;
+      color: #1d2129;
+    }
+
     .annotation-close-btn {
       display: flex;
       align-items: center;
@@ -3037,6 +3191,7 @@ defineExpose({
       border-radius: 4px;
       color: #86909c;
       transition: all 0.2s;
+      margin-left: 10px;
 
       &:hover {
         background-color: #f0f0f0;
@@ -3046,10 +3201,12 @@ defineExpose({
   }
 
   .annotation-input-content {
-    padding: 12px 16px;
+    padding: 0px 16px;
 
     .annotation-textarea {
       width: 100%;
+      margin: 12px 0px;
+      margin-bottom: 16px;
     }
   }
 
@@ -3059,10 +3216,20 @@ defineExpose({
     justify-content: flex-end;
     gap: 8px;
     padding: 12px 16px;
-    border-top: 1px solid #e5e7eb;
   }
 }
 
+.annotation-input-popup:before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: -1px;
+  right: -1px;
+  border-top: 8px solid rgb(255, 198, 10);
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
 // 有批注的文本块样式
 .text-block.has-annotation {
   position: relative;