优化ErrorPage样式,补充了NotFoundPage

This commit is contained in:
yourname
2025-05-14 12:30:15 +00:00
parent 218d870a01
commit e76c918ef7
4 changed files with 42 additions and 4 deletions

View File

@@ -1,15 +1,16 @@
import React from 'react';
import { useRouteError } from 'react-router';
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 min-h-screen p-4"
<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">
@@ -29,12 +30,12 @@ export const ErrorPage = () => {
<div className="flex gap-4">
<Button
type="primary"
onClick={() => window.location.reload()}
onClick={() => navigate(0)}
>
</Button>
<Button
onClick={() => window.location.href = '/admin'}
onClick={() => navigate('/admin')}
>
</Button>

View File

@@ -0,0 +1,30 @@
import React from 'react';
import { useNavigate } from 'react-router';
import { Button } from 'antd';
import { useTheme } from '../hooks_sys.tsx';
export const NotFoundPage = () => {
const navigate = useNavigate();
const { isDark } = useTheme();
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">404 - </h1>
<p className="mb-6 text-gray-600 dark:text-gray-300">
访
</p>
<div className="flex gap-4">
<Button
type="primary"
onClick={() => navigate('/admin')}
>
</Button>
</div>
</div>
</div>
);
};