Browse Source

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>
pull/11756/head
afc163 4 months ago
parent
commit
3afbaea1ae
  1. 6
      src/components/ErrorBoundary/index.tsx
  2. 37
      src/components/OfflineBanner/index.tsx

6
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>
);
}

37
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>
);
};

Loading…
Cancel
Save