|
|
@@ -1,6 +1,5 @@
|
|
|
import React from 'react';
|
|
|
import { useRouteError, useNavigate } from 'react-router';
|
|
|
-import { Alert, Button } from 'antd';
|
|
|
|
|
|
export const ErrorPage = () => {
|
|
|
const navigate = useNavigate();
|
|
|
@@ -8,34 +7,41 @@ export const ErrorPage = () => {
|
|
|
const errorMessage = error?.statusText || error?.message || '未知错误';
|
|
|
|
|
|
return (
|
|
|
- <div className="flex flex-col items-center justify-center flex-grow p-4"
|
|
|
- >
|
|
|
- <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 className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 p-4">
|
|
|
+ <div className="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
|
|
|
+ <div className="bg-red-50 dark:bg-red-900/30 px-6 py-4 border-b border-red-100 dark:border-red-800">
|
|
|
+ <h1 className="text-2xl font-bold text-red-600 dark:text-red-400">发生错误</h1>
|
|
|
+ </div>
|
|
|
+ <div className="p-6">
|
|
|
+ <div className="flex items-start mb-4">
|
|
|
+ <div className="flex-shrink-0 bg-red-100 dark:bg-red-900/50 p-3 rounded-full">
|
|
|
+ <svg className="w-8 h-8 text-red-500 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div className="ml-4">
|
|
|
+ <h3 className="text-lg font-medium text-gray-900 dark:text-white">{error?.message || '未知错误'}</h3>
|
|
|
+ {error?.stack && (
|
|
|
+ <pre className="mt-2 text-xs text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 p-3 rounded overflow-x-auto max-h-40">
|
|
|
+ {error.stack}
|
|
|
+ </pre>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="flex gap-4">
|
|
|
+ <button
|
|
|
+ onClick={() => navigate(0)}
|
|
|
+ className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200"
|
|
|
+ >
|
|
|
+ 重新加载
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ onClick={() => navigate('/')}
|
|
|
+ className="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200"
|
|
|
+ >
|
|
|
+ 返回首页
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|