From f6c1ba199f20081410d5468170c53261eece8905 Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Wed, 28 Aug 2024 20:27:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=BA=86PDF=E6=8F=92?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E7=9B=B8=E5=85=B3=E8=A1=A8=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue           |   1 +
 src/hooks/init.ts     |  12 +++-
 src/views/miaoPDF.vue | 129 ++++++++++++++++++++++++++++++++++++------
 3 files changed, 122 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a84e60b..256b959 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -332,6 +332,7 @@ $tag-width: 170px;
         .view-container-item {
             flex: 1;
             height: 100%;
+            min-width: 0;
         }
 
         &::-webkit-scrollbar {
diff --git a/src/hooks/init.ts b/src/hooks/init.ts
index b36e1ee..781a206 100644
--- a/src/hooks/init.ts
+++ b/src/hooks/init.ts
@@ -42,16 +42,22 @@ export default function init() {
         'miaoIframe',
         '框架',
         MiaoIframe,
-        (vDirs, vFiles) => {
+        () => {
             return false
         }
     )
     pluginCenter.registerComponent(
         'miaoPDF',
-        'PDF',
+        'PDF浏览',
         MiaoPDF,
         (vDirs, vFiles) => {
-            return true
+            if (vDirs.length !== 0) {
+                return false
+            }
+            if (vFiles.length !== 1) {
+                return false
+            }
+            return vFiles[0].name.endsWith('pdf')
         }
     )
 }
diff --git a/src/views/miaoPDF.vue b/src/views/miaoPDF.vue
index 039b18f..62dda0d 100644
--- a/src/views/miaoPDF.vue
+++ b/src/views/miaoPDF.vue
@@ -1,13 +1,24 @@
 <template>
     <div class="miao-container">
-        <div ref="pdfEl" class="miao-container-pdf"></div>
+        <div class="miao-container-topBar">
+            <div class="miao-container-topBar-btn" @click="() => handleZoom(10)" title="快速缩小">--</div>
+            <div class="miao-container-topBar-btn" @click="() => handleZoom()" title="缩小">-</div>
+            <div class="miao-container-topBar-btn" @click="() => handleResetMargin()" title="还原">还原缩放</div>
+            <div class="miao-container-topBar-btn" @click="() => handleShrink()" title="放大">+</div>
+            <div class="miao-container-topBar-btn" @click="() => handleShrink(10)" title="快速放大">++</div>
+        </div>
+        <NScrollbar>
+            <div ref="pdfEl" class="miao-container-pdf" :style="{ margin: `0 ${pdfMargin}px` }"></div>
+        </NScrollbar>
+        <div class="miao-container-loading" v-if="isLoading">加载中，加载进度：{{ loadingPercent === -1 ? '缓存中' : `${canvasList.length}/${pdfPageCount}` }}</div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, shallowReactive } from 'vue'
 import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker'
 import { VirtualFile } from '@/class/VirtualDirectory'
+import { NScrollbar } from 'naive-ui';
 
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
     required: true
@@ -15,6 +26,41 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
 
 const pdfEl = ref<HTMLDivElement>()
 
+// 通过margin来实现缩小功能
+const pdfMargin = ref<number>(0)
+
+const pdfPageCount = ref<number>(-1)
+
+const isLoading = computed(() => {
+    return canvasList.length !== pdfPageCount.value
+})
+
+const canvasList = shallowReactive<HTMLCanvasElement[]>([])
+
+const handleZoom = (index?: number) => {
+    const _index = index ?? 1
+    pdfMargin.value += 10 * _index
+}
+
+const handleShrink = (index?: number) => {
+    const _index = index ?? 1
+    if (pdfMargin.value - 10 * _index <= 0) {
+        return pdfMargin.value = 0
+    }
+    pdfMargin.value -= 10 * _index
+}
+
+const handleResetMargin = () => {
+    pdfMargin.value = 0
+}
+
+const loadingPercent = computed(() => {
+    if(pdfPageCount.value === -1) {
+        return -1
+    }
+    return canvasList.length / pdfPageCount.value
+})
+
 onMounted(async () => {
     const pdfSrc = currentFiles.value[0].url
     // @ts-ignore
@@ -26,19 +72,17 @@ onMounted(async () => {
     let loadingTask = PDFJS.getDocument({ url: pdfSrc })
     loadingTask.__PDFDocumentLoadingTask = true
     const pdf = await loadingTask.promise // 使用await等待加载完毕
+    pdfPageCount.value = pdf.numPages
     // 循环渲染每一页
     for (let i = 1; i <= pdf.numPages; i++) {
         const page = await pdf.getPage(i)
         let pixelRatio = 3
         let viewport = page.getViewport({ scale: 1 })
-        let divPage = window.document.createElement('div') // canvas的外层div
         // 使用canvas渲染
-        let canvas = divPage.appendChild(
-            window.document.createElement('canvas')
-        )
-        divPage.className = 'page'
+        let canvas = window.document.createElement('canvas')
+        canvasList.push(canvas)
         // @ts-ignore
-        pdfEl.value.appendChild(divPage)
+        pdfEl.value.appendChild(canvas)
         canvas.width = viewport.width * pixelRatio // 计算宽度
         canvas.height = viewport.height * pixelRatio
         let renderContext = {
@@ -47,9 +91,7 @@ onMounted(async () => {
             transform: [pixelRatio, 0, 0, pixelRatio, 0, 0]
         }
         await page.render(renderContext).promise // 一页一页的渲染
-        divPage.className = 'page complete'
     }
-    console.log('pdf页面全部渲染完毕', pdf.numPages, pdf)
 })
 </script>
 
@@ -58,22 +100,75 @@ onMounted(async () => {
     width: 100%;
     height: 100%;
     background-color: rgb(53, 53, 53);
+    overflow-y: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .miao-container-topBar {
+        box-sizing: border-box;
+        padding: 0 30px;
+        height: 30px;
+        width: 100%;
+        background-color: rgb(170, 176, 182);
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        &-btn {
+            cursor: pointer;
+            user-select: none;
+            height: 80%;
+            padding: 0 5px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: larger;
+            letter-spacing: 1px;
+            color: black;
+            border-radius: 5px;
+
+            &:hover {
+                background-color: #eaeaea42;
+            }
+        }
+    }
+
     .miao-container-pdf {
+        min-width: 0;
         max-width: 100%;
         max-height: 100%;
-        overflow: scroll;
         display: flex;
         flex-direction: column;
-        align-items: center;
+
+        .page {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transform: scale(0.5);
+        }
+
+        canvas {
+            width: 100%;
+            height: 100%;
+            border-bottom: 1px solid black;
+        }
     }
-    .page {
+
+    .miao-container-loading {
+        position: absolute;
+        top: 40px;
+        background-color: aliceblue;
+        border: 1px solid black;
+        height: 40px;
+        width: 400px;
+        border-radius: 10px;
         display: flex;
         justify-content: center;
         align-items: center;
-    }
-    canvas {
-        width: 100%;
-        height: 100%;
+        font-size: 20px;
+        letter-spacing: 5px;
+        user-select: none;
     }
 }
 </style>