askbot-dragon 1.8.34-beta → 1.8.35-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "askbot-dragon",
-  "version": "1.8.34-beta",
+  "version": "1.8.35-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/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",
@@ -88,8 +88,7 @@ export default {
       pdf: null,
       numPages: 0,
       scale: 1, // 初始缩小比例
-      renderInProgress: false,
-      pages: [], // { pageNumber: number, loaded: boolean, canvas: ref, loading: boolean }
+      pages: [], // { pageNumber: number, loaded: boolean, canvas: ref, loading: boolean, retryCount: number }
       // 静态高亮（坐标采用顶部为原点）
       highlights: [],
       searchQuery: "",
@@ -164,6 +163,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 => {
@@ -178,6 +178,7 @@ export default {
           loaded: false,
           canvas: null,
           loading: false,
+          retryCount: 0,
         }));
         // 清空搜索高亮
         this.searchHighlights = [];
@@ -204,7 +205,7 @@ export default {
               if (entry.isIntersecting) {
                 const index = Number(entry.target.getAttribute('data-index'));
                 const page = this.pages[index];
-                if (!page.loaded && !page.loading) {
+                if (page && !page.loaded && !page.loading) {
                    this.renderPage(page.pageNumber);
                 }
                 this.updateCurrentPage();
@@ -249,73 +250,189 @@ export default {
         await this.updateCurrentPage();
       }
     },
-    async renderPage(pageNumber) {
-      if (!this.pdf || this.renderInProgress) return;
+    async renderPage(pageNumber, retry = false) {
+      if (!this.pdf) return;
       const pageIndex = pageNumber - 1;
       const pageData = this.pages[pageIndex];
-      if (pageData.loaded) 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
+      if (!pageData) return;
+      
+      // 如果正在加载且不是重试，避免重复渲染
+      if (pageData.loading && !retry) return;
+      // 如果已加载且不是重试，直接返回
+      if (pageData.loaded && !retry) return;
+      
+      // 重试机制：最多重试 3 次
+      const maxRetries = 3;
+      if (retry && pageData.retryCount >= maxRetries) {
+        console.error(`Max retries reached for page ${pageNumber}`);
+        this.$set(pageData, 'loading', false);
+        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,
-          viewport: viewport,
+      
+      this.pageNumber = pageNumber;
+      
+      try {
+        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(`Canvas not found for page ${pageNumber}, will retry...`);
+          // 如果 canvas 不存在，增加重试计数并延迟重试
+          if (!retry) {
+            this.$set(pageData, 'retryCount', (pageData.retryCount || 0) + 1);
+            setTimeout(() => {
+              this.renderPage(pageNumber, true);
+            }, 200);
+          }
+          return;
+        }
+
+        const context = canvas.getContext("2d");
+        if (!context) {
+          console.warn(`Failed to get context for page ${pageNumber}, will retry...`);
+          // 如果无法获取 context，增加重试计数并延迟重试
+          if (!retry) {
+            this.$set(pageData, 'retryCount', (pageData.retryCount || 0) + 1);
+            setTimeout(() => {
+              this.renderPage(pageNumber, true);
+            }, 200);
+          }
+          return;
+        }
+        
+        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);
+        
+        // 清理旧的文本层
+        let hasDoc = document.getElementById('textLayer' + pageNumber);
+        if (hasDoc && hasDoc.parentNode) {
+          hasDoc.parentNode.removeChild(hasDoc);
+        }
+        
+        // 渲染 PDF 页面
+        const renderTask = page.render({ canvasContext: context, viewport });
+        
+        // 等待渲染完成后再处理文本层和高亮
+        await renderTask.promise.then(async () => {
+          // 获取文本内容
+          const textContent = await page.getTextContent();
+          
+          // 创建文本层
+          const textDiv = document.createElement('div');
+          textDiv.setAttribute('class', 'textLayer');
+          textDiv.setAttribute('id', 'textLayer' + pageNumber);
+          let textLayer = new TextLayerBuilder({
+            textLayerDiv: textDiv,
+            pageIndex: pageIndex,
+            viewport: viewport,
+          });
+          
+          // 设置文本层样式 - 移除高度限制和 overflow hidden，避免文字被裁剪
+          textDiv.style.width = `${viewport.width}px`;
+          // 不设置固定高度，让内容自然展开，或者设置为足够大的值
+          // textDiv.style.height = `${viewport.height}px`; // 移除固定高度
+          textDiv.style.minHeight = `${viewport.height}px`; // 使用最小高度
+          textDiv.style.overflow = 'visible'; // 改为 visible，避免裁剪文字
+          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';
+          textDiv.style.pointerEvents = 'none'; // 确保文本层不阻挡交互
+          
+          // 将文本 div 先添加到覆盖层中（TextLayerBuilder 需要 DOM 元素存在）
+          let pagesDiv = document.getElementById('canvas-wrapper' + pageIndex);
+          if (!pagesDiv) {
+            console.warn(`Canvas wrapper not found for page ${pageNumber}`);
+            return;
+          }
+          pagesDiv.appendChild(textDiv);
+          
+          // 设置文本内容并渲染
+          textLayer.setTextContent(textContent);
+          textLayer.render();
+          
+          // 等待文本层渲染完成（使用 nextTick 和 setTimeout 确保 DOM 完全更新）
+          await this.$nextTick();
+          // 额外等待一小段时间，确保 TextLayerBuilder 完成渲染
+          await new Promise(resolve => setTimeout(resolve, 50));
+          
+          // 确保容器有足够的高度来显示所有文本
+          // 获取文本层的实际高度（包括所有子元素）
+          const textLayerHeight = Math.max(
+            textDiv.scrollHeight,
+            textDiv.offsetHeight,
+            viewport.height
+          );
+          
+          // 如果文本层实际高度超过 viewport，调整容器和 canvas 的高度
+          if (textLayerHeight > viewport.height) {
+            // 调整 canvas wrapper 的最小高度
+            if (pagesDiv) {
+              pagesDiv.style.minHeight = `${textLayerHeight}px`;
+            }
+            // 调整 canvas 的显示高度（如果需要）
+            const canvas = pageData.canvas;
+            if (canvas && canvas.parentElement) {
+              canvas.parentElement.style.minHeight = `${textLayerHeight}px`;
+            }
+          }
+          
+          // 在文本层渲染完成后，再渲染高亮区域
+          // 注意：高亮是在 canvas 上绘制的，不会遮挡文本层（文本层在 canvas 上方）
+          // 渲染已有高亮区域（静态highlights）
+          this.renderHighlights(context, pageNumber, viewport);
+          // 渲染搜索高亮区域
+          this.renderSearchHighlights(context, pageNumber, viewport);
+          
+          // 重置重试计数
+          this.$set(pageData, 'retryCount', 0);
+          // 更新页面状态
+          this.$set(pageData, 'loading', false);
+          this.$set(pageData, 'loaded', true);
+        }).catch((error) => {
+          console.error(`Error rendering page ${pageNumber}:`, error);
+          // 如果渲染失败，尝试重试
+          if (!retry && (pageData.retryCount || 0) < maxRetries) {
+            this.$set(pageData, 'retryCount', (pageData.retryCount || 0) + 1);
+            this.$set(pageData, 'loading', false);
+            // 延迟后重试
+            setTimeout(() => {
+              this.renderPage(pageNumber, true);
+            }, 500);
+          } else {
+            // 确保在错误时也更新状态
+            this.$set(pageData, 'loading', false);
+            this.$set(pageData, 'loaded', false);
+          }
         });
-        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);
+      } catch (error) {
+        console.error(`Error loading page ${pageNumber}:`, error);
+        // 如果加载失败，尝试重试
+        if (!retry && (pageData.retryCount || 0) < maxRetries) {
+          this.$set(pageData, 'retryCount', (pageData.retryCount || 0) + 1);
+          this.$set(pageData, 'loading', false);
+          // 延迟后重试
+          setTimeout(() => {
+            this.renderPage(pageNumber, true);
+          }, 500);
+        } else {
+          this.$set(pageData, 'loading', false);
+          this.$set(pageData, 'loaded', false);
+        }
+      }
     },
     calculateScale(pdfWidth) {
       const containerWidth = document.getElementById('pdfViewPage').clientWidth - 50;
@@ -347,6 +464,8 @@ export default {
       });
     },
     drawHighlight(context, viewport, position, fillStyle, fromSearch = false) {
+      if (!context || !position || position.length < 4) return;
+      
       const [x1, y1, x2, y2] = position;
       const scale = viewport.scale;
       const pageHeight = viewport.height / viewport.scale;
@@ -364,16 +483,32 @@ export default {
         canvasY1 = y1 * scale;
         canvasY2 = y2 * scale;
       }
-      // 清除当前路径（如果需要）
-      context.beginPath();
-
-      context.fillStyle = fillStyle;
-      context.fillRect(
-          Math.min(canvasX1, canvasX2),
-          Math.min(canvasY1, canvasY2),
-          Math.abs(canvasX2 - canvasX1),
-          Math.abs(canvasY2 - canvasY1)
-      );
+      
+      // 确保坐标在有效范围内
+      const minX = Math.min(canvasX1, canvasX2);
+      const minY = Math.min(canvasY1, canvasY2);
+      const width = Math.abs(canvasX2 - canvasX1);
+      const height = Math.abs(canvasY2 - canvasY1);
+      
+      // 检查坐标是否在 canvas 范围内
+      if (minX < 0 || minY < 0 || minX + width > viewport.width || minY + height > viewport.height) {
+        // 如果超出范围，进行裁剪
+        const clippedX = Math.max(0, minX);
+        const clippedY = Math.max(0, minY);
+        const clippedWidth = Math.min(width, viewport.width - clippedX);
+        const clippedHeight = Math.min(height, viewport.height - clippedY);
+        
+        if (clippedWidth > 0 && clippedHeight > 0) {
+          context.beginPath();
+          context.fillStyle = fillStyle;
+          context.fillRect(clippedX, clippedY, clippedWidth, clippedHeight);
+        }
+      } else {
+        // 正常绘制
+        context.beginPath();
+        context.fillStyle = fillStyle;
+        context.fillRect(minX, minY, width, height);
+      }
     },
     handleFileUpload(event) {
       const file = event.target.files[0];
@@ -384,10 +519,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 元素进行进一步的处理或封装。
+      // 使用 $nextTick 确保 DOM 已更新
+      await this.$nextTick();
+      
+      // 如果 refs 还没有准备好，等待一段时间后重试
+      if (!this.$refs.canvases || this.$refs.canvases.length === 0) {
+        return new Promise((resolve) => {
+          setTimeout(async () => {
+            await this.setCanvasRef();
+            resolve();
+          }, 100);
+        });
+      }
+      
+      // 设置 canvas 引用
+      this.pages.forEach((page, index) => {
+        if (this.$refs.canvases && this.$refs.canvases[index]) {
+          this.$set(this.pages[index], 'canvas', this.$refs.canvases[index]);
+        } else {
+          console.warn(`Canvas ref not found for page ${index + 1}`);
+        }
       });
     },
     clearPages() {
@@ -469,7 +620,9 @@ export default {
     },
     zoomIn() {
       this.updateCurrentPage();
-      if (this.renderInProgress) return;
+      // 检查是否有页面正在加载
+      const hasLoadingPage = this.pages.some(p => p.loading);
+      if (hasLoadingPage) return;
       const container = this.$refs.pdfContainer;
       const currentScroll = container.scrollTop;
       this.scale += 0.1;
@@ -477,7 +630,9 @@ export default {
     },
     zoomOut() {
       this.updateCurrentPage();
-      if (this.renderInProgress) return;
+      // 检查是否有页面正在加载
+      const hasLoadingPage = this.pages.some(p => p.loading);
+      if (hasLoadingPage) return;
       const container = this.$refs.pdfContainer;
       const currentScroll = container.scrollTop;
       this.scale = Math.max(this.scale - 0.1, 0.1);
@@ -487,10 +642,11 @@ export default {
       const pages = Vue.observable(this.pages)
       pages.forEach((p) => {
         p.loaded = false;
-        this.$set(p,'loading',false)
+        this.$set(p, 'loading', false);
+        this.$set(p, 'retryCount', 0);
         if (p.canvas) {
           const ctx = p.canvas.getContext('2d');
-          ctx.clearRect(0,0,p.canvas.width,p.canvas.height);
+          ctx.clearRect(0, 0, p.canvas.width, p.canvas.height);
         }
       });
 
@@ -522,7 +678,9 @@ export default {
     },
     async doSearch() {
       if (!this.pdf || !this.searchQuery) return;
-      if (this.renderInProgress) return;
+      // 检查是否有页面正在加载
+      const hasLoadingPage = this.pages.some(p => p.loading);
+      if (hasLoadingPage) return;
 
       this.searchHighlights = [];
       const numPages = this.numPages;
@@ -585,7 +743,8 @@ export default {
       const currentScroll = container.scrollTop;
       this.pages.forEach((p) => {
         p.loaded = false;
-        this.$set(p,'loading',false)
+        this.$set(p, 'loading', false);
+        this.$set(p, 'retryCount', 0);
         if (p.canvas) {
           const ctx = p.canvas.getContext("2d");
           ctx.clearRect(0, 0, p.canvas.width, p.canvas.height);
@@ -615,16 +774,19 @@ export default {
     onResize() {
       clearTimeout(this.resizeTimeout);
       this.resizeTimeout = setTimeout(() => {
-        if (this.renderInProgress) return;
+        // 检查是否有页面正在加载
+        const hasLoadingPage = this.pages.some(p => p.loading);
+        if (hasLoadingPage) 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)
+          this.$set(p, 'loading', false);
+          this.$set(p, 'retryCount', 0);
           if (p.canvas) {
             const ctx = p.canvas.getContext('2d');
-            ctx.clearRect(0,0,p.canvas.width,p.canvas.height);
+            ctx.clearRect(0, 0, p.canvas.width, p.canvas.height);
           }
         });
         this.$nextTick(() => {
@@ -712,11 +874,15 @@ export default {
   display: flex;
   justify-content: center;
   width: 100%;
+  min-height: fit-content; /* 确保容器能容纳所有内容 */
+  overflow: visible; /* 允许内容超出，避免裁剪 */
 }
 
 .canvas-wrapper {
   position: relative;
   width: 100%;
+  min-height: 100%; /* 确保容器有足够高度 */
+  overflow: visible; /* 允许内容超出，避免裁剪 */
 }
 
 /* 在loading时覆盖canvas显示加载动画 */