From 31b332a87f5d4699851287eef2a21bba17a49e8d Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Tue, 20 Jan 2026 11:48:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor(upload):=20=E4=BC=98=E5=8C=96=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E9=A2=84=E8=A7=88=E9=80=BB=E8=BE=91=EF=BC=8C=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E6=9C=AA=E4=BD=BF=E7=94=A8=E7=9A=84=E6=A0=87=E9=A2=98?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构图片预览功能，移除未使用的previewTitle状态，拆分handleCancel为handleOpenChange和handleAfterOpenChange以更精确控制预览状态
---
 .../src/components/upload/src/hook.ts         | 20 ++++++++-------
 .../components/upload/src/image-upload.vue    | 25 ++++++++++++-------
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/apps/web-antd/src/components/upload/src/hook.ts b/apps/web-antd/src/components/upload/src/hook.ts
index ae9ab8ca..327d43e9 100644
--- a/apps/web-antd/src/components/upload/src/hook.ts
+++ b/apps/web-antd/src/components/upload/src/hook.ts
@@ -44,12 +44,9 @@ export function useImagePreview() {
   const previewVisible = ref(false);
   // 预览的图片 url/base64
   const previewImage = ref('');
-  // 预览的图片名称
-  const previewTitle = ref('');
 
-  function handleCancel() {
-    previewVisible.value = false;
-    previewTitle.value = '';
+  function handleOpenChange(isOpen: boolean) {
+    previewVisible.value = isOpen;
   }
 
   async function handlePreview(file: UploadFile) {
@@ -64,16 +61,21 @@ export function useImagePreview() {
     const url = file.url ?? '';
     previewImage.value = url || file.preview || '';
     previewVisible.value = true;
-    previewTitle.value =
-      file.name || url.slice(Math.max(0, url.lastIndexOf('/') + 1));
+  }
+
+  function handleAfterOpenChange(open: boolean) {
+    if (!open) {
+      previewVisible.value = false;
+      previewImage.value = '';
+    }
   }
 
   return {
     previewVisible,
     previewImage,
-    previewTitle,
-    handleCancel,
+    handleOpenChange,
     handlePreview,
+    handleAfterOpenChange,
   };
 }
 
diff --git a/apps/web-antd/src/components/upload/src/image-upload.vue b/apps/web-antd/src/components/upload/src/image-upload.vue
index 8e60de66..a40da046 100644
--- a/apps/web-antd/src/components/upload/src/image-upload.vue
+++ b/apps/web-antd/src/components/upload/src/image-upload.vue
@@ -10,7 +10,7 @@ import type { BaseUploadProps, UploadEmits } from './props';
 import { $t, I18nT } from '@vben/locales';
 
 import { PlusOutlined, UploadOutlined } from '@ant-design/icons-vue';
-import { Image, ImagePreviewGroup, Upload } from 'antdv-next';
+import { Image, Upload } from 'antdv-next';
 import { isFunction } from 'lodash-es';
 
 import { uploadApi } from '#/api';
@@ -65,8 +65,13 @@ const {
   customRequest,
 } = useUpload(props, emit, ossIdList, 'image');
 
-const { previewVisible, previewImage, handleCancel, handlePreview } =
-  useImagePreview();
+const {
+  previewVisible,
+  previewImage,
+  handleOpenChange,
+  handlePreview,
+  handleAfterOpenChange,
+} = useImagePreview();
 
 function currentPreview(file: UploadFile) {
   // 有自定义预览逻辑走自定义
@@ -141,14 +146,16 @@ function currentPreview(file: UploadFile) {
       </I18nT>
     </slot>
 
-    <ImagePreviewGroup
+    <Image
+      v-if="previewImage"
+      class="hidden"
+      :src="previewImage"
       :preview="{
-        visible: previewVisible,
-        onVisibleChange: handleCancel,
+        open: previewVisible,
+        onOpenChange: handleOpenChange,
+        afterOpenChange: handleAfterOpenChange,
       }"
-    >
-      <Image class="hidden" :src="previewImage" />
-    </ImagePreviewGroup>
+    />
   </div>
 </template>