fix: 修复PDF加载报错前端无感知的问题

新增PDF加载状态处理，添加错误提示

src/components/pdf-viewer/PDFViewer.vue

@@ -2,17 +2,27 @@
     <div class="pdf-container" ref="box">
         
     </div>
-    <div class="loading-pdf-box" v-if="is_loading">
+    <div class="loading-pdf-box" v-if="load_status === 2">
         <div class="loading-spin">
             <a-spin :size="36"/>
         </div>
     </div>
+
+    <div class="loading-pdf-box" v-if="load_status === 4">
+        <a-result status="error" title="文档加载出错">
+            <template #subtitle>
+                {{load_msg}}
+            </template>
+        </a-result>
+    </div>
 </template>
 <script setup>
 import { defineComponent, inject, ref, useTemplateRef, watchEffect, onMounted} from "vue";
 
 import PDFJS from './pdfjs';
 
+import { Message } from '@arco-design/web-vue';
+
 /**
  * 接收一个路径
  * 此路径指向PDF文件
@@ -46,7 +56,15 @@ const props = defineProps({
 
 const box = useTemplateRef('box');
 
-const is_loading = ref(true);
+/**
+ * 记录PDF文档加载过程中的状态
+ * 1 默认值，未开始加载
+ * 2 正在加载中
+ * 3 加载成功
+ * 4 加载出错
+ */
+const load_status = ref(1); // 1 默认值，未启动 2 加载中 3 成功 5 出错
+const load_msg = ref(''); // 加载消息
 
 /**
  * 处理高亮区域
@@ -106,6 +124,9 @@ function getPageHeight(viewWidth, viewHeight){
 }
 
 onMounted(() => {
+    load_status.value = 2; // 加载中
+    load_msg.value = 'loading';
+
     PDFJS.getDocument(props.url).promise.then(async pdfDoc => {
         const page_total = pdfDoc.numPages;
 
@@ -173,7 +194,9 @@ onMounted(() => {
         }
 
         // 所有页面都加载完毕，结束加载状态
-        is_loading.value = false;
+        load_status.value = 3; // 加载成功
+        load_msg.value = 'success';
+
 
         // TODO: 优化跳转效果：平滑跳转
         if(min_page !== -1){
@@ -181,7 +204,13 @@ onMounted(() => {
                 box.value.scrollTop = height_list[min_page - 1]
             });
         }
-    })
+    }).catch(err => {
+        console.log(err, 'PDF加载出错');
+        // Message.error(err.message);
+
+        load_status.value = 4; // 加载出错
+        load_msg.value = `PDF文档 ${props.url} 加载出错。 ERROR: ：${err.message}`;
+    });
 })
 
 </script>