feat: 路由改造

src/layouts/MainLayout.js

@@ -0,0 +1,31 @@
+// src/layouts/MainLayout.js
+// 主布局组件 - 为所有带导航栏的页面提供统一布局
+import React, { Suspense } from "react";
+import { Outlet } from "react-router-dom";
+import { Box } from '@chakra-ui/react';
+import HomeNavbar from "../components/Navbars/HomeNavbar";
+import PageLoader from "../components/Loading/PageLoader";
+
+/**
+ * MainLayout - 带导航栏的主布局
+ *
+ * 使用 <Outlet /> 渲染子路由，确保导航栏只渲染一次
+ * 页面切换时只有 Outlet 内的内容会更新，导航栏保持不变
+ * Suspense 边界确保导航栏始终可见，只有内容区域显示 loading
+ */
+export default function MainLayout() {
+    return (
+        <Box minH="100vh">
+            {/* 导航栏 - 在所有页面间共享，不会重新渲染 */}
+            <HomeNavbar />
+
+            {/* 页面内容区域 - 通过 Outlet 渲染当前路由对应的组件 */}
+            {/* Suspense 只包裹内容区域，导航栏保持可见 */}
+            <Box>
+                <Suspense fallback={<PageLoader message="页面加载中..." />}>
+                    <Outlet />
+                </Suspense>
+            </Box>
+        </Box>
+    );
+}