feat(office): 添加Office文档预览功能组件

添加OfficeViewer组件支持docx/excel/pptx文件预览在StudyDetailPage中集成Office文档预览功能添加相关依赖包@vue-office/docx/excel/pptx和vue-demi

feat(office): 添加Office文档预览功能组件
添加OfficeViewer组件支持docx/excel/pptx文件预览在StudyDetailPage中集成Office文档预览功能添加相关依赖包@vue-office/docx/excel/pptx和vue-demi
hookehuyr
Commit 24915d44c07abddd40d5f7e1e0f86e867c217ff0 24915d44 1 parent a8955043
Showing 6 changed files with 461 additions and 11 deletions
package.json
src/components.d.ts
src/components/ui/OfficeViewer.vue
src/components/ui/VideoPlayer.vue
src/views/study/StudyDetailPage.vue
yarn.lock
--- a/package.json
View file @24915d4
+++ b/package.json
View file @24915d4
@@ -29,6 +29,9 @@
     "@vant/touch-emulator": "^1.4.0",
     "@vant/use": "^1.6.0",
     "@videojs-player/vue": "^1.0.0",
+    "@vue-office/docx": "^1.6.3",
+    "@vue-office/excel": "^1.7.14",
+    "@vue-office/pptx": "^1.0.1",
     "browser-md5-file": "^1.1.1",
     "dayjs": "^1.11.13",
     "lodash": "^4.17.21",
@@ -38,6 +41,7 @@
     "vconsole": "^3.15.1",
     "video.js": "^7.21.7",
     "vue": "^3.5.13",
+    "vue-demi": "0.14.6",
     "vue-router": "^4.5.0",
     "weixin-js-sdk": "^1.6.5"
   },
--- a/src/components.d.ts
View file @24915d4
+++ b/src/components.d.ts
View file @24915d4
@@ -13,13 +13,16 @@ declare module 'vue' {
     AudioPlayer: typeof import('./components/ui/AudioPlayer.vue')['default']
     BottomNav: typeof import('./components/layout/BottomNav.vue')['default']
     CheckInDialog: typeof import('./components/ui/CheckInDialog.vue')['default']
+    CollapsibleCalendar: typeof import('./components/ui/CollapsibleCalendar.vue')['default']
     ConfirmDialog: typeof import('./components/ui/ConfirmDialog.vue')['default']
     CourseCard: typeof import('./components/ui/CourseCard.vue')['default']
     CourseList: typeof import('./components/courses/CourseList.vue')['default']
+    FormPage: typeof import('./components/infoEntry/formPage.vue')['default']
     FrostedGlass: typeof import('./components/ui/FrostedGlass.vue')['default']
     GradientHeader: typeof import('./components/ui/GradientHeader.vue')['default']
     LiveStreamCard: typeof import('./components/ui/LiveStreamCard.vue')['default']
     MenuItem: typeof import('./components/ui/MenuItem.vue')['default']
+    OfficeViewer: typeof import('./components/ui/OfficeViewer.vue')['default']
     PdfPreview: typeof import('./components/ui/PdfPreview.vue')['default']
     ReviewPopup: typeof import('./components/courses/ReviewPopup.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
--- a/src/components/ui/OfficeViewer.vue 0 → 100644
View file @24915d4
+++ b/src/components/ui/OfficeViewer.vue 0 → 100644
View file @24915d4
+<template>
+    <div class="office-viewer">
+        <!-- 错误状态 -->
+        <div v-if="error" class="error-container">
+            <van-icon name="warning-o" size="24" color="#ff6b6b" />
+            <span class="error-text">{{ error }}</span>
+            <van-button
+                type="primary"
+                size="small"
+                @click="retry"
+                class="retry-btn"
+            >
+                重试
+            </van-button>
+        </div>
+
+        <!-- 文档预览 -->
+        <div v-else class="document-container">
+            <!-- DOCX 文档预览 -->
+            <vue-office-docx
+                v-if="fileType === 'docx'"
+                :src="src"
+                :style="{ height: containerHeight }"
+                @rendered="onRendered"
+                @error="onError"
+            />
+
+            <!-- Excel 文档预览 -->
+            <vue-office-excel
+                v-else-if="fileType === 'excel'"
+                :src="src"
+                :style="{ height: containerHeight }"
+                @rendered="onRendered"
+                @error="onError"
+            />
+
+            <!-- PPTX 文档预览 -->
+            <vue-office-pptx
+                v-else-if="fileType === 'pptx'"
+                :src="src"
+                :style="{ height: containerHeight }"
+                @rendered="onRendered"
+                @error="onError"
+            />
+
+            <!-- 不支持的文件类型 -->
+            <div v-else class="unsupported-container">
+                <van-icon name="warning-o" size="24" color="#ff6b6b" />
+                <span class="unsupported-text">不支持的文件类型: {{ fileType }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import VueOfficeDocx from '@vue-office/docx'
+import VueOfficeExcel from '@vue-office/excel'
+import VueOfficePptx from '@vue-office/pptx'
+import '@vue-office/docx/lib/index.css'
+import '@vue-office/excel/lib/index.css'
+
+// Props 定义
+const props = defineProps({
+    // 文件 URL 或 ArrayBuffer 数据
+    src: {
+        type: [String, ArrayBuffer],
+        required: true
+    },
+    // 文件类型
+    fileType: {
+        type: String,
+        required: true,
+        validator: (value) => ['docx', 'excel', 'pptx'].includes(value)
+    },
+    // 容器高度
+    height: {
+        type: String,
+        default: '70vh'
+    }
+})
+
+// Emits 定义
+const emit = defineEmits(['rendered', 'error', 'retry'])
+
+// 响应式数据
+const error = ref('')
+
+// 计算属性
+const containerHeight = computed(() => props.height)
+
+/**
+ * 文档渲染完成回调
+ */
+const onRendered = () => {
+    console.log('Office document rendered successfully')
+    error.value = ''
+    emit('rendered')
+}
+
+/**
+ * 文档渲染错误回调
+ * @param {Error} err - 错误对象
+ */
+const onError = (err) => {
+    console.error('Office document render error:', err)
+    error.value = '文档加载失败，请检查文件格式或网络连接'
+    emit('error', err)
+}
+
+/**
+ * 重试加载文档
+ */
+const retry = () => {
+    console.log('Retrying to load office document')
+    error.value = ''
+    emit('retry')
+}
+
+/**
+ * 监听 src 变化，重新加载文档
+ */
+watch(() => props.src, (newSrc) => {
+    console.log('Office document src changed:', newSrc)
+    if (newSrc) {
+        error.value = ''
+
+        // 验证 URL 是否有效
+        if (typeof newSrc === 'string') {
+            // 检查是否是有效的 URL
+            try {
+                new URL(newSrc)
+                console.log('Valid URL detected:', newSrc)
+            } catch (e) {
+                // 可能是相对路径，检查是否以 http 开头
+                if (!newSrc.startsWith('http') && !newSrc.startsWith('/')) {
+                    console.warn('Invalid URL format:', newSrc)
+                    error.value = '文档地址格式不正确'
+                    return
+                }
+            }
+        }
+    }
+}, { immediate: true })
+
+/**
+ * 监听 fileType 变化
+ */
+watch(() => props.fileType, (newType) => {
+    console.log('Office document fileType changed:', newType)
+})
+
+// 组件挂载时的初始化
+onMounted(() => {
+    console.log('OfficeViewer 组件已挂载')
+})
+</script>
+
+<style lang="less" scoped>
+.office-viewer {
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+    .error-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 200px;
+        gap: 12px;
+        padding: 20px;
+
+        .error-text {
+            font-size: 14px;
+            color: #666;
+            text-align: center;
+            line-height: 1.5;
+        }
+
+        .retry-btn {
+            margin-top: 8px;
+        }
+    }
+
+    .unsupported-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 200px;
+        gap: 12px;
+        padding: 20px;
+
+        .unsupported-text {
+            font-size: 14px;
+            color: #666;
+            text-align: center;
+            line-height: 1.5;
+        }
+    }
+
+    .document-container {
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+
+        // 覆盖 vue-office 默认样式
+        :deep(.vue-office-docx),
+        :deep(.vue-office-excel),
+        :deep(.vue-office-pptx) {
+            border: none;
+            border-radius: 8px;
+            min-height: 100%;
+        }
+
+        // Excel 表格样式优化
+        :deep(.vue-office-excel) {
+            .luckysheet-cell-main {
+                font-size: 12px;
+            }
+        }
+
+        // DOCX 文档样式优化
+        :deep(.vue-office-docx) {
+            .docx-wrapper {
+                padding: 16px;
+                min-height: 100%;
+                background: #fff;
+            }
+        }
+
+        // PPTX 演示文稿样式优化
+        :deep(.vue-office-pptx) {
+            .pptx-wrapper {
+                background: #f5f5f5;
+                min-height: 100%;
+            }
+        }
+    }
+}
+
+// 移动端适配
+@media (max-width: 768px) {
+    .office-viewer {
+        border-radius: 0;
+        box-shadow: none;
+
+        .document-container {
+            // 移动端确保滚动流畅
+            -webkit-overflow-scrolling: touch;
+
+            :deep(.vue-office-docx) {
+                .docx-wrapper {
+                    padding: 12px;
+                    font-size: 14px;
+                    line-height: 1.6;
+                }
+            }
+
+            :deep(.vue-office-excel) {
+                .luckysheet-cell-main {
+                    font-size: 11px;
+                }
+            }
+
+            :deep(.vue-office-pptx) {
+                .pptx-wrapper {
+                    padding: 8px;
+                }
+            }
+        }
+    }
+}
+</style>
--- a/src/components/ui/VideoPlayer.vue
View file @24915d4
+++ b/src/components/ui/VideoPlayer.vue
View file @24915d4
@@ -122,10 +122,10 @@ const handleMounted = (payload) => {
       const errorCode = player.value.error();
       if (errorCode) {
         console.error('错误代码:', errorCode.code, '错误信息:', errorCode.message);
-        
+
         // 显示用户友好的错误信息
         showErrorOverlay.value = true;
-        
+
         // 根据错误类型进行处理
         switch (errorCode.code) {
           case 4: // MEDIA_ERR_SRC_NOT_SUPPORTED
@@ -231,10 +231,10 @@ const retryLoad = () => {
     errorMessage.value = '重试次数已达上限，请稍后再试';
     return;
   }
-  
+
   retryCount.value++;
   showErrorOverlay.value = false;
-  
+
   if (player.value && !player.value.isDisposed()) {
     console.log(`第${retryCount.value}次重试加载视频`);
     player.value.load();
@@ -431,7 +431,7 @@ defineExpose({
     visibility: visible !important;
     margin-right: 8px;
   }
-  
+
   :deep(.vjs-playback-rate .vjs-playback-rate-value) {
     font-size: 1.3em;
     padding: 0 6px;
@@ -441,14 +441,14 @@ defineExpose({
     width: auto;
     margin: 0;
   }
-  
+
   :deep(.vjs-playback-rate .vjs-menu) {
     min-width: 100px;
     max-height: 180px;
     bottom: 120%;
     right: -10px;
   }
-  
+
   :deep(.vjs-playback-rate .vjs-menu-item) {
     padding: 12px 16px;
     font-size: 16px;
@@ -464,7 +464,7 @@ defineExpose({
   :deep(.vjs-playback-rate) {
     margin-right: 6px;
   }
-  
+
   :deep(.vjs-playback-rate .vjs-playback-rate-value) {
     font-size: 1.2em;
     padding: 0 4px;
@@ -474,12 +474,12 @@ defineExpose({
     width: auto;
     margin: 0;
   }
-  
+
   :deep(.vjs-playback-rate .vjs-menu) {
     min-width: 90px;
     right: -5px;
   }
-  
+
   :deep(.vjs-playback-rate .vjs-menu-item) {
     padding: 10px 12px;
     font-size: 15px;
--- a/src/views/study/StudyDetailPage.vue
View file @24915d4
+++ b/src/views/study/StudyDetailPage.vue
View file @24915d4
@@ -265,6 +265,32 @@
         <!-- PDF预览 -->
         <PdfPreview v-model:show="pdfShow" :url="pdfUrl" :title="pdfTitle" @onLoad="onPdfLoad" />
+        <!-- Office 文档预览弹窗 -->
+        <van-popup
+            v-model:show="officeShow"
+            position="center"
+            round
+            closeable
+            :style="{ height: '80%', width: '90%' }"
+        >
+            <div class="h-full flex flex-col">
+                <div class="p-4 border-b border-gray-200">
+                    <h3 class="text-lg font-medium text-center truncate">{{ officeTitle }}</h3>
+                </div>
+                <div class="flex-1 overflow-auto">
+                    <OfficeViewer
+                        v-if="officeShow && officeUrl && officeFileType"
+                        :src="officeUrl"
+                        :file-type="officeFileType"
+                        height="100%"
+                        @rendered="onOfficeRendered"
+                        @error="onOfficeError"
+                        @retry="onOfficeRetry"
+                    />
+                </div>
+            </div>
+        </van-popup>
+
         <!-- 音频播放器弹窗 -->
         <van-popup
             v-model:show="audioShow"
@@ -542,9 +568,18 @@
                                 <!-- 移动端：根据文件类型显示不同的预览按钮 -->
                                 <template v-else>
+                                    <!-- Office 文档显示预览按钮 -->
+                                    <button
+                                        v-if="isOfficeFile(file.url)"
+                                        @click="showOfficeDocument(file)"
+                                        class="btn-primary flex-1 py-2.5 text-sm font-medium flex items-center justify-center gap-2"
+                                    >
+                                        <van-icon name="description" size="16" />
+                                        文档预览
+                                    </button>
                                     <!-- PDF文件显示在线查看按钮 -->
                                     <button
-                                        v-if="file.url && file.url.toLowerCase().includes('.pdf')"
+                                        v-else-if="file.url && file.url.toLowerCase().includes('.pdf')"
                                         @click="showPdf(file)"
                                         class="btn-primary flex-1 py-2.5 text-sm font-medium flex items-center justify-center gap-2"
                                     >
@@ -613,6 +648,7 @@ import { useTitle } from '@vueuse/core';
 import VideoPlayer from '@/components/ui/VideoPlayer.vue';
 import AudioPlayer from '@/components/ui/AudioPlayer.vue';
 import FrostedGlass from '@/components/ui/FrostedGlass.vue';
+import OfficeViewer from '@/components/ui/OfficeViewer.vue';
 import dayjs from 'dayjs';
 import { formatDate, wxInfo } from '@/utils/tools'
 import axios from 'axios';
@@ -817,6 +853,12 @@ const pdfShow = ref(false);
 const pdfTitle = ref('');
 const pdfUrl = ref('');
+// Office 文档预览相关
+const officeShow = ref(false);
+const officeTitle = ref('');
+const officeUrl = ref('');
+const officeFileType = ref('');
+
 // 音频播放器相关
 const audioShow = ref(false);
 const audioTitle = ref('');
@@ -842,6 +884,46 @@ const showPdf = ({ title, url, meta_id }) => {
 };
 /**
+ * 显示 Office 文档预览
+ * @param {Object} file - 文件对象，包含title、url、meta_id
+ */
+const showOfficeDocument = ({ title, url, meta_id }) => {
+    console.log('showOfficeDocument called with:', { title, url, meta_id });
+
+    // 清理 URL 中的反引号和多余空格
+    const cleanUrl = url.replace(/`/g, '').trim();
+
+    officeTitle.value = title;
+    officeUrl.value = cleanUrl;
+    officeFileType.value = getOfficeFileType(cleanUrl);
+
+    console.log('Office document props set:', {
+        title: officeTitle.value,
+        url: officeUrl.value,
+        fileType: officeFileType.value
+    });
+
+    // 验证 URL 格式
+    try {
+        new URL(cleanUrl);
+        console.log('URL validation passed:', cleanUrl);
+    } catch (error) {
+        console.error('Invalid URL format:', cleanUrl, error);
+        showToast('文档链接格式不正确');
+        return;
+    }
+
+    officeShow.value = true;
+
+    // 新增记录
+    let paramsObj = {
+        schedule_id: courseId.value,
+        meta_id
+    }
+    addRecord(paramsObj);
+};
+
+/**
  * 显示音频播放器
  * @param {Object} file - 文件对象，包含title、url、meta_id
  */
@@ -901,6 +983,31 @@ const onPdfLoad = (load) => {
     // console.warn('pdf加载状态', load);
 };
+/**
+ * Office 文档渲染完成回调
+ */
+const onOfficeRendered = () => {
+    console.log('Office 文档渲染完成');
+    showToast('文档加载完成');
+};
+
+/**
+ * Office 文档渲染错误回调
+ * @param {Error} error - 错误对象
+ */
+const onOfficeError = (error) => {
+    console.error('Office 文档渲染失败:', error);
+    showToast('文档加载失败，请重试');
+};
+
+/**
+ * Office 文档重试回调
+ */
+const onOfficeRetry = () => {
+    console.log('重试加载 Office 文档');
+    // 可以在这里添加重新获取文档的逻辑
+};
+
 const courseId = computed(() => {
     return route.params.id || '';
 });
@@ -1396,6 +1503,44 @@ const isImageFile = (fileName) => {
 }
 /**
+ * 判断文件是否为 Office 文档
+ * @param {string} fileName - 文件名
+ * @returns {boolean} 是否为 Office 文档
+ */
+const isOfficeFile = (fileName) => {
+    if (!fileName || typeof fileName !== 'string') {
+        return false;
+    }
+
+    const extension = fileName.split('.').pop().toLowerCase();
+    const officeTypes = ['docx', 'xlsx', 'xls', 'pptx'];
+    return officeTypes.includes(extension);
+}
+
+/**
+ * 获取 Office 文档类型
+ * @param {string} fileName - 文件名
+ * @returns {string} 文档类型 (docx, excel, pptx)
+ */
+const getOfficeFileType = (fileName) => {
+    if (!fileName || typeof fileName !== 'string') {
+        return '';
+    }
+
+    const extension = fileName.split('.').pop().toLowerCase();
+
+    if (extension === 'docx') {
+        return 'docx';
+    } else if (extension === 'xlsx' || extension === 'xls') {
+        return 'excel';
+    } else if (extension === 'pptx') {
+        return 'pptx';
+    }
+
+    return '';
+}
+
+/**
  * 音频播放事件
  * @param audio 音频对象
  */
--- a/yarn.lock
View file @24915d4
+++ b/yarn.lock
View file @24915d4
@@ -713,6 +713,21 @@
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.2.3.tgz#71a8fc82d4d2e425af304c35bf389506f674d89b"
   integrity sha512-IYSLEQj4LgZZuoVpdSUCw3dIynTWQgPlaRP6iAvMle4My0HdYwr5g5wQAfwOeHQBmYwEkqF70nRpSilr6PoUDg==
+"@vue-office/docx@^1.6.3":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@vue-office/docx/-/docx-1.6.3.tgz#0c183b13553c029fea702eb8b8b4260a7e1f0961"
+  integrity sha512-Cs+3CAaRBOWOiW4XAhTwwxJ0dy8cPIf6DqfNvYcD3YACiLwO4kuawLF2IAXxyijhbuOeoFsfvoVbOc16A/4bZA==
+
+"@vue-office/excel@^1.7.14":
+  version "1.7.14"
+  resolved "https://registry.yarnpkg.com/@vue-office/excel/-/excel-1.7.14.tgz#6e1446abae9690a09eed6f5e8c09bb923b3d5b10"
+  integrity sha512-pVUgt+emDQUnW7q22CfnQ+jl43mM/7IFwYzOg7lwOwPEbiVB4K4qEQf+y/bc4xGXz75w1/e3Kz3G6wAafmFBFg==
+
+"@vue-office/pptx@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@vue-office/pptx/-/pptx-1.0.1.tgz#f34d5a7aa78cd534c5724540dbe53f0539e94b3e"
+  integrity sha512-+V7Kctzl6f6+Yk4NaD/wQGRIkqLWcowe0jEhPexWQb8Oilbzt1OyhWRWcMsxNDTdrgm6aMLP+0/tmw27cxddMg==
+
 "@vue/babel-helper-vue-transform-on@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.4.0.tgz#616020488692a9c42a613280d62ed1b727045d95"
@@ -2855,6 +2870,11 @@ vite@^6.2.0:
   optionalDependencies:
     fsevents "~2.3.3"
+vue-demi@0.14.6:
+  version "0.14.6"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.6.tgz#dc706582851dc1cdc17a0054f4fec2eb6df74c92"
+  integrity sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==
+
 vue-router@^4.5.0:
   version "4.5.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.5.1.tgz#47bffe2d3a5479d2886a9a244547a853aa0abf69"