diff --git a/src/assets/images/fti/image.png b/src/assets/images/fti/image.png
new file mode 100644
index 0000000000000000000000000000000000000000..46d66670c717746a0999af373b0fb82552f1ce5f
Binary files /dev/null and b/src/assets/images/fti/image.png differ
diff --git a/src/components/audio-player/index.vue b/src/components/audio-player/index.vue
index 8e9af450885a9501bac9e976810ba36e31de8e04..e28e789a91e69245baa6363461f7b6568d87aa97 100644
--- a/src/components/audio-player/index.vue
+++ b/src/components/audio-player/index.vue
@@ -115,38 +115,28 @@
 </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; // 给频谱一个固定的高度
+    height: 260px; // 给频谱一个固定的高度
     margin-bottom: 20px; // 和播放器拉开一点距离
   }
 
   /* 播放器控件的容器 */
   .player-container {
     width: 100%;
-    //max-width: 600px;
-
-    // 【样式修复】
-    // 移除 height: 100%
     // 播放器自己有 height: 50px, 我们只需要给个最小高度
     min-height: 50px;
   }
diff --git a/src/components/code-player/index.vue b/src/components/code-player/index.vue
index 9534fa0a39c24429a77da4e57b3e59314ea05875..9bea7b6b5c206d92191f31eab5e8b81258b2c2c5 100644
--- a/src/components/code-player/index.vue
+++ b/src/components/code-player/index.vue
@@ -47,6 +47,8 @@
         return 'go';
       case 'sh':
         return 'shell';
+      case 'vue':
+        return 'html';
       // 默认返回纯文本
       default:
         return 'plaintext';
diff --git a/src/utils/file-icon.ts b/src/utils/file-icon.ts
index 6c984c49a18c817ecaa39b643c8b0253d4870b61..05eedcefb47a887c909d7dbb1d1d586d90f5630d 100644
--- a/src/utils/file-icon.ts
+++ b/src/utils/file-icon.ts
@@ -94,6 +94,31 @@ export function getFileIconName(suffix: string): string {
   // Flash类型 - flash.png
   const flashTypes = ['swf'];
 
+  // 图片类型
+  const imageTypes: string[] = [
+    // 常见格式
+    'png',
+    'jpg',
+    'jpeg',
+    'gif',
+    'bmp',
+    'webp',
+    // 矢量格式
+    'svg',
+    // 图标格式
+    'ico',
+    // 高质量/原始格式
+    'tif',
+    'tiff',
+    // 现代图片格式
+    'avif',
+    'heic',
+    'heif',
+    // (可选) 设计软件格式
+    'psd', // Photoshop
+    'ai',  // Illustrator
+  ];
+
   // 按优先级匹配
   if (documentTypes[suffix]) {
     return documentTypes[suffix];
@@ -127,6 +152,10 @@ export function getFileIconName(suffix: string): string {
     return 'flash';
   }
 
+  if (imageTypes.includes(suffix)) {
+    return 'image';
+  }
+
   // 默认文件图标
   return 'file';
 }
diff --git a/src/views/files/components/file-previewer.vue b/src/views/files/components/file-previewer.vue
index 4c5a5389c3356d2d906a66b87957282cf1a47b76..8c97bf390d9a7e2b52f18f89c47d343b9e2c1e20 100644
--- a/src/views/files/components/file-previewer.vue
+++ b/src/views/files/components/file-previewer.vue
@@ -24,7 +24,7 @@
   }
 
   interface Props {
-    visible: boolean;
+    visible: false;
     file: FileInfo;
   }
 
@@ -72,6 +72,7 @@
         'go',
         'c',
         'cpp',
+        'vue',
       ].includes(ext)
     )
       return 'code-text';
@@ -85,14 +86,6 @@
     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');
@@ -101,18 +94,9 @@
 
 <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"
+      :visible="props.visible"
       :title="previewTitle"
       width="90vw"
       unmount-on-close
@@ -121,6 +105,15 @@
       @cancel="handleClose"
     >
       <div class="preview-container">
+        <div v-if="fileType === 'image'" class="image-preview">
+          <a-image
+            :src="file.fileUrl"
+            width="100%"
+            height="100%"
+            fit="contain"
+          ></a-image>
+        </div>
+
         <div v-if="fileType === 'video'" class="video-viewer">
           <video-player :url="file.fileUrl" />
         </div>