feat: 帮助文档PDF查看器

package.json

@@ -17,6 +17,7 @@
     "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/merge": "^6.1.2",
     "@codemirror/theme-one-dark": "^6.1.2",
+    "@tato30/vue-pdf": "^1.8.1",
     "@vueuse/components": "^10.6.1",
     "@vueuse/core": "^10.6.1",
     "ant-design-vue": "^3.2.20",

src/views/system/setting/components/change-help-doc.vue

@@ -161,7 +161,7 @@ onMounted(() => {
 
         <template v-else>
           <a-form-item>
-            <a-space direction="horizontal" :size="18">
+            <a-space direction="horizontal" :size="16">
               <a-select
                 v-model:value="state.language"
                 style="width: 100px"
@@ -178,8 +178,8 @@ onMounted(() => {
               <a-button type="link" @click="fnClickHelpDoc(state.language)">
                 <template #icon>
                   <QuestionCircleOutlined />
-                  {{ t('views.system.setting.sysHelpDocOpen') }}
                 </template>
+                {{ t('views.system.setting.sysHelpDocOpen') }}
               </a-button>
             </a-space>
           </a-form-item>

src/views/tool/help/index.vue

@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import useAppStore from '@/store/modules/app';
 import useI18n from '@/hooks/useI18n';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { computed } from 'vue';
+import { VuePDF, usePDF } from '@tato30/vue-pdf';
+import '@tato30/vue-pdf/style.css';
+import saveAs from 'file-saver';
 const { t, currentLocale } = useI18n();
 const appStore = useAppStore();
 const route = useRoute();
-const height = ref<string>(document.documentElement.clientHeight + 'px');
 
 // 文档地址
 const docUrl = computed(() => {
@@ -20,6 +21,7 @@ const docUrl = computed(() => {
   const lang = local.split('_')[0];
   return url.replace('{language}', lang);
 });
+const { pdf, pages } = usePDF(docUrl.value);
 
 /**
  * 国际化翻译转换
@@ -32,21 +34,179 @@ function fnLocale() {
   appStore.setTitle(title);
 }
 
+// annotation层
+function fnAnnotation(obj: any) {
+  const page = obj.data?.referencedPage;
+  if (page && typeof page === 'number') {
+    viewPage.value = page;
+  }
+}
+
+/**视图页数 */
+const viewPage = ref<number>(1);
+function fnToPage(value: number) {
+  if (viewPage.value === value) return;
+  viewPage.value = value;
+}
+
+/**视图缩放 */
+const viewScale = ref<number>(1);
+function fnScaleView(value: number) {
+  viewScale.value += value;
+  if (viewScale.value <= 0.25) {
+    viewScale.value = 0.25;
+    return;
+  }
+  if (viewScale.value > 2) {
+    viewScale.value = 2;
+    return;
+  }
+}
+
+/**文件下载 */
+function fnDownload() {
+  const url = docUrl.value;
+  fetch(url)
+    .then(response => response.blob())
+    .then(blob => {
+      const fileName = url.substring(url.lastIndexOf('/') + 1);
+      saveAs(blob, fileName);
+    })
+    .catch(error => {
+      console.error('Error:', error);
+    });
+}
+
+/**系统使用手册跳转 */
+function fnClickHelpDoc() {
+  window.open(docUrl.value, '_blank');
+}
+
 onMounted(() => {
   fnLocale();
 });
 </script>
 
 <template>
-  <a-spin style="margin: 0 50%" v-if="docUrl === '#'" />
-  <div :style="'height:' + height" v-else>
+  <a-row>
+    <a-col :span="24" class="header">
+      <a-space :size="12" align="center">
+        <div class="header-scale">
+          <a-button type="default" shape="circle" @click="fnScaleView(-0.25)">
+            <template #icon><ZoomOutOutlined /></template>
+          </a-button>
+          <span>{{ viewScale * 100 }}%</span>
+          <a-button type="default" shape="circle" @click="fnScaleView(0.25)">
+            <template #icon><ZoomInOutlined /></template>
+          </a-button>
+        </div>
+      </a-space>
+      <a-space :size="12" align="center">
+        <a-button type="default" @click="fnClickHelpDoc()">
+          <template #icon><ToTopOutlined /> </template>
+          浏览器内打开
+        </a-button>
+        <a-button type="primary" @click="fnDownload()">
+          <template #icon><DownloadOutlined /></template>
+          下载
+        </a-button>
+      </a-space>
+    </a-col>
+    <a-col :span="4" class="left">
+      <template v-for="page in pages" :key="page">
+        <div
+          class="left-view"
+          :class="{ 'left-view_action': page === viewPage }"
+          @click="fnToPage(page)"
+        >
+          <VuePDF :pdf="pdf" :page="page" :scale="0.2" text-layer />
+          <div>{{ page }}</div>
+        </div>
+      </template>
+    </a-col>
+    <a-col :span="20" class="right">
+      <div class="right-view">
+        <VuePDF
+          :pdf="pdf"
+          :page="viewPage"
+          :scale="viewScale"
+          annotation-layer
+          :annotations-filter="['Link']"
+          @annotation="fnAnnotation"
+        >
+          <a-spin style="margin: 50%" />
+        </VuePDF>
+      </div>
+    </a-col>
+  </a-row>
+
+  <!-- <a-spin style="margin: 0 50%" v-if="docUrl === '#'" /> -->
+  <!-- <div :style="'height:' + height" v-else>
     <iframe
       :src="docUrl"
       frameborder="no"
       style="width: 100%; height: 100%"
       scrolling="auto"
     ></iframe>
-  </div>
+  </div> -->
 </template>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.header {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 24px;
+  background-color: #323639;
+  color: white;
+  &-scale {
+    background: rgba(0, 0, 0, 0.24);
+    border-radius: 10px;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    width: 140px;
+    align-items: center;
+    & > span {
+      font-weight: 600;
+    }
+  }
+}
+
+.left {
+  overflow-y: auto;
+  height: calc(100vh - 56px);
+  padding: 20px 0;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  align-items: center;
+  background-color: #323639;
+
+  &-view {
+    text-align: center;
+    width: 160px;
+    padding: 10px 20px;
+    border: 4px transparent solid;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    color: white;
+    transform: border;
+  }
+
+  &-view_action {
+    border: 4px #8ab4f8 solid;
+  }
+}
+
+.right {
+  overflow-y: auto;
+  height: calc(100vh - 56px);
+  background-color: #525659;
+
+  &-view {
+    display: flex;
+    justify-content: center;
+    margin: 0 auto;
+  }
+}
+</style>