diff --git a/src/layouts/MainLayout.js b/src/layouts/MainLayout.js index dbb64f09..73cea77f 100644 --- a/src/layouts/MainLayout.js +++ b/src/layouts/MainLayout.js @@ -2,12 +2,13 @@ // 主布局组件 - 为所有带导航栏的页面提供统一布局 import React, { memo, Suspense } from "react"; import { Outlet } from "react-router-dom"; -import { Box } from '@chakra-ui/react'; +import { Box, Flex } 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 GlobalSidebar from "../components/GlobalSidebar"; import { BACK_TO_TOP_CONFIG } from "./config/layoutConfig"; // ✅ P0 性能优化:缓存静态组件,避免路由切换时不必要的重新渲染 @@ -27,6 +28,7 @@ const MemoizedAppFooter = memo(AppFooter); * - ✅ 错误隔离 - ErrorBoundary 包裹页面内容,确保导航栏可用 * - ✅ 懒加载支持 - Suspense 统一处理懒加载 * - ✅ 布局简化 - 直接内联容器逻辑,减少嵌套层级 + * - ✅ 全局侧边栏 - 右侧可收起的工具栏(关注股票、事件动态) */ export default function MainLayout() { return ( @@ -34,14 +36,20 @@ export default function MainLayout() { {/* 导航栏 - 在所有页面间共享,memo 后不会在路由切换时重新渲染 */} - {/* 页面内容区域 - flex: 1 占据剩余空间,包含错误边界、懒加载 */} - - - }> - - - - + {/* 主体区域 - 左侧页面内容 + 右侧全局侧边栏 */} + + {/* 页面内容区域 - flex: 1 占据剩余空间,包含错误边界、懒加载 */} + + + }> + + + + + + {/* 全局右侧工具栏 - 可收起/展开 */} + + {/* 页脚 - 在所有页面间共享,memo 后不会在路由切换时重新渲染 */}