@koi-br/ocr-web-sdk 1.0.0

package/preview/PdfPreview.vue

@@ -0,0 +1,2571 @@
+<template>
+  <div class="preview-container">
+    <!-- 工具栏 -->
+    <div class="preview-toolbar preview-toolbar-between">
+      <!-- 左侧: 翻页控制 -->
+      <div class="toolbar-group">
+        <!-- 目录和印章列表切换按钮 -->
+        <a-tooltip
+          v-if="props.showTocSidebar !== false"
+          class="ai-chat-tooltip"
+          mini
+          position="bottom"
+          content="目录和印章"
+        >
+          <a-button
+            size="small"
+            type="outline"
+            @click="showTocSidebar = !showTocSidebar"
+          >
+            <List :size="16" />
+          </a-button>
+        </a-tooltip>
+
+        <div class="page-info">
+          <!-- 当前页码输入框（自定义实现） -->
+          <input
+            v-model="inputPage"
+            type="text"
+            class="page-input"
+            :style="{ width: pageInputWidth }"
+            @input="handlePageInputChange"
+            @blur="handlePageInputBlur"
+            @keydown.enter="handlePageInputEnter"
+          />
+          <span class="page-separator">/</span>
+          <span class="total-pages">{{ totalPages }}</span>
+        </div>
+      </div>
+
+      <!-- 右侧: 缩放控制和全屏控制 -->
+      <div class="toolbar-group">
+        <!-- 缩放模式选择 -->
+        <a-dropdown trigger="hover" @select="handleScaleModeChange">
+          <a-button size="small" type="outline" class="scale-mode-btn">
+            <component :is="currentScaleModeIcon" :size="16" />
+          </a-button>
+          <template #content>
+            <a-doption
+              v-for="mode in scaleModeOptions"
+              :key="mode.value"
+              :value="mode.value"
+              class="scale-mode-option"
+            >
+              <div
+                class="scale-mode-item"
+                :class="{ 'scale-mode-item-active': scaleMode === mode.value }"
+              >
+                <component
+                  :is="mode.icon"
+                  :size="16"
+                  class="scale-mode-item-icon"
+                />
+                <span class="scale-mode-item-label">{{ mode.label }}</span>
+                <Check
+                  v-if="scaleMode === mode.value"
+                  :size="16"
+                  class="scale-mode-item-check"
+                />
+              </div>
+            </a-doption>
+          </template>
+        </a-dropdown>
+
+        <!-- 分隔线 -->
+        <div class="toolbar-divider"></div>
+
+        <!-- 重置按钮 -->
+        <a-tooltip mini position="bottom" content="重置">
+          <a-button size="small" type="outline" @click="reset">
+            <RefreshCcw :size="16" />
+          </a-button>
+        </a-tooltip>
+
+        <!-- 缩小按钮 -->
+        <a-tooltip mini position="bottom" content="缩小">
+          <a-button
+            size="small"
+            type="outline"
+            :disabled="scale <= 0.5"
+            @click="zoomOut"
+          >
+            <ZoomOut :size="16" />
+          </a-button>
+        </a-tooltip>
+
+        <!-- 放大按钮 -->
+        <a-tooltip mini position="bottom" content="放大">
+          <a-button
+            size="small"
+            type="outline"
+            :disabled="scale >= 3"
+            @click="zoomIn"
+          >
+            <ZoomIn :size="16" />
+          </a-button>
+        </a-tooltip>
+
+        <!-- 分隔线 -->
+        <div class="toolbar-divider"></div>
+
+        <!-- 下载按钮 -->
+        <a-tooltip
+          v-if="props.isDownload"
+          mini
+          position="bottom"
+          content="下载"
+        >
+          <a-button size="small" type="outline" @click="emit('download')">
+            <Download :size="16" />
+          </a-button>
+        </a-tooltip>
+
+        <!-- 分隔线（仅在显示下载按钮时显示） -->
+        <div v-if="props.isDownload" class="toolbar-divider"></div>
+
+        <!-- 全屏按钮 -->
+        <a-tooltip
+          mini
+          position="bottom"
+          :content="isFullscreen ? '退出全屏' : '全屏查看'"
+        >
+          <a-button size="small" type="outline" @click="toggleFullscreen">
+            <Maximize2 v-if="!isFullscreen" :size="15" />
+            <Minimize2 v-else :size="15" />
+          </a-button>
+        </a-tooltip>
+      </div>
+    </div>
+
+    <!-- 主内容区域（包含侧边栏和PDF预览） -->
+    <div class="pdf-main-container">
+      <!-- 目录和印章侧边栏 -->
+      <div
+        v-if="props.showTocSidebar !== false"
+        class="toc-sidebar"
+        :class="{ 'toc-sidebar-show': showTocSidebar }"
+      >
+        <!-- Tab切换器 -->
+        <div class="toc-tab-switcher">
+          <div
+            class="toc-tab-item"
+            :class="{ 'toc-tab-item-active': activeTab === 'toc' }"
+            @click="activeTab = 'toc'"
+          >
+            <a-tooltip
+              class="ai-chat-tooltip"
+              mini
+              position="top"
+              content="目录"
+            >
+              <FileText :size="16" />
+            </a-tooltip>
+          </div>
+          <div
+            class="toc-tab-item"
+            :class="{ 'toc-tab-item-active': activeTab === 'seal' }"
+            @click="activeTab = 'seal'"
+          >
+            <a-tooltip
+              class="ai-chat-tooltip"
+              mini
+              position="top"
+              content="印章"
+            >
+              <Stamp :size="16" />
+            </a-tooltip>
+          </div>
+        </div>
+        <div class="toc-sidebar-content">
+          <!-- 目录tab内容 -->
+          <div v-if="activeTab === 'toc'" class="toc-tab-content">
+            <div v-if="tocList.length === 0" class="toc-empty">暂无目录</div>
+            <div
+              v-for="item in tocList"
+              :key="item.id"
+              class="toc-item"
+              :class="{
+                'toc-item-doc-title': item.type === 'doc_title',
+                'toc-item-paragraph': item.type === 'paragraph_title',
+              }"
+              @click="jumpToBlock(item)"
+            >
+              <span class="toc-item-content">{{ item.content }}</span>
+            </div>
+          </div>
+          <!-- 印章tab内容 -->
+          <div v-if="activeTab === 'seal'" class="toc-tab-content">
+            <div v-if="sealList.length === 0" class="toc-empty">暂无印章</div>
+            <div
+              v-for="seal in sealList"
+              :key="seal.id"
+              class="toc-item toc-item-seal"
+              @click="jumpToSeal(seal)"
+            >
+              <span class="toc-item-content">{{ seal.name }}</span>
+              <span class="toc-item-page">第{{ seal.page }}页</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- PDF 内容区域 -->
+      <div
+        ref="containerRef"
+        class="pdf-content"
+        :class="{
+          fullscreen: isFullscreen,
+          'pdf-content-with-sidebar':
+            props.showTocSidebar !== false && showTocSidebar,
+        }"
+        @scroll="handleScroll"
+      >
+        <div class="pdf-viewer">
+          <!-- PDF 缩放包装器 -->
+
+          <div
+            class="pdf-scale-wrapper"
+            :style="{
+              transform: `scale(${scale})`,
+              transformOrigin: 'top center',
+            }"
+          >
+            <!-- 渲染所有 PDF 页面 -->
+            <div
+              v-for="pageNum in totalPages"
+              :key="pageNum"
+              class="pdf-page-container"
+              :data-page-number="pageNum"
+            >
+              <!-- PDF 画布 -->
+              <canvas
+                :ref="(el) => setCanvasRef(el, pageNum)"
+                class="pdf-canvas"
+              ></canvas>
+
+              <!-- 文本图层（用于段落选择） -->
+              <div
+                :ref="(el) => setTextLayerRef(el, pageNum)"
+                class="text-layer"
+              ></div>
+            </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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  nextTick,
+  markRaw,
+} from "vue";
+import * as pdfjsLib from "pdfjs-dist";
+// 导入图标组件（在模板中使用）
+// @ts-ignore: 这些导入在 Vue 模板中使用
+import {
+  ZoomIn,
+  ZoomOut,
+  Maximize2,
+  Minimize2,
+  Copy,
+  Check,
+  ScanEye,
+  ArrowUpDown,
+  MoveHorizontal,
+  Ratio,
+  List,
+  FileText,
+  Stamp,
+  Download,
+  RefreshCcw,
+} from "lucide-vue-next";
+import { Message } from "@arco-design/web-vue";
+
+// 定义组件名称
+defineOptions({
+  name: "NewPdfViewerBloack",
+});
+
+// 设置 PDF.js worker 路径
+// 注意: 需要将 worker 文件复制到 public 目录
+pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;
+
+/**
+ * PDF分块数据结构
+ */
+interface BlockInfo {
+  blockLabel: string; // 块标签
+  blockContent: string; // 块内容
+  blockBbox: [number, number, number, number]; // 块的边界框 [x1, y1, x2, y2]
+  blockPage: number; // 块所属的页码（从1开始）
+}
+
+/**
+ * 目录项数据结构
+ */
+interface TocItem {
+  id: string;
+  type: "doc_title" | "paragraph_title";
+  content: string;
+  page: number;
+  blockBbox: [number, number, number, number];
+}
+
+/**
+ * 印章项数据结构
+ */
+interface SealItem {
+  id: string;
+  name: string;
+  page: number;
+  index: number;
+  blockBbox: [number, number, number, number];
+}
+
+/**
+ * 组件属性定义
+ */
+interface Props {
+  pdfUrl: string; // PDF 文件的 URL
+  blocksData?: BlockInfo[]; // PDF分块数据（从后端layout-parsing接口获取）
+  showTocSidebar?: boolean; // 是否显示目录侧边栏（包括工具栏中的切换按钮），默认为 true
+  isDownload?: boolean; // 是否显示下载按钮，默认为 false
+}
+
+// 使用 withDefaults 显式设置默认值，确保未传递 prop 时使用默认值
+const props = withDefaults(defineProps<Props>(), {
+  showTocSidebar: true, // 默认显示目录侧边栏
+  isDownload: false, // 默认不显示下载按钮
+});
+
+/**
+ * 定义组件事件
+ */
+const emit = defineEmits<{
+  "pdf-loaded": []; // PDF 加载并渲染完成事件
+  download: []; // 下载事件
+  "page-jump": [pageNum: number]; // 页面跳转事件，传递目标页码
+  "position-jump": [pageNum: number, bbox: [number, number, number, number], type: "block" | "seal"]; // 位置跳转事件，传递页码、边界框和类型
+}>();
+
+/**
+ * 响应式状态
+ */
+const containerRef = ref<HTMLElement>(); // 容器元素引用
+const copyButtonRef = ref<HTMLElement>(); // 复制按钮引用
+
+// 使用 Map 存储每页的画布和文本图层引用
+const canvasRefs = new Map<number, HTMLCanvasElement>();
+const textLayerRefs = new Map<number, HTMLElement>();
+const inputPage = ref<string>("1"); // 页码输入框的值（字符串类型）
+
+// 设置画布引用
+const setCanvasRef = (el: any, pageNum: number) => {
+  if (el) {
+    canvasRefs.set(pageNum, el);
+  }
+};
+
+// 设置文本图层引用
+const setTextLayerRef = (el: any, pageNum: number) => {
+  if (el) {
+    textLayerRefs.set(pageNum, el);
+  }
+};
+
+// PDF 文档相关状态
+const pdfDoc = ref<any>(null); // PDF 文档对象
+const currentPage = ref(1); // 当前页码（用于页面导航）
+const totalPages = ref(0); // 总页数
+const scale = ref(1); // 缩放比例
+const scaleMode = ref("auto"); // 缩放模式：默认使用自动缩放
+const isFullscreen = ref(false); // 是否全屏
+
+// 文本选择相关状态
+const showCopyButton = ref(false); // 是否显示复制按钮
+const selectedText = ref(""); // 选中的文本
+const copyButtonStyle = ref<any>({}); // 复制按钮的样式
+const activeBlockDiv = ref<HTMLElement | null>(null); // 当前激活的文本块元素
+const isTocHighlighted = ref(false); // 标识是否为目录点击的高亮（不应被鼠标事件清除）
+const isSealHighlighted = ref(false); // 标识是否为印章点击的高亮（不应被鼠标事件清除）
+
+// 目录和印章相关状态
+const tocList = ref<TocItem[]>([]); // 目录列表
+const sealList = ref<SealItem[]>([]); // 印章列表
+const highlightedSealDiv = ref<HTMLElement | null>(null); // 当前高亮的印章元素
+const showTocSidebar = ref(false); // 目录侧边栏显示状态
+const activeTab = ref<"toc" | "seal">("toc"); // 当前选中的tab：目录或印章
+
+// 已渲染文本图层的页面集合（用于增量渲染，避免闪烁）
+const renderedPages = ref<Set<number>>(new Set());
+
+// 防抖定时器（用于避免频繁触发渲染）
+let renderDebounceTimer: any = null;
+
+/**
+ * 缩放模式选项配置
+ */
+const scaleModeOptions = [
+  { value: "auto", label: "自动缩放", icon: ScanEye },
+  { value: "page-fit", label: "适合页高", icon: ArrowUpDown },
+  { value: "page-width", label: "适合页宽", icon: MoveHorizontal },
+  { value: "page-actual", label: "实际大小", icon: Ratio },
+];
+
+/**
+ * 计算当前缩放模式的图标
+ */
+const currentScaleModeIcon = computed(() => {
+  const currentMode = scaleModeOptions.find(
+    (mode) => mode.value === scaleMode.value
+  );
+  return currentMode?.icon || ScanEye;
+});
+
+/**
+ * 计算页码输入框的宽度
+ * 根据总页数的位数动态调整宽度，确保输入框大小合适
+ * 左右padding各6px
+ */
+const pageInputWidth = computed(() => {
+  if (totalPages.value === 0) return "28px"; // 默认宽度（无总页数时）
+
+  // 计算总页数的位数
+  const digits = totalPages.value.toString().length;
+
+  // 根据位数返回合适的宽度
+  // 每个数字大约需要 8px（字体13px，数字宽度约7-8px）
+  // 加上左右padding共12px（每边6px）
+  const width = digits * 8 + 12;
+
+  // 只设置最大宽度，不限制最小宽度，让计算公式自然生效
+  return `${Math.min(76, width)}px`;
+});
+
+/**
+ * 加载 PDF 文档
+ */
+const loadPDF = async () => {
+  try {
+    if (!props.pdfUrl) {
+      return;
+    }
+
+    // 重置已渲染页面集合（新PDF加载时清空）
+    renderedPages.value.clear();
+
+    // 清除防抖定时器
+    if (renderDebounceTimer) {
+      clearTimeout(renderDebounceTimer);
+      renderDebounceTimer = null;
+    }
+
+    // 配置 PDF.js 加载选项
+    const loadingTask = pdfjsLib.getDocument({
+      url: props.pdfUrl,
+      // 对于 blob URL，禁用范围请求
+      disableRange: props.pdfUrl.startsWith("blob:"),
+      // 对于 blob URL，禁用流式加载
+      disableStream: props.pdfUrl.startsWith("blob:"),
+      // 不验证 CORS
+      withCredentials: false,
+    });
+
+    const pdf = await loadingTask.promise;
+
+    // 使用 markRaw 避免 Vue 的响应式代理，防止访问 PDF.js 私有字段时出错
+    pdfDoc.value = markRaw(pdf);
+    totalPages.value = pdf.numPages;
+
+    // 等待 DOM 更新
+    await nextTick();
+
+    // 先渲染第一页，快速计算缩放，再渲染其余页面
+    // 这样可以避免先显示实际大小再切换到 auto 模式的问题
+    if (scaleMode.value === "auto" && totalPages.value > 0) {
+      // 1. 先渲染第一页（快速）
+      await renderPage(1);
+
+      // 2. 等待 DOM 更新，确保 canvas 元素已渲染
+      await nextTick();
+
+      // 3. 等待容器布局稳定后再计算缩放比例
+      // 注意：.pdf-content 有 transition: width 0.3s，需要等待过渡完成
+      // 使用双重 requestAnimationFrame 确保 DOM 已更新，然后等待 transition 完成
+      await new Promise<void>((resolve) => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(async () => {
+            await nextTick();
+            // 等待 transition 完成（0.3s）加上一些缓冲时间（50ms）
+            setTimeout(() => {
+              if (containerRef.value && canvasRefs.get(1)) {
+                handleScaleModeChange("auto");
+              }
+              resolve();
+            }, 350);
+          });
+        });
+      });
+
+      // 4. 再次等待 DOM 更新，确保所有 canvas 引用都已准备好
+      await nextTick();
+
+      // 5. 渲染剩余页面（此时 scale 已经是正确的值）
+      await renderRemainingPages();
+    } else {
+      // 非 auto 模式，直接渲染所有页面
+      await renderAllPages();
+    }
+
+    // 渲染完成后，计算包装器的实际高度
+    await nextTick();
+
+    // 等待第一页的 canvas 真正渲染完成
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          // 确保第一页的 canvas 已经渲染
+          if (canvasRefs.get(1)) {
+            resolve();
+          } else {
+            // 如果还没有，再等待一下
+            setTimeout(resolve, 100);
+          }
+        });
+      });
+    });
+
+    // 发出 PDF 加载完成事件
+    emit("pdf-loaded");
+  } catch (error) {
+    Message.error("加载 PDF 文件失败，请查看控制台了解详情");
+  }
+};
+
+/**
+ * 渲染所有页面（已废弃，保留用于兼容）
+ * 建议使用 renderRemainingPages() 替代
+ */
+const renderAllPages = async () => {
+  if (!pdfDoc.value) {
+    return;
+  }
+
+  // 并行渲染所有页面以提高性能
+  const renderPromises: Promise<void>[] = [];
+  for (let pageNum = 1; pageNum <= totalPages.value; pageNum++) {
+    renderPromises.push(renderPage(pageNum));
+  }
+
+  await Promise.all(renderPromises);
+
+  // 渲染完成后，计算包装器的实际高度
+  await nextTick();
+};
+
+/**
+ * 渲染剩余页面（从第2页开始）
+ * 用于先渲染第一页计算缩放后，再渲染其他页面的场景
+ */
+const renderRemainingPages = async () => {
+  if (!pdfDoc.value || totalPages.value <= 1) {
+    return;
+  }
+
+  // 确保所有 canvas 引用都已准备好（等待 Vue 的 ref 系统完成）
+  await nextTick();
+
+  // 并行渲染剩余页面以提高性能（从第2页开始）
+  const renderPromises: Promise<void>[] = [];
+  for (let pageNum = 2; pageNum <= totalPages.value; pageNum++) {
+    renderPromises.push(renderPage(pageNum));
+  }
+
+  await Promise.all(renderPromises);
+};
+
+/**
+ * 渲染指定页面
+ * @param pageNum 页码
+ */
+const renderPage = async (pageNum: number) => {
+  if (!pdfDoc.value) {
+    return;
+  }
+
+  const canvas = canvasRefs.get(pageNum);
+  if (!canvas) {
+    console.warn(
+      `⚠️ 第 ${pageNum} 页的 canvas 引用不存在，跳过渲染。这可能是由于 Vue ref 系统尚未完成初始化。`
+    );
+    return;
+  }
+
+  try {
+    // 获取页面 - 使用更安全的方式
+    let page;
+    try {
+      page = await pdfDoc.value.getPage(pageNum);
+    } catch (pageError) {
+      throw pageError;
+    }
+
+    let viewport;
+    try {
+      //使用设备像素比来提高渲染质量
+      // 在高分辨率屏幕(如 Retina)上，devicePixelRatio 通常为 2 或 3
+      // 这样可以确保 PDF 渲染足够清晰，不会模糊
+      const pixelRatio = window.devicePixelRatio || 1;
+
+      // 使用设备像素比作为渲染比例
+      // 例如：Retina 屏幕会使用 scale: 2.0 来渲染
+      viewport = page.getViewport({ scale: pixelRatio });
+    } catch (viewportError) {
+      throw viewportError;
+    }
+
+    // 设置画布尺寸
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return;
+    }
+
+    // 设置画布的实际像素尺寸（使用高分辨率）
+    canvas.width = viewport.width;
+    canvas.height = viewport.height;
+
+    // 通过 CSS 将画布缩放回逻辑尺寸
+    // 这样既保证了高分辨率渲染，又保持了正确的显示大小
+    const pixelRatio = window.devicePixelRatio || 1;
+    canvas.style.width = `${viewport.width / pixelRatio}px`;
+    canvas.style.height = `${viewport.height / pixelRatio}px`;
+
+    // 渲染页面到画布
+    const renderContext = {
+      canvasContext: context,
+      viewport: viewport,
+    };
+
+    const renderTask = page.render(renderContext);
+    await renderTask.promise;
+
+    // 渲染文本图层（扫描件可能没有文本，所以失败不影响显示）
+    const textLayer = textLayerRefs.get(pageNum);
+    if (textLayer) {
+      try {
+        await renderTextLayer(page, viewport, pageNum);
+      } catch (textError) {
+        console.warn(`⚠️ 第 ${pageNum} 页文本图层渲染失败:`, textError);
+      }
+    } else {
+      console.warn(`⚠️ 第 ${pageNum} 页 textLayer 不存在`);
+    }
+  } catch (error) {
+    Message.error(`渲染第 ${pageNum} 页失败，请查看控制台了解详情`);
+  }
+};
+
+/**
+ * 渲染文本图层（使用后端返回的blockBbox数据）
+ * @param _page PDF 页面对象（暂时不使用）
+ * @param viewport 视口对象
+ * @param pageNum 页码
+ */
+const renderTextLayer = async (_page: any, viewport: any, pageNum: number) => {
+  const textLayer = textLayerRefs.get(pageNum);
+  const canvas = canvasRefs.get(pageNum);
+
+  if (!textLayer) {
+    return;
+  }
+
+  if (!canvas) {
+    return;
+  }
+
+  // 如果没有提供分块数据，跳过渲染（不标记为已渲染）
+  if (!props.blocksData || props.blocksData.length === 0) {
+    return;
+  }
+
+  // 只渲染属于当前页面的块
+  const currentPageBlocks = props.blocksData.filter(
+    (block) => block.blockPage === pageNum
+  );
+
+  // 如果当前页面没有数据，跳过渲染（不标记为已渲染）
+  if (currentPageBlocks.length === 0) {
+    return;
+  }
+
+  // 如果页面已渲染且用户正在交互，跳过渲染（避免打断用户）
+  // 但如果页面已渲染但没有数据（之前渲染时没有数据），应该重新渲染
+  if (renderedPages.value.has(pageNum) && showCopyButton.value) {
+    return;
+  }
+
+  // 如果页面已渲染，但当前有数据，需要检查是否真的渲染过
+  // 如果textLayer是空的，说明之前没有真正渲染过，应该重新渲染
+  if (renderedPages.value.has(pageNum) && textLayer.children.length === 0) {
+    // 从已渲染集合中移除，允许重新渲染
+    renderedPages.value.delete(pageNum);
+  }
+
+  try {
+    // 设置文本图层的尺寸与 Canvas 的 CSS 尺寸一致（逻辑尺寸，非物理像素）
+    // 因为 canvas 通过 CSS 缩放回了逻辑尺寸，文本图层也应该使用逻辑尺寸
+    const pixelRatio = window.devicePixelRatio || 1;
+    textLayer.style.width = `${canvas.width / pixelRatio}px`;
+    textLayer.style.height = `${canvas.height / pixelRatio}px`;
+
+    // 清空文本图层（如果用户不在交互，或者这是首次渲染）
+    textLayer.innerHTML = "";
+
+    // 如果清空前有激活的文本块，且该文本块属于当前页面，则清除引用
+    if (activeBlockDiv.value) {
+      const activePageElement = activeBlockDiv.value.closest(
+        ".pdf-page-container"
+      );
+      const currentPageElement = textLayer.closest(".pdf-page-container");
+      if (activePageElement === currentPageElement) {
+        activeBlockDiv.value = null;
+        showCopyButton.value = false;
+      }
+    }
+
+    // 使用后端返回的blockBbox数据创建可交互的块
+    currentPageBlocks.forEach((block, index) => {
+      const { blockLabel, blockContent, blockBbox } = block;
+
+      // blockBbox 格式: [x1, y1, x2, y2]
+      // blockBbox 坐标通常是基于 PDF 原始尺寸的
+      // 由于我们使用了 pixelRatio 来渲染，坐标也需要相应缩放
+      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.page = String(pageNum);
+      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 (isTocHighlighted.value) {
+            isTocHighlighted.value = false;
+          }
+          activeBlockDiv.value.style.backgroundColor = "transparent";
+          activeBlockDiv.value.style.boxShadow = "none";
+        }
+
+        // 清除印章高亮（鼠标悬停到文本块时）
+        if (highlightedSealDiv.value && !isSealHighlighted.value) {
+          highlightedSealDiv.value.style.backgroundColor = "transparent";
+          highlightedSealDiv.value.style.boxShadow = "none";
+          highlightedSealDiv.value = null;
+        }
+
+        // 设置当前文本块为激活状态
+        activeBlockDiv.value = blockDiv;
+        isTocHighlighted.value = false; // 鼠标悬停时清除目录高亮标志
+        isSealHighlighted.value = false; // 鼠标悬停时清除印章高亮标志
+
+        // 直接设置 hover 样式（解决 Vue scoped 样式问题）
+        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);
+    });
+
+    // 标记该页面已渲染
+    renderedPages.value.add(pageNum);
+  } 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; // 每个按钮约80px宽度（包含padding和间距）
+  const popupWidth = buttonCount * buttonWidth + 8; // 总宽度 = 按钮宽度 * 数量 + padding
+  const popupHeight = 38; // 高度 = 按钮高度30px + padding 8px
+  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;
+
+  // 参考 ContextMenu 的边界处理逻辑：
+  // 如果下方空间不足，显示在上方；水平方向居中显示
+  // 使用视口坐标计算可用空间
+  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;
+  }
+
+  // 确保不超出容器边界（参考 ContextMenu 的处理方式）
+  // 如果超出右边界，向左调整
+  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;
+};
+
+// 隐藏定时器
+let hideTimer: any = null;
+
+/**
+ * 隐藏复制按钮并移除文本块高亮
+ * 延迟执行，给用户时间将鼠标移到复制按钮上
+ */
+const hideCopyButtonAndHighlight = () => {
+  hideTimer = setTimeout(() => {
+    // 隐藏复制按钮
+    showCopyButton.value = false;
+
+    // 移除文本块高亮（但保留目录点击的高亮）
+    if (activeBlockDiv.value && !isTocHighlighted.value) {
+      activeBlockDiv.value.style.backgroundColor = "transparent";
+      activeBlockDiv.value.style.boxShadow = "none";
+      activeBlockDiv.value = null;
+    }
+
+    // 移除印章高亮（但保留印章点击的高亮）
+    if (highlightedSealDiv.value && !isSealHighlighted.value) {
+      highlightedSealDiv.value.style.backgroundColor = "transparent";
+      highlightedSealDiv.value.style.boxShadow = "none";
+      highlightedSealDiv.value = null;
+    }
+  }, 300);
+};
+
+/**
+ * 取消隐藏（鼠标进入复制按钮时调用）
+ * 保持复制按钮显示和文本块高亮状态
+ */
+const cancelHideCopyButton = () => {
+  if (hideTimer) {
+    clearTimeout(hideTimer);
+    hideTimer = null;
+  }
+};
+
+/**
+ * 将HTML表格转换为纯文本格式
+ * @param htmlString HTML字符串
+ * @returns 转换后的纯文本表格
+ */
+const convertHtmlTableToText = (htmlString: string): string => {
+  // 检查是否包含HTML标签
+  if (!/<[^>]+>/g.test(htmlString)) {
+    return htmlString; // 不是HTML，直接返回
+  }
+
+  try {
+    // 创建一个临时DOM元素来解析HTML
+    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);
+    // 转换失败时，返回去除HTML标签的纯文本
+    return htmlString.replace(/<[^>]+>/g, "");
+  }
+};
+
+/**
+ * 复制选中的文本
+ * 支持两种复制方式：
+ * 1. 现代 Clipboard API（需要 HTTPS 或 localhost）
+ * 2. 传统 execCommand 方法（兼容 HTTP 环境）
+ */
+const copySelectedText = async () => {
+  try {
+    // 将HTML表格转换为纯文本格式
+    const textToCopy = convertHtmlTableToText(selectedText.value);
+
+    // 检查是否支持现代 Clipboard API
+    if (
+      navigator.clipboard &&
+      typeof navigator.clipboard.writeText === "function"
+    ) {
+      // ✅ 方法 1：使用现代 Clipboard API（安全上下文：HTTPS 或 localhost）
+      try {
+        await navigator.clipboard.writeText(textToCopy);
+      } catch (clipboardError) {
+        // 如果 Clipboard API 失败，降级到传统方法
+        console.warn("Clipboard API 失败，使用降级方案:", clipboardError);
+        fallbackCopyText(textToCopy);
+      }
+    } else {
+      // ✅ 方法 2：使用传统的 execCommand 方法（兼容所有环境）
+      fallbackCopyText(textToCopy);
+    }
+
+    // 隐藏复制按钮
+    showCopyButton.value = false;
+
+    // 移除文本块高亮（但保留目录点击的高亮）
+    if (activeBlockDiv.value && !isTocHighlighted.value) {
+      activeBlockDiv.value.style.backgroundColor = "transparent";
+      activeBlockDiv.value.style.boxShadow = "none";
+      activeBlockDiv.value = null;
+    }
+
+    // 移除印章高亮（但保留印章点击的高亮）
+    if (highlightedSealDiv.value && !isSealHighlighted.value) {
+      highlightedSealDiv.value.style.backgroundColor = "transparent";
+      highlightedSealDiv.value.style.boxShadow = "none";
+      highlightedSealDiv.value = null;
+    }
+
+    // 清除选中状态
+    window.getSelection()?.removeAllRanges();
+  } catch (error) {
+    console.error("复制失败:", error);
+    Message.error("复制失败，请手动选择并复制文本");
+  }
+};
+
+/**
+ * 降级复制方案：使用传统的 execCommand 方法
+ * 适用于不支持 Clipboard API 的环境（如 HTTP、旧浏览器等）
+ * @param text 要复制的文本内容
+ */
+const fallbackCopyText = (text: string) => {
+  // 创建一个临时的 textarea 元素
+  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"; // 不响应鼠标事件
+
+  // 添加到文档中（必须在 DOM 中才能选中）
+  document.body.appendChild(textarea);
+
+  try {
+    // 聚焦并选中文本
+    textarea.focus();
+    textarea.select();
+
+    // 兼容 iOS 设备
+    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 zoomIn = () => {
+  if (scale.value < 3) {
+    scale.value = Math.min(scale.value + 0.25, 3);
+    // 不再自动切换到自定义模式，保持当前的缩放模式不变
+  }
+};
+
+/**
+ * 缩小
+ */
+const zoomOut = () => {
+  if (scale.value > 0.5) {
+    scale.value = Math.max(scale.value - 0.25, 0.5);
+    // 不再自动切换到自定义模式，保持当前的缩放模式不变
+  }
+};
+
+/**
+ * 重置预览状态
+ * 重置缩放、页码、滚动位置等
+ */
+const reset = () => {
+  // 重置缩放比例
+  scale.value = 1;
+
+  // 重置缩放模式为自动
+  scaleMode.value = "auto";
+
+  // 重置到第一页
+  currentPage.value = 1;
+  inputPage.value = "1";
+
+  // 重置滚动位置到顶部
+  if (containerRef.value) {
+    containerRef.value.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  }
+
+  // 重置文本选择状态
+  showCopyButton.value = false;
+  selectedText.value = "";
+  activeBlockDiv.value = null;
+
+  // 等待滚动完成后，重新应用自动缩放模式
+  nextTick(() => {
+    if (scaleMode.value === "auto") {
+      handleScaleModeChange("auto");
+    }
+  });
+};
+
+/**
+ * 处理缩放模式变化
+ * @param mode 缩放模式
+ */
+const handleScaleModeChange = (mode: string) => {
+  // 首先更新缩放模式状态，确保UI（图标和高亮）能正确更新
+  scaleMode.value = mode;
+
+  // 使用第一页的画布作为参考
+  const firstCanvas = canvasRefs.get(1);
+  if (!containerRef.value || !firstCanvas) return;
+
+  // 获取实际的 .pdf-viewer 元素宽度，而不是 .pdf-content 的宽度
+  // 因为 .pdf-viewer 有 padding: 0 5px，需要获取其实际内容宽度
+  const pdfViewerElement = containerRef.value.querySelector(
+    ".pdf-viewer"
+  ) as HTMLElement;
+
+  // 获取容器尺寸
+  let containerWidth: number;
+  let containerHeight = containerRef.value.clientHeight;
+
+  if (pdfViewerElement) {
+    // 使用 .pdf-viewer 的内容宽度（clientWidth 已经减去了 padding）
+    containerWidth = pdfViewerElement.clientWidth;
+  } else {
+    // 降级方案：使用 containerRef 的宽度，但减去 .pdf-viewer 的 padding（10px）
+    containerWidth = containerRef.value.clientWidth - 10;
+  }
+
+  // 如果容器尺寸无效（为0或过小），说明布局还没稳定
+  // 使用 requestAnimationFrame 等待布局稳定后再计算
+  // 同时检查尺寸是否合理（宽度应该至少大于100px）
+  if (containerWidth === 0 || containerHeight === 0 || containerWidth < 100) {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        // 重新获取容器尺寸
+        if (containerRef.value && canvasRefs.get(1)) {
+          const pdfViewer = containerRef.value.querySelector(
+            ".pdf-viewer"
+          ) as HTMLElement;
+          const validWidth = pdfViewer
+            ? pdfViewer.clientWidth
+            : containerRef.value.clientWidth - 10;
+          const validHeight = containerRef.value.clientHeight;
+          if (validWidth > 100 && validHeight > 0) {
+            // 使用有效的尺寸重新计算
+            calculateScaleWithDimensions(mode, validWidth, validHeight);
+          } else {
+            // 如果还是无效，再延迟一次（给布局更多时间）
+            setTimeout(() => {
+              if (containerRef.value && canvasRefs.get(1)) {
+                const pdfViewer2 = containerRef.value.querySelector(
+                  ".pdf-viewer"
+                ) as HTMLElement;
+                const finalWidth = pdfViewer2
+                  ? pdfViewer2.clientWidth
+                  : containerRef.value.clientWidth - 10;
+                const finalHeight = containerRef.value.clientHeight;
+                if (finalWidth > 100 && finalHeight > 0) {
+                  calculateScaleWithDimensions(mode, finalWidth, finalHeight);
+                }
+              }
+            }, 100);
+          }
+        }
+      });
+    });
+    return;
+  }
+
+  // 容器尺寸有效，直接计算
+  calculateScaleWithDimensions(mode, containerWidth, containerHeight);
+};
+
+/**
+ * 使用给定的容器尺寸计算缩放比例
+ * @param mode 缩放模式
+ * @param containerWidth 容器宽度
+ * @param containerHeight 容器高度
+ */
+const calculateScaleWithDimensions = (
+  mode: string,
+  containerWidth: number,
+  containerHeight: number
+) => {
+  const firstCanvas = canvasRefs.get(1);
+  if (!firstCanvas) return;
+
+  // 使用逻辑尺寸而不是物理像素尺寸
+  // canvas.width 是物理像素（例如 Retina 上是 1200px）
+  // 需要除以 pixelRatio 得到逻辑尺寸（例如 600px）
+  const pixelRatio = window.devicePixelRatio || 1;
+  const canvasWidth = firstCanvas.width / pixelRatio;
+  const canvasHeight = firstCanvas.height / pixelRatio;
+
+  // 预留较小的边距，让PDF占用更多宽度
+  // 注意：containerWidth 已经是 .pdf-viewer 的 clientWidth（已减去 padding）
+  const horizontalMargin = 40; // 左右总共预留 40px 边距
+
+  // 计算可用宽度：直接使用容器宽度减去额外边距
+  const availableWidth = containerWidth - horizontalMargin;
+
+  switch (mode) {
+    case "auto":
+      // 适合页宽: 适应宽度
+      scale.value = availableWidth / canvasWidth;
+      break;
+    case "page-actual":
+      // 实际大小: 100%
+      scale.value = 1;
+      break;
+    case "page-fit":
+      // 适合页高模式 - 让单页完整占满容器高度
+      // .pdf-viewer 没有上下 padding，直接使用容器完整高度
+      // 只有左右 padding: 0 5px 和页面间距 gap: 10px
+      scale.value = containerHeight / canvasHeight;
+
+      nextTick(() => {
+        if (containerRef.value) {
+          containerRef.value.scrollTop = 0;
+        }
+      });
+      break;
+    case "page-width":
+      // 适合页宽: 适应宽度
+      scale.value = availableWidth / canvasWidth;
+      break;
+  }
+};
+
+/**
+ * 切换全屏
+ */
+const toggleFullscreen = () => {
+  if (!containerRef.value) return;
+
+  if (!isFullscreen.value) {
+    // 进入全屏
+    if (containerRef.value.requestFullscreen) {
+      containerRef.value.requestFullscreen();
+    }
+  } else {
+    // 退出全屏
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+};
+
+/**
+ * 监听全屏状态变化
+ */
+const handleFullscreenChange = () => {
+  isFullscreen.value = !!document.fullscreenElement;
+};
+
+/**
+ * 处理滚动事件（隐藏复制按钮和文本块高亮，并更新当前页码）
+ */
+const handleScroll = () => {
+  if (hideTimer) {
+    clearTimeout(hideTimer);
+  }
+
+  // 隐藏复制按钮
+  showCopyButton.value = false;
+
+  // 移除文本块高亮（但保留目录点击的高亮，因为滚动不应该清除目录高亮）
+  if (activeBlockDiv.value && !isTocHighlighted.value) {
+    activeBlockDiv.value.style.backgroundColor = "transparent";
+    activeBlockDiv.value.style.boxShadow = "none";
+    activeBlockDiv.value = null;
+  }
+
+  // 移除印章高亮（但保留印章点击的高亮，因为滚动不应该清除印章高亮）
+  if (highlightedSealDiv.value && !isSealHighlighted.value) {
+    highlightedSealDiv.value.style.backgroundColor = "transparent";
+    highlightedSealDiv.value.style.boxShadow = "none";
+    highlightedSealDiv.value = null;
+  }
+
+  // 更新当前页码（根据滚动位置）
+  updateCurrentPageFromScroll();
+};
+
+/**
+ * 根据滚动位置更新当前页码
+ * 这个函数会找到在视口中最显眼的页面，并将其设置为当前页
+ */
+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(
+      `.pdf-page-container[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;
+      }
+    }
+  }
+
+  currentPage.value = closestPage;
+};
+
+/**
+ * 跳转到指定页面
+ * @param pageNum 页码（从1开始）
+ * @param emitEvent 是否触发跳转事件，默认为 true
+ */
+const goToPage = (pageNum: number, emitEvent: boolean = true) => {
+  if (!containerRef.value || pageNum < 1 || pageNum > totalPages.value) return;
+
+  const pageElement = containerRef.value.querySelector(
+    `.pdf-page-container[data-page-number="${pageNum}"]`
+  ) as HTMLElement;
+
+  if (pageElement) {
+    // 平滑滚动到目标页面
+    pageElement.scrollIntoView({ behavior: "smooth", block: "start" });
+    currentPage.value = pageNum;
+    
+    // 触发跳转事件
+    if (emitEvent) {
+      emit("page-jump", pageNum);
+    }
+  }
+};
+
+/**
+ * 处理页码输入变化（实时验证，只允许输入数字）
+ */
+const handlePageInputChange = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  // 只保留数字
+  const value = input.value.replace(/[^\d]/g, "");
+  inputPage.value = value;
+};
+
+/**
+ * 处理页码输入失焦（应用页码跳转）
+ */
+const handlePageInputBlur = () => {
+  validateAndJumpToPage();
+};
+
+/**
+ * 处理回车键（应用页码跳转）
+ */
+const handlePageInputEnter = (event: KeyboardEvent) => {
+  (event.target as HTMLInputElement).blur(); // 触发失焦，统一处理
+};
+
+/**
+ * 验证并跳转到指定页面
+ */
+const validateAndJumpToPage = () => {
+  const pageNum = parseInt(inputPage.value, 10);
+
+  // 如果输入为空或无效，恢复当前页码
+  if (!inputPage.value || isNaN(pageNum)) {
+    inputPage.value = String(currentPage.value);
+    return;
+  }
+
+  // 限制在最小值和最大值之间
+  let validPageNum = pageNum;
+  if (pageNum < 1) {
+    validPageNum = 1;
+  } else if (pageNum > totalPages.value) {
+    validPageNum = totalPages.value;
+  }
+
+  // 更新输入框显示
+  inputPage.value = String(validPageNum);
+
+  // 如果页码有变化，跳转到新页面
+  if (validPageNum !== currentPage.value) {
+    goToPage(validPageNum);
+  }
+};
+
+/**
+ * 监听 pdfUrl 变化，重新加载 PDF
+ */
+watch(
+  () => props.pdfUrl,
+  async (newUrl) => {
+    if (newUrl) {
+      // 等待下一个tick确保DOM已更新
+      await nextTick();
+      await loadPDF();
+    }
+  },
+  { immediate: false }
+); // 不立即执行，等待onMounted
+
+/**
+ * 从 blocksData 中提取目录和印章信息
+ */
+const extractTocAndSeals = () => {
+  if (!props.blocksData || props.blocksData.length === 0) {
+    tocList.value = [];
+    sealList.value = [];
+    return;
+  }
+
+  // 提取目录信息
+  const tocItems: TocItem[] = [];
+  props.blocksData.forEach((block, index) => {
+    if (
+      block.blockLabel === "doc_title" ||
+      block.blockLabel === "paragraph_title"
+    ) {
+      tocItems.push({
+        id: `toc-${index}`,
+        type: block.blockLabel as "doc_title" | "paragraph_title",
+        content: block.blockContent,
+        page: block.blockPage,
+        blockBbox: block.blockBbox,
+      });
+    }
+  });
+
+  // 提取印章信息
+  const seals: SealItem[] = [];
+  const sealMap = new Map<string, number>(); // 用于统计每页的印章索引
+  props.blocksData.forEach((block, index) => {
+    if (block.blockLabel === "seal") {
+      const key = `${block.blockPage}`;
+      const currentCount = sealMap.get(key) || 0;
+      const sealIndex = currentCount + 1; // 印章索引从1开始
+      sealMap.set(key, sealIndex);
+
+      seals.push({
+        id: `seal-${index}`,
+        name: `印章${block.blockPage}-${sealIndex}`,
+        page: block.blockPage,
+        index: sealIndex,
+        blockBbox: block.blockBbox,
+      });
+    }
+  });
+
+  tocList.value = tocItems;
+  sealList.value = seals;
+};
+
+/**
+ * 检查元素是否在视口内可见
+ * @param element 要检查的元素
+ * @param container 滚动容器
+ * @returns 是否在视口内可见
+ */
+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 块的边界框
+ * @param pageNum 页码
+ * @param shouldScroll 是否应该滚动到元素位置
+ * @returns 匹配到的元素类型：'block' | 'seal' | null（未找到）
+ */
+const highlightPosition = (
+  bbox: [number, number, number, number],
+  pageNum: number,
+  shouldScroll: boolean = true
+): "block" | "seal" | null => {
+  // 清除之前的高亮
+  if (activeBlockDiv.value) {
+    activeBlockDiv.value.style.backgroundColor = "transparent";
+    activeBlockDiv.value.style.boxShadow = "none";
+    activeBlockDiv.value = null;
+  }
+  isTocHighlighted.value = false;
+
+  if (highlightedSealDiv.value) {
+    highlightedSealDiv.value.style.backgroundColor = "transparent";
+    highlightedSealDiv.value.style.boxShadow = "none";
+    highlightedSealDiv.value = null;
+  }
+  isSealHighlighted.value = false;
+
+  const textLayer = textLayerRefs.get(pageNum);
+  if (!textLayer) return null;
+
+  // 查找对应的块元素，使用存储的bbox数据匹配（使用容差）
+  const blockDivs = textLayer.querySelectorAll(".text-block");
+  const tolerance = 2; // 容差，允许2px的误差
+
+  let matchedElement: HTMLElement | null = null;
+  let matchedType: "block" | "seal" | 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
+      ];
+
+      // 使用容差匹配bbox坐标（允许小的误差）
+      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;
+        // 根据元素的 label 自动判断类型
+        const label = el.dataset.label;
+        matchedType = label === "seal" ? "seal" : "block";
+      }
+    } catch (error) {
+      console.warn("解析bbox失败:", error);
+    }
+  });
+
+  if (!matchedElement || !matchedType) return null;
+
+  // 保存引用，避免在 setTimeout 中访问可能为 null 的值
+  const elementRef = matchedElement;
+  const typeRef = matchedType;
+
+  // 根据类型设置不同的状态变量
+  if (typeRef === "seal") {
+    highlightedSealDiv.value = elementRef;
+    isSealHighlighted.value = true;
+  } else {
+    activeBlockDiv.value = elementRef;
+    isTocHighlighted.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 (typeRef === "seal" && highlightedSealDiv.value === elementRef) {
+      elementRef.style.backgroundColor = "transparent";
+      elementRef.style.boxShadow = "none";
+      highlightedSealDiv.value = null;
+      isSealHighlighted.value = false;
+    } else if (typeRef === "block" && activeBlockDiv.value === elementRef) {
+      elementRef.style.backgroundColor = "transparent";
+      elementRef.style.boxShadow = "none";
+      activeBlockDiv.value = null;
+      isTocHighlighted.value = false;
+    }
+  }, 5000);
+
+  return typeRef;
+};
+
+/**
+ * 跳转到指定位置并高亮（统一的外部调用接口）
+ * 通过坐标自动匹配文本块或印章，无需指定类型
+ * @param pageNum 页码（从1开始）
+ * @param bbox 位置的边界框 [x1, y1, x2, y2]
+ * @param emitEvent 是否触发跳转事件，默认为 true
+ */
+const jumpToPosition = (
+  pageNum: number,
+  bbox: [number, number, number, number],
+  emitEvent: boolean = true
+) => {
+  if (pageNum < 1 || pageNum > totalPages.value) {
+    console.warn(`页码 ${pageNum} 超出范围 [1, ${totalPages.value}]`);
+    return;
+  }
+
+  // 先跳转到对应页面
+  goToPage(pageNum, false); // 内部跳转不触发事件，统一在最后触发
+
+  // 等待页面跳转完成后再高亮
+  nextTick(() => {
+    let retryCount = 0;
+    const maxRetries = 5;
+    const retryDelay = 200;
+
+    const tryHighlight = () => {
+      const matchedType = highlightPosition(bbox, pageNum, true);
+      if (matchedType) {
+        // 高亮成功，触发事件
+        if (emitEvent) {
+          emit("position-jump", pageNum, bbox, matchedType);
+        }
+      } else if (retryCount < maxRetries) {
+        retryCount++;
+        setTimeout(tryHighlight, retryDelay);
+      } else {
+        console.warn(`无法找到并高亮指定位置: 页码 ${pageNum}, bbox: [${bbox.join(", ")}]`);
+      }
+    };
+
+    setTimeout(tryHighlight, 300);
+  });
+};
+
+/**
+ * 处理目录项点击，跳转并高亮（内部使用）
+ */
+const jumpToBlock = (item: TocItem) => {
+  // 先尝试找到元素，检查是否已经在当前页面且可见
+  const textLayer = textLayerRefs.get(item.page);
+  if (textLayer && containerRef.value) {
+    const blockDivs = textLayer.querySelectorAll(".text-block");
+    const tolerance = 2;
+
+    // 尝试找到对应的块元素
+    let foundElement: HTMLElement | null = null;
+    Array.from(blockDivs).forEach((div) => {
+      if (foundElement) return; // 已经找到了，跳过
+
+      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] - item.blockBbox[0]) < tolerance &&
+          Math.abs(parsedBbox[1] - item.blockBbox[1]) < tolerance &&
+          Math.abs(parsedBbox[2] - item.blockBbox[2]) < tolerance &&
+          Math.abs(parsedBbox[3] - item.blockBbox[3]) < tolerance;
+
+        if (isMatch) {
+          foundElement = el;
+        }
+      } catch (error) {
+        // 忽略解析错误
+      }
+    });
+
+    // 如果找到了元素
+    if (foundElement) {
+      // 检查元素是否已经在视口内可见
+      const isVisible = isElementVisible(foundElement, containerRef.value);
+
+      // 如果元素已经在当前页面且可见，只高亮不滚动
+      if (item.page === currentPage.value && isVisible) {
+        highlightBlock(item.blockBbox, item.page, false); // 传入 false 表示不滚动
+        return; // 直接返回，不执行后续跳转
+      }
+      // 如果找到了但不在当前页面或不可见，继续执行后续跳转逻辑
+    }
+  }
+
+  // 如果元素不在当前页面或不可见，需要跳转
+  // 先跳转到对应页面
+  goToPage(item.page);
+
+  // 等待页面跳转完成后再高亮，增加延迟并添加重试机制
+  nextTick(() => {
+    let retryCount = 0;
+    const maxRetries = 5;
+    const retryDelay = 200;
+
+    const tryHighlight = () => {
+      const success = highlightBlock(item.blockBbox, item.page, true); // 传入 true 表示需要滚动
+      if (success) {
+        // 高亮成功，触发事件（自动检测类型）
+        const actualType = highlightPosition(item.blockBbox, item.page, false) || "block";
+        emit("position-jump", item.page, item.blockBbox, actualType);
+      } else if (retryCount < maxRetries) {
+        retryCount++;
+        setTimeout(tryHighlight, retryDelay);
+      }
+    };
+
+    setTimeout(tryHighlight, 300);
+  });
+};
+
+
+/**
+ * 处理印章点击，跳转并高亮（内部使用）
+ */
+const jumpToSeal = (seal: SealItem) => {
+  // 先尝试找到元素，检查是否已经在当前页面且可见
+  const textLayer = textLayerRefs.get(seal.page);
+  if (textLayer && containerRef.value) {
+    const blockDivs = textLayer.querySelectorAll(".text-block");
+    const tolerance = 2;
+
+    // 尝试找到对应的块元素
+    let foundElement: HTMLElement | null = null;
+    Array.from(blockDivs).forEach((div) => {
+      if (foundElement) return; // 已经找到了，跳过
+
+      const el = div as HTMLElement;
+      const label = el.dataset.label;
+
+      // 只处理seal类型的块
+      if (label !== "seal") return;
+
+      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] - seal.blockBbox[0]) < tolerance &&
+          Math.abs(parsedBbox[1] - seal.blockBbox[1]) < tolerance &&
+          Math.abs(parsedBbox[2] - seal.blockBbox[2]) < tolerance &&
+          Math.abs(parsedBbox[3] - seal.blockBbox[3]) < tolerance;
+
+        if (isMatch) {
+          foundElement = el;
+        }
+      } catch (error) {
+        // 忽略解析错误
+      }
+    });
+
+    // 如果找到了元素
+    if (foundElement) {
+      // 检查元素是否已经在视口内可见
+      const isVisible = isElementVisible(foundElement, containerRef.value);
+
+      // 如果元素已经在当前页面且可见，只高亮不滚动
+      if (seal.page === currentPage.value && isVisible) {
+        highlightSeal(seal.blockBbox, seal.page, false); // 传入 false 表示不滚动
+        return; // 直接返回，不执行后续跳转
+      }
+      // 如果找到了但不在当前页面或不可见，继续执行后续跳转逻辑
+    }
+  }
+
+  // 如果元素不在当前页面或不可见，需要跳转
+  // 先跳转到对应页面
+  goToPage(seal.page);
+
+  // 等待页面跳转完成后再高亮，增加延迟并添加重试机制
+  nextTick(() => {
+    let retryCount = 0;
+    const maxRetries = 5;
+    const retryDelay = 200;
+
+    const tryHighlight = () => {
+      const success = highlightSeal(seal.blockBbox, seal.page, true); // 传入 true 表示需要滚动
+      if (success) {
+        // 高亮成功，触发事件
+        emit("position-jump", seal.page, seal.blockBbox, "seal");
+      } else if (retryCount < maxRetries) {
+        retryCount++;
+        setTimeout(tryHighlight, retryDelay);
+      }
+    };
+
+    setTimeout(tryHighlight, 300);
+  });
+};
+
+/**
+ * 高亮指定的文本块（内部使用，保持向后兼容）
+ * @param bbox 块的边界框
+ * @param pageNum 页码
+ * @param shouldScroll 是否应该滚动到元素位置（如果元素不在视口内）
+ * @returns 是否成功找到并高亮了元素
+ */
+const highlightBlock = (
+  bbox: [number, number, number, number],
+  pageNum: number,
+  shouldScroll: boolean = true
+): boolean => {
+  return highlightPosition(bbox, pageNum, shouldScroll) === "block";
+};
+
+/**
+ * 高亮指定的印章（内部使用，保持向后兼容）
+ * @param bbox 印章的边界框
+ * @param pageNum 页码
+ * @param shouldScroll 是否应该滚动到元素位置（如果元素不在视口内）
+ * @returns 是否成功找到并高亮了元素
+ */
+const highlightSeal = (
+  bbox: [number, number, number, number],
+  pageNum: number,
+  shouldScroll: boolean = true
+): boolean => {
+  return highlightPosition(bbox, pageNum, shouldScroll) === "seal";
+};
+
+/**
+ * 监听 blocksData 变化，增量渲染文本图层（避免闪烁）
+ *
+ * 🔑 优化逻辑：
+ * 1. 使用防抖避免频繁触发（流式解析时每页都会触发）
+ * 2. 只渲染新增的页面，已渲染的页面不重新渲染（避免清空导致的高亮闪烁）
+ * 3. 如果用户正在交互（显示复制按钮），则不重新渲染已渲染的页面
+ */
+watch(
+  () => props.blocksData,
+  async (newBlocks) => {
+    // 提取目录和印章信息
+    extractTocAndSeals();
+    if (!newBlocks || newBlocks.length === 0 || !pdfDoc.value) {
+      return;
+    }
+
+    // 清除之前的防抖定时器
+    if (renderDebounceTimer) {
+      clearTimeout(renderDebounceTimer);
+      renderDebounceTimer = null;
+    }
+
+    // 防抖：延迟 100ms 执行，避免频繁触发
+    renderDebounceTimer = setTimeout(async () => {
+      await nextTick();
+
+      // 获取所有有数据的页面号
+      const pagesWithData = new Set<number>();
+      newBlocks.forEach((block) => {
+        if (block.blockPage && block.blockPage <= totalPages.value) {
+          pagesWithData.add(block.blockPage);
+        }
+      });
+
+      // 只渲染新增的页面（未渲染过的页面）
+      // 或者已标记为已渲染但实际没有渲染内容的页面（textLayer为空）
+      // 这样可以避免重新渲染已渲染的页面，防止高亮框闪烁
+      const pagesToRender: number[] = [];
+      pagesWithData.forEach((pageNum) => {
+        if (!renderedPages.value.has(pageNum)) {
+          // 未渲染过的页面，需要渲染
+          pagesToRender.push(pageNum);
+        } else {
+          // 已标记为已渲染，但需要检查是否真的渲染过
+          const textLayer = textLayerRefs.get(pageNum);
+          if (textLayer && textLayer.children.length === 0) {
+            // 如果textLayer为空，说明之前没有真正渲染过，需要重新渲染
+            // 从已渲染集合中移除，允许重新渲染
+            renderedPages.value.delete(pageNum);
+            pagesToRender.push(pageNum);
+          }
+        }
+      });
+
+      // 如果有新增的页面，才进行渲染
+      if (pagesToRender.length > 0) {
+        // 如果用户正在交互（显示复制按钮），暂不渲染新页面
+        // 这样可以避免在用户交互时打断体验
+        if (showCopyButton.value) {
+          // 延迟渲染，等待用户交互完成
+          setTimeout(async () => {
+            for (const pageNum of pagesToRender) {
+              const page = await pdfDoc.value.getPage(pageNum);
+              const viewport = page.getViewport({ scale: 1.0 });
+              await renderTextLayer(page, viewport, pageNum);
+            }
+          }, 500);
+        } else {
+          // 正常渲染新增页面
+          for (const pageNum of pagesToRender) {
+            const page = await pdfDoc.value.getPage(pageNum);
+            const viewport = page.getViewport({ scale: 1.0 });
+            await renderTextLayer(page, viewport, pageNum);
+          }
+        }
+      }
+    }, 100);
+  },
+  { immediate: false, deep: true }
+);
+
+/**
+ * 监听缩放模式变化
+ */
+watch(scaleMode, (newMode) => {
+  if (newMode !== "custom") {
+    handleScaleModeChange(newMode);
+  }
+});
+
+/**
+ * 监听侧边栏展开/收起，重新计算PDF缩放比例
+ * 当侧边栏展开或收起时，容器宽度会变化，需要重新计算缩放以保持正确的边距
+ */
+watch(showTocSidebar, () => {
+  // 等待DOM更新
+  nextTick(() => {
+    // 使用双重 requestAnimationFrame 确保布局已更新
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        // 等待CSS transition完成（侧边栏transition是0.3s）
+        // 使用略大于transition时间的延迟确保布局稳定
+        setTimeout(() => {
+          // 检查容器和canvas是否已准备好
+          if (!containerRef.value || !canvasRefs.get(1)) {
+            return;
+          }
+
+          // 如果当前是自动缩放模式或其他非自定义模式，重新计算缩放
+          if (scaleMode.value === "auto") {
+            handleScaleModeChange("auto");
+          } else if (scaleMode.value !== "custom") {
+            handleScaleModeChange(scaleMode.value);
+          }
+        }, 350); // 略大于transition时间（300ms）
+      });
+    });
+  });
+});
+
+/**
+ * 监听当前页码变化，同步更新输入框
+ */
+watch(currentPage, (newPage) => {
+  inputPage.value = String(newPage);
+});
+
+/**
+ * 监听 showTocSidebar 属性变化，确保内部状态同步
+ * 当属性为 false 时，强制关闭侧边栏
+ */
+watch(
+  () => props.showTocSidebar,
+  (newValue) => {
+    if (newValue === false) {
+      showTocSidebar.value = false;
+    }
+  },
+  { immediate: true }
+);
+
+/**
+ * 组件挂载时的初始化
+ */
+onMounted(async () => {
+  // 监听全屏状态变化
+  document.addEventListener("fullscreenchange", handleFullscreenChange);
+
+  // 监听窗口大小变化，自动调整缩放
+  window.addEventListener("resize", () => {
+    if (scaleMode.value === "auto") {
+      handleScaleModeChange("auto");
+    }
+  });
+
+  // 如果有 pdfUrl，立即加载
+  if (props.pdfUrl) {
+    await nextTick(); // 确保DOM已准备好
+    await loadPDF();
+  }
+
+  // 初始化目录和印章列表
+  extractTocAndSeals();
+});
+
+/**
+ * 清理函数（兼容性方法，调用 reset）
+ */
+const cleanup = () => {
+  reset();
+};
+
+/**
+ * 暴露方法给父组件
+ */
+defineExpose({
+  reset,
+  cleanup,
+  // 跳转相关方法
+  goToPage, // 跳转到指定页面
+  jumpToPosition, // 跳转到指定位置并高亮（统一接口，自动识别类型）
+  // 向后兼容的别名方法（内部调用统一接口）
+  jumpToBlockPosition: (pageNum: number, bbox: [number, number, number, number], emitEvent?: boolean) => 
+    jumpToPosition(pageNum, bbox, emitEvent),
+  jumpToSealPosition: (pageNum: number, bbox: [number, number, number, number], emitEvent?: boolean) => 
+    jumpToPosition(pageNum, bbox, emitEvent),
+  // 获取当前状态
+  getCurrentPage: () => currentPage.value, // 获取当前页码
+  getTotalPages: () => totalPages.value, // 获取总页数
+});
+
+/**
+ * 组件卸载前的清理
+ */
+onBeforeUnmount(() => {
+  document.removeEventListener("fullscreenchange", handleFullscreenChange);
+
+  // 清理防抖定时器
+  if (renderDebounceTimer) {
+    clearTimeout(renderDebounceTimer);
+    renderDebounceTimer = null;
+  }
+
+  // 清理隐藏定时器
+  if (hideTimer) {
+    clearTimeout(hideTimer);
+    hideTimer = null;
+  }
+});
+</script>
+
+<style lang="less" scoped>
+// 淡入动画（从下方向上淡入）
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px); // 从下方 8px 处开始
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0); // 移动到最终位置
+  }
+}
+
+// 样式已统一到公共样式文件，使用 .preview-container
+
+// 自定义页码输入框样式
+.page-input {
+  min-width: 0 !important;
+  padding: 0 6px; // 左右padding（从4px调整到6px，更宽松舒适）
+  font-size: 13px; // 字体大小
+  font-weight: 500; // 中等粗体
+  line-height: 20px; // 行高
+  color: rgb(0 0 0 / 85%); // 文字颜色
+  text-align: center; // 居中显示
+  background: #0000000a; // 浅灰背景
+  border: none; // 无边框
+  border-radius: 4px; // 圆角
+  outline: none; // 移除焦点轮廓
+  transition: background-color 0.15s ease;
+}
+
+// 工具栏样式已统一到公共样式文件，使用 .preview-toolbar .preview-toolbar-between
+// PDF 特有的页码信息样式（在工具栏内）
+.preview-toolbar {
+  .page-info {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    font-size: 14px;
+
+    .page-separator {
+      margin: 0 4px;
+      color: #86909c;
+    }
+
+    .total-pages {
+      min-width: 30px;
+      font-size: 13px !important;
+      font-weight: 500;
+      color: rgb(0 0 0 / 85%);
+      text-align: left;
+    }
+  }
+
+  .zoom-level {
+    min-width: 50px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #1d2129;
+    text-align: center;
+  }
+}
+
+// PDF 内容区域
+.pdf-content {
+  position: relative;
+  flex: 1;
+  overflow: hidden auto;
+  background-color: rgb(243 244 246);
+  transition: width 0.3s ease;
+
+  // 自定义滚动条（浅色主题配色）
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #d1d5db;
+    border-radius: 3px;
+
+    &:hover {
+      background-color: rgb(0 0 0 / 30%); // hover时稍微深一点
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: rgb(243 244 246); // 非常浅的灰色背景
+  }
+
+  // 全屏样式
+  &.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    width: 100vw;
+    height: 100vh;
+  }
+}
+
+// PDF 查看器
+.pdf-viewer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  padding: 0 5px;
+}
+
+// PDF 缩放包装器
+.pdf-scale-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  height: calc(100vh - 120px);
+  transition: transform 0.2s ease;
+}
+
+// PDF 页面容器
+.pdf-page-container {
+  position: relative; // 设置为相对定位，方便文本图层定位
+  display: inline-block;
+}
+
+// PDF 画布
+.pdf-canvas {
+  display: block;
+  background-color: #fff;
+}
+
+// 文本图层样式
+.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;
+  }
+}
+
+// 🎨 缩放模式下拉面板样式（根据截图精确还原）
+:deep(.scale-mode-option) {
+  padding: 0 !important;
+
+  .arco-dropdown-option-content {
+    padding: 0 !important;
+  }
+}
+
+// 🔑 面板整体添加左右内边距，让背景不占满
+:deep(.arco-dropdown) {
+  .arco-dropdown-list {
+    padding: 4px; // 面板内边距，让选项背景有呼吸空间
+  }
+}
+
+.scale-mode-item {
+  display: flex;
+  gap: 10px; // 图标与文字间距（从12px调整到10px，与16px图标更协调）
+  align-items: center;
+  width: 100%;
+  min-width: 150px; // 确保面板有足够宽度（略微减小）
+  padding: 8px 12px; // 上下8px，左右12px（更紧凑，与14px字体更协调）
+  cursor: pointer;
+
+  // 图标样式（16px）
+  .scale-mode-item-icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    color: #000; // 深黑色（截图中未选中图标较深）
+    transition: color 0.15s ease-in-out; // 与背景保持一致的过渡时间
+  }
+
+  // 文字标签样式
+  .scale-mode-item-label {
+    flex: 1;
+    font-size: 14px; // 标准选项文字大小
+    line-height: 20px; // 保持合适的行高确保垂直居中
+    color: #000; // 深黑色（截图中文字较深）
+    white-space: nowrap;
+    transition: color 0.15s ease-in-out; // 与背景保持一致的过渡时间
+  }
+
+  // 对勾图标样式
+  .scale-mode-item-check {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    color: #165dff; // 蓝色对勾
+    // 对勾不需要过渡效果，因为它只是显示/隐藏
+  }
+
+  // 选中状态：蓝色高亮
+  &.scale-mode-item-active {
+    // 选中状态保持透明背景，只改变文字和图标颜色
+    background-color: transparent;
+
+    .scale-mode-item-icon {
+      color: #165dff; // 蓝色图标
+    }
+
+    .scale-mode-item-label {
+      font-weight: 400; // 正常字重（截图中没有特别加粗）
+      color: #165dff; // 蓝色文字
+    }
+  }
+
+  // 选中 + Hover 组合状态
+  &.scale-mode-item-active:hover {
+    background-color: #f5f5f5; // hover时依然显示背景
+  }
+}
+
+// 主内容区域容器
+.pdf-main-container {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+// 目录和印章侧边栏样式
+.toc-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 0;
+  height: 100%;
+  overflow: hidden;
+  background: #f3f4f5;
+  border-right: 1px solid #00000014;
+  transition: width 0.3s ease;
+
+  &.toc-sidebar-show {
+    width: 180px;
+  }
+
+  .toc-tab-switcher {
+    display: flex;
+    flex-shrink: 0;
+    gap: 2px;
+    align-items: center;
+    height: 34px;
+    padding: 2px 4px;
+    margin: 16px 16px 8px;
+    background: var(--s-color-bg-trans-primary, rgb(0 0 0 / 6%));
+    border: 0.5px solid rgb(0 0 0 / 8%);
+    border: 0.5px solid var(--s-color-border-tertiary, rgb(0 0 0 / 8%));
+    border-radius: 10px;
+
+    .toc-tab-item {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: 50%;
+      height: 28px;
+      color: #86909c;
+      cursor: pointer;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+
+      &:hover {
+        color: #1d2129;
+        background-color: #f5f5f5;
+      }
+
+      &.toc-tab-item-active {
+        color: #1d2129;
+        background-color: #fff;
+      }
+    }
+  }
+
+  .toc-sidebar-content {
+    flex: 1;
+    padding: 8px 0;
+    overflow: hidden 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: transparent;
+    }
+  }
+}
+
+// 目录和印章列表样式
+.toc-tab-content {
+  padding: 4px 0;
+}
+
+.toc-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 6px 12px;
+  font-size: 12px;
+  line-height: 1.5;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+
+  .toc-item-content {
+    flex: 1;
+    color: #1d2129;
+    word-break: break-word;
+    white-space: normal;
+  }
+
+  .toc-item-page {
+    flex-shrink: 0;
+    margin-top: 2px;
+    font-size: 11px;
+    color: #86909c;
+  }
+
+  // 文档标题样式
+  &.toc-item-doc-title {
+    padding-left: 12px;
+    font-weight: 600;
+  }
+
+  // 段落标题样式（缩进显示层级关系）
+  &.toc-item-paragraph {
+    padding-left: 24px;
+    font-weight: 400;
+
+    .toc-item-content {
+      color: #1d2129;
+    }
+  }
+
+  // 印章样式
+  &.toc-item-seal {
+    padding-left: 24px;
+  }
+}
+
+.toc-empty {
+  padding: 24px 12px;
+  font-size: 12px;
+  color: #86909c;
+  text-align: center;
+}
+
+// 印章图片弹窗样式
+.seal-image-modal-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  padding: 20px;
+
+  .seal-image {
+    max-width: 100%;
+    max-height: 70vh;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
+  }
+
+  .empty-image {
+    padding: 60px;
+    font-size: 14px;
+    color: #86909c;
+    text-align: center;
+  }
+}
+</style>