前端路由改为懒加载

web/frontend/src/App.tsx

@@ -1,22 +1,35 @@
-import { useState, useCallback } from 'react';
+import { lazy, Suspense, useState, useCallback, type ReactNode } from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
-import { ConfigProvider, theme } from 'antd';
+import { ConfigProvider, Spin, theme } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
-import LoginPage from './pages/LoginPage';
-import MainLayout from './layouts/MainLayout';
-import DashboardPage from './pages/DashboardPage';
-import AccountsPage from './pages/AccountsPage';
-import AssignmentsPage from './pages/AssignmentsPage';
-import LoginTasksPage from './pages/LoginTasksPage';
-import ProxyPage from './pages/ProxyPage';
-import UsersPage from './pages/UsersPage';
-import CookiePage from './pages/CookiePage';
-import HuyaAccountsPage from './pages/HuyaAccountsPage';
-import HuyaTasksPage from './pages/HuyaTasksPage';
 import { getUser } from './store/auth';
 import { ThemeProvider } from './store/theme';
 import { useTheme } from './store/useTheme';
 
+const LoginPage = lazy(() => import('./pages/LoginPage'));
+const MainLayout = lazy(() => import('./layouts/MainLayout'));
+const DashboardPage = lazy(() => import('./pages/DashboardPage'));
+const AccountsPage = lazy(() => import('./pages/AccountsPage'));
+const AssignmentsPage = lazy(() => import('./pages/AssignmentsPage'));
+const LoginTasksPage = lazy(() => import('./pages/LoginTasksPage'));
+const ProxyPage = lazy(() => import('./pages/ProxyPage'));
+const UsersPage = lazy(() => import('./pages/UsersPage'));
+const CookiePage = lazy(() => import('./pages/CookiePage'));
+const HuyaAccountsPage = lazy(() => import('./pages/HuyaAccountsPage'));
+const HuyaTasksPage = lazy(() => import('./pages/HuyaTasksPage'));
+
+function RouteFallback() {
+  return (
+    <div style={{ minHeight: 160, display: 'grid', placeItems: 'center' }}>
+      <Spin size="small" />
+    </div>
+  );
+}
+
+function lazyRoute(element: ReactNode) {
+  return <Suspense fallback={<RouteFallback />}>{element}</Suspense>;
+}
+
 function AppContent() {
   // 用 state 驱动重渲染，登录/登出时调 refreshAuth()
   const [authVersion, setAuthVersion] = useState(0);
@@ -36,20 +49,24 @@ function AppContent() {
     >
       <BrowserRouter>
         <Routes>
-          <Route path="/login" element={<LoginPage onLogin={refreshAuth} />} />
+          <Route path="/login" element={lazyRoute(<LoginPage onLogin={refreshAuth} />)} />
           <Route
             path="/"
-            element={isLoggedIn ? <MainLayout key={authVersion} onLogout={refreshAuth} /> : <Navigate to="/login" replace />}
+            element={
+              isLoggedIn
+                ? lazyRoute(<MainLayout key={authVersion} onLogout={refreshAuth} />)
+                : <Navigate to="/login" replace />
+            }
           >
-            <Route index element={<DashboardPage />} />
+            <Route index element={lazyRoute(<DashboardPage />)} />
-            <Route path="accounts" element={<AccountsPage />} />
+            <Route path="accounts" element={lazyRoute(<AccountsPage />)} />
-            <Route path="assignments" element={<AssignmentsPage />} />
+            <Route path="assignments" element={lazyRoute(<AssignmentsPage />)} />
-            <Route path="login-tasks" element={<LoginTasksPage />} />
+            <Route path="login-tasks" element={lazyRoute(<LoginTasksPage />)} />
-            <Route path="cookies" element={<CookiePage />} />
+            <Route path="cookies" element={lazyRoute(<CookiePage />)} />
-            <Route path="huya/accounts" element={<HuyaAccountsPage />} />
+            <Route path="huya/accounts" element={lazyRoute(<HuyaAccountsPage />)} />
-            <Route path="huya/tasks" element={<HuyaTasksPage />} />
+            <Route path="huya/tasks" element={lazyRoute(<HuyaTasksPage />)} />
-            <Route path="proxy" element={<ProxyPage />} />
+            <Route path="proxy" element={lazyRoute(<ProxyPage />)} />
-            <Route path="users" element={<UsersPage />} />
+            <Route path="users" element={lazyRoute(<UsersPage />)} />
           </Route>
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>