fix: some

src/components/business/VoucherUpload.vue

@@ -28,9 +28,10 @@
         <div class="voucher-upload__file-item">
           <img
             v-if="isUploadImage(file)"
-            class="voucher-upload__file-cover"
+            class="voucher-upload__file-cover voucher-upload__file-cover--image"
             :src="getUploadFileUrl(file)"
             alt=""
+            @click.stop="openImagePreview(file)"
           />
           <div v-else class="voucher-upload__file-cover voucher-upload__file-cover--default">
             <ElIcon><Document /></ElIcon>
@@ -47,6 +48,13 @@
         </div>
       </template>
     </ElUpload>
+    <ElImageViewer
+      v-if="previewVisible"
+      :url-list="previewUrls"
+      :initial-index="previewIndex"
+      teleported
+      @close="previewVisible = false"
+    />
   </div>
 </template>
 
@@ -94,6 +102,7 @@
 
   const rootRef = ref<HTMLElement>()
   const uploadRef = ref<UploadInstance>()
+  const currentUploadFiles = ref<UploadFile[]>([])
   const uploadingCount = ref(0)
   const voucherFileKeyMap = new Map<number, string>()
   const voucherFileMetadataMap = new Map<number, RefundAttachment>()
@@ -131,6 +140,7 @@
     removedUploadUids.clear()
     selectedUploadUids.clear()
     revokeAllFileObjectUrls()
+    currentUploadFiles.value = []
     uploadRef.value?.clearFiles()
     if (emitValue) {
       emitVoucherKeys()
@@ -192,6 +202,22 @@
     uploadRef.value?.handleRemove(uploadFile)
   }
 
+  const previewVisible = ref(false)
+  const previewUrls = ref<string[]>([])
+  const previewIndex = ref(0)
+
+  const openImagePreview = (uploadFile: UploadFile) => {
+    const urls = currentUploadFiles.value
+      .filter((file) => isUploadImage(file))
+      .map((file) => getUploadFileUrl(file))
+      .filter((url) => !!url)
+    if (!urls.length) return
+
+    previewUrls.value = urls
+    previewIndex.value = Math.max(0, urls.indexOf(getUploadFileUrl(uploadFile)))
+    previewVisible.value = true
+  }
+
   // accept 支持扩展名（.csv）、精确 MIME（image/jpeg）与通配 MIME（image/*）
   const isAcceptMatched = (file: File) => {
     if (!props.accept) return true
@@ -221,7 +247,9 @@
     return `只能上传 ${props.accept} 格式的文件`
   }
 
-  const handleFileChange = async (uploadFile: UploadFile) => {
+  const handleFileChange = async (uploadFile: UploadFile, uploadFiles: UploadFile[]) => {
+    currentUploadFiles.value = [...uploadFiles]
+
     const file = uploadFile.raw
     if (!file) return
 
@@ -320,7 +348,8 @@
     }
   }
 
-  const handleRemoveFile = (uploadFile: UploadFile) => {
+  const handleRemoveFile = (uploadFile: UploadFile, uploadFiles: UploadFile[]) => {
+    currentUploadFiles.value = [...uploadFiles]
     removedUploadUids.add(uploadFile.uid)
     selectedUploadUids.delete(uploadFile.uid)
     revokeFileObjectUrl(uploadFile.uid)
@@ -478,6 +507,10 @@
       border-radius: 6px;
     }
 
+    &__file-cover--image {
+      cursor: zoom-in;
+    }
+
     &__file-cover--default {
       display: flex;
       align-items: center;