优化错误页面组件,新增错误信息展示和返回首页按钮,提升用户体验和可维护性。

This commit is contained in:
zyh
2025-04-10 16:49:40 +00:00
parent 1ebac64cd1
commit bf97b4f885

View File

@@ -7,7 +7,8 @@ import {
useNavigate,
useLocation,
Navigate,
useParams
useParams,
useRouteError
} from 'react-router';
import {
Layout, Menu, Button, Table, Space,
@@ -478,21 +479,44 @@ const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
};
// 错误页面组件
const ErrorPage = ({ error }: { error?: Error }) => {
const ErrorPage = () => {
const { isDark } = useTheme();
const error = useRouteError() as any;
const errorMessage = error?.statusText || error?.message || '未知错误';
return (
<div className="flex flex-col items-center justify-center h-screen"
<div className="flex flex-col items-center justify-center min-h-screen p-4"
style={{ color: isDark ? '#fff' : 'inherit' }}
>
<h1 className="text-2xl font-bold mb-4"></h1>
<p className="mb-4">{error?.message || '抱歉,应用程序遇到了一些问题。'}</p>
<Button
type="primary"
onClick={() => window.location.reload()}
>
</Button>
<div className="max-w-3xl w-full">
<h1 className="text-2xl font-bold mb-4"></h1>
<Alert
type="error"
message={error?.message || '未知错误'}
description={
error?.stack ? (
<pre className="text-xs overflow-auto p-2 bg-gray-100 dark:bg-gray-800 rounded">
{error.stack}
</pre>
) : null
}
className="mb-4"
/>
<div className="flex gap-4">
<Button
type="primary"
onClick={() => window.location.reload()}
>
</Button>
<Button
onClick={() => window.location.href = '/admin'}
>
</Button>
</div>
</div>
</div>
);
};