askbot-dragon 1.8.34-beta → 1.8.36-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "askbot-dragon",
-  "version": "1.8.34-beta",
+  "version": "1.8.36-beta",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/assets/js/common.js

@@ -256,6 +256,36 @@ function newInitWaterMark(elId, textValue) {
     })
     document.getElementById(elId).appendChild(oTemp);
 }
+const getAllParams = (href) => {
+    let query = href.substring(href.indexOf("?") + 1);
+    let vars = query.split("&");
+    let obj = {};
+    for (let i = 0; i < vars.length; i++) {
+        let pair = vars[i].split("=");
+        // 将参数名和参数值分别作为对象的属性名和属性值
+        obj[pair[0]] = pair[1];
+    }
+    return obj;
+}
+export const setTimestamp = (url) => {
+    if(url.indexOf('?') !== -1) {
+        let newUrl = url.split('?')[0];
+        let params = getAllParams(url)
+        params['timestamp'] = new Date().getTime();
+        let count = 0;
+        for(let key in params) {
+            if(count === 0) {
+                newUrl += '?' + key + '=' + params[key];
+            } else {
+                newUrl += '&' + key + '=' + params[key];
+            }
+            count++;
+        }
+        return newUrl;
+    } else {
+        return url
+    }
+}
 export {
     imageTypeObj,
     newInitWaterMark

package/src/components/ConversationContainer.vue

@@ -81,6 +81,7 @@
     <!-- <div v-for="(item,index) in processAction" :key="index">
       <association-intention :msg="item" :msgType="item.type" :isOpen="isOpen"></association-intention>
     </div> -->
+    <pdf-view :split_paragraphs="splitParagraph" :ossPath="ossPath" :isPC="true" ></pdf-view>
   </div>
 </template>
 <script>
@@ -122,9 +123,11 @@ import WelcomeKnowledgeFile from "./welcomeKnowledgeFile";
 import WelcomeLlmCard from "./welcomeLlmCard";
 import welcomeSuggest from "./welcomeSuggest"
 import QwFeedback from './QwFeedback';
+import PdfView from "./preview/pdfView";
 export default {
   name: 'ConversationContainer',
   components: {
+    PdfView,
     WelcomeLlmCard,
     WelcomeKnowledgeFile,
     // ActionAlert,
@@ -159,6 +162,572 @@ export default {
   },
   data() {
     return {
+      splitParagraph:[{
+        "paragraph": "AI 赋能累积超过 3000 家企业和组织  企业为什么要用 AI？ 不用 AI，你正在被同行淘汰 AI 客服 东莞某制造业企业 用了 AI 客服。客户响 应时间从 30 分钟，减 AI 询盘 义乌贸易公司，用 AI 询盘，自动翻译产品 AI 质检 某头部物业管理集 团，用 AI 检查晨会是 否达标，规范。 少到 10 秒。订单转化 率提升了 30%。 客服人员从 3 人减少 到 1 个。 描述，海外询盘量增 加 50% 节省 300 万/年管理费 用。 不用 AI 的风险 人工成本高 人工客服 5000 月 薪，6 万年薪。 AI 客服，成本不超过 1 万一年。 效率跟不上 人工，一周 1 个招商 方案，还不满意。 AI，一周 6 个方案， 随便选。 错失机会 秒回复 客户早跑了 企业 AI 落地怎么做？ 企业AI落地",
+        "edit_paragraph": null,
+        "original_paragraph": [
+          {
+            "text": "AI 赋能累积超过 3000 家企业和组织",
+            "title": {
+              "number": "35",
+              "level": 1,
+              "text": "AI 赋能累积超过 3000 家企业和组织"
+            },
+            "paragraph_id": "",
+            "images": [],
+            "page": 1,
+            "position": [
+              "91.5",
+              "419.37396240234375",
+              "318.358154296875",
+              "433.3689880371094"
+            ]
+          },
+          {
+            "text": "",
+            "title": null,
+            "paragraph_id": "",
+            "images": [
+              {
+                "id": "65",
+                "oss_image_url": "https://guoranwisdom.oss-cn-zhangjiakou.aliyuncs.com/ab0f90737c8b4f2d85ba2157e4473110/2025/12/25/10/53/24/694ca7050229e8779290cadf/page-1-image-65.png",
+                "ocr_image_text": null,
+                "is_deleted": null,
+                "position": null,
+                "page": 1
+              }
+            ],
+            "page": 1,
+            "position": [
+              "380.484375",
+              "359.2138977050781",
+              "535.1282958984375",
+              "371.2138977050781"
+            ]
+          },
+          {
+            "text": "企业为什么要用 AI？",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 1,
+            "position": [
+              "131.90625",
+              "531.6300048828125",
+              "463.5747985839844",
+              "567.6300048828125"
+            ]
+          },
+          {
+            "text": "不用 AI，你正在被同行淘汰",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 1,
+            "position": [
+              "187.828125",
+              "656.1900024414062",
+              "407.6615295410156",
+              "674.1900024414062"
+            ]
+          },
+          {
+            "text": "AI 客服",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 1,
+            "position": [
+              "109.7578125",
+              "710.3739624023438",
+              "154.717529296875",
+              "724.3689575195312"
+            ]
+          },
+          {
+            "text": "东莞某制造业企业",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 1,
+            "position": [
+              "63.0",
+              "735.1239624023438",
+              "174.9403076171875",
+              "749.1189575195312"
+            ]
+          },
+          {
+            "text": "用了 AI 客服。客户响",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 1,
+            "position": [
+              "63.0",
+              "759.8739624023438",
+              "194.99111938476562",
+              "773.8689575195312"
+            ]
+          },
+          {
+            "text": "应时间从 30 分钟，减",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 1,
+            "position": [
+              "63.0",
+              "782.3739624023438",
+              "199.00686645507812",
+              "796.3689575195312"
+            ]
+          },
+          {
+            "text": "AI 询盘",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 1,
+            "position": [
+              "275.25",
+              "710.3739624023438",
+              "320.209716796875",
+              "724.3689575195312"
+            ]
+          },
+          {
+            "text": "义乌贸易公司，用 AI",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 1,
+            "position": [
+              "228.4921875",
+              "735.1239624023438",
+              "360.4811096191406",
+              "749.1189575195312"
+            ]
+          },
+          {
+            "text": "询盘，自动翻译产品",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 1,
+            "position": [
+              "228.4921875",
+              "757.6239624023438",
+              "354.4246826171875",
+              "771.6189575195312"
+            ]
+          },
+          {
+            "text": "AI 质检",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 1,
+            "position": [
+              "440.7421875",
+              "710.3739624023438",
+              "485.701904296875",
+              "724.3689575195312"
+            ]
+          },
+          {
+            "text": "某头部物业管理集",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 1,
+            "position": [
+              "393.984375",
+              "735.1239624023438",
+              "505.9246826171875",
+              "749.1189575195312"
+            ]
+          },
+          {
+            "text": "团，用 AI 检查晨会是",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 1,
+            "position": [
+              "393.984375",
+              "757.6239624023438",
+              "525.9755249023438",
+              "771.6189575195312"
+            ]
+          },
+          {
+            "text": "否达标，规范。",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 1,
+            "position": [
+              "393.984375",
+              "780.8739624023438",
+              "491.9324951171875",
+              "794.8689575195312"
+            ]
+          },
+          {
+            "text": "少到 10 秒。订单转化",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "63.0",
+              "40.62397766113281",
+              "199.00686645507812",
+              "54.61897659301758"
+            ]
+          },
+          {
+            "text": "率提升了 30%。",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "63.0",
+              "63.12397766113281",
+              "166.7548828125",
+              "77.11897277832031"
+            ]
+          },
+          {
+            "text": "客服人员从 3 人减少",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "63.0",
+              "87.87397766113281",
+              "190.05186462402344",
+              "101.86897277832031"
+            ]
+          },
+          {
+            "text": "到 1 个。",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "63.0",
+              "111.12397766113281",
+              "120.09093475341797",
+              "125.11897277832031"
+            ]
+          },
+          {
+            "text": "描述，海外询盘量增",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "228.4921875",
+              "40.62397766113281",
+              "354.4246826171875",
+              "54.61897659301758"
+            ]
+          },
+          {
+            "text": "加 50%",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "228.4921875",
+              "63.12397766113281",
+              "276.278076171875",
+              "77.11897277832031"
+            ]
+          },
+          {
+            "text": "节省 300 万/年管理费",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "393.984375",
+              "40.62397766113281",
+              "530.6068725585938",
+              "54.61897659301758"
+            ]
+          },
+          {
+            "text": "用。",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "393.984375",
+              "63.12397766113281",
+              "421.9715576171875",
+              "77.11897277832031"
+            ]
+          },
+          {
+            "text": "不用 AI 的风险",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "239.84765625",
+              "191.19000244140625",
+              "355.641357421875",
+              "209.19000244140625"
+            ]
+          },
+          {
+            "text": "人工成本高",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "97.265625",
+              "245.3739776611328",
+              "167.2293701171875",
+              "259.3689880371094"
+            ]
+          },
+          {
+            "text": "人工客服 5000 月",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "63.0",
+              "270.12396240234375",
+              "174.9403076171875",
+              "284.1189880371094"
+            ]
+          },
+          {
+            "text": "薪，6 万年薪。",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "63.0",
+              "292.62396240234375",
+              "158.9892120361328",
+              "306.6189880371094"
+            ]
+          },
+          {
+            "text": "AI 客服，成本不超过",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "63.0",
+              "317.37396240234375",
+              "194.9889373779297",
+              "331.3689880371094"
+            ]
+          },
+          {
+            "text": "1 万一年。",
+            "title": {
+              "number": "35.1",
+              "level": 2,
+              "text": "1 万一年。"
+            },
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "63.0",
+              "340.62396240234375",
+              "131.0048370361328",
+              "354.6189880371094"
+            ]
+          },
+          {
+            "text": "效率跟不上",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "262.7578125",
+              "245.3739776611328",
+              "332.7215576171875",
+              "259.3689880371094"
+            ]
+          },
+          {
+            "text": "人工，一周 1 个招商",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "228.4921875",
+              "270.12396240234375",
+              "355.5440673828125",
+              "284.1189880371094"
+            ]
+          },
+          {
+            "text": "方案，还不满意。",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "228.4921875",
+              "292.62396240234375",
+              "340.4324951171875",
+              "306.6189880371094"
+            ]
+          },
+          {
+            "text": "AI，一周 6 个方案，",
+            "title": {
+              "number": "35.1.1",
+              "level": 3,
+              "text": "AI，一周 6 个方案，"
+            },
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "228.4921875",
+              "317.37396240234375",
+              "355.4461364746094",
+              "331.3689880371094"
+            ]
+          },
+          {
+            "text": "随便选。",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "228.4921875",
+              "340.62396240234375",
+              "284.4637451171875",
+              "354.6189880371094"
+            ]
+          },
+          {
+            "text": "错失机会",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "435.24609375",
+              "245.3739776611328",
+              "491.2176513671875",
+              "259.3689880371094"
+            ]
+          },
+          {
+            "text": "秒回复",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "393.984375",
+              "292.62396240234375",
+              "435.9637451171875",
+              "306.6189880371094"
+            ]
+          },
+          {
+            "text": "客户早跑了",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "393.984375",
+              "317.37396240234375",
+              "463.9481201171875",
+              "331.3689880371094"
+            ]
+          },
+          {
+            "text": "企业 AI 落地怎么做？",
+            "title": null,
+            "paragraph_id": "",
+            "images": [],
+            "page": 2,
+            "position": [
+              "127.9453125",
+              "446.1300048828125",
+              "467.5339050292969",
+              "482.1300048828125"
+            ]
+          },
+          {
+            "text": "企业AI落地",
+            "title": null,
+            "paragraph_id": "",
+            "images": [
+              {
+                "id": "152",
+                "oss_image_url": "https://guoranwisdom.oss-cn-zhangjiakou.aliyuncs.com/ab0f90737c8b4f2d85ba2157e4473110/2025/12/25/10/53/25/694ca7050229e8779290cadf/page-2-image-152.png",
+                "ocr_image_text": null,
+                "is_deleted": null,
+                "position": null,
+                "page": 2
+              }
+            ],
+            "page": 2,
+            "position": [
+              "153.8671875",
+              "563.7802124023438",
+              "333.6154479980469",
+              "600.1043090820312"
+            ]
+          }
+        ],
+        "images": [
+          {
+            "id": "65",
+            "oss_image_url": "https://guoranwisdom.oss-cn-zhangjiakou.aliyuncs.com/ab0f90737c8b4f2d85ba2157e4473110/2025/12/25/10/53/24/694ca7050229e8779290cadf/page-1-image-65.png",
+            "ocr_image_text": null,
+            "is_deleted": null,
+            "position": null,
+            "page": 1
+          },
+          {
+            "id": "152",
+            "oss_image_url": "https://guoranwisdom.oss-cn-zhangjiakou.aliyuncs.com/ab0f90737c8b4f2d85ba2157e4473110/2025/12/25/10/53/25/694ca7050229e8779290cadf/page-2-image-152.png",
+            "ocr_image_text": null,
+            "is_deleted": null,
+            "position": null,
+            "page": 2
+          }
+        ],
+        "html": null,
+        "html_result": null,
+        "page": null,
+        "paragraph_id": "7f3c8b9d-ab14-40e1-8975-b021447d3696"
+      }],
+      ossPath:"https://guoranwisdom.oss-cn-zhangjiakou.aliyuncs.com/ab0f90737c8b4f2d85ba2157e4473110/2025/12/25/10/52/de1dc26afbf782f49858056888d77db3/ede1dc26afbf782f.pdf?Expires=1766643431&OSSAccessKeyId=LTAI4Fr7hD1XCFb5zMNjMcGy&Signature=lzG%2BkN2WCAcG1UbZITWECiQSLng%3D",
       black: '',
       welcomeSuggest: {
         content: {

package/src/components/preview/pdfView.vue

@@ -78,7 +78,7 @@ if(pdfjsLib) {
   pdfjsLib.GlobalWorkerOptions.workerSrc = window['pdfjs-dist/build/pdf.worker']
 }
 const { TextLayerBuilder } = window['pdfjs-dist/web/pdf_viewer']
-import { newInitWaterMark } from "../../assets/js/common.js";
+import { newInitWaterMark,setTimestamp } from "../../assets/js/common.js";
 import Vue from 'vue';
 export default {
   name: "PdfViewer",
@@ -164,6 +164,7 @@ export default {
     },
     async initPdf() {
       if (!this.pdfFile) return;
+      this.pdfFile = setTimestamp(this.pdfFile)
       // this.pdf = await pdfjsLib.getDocument(this.pdfFile).promise;
       this.loadingTask = pdfjsLib.getDocument(this.pdfFile);
       await this.loadingTask.promise.then(async pdf => {
@@ -183,16 +184,23 @@ export default {
         this.searchHighlights = [];
         this.searchTermCount = 0;
         this.currentSearchIndex = 0;
-        setTimeout(async () => {
-          await this.setCanvasRef();
-        },100)
+        // 确保 DOM 更新完成后再设置 canvas 引用
+        await this.$nextTick();
+        await this.setCanvasRef();
+      }).catch(error => {
+        console.error('PDF 加载失败:', error);
       })
 
     },
     async loadPdf() {
       if (!this.pdfFile) return;
       await this.initPdf();
-      this.initObserver();
+      // 确保 canvas 引用设置完成后再初始化观察器
+      await this.$nextTick();
+      // 延迟初始化观察器，确保所有 canvas 都已准备好
+      setTimeout(() => {
+        this.initObserver();
+      }, 200);
     },
     initObserver(type) {
       if (this.observer) {
@@ -204,8 +212,8 @@ export default {
               if (entry.isIntersecting) {
                 const index = Number(entry.target.getAttribute('data-index'));
                 const page = this.pages[index];
-                if (!page.loaded && !page.loading) {
-                   this.renderPage(page.pageNumber);
+                if (page && !page.loaded && !page.loading) {
+                  this.renderPage(page.pageNumber);
                 }
                 this.updateCurrentPage();
               }
@@ -217,7 +225,9 @@ export default {
             threshold: 0.1,
           }
       );
-      this.$nextTick( () => {
+      // 确保 canvas 引用都已设置好后再开始观察
+      this.$nextTick(() => {
+        // 增加延迟确保所有 canvas 引用都已设置
         setTimeout(() => {
           this.pages.forEach((page, index) => {
             const canvas = page.canvas;
@@ -226,7 +236,7 @@ export default {
               this.observer.observe(canvas);
             }
           });
-        },300)
+        },500)
         if (type !== 'changeScale' && type !== 'onResize'){
           setTimeout(async () => {
             let currentPage = this.split_paragraphs.length > 0 ? this.split_paragraphs[0] : null;
@@ -250,78 +260,160 @@ export default {
       }
     },
     async renderPage(pageNumber) {
-      if (!this.pdf || this.renderInProgress) return;
+      if (!this.pdf) return;
       const pageIndex = pageNumber - 1;
       const pageData = this.pages[pageIndex];
-      if (pageData.loaded) return;
+      if (!pageData) return;
+      // 如果已经在加载或已加载，避免重复渲染
+      if (pageData.loaded || pageData.loading) return;
+
       this.pageNumber = pageNumber;
-      const page = await this.pdf.getPage(pageNumber);
-      let pdfWidth =  page.getViewport({ scale: 1}).width
-      const viewport = page.getViewport({ scale: this.calculateScale(pdfWidth) });
-      this.viewport = viewport;
-      const canvas = pageData.canvas;
-      if (!canvas) return;
-
-      const context = canvas.getContext("2d");
-      this.context = context;
-      const devicePixelRatio = window.devicePixelRatio || 1;
-      canvas.width = (viewport.width) * devicePixelRatio;
-      canvas.height = viewport.height * devicePixelRatio;
-      canvas.style.width = `${viewport.width}px`;
-      canvas.style.height = `${viewport.height}px`;
-      context.scale(devicePixelRatio, devicePixelRatio);
-
-      this.$set(pageData,'loading',true)
-      this.renderInProgress = true;
-      const renderTask = page.render({ canvasContext: context, viewport });
-      // await renderTask.promise;
-      let hasDoc = document.getElementById('textLayer' + pageNumber)
-      if (hasDoc){
-        hasDoc.parentNode.removeChild(hasDoc);
-        // await renderTask.promise;
-        // return
-      }
-      await renderTask.promise.then(() => {
-        return page.getTextContent()
-      }).then((textContent) => {
-        const textDiv = document.createElement('div');
-        textDiv.setAttribute('class', 'textLayer');
-        textDiv.setAttribute('id', 'textLayer' + pageNumber);
-        let textLayer = new TextLayerBuilder({
-          textLayerDiv: textDiv,
-          pageIndex: pageIndex,
+
+      try {
+        // 标记为加载中，防止重复渲染
+        this.$set(pageData, 'loading', true);
+
+        const page = await this.pdf.getPage(pageNumber);
+        let pdfWidth = page.getViewport({ scale: 1 }).width;
+        const viewport = page.getViewport({ scale: this.calculateScale(pdfWidth) });
+        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.calculateScale(pdfWidth);
+
+        // 计算实际显示的尺寸
+        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 保持一致）
+        const 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
         });
-        textDiv.style.width = `${viewport.width}px`; // 根据 viewport 调整宽度
-        textDiv.style.height = `${viewport.height}px`; // 根据 viewport 调整高度（可能需要根据实际文本内容调整）
-        textDiv.style.overflow = 'hidden'; // 如果文本内容超出范围，则隐藏它
-        textDiv.style.whiteSpace = 'pre-wrap'; // 保留空白符和换行符
-        textDiv.style.position = 'absolute'; // 绝对定位以覆盖 canvas
-        textDiv.style.top = '0';
-        textDiv.style.left = '0';
-        textDiv.style.fontSize = '20px'; // 设置字体大小（可能需要根据实际情况调整）
-        textDiv.style.color = 'black'; // 设置文本颜色（可能需要根据实际情况调整）
-        // textDiv.textContent = textContent; // 设置文本内容
-        textLayer.setTextContent(textContent);
-        textLayer.render()
-        // 将文本 div 添加到覆盖层中
-        let pagesDiv = document.getElementById('canvas-wrapper' + pageIndex);
-        pagesDiv.appendChild(textDiv)
-      })
-      this.renderInProgress = false;
-      this.$set(pageData,'loading',false)
-      this.$set(pageData,'loaded',true)
-
-      // 渲染已有高亮区域（静态highlights）
-      this.renderHighlights(context, pageNumber, viewport);
-      // 渲染搜索高亮区域
-      this.renderSearchHighlights(context, pageNumber, viewport);
+        await renderTask.promise;
+
+        // 渲染文本层（必须在高亮渲染之前，确保文本层在最上层）
+        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 containerWidth = document.getElementById('pdfViewPage').clientWidth - 50;
       return (containerWidth / pdfWidth) * this.scale;
     },
-    async renderHighlights(context, number,viewport) {
+    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)
@@ -335,36 +427,51 @@ export default {
             groups.push(position.slice(i, i + 4));
           }
           for (let i = 0;i<groups.length;i++){
-            this.drawHighlight(context, viewport, groups[i], fillStyle, false);
+            this.drawHighlight(context, viewport, groups[i], fillStyle, false, outputScale);
           }
         });
       }
     },
-    renderSearchHighlights(context, pageNumber, viewport) {
+    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);
+        this.drawHighlight(context, viewport, position, "rgba(255, 255, 0, 0.4)", true, outputScale);
       });
     },
-    drawHighlight(context, viewport, position, fillStyle, fromSearch = false) {
+    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;
 
-      let canvasX1 = x1 * scale;
-      let canvasX2 = x2 * scale;
-      let canvasY1, canvasY2;
+      // 计算在 viewport 坐标系中的位置（PDF 坐标 → viewport 坐标）
+      let viewportX1 = x1 * scale;
+      let viewportX2 = x2 * scale;
+      let viewportY1, viewportY2;
 
       if (fromSearch) {
-        // 搜索高亮：PDF坐标系（左下原点）
-        canvasY1 = (pageHeight - y1) * scale;
-        canvasY2 = (pageHeight - y2) * scale;
+        // 搜索高亮：PDF坐标系（左下原点），需要转换为顶部原点
+        viewportY1 = (pageHeight - y1) * scale;
+        viewportY2 = (pageHeight - y2) * scale;
       } else {
-        // 静态 highlights 假设顶部坐标原点不需翻转
-        canvasY1 = y1 * scale;
-        canvasY2 = y2 * scale;
+        // 静态 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;
@@ -384,11 +491,26 @@ export default {
       }
     },
     async setCanvasRef() {
-      await this.pages.forEach((page, index) => {
-        this.$set(this.pages[index],'canvas',this.$refs.canvases[index])
-        // 注意：这里我们直接将 DOM 元素赋值给 page.canvas，
-        // 但通常你可能想要对 DOM 元素进行进一步的处理或封装。
-      });
+      // 等待 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 = [];
@@ -469,7 +591,8 @@ export default {
     },
     zoomIn() {
       this.updateCurrentPage();
-      if (this.renderInProgress) return;
+      // 检查是否有页面正在加载
+      if (this.pages.some(p => p.loading)) return;
       const container = this.$refs.pdfContainer;
       const currentScroll = container.scrollTop;
       this.scale += 0.1;
@@ -477,7 +600,8 @@ export default {
     },
     zoomOut() {
       this.updateCurrentPage();
-      if (this.renderInProgress) return;
+      // 检查是否有页面正在加载
+      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);
@@ -522,7 +646,8 @@ export default {
     },
     async doSearch() {
       if (!this.pdf || !this.searchQuery) return;
-      if (this.renderInProgress) return;
+      // 检查是否有页面正在加载
+      if (this.pages.some(p => p.loading)) return;
 
       this.searchHighlights = [];
       const numPages = this.numPages;
@@ -615,7 +740,8 @@ export default {
     onResize() {
       clearTimeout(this.resizeTimeout);
       this.resizeTimeout = setTimeout(() => {
-        if (this.renderInProgress) return;
+        // 检查是否有页面正在加载
+        if (this.pages.some(p => p.loading)) return;
         const container = this.$refs.pdfContainer;
         const currentScroll = container.scrollTop;
         const pages = Vue.observable(this.pages)

package/src/components/preview/vuePdf.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="vue-office-pdf">
+    <div class="vue-office-pdf-main" id="vue-office-pdf-main" ref="rootRef"></div>
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+
+const pdfjsLib = window['pdfjsLib']
+if(pdfjsLib) {
+  pdfjsLib.GlobalWorkerOptions.workerSrc = window['pdfjs-dist/build/pdf.worker']
+}
+const { TextLayerBuilder } = window['pdfjs-dist/web/pdf_viewer']
+import waterMark from "@/utils/common";
+import { mapGetters } from 'vuex'
+import { setTimestamp } from '@/assets/js/common'
+export default {
+  name: "vuePdf",
+  data(){
+    return{
+      loadingTask:null,
+      transport:null,
+      numPages:0,
+      pdfDoc:null,
+      lazySize:3,
+      scale:1
+    }
+  },
+  props:{
+    src:{
+      type:String,
+      default:""
+    },
+    editType:{
+      type:String,
+      default:""
+    }
+  },
+  computed:{
+    ...mapGetters('knowledge', {
+      textWatermarkStr: 'getTextWatermarkStr'
+    }),
+  },
+  methods:{
+    async init(){
+      //将文件转换成blob解决pdfjs引起浏览器崩溃的问题测试
+      let src = this.src
+      if (this.editType !== 'copyNewVersion'){
+        // src += '?timestamp=' + new Date().getTime();
+        src = setTimestamp(src)
+      }
+      this.loadingTask = pdfjsLib.getDocument(src);
+      this.loadingTask.promise.then(async pdf => {
+        // 获取PDF的第一页
+        this.pdfDoc = pdf;
+        this.transport = pdf._transport;
+        // this.numPages = pdf._transport.numPages;
+        this.lazySize = pdf._transport.numPages;
+        this.numPages = Math.min(pdf._transport.numPages, this.lazySize);
+        setTimeout(() => {
+          this._renderPage(1);
+        })
+      })
+    },
+    async _renderPage(num){
+      await this.pdfDoc.getPage(num).then(async page => {
+        let pageMain = document.getElementById('vue-office-pdf-main');
+        const pageDom = document.createElement('div');
+        let id = 'pdf-canvas-' + num;
+        pageDom.setAttribute('id', id);
+        pageDom.setAttribute('class', 'pdf-page');
+
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        let pdfWidth =  page.getViewport({ scale: 1}).width
+        const viewport = page.getViewport({ scale: this.calculateScale(pdfWidth) });
+        // const viewport = page.getViewport({ scale: 2 })
+        let outputScale = this.calculateScale(pdfWidth);
+
+        canvas.width = Math.floor(viewport.width * outputScale);
+        canvas.height = Math.floor(viewport.height * outputScale);
+
+        let domWidth = Math.floor(viewport.width);
+        let domHeight = Math.floor(viewport.height);
+
+        let wrapperWidth = 0
+        if (document.getElementById('vue-office-pdf-main')){
+          wrapperWidth =  document.getElementById('vue-office-pdf-main').clientWidth - 20
+        }
+
+        if (domWidth > wrapperWidth){
+          let scale = wrapperWidth / domWidth;
+          domWidth = Math.floor(wrapperWidth);
+          domHeight = Math.floor(viewport.height * scale);
+        }
+        // 根据缩放比例调整canvas大小
+
+        canvas.style.width = domWidth + 'px';
+        canvas.style.height = domHeight + 'px';
+
+        pageDom.style.width = domWidth + 'px';
+        pageDom.style.height = domHeight + 'px';
+        pageDom.style.position = 'relative';
+        pageDom.style.marginBottom = '10px'
+        pageDom.style.marginLeft = 'auto';
+        pageDom.style.marginRight = 'auto';
+        pageDom.style.backgroundColor = "#ffffff";
+        pageDom.style.boxShadow = "0px 0px 18px 0px rgba(29, 55, 129, 0.07)"
+        pageDom.appendChild(canvas);
+
+        const transform = outputScale !== 1
+            ? [outputScale, 0, 0, outputScale, 0, 0]
+            : null;
+
+        await page.render({
+          canvasContext: context,
+          transform:transform,
+          viewport:viewport
+        }).promise.then(() => {
+          return page.getTextContent()
+        }).then(async (textContent) => {
+          // // 渲染PDF页面到canvas上
+
+          // var textlayerDiv = document.createElement("div");
+          // textlayerDiv.setAttribute('class', 'textLayer');
+          // let textlayer = new TextLayerBuilder({
+          //   textLayerDiv: textlayerDiv,
+          //   viewport: viewport,
+          // });
+          //
+          // textlayer.setTextContent(textContent);
+          // textlayer.render();
+          // pageDom.appendChild(textlayerDiv);
+          //
+          // pageMain.appendChild(pageDom);
+
+          const textDiv = document.createElement('div');
+          textDiv.setAttribute('class', 'textLayer');
+          let textLayer = new TextLayerBuilder({
+            textLayerDiv: textDiv,
+            viewport: viewport,
+            transform:transform,
+          });
+          textDiv.style.width = domWidth + 'px'; // 根据 viewport 调整宽度
+          textDiv.style.height = domHeight + 'px'; // 根据 viewport 调整高度（可能需要根据实际文本内容调整）
+          textDiv.style.overflow = 'hidden'; // 如果文本内容超出范围，则隐藏它
+          textDiv.style.whiteSpace = 'pre-wrap'; // 保留空白符和换行符
+          textDiv.style.position = 'absolute'; // 绝对定位以覆盖 canvas
+          textDiv.style.top = '0';
+          textDiv.style.left = '0';
+          // textDiv.textContent = textContent; // 设置文本内容
+          textLayer.setTextContent(textContent);
+          textLayer.render()
+          // 将文本 div 添加到覆盖层中
+          pageDom.appendChild(textDiv);
+
+          pageMain.appendChild(pageDom);
+          if (this.textWatermarkStr){
+            if(sessionStorage.getItem('isWeChat') == true || sessionStorage.getItem('isWeChat') == 'true') {
+                let str = `<ww-open-data type="userName" openid=${this.textWatermarkStr}></ww-open-data>`
+                waterMark.newInitWaterMark(id,str)
+            } else {
+                waterMark.newInitWaterMark(id,this.textWatermarkStr)
+            }
+          }
+        });
+        // pageMain.appendChild(pageDom);
+        if (this.numPages > num){
+          this._renderPage(num + 1)
+        }
+      })
+    },
+    calculateScale(pdfWidth) {
+      const containerWidth = document.getElementById('vue-office-pdf-main').clientWidth;
+      return (containerWidth / pdfWidth) * this.scale;
+    },
+    onScrollPdf: _.debounce(function (e, that) {
+      const { scrollTop, scrollHeight, clientHeight } = e.target;
+      if (scrollTop + clientHeight >= scrollHeight) {
+        if (that.numPages >= that.pdfDoc._transport.numPages) {
+          return;
+        }
+        let oldNum = that.numPages;
+        that.numPages = Math.min(that.pdfDoc._transport.numPages, oldNum + that.lazySize);
+        if (that.numPages > oldNum) {
+          that._renderPage(oldNum + 1);
+        }
+      }
+    }, 200),
+  },
+  mounted() {
+    this.init();
+    document.getElementById('KnowledgePreview').addEventListener('scroll',(e) => {
+      this.onScrollPdf(e,this)
+    })
+  },
+  destroyed() {
+    if (this.pdfDoc){
+      this.pdfDoc.destroy()
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+.vue-office-pdf{
+  //height: 100%;
+  .vue-office-pdf-main{
+    //height: calc(100% - 20px);
+    //overflow-y: scroll;
+    //background: #ededf0;
+    //background: #ffffff;
+    //padding: 10px 0;
+    position: relative;
+    .pdf-page{
+      background: #ffffff;
+      box-shadow: 0px 0px 18px 0px rgba(29, 55, 129, 0.07)!important;
+      /deep/.textLayer{
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>