refactor(upload): 优化图片预览逻辑，移除未使用的标题状态

重构图片预览功能，移除未使用的previewTitle状态，拆分handleCancel为handleOpenChange和handleAfterOpenChange以更精确控制预览状态

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() {
+  function handleOpenChange(isOpen: boolean) {
-    previewVisible.value = false;
+    previewVisible.value = isOpen;
-    previewTitle.value = '';
   }
 
   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,
+    handleOpenChange,
-    handleCancel,
     handlePreview,
+    handleAfterOpenChange,
   };
 }
 

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 } =
+const {
-  useImagePreview();
+  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,
+        open: previewVisible,
-        onVisibleChange: handleCancel,
+        onOpenChange: handleOpenChange,
+        afterOpenChange: handleAfterOpenChange,
       }"
-    >
+    />
-      <Image class="hidden" :src="previewImage" />
-    </ImagePreviewGroup>
   </div>
 </template>