feat: 完善文档引用效果

1. 调整pdf文档显示宽度
2. pdf文档跳转到高亮页面
3. pdf文档禁用右键

src/components/pdf-viewer/PDFViewer.vue

@@ -2,6 +2,11 @@
     <div class="pdf-container" ref="box">
         
     </div>
+    <div class="loading-pdf-box" v-if="is_loading">
+        <div class="loading-spin">
+            <a-spin :size="36"/>
+        </div>
+    </div>
 </template>
 <script setup>
 import { defineComponent, inject, ref, useTemplateRef, watchEffect, onMounted} from "vue";
@@ -20,6 +25,8 @@ const props = defineProps({
 
 const box = useTemplateRef('box');
 
+const is_loading = ref(true);
+
 /**
  * 处理高亮区域
  */
@@ -55,7 +62,9 @@ const highlight_pos = (() => {
     return mp;
 })();
 
-
+/**
+ * 绘制高亮区域
+ */
 function drawHighLight(ctx, x1, x2, y1, y2){
     // 设置矩形的样式
     ctx.fillStyle = 'rgba(255, 255, 0, 0.5)';  // 填充颜色
@@ -70,7 +79,7 @@ function drawHighLight(ctx, x1, x2, y1, y2){
 }
 
 function getPageHeight(viewWidth, viewHeight){
-    const height = propd.doc_width/ (viewWidth/viewHeight);
+    const height = props.doc_width/ (viewWidth/viewHeight);
 
     return height;
 }
@@ -86,50 +95,70 @@ onMounted(() => {
 
         for(let i = 1; i <= page_total; i++){
             const canvas = document.createElement('canvas');
+            // 设置事件监听器来阻止默认的右键菜单
+            canvas.addEventListener('contextmenu', function(e) {
+                e.preventDefault();
+            });
+
             const pdfCtx = canvas.getContext('2d')
 
             const page = await pdfDoc.getPage(i);
 
-            const viewport = page.getViewport({ scale: 1 })
+            // 获取原始页面的大小
+            const viewport1 = page.getViewport({ scale: 1 })
+
+            // 原始宽度和高度
+            const cur_width = viewport1.width;
+            const cur_height = viewport1.height;
+
+            // 目标宽度和高度
+            const target_width = props.doc_width;
+            const target_height = target_width/(cur_width/cur_height);
 
+            // 获取到缩放比例
+            const scale_value = target_width/cur_width;
+
+            // 根据缩放比例，重新获取viewport值
+            const viewport2 = page.getViewport({ scale: scale_value });
+
+            // 收集每个文档页面起始位置高度
             height_list.push(height_total);
 
-            canvas.width = viewport.width;
-            canvas.height = viewport.height;
+            canvas.width = target_width
+            canvas.height = target_height; // viewport.height
 
             height_total = height_total + canvas.height;
-
-            // canvas.width = viewport.width
-            // canvas.height = getPageHeight(viewport.width, viewport.height); // viewport.height
                         
-            page.render({
-                viewport,
+            await page.render({
+                viewport: viewport2,
                 canvasContext: pdfCtx,
             })
-            .promise.then(() => {
-                if(i in highlight_pos){
-                    const pos_info = highlight_pos[i];
-
-                    // 记录第一个要跳转的页码
-                    if(min_page === -1){
-                        min_page = i;
-                    }
-
-                    pos_info.forEach((psinfo) => {
-                        drawHighLight(pdfCtx, psinfo.x1, psinfo.x2, psinfo.y1, psinfo.y2);
-                    });
+            .promise;
+
+            if(i in highlight_pos){
+                const pos_info = highlight_pos[i];
+
+                // 记录第一个要跳转的页码
+                if(min_page === -1){
+                    min_page = i;
                 }
 
-                box.value.appendChild(canvas);
-            })
+                pos_info.forEach((psinfo) => {
+                    drawHighLight(pdfCtx, psinfo.x1, psinfo.x2, psinfo.y1, psinfo.y2);
+                });
+            }
+
+            box.value.appendChild(canvas);
         }
 
-        // TODO: 跳转页面
+        // 所有页面都加载完毕，结束加载状态
+        is_loading.value = false;
+
+        // TODO: 优化跳转效果：平滑跳转
         if(min_page !== -1){
-            console.log(height_list, 'h-list');
             setTimeout(() => {
-                box.value.scrollTop = height_list[min_page]
-            }, 50);
+                box.value.scrollTop = height_list[min_page - 1]
+            });
         }
     })
 })
@@ -138,7 +167,25 @@ onMounted(() => {
 <style scoped>
 .pdf-container{
     text-align: center;
-    /* height: 100vh;
-    overflow-y: auto; */
+    height: 100vh;
+    overflow-y: auto;
+}
+
+.loading-pdf-box{
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: #fff;
+}
+
+.loading-spin{
+    width: 40px;
+    height: 40px;
 }
 </style>

src/components/refference-effect/RefferenceFlag.vue

@@ -5,7 +5,6 @@
 
             <template #title></template>
             <template #content>
-                <!-- <p>Here is the text content</p> -->
                 <div class="ref-text-content">
                     {{text}}
                 </div>
@@ -14,19 +13,26 @@
             </template>
         </a-popover>
 
-        <a-drawer :width="DOC_WIDTH" :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
+        <a-drawer ref="drawer" :width="DOC_WIDTH" :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose :data-flag="'doc-ref-effect-contaienr'" :footer="false">
+            <template #title>
+                {{doc_name}}
+            </template>
+
             <PDFViewer :url="pdf_url" :doc_width="DOC_WIDTH" :positions="positions"/>
         </a-drawer>
     </span>
 </template>
 <script setup>
-import { defineComponent, inject, ref } from "vue";
+import { defineComponent, inject, ref, useTemplateRef } from "vue";
 
 import PDFViewer from '../pdf-viewer/PDFViewer.vue';
 
 import FileNameDisplay from '../file/FileNameDisplay.vue';
 
-// https://arco.design/vue/component/popover
+/**
+ * 此页面可能用到的文档
+ * @see https://arco.design/vue/component/popover
+ */
 
 const props = defineProps({
     img: String, // 图片链接
@@ -36,8 +42,8 @@ const props = defineProps({
     positions: Array
 });
 
-const DOC_WIDTH = 620;
-// const DOC_WIDTH = window.innerWidth/2;
+// const DOC_WIDTH = 620;
+const DOC_WIDTH = window.innerWidth/2;
 
 // http://192.168.20.119:11080/v1/document/get/
 const pdf_url = ref(`http://192.168.20.119:11080/v1/document/get/${props.doc_id}`);
@@ -68,3 +74,8 @@ const handleCancel = () => {
     overflow-y: auto;
 }
 </style>
+<style>
+.arco-drawer-container[data-flag=doc-ref-effect-contaienr] .arco-drawer-body{
+    overflow: hidden;
+}
+</style>