From 7f3e0dc52f053561011faf57119e1fe1ad004b5a Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Sat, 10 May 2025 08:48:57 +0000
Subject: [PATCH] feat(editor): improve status display in image block (#12194)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes: [BS-3451](https://linear.app/affine-design/issue/BS-3451/image-block-status-组件)
---
 .../image/src/components/page-image-block.ts    | 17 ++++++++++++++++-
 .../blocks/image/src/image-edgeless-block.ts    | 15 +++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/blocksuite/affine/blocks/image/src/components/page-image-block.ts b/blocksuite/affine/blocks/image/src/components/page-image-block.ts
index a3cfdd821e..592fe65946 100644
--- a/blocksuite/affine/blocks/image/src/components/page-image-block.ts
+++ b/blocksuite/affine/blocks/image/src/components/page-image-block.ts
@@ -51,6 +51,12 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
       background: ${unsafeCSSVarV2('loading/backgroundLayer')};
     }
 
+    affine-page-image .affine-image-status {
+      position: absolute;
+      left: 18px;
+      bottom: 18px;
+    }
+
     affine-page-image .resizable-img {
       position: relative;
       max-width: 100%;
@@ -354,7 +360,7 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
       ? ImageSelectedRect(this._doc.readonly)
       : null;
 
-    const { loading, icon } = this.state;
+    const { loading, error, icon, description } = this.state;
 
     return html`
       <div class="resizable-img" style=${styleMap(imageSize)}>
@@ -371,6 +377,15 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
       </div>
 
       ${when(loading, () => html`<div class="loading">${icon}</div>`)}
+      ${when(
+        error && description,
+        () =>
+          html`<affine-resource-status
+            class="affine-image-status"
+            .message=${description}
+            .reload=${() => this.block.refreshData()}
+          ></affine-resource-status>`
+      )}
     `;
   }
 
diff --git a/blocksuite/affine/blocks/image/src/image-edgeless-block.ts b/blocksuite/affine/blocks/image/src/image-edgeless-block.ts
index bd612457c4..3da51550ba 100644
--- a/blocksuite/affine/blocks/image/src/image-edgeless-block.ts
+++ b/blocksuite/affine/blocks/image/src/image-edgeless-block.ts
@@ -42,6 +42,12 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
       background: ${unsafeCSSVarV2('loading/backgroundLayer')};
     }
 
+    affine-edgeless-image .affine-image-status {
+      position: absolute;
+      left: 18px;
+      bottom: 18px;
+    }
+
     affine-edgeless-image .resizable-img,
     affine-edgeless-image .resizable-img img {
       width: 100%;
@@ -136,6 +142,15 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
               resovledState.loading,
               () => html`<div class="loading">${loadingIcon}</div>`
             )}
+            ${when(
+              resovledState.error && resovledState.description,
+              () =>
+                html`<affine-resource-status
+                  class="affine-image-status"
+                  .message=${resovledState.description}
+                  .reload=${() => this.refreshData()}
+                ></affine-resource-status>`
+            )}
           `,
           () =>
             html`<affine-image-fallback-card