换用el-image-viewer

src/views/api/SourceImage.vue

@@ -72,10 +72,16 @@
       :data="labels"
     ></el-transfer>
   </el-dialog>
+  <el-image-viewer
+    v-if="previewVisible"
+    :url-list="previewUrlList"
+    :initial-index="previewIndex"
+    @close="previewVisible = false"
+  />
 </div>
 </template>
 <script setup lang="ts">
-import { ref, computed, h } from 'vue'
+import { ref, computed } from 'vue'
 import { useStore } from 'vuex'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import prettyBytes from 'pretty-bytes'
@@ -94,6 +100,9 @@ const labelList = ref<string[]>([])
 const curId = ref<string | null>(null)
 const modifyModal = ref(false)
 const isUploading = ref(false)
+const previewVisible = ref(false)
+const previewUrlList = ref<string[]>([])
+const previewIndex = ref(0)
 
 function renderFunc(h: Function, option: any) {
   return h('span', null, option.label)
@@ -152,13 +161,10 @@ function uploadError(error: Error): void {
   ElMessage.error(error.message)
 }
 function preview(row: SourceImageModel): void {
-  ElMessageBox({
-    title: '图片预览',
-    message: h('img', { style: `width:500px`, src: `/api/v2/common/randomBg?id=${row._id}` }, ''),
-    showCancelButton: false,
-    confirmButtonText: '关闭',
-    customStyle: {width: '530px', maxWidth: 'unset'}
-  }).catch(() => {})
+  const index = sourceImageData.value.findIndex(item => item._id === row._id)
+  previewUrlList.value = sourceImageData.value.map(item => `/api/v2/common/randomBg?id=${item._id}`)
+  previewIndex.value = index >= 0 ? index : 0
+  previewVisible.value = true
 }
 function modifyTags(item: SourceImageModel): void {
   curModifyLabels.value.length = 0