feat(personal): 优化个人中心头像上传功能

- 改进头像URL处理逻辑，智能识别相对路径和完整URL
- 兼容不同存储服务的返回格式（本地存储、MinIO、OSS）
- 本地存储返回相对路径时自动添加服务地址前缀
- MinIO和OSS返回完整URL时直接使用，无需额外处理
- 提升多存储服务环境下的用户体验

src/components/common/CoiImageViewer.vue

@@ -0,0 +1,395 @@
+<template>
+  <div class="coi-image-viewer">
+    <!-- 缩略图展示 -->
+    <div
+      class="thumbnail-container"
+      :style="{ width: `${width}px`, height: `${height}px` }"
+      @click="handlePreview"
+    >
+      <img
+        v-if="!imageError && src"
+        :src="src"
+        :alt="alt || 'image'"
+        class="thumbnail-image"
+        @load="handleImageLoad"
+        @error="handleImageError"
+      >
+      <div v-else class="error-placeholder">
+        <NIcon size="16" class="error-icon">
+          <IconParkOutlinePic />
+        </NIcon>
+        <span class="error-text">加载失败</span>
+      </div>
+
+      <!-- 悬停遮罩层 -->
+      <div class="hover-overlay">
+        <NIcon size="18" class="preview-icon">
+          <IconParkOutlinePreviewOpen />
+        </NIcon>
+        <span class="preview-text">点击预览</span>
+      </div>
+
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading-overlay">
+        <NSpin size="small" />
+      </div>
+    </div>
+
+    <!-- 大图预览弹框 -->
+    <NModal
+      v-model:show="previewVisible"
+      preset="card"
+      :title="modalTitle"
+      :style="{ width: '90%', maxWidth: '1200px' }"
+      :mask-closable="true"
+      :closable="true"
+      :auto-focus="false"
+      :trap-focus="false"
+    >
+      <div class="preview-container">
+        <img
+          v-if="!previewError"
+          :src="src"
+          :alt="alt || 'preview'"
+          class="preview-image"
+          @load="handlePreviewLoad"
+          @error="handlePreviewError"
+        >
+        <div v-else class="preview-error">
+          <NIcon size="48" class="error-icon">
+            <IconParkOutlinePic />
+          </NIcon>
+          <p class="error-message">
+            图片加载失败
+          </p>
+          <p class="error-url">
+            {{ src }}
+          </p>
+        </div>
+
+        <!-- 预览加载状态 -->
+        <div v-if="previewLoading" class="preview-loading">
+          <NSpin size="large" />
+          <p class="loading-text">
+            图片加载中...
+          </p>
+        </div>
+      </div>
+
+      <!-- 弹框底部操作 -->
+      <template #action>
+        <NSpace justify="space-between">
+          <NSpace>
+            <NButton size="small" @click="handleDownload">
+              <template #icon>
+                <NIcon><IconParkOutlineDownload /></NIcon>
+              </template>
+              下载图片
+            </NButton>
+            <NButton size="small" @click="handleCopyUrl">
+              <template #icon>
+                <NIcon><IconParkOutlineCopy /></NIcon>
+              </template>
+              复制链接
+            </NButton>
+          </NSpace>
+          <NButton type="primary" @click="previewVisible = false">
+            关闭
+          </NButton>
+        </NSpace>
+      </template>
+    </NModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { coiMsgError, coiMsgSuccess } from '@/utils/coi'
+import IconParkOutlinePic from '~icons/icon-park-outline/pic'
+import IconParkOutlinePreviewOpen from '~icons/icon-park-outline/preview-open'
+import IconParkOutlineDownload from '~icons/icon-park-outline/download'
+import IconParkOutlineCopy from '~icons/icon-park-outline/copy'
+
+interface Props {
+  /** 图片链接 */
+  src: string | undefined
+  /** 图片描述 */
+  alt?: string
+  /** 缩略图宽度 */
+  width?: number
+  /** 缩略图高度 */
+  height?: number
+  /** 是否可以预览 */
+  previewable?: boolean
+  /** 预览弹框标题 */
+  title?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  alt: '',
+  width: 50,
+  height: 40,
+  previewable: true,
+  title: '图片预览',
+})
+
+// 缩略图状态
+const loading = ref(true)
+const imageError = ref(false)
+
+// 预览状态
+const previewVisible = ref(false)
+const previewLoading = ref(false)
+const previewError = ref(false)
+
+// 计算弹框标题
+const modalTitle = computed(() => {
+  return props.title || props.alt || '图片预览'
+})
+
+// 缩略图加载完成
+function handleImageLoad() {
+  loading.value = false
+  imageError.value = false
+}
+
+// 缩略图加载错误
+function handleImageError() {
+  loading.value = false
+  imageError.value = true
+}
+
+// 点击预览
+function handlePreview() {
+  if (!props.previewable || imageError.value) {
+    return
+  }
+
+  previewVisible.value = true
+  previewLoading.value = true
+  previewError.value = false
+}
+
+// 预览图片加载完成
+function handlePreviewLoad() {
+  previewLoading.value = false
+  previewError.value = false
+}
+
+// 预览图片加载错误
+function handlePreviewError() {
+  previewLoading.value = false
+  previewError.value = true
+}
+
+// 下载图片
+async function handleDownload() {
+  try {
+    const link = document.createElement('a')
+    link.href = props.src
+    link.download = props.alt || 'image'
+    link.target = '_blank'
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    coiMsgSuccess('下载已开始')
+  }
+  catch {
+    coiMsgError('下载失败，请重试')
+  }
+}
+
+// 复制图片链接
+async function handleCopyUrl() {
+  try {
+    await navigator.clipboard.writeText(props.src)
+    coiMsgSuccess('链接已复制到剪贴板')
+  }
+  catch {
+    coiMsgError('复制失败，请手动复制')
+  }
+}
+
+// 重置状态（当src变化时）
+watch(
+  () => props.src,
+  () => {
+    loading.value = true
+    imageError.value = false
+    previewError.value = false
+  },
+  { immediate: true },
+)
+</script>
+
+<style scoped>
+.coi-image-viewer {
+  display: inline-block;
+}
+
+.thumbnail-container {
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background: var(--card-color);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.thumbnail-container:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.thumbnail-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.thumbnail-container:hover .thumbnail-image {
+  transform: scale(1.05);
+}
+
+/* 当组件被设置为100%宽高时的样式调整 */
+.coi-image-viewer.w-full.h-full .thumbnail-container {
+  width: 100% !important;
+  height: 100% !important;
+  border-radius: 0;
+}
+
+.error-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--card-color);
+  color: var(--text-color-3);
+  border: 1px dashed var(--border-color);
+}
+
+.error-icon {
+  margin-bottom: 4px;
+  color: var(--text-color-3);
+}
+
+.error-text {
+  font-size: 10px;
+  color: var(--text-color-3);
+}
+
+.hover-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  color: white;
+}
+
+.thumbnail-container:hover .hover-overlay {
+  opacity: 1;
+}
+
+.preview-icon {
+  margin-bottom: 4px;
+}
+
+.preview-text {
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--card-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-container {
+  position: relative;
+  min-height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--body-color);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 70vh;
+  object-fit: contain;
+  border-radius: 4px;
+}
+
+.preview-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-color-3);
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.error-message {
+  font-size: 16px;
+  margin: 16px 0 8px 0;
+  color: var(--text-color-2);
+}
+
+.error-url {
+  font-size: 12px;
+  color: var(--text-color-3);
+  word-break: break-all;
+  max-width: 500px;
+}
+
+.preview-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--modal-color);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-text {
+  margin-top: 16px;
+  color: var(--text-color-2);
+  font-size: 14px;
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .preview-container {
+    min-height: 200px;
+  }
+
+  .preview-image {
+    max-height: 50vh;
+  }
+}
+</style>

src/service/api/system/file/types.ts

@@ -59,12 +59,14 @@ export interface FileUploadResult {
 // 文件服务类型枚举
 export enum FileServiceType {
   LOCAL = 'LOCAL', // 本地存储
+  MINIO = 'MINIO', // MinIO对象存储
   OSS = 'OSS', // 阿里云对象存储
 }
 
 // 文件服务类型映射（用于数据库存储）
 export const FileServiceTypeMapping = {
   LOCAL: '1',
+  MINIO: '2',
   OSS: '3',
 } as const
 
@@ -95,11 +97,13 @@ export const FILE_TYPE_OPTIONS = [
 // 文件服务类型选项
 export const FILE_SERVICE_OPTIONS = [
   { label: '本地存储', value: FileServiceType.LOCAL },
+  { label: 'MinIO存储', value: FileServiceType.MINIO },
   { label: '阿里云OSS', value: FileServiceType.OSS },
 ]
 
 // 文件服务类型数据库值选项（用于搜索）
 export const FILE_SERVICE_DB_OPTIONS = [
   { label: '本地存储', value: '1' },
+  { label: 'MinIO存储', value: '2' },
   { label: '阿里云OSS', value: '3' },
 ]

src/service/api/system/picture/types.ts

@@ -59,6 +59,7 @@ export interface PictureUploadResult {
 // 图片服务类型枚举
 export enum PictureServiceType {
   LOCAL = '1', // 本地存储
+  MINIO = '2', // MinIO对象存储
   OSS = '3', // 阿里云对象存储
 }
 
@@ -89,5 +90,6 @@ export const PICTURE_TYPE_OPTIONS = [
 // 图片服务类型选项
 export const PICTURE_SERVICE_OPTIONS = [
   { label: '本地存储', value: PictureServiceType.LOCAL },
+  { label: 'MinIO存储', value: PictureServiceType.MINIO },
   { label: '阿里云OSS', value: PictureServiceType.OSS },
 ]

src/views/personal-center/index.vue

@@ -433,9 +433,15 @@ async function handleAvatarChange(event: Event) {
       uploading.value = true
       const result = await uploadAvatar(file, 2)
       if (result.isSuccess) {
-        // 使用配置文件中的服务地址构建头像访问URL
+        // 智能处理头像访问URL
+        let avatarUrl = result.data.fileUploadPath
+
+        // 如果返回的不是完整URL（如本地存储返回相对路径），则添加服务地址前缀
+        if (!avatarUrl.startsWith('http://') && !avatarUrl.startsWith('https://')) {
           const baseUrl = serviceConfig[import.meta.env.MODE].url
-        const avatarUrl = `${baseUrl}${result.data.fileUploadPath}`
+          avatarUrl = `${baseUrl}${avatarUrl}`
+        }
+        // 如果返回的是完整URL（如MinIO、OSS），直接使用
 
         basicForm.value.avatar = avatarUrl
         personalData.value.avatar = avatarUrl

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,
+          alt: row.fileName,
-          height: 30,
+          width: 50,
-          objectFit: 'cover',
+          height: 40,
-          previewDisabled: true,
+          previewable: true,
-          onClick: () => handleImagePreview(row.filePath!, row.fileName),
+          title: `文件预览 - ${row.fileName}`,
-          class: 'cursor-pointer rounded border',
         })
       }
 
@@ -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
-}
-
 // 文件上传相关函数
 
 // 打开上传弹框

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">
+                      <div class="aspect-square relative overflow-hidden bg-gray-100 flex items-center justify-center">
-                        <img
+                        <CoiImageViewer
                           :src="picture.picturePath"
                           :alt="picture.pictureName"
-                          class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+                          :width="200"
-                          @error="handleImageError"
+                          :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,
+          alt: row.pictureName,
-          height: 30,
+          width: 50,
-          objectFit: 'cover',
+          height: 40,
-          previewDisabled: true,
+          previewable: true,
-          class: 'rounded border',
+          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] || '未知'