diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index f2c98af..696bbe3 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,20 +1,26 @@ +import { Suspense, lazy } from "react"; import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; import { App as AntApp } from "antd"; import { ToastProvider } from "./components/ui/Toast"; import { AuthProvider } from "./contexts/AuthContext"; -import AppLayout from "./components/layout/AppLayout"; -import ScanPage from "./pages/ScanPage"; -import MyTasksPage from "./pages/MyTasksPage"; -import NotificationsPage from "./pages/NotificationsPage"; -import ProfilePage from "./pages/ProfilePage"; +import LoadingSpinner from "./components/ui/LoadingSpinner"; +// Layout 组件静态导入(始终需要,体积小) +import AppLayout from "./components/layout/AppLayout"; import AdminLayout from "./components/layout/AdminLayout"; -import AdminLoginPage from "./pages/admin/AdminLoginPage"; -import AdminDashboard from "./pages/admin/AdminDashboard"; -import AdminProductsPage from "./pages/admin/AdminProductsPage"; -import AdminTasksPage from "./pages/admin/AdminTasksPage"; -import AdminPrintConfigPage from "./pages/admin/AdminPrintConfigPage"; + +// 🚀 路由级代码分割 — 按需懒加载页面组件 +const ScanPage = lazy(() => import("./pages/ScanPage")); +const MyTasksPage = lazy(() => import("./pages/MyTasksPage")); +const NotificationsPage = lazy(() => import("./pages/NotificationsPage")); +const ProfilePage = lazy(() => import("./pages/ProfilePage")); + +const AdminLoginPage = lazy(() => import("./pages/admin/AdminLoginPage")); +const AdminDashboard = lazy(() => import("./pages/admin/AdminDashboard")); +const AdminProductsPage = lazy(() => import("./pages/admin/AdminProductsPage")); +const AdminTasksPage = lazy(() => import("./pages/admin/AdminTasksPage")); +const AdminPrintConfigPage = lazy(() => import("./pages/admin/AdminPrintConfigPage")); export default function App() { return ( @@ -22,28 +28,30 @@ export default function App() { - - {/* 移动端 */} - } /> - }> - } /> - } /> - } /> - } /> - + }> + + {/* 移动端 */} + } /> + }> + } /> + } /> + } /> + } /> + - {/* PC 管理端 — 登录页(独立,无侧边栏) */} - } /> + {/* PC 管理端 — 登录页(独立,无侧边栏) */} + } /> - {/* PC 管理端 — 需要登录 */} - } /> - }> - } /> - } /> - } /> - } /> - - + {/* PC 管理端 — 需要登录 */} + } /> + }> + } /> + } /> + } /> + } /> + + + diff --git a/frontend/src/components/ui/LoadingSpinner.tsx b/frontend/src/components/ui/LoadingSpinner.tsx new file mode 100644 index 0000000..f653077 --- /dev/null +++ b/frontend/src/components/ui/LoadingSpinner.tsx @@ -0,0 +1,10 @@ +import { Loader2 } from "lucide-react"; + +/** 全局路由懒加载回退组件 */ +export default function LoadingSpinner() { + return ( +
+ +
+ ); +}