feat(page): 新增通用 pdf 预览页面

package.json

@@ -83,9 +83,11 @@
         "dayjs": "^1.11.6",
         "lodash-es": "^4.17.21",
         "mockjs": "^1.1.0",
+        "nanoid": "^4.0.0",
         "pinia": "^2.0.23",
         "qs": "~6.9.7",
         "stompjs": "^2.3.3",
+        "urijs": "^1.19.11",
         "vue": "3.2.41",
         "vue-i18n": "^9.2.2",
         "vue-types": "^4.2.1"
@@ -103,6 +105,7 @@
         "@types/prettier": "^2.7.1",
         "@types/qs": "^6.9.7",
         "@types/stompjs": "^2.3.5",
+        "@types/urijs": "^1.19.19",
         "@typescript-eslint/eslint-plugin": "^5.42.1",
         "@typescript-eslint/parser": "^5.42.1",
         "commitizen": "^4.2.5",

pnpm-lock.yaml

@@ -26,6 +26,7 @@ specifiers:
   '@types/prettier': ^2.7.1
   '@types/qs': ^6.9.7
   '@types/stompjs': ^2.3.5
+  '@types/urijs': ^1.19.19
   '@typescript-eslint/eslint-plugin': ^5.42.1
   '@typescript-eslint/parser': ^5.42.1
   '@vue/runtime-core': 3.2.41
@@ -48,6 +49,7 @@ specifiers:
   lint-staged: ^13.0.3
   lodash-es: ^4.17.21
   mockjs: ^1.1.0
+  nanoid: ^4.0.0
   npm-run-all: ^4.1.5
   picocolors: ^1.0.0
   pinia: ^2.0.23
@@ -72,6 +74,7 @@ specifiers:
   typescript: ^4.8.4
   unplugin-auto-import: ^0.11.4
   unplugin-vue-components: ^0.22.9
+  urijs: ^1.19.11
   vite: 3.2.2
   vue: 3.2.41
   vue-eslint-parser: ^9.1.0
@@ -98,9 +101,11 @@ dependencies:
   dayjs: 1.11.6
   lodash-es: 4.17.21
   mockjs: 1.1.0
+  nanoid: 4.0.0
   pinia: 2.0.23_l7r24p6nevbtlimqmqcwa3ouhu
   qs: 6.9.7
   stompjs: 2.3.3
+  urijs: 1.19.11
   vue: 3.2.41
   vue-i18n: 9.2.2_vue@3.2.41
   vue-types: 4.2.1_vue@3.2.41
@@ -118,6 +123,7 @@ devDependencies:
   '@types/prettier': 2.7.1
   '@types/qs': 6.9.7
   '@types/stompjs': 2.3.5
+  '@types/urijs': 1.19.19
   '@typescript-eslint/eslint-plugin': 5.42.1_2udltptbznfmezdozpdoa2aemq
   '@typescript-eslint/parser': 5.42.1_rmayb2veg2btbq6mbmnyivgasy
   commitizen: 4.2.5
@@ -1418,6 +1424,10 @@ packages:
       '@types/node': 18.11.9
     dev: true
 
+  /@types/urijs/1.19.19:
+    resolution: {integrity: sha512-FDJNkyhmKLw7uEvTxx5tSXfPeQpO0iy73Ry+PmYZJvQy0QIWX8a7kJ4kLWRf+EbTPJEPDSgPXHaM7pzr5lmvCg==}
+    dev: true
+
   /@types/web-bluetooth/0.0.16:
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
 
@@ -4722,6 +4732,12 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  /nanoid/4.0.0:
+    resolution: {integrity: sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==}
+    engines: {node: ^14 || ^16 || >=18}
+    hasBin: true
+    dev: false
+
   /natural-compare-lite/1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
     dev: true
@@ -6498,6 +6514,10 @@ packages:
       punycode: 2.1.1
     dev: true
 
+  /urijs/1.19.11:
+    resolution: {integrity: sha512-HXgFDgDommxn5/bIv0cnQZsPhHDA90NPHD6+c/v21U5+Sx5hoP8+dP9IZXBU1gIfvdRfhG8cel9QNPeionfcCQ==}
+    dev: false
+
   /user-home/2.0.0:
     resolution: {integrity: sha512-KMWqdlOcjCYdtIJpicDSFBQ8nFwS2i9sslAd6f4+CBGcU4gist2REnr2fxj2YocvJFxSF3ZOHLYLVZnUxv4BZQ==}
     engines: {node: '>=0.10.0'}

src/components/Empty/index.vue

+<template>
+    <view class="empty" :style="[{ background: bgColor }]">
+        <!-- 暂无数据/空数据 -->
+        <image src="../../static/images/empty.png" />
+        <!-- 提示内容 -->
+        <view class="empty-tips" :style="[{ color: tipsColor }]">{{ tips }}</view>
+    </view>
+</template>
+<script>
+    export default {
+        props: {
+            tips: {
+                type: String,
+                default: '',
+            },
+            tipsColor: {
+                type: String,
+                default: '#9C9C9C',
+            },
+            bgColor: {
+                type: String,
+                default: 'transparent',
+            },
+        },
+    }
+</script>
+<style>
+    .empty {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .empty image {
+        display: flex;
+        width: 500rpx;
+        height: 500rpx;
+    }
+
+    .empty .empty-tips {
+        display: flex;
+        font-size: 30rpx;
+        color: #999999;
+    }
+</style>

src/pages.json

@@ -8,6 +8,15 @@
             }
         },
 
+        // === PDF 文件预览 ===
+        {
+            "path": "pages/common/pdf/pdf-viewer",
+            "style": {
+                "titleNView": true,
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+        },
         // === 空页面（开发中...） ===
         {
             "path": "pages/common/coding/coding",

src/pages/common/pdf/pdf-viewer.vue

+<script lang="ts" setup>
+    import URI from 'urijs'
+    import { getExtranetUrl } from '/@/utils/proxy'
+
+    const link = ref<string>('')
+    const name = ref<string>('')
+    onLoad(({ uri }) => {
+        link.value = getExtranetUrl(uri)
+        name.value = URI(uri).filename()
+        console.log(uri, link.value, name.value)
+
+        // 设置标题栏为文件名
+        uni.setNavigationBarTitle({
+            title: decodeURI(name.value),
+        })
+    })
+
+    const images = computed(() => {
+        const size = link.value.replace(/^.*\.P(\d+)\..*$/, '$1')
+        if (size === link.value) {
+            return []
+        }
+
+        return Array(Number(size))
+            .fill(0)
+            .map((_, index) => ({
+                src: `${link.value}.${index + 1}.jpg`,
+            }))
+    })
+
+    const preview = (index: number) => {
+        uni.previewImage({
+            urls: images.value.map((item: { src: string }) => item.src),
+            current: index,
+        })
+    }
+</script>
+
+<template>
+    <view class="wrap">
+        <template v-if="images.length > 0">
+            <fui-lazyload
+                class="image"
+                v-for="(item, index) in images"
+                :key="item.src"
+                :src="item.src"
+                width="750"
+                :radius="0"
+                @tap="preview(index)"
+            />
+        </template>
+
+        <!-- empty -->
+        <view class="empty-wrap" v-else>
+            <Empty tips="资源不见了~" />
+        </view>
+    </view>
+</template>
+
+<style lang="less" scoped>
+    .image {
+        height: auto;
+
+        + .image {
+            margin-top: 4rpx;
+        }
+    }
+
+    .empty-wrap {
+        height: calc(100vh - 44px - var(--status-bar-height) - env(safe-area-inset-top));
+    }
+</style>

types/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    Empty: typeof import('./../src/components/Empty/index.vue')['default']
     FDragItem: typeof import('./../src/components/firstui/fui-drag/f-drag-item.vue')['default']
     FIndexListItem: typeof import('./../src/components/firstui/fui-index-list/f-index-list-item.vue')['default']
     FuiActionsheet: typeof import('./../src/components/firstui/fui-actionsheet/fui-actionsheet.vue')['default']