From 821b80d09af4ad341096f6d77b1fdb84f1a41018 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Mon, 22 Sep 2025 23:00:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(picture):=20=E4=BC=98=E5=8C=96=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=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组件替换原生NImage组件
- 改进网格视图和表格视图的图片展示效果
- 移除冗余的图片错误处理函数，使用组件内置处理
- 统一存储服务类型的标签显示样式
- 提升图片预览和下载功能的用户体验
---
 src/views/system/picture/index.vue | 37 +++++++++++++++---------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/views/system/picture/index.vue b/src/views/system/picture/index.vue
index 652540e..021a593 100644
--- a/src/views/system/picture/index.vue
+++ b/src/views/system/picture/index.vue
@@ -191,13 +191,16 @@
                   <template #trigger>
                     <div class="picture-card group relative bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow cursor-pointer">
                       <!-- 图片预览 -->
-                      <div class="aspect-square relative overflow-hidden bg-gray-100">
-                        <img
+                      <div class="aspect-square relative overflow-hidden bg-gray-100 flex items-center justify-center">
+                        <CoiImageViewer
                           :src="picture.picturePath"
                           :alt="picture.pictureName"
-                          class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
-                          @error="handleImageError"
-                        >
+                          :width="200"
+                          :height="200"
+                          :previewable="true"
+                          :title="`图片预览 - ${picture.pictureName}`"
+                          class="w-full h-full"
+                        />
                       </div>
 
                       <!-- 图片信息 -->
@@ -344,6 +347,7 @@
                 :options="[
                   { label: 'LOCAL', value: 'LOCAL' },
                   { label: 'OSS', value: 'OSS' },
+                  { label: 'MINIO', value: 'MINIO' },
                 ]"
               />
             </n-form-item>
@@ -402,11 +406,12 @@
 
 <script setup lang="ts">
 import { h, onMounted, ref } from 'vue'
-import { NButton, NIcon, NImage, NP, NPopconfirm, NSpace, NSpin, NTag, NText, NTooltip, NUpload, NUploadDragger } from 'naive-ui'
+import { NButton, NIcon, NP, NPopconfirm, NSpace, NSpin, NTag, NText, NTooltip, NUpload, NUploadDragger } from 'naive-ui'
 import type { DataTableColumns, DataTableInst, FormInst, UploadFileInfo, UploadInst } from 'naive-ui'
 import CoiEmpty from '@/components/common/CoiEmpty.vue'
 import CoiDialog from '@/components/common/CoiDialog.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'
@@ -570,13 +575,13 @@ const columns: DataTableColumns<SysPictureVo> = [
     },
     render: (row) => {
       if (row.picturePath) {
-        return h(NImage, {
+        return h(CoiImageViewer, {
           src: row.picturePath,
-          width: 45,
-          height: 30,
-          objectFit: 'cover',
-          previewDisabled: true,
-          class: 'rounded border',
+          alt: row.pictureName,
+          width: 50,
+          height: 40,
+          previewable: true,
+          title: `图片预览 - ${row.pictureName}`,
         })
       }
       return '--'
@@ -590,6 +595,7 @@ const columns: DataTableColumns<SysPictureVo> = [
     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.pictureService] || { type: 'info', text: '未知' }
@@ -795,16 +801,11 @@ function handleDownload(row: SysPictureVo) {
   }
 }
 
-// 图片加载错误处理
-function handleImageError(e: Event) {
-  const img = e.target as HTMLImageElement
-  img.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjRjVGNUY1Ii8+CjxwYXRoIGQ9Ik0yMCAyMEw0NCA0NEwyMCA0NFYyMFoiIGZpbGw9IiNEOUQ5RDkiLz4KPGNpcmNsZSBjeD0iMjgiIGN5PSIyOCIgcj0iNCIgZmlsbD0iI0Q5RDlEOSIvPgo8L3N2Zz4K'
-}
-
 // 获取图片服务类型文本
 function getPictureServiceText(serviceType: string): string {
   const serviceMap: Record<string, string> = {
     1: '本地存储',
+    2: 'MinIO存储',
     3: '阿里云OSS',
   }
   return serviceMap[serviceType] || '未知'