From bb0506b2bb605d821d7d41660542477bc8035fa7 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Tue, 23 Dec 2025 11:56:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(layouts):=20MainLayout=20=E9=9B=86?=
 =?UTF-8?q?=E6=88=90=E5=85=A8=E5=B1=80=E5=8F=B3=E4=BE=A7=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 主体区域改为 Flex 布局（左侧内容 + 右侧侧边栏）
- 添加 GlobalSidebar 组件到右侧
- 页面内容区域自适应宽度

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/layouts/MainLayout.js | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

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 后不会在路由切换时重新渲染 */}
             <MemoizedHomeNavbar />
 
-            {/* 页面内容区域 - flex: 1 占据剩余空间，包含错误边界、懒加载 */}
-            <Box flex="1" pt="60px" bg="#1A202C">
-                <ErrorBoundary>
-                    <Suspense fallback={<PageLoader message="页面加载中..." />}>
-                        <Outlet />
-                    </Suspense>
-                </ErrorBoundary>
-            </Box>
+            {/* 主体区域 - 左侧页面内容 + 右侧全局侧边栏 */}
+            <Flex flex="1" pt="60px" bg="#1A202C" overflow="hidden">
+                {/* 页面内容区域 - flex: 1 占据剩余空间，包含错误边界、懒加载 */}
+                <Box flex="1" minW={0} overflowY="auto">
+                    <ErrorBoundary>
+                        <Suspense fallback={<PageLoader message="页面加载中..." />}>
+                            <Outlet />
+                        </Suspense>
+                    </ErrorBoundary>
+                </Box>
+
+                {/* 全局右侧工具栏 - 可收起/展开 */}
+                <GlobalSidebar />
+            </Flex>
 
             {/* 页脚 - 在所有页面间共享，memo 后不会在路由切换时重新渲染 */}
             <MemoizedAppFooter />