From 8a8f6c9cc4e6dde115e48e377d2e0a72a8f69a16 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 6 May 2026 21:08:27 +0800
Subject: [PATCH] fix: wrap error Result in Card, style OfflineBanner with
 margin and showIcon

- ErrorBoundary: wrap Result in <Card variant="borderless"> for proper
  card styling
- OfflineBanner: remove `banner` prop (was causing header layout issues),
  add `showIcon` for warning icon, add `marginBottom: 16` for spacing

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/components/ErrorBoundary/index.tsx | 68 +++++++++++++-------------
 src/components/OfflineBanner/index.tsx |  3 +-
 2 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/src/components/ErrorBoundary/index.tsx b/src/components/ErrorBoundary/index.tsx
index 59a91e5a..0c5707c2 100644
--- a/src/components/ErrorBoundary/index.tsx
+++ b/src/components/ErrorBoundary/index.tsx
@@ -1,5 +1,5 @@
 import { getIntl } from '@umijs/max';
-import { Button, Result } from 'antd';
+import { Button, Card, Result } from 'antd';
 import React from 'react';
 
 function isChunkLoadError(error: Error): boolean {
@@ -27,38 +27,40 @@ function renderErrorFallback(
   const isChunkError = isChunkLoadError(error);
 
   return (
-    <Result
-      status="error"
-      title={intl.formatMessage({
-        id: isChunkError ? 'app.error.chunk.title' : 'app.error.render.title',
-        defaultMessage: isChunkError
-          ? 'Failed to load page'
-          : 'Something went wrong',
-      })}
-      subTitle={intl.formatMessage({
-        id: getSubTitleId(isChunkError, isOffline),
-        defaultMessage:
-          isChunkError && isOffline
-            ? 'Your network connection has been lost. Please check your connection and refresh.'
-            : isChunkError
-              ? 'Page resources failed to load. Please refresh and try again.'
-              : 'Sorry, an error occurred on this page. Please refresh or go back to the home page.',
-      })}
-      extra={[
-        <Button type="primary" key="retry" onClick={onRetry}>
-          {intl.formatMessage({
-            id: 'app.error.retry',
-            defaultMessage: 'Refresh',
-          })}
-        </Button>,
-        <Button href="/" key="home">
-          {intl.formatMessage({
-            id: 'app.error.home',
-            defaultMessage: 'Back Home',
-          })}
-        </Button>,
-      ]}
-    />
+    <Card variant="borderless">
+      <Result
+        status="error"
+        title={intl.formatMessage({
+          id: isChunkError ? 'app.error.chunk.title' : 'app.error.render.title',
+          defaultMessage: isChunkError
+            ? 'Failed to load page'
+            : 'Something went wrong',
+        })}
+        subTitle={intl.formatMessage({
+          id: getSubTitleId(isChunkError, isOffline),
+          defaultMessage:
+            isChunkError && isOffline
+              ? 'Your network connection has been lost. Please check your connection and refresh.'
+              : isChunkError
+                ? 'Page resources failed to load. Please refresh and try again.'
+                : 'Sorry, an error occurred on this page. Please refresh or go back to the home page.',
+        })}
+        extra={[
+          <Button type="primary" key="retry" onClick={onRetry}>
+            {intl.formatMessage({
+              id: 'app.error.retry',
+              defaultMessage: 'Refresh',
+            })}
+          </Button>,
+          <Button href="/" key="home">
+            {intl.formatMessage({
+              id: 'app.error.home',
+              defaultMessage: 'Back Home',
+            })}
+          </Button>,
+        ]}
+      />
+    </Card>
   );
 }
 
diff --git a/src/components/OfflineBanner/index.tsx b/src/components/OfflineBanner/index.tsx
index c9e7b67d..85aca1c9 100644
--- a/src/components/OfflineBanner/index.tsx
+++ b/src/components/OfflineBanner/index.tsx
@@ -23,8 +23,9 @@ const OfflineBanner: React.FC = () => {
   return (
     <Alert
       type="warning"
-      banner
+      showIcon
       closable={false}
+      style={{ marginBottom: 16 }}
       message={getIntl().formatMessage({
         id: 'app.network.offline',
         defaultMessage: