From a8f67ab71736c35a9521842ed0c3121cc6b6204b Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 7 Mar 2026 11:21:03 +0800
Subject: [PATCH] =?UTF-8?q?!335=20fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E5=A4=B4=E5=83=8F=E6=97=B6=EF=BC=8C=E5=A6=82=E6=9E=9C?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=8A=A0=E8=BD=BD=E5=A4=B1=E8=B4=A5=EF=BC=8C?=
 =?UTF-8?q?=E5=BC=B9=E6=A1=86=E4=B8=80=E7=9B=B4loading=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=EF=BC=8C=E9=92=88=E5=AF=B9=20ele=20=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/cropper/cropper-modal.vue        | 13 +++++++++++--
 apps/web-ele/src/components/cropper/cropper.vue     |  5 +++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/apps/web-ele/src/components/cropper/cropper-modal.vue b/apps/web-ele/src/components/cropper/cropper-modal.vue
index cf80965ad..5355f67fd 100644
--- a/apps/web-ele/src/components/cropper/cropper-modal.vue
+++ b/apps/web-ele/src/components/cropper/cropper-modal.vue
@@ -41,8 +41,8 @@ const [Modal, modalApi] = useVbenModal({
   onConfirm: handleOk,
   onOpenChange(isOpen) {
     if (isOpen) {
-      // 打开时，进行 loading 加载。后续 CropperImage 组件加载完毕，会自动关闭 loading（通过 handleReady）
-      modalLoading(true);
+      // 只有存在可加载图片时才显示 loading，避免空图或异常链接导致一直 loading
+      modalLoading(!!src.value);
     } else {
       // 关闭时，清空右侧预览
       previewSource.value = '';
@@ -65,10 +65,14 @@ function handleBeforeUpload(file: File) {
   reader.readAsDataURL(file);
   src.value = '';
   previewSource.value = '';
+  modalLoading(true);
   reader.addEventListener('load', (e) => {
     src.value = (e.target?.result as string) ?? '';
     filename = file.name;
   });
+  reader.addEventListener('error', () => {
+    modalLoading(false);
+  });
   return false;
 }
 
@@ -82,6 +86,10 @@ function handleReady(cropperInstance: CropperType) {
   modalLoading(false);
 }
 
+function handleCropperError() {
+  modalLoading(false);
+}
+
 function handlerToolbar(event: string, arg?: number) {
   if (event === 'scaleX') {
     scaleX = arg = scaleX === -1 ? 1 : -1;
@@ -133,6 +141,7 @@ async function handleOk() {
             :src="src"
             height="300px"
             @cropend="handleCropend"
+            @cropend-error="handleCropperError"
             @ready="handleReady"
           />
         </div>
diff --git a/apps/web-ele/src/components/cropper/cropper.vue b/apps/web-ele/src/components/cropper/cropper.vue
index 5cdf1bc36..d14f75351 100644
--- a/apps/web-ele/src/components/cropper/cropper.vue
+++ b/apps/web-ele/src/components/cropper/cropper.vue
@@ -144,6 +144,10 @@ function getRoundedCanvas() {
   context.fill();
   return canvas;
 }
+
+function handleImageError() {
+  emit('cropendError');
+}
 </script>
 
 <template>
@@ -155,6 +159,7 @@ function getRoundedCanvas() {
       :crossorigin="crossorigin"
       :src="src"
       :style="getImageStyle"
+      @error="handleImageError"
       class="h-auto max-w-full"
     />
   </div>