fix(editor): improve status display of attachments and images (#12573)

Closes: [BS-3564](https://linear.app/affine-design/issue/BS-3564/ui-embed-view-报错-ui-加-title) Closes: [BS-3454](https://linear.app/affine-design/issue/BS-3454/点击-reload-后应该隐藏-attachment-embed-view-左下角-status（待新状态）) <img width="807" alt="Screenshot 2025-05-28 at 17 23 26" src="https://github.com/user-attachments/assets/9ecc29f8-73c6-4441-bc38-dfe9bd876542" /> <img width="820" alt="Screenshot 2025-05-28 at 17 45 37" src="https://github.com/user-attachments/assets/68e6db17-a814-4df4-a9fa-067ca03dec30" />  ## Summary by CodeRabbit - **New Features** - Added support for retrying failed uploads of attachments and images, allowing users to re-upload files directly from the error status interface. - The error status dialog now dynamically displays "Retry" for upload failures and "Reload" for download failures, with appropriate actions for each. - **Enhancements** - Improved clarity and consistency in file type display and icon usage for attachments and citations. - Button labels in the attachment interface now have capitalized text for better readability. - **Bug Fixes** - Streamlined error handling and status updates for attachment and image uploads/downloads, reducing redundant UI elements.
2025-05-29 02:18:50 +00:00
parent de00040389
commit 5590cdd8f1
11 changed files with 159 additions and 47 deletions
--- a/blocksuite/affine/blocks/attachment/src/attachment-block.ts
+++ b/blocksuite/affine/blocks/attachment/src/attachment-block.ts
@@ -64,6 +64,11 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
    return this.resourceController.blobUrl$.value;
  }

+  get filetype() {
+    const name = this.model.props.name$.value;
+    return name.split('.').pop() ?? '';
+  }
+
  protected containerStyleMap = styleMap({
    position: 'relative',
    width: '100%',
@@ -212,13 +217,23 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
    );
  };

-  protected renderReloadButton = () => {
+  protected renderNormalButton = (needUpload: boolean) => {
+    const label = needUpload ? 'retry' : 'reload';
+    const run = async () => {
+      if (needUpload) {
+        await this.resourceController.upload();
+        return;
+      }
+
+      this.refreshData();
+    };
+
    return html`
      <button
        class="affine-attachment-content-button"
        @click=${(event: MouseEvent) => {
          event.stopPropagation();
-          this.refreshData();
+          run().catch(console.error);

          {
            const mode =
@@ -230,21 +245,28 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
                segment,
                page: `${segment} editor`,
                module: 'attachment',
-                control: 'reload',
+                control: label,
                category: 'card',
-                type: this.model.props.name.split('.').pop() ?? '',
+                type: this.filetype,
              });
          }
        }}
      >
-        ${ResetIcon()} Reload
+        ${ResetIcon()} ${label}
      </button>
    `;
  };

  protected renderWithHorizontal(
    classInfo: ClassInfo,
-    { icon, title, description, kind, state }: AttachmentResolvedStateInfo
+    {
+      icon,
+      title,
+      description,
+      kind,
+      state,
+      needUpload,
+    }: AttachmentResolvedStateInfo
  ) {
    return html`
      <div class=${classMap(classInfo)}>
@@ -261,7 +283,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
              ${description}
            </div>
            ${choose(state, [
-              ['error', this.renderReloadButton],
+              ['error', () => this.renderNormalButton(needUpload)],
              ['error:oversize', this.renderUpgradeButton],
            ])}
          </div>
@@ -274,7 +296,14 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment

  protected renderWithVertical(
    classInfo: ClassInfo,
-    { icon, title, description, kind, state }: AttachmentResolvedStateInfo
+    {
+      icon,
+      title,
+      description,
+      kind,
+      state,
+      needUpload,
+    }: AttachmentResolvedStateInfo
  ) {
    return html`
      <div class=${classMap(classInfo)}>
@@ -294,7 +323,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
        <div class="affine-attachment-banner">
          ${kind}
          ${choose(state, [
-            ['error', this.renderReloadButton],
+            ['error', () => this.renderNormalButton(needUpload)],
            ['error:oversize', this.renderUpgradeButton],
          ])}
        </div>
@@ -305,7 +334,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
  protected resolvedState$ = computed<AttachmentResolvedStateInfo>(() => {
    const size = this.model.props.size;
    const name = this.model.props.name$.value;
-    const kind = getAttachmentFileIcon(name.split('.').pop() ?? '');
+    const kind = getAttachmentFileIcon(this.filetype);

    const resolvedState = this.resourceController.resolveStateWith({
      loadingIcon: LoadingIcon(),
@@ -359,11 +388,16 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
        const message = resolvedState.description;
        if (!message) return null;

+        const needUpload = resolvedState.needUpload;
+        const action = () =>
+          needUpload ? this.resourceController.upload() : this.reload();
+
        return html`
          <affine-resource-status
            class="affine-attachment-embed-status"
            .message=${message}
-            .reload=${() => this.reload()}
+            .needUpload=${needUpload}
+            .action=${action}
          ></affine-resource-status>
        `;
      })}
@@ -372,10 +406,10 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment

  private readonly _renderCitation = () => {
    const { name, footnoteIdentifier } = this.model.props;
-    const fileType = name.split('.').pop() ?? '';
-    const fileTypeIcon = getAttachmentFileIcon(fileType);
+    const icon = getAttachmentFileIcon(this.filetype);
+
    return html`<affine-citation-card
-      .icon=${fileTypeIcon}
+      .icon=${icon}
      .citationTitle=${name}
      .citationIdentifier=${footnoteIdentifier}
      .active=${this.selected$.value}
--- a/blocksuite/affine/blocks/attachment/src/styles.ts
+++ b/blocksuite/affine/blocks/attachment/src/styles.ts
@@ -91,6 +91,7 @@ export const styles = css`
    font-size: var(--affine-font-xs);
    font-style: normal;
    font-weight: 500;
+    text-transform: capitalize;
    line-height: 20px;

    svg {
--- a/blocksuite/affine/blocks/image/src/components/page-image-block.ts
+++ b/blocksuite/affine/blocks/image/src/components/page-image-block.ts
@@ -359,7 +359,9 @@ export class ImageBlockPageComponent extends SignalWatcher(
      ? ImageSelectedRect(this._doc.readonly)
      : null;

-    const { loading, error, icon, description } = this.state;
+    const blobUrl = this.block.blobUrl;
+    const caption = this.block.model.props.caption$.value ?? 'Image';
+    const { loading, error, icon, description, needUpload } = this.state;

    return html`
      <div class="resizable-img" style=${styleMap(imageSize)}>
@@ -367,8 +369,8 @@ export class ImageBlockPageComponent extends SignalWatcher(
          class="drag-target"
          draggable="false"
          loading="lazy"
-          src=${this.block.blobUrl}
-          alt=${this.block.model.props.caption$.value ?? 'Image'}
+          src=${blobUrl}
+          alt=${caption}
          @error=${this._handleError}
        />

@@ -377,12 +379,16 @@ export class ImageBlockPageComponent extends SignalWatcher(

      ${when(loading, () => html`<div class="loading">${icon}</div>`)}
      ${when(
-        error && description,
+        Boolean(error && description),
        () =>
          html`<affine-resource-status
            class="affine-image-status"
            .message=${description}
-            .reload=${() => this.block.refreshData()}
+            .needUpload=${needUpload}
+            .action=${() =>
+              needUpload
+                ? this.block.resourceController.upload()
+                : this.block.refreshData()}
          ></affine-resource-status>`
      )}
    `;
--- a/blocksuite/affine/blocks/image/src/image-edgeless-block.ts
+++ b/blocksuite/affine/blocks/image/src/image-edgeless-block.ts
@@ -137,6 +137,8 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
      description: formatSize(size),
    });

+    const { loading, icon, description, error, needUpload } = resovledState;
+
    return html`
      <div class="affine-image-container" style=${containerStyleMap}>
        ${when(
@@ -152,17 +154,18 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
                @error=${this._handleError}
              />
            </div>
+            ${when(loading, () => html`<div class="loading">${icon}</div>`)}
            ${when(
-              resovledState.loading,
-              () => html`<div class="loading">${resovledState.icon}</div>`
-            )}
-            ${when(
-              resovledState.error && resovledState.description,
+              Boolean(error && description),
              () =>
                html`<affine-resource-status
                  class="affine-image-status"
-                  .message=${resovledState.description}
-                  .reload=${() => this.refreshData()}
+                  .message=${description}
+                  .needUpload=${needUpload}
+                  .action=${() =>
+                    needUpload
+                      ? this.resourceController.upload()
+                      : this.refreshData()}
                ></affine-resource-status>`
            )}
          `,