58 lines
2.5 KiB
JavaScript
58 lines
2.5 KiB
JavaScript
// src/layouts/MainLayout.js
|
||
// 主布局组件 - 为所有带导航栏的页面提供统一布局
|
||
import React, { memo, Suspense } from "react";
|
||
import { Outlet } from "react-router-dom";
|
||
import { Box } from '@chakra-ui/react';
|
||
import HomeNavbar from "../components/Navbars/HomeNavbar";
|
||
import AppFooter from "./AppFooter";
|
||
import BackToTopButton from "./components/BackToTopButton";
|
||
import ErrorBoundary from "../components/ErrorBoundary";
|
||
import PageLoader from "../components/Loading/PageLoader";
|
||
import { BACK_TO_TOP_CONFIG } from "./config/layoutConfig";
|
||
|
||
// ✅ P0 性能优化：缓存静态组件，避免路由切换时不必要的重新渲染
|
||
// HomeNavbar (1623行) 和 AppFooter 不依赖路由参数，使用 memo 可大幅减少渲染次数
|
||
const MemoizedHomeNavbar = memo(HomeNavbar);
|
||
const MemoizedAppFooter = memo(AppFooter);
|
||
|
||
/**
|
||
* MainLayout - 带导航栏的主布局
|
||
*
|
||
* 使用 <Outlet /> 渲染子路由，确保导航栏只渲染一次
|
||
* 页面切换时只有 Outlet 内的内容会更新，导航栏保持不变
|
||
*
|
||
* 架构优化：
|
||
* - ✅ 组件拆分 - BackToTopButton 独立复用
|
||
* - ✅ 性能优化 - 使用 memo 避免导航栏和页脚重新渲染
|
||
* - ✅ 错误隔离 - ErrorBoundary 包裹页面内容，确保导航栏可用
|
||
* - ✅ 懒加载支持 - Suspense 统一处理懒加载
|
||
* - ✅ 布局简化 - 直接内联容器逻辑，减少嵌套层级
|
||
*/
|
||
export default function MainLayout() {
|
||
return (
|
||
<Box flex="1" h="100vh" w="100%" position="relative" display="flex" flexDirection="column">
|
||
{/* 导航栏 - 在所有页面间共享，memo 后不会在路由切换时重新渲染 */}
|
||
<MemoizedHomeNavbar />
|
||
|
||
{/* 页面内容区域 - flex: 1 占据剩余空间，包含错误边界、懒加载 */}
|
||
<Box flex="1" pt="72px">
|
||
<ErrorBoundary>
|
||
<Suspense fallback={<PageLoader message="页面加载中..." />}>
|
||
<Outlet />
|
||
</Suspense>
|
||
</ErrorBoundary>
|
||
</Box>
|
||
|
||
{/* 页脚 - 在所有页面间共享，memo 后不会在路由切换时重新渲染 */}
|
||
<MemoizedAppFooter />
|
||
|
||
{/* 返回顶部按钮 - 滚动超过阈值时显示 */}
|
||
{/* <BackToTopButton
|
||
scrollThreshold={BACK_TO_TOP_CONFIG.scrollThreshold}
|
||
position={BACK_TO_TOP_CONFIG.position}
|
||
zIndex={BACK_TO_TOP_CONFIG.zIndex}
|
||
/> */}
|
||
</Box>
|
||
);
|
||
}
|