Browse Source

fix: error boundary wrap in Layout.Content for padding, move offline banner to page top

- errorBoundary: replace Card with Layout.Content (padding: 24) to match
  the 403/exception page style, since ErrorBoundary renders outside
  ProLayout's Layout.Content
- offlineBanner: move back to rootContainer (above ProLayout) to display
  at page top as a full-width banner, restore `banner` prop

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
pull/11756/head
afc163 5 months ago
parent
commit
926c39a53b
  1. 8
      src/app.tsx
  2. 6
      src/components/ErrorBoundary/index.tsx
  3. 3
      src/components/OfflineBanner/index.tsx

8
src/app.tsx

@ -152,7 +152,6 @@ export const layout: RunTimeLayoutConfig = ({
// if (initialState?.loading) return <PageLoading />;
return (
<>
<OfflineBanner />
{children}
<SettingDrawer
disableUrlParams
@ -190,5 +189,10 @@ export const request: RequestConfig = {
};
export function rootContainer(container: React.ReactNode) {
return <ErrorBoundary>{container}</ErrorBoundary>;
return (
<>
<OfflineBanner />
<ErrorBoundary>{container}</ErrorBoundary>
</>
);
}

6
src/components/ErrorBoundary/index.tsx

@ -1,5 +1,5 @@
import { getIntl } from '@umijs/max';
import { Button, Card, Result } from 'antd';
import { Button, Layout, Result } from 'antd';
import React from 'react';
function isChunkLoadError(error: Error): boolean {
@ -27,7 +27,7 @@ function renderErrorFallback(
const isChunkError = isChunkLoadError(error);
return (
<Card variant="borderless">
<Layout.Content style={{ padding: 24 }}>
<Result
status="error"
title={intl.formatMessage({
@ -60,7 +60,7 @@ function renderErrorFallback(
</Button>,
]}
/>
</Card>
</Layout.Content>
);
}

3
src/components/OfflineBanner/index.tsx

@ -23,9 +23,8 @@ const OfflineBanner: React.FC = () => {
return (
<Alert
type="warning"
showIcon
banner
closable={false}
style={{ marginBottom: 16 }}
message={getIntl().formatMessage({
id: 'app.network.offline',
defaultMessage:

Loading…
Cancel
Save