feat: 添加图片预览功能，支持多图展示和缩略图显示

Author: lvzhenbo

components.d.ts

@@ -52,6 +52,7 @@ declare module 'vue' {
     NHighlight: typeof import('naive-ui')['NHighlight']
     NIcon: typeof import('naive-ui')['NIcon']
     NImage: typeof import('naive-ui')['NImage']
+    NImageGroup: typeof import('naive-ui')['NImageGroup']
     NInput: typeof import('naive-ui')['NInput']
     NInputGroup: typeof import('naive-ui')['NInputGroup']
     NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
@@ -135,6 +136,7 @@ declare global {
   const NHighlight: typeof import('naive-ui')['NHighlight']
   const NIcon: typeof import('naive-ui')['NIcon']
   const NImage: typeof import('naive-ui')['NImage']
+  const NImageGroup: typeof import('naive-ui')['NImageGroup']
   const NInput: typeof import('naive-ui')['NInput']
   const NInputGroup: typeof import('naive-ui')['NInputGroup']
   const NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']

src/api/types/file.ts

@@ -265,6 +265,14 @@ export interface MyFile {
    */
   upt: number;
   v_img: string;
+  /**
+   * 图片缩略图地址
+   */
+  thumb?: string;
+  /**
+   * 原图地址
+   */
+  uo?: string;
 }
 
 export interface FileLabel {

src/components/FileExplorer/FileExplorer.vue

@@ -573,5 +573,9 @@
     getFileList();
   }
 
-  defineExpose({ navigate, refresh });
+  function getItems(): MyFile[] {
+    return data.value;
+  }
+
+  defineExpose({ navigate, refresh, getItems });
 </script>

src/components/FileExplorer/components/FileItemView/FileItemView.vue

@@ -68,7 +68,8 @@
 
     <!-- 图标 -->
     <div class="w-16 h-16 flex items-center justify-center mb-2">
-      <span class="text-4xl leading-none">{{ icon }}</span>
+      <img v-if="item.thumb" :src="item.thumb" class="w-full h-full object-cover rounded" />
+      <span v-else class="text-4xl leading-none">{{ icon }}</span>
     </div>
 
     <!-- 文件名 -->
@@ -103,7 +104,8 @@
 
     <!-- 图标 -->
     <div class="w-8 h-8 flex items-center justify-center shrink-0">
-      <span class="text-xl leading-none">{{ icon }}</span>
+      <img v-if="item.thumb" :src="item.thumb" class="w-full h-full object-cover rounded" />
+      <span v-else class="text-xl leading-none">{{ icon }}</span>
     </div>
 
     <!-- 名称 -->

src/views/Home/HomeView.vue

@@ -1,19 +1,28 @@
 <template>
-  <FileExplorer
-    ref="explorerRef"
-    v-model:cid="cid"
-    v-model:view-mode="userStore.homeViewMode"
-    v-model:sort-config="userStore.homeSortConfig"
-    class="h-[calc(100vh-59px)]"
-    @download="handleDownload"
-    @batch-download="handleBatchDownload"
-    @upload-file="handleUploadFiles"
-    @upload-folder="handleUploadFolder"
-    @open-file="handleOpenFile"
-  />
+  <div>
+    <FileExplorer
+      ref="explorerRef"
+      v-model:cid="cid"
+      v-model:view-mode="userStore.homeViewMode"
+      v-model:sort-config="userStore.homeSortConfig"
+      class="h-[calc(100vh-59px)]"
+      @download="handleDownload"
+      @batch-download="handleBatchDownload"
+      @upload-file="handleUploadFiles"
+      @upload-folder="handleUploadFolder"
+      @open-file="handleOpenFile"
+    />
+    <NImageGroup
+      v-model:show="imgPreviewVisible"
+      v-model:current="imgPreviewIndex"
+      :src-list="imgPreviewList"
+      :render-toolbar="renderToolbar"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
+  import type { ImageRenderToolbarProps } from 'naive-ui';
   import { open } from '@tauri-apps/plugin-dialog';
   import { WebviewWindow } from '@tauri-apps/api/webviewWindow';
   import { emit, listen } from '@tauri-apps/api/event';
@@ -27,6 +36,9 @@
   const userStore = useUserStore();
   const explorerRef = useTemplateRef('explorerRef');
   const cid = ref('0');
+  const imgPreviewVisible = ref(false);
+  const imgPreviewList = ref<string[]>([]);
+  const imgPreviewIndex = ref(0);
 
   const { download: downloadFile, batchDownload: batchDownloadFiles } = useDownloadManager();
 
@@ -82,6 +94,20 @@
       } catch (e) {
         console.error(e);
       }
+    } else if (file.uo) {
+      // 收集当前目录下所有图片文件，支持多图预览
+      const allItems = explorerRef.value?.getItems() || [];
+      const imageFiles = allItems.filter((f) => f.uo);
+      if (imageFiles.length > 0) {
+        imgPreviewList.value = imageFiles.map((f) => f.uo!);
+        const idx = imageFiles.findIndex((f) => f.fid === file.fid);
+        imgPreviewIndex.value = idx >= 0 ? idx : 0;
+      } else {
+        // 兜底：至少预览当前点击的图片
+        imgPreviewList.value = [file.uo];
+        imgPreviewIndex.value = 0;
+      }
+      imgPreviewVisible.value = true;
     }
   };
 
@@ -161,4 +187,17 @@
       message.error('上传任务添加失败');
     }
   };
+
+  const renderToolbar = ({ nodes }: ImageRenderToolbarProps) => {
+    return [
+      nodes.prev,
+      nodes.next,
+      nodes.rotateCounterclockwise,
+      nodes.rotateClockwise,
+      nodes.resizeToOriginalSize,
+      nodes.zoomOut,
+      nodes.zoomIn,
+      nodes.close,
+    ];
+  };
 </script>