From a6dc2f90aec625824eeb677aed2aa6971893f3a1 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Mon, 22 Sep 2025 22:58:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(file):=20=E4=BC=98=E5=8C=96=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增MinIO存储服务选项支持
- 集成CoiImageViewer组件替换原生图片预览功能
- 移除冗余的图片预览弹框代码，提升代码简洁性
- 优化图片文件的展示效果和预览体验
- 统一存储服务类型的标签显示样式
---
 src/views/system/file/index.vue | 51 +++++++--------------------------
 1 file changed, 10 insertions(+), 41 deletions(-)

diff --git a/src/views/system/file/index.vue b/src/views/system/file/index.vue
index 8bf1837..4a962c3 100644
--- a/src/views/system/file/index.vue
+++ b/src/views/system/file/index.vue
@@ -217,6 +217,7 @@
                 :options="[
                   { label: 'LOCAL', value: 'LOCAL' },
                   { label: 'OSS', value: 'OSS' },
+                  { label: 'MINIO', value: 'MINIO' },
                 ]"
               />
             </n-form-item>
@@ -271,36 +272,16 @@
         </div>
       </template>
     </CoiDialog>
-
-    <!-- 图片预览弹框 -->
-    <n-modal
-      v-model:show="imagePreviewVisible"
-      preset="card"
-      title="图片预览"
-      :style="{ width: '80%', maxWidth: '800px' }"
-      :mask-closable="true"
-    >
-      <div class="text-center">
-        <img
-          v-if="previewImageUrl"
-          :src="previewImageUrl"
-          :alt="previewImageName"
-          class="max-w-full max-h-96 mx-auto"
-        >
-        <div class="mt-2 text-sm text-gray-500">
-          {{ previewImageName }}
-        </div>
-      </div>
-    </n-modal>
   </div>
 </template>
 
 <script setup lang="ts">
 import { h, onMounted, ref } from 'vue'
-import { NButton, NIcon, NImage, NP, NPopconfirm, NSpace, NTag, NText, NUpload, NUploadDragger } from 'naive-ui'
+import { NButton, NIcon, NP, NPopconfirm, NSpace, NTag, NText, NUpload, NUploadDragger } from 'naive-ui'
 import type { DataTableColumns, DataTableInst, FormInst, UploadFileInfo, UploadInst } from 'naive-ui'
 import CoiEmpty from '@/components/common/CoiEmpty.vue'
 import CoiPagination from '@/components/common/CoiPagination.vue'
+import CoiImageViewer from '@/components/common/CoiImageViewer.vue'
 import { coiMsgBox, coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
 import { usePermission } from '@/hooks/usePermission'
 import { PERMISSIONS } from '@/constants/permissions'
@@ -360,11 +341,6 @@ const searchForm = ref<SysFileSearchForm>({
   fileType: '0', // 默认全部
 })
 
-// 图片预览相关
-const imagePreviewVisible = ref(false)
-const previewImageUrl = ref('')
-const previewImageName = ref('')
-
 // 文件上传相关
 const uploadFileList = ref<UploadFileInfo[]>([])
 const uploading = ref(false)
@@ -458,14 +434,13 @@ const columns: DataTableColumns<SysFileVo> = [
       )
 
       if (isImage && row.filePath) {
-        return h(NImage, {
+        return h(CoiImageViewer, {
           src: row.filePath,
-          width: 45,
-          height: 30,
-          objectFit: 'cover',
-          previewDisabled: true,
-          onClick: () => handleImagePreview(row.filePath!, row.fileName),
-          class: 'cursor-pointer rounded border',
+          alt: row.fileName,
+          width: 50,
+          height: 40,
+          previewable: true,
+          title: `文件预览 - ${row.fileName}`,
         })
       }
 
@@ -481,6 +456,7 @@ const columns: DataTableColumns<SysFileVo> = [
     render: (row) => {
       const serviceMap: Record<string, { type: 'success' | 'info' | 'warning', text: string }> = {
         1: { type: 'success', text: '本地存储' },
+        2: { type: 'info', text: 'MinIO存储' },
         3: { type: 'warning', text: '阿里云OSS' },
       }
       const config = serviceMap[row.fileService] || { type: 'info', text: '未知' }
@@ -676,13 +652,6 @@ function handleDownload(row: SysFileVo) {
   }
 }
 
-// 图片预览
-function handleImagePreview(url: string, name: string) {
-  previewImageUrl.value = url
-  previewImageName.value = name
-  imagePreviewVisible.value = true
-}
-
 // 文件上传相关函数
 
 // 打开上传弹框