@koi-br/ocr-web-sdk 1.0.20 → 1.0.22

package/preview/ImagePreview.vue

@@ -1,7 +1,8 @@
 <template>
   <div
     class="preview-container"
-    @wheel.prevent="handleWheel"
+    :class="{ 'wheel-zoom-enabled': enableWheelZoom }"
+    @wheel="handleWheel"
   >
     <!-- 工具栏 -->
     <div class="preview-toolbar preview-toolbar-between">
@@ -93,32 +94,80 @@
     </div>
 
     <div
-      class="relative w-full h-full flex items-center justify-center overflow-hidden"
+      ref="containerRef"
+      class="image-container"
       @mousedown="startPan"
       @mousemove="pan"
       @mouseup="stopPan"
       @mouseleave="stopPan"
+      @scroll="handleScroll"
     >
-      <img
-        v-if="url"
-        :src="url"
-        alt="预览图片"
-        :style="{
-          transform: `translate(${position.x}px, ${position.y}px) rotate(${rotation}deg) scale(${scale})`,
-          cursor: isPanning ? 'grabbing' : 'grab'
+      <div 
+        class="image-wrapper-container"
+        :style="containerStyle"
+      >
+        <div
+          class="image-wrapper"
+          :style="{
+            transform: `translate(${position.x}px, ${position.y}px) rotate(${rotation}deg) scale(${scale})`,
+            transformOrigin: 'center center'
+          }"
+        >
+        <img
+          v-if="url"
+          ref="imageRef"
+          :src="url"
+          alt="预览图片"
+          :style="{
+            cursor: isPanning ? 'grabbing' : 'grab',
+            display: 'block'
         }"
         @contextmenu.prevent
         @mousedown.prevent
         @load="onImageLoad"
       />
+        
+        <!-- 文本图层（用于文本块选择和定位） -->
+        <div
+          v-if="blocksData && blocksData.length > 0"
+          ref="textLayerRef"
+          class="text-layer"
+        ></div>
+        </div>
+      </div>
+
+      <!-- 复制按钮浮层 -->
+      <div
+        v-if="showCopyButton"
+        ref="copyButtonRef"
+        class="copy-button-popup"
+        :style="copyButtonStyle"
+        @mouseenter="cancelHideCopyButton"
+        @mouseleave="hideCopyButtonAndHighlight"
+      >
+        <div class="copy-button-popup-action" @click="copySelectedText">
+          <Copy :size="12" style="margin-right: 4px" />
+          复制
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
-<script setup>
-import { ref } from 'vue';
-import { ZoomIn, ZoomOut, RefreshCcw, RotateCw, RotateCcw, Download, Maximize2 } from 'lucide-vue-next';
-import { Button as AButton, Tooltip as ATooltip } from '@arco-design/web-vue';
+<script setup lang="ts">
+import { ref, watch, nextTick, onMounted, onBeforeUnmount, computed } from 'vue';
+import { ZoomIn, ZoomOut, RefreshCcw, RotateCw, RotateCcw, Download, Maximize2, Copy } from 'lucide-vue-next';
+import { Button as AButton, Tooltip as ATooltip, Message } from '@arco-design/web-vue';
+
+/**
+ * 文本块数据结构（与 PdfPreview 保持一致）
+ */
+interface BlockInfo {
+  blockLabel: string; // 块标签
+  blockContent: string; // 块内容
+  blockBbox: [number, number, number, number]; // 块的边界框 [x1, y1, x2, y2]
+  blockPage?: number; // 块所属的页码（图片预览中通常为1，可选）
+}
 
 const props = defineProps({
   url: {
@@ -148,10 +197,23 @@ const props = defineProps({
   isDownload: {
     type: Boolean,
     default: false
+  },
+  blocksData: {
+    type: Array as () => BlockInfo[],
+    default: () => []
+  },
+  enableWheelZoom: {
+    type: Boolean,
+    default: true // 默认启用滚轮缩放，保持向后兼容
   }
 });
 
-const emit = defineEmits(['original', 'download', 'load']);
+const emit = defineEmits<{
+  'original': [];
+  'download': [];
+  'load': [data: { width: number; height: number }];
+  'position-jump': [bbox: [number, number, number, number], type: 'block' | 'seal'];
+}>();
 
 const rotation = ref(0);
 const scale = ref(1);
@@ -159,6 +221,56 @@ const position = ref({ x: 0, y: 0 });
 const isPanning = ref(false);
 const lastPosition = ref({ x: 0, y: 0 });
 
+// 图片和容器引用
+const containerRef = ref<HTMLElement>();
+const imageRef = ref<HTMLImageElement>();
+const textLayerRef = ref<HTMLElement>();
+const copyButtonRef = ref<HTMLElement>();
+
+// 图片尺寸
+const imageSize = ref({ width: 0, height: 0 });
+
+// 计算图片放大后的实际尺寸（考虑旋转）
+const scaledImageSize = computed(() => {
+  if (imageSize.value.width === 0 || imageSize.value.height === 0) {
+    return { width: 0, height: 0 };
+  }
+
+  const { width, height } = imageSize.value;
+  const scaledWidth = width * scale.value;
+  const scaledHeight = height * scale.value;
+
+  // 如果旋转了 90 度或 270 度，交换宽高
+  const normalizedRotation = ((rotation.value % 360) + 360) % 360;
+  const isRotated = normalizedRotation === 90 || normalizedRotation === 270;
+
+  return {
+    width: isRotated ? scaledHeight : scaledWidth,
+    height: isRotated ? scaledWidth : scaledHeight
+  };
+});
+
+// 容器样式，动态设置最小尺寸以支持滚动
+const containerStyle = computed(() => {
+  const { width, height } = scaledImageSize.value;
+  const padding = 40; // 左右各20px，共40px
+
+  return {
+    minWidth: width > 0 ? `${width + padding}px` : '100%',
+    minHeight: height > 0 ? `${height + padding}px` : '100%'
+  };
+});
+
+// 文本选择相关状态
+const showCopyButton = ref(false);
+const selectedText = ref('');
+const copyButtonStyle = ref<any>({});
+const activeBlockDiv = ref<HTMLElement | null>(null);
+const isHighlighted = ref(false); // 标识是否为定位点击的高亮
+
+// 隐藏定时器
+let hideTimer: any = null;
+
 const rotateImage = direction => {
   if (direction === 'left') {
     rotation.value = (rotation.value - 90) % 360;
@@ -179,19 +291,32 @@ const zoom = (delta, isWheel = false) => {
   }
 };
 
-const handleWheel = e => {
+const handleWheel = (e: WheelEvent) => {
+  // 如果禁用了滚轮缩放，不阻止默认行为，允许正常滚动
+  if (!props.enableWheelZoom) {
+    return; // 不调用 preventDefault，允许默认滚动行为
+  }
+  // 启用滚轮缩放时，阻止默认行为并执行缩放
   e.preventDefault();
   const delta = e.deltaY > 0 ? -1 : 1;
   zoom(delta, true);
 };
 
-const startPan = e => {
+const startPan = (e: MouseEvent) => {
+  // 只在左键点击时启用拖拽
   if (e.button !== 0) return;
+  // 如果按住 Ctrl 或 Meta 键，允许拖拽（避免与文本选择冲突）
+  // 如果没有文本图层数据，或者按住修饰键，允许拖拽
+  if (props.blocksData && props.blocksData.length > 0 && !e.ctrlKey && !e.metaKey) {
+    // 有文本图层时，默认不拖拽，允许文本选择
+    return;
+  }
   isPanning.value = true;
   lastPosition.value = { x: e.clientX, y: e.clientY };
+  e.preventDefault(); // 阻止默认行为，避免与滚动冲突
 };
 
-const pan = e => {
+const pan = (e: MouseEvent) => {
   if (!isPanning.value) return;
 
   const deltaX = e.clientX - lastPosition.value.x;
@@ -203,6 +328,7 @@ const pan = e => {
   };
 
   lastPosition.value = { x: e.clientX, y: e.clientY };
+  e.preventDefault(); // 拖拽时阻止默认行为
 };
 
 const stopPan = () => {
@@ -213,6 +339,12 @@ const reset = () => {
   rotation.value = 0;
   scale.value = 1;
   position.value = { x: 0, y: 0 };
+  
+  // 重置文本选择状态
+  showCopyButton.value = false;
+  selectedText.value = '';
+  activeBlockDiv.value = null;
+  isHighlighted.value = false;
 };
 
 const original = () => {
@@ -220,29 +352,653 @@ const original = () => {
 };
 
 // 图片加载完成处理
-const onImageLoad = (event) => {
-  const img = event.target;
+const onImageLoad = (event: Event) => {
+  const img = event.target as HTMLImageElement;
+  imageSize.value = {
+    width: img.naturalWidth,
+    height: img.naturalHeight
+  };
   emit('load', {
     width: img.naturalWidth,
     height: img.naturalHeight
   });
+  
+  // 图片加载完成后，渲染文本图层
+  nextTick(() => {
+    renderTextLayer();
+  });
+};
+
+/**
+ * 渲染文本图层（使用 blocksData 数据）
+ */
+const renderTextLayer = () => {
+  const textLayer = textLayerRef.value;
+  const image = imageRef.value;
+
+  if (!textLayer || !image) {
+    return;
+  }
+
+  // 如果没有提供分块数据，跳过渲染
+  if (!props.blocksData || props.blocksData.length === 0) {
+    textLayer.innerHTML = '';
+    return;
+  }
+
+  try {
+    // 设置文本图层的尺寸与图片尺寸一致
+    textLayer.style.width = `${image.naturalWidth}px`;
+    textLayer.style.height = `${image.naturalHeight}px`;
+
+    // 清空文本图层
+    textLayer.innerHTML = '';
+
+    // 使用 blocksData 创建可交互的块
+    props.blocksData.forEach((block, index) => {
+      const { blockLabel, blockContent, blockBbox } = block;
+
+      // blockBbox 格式: [x1, y1, x2, y2]
+      const [x1, y1, x2, y2] = blockBbox;
+      const width = x2 - x1;
+      const height = y2 - y1;
+
+      // 创建文本块
+      const blockDiv = document.createElement('div');
+      blockDiv.className = 'text-block';
+      blockDiv.dataset.text = blockContent;
+      blockDiv.dataset.label = blockLabel;
+      blockDiv.dataset.bbox = JSON.stringify(blockBbox);
+
+      // 设置基础样式
+      blockDiv.style.position = 'absolute';
+      blockDiv.style.left = `${x1}px`;
+      blockDiv.style.top = `${y1}px`;
+      blockDiv.style.width = `${width}px`;
+      blockDiv.style.height = `${height}px`;
+      blockDiv.style.zIndex = '10';
+      blockDiv.style.cursor = 'pointer';
+      blockDiv.style.borderRadius = '2px';
+      blockDiv.style.transition = 'all 0.2s ease';
+      blockDiv.style.backgroundColor = 'transparent';
+
+      // Hover 和点击事件
+      blockDiv.addEventListener('mouseenter', (e) => {
+        // 取消之前的隐藏定时器
+        if (hideTimer) {
+          clearTimeout(hideTimer);
+          hideTimer = null;
+        }
+
+        // 如果有之前激活的文本块，先恢复其样式
+        if (activeBlockDiv.value && activeBlockDiv.value !== blockDiv) {
+          if (isHighlighted.value) {
+            isHighlighted.value = false;
+          }
+          activeBlockDiv.value.style.backgroundColor = 'transparent';
+          activeBlockDiv.value.style.boxShadow = 'none';
+        }
+
+        // 设置当前文本块为激活状态
+        activeBlockDiv.value = blockDiv;
+        isHighlighted.value = false; // 鼠标悬停时清除定位高亮标志
+
+        // 直接设置 hover 样式
+        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)';
+
+        // 显示复制按钮
+        showCopyButtonForBlock(e, blockDiv);
+      });
+
+      blockDiv.addEventListener('mouseleave', () => {
+        // 延迟隐藏，给用户时间移动到复制按钮
+        hideCopyButtonAndHighlight();
+      });
+
+      textLayer.appendChild(blockDiv);
+    });
+  } catch (error) {
+    console.error('❌ 文本图层渲染失败:', error);
+  }
+};
+
+/**
+ * 显示文本块的复制按钮
+ */
+const showCopyButtonForBlock = (event: MouseEvent, blockDiv: HTMLElement) => {
+  const text = blockDiv.dataset.text || '';
+  if (!text) return;
+
+  selectedText.value = text;
+
+  const rect = blockDiv.getBoundingClientRect();
+  const containerRect = containerRef.value?.getBoundingClientRect();
+
+  if (!containerRect || !containerRef.value) return;
+
+  // 计算复制按钮的位置
+  const buttonCount = 1;
+  const buttonWidth = 80;
+  const popupWidth = buttonCount * buttonWidth + 8;
+  const popupHeight = 38;
+  const spacing = 8;
+
+  // 计算相对于容器的坐标（考虑滚动）
+  const relativeX = rect.left - containerRect.left + containerRef.value.scrollLeft;
+  const relativeY = rect.top - containerRect.top + containerRef.value.scrollTop;
+
+  // 容器可用空间
+  const containerWidth = containerRef.value.clientWidth;
+
+  // 计算可用空间
+  const rectBottom = rect.bottom;
+  const rectTop = rect.top;
+  const containerBottom = containerRect.bottom;
+  const containerTop = containerRect.top;
+
+  const bottomSpace = containerBottom - rectBottom;
+  const topSpace = rectTop - containerTop;
+
+  const showOnBottom = bottomSpace >= popupHeight + spacing || (bottomSpace > 0 && bottomSpace >= topSpace);
+
+  // 计算最终位置
+  let left: number;
+  let top: number;
+
+  const centerX = relativeX + rect.width / 2;
+  left = centerX - popupWidth / 2;
+
+  if (showOnBottom) {
+    top = relativeY + rect.height + spacing;
+  } else {
+    top = relativeY - popupHeight - spacing;
+  }
+
+  // 边界检查
+  const popupTopInViewport = top - containerRef.value.scrollTop + containerRect.top;
+  const popupBottomInViewport = popupTopInViewport + popupHeight;
+
+  if (popupBottomInViewport > containerBottom - spacing) {
+    top = relativeY - popupHeight - spacing;
+  }
+
+  const newPopupTopInViewport = top - containerRef.value.scrollTop + containerRect.top;
+  if (newPopupTopInViewport < containerTop + spacing) {
+    top = relativeY + rect.height + spacing;
+  }
+
+  // 确保不超出容器边界
+  if (left + popupWidth > containerWidth - spacing) {
+    left = containerWidth - popupWidth - spacing;
+  }
+  if (left < spacing) {
+    left = spacing;
+  }
+
+  copyButtonStyle.value = {
+    left: `${left}px`,
+    top: `${top}px`
+  };
+
+  showCopyButton.value = true;
+};
+
+/**
+ * 隐藏复制按钮并移除文本块高亮
+ */
+const hideCopyButtonAndHighlight = () => {
+  hideTimer = setTimeout(() => {
+    showCopyButton.value = false;
+
+    if (activeBlockDiv.value && !isHighlighted.value) {
+      activeBlockDiv.value.style.backgroundColor = 'transparent';
+      activeBlockDiv.value.style.boxShadow = 'none';
+      activeBlockDiv.value = null;
+    }
+  }, 300);
+};
+
+/**
+ * 取消隐藏（鼠标进入复制按钮时调用）
+ */
+const cancelHideCopyButton = () => {
+  if (hideTimer) {
+    clearTimeout(hideTimer);
+    hideTimer = null;
+  }
+};
+
+/**
+ * 将HTML表格转换为纯文本格式
+ */
+const convertHtmlTableToText = (htmlString: string): string => {
+  if (!/<[^>]+>/g.test(htmlString)) {
+    return htmlString;
+  }
+
+  try {
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlString;
+
+    const tables = tempDiv.querySelectorAll('table');
+
+    if (tables.length === 0) {
+      return tempDiv.textContent || htmlString;
+    }
+
+    let result = '';
+
+    tables.forEach((table, tableIndex) => {
+      if (tableIndex > 0) {
+        result += '\n\n';
+      }
+
+      const rows = table.querySelectorAll('tr');
+
+      rows.forEach((row) => {
+        const cells = row.querySelectorAll('td, th');
+        const cellTexts: string[] = [];
+
+        cells.forEach((cell) => {
+          const text = (cell.textContent || '').trim();
+          cellTexts.push(text);
+        });
+
+        if (cellTexts.length > 0) {
+          result += `| ${cellTexts.join(' | ')} |\n`;
+        }
+      });
+    });
+
+    return result.trim();
+  } catch (error) {
+    console.error('HTML表格转换失败:', error);
+    return htmlString.replace(/<[^>]+>/g, '');
+  }
+};
+
+/**
+ * 复制选中的文本
+ */
+const copySelectedText = async () => {
+  try {
+    const textToCopy = convertHtmlTableToText(selectedText.value);
+
+    if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+      try {
+        await navigator.clipboard.writeText(textToCopy);
+      } catch (clipboardError) {
+        console.warn('Clipboard API 失败，使用降级方案:', clipboardError);
+        fallbackCopyText(textToCopy);
+      }
+    } else {
+      fallbackCopyText(textToCopy);
+    }
+
+    showCopyButton.value = false;
+
+    if (activeBlockDiv.value && !isHighlighted.value) {
+      activeBlockDiv.value.style.backgroundColor = 'transparent';
+      activeBlockDiv.value.style.boxShadow = 'none';
+      activeBlockDiv.value = null;
+    }
+
+    window.getSelection()?.removeAllRanges();
+  } catch (error) {
+    console.error('复制失败:', error);
+    Message.error('复制失败，请手动选择并复制文本');
+  }
+};
+
+/**
+ * 降级复制方案
+ */
+const fallbackCopyText = (text: string) => {
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  textarea.style.position = 'fixed';
+  textarea.style.top = '-9999px';
+  textarea.style.left = '-9999px';
+  textarea.style.opacity = '0';
+  textarea.style.pointerEvents = 'none';
+
+  document.body.appendChild(textarea);
+
+  try {
+    textarea.focus();
+    textarea.select();
+    textarea.setSelectionRange(0, textarea.value.length);
+    const successful = document.execCommand('copy');
+    if (!successful) {
+      throw new Error('execCommand("copy") 返回 false');
+    }
+  } finally {
+    document.body.removeChild(textarea);
+  }
+};
+
+/**
+ * 处理滚动事件（隐藏复制按钮和文本块高亮）
+ */
+const handleScroll = () => {
+  if (hideTimer) {
+    clearTimeout(hideTimer);
+  }
+
+  showCopyButton.value = false;
+
+  if (activeBlockDiv.value && !isHighlighted.value) {
+    activeBlockDiv.value.style.backgroundColor = 'transparent';
+    activeBlockDiv.value.style.boxShadow = 'none';
+    activeBlockDiv.value = null;
+  }
+};
+
+/**
+ * 检查元素是否在视口内可见
+ */
+const isElementVisible = (element: HTMLElement, container: HTMLElement): boolean => {
+  const elementRect = element.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+
+  return (
+    elementRect.top < containerRect.bottom &&
+    elementRect.bottom > containerRect.top &&
+    elementRect.left < containerRect.right &&
+    elementRect.right > containerRect.left
+  );
+};
+
+/**
+ * 高亮指定位置
+ * @param bbox 块的边界框 [x1, y1, x2, y2]
+ * @param shouldScroll 是否应该滚动到元素位置
+ * @returns 是否成功找到并高亮了元素
+ */
+const highlightPosition = (
+  bbox: [number, number, number, number],
+  shouldScroll: boolean = true
+): boolean => {
+  // 清除之前的高亮
+  if (activeBlockDiv.value) {
+    activeBlockDiv.value.style.backgroundColor = 'transparent';
+    activeBlockDiv.value.style.boxShadow = 'none';
+    activeBlockDiv.value = null;
+  }
+  isHighlighted.value = false;
+
+  const textLayer = textLayerRef.value;
+  if (!textLayer) return false;
+
+  // 查找对应的块元素，使用存储的bbox数据匹配（使用容差）
+  const blockDivs = textLayer.querySelectorAll('.text-block');
+  const tolerance = 2;
+
+  let matchedElement: HTMLElement | null = null;
+
+  blockDivs.forEach((div) => {
+    const el = div as HTMLElement;
+    const storedBbox = el.dataset.bbox;
+    if (!storedBbox) return;
+
+    try {
+      const parsedBbox = JSON.parse(storedBbox) as [number, number, number, number];
+
+      const isMatch =
+        Math.abs(parsedBbox[0] - bbox[0]) < tolerance &&
+        Math.abs(parsedBbox[1] - bbox[1]) < tolerance &&
+        Math.abs(parsedBbox[2] - bbox[2]) < tolerance &&
+        Math.abs(parsedBbox[3] - bbox[3]) < tolerance;
+
+      if (isMatch) {
+        matchedElement = el;
+      }
+    } catch (error) {
+      console.warn('解析bbox失败:', error);
+    }
+  });
+
+  if (!matchedElement) return false;
+
+  // 保存引用
+  const elementRef = matchedElement;
+
+  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 (shouldScroll && containerRef.value) {
+    const isVisible = isElementVisible(elementRef, containerRef.value);
+    if (!isVisible) {
+      elementRef.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }
+
+  // 5秒后自动取消高亮
+  setTimeout(() => {
+    if (activeBlockDiv.value === elementRef && isHighlighted.value) {
+      elementRef.style.backgroundColor = 'transparent';
+      elementRef.style.boxShadow = 'none';
+      activeBlockDiv.value = null;
+      isHighlighted.value = false;
+    }
+  }, 5000);
+
+  return true;
 };
 
+/**
+ * 跳转到指定位置并高亮（外部调用接口）
+ * @param bbox 位置的边界框 [x1, y1, x2, y2]
+ * @param emitEvent 是否触发跳转事件，默认为 true
+ */
+const jumpToPosition = (
+  bbox: [number, number, number, number],
+  emitEvent: boolean = true
+) => {
+  // 等待DOM更新后再高亮
+  nextTick(() => {
+    let retryCount = 0;
+    const maxRetries = 5;
+    const retryDelay = 200;
+
+    const tryHighlight = () => {
+      const success = highlightPosition(bbox, true);
+      if (success) {
+        // 高亮成功，触发事件
+        if (emitEvent) {
+          const matchedElement = activeBlockDiv.value;
+          const label = matchedElement?.dataset.label || '';
+          const type = label === 'seal' ? 'seal' : 'block';
+          emit('position-jump', bbox, type);
+        }
+      } else if (retryCount < maxRetries) {
+        retryCount++;
+        setTimeout(tryHighlight, retryDelay);
+      } else {
+        console.warn(`无法找到并高亮指定位置: bbox: [${bbox.join(', ')}]`);
+      }
+    };
+
+    setTimeout(tryHighlight, 300);
+  });
+};
+
+/**
+ * 监听 blocksData 变化，重新渲染文本图层
+ */
+watch(
+  () => props.blocksData,
+  () => {
+    nextTick(() => {
+      renderTextLayer();
+    });
+  },
+  { deep: true, immediate: false }
+);
+
+/**
+ * 监听图片尺寸变化，重新渲染文本图层
+ */
+watch(
+  () => imageSize.value,
+  () => {
+    if (imageSize.value.width > 0 && imageSize.value.height > 0) {
+      nextTick(() => {
+        renderTextLayer();
+      });
+    }
+  },
+  { deep: true }
+);
+
+/**
+ * 监听缩放、旋转、位置变化，更新文本图层位置
+ */
+watch([scale, rotation, position], () => {
+  // 文本图层会跟随图片的 transform，不需要手动更新位置
+  // 但需要确保文本图层与图片同步变换
+}, { deep: true });
+
+/**
+ * 组件挂载时的初始化
+ */
+onMounted(() => {
+  // 如果图片已经加载完成，立即渲染文本图层
+  if (imageRef.value && imageRef.value.complete) {
+    nextTick(() => {
+      renderTextLayer();
+    });
+  }
+});
+
+/**
+ * 组件卸载前的清理
+ */
+onBeforeUnmount(() => {
+  if (hideTimer) {
+    clearTimeout(hideTimer);
+    hideTimer = null;
+  }
+});
+
 defineExpose({
-  reset
+  reset,
+  jumpToPosition // 暴露定位方法给父组件
 });
 </script>
 
 <style lang="less" scoped>
 // 样式已统一到公共样式文件，这里只保留组件特定样式
-.preview-container .relative {
+
+// 图片容器
+.image-container {
   flex: 1;
   position: relative;
   width: 100%;
   height: 100%;
+  overflow: auto;
+  
+  // 自定义滚动条
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #d1d5db;
+    border-radius: 3px;
+
+    &:hover {
+      background-color: rgb(0 0 0 / 30%);
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: rgb(243 244 246);
+  }
+}
+
+// 图片包装器容器（用于居中显示和提供滚动空间）
+.image-wrapper-container {
   display: flex;
   align-items: center;
   justify-content: center;
-  overflow: hidden;
+  width: 100%;
+  min-height: 100%;
+  padding: 20px; // 添加内边距，确保放大后的图片有滚动空间
+  box-sizing: border-box;
+  // 确保容器能够正确滚动
+  position: relative;
+}
+
+// 图片包装器（包含图片和文本图层）
+.image-wrapper {
+  position: relative;
+  display: inline-block;
+  transform-origin: center center;
+  flex-shrink: 0;
+  // 确保包装器能够正确占据空间，支持滚动
+  max-width: none;
+  max-height: none;
+}
+
+// 文本图层样式
+.text-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: auto; // 允许鼠标事件
+}
+
+// 复制按钮浮层
+.copy-button-popup {
+  position: absolute;
+  z-index: 1000;
+  display: flex;
+  flex-direction: row;
+  width: fit-content;
+  padding: 4px;
+  pointer-events: auto;
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  animation: fade-in 0.2s ease;
+  
+  .copy-button-popup-action {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 30px;
+    padding: 0 6px;
+    font-size: 12px;
+    color: #1d2129;
+    white-space: nowrap;
+    cursor: pointer;
+    border-radius: 4px;
+  }
+
+  .copy-button-popup-action:hover {
+    background-color: #f0f0f0;
+  }
+}
+
+// 淡入动画
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 </style>