From 79cc8f711b5c02a2e5d03e4e4504547ea7bdc5cf Mon Sep 17 00:00:00 2001
From: Yann <1319542051@qq.com>
Date: Tue, 11 Nov 2025 17:47:04 +0800
Subject: [PATCH 1/3] =?UTF-8?q?add=20=E6=96=87=E4=BB=B6=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   3 +-
 src/api/file.ts                               |   7 +
 src/components/video-player/index.vue         |  71 +++++++
 src/views/files/components/file-grid-view.vue |   6 +
 src/views/files/components/file-previewer.vue | 177 ++++++++++++++++++
 src/views/files/components/index.ts           |   1 +
 src/views/files/hooks/use-file-operations.ts  |  27 +++
 src/views/files/index.vue                     |  10 +
 8 files changed, 301 insertions(+), 1 deletion(-)
 create mode 100644 src/components/video-player/index.vue
 create mode 100644 src/views/files/components/file-previewer.vue

diff --git a/package.json b/package.json
index 0ef8faf..8ae0dc1 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,8 @@
     "spark-md5": "^3.0.2",
     "vue": "^3.2.40",
     "vue-echarts": "^6.2.3",
-    "vue-router": "^4.0.14"
+    "vue-router": "^4.0.14",
+    "xgplayer": "^3.0.23"
   },
   "devDependencies": {
     "@arco-plugins/vite-vue": "^1.4.5",
diff --git a/src/api/file.ts b/src/api/file.ts
index 7adddc0..c247412 100644
--- a/src/api/file.ts
+++ b/src/api/file.ts
@@ -182,5 +182,12 @@ export function unfavoriteFile(fileIds: string[]) {
   });
 }
 
+/**
+ * 获取文件访问URL
+ */
+export function getFilePreviewUrl(fileId: string, expireSeconds = 180) {
+  return request.get(`/apis/file/url/${fileId}`, { params: { expireSeconds } });
+}
+
 // 导出类型以便在组件中使用
 export type { FileListParams, FileItem };
diff --git a/src/components/video-player/index.vue b/src/components/video-player/index.vue
new file mode 100644
index 0000000..05f543f
--- /dev/null
+++ b/src/components/video-player/index.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+  import { onMounted, onUnmounted, ref, watch } from 'vue';
+  import Player from 'xgplayer';
+  import 'xgplayer/dist/index.min.css';
+
+  interface Props {
+    url: '';
+  }
+  const props = defineProps<Props>();
+
+  const playerContainer = ref<HTMLElement | null>(null);
+
+  let playerInstance: Player | null = null;
+  const initPlayer = (): void => {
+    if (playerContainer.value) {
+      // 确保 URL 存在
+      if (!props.url) {
+        console.warn('XgPlayer: URL is empty');
+        return;
+      }
+
+      // 销毁旧实例 (如果存在的话)
+      if (playerInstance) {
+        playerInstance.destroy();
+      }
+
+      // 创建新实例
+      playerInstance = new Player({
+        el: playerContainer.value,
+        url: props.url,
+        width: '100%',
+        height: '100%',
+        playbackRate: [0.5, 0.75, 1, 1.5, 2],
+      });
+    }
+  };
+
+  onMounted(() => {
+    initPlayer();
+  });
+
+  onUnmounted(() => {
+    if (playerInstance) {
+      playerInstance.destroy();
+      playerInstance = null;
+    }
+  });
+
+  watch(
+    () => props.url,
+    (newUrl) => {
+      if (playerInstance && newUrl) {
+        playerInstance.src = newUrl;
+      } else if (!playerInstance && newUrl) {
+        initPlayer();
+      }
+    }
+  );
+</script>
+
+<template>
+  <div ref="playerContainer" class="player-container" />
+</template>
+
+<style scoped lang="less">
+  .player-container {
+    width: 100%;
+    height: 100%;
+    min-height: 300px; /* 你可以根据需要调整这个最小高度 */
+  }
+</style>
diff --git a/src/views/files/components/file-grid-view.vue b/src/views/files/components/file-grid-view.vue
index 2bc3418..6059424 100644
--- a/src/views/files/components/file-grid-view.vue
+++ b/src/views/files/components/file-grid-view.vue
@@ -113,6 +113,10 @@
               <icon-more :size="18" />
             </a-button>
             <template #content>
+              <a-doption v-if="!file.isDir" @click="$emit('preview', file)">
+                <icon-eye />
+                预览
+              </a-doption>
               <a-doption @click="$emit('share', file)">
                 <icon-share-alt />
                 分享
@@ -162,6 +166,7 @@
     IconRefresh,
     IconApps,
     IconList,
+    IconEye,
   } from '@arco-design/web-vue/es/icon';
   import type { FileItem } from '@/types/modules/file';
   import { getFileIconPath } from '@/utils/file-icon';
@@ -187,6 +192,7 @@
     (e: 'update:selectedKeys', keys: string[]): void;
     (e: 'update:viewMode', value: 'list' | 'grid'): void;
     (e: 'refresh'): void;
+    (e: 'preview', file: FileItem): void;
   }>();
 
   const isSelected = (fileId: string) => {
diff --git a/src/views/files/components/file-previewer.vue b/src/views/files/components/file-previewer.vue
new file mode 100644
index 0000000..3394d69
--- /dev/null
+++ b/src/views/files/components/file-previewer.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { IconQuestion } from '@arco-design/web-vue/es/icon';
+  import VideoPlayer from '@/components/video-player/index.vue';
+
+  /** 文件预览组件 */
+  interface FileInfo {
+    fileName: string;
+    fileUrl: string;
+    fileSuffix: string;
+  }
+
+  interface Props {
+    visible: boolean;
+    file: FileInfo;
+  }
+
+  const props = defineProps<Props>();
+  const emit = defineEmits<{
+    (e: 'update:visible', value: boolean): void;
+    (e: 'close'): void;
+  }>();
+
+  /** 文件扩展名 */
+  const anonymizeFilename = (fileName: string): string => {
+    if (!fileName) return '';
+    const parts = fileName.split('.');
+    return parts.length > 1 ? parts[parts.length - 1].toLowerCase() : '';
+  };
+
+  /** 文件扩展名 */
+  const fileExtension = computed(() => {
+    const suffix = props.file.fileSuffix;
+    if (suffix) {
+      return suffix;
+    }
+    return anonymizeFilename(props.file.fileName);
+  });
+
+  /** 文件类型 */
+  const fileType = computed(() => {
+    const ext = fileExtension.value;
+    if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp'].includes(ext))
+      return 'image';
+    if (['mp4', 'webm', 'ogg'].includes(ext)) return 'video';
+    if (['mp3', 'wav', 'aac'].includes(ext)) return 'audio';
+    if (['pdf'].includes(ext)) return 'pdf';
+    if (
+      [
+        'txt',
+        'md',
+        'json',
+        'js',
+        'ts',
+        'css',
+        'html',
+        'py',
+        'java',
+        'go',
+        'c',
+        'cpp',
+      ].includes(ext)
+    )
+      return 'code-text';
+    if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext))
+      return 'office';
+    if (['zip', 'rar', '7z'].includes(ext)) return 'archive';
+    return 'unsupported';
+  });
+
+  const previewTitle = computed(() => {
+    return `${props.file.fileName} - 预览`;
+  });
+
+  const isImagePreviewVisible = computed(() => {
+    return props.visible && fileType.value === 'image';
+  });
+
+  const isOtherPreviewVisible = computed(() => {
+    return props.visible && fileType.value !== 'image';
+  });
+
+  const handleClose = () => {
+    emit('update:visible', false);
+    emit('close');
+  };
+</script>
+
+<template>
+  <div>
+    <div v-if="fileType === 'image'" class="image-preview">
+      <a-image-preview
+        :src="file.fileUrl"
+        :visible="isImagePreviewVisible"
+        :z-index="3000"
+        @close="handleClose"
+      ></a-image-preview>
+    </div>
+
+    <!-- 需要弹框的组件 -->
+    <a-modal
+      :visible="isOtherPreviewVisible"
+      :title="previewTitle"
+      width="90vw"
+      unmount-on-close
+      :footer="false"
+      modal-class="file-preview-modal"
+      @cancel="handleClose"
+    >
+      <div class="preview-container">
+        <div v-if="fileType === 'video'" class="video-viewer">
+          <video-player :url="file.fileUrl" />
+        </div>
+
+        <div v-if="fileType === 'unsupported'" class="unsupported-viewer">
+          <a-empty>
+            <template #image>
+              <div class="custom-unsupported-icon">
+                <icon-question />
+              </div>
+            </template>
+            <div>
+              <p
+                >暂不支持预览<strong>.{{ fileExtension }}</strong> 类型的文件</p
+              >
+              <a-button type="outline" :href="file.fileUrl" download>
+                点击下载
+              </a-button>
+            </div>
+          </a-empty>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<style scoped lang="less">
+  //:deep(.file-preview-modal) {
+  //  .arco-modal-body {
+  //    /* 让 modal 内容区占满 80vh */
+  //    height: 90vh;
+  //    overflow: hidden;
+  //  }
+  //}
+
+  .preview-container {
+    width: 100%;
+    height: 85vh;
+    display: block;
+  }
+
+  .image-preview,
+  .video-viewer,
+  .unsupported-viewer {
+    width: 100%;
+    height: 100%;
+  }
+
+  .unsupported-viewer {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .custom-unsupported-icon {
+    font-size: 76px;
+    padding: 20px;
+    background-color: #e9e3ff;
+    color: #7b61ff;
+    border-radius: 12px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+</style>
diff --git a/src/views/files/components/index.ts b/src/views/files/components/index.ts
index 88ef0c7..c0167e0 100644
--- a/src/views/files/components/index.ts
+++ b/src/views/files/components/index.ts
@@ -18,3 +18,4 @@ export { default as DeleteConfirmModal } from './delete-confirm-modal.vue';
 export { default as RecycleBinView } from './recycle-bin-view.vue';
 export { default as MySharesView } from './my-shares-view.vue';
 export { default as UploadPanel } from './upload-panel.vue';
+export { default as FilePreviewer } from './file-previewer.vue';
\ No newline at end of file
diff --git a/src/views/files/hooks/use-file-operations.ts b/src/views/files/hooks/use-file-operations.ts
index 4968076..dc6213e 100644
--- a/src/views/files/hooks/use-file-operations.ts
+++ b/src/views/files/hooks/use-file-operations.ts
@@ -10,6 +10,7 @@ import {
   createFolder,
   favoriteFile,
   unfavoriteFile,
+  getFilePreviewUrl,
 } from '@/api/file';
 import type { FileItem } from '@/types/modules/file';
 
@@ -43,6 +44,10 @@ export default function useFileOperations(refreshCallback: () => void) {
   const deletingFile = ref<FileItem | null>(null);
   const deletingFiles = ref<FileItem[]>([]);
 
+  // 预览相关
+  const previewModalVisible = ref(false);
+  const previewFile = ref({ fileName: '', fileUrl: '', fileSuffix: '' });
+
   /**
    * 打开上传弹窗
    */
@@ -360,6 +365,23 @@ export default function useFileOperations(refreshCallback: () => void) {
     });
   };
 
+  /**
+   * 预览文件
+   */
+  const openPreview = async (file: FileItem) => {
+    previewModalVisible.value = true;
+    try {
+      const res = await getFilePreviewUrl(file.id);
+      previewFile.value = {
+        fileName: file.originalName,
+        fileSuffix: file.suffix,
+        fileUrl: res.data,
+      };
+    } catch (e) {
+      Message.error('预览失败，请联系管理员');
+    }
+  };
+
   return {
     // 上传相关
     uploadModalVisible,
@@ -406,5 +428,10 @@ export default function useFileOperations(refreshCallback: () => void) {
 
     // 收藏
     handleFavorite,
+
+    // 预览
+    previewModalVisible,
+    openPreview,
+    previewFile,
   };
 }
diff --git a/src/views/files/index.vue b/src/views/files/index.vue
index 3d4250b..47b3dc2 100644
--- a/src/views/files/index.vue
+++ b/src/views/files/index.vue
@@ -138,6 +138,7 @@
                 @move="operations.openMoveModal"
                 @favorite="handleFavorite"
                 @refresh="fileList.refresh"
+                @preview="operations.openPreview"
               />
             </a-spin>
           </div>
@@ -153,6 +154,7 @@
       style="display: none"
       @change="handleFileSelect"
     />
+    <upload-panel />
 
     <!-- 新建文件夹弹窗 -->
     <create-folder-modal
@@ -191,6 +193,12 @@
       :files="operations.deletingFiles.value"
       @confirm="handleDelete"
     />
+
+    <!-- 文件预览 -->
+    <file-previewer
+      v-model:visible="operations.previewModalVisible.value"
+      :file="operations.previewFile.value"
+    />
   </div>
 </template>
 
@@ -233,6 +241,8 @@
     DeleteConfirmModal,
     RecycleBinView,
     MySharesView,
+    UploadPanel,
+    FilePreviewer,
   } from './components';
 
   const route = useRoute();
-- 
Gitee


From 225be40ba5c619859c1b078a8ad30e33d7c92837 Mon Sep 17 00:00:00 2001
From: yanzy <1319542051@qq.com>
Date: Tue, 11 Nov 2025 20:01:43 +0800
Subject: [PATCH 2/3] =?UTF-8?q?add=20=E6=96=B0=E5=A2=9Ecode=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/vite.config.base.ts                    |   4 +
 package.json                                  |   2 +
 src/components/code-player/index.vue          | 134 ++++++++++++++++++
 src/views/files/components/file-previewer.vue |   6 +
 4 files changed, 146 insertions(+)
 create mode 100644 src/components/code-player/index.vue

diff --git a/config/vite.config.base.ts b/config/vite.config.base.ts
index 30efaf6..3e56dba 100644
--- a/config/vite.config.base.ts
+++ b/config/vite.config.base.ts
@@ -3,6 +3,7 @@ import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import svgLoader from 'vite-svg-loader';
+import monacoEditorPlugin from 'vite-plugin-monaco-editor';
 import configArcoStyleImportPlugin from './plugin/arcoStyleImport';
 
 export default defineConfig({
@@ -11,6 +12,9 @@ export default defineConfig({
     vueJsx(),
     svgLoader({ svgoConfig: {} }),
     configArcoStyleImportPlugin(),
+    monacoEditorPlugin({
+      languageWorkers: ['json', 'css', 'html', 'typescript'],
+    }),
   ],
   resolve: {
     alias: [
diff --git a/package.json b/package.json
index 8ae0dc1..53891e7 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "echarts": "^5.4.0",
     "gsap": "^3.13.0",
     "mitt": "^3.0.0",
+    "monaco-editor": "^0.54.0",
     "motion-v": "^1.7.4",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.23",
@@ -46,6 +47,7 @@
     "radash": "^12.1.0",
     "sortablejs": "^1.15.0",
     "spark-md5": "^3.0.2",
+    "vite-plugin-monaco-editor": "^1.1.0",
     "vue": "^3.2.40",
     "vue-echarts": "^6.2.3",
     "vue-router": "^4.0.14",
diff --git a/src/components/code-player/index.vue b/src/components/code-player/index.vue
new file mode 100644
index 0000000..9534fa0
--- /dev/null
+++ b/src/components/code-player/index.vue
@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+  import { ref, onMounted, onUnmounted, watch } from 'vue';
+  import * as monaco from 'monaco-editor';
+  import { useAppStore } from '@/store';
+
+  const appStore = useAppStore();
+
+  interface Props {
+    url: string; // 文件 URL
+    language?: string; // 文件语言 (如 'javascript', 'css')
+  }
+  const props = defineProps<Props>();
+  const editorContainer = ref<HTMLElement | null>(null);
+  let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
+
+  /**
+   * 映射文件后缀到 Monaco 语言 ID
+   */
+  const mapLanguage = (ext: string | undefined): string => {
+    if (!ext) return 'plaintext';
+    switch (ext) {
+      case 'js':
+        return 'javascript';
+      case 'ts':
+        return 'typescript';
+      case 'json':
+        return 'json';
+      case 'css':
+        return 'css';
+      case 'less':
+        return 'less';
+      case 'html':
+        return 'html';
+      case 'xml':
+        return 'xml';
+      case 'md':
+        return 'markdown';
+      case 'py':
+        return 'python';
+      case 'java':
+        return 'java';
+      case 'c':
+        return 'c';
+      case 'cpp':
+        return 'cpp';
+      case 'go':
+        return 'go';
+      case 'sh':
+        return 'shell';
+      // 默认返回纯文本
+      default:
+        return 'plaintext';
+    }
+  };
+
+  /**
+   * 加载文件内容
+   */
+  const fetchAndSetContent = async (url: string) => {
+    if (!url || !editorInstance) return;
+    try {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error('Failed to fetch file');
+      const text = await response.text();
+      editorInstance.setValue(text);
+    } catch (error) {
+      console.error('Error fetching file content:', error);
+      editorInstance.setValue(`// 加载文件失败: ${url}\n// ${error}`);
+    }
+  };
+
+  /**
+   * 更新编辑器语言
+   */
+  const updateLanguage = (lang: string | undefined) => {
+    if (!editorInstance) return;
+    const model = editorInstance.getModel();
+    if (model) {
+      const languageId = mapLanguage(lang);
+      monaco.editor.setModelLanguage(model, languageId);
+    }
+  };
+
+  // 4. 在组件挂载时初始化编辑器
+  onMounted(() => {
+    if (editorContainer.value) {
+      editorInstance = monaco.editor.create(editorContainer.value, {
+        value: '// 正在加载内容...',
+        language: mapLanguage(props.language),
+        theme: appStore.theme === 'dark' ? 'vs-dark' : 'vs-light', // 主题 ('vs-dark' 或 'vs-light')
+        readOnly: true, // 预览模式设为只读
+        automaticLayout: true, // 自动布局, 适应容器大小
+        minimap: {
+          enabled: true, // 是否显示小地图
+        },
+      });
+
+      // 初始化时加载内容
+      fetchAndSetContent(props.url);
+    }
+  });
+
+  onUnmounted(() => {
+    if (editorInstance) {
+      editorInstance.dispose();
+      editorInstance = null;
+    }
+  });
+
+  watch(
+    () => props.url,
+    (newUrl) => {
+      fetchAndSetContent(newUrl);
+    }
+  );
+
+  watch(
+    () => props.language,
+    (newLang) => {
+      updateLanguage(newLang);
+    }
+  );
+</script>
+
+<template>
+  <div ref="editorContainer" class="code-editor-container"></div>
+</template>
+
+<style scoped lang="less">
+  .code-editor-container {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/src/views/files/components/file-previewer.vue b/src/views/files/components/file-previewer.vue
index 3394d69..e0d621c 100644
--- a/src/views/files/components/file-previewer.vue
+++ b/src/views/files/components/file-previewer.vue
@@ -2,6 +2,7 @@
   import { computed } from 'vue';
   import { IconQuestion } from '@arco-design/web-vue/es/icon';
   import VideoPlayer from '@/components/video-player/index.vue';
+  import CodePlayer from '@/components/code-player/index.vue';
 
   /** 文件预览组件 */
   interface FileInfo {
@@ -112,6 +113,10 @@
           <video-player :url="file.fileUrl" />
         </div>
 
+        <div v-if="fileType === 'code-text'" class="code-text-viewer">
+          <code-player :url="file.fileUrl" :language="fileExtension" />
+        </div>
+
         <div v-if="fileType === 'unsupported'" class="unsupported-viewer">
           <a-empty>
             <template #image>
@@ -151,6 +156,7 @@
 
   .image-preview,
   .video-viewer,
+  .code-text-viewer,
   .unsupported-viewer {
     width: 100%;
     height: 100%;
-- 
Gitee


From 064327aa3495dc8fae5b41c8c7a739c55bbfd244 Mon Sep 17 00:00:00 2001
From: yanzy <1319542051@qq.com>
Date: Wed, 12 Nov 2025 00:00:43 +0800
Subject: [PATCH 3/3] =?UTF-8?q?add=20=E6=96=B0=E5=A2=9Epdf=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88/audio=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   3 +-
 src/components/audio-player/index.vue         | 153 ++++++++++++++++++
 src/components/pdf-player/index.vue           |  79 +++++++++
 src/views/files/components/file-previewer.vue |  28 +++-
 4 files changed, 259 insertions(+), 4 deletions(-)
 create mode 100644 src/components/audio-player/index.vue
 create mode 100644 src/components/pdf-player/index.vue

diff --git a/package.json b/package.json
index 53891e7..dd41e53 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,8 @@
     "vue": "^3.2.40",
     "vue-echarts": "^6.2.3",
     "vue-router": "^4.0.14",
-    "xgplayer": "^3.0.23"
+    "xgplayer": "^3.0.23",
+    "xgplayer-music": "^3.0.23"
   },
   "devDependencies": {
     "@arco-plugins/vite-vue": "^1.4.5",
diff --git a/src/components/audio-player/index.vue b/src/components/audio-player/index.vue
new file mode 100644
index 0000000..8e9af45
--- /dev/null
+++ b/src/components/audio-player/index.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+  import { onMounted, onUnmounted, ref, watch } from 'vue';
+  import Player from 'xgplayer';
+  import MusicPreset, { Analyze } from 'xgplayer-music';
+
+  import 'xgplayer/dist/index.min.css';
+  import 'xgplayer-music/dist/index.min.css';
+
+  interface Props {
+    url: string;
+    name: string;
+  }
+  const props = defineProps<Props>();
+
+  const playerContainer = ref<HTMLElement | null>(null);
+  const canvasEl = ref<HTMLCanvasElement | null>(null);
+
+  let playerInstance: Player | null = null;
+  let analyzeInstance: any = null; // 频谱分析器实例
+
+  const initPlayer = (): void => {
+    // 4. 确保两个 DOM 元素都准备好了
+    if (!playerContainer.value || !canvasEl.value || !props.url) {
+      console.warn('AudioPlayer: DOM not ready or URL is empty.');
+      return;
+    }
+
+    // 5. 安全销毁旧实例
+    if (playerInstance) {
+      try {
+        playerInstance.destroy();
+      } catch (e) {
+        /* (ignoring error) */
+      }
+      playerInstance = null;
+      analyzeInstance = null;
+    }
+
+    try {
+      // 6. 动态设置 canvas 宽高，使其充满容器
+      canvasEl.value.width = canvasEl.value.offsetWidth;
+      canvasEl.value.height = canvasEl.value.offsetHeight;
+
+      playerInstance = new Player({
+        el: playerContainer.value,
+        presets: ['default', MusicPreset],
+        music: {
+          list: [
+            {
+              src: props.url,
+              title: props.name,
+              vid: props.url, // 使用 url 作为唯一 vid
+            },
+          ],
+        },
+
+        crossOrigin: 'anonymous',
+
+        // 基础配置
+        mediaType: 'audio',
+        height: 50,
+        width: '100%',
+        volume: 0.8,
+        ignores: ['playbackrate'],
+        controls: { initShow: true, mode: 'flex' },
+        marginControls: true,
+      });
+
+      playerInstance.crossOrigin = 'anonymous';
+
+      analyzeInstance = new Analyze(playerInstance, canvasEl.value, {
+        bgColor: 'rgba(0, 0, 0, 0)', // 透明背景
+        stroke: 3,
+        mode: 'bars', // 'bars' (柱状) 或 'waves' (波浪)
+      });
+    } catch (error) {
+      console.error('Failed to initialize XgPlayer with MusicPreset:', error);
+      playerInstance = null;
+    }
+  };
+
+  onMounted(() => {
+    requestAnimationFrame(() => {
+      initPlayer();
+    });
+  });
+
+  onUnmounted(() => {
+    if (playerInstance && typeof playerInstance.destroy === 'function') {
+      playerInstance.destroy();
+    }
+    playerInstance = null;
+    analyzeInstance = null;
+  });
+
+  watch(
+    () => props.url,
+    (newUrl, oldUrl) => {
+      // 避免在 onMounted 之前运行
+      if (oldUrl === undefined) return;
+      if (newUrl) {
+        console.log('AudioPlayer URL changed, re-initializing.');
+        initPlayer(); // 总是重新初始化
+      }
+    }
+  );
+</script>
+
+<template>
+  <div class="audio-player-wrapper">
+    <canvas ref="canvasEl" class="audio-canvas"></canvas>
+
+    <div ref="playerContainer" class="player-container" />
+  </div>
+</template>
+
+<style scoped lang="less">
+  /*
+    这是总容器, 它会撑满 80vh 的模态框
+  */
+  .audio-player-wrapper {
+    width: 100%;
+    height: 100%;
+
+    // 使用 flex 布局让画布和控件垂直居中
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    // 给一点内边距
+    padding: 20px;
+  }
+
+  /* 频谱画布的样式*/
+  .audio-canvas {
+    width: 100%;
+    //max-width: 600px;
+    height: 120px; // 给频谱一个固定的高度
+    margin-bottom: 20px; // 和播放器拉开一点距离
+  }
+
+  /* 播放器控件的容器 */
+  .player-container {
+    width: 100%;
+    //max-width: 600px;
+
+    // 【样式修复】
+    // 移除 height: 100%
+    // 播放器自己有 height: 50px, 我们只需要给个最小高度
+    min-height: 50px;
+  }
+</style>
diff --git a/src/components/pdf-player/index.vue b/src/components/pdf-player/index.vue
new file mode 100644
index 0000000..4160c24
--- /dev/null
+++ b/src/components/pdf-player/index.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+  import { useAppStore } from '@/store';
+  import { computed, ref, watch } from 'vue';
+
+  const appStore = useAppStore();
+
+  interface Props {
+    url: string; // 文件 URL
+  }
+  const props = defineProps<Props>();
+
+  const isLoading = ref(true);
+
+  /** 避免皮肤命名不一致 */
+  const theme = computed(() => {
+    return appStore.theme === 'dark' ? 'dark' : 'light';
+  });
+
+  const handleLoad = () => {
+    isLoading.value = false;
+  };
+
+  watch(
+    () => props.url,
+    (newUrl) => {
+      if (newUrl) {
+        isLoading.value = true;
+      }
+    },
+    {
+      immediate: true, // 立即执行一次, 保证组件初始加载时 isLoading = true
+    }
+  );
+</script>
+
+<template>
+  <div class="pdf-viewer-container">
+    <div v-if="isLoading" class="loading-overlay">
+      <a-spin :size="32" tip="PDF 正在加载中..." />
+    </div>
+
+    <iframe
+      v-show="!isLoading"
+      :src="props.url"
+      width="100%"
+      height="100%"
+      @load="handleLoad"
+    ></iframe>
+  </div>
+</template>
+
+<style scoped lang="less">
+  .pdf-viewer-container {
+    width: 100%;
+    height: 100%;
+
+    position: relative;
+    overflow: hidden;
+  }
+
+  .loading-overlay {
+    // 遮罩层样式
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    // 使用 Arco 的背景色, 确保和你的明/暗主题一致
+    background-color: var(--color-bg-2);
+    z-index: 10;
+  }
+
+  iframe {
+    border: none; // 移除默认的边框
+  }
+</style>
diff --git a/src/views/files/components/file-previewer.vue b/src/views/files/components/file-previewer.vue
index e0d621c..4c5a538 100644
--- a/src/views/files/components/file-previewer.vue
+++ b/src/views/files/components/file-previewer.vue
@@ -1,8 +1,20 @@
 <script setup lang="ts">
-  import { computed } from 'vue';
+  import { computed, defineAsyncComponent } from 'vue';
   import { IconQuestion } from '@arco-design/web-vue/es/icon';
-  import VideoPlayer from '@/components/video-player/index.vue';
-  import CodePlayer from '@/components/code-player/index.vue';
+
+  /** 改为异步导入组件 */
+  const VideoPlayer = defineAsyncComponent(
+    () => import('@/components/video-player/index.vue')
+  );
+  const AudioPlayer = defineAsyncComponent(
+    () => import('@/components/audio-player/index.vue')
+  );
+  const CodePlayer = defineAsyncComponent(
+    () => import('@/components/code-player/index.vue')
+  );
+  const pdfPlayer = defineAsyncComponent(
+    () => import('@/components/pdf-player/index.vue')
+  );
 
   /** 文件预览组件 */
   interface FileInfo {
@@ -113,6 +125,14 @@
           <video-player :url="file.fileUrl" />
         </div>
 
+        <div v-if="fileType === 'audio'" class="audio-viewer">
+          <audio-player :url="file.fileUrl" :name="file.fileName" />
+        </div>
+
+        <div v-if="fileType === 'pdf'" class="pdf-viewer">
+          <pdf-player :url="file.fileUrl" />
+        </div>
+
         <div v-if="fileType === 'code-text'" class="code-text-viewer">
           <code-player :url="file.fileUrl" :language="fileExtension" />
         </div>
@@ -156,6 +176,8 @@
 
   .image-preview,
   .video-viewer,
+  .audio-viewer,
+  .pdf-viewer,
   .code-text-viewer,
   .unsupported-viewer {
     width: 100%;
-- 
Gitee