feat(组件): 添加PdfPreview组件并集成到StudyDetailPage

将PDF预览功能从StudyDetailPage中抽离到独立的PdfPreview组件，提高代码复用性和可维护性

@@ -20,6 +20,7 @@ declare module 'vue' {
     GradientHeader: typeof import('./components/ui/GradientHeader.vue')['default']
     LiveStreamCard: typeof import('./components/ui/LiveStreamCard.vue')['default']
     MenuItem: typeof import('./components/ui/MenuItem.vue')['default']
+    PdfPreview: typeof import('./components/ui/PdfPreview.vue')['default']
     PdfViewer: typeof import('./components/ui/PdfViewer.vue')['default']
     ReviewPopup: typeof import('./components/courses/ReviewPopup.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

+<!--
+ * @Date: 2024-01-17
+ * @Description: PDF预览组件
+-->
+<template>
+    <van-popup v-if="show" :show="show" @update:show="emit('update:show', $event)" position="right" :style="{ height: '100%', width: '100%' }">
+        <div id="pdf-container"></div>
+        <van-button class="close-btn" type="default" icon="cross" round @click="emit('update:show', false)" />
+    </van-popup>
+</template>
+
+<script setup>
+import { ref, nextTick, onMounted } from 'vue';
+import { initPdfView, configPdfApiOptions } from "@sunsetglow/vue-pdf-viewer";
+import "@sunsetglow/vue-pdf-viewer/dist/style.css";
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false
+    },
+    url: {
+        type: String,
+        default: ''
+    }
+});
+
+const emit = defineEmits(['update:show']);
+
+// PDF Worker路径
+const pdfPath = new URL("@sunsetglow/vue-pdf-viewer/dist/libs/pdf.worker.min.js", import.meta.url).href;
+
+// 监听show属性变化
+watch(() => props.show, (newVal) => {
+    if (newVal && props.url) {
+        initPdfViewer();
+    }
+});
+
+// 初始化PDF预览
+// 查看文档 https://www.npmjs.com/package/@sunsetglow/vue-pdf-viewer
+const initPdfViewer = () => {
+    nextTick(() => {
+        initPdfView(document.querySelector("#pdf-container"), {
+            loadFileUrl: props.url,
+            pdfPath: pdfPath,
+            loading: (load, fileInfo) => {
+                if (!load) {
+                    configPdfApiOptions.onSearch("", false);
+                }
+            },
+            pdfOption: {
+                search: false,
+                scale: true,
+                pdfImageView: false,
+                page: true,
+                navShow: true,
+                navigationShow: false,
+                pdfViewResize: true,
+                toolShow: true,
+                download: true,
+                clearScale: 1.5,
+                fileName: "preview.pdf",
+                lang: "en",
+                print: true,
+                watermarkOptions: undefined
+            }
+        });
+    });
+};
+</script>
+
+<style scoped>
+#pdf-container {
+  width: 100%;
+  padding: 0px;
+  height: 100%;
+}
+
+.close-btn {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 100;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+}
+</style>

@@ -225,9 +225,7 @@
         </van-popup>
 
         <!-- PDF预览 -->
-        <van-popup v-model:show="pdfShow" position="right" closeable :style="{ height: '100%', width: '100%' }">
-            <div id="pdf-container"></div>
-        </van-popup>
+        <PdfPreview v-model:show="pdfShow" :url="pdfUrl" />
     </div>
 </template>
 
@@ -240,8 +238,7 @@ import AudioPlayer from '@/components/ui/AudioPlayer.vue';
 import dayjs from 'dayjs';
 import { formatDate } from '@/utils/tools'
 
-import { initPdfView, configPdfApiOptions, configOption } from "@sunsetglow/vue-pdf-viewer";
-import "@sunsetglow/vue-pdf-viewer/dist/style.css";
+import PdfPreview from '@/components/ui/PdfPreview.vue';
 
 // 导入接口
 import { getScheduleCourseAPI, getGroupCommentListAPI, addGroupCommentAPI, addGroupCommentLikeAPI, delGroupCommentLikeAPI, getCourseDetailAPI } from '@/api/course';
@@ -358,69 +355,13 @@ const handleLessonClick = async (lesson) => {
     }
 };
 
-const loading = ref(false);
-const pdfPath = new URL("@sunsetglow/vue-pdf-viewer/dist/libs/pdf.worker.min.js", import.meta.url).href;
 const pdfShow = ref(false);
+const pdfUrl = ref('');
 
 const showPdf = (url) => {
+    pdfUrl.value = url;
     pdfShow.value = true;
-    // 初始化pdf
-    setTimeout(() => {
-        nextTick(() => {
-            loading.value = true;
-            initPdfView(document.querySelector("#pdf-container"), {
-                loadFileUrl: url, //文件路径
-                pdfPath: pdfPath, // pdf.js 里需要指定的文件路径
-                loading: (load, fileInfo) => {
-                    loading.value = load;
-                    console.log(`pdf 文件总数：${fileInfo.totalPage}`);
-                    //加载完成会返回 false
-                    configPdfApiOptions.onSearch("", false);
-                },
-                pdfOption: {
-                    // search: true, // 搜索 开启搜索必须开启textLayer 为true
-                    scale: true, //缩放
-                    pdfImageView: false, //pdf 是否可以单片点击预览
-                    page: true, //分页查看
-                    navShow: true, //左侧导航
-                    navigationShow: false, // 左侧导航是否开启
-                    pdfViewResize: true, // 是否开启resize 函数 确保pdf 根据可视窗口缩放大小
-                    toolShow: true, // 是否开启顶部导航
-                    download: true, //下载
-                    clearScale: 1.5, // 清晰度 默认1.5 感觉不清晰调大 ,当然清晰度越高pdf生成性能有影响
-                    fileName: "preview.pdf", // pdf 下载文件名称
-                    lang: "en", //字典语言
-                    print: true, //打印功能
-                    customPdfOption: {
-                        // customPdfOption是 pdfjs getDocument 函数中一些配置参数 具体可参考 https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html#~DocumentInitParameters
-                        cMapPacked: true, //指定 CMap 是否是二进制打包的
-                        cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/", //预定义 Adob​​e CMaps 所在的 URL。可解决字体加载错误
-                    },
-                    textLayer: true, //文本是否可复制 ， 文本复制和点击查看大图冲突建议把 pdfImageView 改为false
-                    pageOption: {
-                        current: 1, //当前页码
-                    },
-                    renderTotalPage: 5, //是否渲染指定页面总数，-1 则默认渲染文件总数，如果传5 则渲染前五页
-                    // 不传默认是 0.5
-                    visibleWindowPageRatio: 0.5, //当前pdf页面在可视窗口多少比例触发分页 传入0.5 就是 （pdf下一页滚动到容器高度一半的时候 更新当前页码）
-                    containerWidthScale: 0.97, //pdf 文件占父元素容器width的比例 默认是0.8
-                    pdfItemBackgroundColor: "#fff", //pdf 加载时背景颜色 默认#ebebeb
-                    watermarkOptions: {
-                        //水印功能
-                        columns: 3, //列数量
-                        rows: 4, // 行数量
-                        color: "#2f7a54", //字体颜色
-                        rotation: 25, //旋转角度
-                        fontSize: 40, //字体大小
-                        opacity: 0.4, //调整透明度
-                        // watermarkTextList: ["第一行", "第二行", "第三行"], //水印文字和 watermarkLink 冲突，只能展示一个水印内容
-                        // watermarkLink: "https://xxx.png", //水印可以支持公司logo（图片路径）
-                    }, // 不展示水印传 undefined即可
-                },
-            })
-        });
-    }, 1000);
-}
+};
 
 onMounted(async () => {
     // 延迟设置topWrapper和bottomWrapper的高度