From fc6537d71b391842ec47b2189eb0112150149206 Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Thu, 18 Sep 2025 15:00:39 +0800
Subject: [PATCH] =?UTF-8?q?refactor(Upload):=20:recycle:=20=E5=8D=95?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=94=AF=E6=8C=81=E7=82=B9=E5=87=BB=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Upload/SingleImageUpload.vue | 47 ++++++++++++---------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/components/Upload/SingleImageUpload.vue b/src/components/Upload/SingleImageUpload.vue
index 72e7551d..b6759e36 100644
--- a/src/components/Upload/SingleImageUpload.vue
+++ b/src/components/Upload/SingleImageUpload.vue
@@ -12,13 +12,22 @@
     :on-error="onError"
   >
     <template #default>
-      <el-image v-if="modelValue" :src="modelValue" />
-      <el-icon v-if="modelValue" class="single-upload__delete-btn" @click.stop="handleDelete">
-        <CircleCloseFilled />
-      </el-icon>
-      <el-icon v-else class="single-upload__add-btn">
-        <Plus />
-      </el-icon>
+      <template v-if="modelValue">
+        <el-image
+          class="single-upload__image"
+          :src="modelValue"
+          :preview-src-list="[modelValue]"
+          @click.stop="handlePreview"
+        />
+        <el-icon class="single-upload__delete-btn" @click.stop="handleDelete">
+          <CircleCloseFilled />
+        </el-icon>
+      </template>
+      <template v-else>
+        <el-icon>
+          <Plus />
+        </el-icon>
+      </template>
     </template>
   </el-upload>
 </template>
@@ -138,6 +147,13 @@ function handleUpload(options: UploadRequestOptions) {
   });
 }
 
+/**
+ * 预览图片
+ */
+function handlePreview() {
+  console.log("预览图片,停止冒泡");
+}
+
 /**
  * 删除图片
  */
@@ -166,21 +182,14 @@ const onError = (error: any) => {
 
 <style scoped lang="scss">
 :deep(.el-upload--picture-card) {
-  width: v-bind("props.style.width");
-  height: v-bind("props.style.height");
+  position: relative;
+  width: v-bind("props.style.width ?? '150px'");
+  height: v-bind("props.style.height ?? '150px'");
 }
 
 .single-upload {
-  position: relative;
-  width: v-bind("props.style.width");
-  height: v-bind("props.style.height");
-  overflow: hidden;
-  cursor: pointer;
-  border: 1px var(--el-border-color) solid;
-  border-radius: 5px;
-
-  &:hover {
-    border-color: var(--el-color-primary);
+  &__image {
+    border-radius: 6px;
   }
 
   &__delete-btn {