优化ErrorPage样式，补充了NotFoundPage

HISTORY.md

@@ -3,6 +3,7 @@
 迁移管理页面，在正式环境中，需要验证env中配置的密码参数才能打开
 
 2025.05.14 0.1.5
+优化ErrorPage样式，补充了NotFoundPage
 deno.json中去掉 没用的 @testing-library，jsDom
 
 2025.05.14 0.1.4

client/admin/components/ErrorPage.tsx

@@ -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>

client/admin/components/NotFoundPage.tsx

@@ -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>
+  );
+};

client/admin/routes.tsx

@@ -3,6 +3,7 @@ import { createBrowserRouter, Navigate } from 'react-router';
 import { ProtectedRoute } from './components_protected_route.tsx';
 import { MainLayout } from './layouts/MainLayout.tsx';
 import { ErrorPage } from './components/ErrorPage.tsx';
+import { NotFoundPage } from './components/NotFoundPage.tsx';
 import { DashboardPage } from './pages_dashboard.tsx';
 import { UsersPage } from './pages_users.tsx';
 import { FileLibraryPage } from './pages_file_library.tsx';
@@ -80,6 +81,11 @@ export const router = createBrowserRouter([
         element: <MessagesPage />,
         errorElement: <ErrorPage />
       },
+      {
+        path: '*',
+        element: <NotFoundPage />,
+        errorElement: <ErrorPage />
+      },
     ],
   },
 ]);