feat(layouts): MainLayout 集成全局右侧工具栏
- 主体区域改为 Flex 布局(左侧内容 + 右侧侧边栏) - 添加 GlobalSidebar 组件到右侧 - 页面内容区域自适应宽度 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -2,12 +2,13 @@
|
|||||||
// 主布局组件 - 为所有带导航栏的页面提供统一布局
|
// 主布局组件 - 为所有带导航栏的页面提供统一布局
|
||||||
import React, { memo, Suspense } from "react";
|
import React, { memo, Suspense } from "react";
|
||||||
import { Outlet } from "react-router-dom";
|
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 HomeNavbar from "../components/Navbars/HomeNavbar";
|
||||||
import AppFooter from "./AppFooter";
|
import AppFooter from "./AppFooter";
|
||||||
import BackToTopButton from "./components/BackToTopButton";
|
import BackToTopButton from "./components/BackToTopButton";
|
||||||
import ErrorBoundary from "../components/ErrorBoundary";
|
import ErrorBoundary from "../components/ErrorBoundary";
|
||||||
import PageLoader from "../components/Loading/PageLoader";
|
import PageLoader from "../components/Loading/PageLoader";
|
||||||
|
import GlobalSidebar from "../components/GlobalSidebar";
|
||||||
import { BACK_TO_TOP_CONFIG } from "./config/layoutConfig";
|
import { BACK_TO_TOP_CONFIG } from "./config/layoutConfig";
|
||||||
|
|
||||||
// ✅ P0 性能优化:缓存静态组件,避免路由切换时不必要的重新渲染
|
// ✅ P0 性能优化:缓存静态组件,避免路由切换时不必要的重新渲染
|
||||||
@@ -27,6 +28,7 @@ const MemoizedAppFooter = memo(AppFooter);
|
|||||||
* - ✅ 错误隔离 - ErrorBoundary 包裹页面内容,确保导航栏可用
|
* - ✅ 错误隔离 - ErrorBoundary 包裹页面内容,确保导航栏可用
|
||||||
* - ✅ 懒加载支持 - Suspense 统一处理懒加载
|
* - ✅ 懒加载支持 - Suspense 统一处理懒加载
|
||||||
* - ✅ 布局简化 - 直接内联容器逻辑,减少嵌套层级
|
* - ✅ 布局简化 - 直接内联容器逻辑,减少嵌套层级
|
||||||
|
* - ✅ 全局侧边栏 - 右侧可收起的工具栏(关注股票、事件动态)
|
||||||
*/
|
*/
|
||||||
export default function MainLayout() {
|
export default function MainLayout() {
|
||||||
return (
|
return (
|
||||||
@@ -34,14 +36,20 @@ export default function MainLayout() {
|
|||||||
{/* 导航栏 - 在所有页面间共享,memo 后不会在路由切换时重新渲染 */}
|
{/* 导航栏 - 在所有页面间共享,memo 后不会在路由切换时重新渲染 */}
|
||||||
<MemoizedHomeNavbar />
|
<MemoizedHomeNavbar />
|
||||||
|
|
||||||
{/* 页面内容区域 - flex: 1 占据剩余空间,包含错误边界、懒加载 */}
|
{/* 主体区域 - 左侧页面内容 + 右侧全局侧边栏 */}
|
||||||
<Box flex="1" pt="60px" bg="#1A202C">
|
<Flex flex="1" pt="60px" bg="#1A202C" overflow="hidden">
|
||||||
<ErrorBoundary>
|
{/* 页面内容区域 - flex: 1 占据剩余空间,包含错误边界、懒加载 */}
|
||||||
<Suspense fallback={<PageLoader message="页面加载中..." />}>
|
<Box flex="1" minW={0} overflowY="auto">
|
||||||
<Outlet />
|
<ErrorBoundary>
|
||||||
</Suspense>
|
<Suspense fallback={<PageLoader message="页面加载中..." />}>
|
||||||
</ErrorBoundary>
|
<Outlet />
|
||||||
</Box>
|
</Suspense>
|
||||||
|
</ErrorBoundary>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* 全局右侧工具栏 - 可收起/展开 */}
|
||||||
|
<GlobalSidebar />
|
||||||
|
</Flex>
|
||||||
|
|
||||||
{/* 页脚 - 在所有页面间共享,memo 后不会在路由切换时重新渲染 */}
|
{/* 页脚 - 在所有页面间共享,memo 后不会在路由切换时重新渲染 */}
|
||||||
<MemoizedAppFooter />
|
<MemoizedAppFooter />
|
||||||
|
|||||||
Reference in New Issue
Block a user