46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { useRouteError, useNavigate } from 'react-router';
|
|
import { Alert, Button } from 'antd';
|
|
import { useTheme } from '../hooks_sys.tsx';
|
|
|
|
export const ErrorPage = () => {
|
|
const navigate = useNavigate();
|
|
const { isDark } = useTheme();
|
|
const error = useRouteError() as any;
|
|
const errorMessage = error?.statusText || error?.message || '未知错误';
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center flex-grow p-4"
|
|
style={{ color: isDark ? '#fff' : 'inherit' }}
|
|
>
|
|
<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={() => navigate(0)}
|
|
>
|
|
重新加载
|
|
</Button>
|
|
<Button
|
|
onClick={() => navigate('/admin')}
|
|
>
|
|
返回首页
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |