From 3afbaea1aeaca7dbe2180145edc32dd9ed8cff7a Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 6 May 2026 21:28:56 +0800
Subject: [PATCH] fix: error boundary use Card style matching 403 page, offline
 banner fixed top center

- errorBoundary: use Card variant="borderless" wrapping Result, matching
  the 403/404 exception page style for consistency
- offlineBanner: use fixed positioning at top center of header area with
  pointer-events passthrough, max-width 480px, small margin

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

diff --git a/src/components/ErrorBoundary/index.tsx b/src/components/ErrorBoundary/index.tsx
index 6ead3c89..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, Layout, Result } from 'antd';
+import { Button, Card, Result } from 'antd';
 import React from 'react';
 
 function isChunkLoadError(error: Error): boolean {
@@ -27,7 +27,7 @@ function renderErrorFallback(
   const isChunkError = isChunkLoadError(error);
 
   return (
-    <Layout.Content style={{ padding: 24 }}>
+    <Card variant="borderless">
       <Result
         status="error"
         title={intl.formatMessage({
@@ -60,7 +60,7 @@ function renderErrorFallback(
           </Button>,
         ]}
       />
-    </Layout.Content>
+    </Card>
   );
 }
 
diff --git a/src/components/OfflineBanner/index.tsx b/src/components/OfflineBanner/index.tsx
index c9e7b67d..7fbc9eca 100644
--- a/src/components/OfflineBanner/index.tsx
+++ b/src/components/OfflineBanner/index.tsx
@@ -21,16 +21,33 @@ const OfflineBanner: React.FC = () => {
   if (isOnline) return null;
 
   return (
-    <Alert
-      type="warning"
-      banner
-      closable={false}
-      message={getIntl().formatMessage({
-        id: 'app.network.offline',
-        defaultMessage:
-          'You are currently offline. Some features may be unavailable.',
-      })}
-    />
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        insetInline: 0,
+        zIndex: 999,
+        display: 'flex',
+        justifyContent: 'center',
+        pointerEvents: 'none',
+      }}
+    >
+      <Alert
+        type="warning"
+        showIcon
+        closable={false}
+        style={{
+          margin: 8,
+          pointerEvents: 'auto',
+          maxWidth: 480,
+        }}
+        message={getIntl().formatMessage({
+          id: 'app.network.offline',
+          defaultMessage:
+            'You are currently offline. Some features may be unavailable.',
+        })}
+      />
+    </div>
   );
 };