// 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>
    );
}