askbot-dragon 1.6.76-beta → 1.6.76

package/src/components/preview/pdfView.vue

@@ -0,0 +1,973 @@
+<template>
+  <div class="pdfViewPage" id="pdfViewPage">
+    <!-- 按钮容器 -->
+    <div class="button-container" v-if="false">
+      <div class="change_scale">
+        <section @click="zoomOut">
+          <i class="el-icon-minus"></i>
+        </section>
+        <el-divider direction="vertical"></el-divider>
+        <section @click="zoomIn">
+          <i class="el-icon-plus"></i>
+        </section>
+      </div>
+      <!-- 文件上传 -->
+<!--      <label for="file-upload" class="file-upload-label">-->
+<!--        上传 PDF 文件-->
+<!--        <input-->
+<!--            id="file-upload"-->
+<!--            type="file"-->
+<!--            accept="application/pdf"-->
+<!--            @change="handleFileUpload"-->
+<!--            class="file-input"-->
+<!--        />-->
+<!--      </label>-->
+
+      <!--        &lt;!&ndash; 跳转按钮（已有高亮） &ndash;&gt;-->
+      <!--        <button @click="jumpToHighlight" class="action-button">-->
+      <!--          跳转到第一个高亮区域-->
+      <!--        </button>-->
+      <!--  -->
+      <!--        &lt;!&ndash; 缩放按钮 &ndash;&gt;-->
+      <!--        <button @click="zoomIn" class="action-button">放大</button>-->
+      <!--        <button @click="zoomOut" class="action-button">缩小</button>-->
+      <!--  -->
+      <!--        &lt;!&ndash; 搜索框和按钮 &ndash;&gt;-->
+<!--              <input v-model="searchQuery" placeholder="输入搜索关键词" type="text" />-->
+<!--              <button @click="doSearch">搜索</button>-->
+      <!--  -->
+      <!--        &lt;!&ndash; 搜索结果导航 &ndash;&gt;-->
+      <!--        <div v-if="searchTermCount > 0" class="search-nav">-->
+      <!--          <span>共找到 {{ searchTermCount }} 个匹配</span>-->
+      <!--          <template v-if="searchTermCount > 1">-->
+      <!--            <button @click="prevSearchResult">上一个</button>-->
+      <!--            <button @click="nextSearchResult">下一个</button>-->
+      <!--          </template>-->
+      <!--        </div>-->
+    </div>
+
+    <!-- PDF 渲染容器 -->
+    <div class="pdf-container" ref="pdfContainer" id="pdf-container">
+      <div
+          v-for="(page, index) in pages"
+          :key="index"
+          class="page-container"
+      >
+        <div class="canvas-wrapper" :id="'canvas-wrapper' + index">
+          <canvas ref="canvases"></canvas>
+          <!-- 在页面渲染中时显示loading -->
+          <div v-if="!page.loaded && !page.loading" class="page-loading-overlay">
+            <div class="spinner"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="change_scale">
+      <i class="iconfont guoran-suoxiao1" @click="zoomOut"></i>
+      <i class="iconfont guoran-fangda1" @click="zoomIn"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getDocument } from "pdfjs-dist/webpack";
+// import pdfWorker from "pdfjs-dist/build/pdf.worker.entry";
+
+const pdfjsLib = window['pdfjsLib']
+if(pdfjsLib) {
+  pdfjsLib.GlobalWorkerOptions.workerSrc = window['pdfjs-dist/build/pdf.worker']
+}
+const { TextLayerBuilder } = window['pdfjs-dist/web/pdf_viewer']
+import { newInitWaterMark,setTimestamp } from "../../assets/js/common.js";
+import Vue from 'vue';
+export default {
+  name: "PdfViewer",
+  data() {
+    return {
+      pdfFile: null,
+      pdf: null,
+      numPages: 0,
+      scale: 1, // 初始缩小比例
+      renderInProgress: false,
+      pages: [], // { pageNumber: number, loaded: boolean, canvas: ref, loading: boolean }
+      // 静态高亮（坐标采用顶部为原点）
+      highlights: [],
+      searchQuery: "",
+      searchHighlights: [], // 搜索高亮（PDF文本坐标，自下往上）
+      observer: null,
+      currentPage: 1, // 当前可视区最接近顶部的页面
+      resizeTimeout: null,
+      currentSearchIndex: 0,
+      searchTermCount: 0,
+      loadingTask:null,
+      context:null,
+      viewport:null,
+      colors: ['0, 245, 255', '54, 106, 255', '33, 136, 104','255, 255, 51','0, 255, 127'],
+      pageNumber:1,
+      mergedGroupsList:[]
+    };
+  },
+  props:{
+    split_paragraphs:{
+      type:Array,
+      default(){
+        return []
+      }
+    },
+    ossPath:{
+      type:String,
+      default:""
+    },
+    isPC:{
+      type:Boolean,
+      default:true
+    },
+    textWatermarkStr:{
+      type:String,
+      default:""
+    }
+  },
+  methods: {
+    setHighlights(arr){
+      this.highlights = [];
+      for (let i =0;i<arr.length;i++){
+        if (arr[i].original_paragraph){
+          for (let j=0;j<arr[i].original_paragraph.length;j++){
+            let item = arr[i].original_paragraph[j];
+            let obj = {
+              position:item.position,
+              pageNumber: i+1,
+              page:item.page
+            }
+            this.highlights.push(obj);
+          }
+        }
+      }
+    },
+    mergedGroups(arr) {
+      const groupsMap = {};
+      let newArr = arr.filter(item => item.position && item.page)
+      newArr.forEach(group => {
+        if (!groupsMap[group.pageNumber]) {
+          groupsMap[group.pageNumber] = {
+            pageNumber: group.pageNumber,
+            position: [],
+            page:group.page
+          };
+        }
+        groupsMap[group.pageNumber].position = [
+          ...groupsMap[group.pageNumber].position,
+          ...group.position
+        ];
+      });
+      return Object.values(groupsMap);
+    },
+    async initPdf() {
+      if (!this.pdfFile) return;
+      this.pdfFile = setTimestamp(this.pdfFile)
+      // this.pdf = await pdfjsLib.getDocument(this.pdfFile).promise;
+      this.loadingTask = pdfjsLib.getDocument({
+        url: this.pdfFile,
+        cMapUrl: '/pdfjs/cmaps/',
+        cMapPacked: true,
+        standardFontDataUrl: '/pdfjs/standard_fonts/',
+      });
+      await this.loadingTask.promise.then(async pdf => {
+        // 获取PDF的第一页
+        this.pdf = pdf;
+        // this.numPages = pdf._transport.numPages;
+        let lazySize = pdf._transport.numPages;
+        this.numPages = Math.min(pdf._transport.numPages, lazySize);
+        // 初始化页面数据
+        this.pages = Array.from({ length: this.numPages }, (_, i) => ({
+          pageNumber: i + 1,
+          loaded: false,
+          canvas: null,
+          loading: false,
+        }));
+        // 清空搜索高亮
+        this.searchHighlights = [];
+        this.searchTermCount = 0;
+        this.currentSearchIndex = 0;
+        // 确保 DOM 更新完成后再设置 canvas 引用
+        await this.$nextTick();
+        await this.setCanvasRef();
+      }).catch(error => {
+        console.error('PDF 加载失败:', error);
+      })
+
+    },
+    async loadPdf() {
+      if (!this.pdfFile) return;
+      await this.initPdf();
+      // 确保 canvas 引用设置完成后再初始化观察器
+      await this.$nextTick();
+      // 延迟初始化观察器，确保所有 canvas 都已准备好
+      setTimeout(() => {
+        this.initObserver();
+      }, 200);
+    },
+    initObserver(type) {
+      if (this.observer) {
+        this.observer.disconnect();
+      }
+      this.observer = new IntersectionObserver(
+           (entries) => {
+             entries.forEach( (entry) => {
+              if (entry.isIntersecting) {
+                const index = Number(entry.target.getAttribute('data-index'));
+                const page = this.pages[index];
+                if (page && !page.loaded && !page.loading) {
+                  this.renderPage(page.pageNumber);
+                }
+                this.updateCurrentPage();
+              }
+            });
+          },
+          {
+            root: this.$refs.pdfContainer,
+            rootMargin: '0px 0px 0px 0px',
+            threshold: 0.1,
+          }
+      );
+      // 确保 canvas 引用都已设置好后再开始观察
+      this.$nextTick(() => {
+        // 增加延迟确保所有 canvas 引用都已设置
+        setTimeout(() => {
+          this.pages.forEach((page, index) => {
+            const canvas = page.canvas;
+            if (canvas) {
+              canvas.setAttribute('data-index', index);
+              this.observer.observe(canvas);
+            }
+          });
+        },500)
+        if (type !== 'changeScale' && type !== 'onResize'){
+          setTimeout(async () => {
+            let currentPage = this.split_paragraphs.length > 0 ? this.split_paragraphs[0] : null;
+            let page = 1;
+            if (currentPage){
+              page = currentPage.original_paragraph[0].page
+            }
+            await this.loadPage(page);
+            this.jumpToHighlight(0);
+          },1300)
+        }
+      });
+    },
+    async loadPage(number){
+      for (let i=0;i<number;i++){
+        const page = this.pages[i];
+        if (!page.loaded && !page.loading) {
+          await this.renderPage(page.pageNumber);
+        }
+        await this.updateCurrentPage();
+      }
+    },
+    async renderPage(pageNumber) {
+      if (!this.pdf) return;
+      const pageIndex = pageNumber - 1;
+      const pageData = this.pages[pageIndex];
+      if (!pageData) return;
+      // 如果已经在加载或已加载，避免重复渲染
+      if (pageData.loaded || pageData.loading) return;
+
+      this.pageNumber = pageNumber;
+
+      try {
+        // 标记为加载中，防止重复渲染
+        this.$set(pageData, 'loading', true);
+
+        const page = await this.pdf.getPage(pageNumber);
+        let pdfWidth = page.getViewport({ scale: 1 }).width;
+        const displayScale = this.calculateScale(pdfWidth);
+        const viewport = page.getViewport({ scale: displayScale });
+        this.viewport = viewport;
+
+        const canvas = pageData.canvas;
+        if (!canvas) {
+          console.warn(`页面 ${pageNumber} 的 canvas 引用不存在`);
+          this.$set(pageData, 'loading', false);
+          return;
+        }
+
+        const context = canvas.getContext("2d");
+        if (!context) {
+          console.warn(`页面 ${pageNumber} 无法获取 canvas context`);
+          this.$set(pageData, 'loading', false);
+          return;
+        }
+
+        this.context = context;
+
+        // 计算输出缩放比例（与 vuePdf 保持一致）
+        const outputScale = this.getOutputScale();
+
+        // 计算实际显示的尺寸
+        let domWidth = Math.floor(viewport.width);
+        let domHeight = Math.floor(viewport.height);
+
+        // 设置 canvas 尺寸（与 vuePdf 保持一致，使用 outputScale）
+        // 注意：vuePdf 不使用 devicePixelRatio，为了保持一致，我们也只使用 outputScale
+        canvas.width = Math.floor(viewport.width * outputScale);
+        canvas.height = Math.floor(viewport.height * outputScale);
+        canvas.style.width = `${domWidth}px`;
+        canvas.style.height = `${domHeight}px`;
+
+        // 创建 transform 矩阵（与 vuePdf 保持一致）
+        let transform = outputScale !== 1
+            ? [outputScale, 0, 0, outputScale, 0, 0]
+            : null;
+
+        // 清除旧的文本层
+        let hasDoc = document.getElementById('textLayer' + pageNumber);
+        if (hasDoc) {
+          hasDoc.parentNode.removeChild(hasDoc);
+        }
+
+        // 渲染 PDF 页面到 canvas（传入 transform 确保正确渲染）
+        const renderTask = page.render({
+          canvasContext: context,
+          viewport: viewport,
+          transform: transform
+        });
+        await renderTask.promise;
+        transform = null;
+
+        // 渲染文本层（必须在高亮渲染之前，确保文本层在最上层）
+        try {
+          const textContent = await page.getTextContent();
+          const textDiv = document.createElement('div');
+          textDiv.setAttribute('class', 'textLayer');
+          textDiv.setAttribute('id', 'textLayer' + pageNumber);
+          // 关键：TextLayerBuilder 也需要传入 transform，确保文本位置正确
+          let textLayer = new TextLayerBuilder({
+            textLayerDiv: textDiv,
+            pageIndex: pageIndex,
+            viewport: viewport,
+            transform: transform,  // 添加 transform 参数
+          });
+          // 使用 domWidth 和 domHeight（与 vuePdf 保持一致）
+          textDiv.style.width = `${domWidth}px`;
+          textDiv.style.height = `${domHeight}px`;
+          // 使用 hidden 但确保尺寸正确（与 vuePdf 保持一致）
+          textDiv.style.overflow = 'hidden';
+          textDiv.style.whiteSpace = 'pre-wrap';
+          textDiv.style.position = 'absolute';
+          textDiv.style.top = '0';
+          textDiv.style.left = '0';
+          textDiv.style.fontSize = '20px';
+          textDiv.style.color = 'black';
+          textLayer.setTextContent(textContent);
+          textLayer.render();
+
+          // 渲染完成后，检查文本层实际内容高度，如果超出则调整
+          await this.$nextTick();
+          const textLayerSpans = textDiv.querySelectorAll('span');
+          if (textLayerSpans.length > 0) {
+            let maxBottom = 0;
+            textLayerSpans.forEach(span => {
+              const rect = span.getBoundingClientRect();
+              const parentRect = textDiv.getBoundingClientRect();
+              const relativeBottom = rect.bottom - parentRect.top;
+              if (relativeBottom > maxBottom) {
+                maxBottom = relativeBottom;
+              }
+            });
+            // 如果文本内容超出当前高度，增加文本层高度（增加一些边距）
+            if (maxBottom > domHeight) {
+              textDiv.style.height = `${Math.ceil(maxBottom + 10)}px`;
+            }
+          }
+
+          // 将文本 div 添加到覆盖层中
+          let pagesDiv = document.getElementById('canvas-wrapper' + pageIndex);
+          if (pagesDiv) {
+            pagesDiv.appendChild(textDiv);
+          }
+        } catch (textError) {
+          console.warn(`页面 ${pageNumber} 文本层渲染失败:`, textError);
+          // 文本层渲染失败不影响页面继续渲染
+        }
+
+        // 渲染已有高亮区域（静态highlights）
+        // 注意：高亮是在 canvas 上绘制的，不会覆盖文本层（文本层在 canvas 上方）
+        // 需要传入 outputScale，因为 canvas 使用了 transform 渲染
+        try {
+          this.renderHighlights(context, pageNumber, viewport, outputScale);
+        } catch (highlightError) {
+          console.warn(`页面 ${pageNumber} 高亮渲染失败:`, highlightError);
+        }
+
+        // 渲染搜索高亮区域
+        try {
+          this.renderSearchHighlights(context, pageNumber, viewport, outputScale);
+        } catch (searchHighlightError) {
+          console.warn(`页面 ${pageNumber} 搜索高亮渲染失败:`, searchHighlightError);
+        }
+
+        // 标记为已加载
+        this.$set(pageData, 'loading', false);
+        this.$set(pageData, 'loaded', true);
+      } catch (error) {
+        console.error(`页面 ${pageNumber} 渲染失败:`, error);
+        // 渲染失败时重置状态，允许重试
+        this.$set(pageData, 'loading', false);
+        this.$set(pageData, 'loaded', false);
+      }
+    },
+    calculateScale(pdfWidth) {
+      const pdfViewPage = document.getElementById('pdfViewPage');
+      if (!pdfViewPage || !pdfWidth) return this.scale;
+      const horizontalPadding = this.isPC ? 50 : 16;
+      const containerWidth = Math.max(pdfViewPage.clientWidth - horizontalPadding, 1);
+      return (containerWidth / pdfWidth) * this.scale;
+    },
+    getOutputScale() {
+      return Math.min(window.devicePixelRatio || 1, 2);
+    },
+    async renderHighlights(context, number, viewport, outputScale = 1) {
+      const pageHighlights = this.highlights.filter(item => (item.page === number ))
+      let highlights = this.mergedGroups(pageHighlights);
+      this.mergedGroupsList = this.mergedGroupsList.concat(highlights)
+      if (context){
+        highlights.forEach(({ position,pageNumber }) => {
+          // this.drawHighlight(context, viewport, position, fillStyle, false);
+          const groups = [];
+          const colorIndex = pageNumber % this.colors.length;
+          let fillStyle = 'rgba(' + this.colors[colorIndex] + ',0.1)';
+          for (let i = 0; i < position.length; i += 4) {
+            groups.push(position.slice(i, i + 4));
+          }
+          for (let i = 0;i<groups.length;i++){
+            this.drawHighlight(context, viewport, groups[i], fillStyle, false, outputScale);
+          }
+        });
+      }
+    },
+    renderSearchHighlights(context, pageNumber, viewport, outputScale = 1) {
+      const pageHighlights = this.searchHighlights.filter(h => h.pageNumber === pageNumber);
+      pageHighlights.forEach(({ position }) => {
+        this.drawHighlight(context, viewport, position, "rgba(255, 255, 0, 0.4)", true, outputScale);
+      });
+    },
+    drawHighlight(context, viewport, position, fillStyle, fromSearch = false, outputScale = 1) {
+      const [x1, y1, x2, y2] = position;
+      // 使用 viewport.scale 计算 PDF 坐标到 viewport 坐标的转换
+      const scale = viewport.scale;
+      // PDF 页面的实际高度（未缩放）
+      const pageHeight = viewport.height / viewport.scale;
+
+      // 计算在 viewport 坐标系中的位置（PDF 坐标 → viewport 坐标）
+      let viewportX1 = x1 * scale;
+      let viewportX2 = x2 * scale;
+      let viewportY1, viewportY2;
+
+      if (fromSearch) {
+        // 搜索高亮：PDF坐标系（左下原点），需要转换为顶部原点
+        viewportY1 = (pageHeight - y1) * scale;
+        viewportY2 = (pageHeight - y2) * scale;
+      } else {
+        // 静态 highlights：顶部坐标原点，直接使用
+        viewportY1 = y1 * scale;
+        viewportY2 = y2 * scale;
+      }
+
+      // 由于 canvas 使用了 transform 渲染，PDF.js 会在内部应用 transform
+      // 但 context 的坐标系统是 canvas 的实际尺寸（viewport.width * outputScale）
+      // 而 viewport 坐标是基于 viewport.width 的，所以需要转换为 canvas 坐标
+      // 注意：outputScale 和 viewport.scale 是相同的值，所以这里只需要乘以 outputScale
+      // 但实际上 viewport.scale 已经应用了，所以这里应该直接使用 viewport 坐标
+      // 但 canvas 的实际尺寸是 viewport.width * outputScale，所以需要缩放
+      let canvasX1 = viewportX1 * outputScale;
+      let canvasX2 = viewportX2 * outputScale;
+      let canvasY1 = viewportY1 * outputScale;
+      let canvasY2 = viewportY2 * outputScale;
+
+      // 清除当前路径
+      context.beginPath();
+
+      context.fillStyle = fillStyle;
+      context.fillRect(
+          Math.min(canvasX1, canvasX2),
+          Math.min(canvasY1, canvasY2),
+          Math.abs(canvasX2 - canvasX1),
+          Math.abs(canvasY2 - canvasY1)
+      );
+    },
+    handleFileUpload(event) {
+      const file = event.target.files[0];
+      if (file) {
+        this.pdfFile = URL.createObjectURL(file);
+        this.clearPages();
+        this.loadPdf();
+      }
+    },
+    async setCanvasRef() {
+      // 等待 DOM 完全更新
+      await this.$nextTick();
+
+      if (!this.$refs.canvases || !Array.isArray(this.$refs.canvases)) {
+        console.warn('Canvas 引用未准备好，延迟重试');
+        // 如果 canvas 引用还没准备好，延迟重试
+        setTimeout(() => {
+          this.setCanvasRef();
+        }, 100);
+        return;
+      }
+
+      // 确保所有 canvas 引用都已设置
+      for (let index = 0; index < this.pages.length; index++) {
+        if (this.$refs.canvases && this.$refs.canvases[index]) {
+          this.$set(this.pages[index], 'canvas', this.$refs.canvases[index]);
+        } else {
+          console.warn(`页面 ${index + 1} 的 canvas 引用不存在`);
+        }
+      }
+    },
+    clearPages() {
+      this.pages = [];
+      if (this.observer) {
+        this.observer.disconnect();
+      }
+    },
+    jumpToHighlight(currentPage) {
+      let highlight = null;
+      if (this.split_paragraphs[currentPage] && this.split_paragraphs[currentPage].original_paragraph){
+        highlight = this.split_paragraphs[currentPage].original_paragraph[0];
+      }
+      if (!highlight) return;
+      this.scrollToHighlight(highlight);
+    },
+    scrollToHighlight(highlight) {
+      if (!highlight) return;
+      const { page, position } = highlight;
+
+      const fromSearch = this.searchHighlights.some(h => h === highlight);
+
+      this.$nextTick(() => {
+        const pageIndex = page - 1;
+        const pageData = this.pages[pageIndex];
+        const container = this.$refs.pdfContainer;
+        const canvas = pageData.canvas;
+        if (!canvas || !container) return;
+
+        const rect = canvas.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        this.pdf.getPage(page).then(pages => {
+          let pdfWidth =  pages.getViewport({ scale: 1}).width
+          const scale = this.calculateScale(pdfWidth);
+          const viewport = pages.getViewport({ scale });
+          const pageHeight = viewport.height / viewport.scale;
+
+          const [x1, y1, x2, y2] = position;
+          let targetYPdf, targetXPdf;
+          if (fromSearch) {
+            // 搜索高亮使用上边界作为参考点
+            const highlightTopYPdf = Math.max(y1, y2);
+            const highlightLeftXPdf = (x1 + x2) / 2;
+            targetYPdf = highlightTopYPdf;
+            targetXPdf = highlightLeftXPdf;
+          } else {
+            // 静态高亮使用中心点
+            const highlightCenterYPdf = Number(Number(y1) + Number(y2)) / 2;
+            const highlightCenterXPdf = Number(Number(x1) + Number(x2)) / 2;
+            targetYPdf = highlightCenterYPdf;
+            targetXPdf = highlightCenterXPdf;
+          }
+
+          let targetYCanvas, targetXCanvas;
+          if (fromSearch) {
+            targetYCanvas = (pageHeight - targetYPdf) * scale;
+          } else {
+            targetYCanvas = targetYPdf * scale;
+          }
+          targetXCanvas = targetXPdf * scale;
+          // 将高亮位置转换为相对于container滚动坐标体系的绝对位置
+          // rect.top/left - containerRect.top/left为canvas相对container视口顶部/左侧的偏移
+          // 加上container当前的scrollTop/scrollLeft可获得绝对滚动系下的位置
+          const highlightAbsoluteY = (rect.top - containerRect.top) + container.scrollTop + targetYCanvas;
+          const highlightAbsoluteX = (rect.left - containerRect.left) + container.scrollLeft + targetXCanvas;
+
+          const topOffset = container.clientHeight / 2;
+          const leftOffset = container.clientWidth / 2;
+
+          const scrollTop = Math.max(0, highlightAbsoluteY - topOffset);
+          const scrollLeft = Math.max(0, highlightAbsoluteX - leftOffset);
+          container.scrollTo({
+            top: scrollTop,
+            left: scrollLeft,
+            behavior: "smooth",
+          });
+        });
+      });
+    },
+    zoomIn() {
+      this.updateCurrentPage();
+      // 检查是否有页面正在加载
+      if (this.pages.some(p => p.loading)) return;
+      const container = this.$refs.pdfContainer;
+      const currentScroll = container.scrollTop;
+      this.scale += 0.1;
+      this.reloadAllPages(currentScroll);
+    },
+    zoomOut() {
+      this.updateCurrentPage();
+      // 检查是否有页面正在加载
+      if (this.pages.some(p => p.loading)) return;
+      const container = this.$refs.pdfContainer;
+      const currentScroll = container.scrollTop;
+      this.scale = Math.max(this.scale - 0.1, 0.1);
+      this.reloadAllPages(currentScroll);
+    },
+    reloadAllPages(scrollPosition) {
+      const pages = Vue.observable(this.pages)
+      pages.forEach((p) => {
+        p.loaded = false;
+        this.$set(p,'loading',false)
+        if (p.canvas) {
+          const ctx = p.canvas.getContext('2d');
+          ctx.clearRect(0,0,p.canvas.width,p.canvas.height);
+        }
+      });
+
+      const container = this.$refs.pdfContainer;
+      this.$nextTick(() => {
+        container.scrollTop = scrollPosition;
+        this.initObserver('changeScale');
+        container.scrollTop = container.scrollTop + 1;
+        container.scrollTop = container.scrollTop - 1;
+      });
+    },
+    updateCurrentPage() {
+      const container = this.$refs.pdfContainer;
+      if (!container) return;
+      let closestPage = 1;
+      let closestDistance = Infinity;
+      this.pages.forEach((p) => {
+        if (p.canvas) {
+          const rect = p.canvas.getBoundingClientRect();
+          const containerRect = container.getBoundingClientRect();
+          const distance = Math.abs(rect.top - containerRect.top);
+          if (distance < closestDistance) {
+            closestDistance = distance;
+            closestPage = p.pageNumber;
+          }
+        }
+      });
+      this.currentPage = closestPage;
+    },
+    async doSearch() {
+      if (!this.pdf || !this.searchQuery) return;
+      // 检查是否有页面正在加载
+      if (this.pages.some(p => p.loading)) return;
+
+      this.searchHighlights = [];
+      const numPages = this.numPages;
+      const searchTerm = this.searchQuery;
+
+      for (let pageNumber = 1; pageNumber <= numPages; pageNumber++) {
+        const page = await this.pdf.getPage(pageNumber);
+        const textContent = await page.getTextContent();
+        const items = textContent.items;
+        let fullText = "";
+        let offsetPositions = [];
+        let currentPos = 0;
+        items.forEach((item) => {
+          offsetPositions.push({
+            str: item.str,
+            start: currentPos,
+            end: currentPos + item.str.length,
+            transform: item.transform,
+            width: item.width,
+          });
+          currentPos += item.str.length;
+          fullText += item.str;
+        });
+
+        let startIndex = 0;
+        while ((startIndex = fullText.indexOf(searchTerm, startIndex)) !== -1) {
+          const endIndex = startIndex + searchTerm.length;
+          const matchedItems = offsetPositions.filter(
+              (op) => op.start <= startIndex && op.end >= endIndex
+          );
+
+          if (matchedItems.length > 0) {
+            const matchItem = matchedItems[0];
+            const substringLength = searchTerm.length;
+            const avgCharWidth = matchItem.width / matchItem.str.length;
+
+            const substringOffset = startIndex - matchItem.start;
+
+            const lineHeight = Math.abs(matchItem.transform[3]);
+            const y1 = matchItem.transform[5];
+            const y2 = y1 + lineHeight;
+
+            const xStart =
+                matchItem.transform[4] + substringOffset * avgCharWidth;
+            const xEnd = xStart + substringLength * avgCharWidth;
+
+            this.searchHighlights.push({
+              pageNumber,
+              position: [xStart, y1, xEnd, y2],
+            });
+          }
+          startIndex = endIndex;
+        }
+      }
+
+      this.searchTermCount = this.searchHighlights.length;
+      this.currentSearchIndex = 0;
+
+      const container = this.$refs.pdfContainer;
+      const currentScroll = container.scrollTop;
+      this.pages.forEach((p) => {
+        p.loaded = false;
+        this.$set(p,'loading',false)
+        if (p.canvas) {
+          const ctx = p.canvas.getContext("2d");
+          ctx.clearRect(0, 0, p.canvas.width, p.canvas.height);
+        }
+      });
+      this.$nextTick(() => {
+        container.scrollTop = currentScroll;
+        this.initObserver();
+        container.scrollTop = container.scrollTop + 1;
+        container.scrollTop = container.scrollTop - 1;
+
+        if (this.searchTermCount > 0) {
+          this.scrollToHighlight(this.searchHighlights[0]);
+        }
+      });
+    },
+    prevSearchResult() {
+      if (this.searchTermCount <= 1) return;
+      this.currentSearchIndex = (this.currentSearchIndex - 1 + this.searchTermCount) % this.searchTermCount;
+      this.scrollToHighlight(this.searchHighlights[this.currentSearchIndex]);
+    },
+    nextSearchResult() {
+      if (this.searchTermCount <= 1) return;
+      this.currentSearchIndex = (this.currentSearchIndex + 1) % this.searchTermCount;
+      this.scrollToHighlight(this.searchHighlights[this.currentSearchIndex]);
+    },
+    onResize() {
+      clearTimeout(this.resizeTimeout);
+      this.resizeTimeout = setTimeout(() => {
+        // 检查是否有页面正在加载
+        if (this.pages.some(p => p.loading)) return;
+        const container = this.$refs.pdfContainer;
+        const currentScroll = container.scrollTop;
+        const pages = Vue.observable(this.pages)
+        pages.forEach((p) => {
+          p.loaded = false;
+          this.$set(p,'loading',false)
+          if (p.canvas) {
+            const ctx = p.canvas.getContext('2d');
+            ctx.clearRect(0,0,p.canvas.width,p.canvas.height);
+          }
+        });
+        this.$nextTick(() => {
+          container.scrollTop = currentScroll;
+          this.initObserver('onResize');
+          container.scrollTop = container.scrollTop + 1;
+          container.scrollTop = container.scrollTop - 1;
+        });
+      }, 300);
+    },
+  },
+  async mounted() {
+    window.addEventListener("resize", this.onResize);
+    this.pdfFile = this.ossPath;
+    console.log('ossPath',this.ossPath)
+    // this.clearPages();
+    // this.loadPdf();
+    if (this.textWatermarkStr){
+      newInitWaterMark('pdfViewPage', this.textWatermarkStr)
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.onResize);
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+  watch:{
+    split_paragraphs:{
+      async handler(val){
+        this.highlights = [];
+        if (val.length > 0){
+          await this.setHighlights(val);
+        }
+        this.clearPages();
+        this.loadPdf();
+      },
+      immediate:true,
+      deep:true
+    },
+    ossPath:{
+      handler(val){
+        if (val){
+          this.pdfFile = this.ossPath;
+        }
+      },
+      immediate:true
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "../../assets/less/variables.less";
+
+.pdfViewPage{
+  width: 100%;
+  height: 100%;
+}
+.pdf-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: auto;
+  margin: 0 auto;
+  position: relative;
+  border-radius: 10px;
+  background: @background-color-light;
+  width: 100%;
+  .textLayer{
+    span{
+      position: absolute;
+      color: transparent;
+      white-space:pre;
+      cursor: text;
+      transform-origin:0,0
+    }
+  }
+}
+
+.page-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.canvas-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+/* 在loading时覆盖canvas显示加载动画 */
+.page-loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner {
+  border: 6px solid @border-color-r3;
+  border-top: 6px solid @border-color-r7;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+}
+
+canvas {
+  border: 1px solid @border-color-r5;
+  width: 100%;
+  height: auto;
+  margin-bottom: 10px;
+}
+
+.button-container {
+  display: flex;
+  justify-content: center;
+}
+.change_scale {
+  height: 80px;
+  //padding: 10px;
+  width: 32px;
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+  position: absolute;
+  right: 0;
+  top: calc(50% - 40px);
+  //top: 50px;
+  //margin-bottom: 10px;
+  //left: 0;
+  background: @background-color-light;
+  border: 1px solid @border-color-copy;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  //padding: 0 10px;
+  box-sizing: border-box;
+  i{
+    color: @font-primary-accent-color;
+    font-size: 20px;
+  }
+  section {
+    cursor: pointer;
+    width: 30px;
+    height: 30px;
+    margin-right: 5px;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    i {
+      font-weight: 900;
+    }
+  }
+
+  section:hover {
+    background: rgba(221, 222, 223, 1);
+  }
+}
+.search-nav {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+input[type="file"],
+button,
+input[type="text"] {
+  padding: 10px 15px;
+  font-size: 16px;
+  border: 1px solid @border-color-r4;
+  border-radius: 5px;
+  background-color: @background-color-custom;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+button:hover,
+input[type="file"]:hover,
+input[type="text"]:hover {
+  background-color: @background-color-ipt-hover;
+}
+
+button:active,
+input[type="file"]:active,
+input[type="text"]:active {
+  background-color: @background-color-ipt-active;
+}
+
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>