feat: bugfix

src/layouts/MainLayout.js

@@ -1,13 +1,14 @@
 // src/layouts/MainLayout.js
 // 主布局组件 - 为所有带导航栏的页面提供统一布局
-import React, { memo } from "react";
-import { Outlet, useLocation } from "react-router-dom";
+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 PageTransitionWrapper from "./components/PageTransitionWrapper";
-import { ANIMATION_CONFIG, BACK_TO_TOP_CONFIG } from "./config/layoutConfig";
+import ErrorBoundary from "../components/ErrorBoundary";
+import PageLoader from "../components/Loading/PageLoader";
+import { BACK_TO_TOP_CONFIG } from "./config/layoutConfig";
 
 // ✅ P0 性能优化：缓存静态组件，避免路由切换时不必要的重新渲染
 // HomeNavbar (1623行) 和 AppFooter 不依赖路由参数，使用 memo 可大幅减少渲染次数
@@ -20,38 +21,27 @@ const MemoizedAppFooter = memo(AppFooter);
  * 使用 <Outlet /> 渲染子路由，确保导航栏只渲染一次
  * 页面切换时只有 Outlet 内的内容会更新，导航栏保持不变
  *
- * 架构优化（2024-10-30）：
- * - ✅ P0: 组件拆分 - BackToTopButton 独立复用（37行 → 独立文件）
- * - ✅ P0: 组件拆分 - PageTransitionWrapper 封装复杂逻辑（18行 → 独立文件）
- * - ✅ P0: 性能优化 - 使用 memo 避免导航栏和页脚重新渲染（性能提升 50%+）
- * - ✅ P1: 性能优化 - 使用 RAF 节流滚动事件（性能提升 80%）
- * - ✅ P1: 错误隔离 - ErrorBoundary 包裹页面内容，确保导航栏可用
- * - ✅ P2: 用户体验 - 页面过渡动画（framer-motion）
- * - ✅ P2: 配置集中 - layoutConfig 统一管理配置常量
- * - ✅ P3: 用户体验 - 返回顶部按钮（滚动 > 300px 显示）
- *
- * 代码优化成果：
- * - 代码量：115 行 → 42 行（减少 63%）
- * - 复杂度：内联组件 → 独立模块
- * - 可维护性：配置分散 → 集中管理
- * - 可复用性：耦合 → 解耦
+ * 架构优化：
+ * - ✅ 组件拆分 - BackToTopButton 独立复用
+ * - ✅ 性能优化 - 使用 memo 避免导航栏和页脚重新渲染
+ * - ✅ 错误隔离 - ErrorBoundary 包裹页面内容，确保导航栏可用
+ * - ✅ 懒加载支持 - Suspense 统一处理懒加载
+ * - ✅ 布局简化 - 直接内联容器逻辑，减少嵌套层级
  */
 export default function MainLayout() {
-    const location = useLocation();
-
     return (
         <Box minH="100vh" display="flex" flexDirection="column">
             {/* 导航栏 - 在所有页面间共享，memo 后不会在路由切换时重新渲染 */}
             <MemoizedHomeNavbar />
 
-            {/* 页面内容区域 - 包含动画、错误边界、懒加载 */}
-            <PageTransitionWrapper
-                location={location}
-                animationConfig={ANIMATION_CONFIG.default}
-                loaderMessage="页面加载中..."
-            >
-                <Outlet />
-            </PageTransitionWrapper>
+            {/* 页面内容区域 - flex: 1 占据剩余空间，包含错误边界、懒加载 */}
+            <Box flex="1" w="100%" position="relative" overflow="hidden">
+                <ErrorBoundary>
+                    <Suspense fallback={<PageLoader message="页面加载中..." />}>
+                        <Outlet />
+                    </Suspense>
+                </ErrorBoundary>
+            </Box>
 
             {/* 页脚 - 在所有页面间共享，memo 后不会在路由切换时重新渲染 */}
             <MemoizedAppFooter />