fix(DocumentPreview): 优化标签页切换时组件重复渲染问题

重构 getFileSize 函数，将 Promise 封装改为 async/await 以提高可读性
为 DocumentPreview 组件添加 v-if 条件渲染，避免标签页切换时所有预览组件同时加载
统一 H5 和小程序环境的文件大小获取逻辑，移除条件编译指令

@@ -45,48 +45,41 @@ export function detectFileType(url) {
  * @returns {Promise<number>} 文件大小（字节）
  */
 export async function getFileSize(url) {
-  return new Promise((resolve) => {
-    // #ifdef H5
-    // H5 环境：使用 fetch HEAD 请求
-    fetch(url, { method: 'HEAD' })
-      .then(response => {
-        const contentLength = response.headers.get('Content-Length')
+  // 检测运行环境
+  const isWeapp = typeof wx !== 'undefined' || typeof my !== 'undefined'
+
+  // 小程序环境：使用 Taro.request
+  if (isWeapp) {
+    try {
+      const Taro = (await import('@tarojs/taro')).default
+      const res = await Taro.request({
+        url: url,
+        method: 'HEAD'
+      })
+
+      const contentLength = res.header['Content-Length'] || res.header['content-length']
       if (contentLength) {
-          resolve(parseInt(contentLength, 10))
-        } else {
-          // 无法获取大小，返回 0（将使用 web-view）
-          resolve(0)
+        return parseInt(contentLength, 10)
       }
-      })
-      .catch(err => {
+    } catch (err) {
       console.error('获取文件大小失败:', err)
-        // 失败时返回 0，将使用 web-view
-        resolve(0)
-      })
-    // #endif
+    }
+    return 0
+  }
 
-    // #ifdef WEAPP
-    // 小程序环境：使用 Taro.request HEAD 请求
-    Taro.request({
-      url: url,
-      method: 'HEAD',
-      success: (res) => {
-        const contentLength = res.header['Content-Length'] || res.header['content-length']
+  // H5 环境：使用 fetch
+  try {
+    const response = await fetch(url, { method: 'HEAD' })
+    const contentLength = response.headers.get('Content-Length')
     if (contentLength) {
-          resolve(parseInt(contentLength, 10))
-        } else {
-          // 无法获取大小，返回 0（将使用 web-view）
-          resolve(0)
+      return parseInt(contentLength, 10)
     }
-      },
-      fail: (err) => {
+  } catch (err) {
     console.error('获取文件大小失败:', err)
-        // 失败时返回 0，将使用 web-view
-        resolve(0)
   }
-    })
-    // #endif
-  })
+
+  // 无法获取大小，返回 0（将使用 web-view）
+  return 0
 }
 
 /**

@@ -8,7 +8,8 @@
     <nut-tabs v-model="activeTab">
       <nut-tab-pane title="PDF 预览" pane-key="pdf">
         <DocumentPreview
-          src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
+          v-if="activeTab === 'pdf'"
+          src="https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E%E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf"
           fileType="pdf"
           fileName="示例 PDF 文档.pdf"
           @rendered="handleRendered"
@@ -18,6 +19,7 @@
 
       <nut-tab-pane title="Word 预览" pane-key="word">
         <DocumentPreview
+          v-if="activeTab === 'word'"
           src="https://calibre-ebook.com/downloads/demos/demo.docx"
           fileType="docx"
           fileName="示例 Word 文档.docx"
@@ -28,6 +30,7 @@
 
       <nut-tab-pane title="Excel 预览" pane-key="excel">
         <DocumentPreview
+          v-if="activeTab === 'excel'"
           src="https://filesamples.com/samples/document/xlsx/sample1.xlsx"
           fileType="xlsx"
           fileName="示例 Excel 文档.xlsx"
@@ -38,6 +41,7 @@
 
       <nut-tab-pane title="PPT 预览" pane-key="ppt">
         <DocumentPreview
+          v-if="activeTab === 'ppt'"
           src="https://filesamples.com/samples/document/ppt/sample1.ppt"
           fileType="ppt"
           fileName="示例 PPT 文档.ppt"