概述

SkyrocAdmin 提供了灵活的布局系统，支持多种布局模式、响应式设计，并可自定义头部、侧边栏、标签页、页脚等各个区域。

布局模式

系统支持以下几种布局模式：

• vertical - 垂直布局（侧边栏在左侧）
• horizontal - 水平布局（菜单在顶部）
• vertical-mix - 垂直混合布局（一级菜单在左侧，二级菜单在顶部）
• horizontal-mix - 水平混合布局（一级菜单在顶部，二级菜单在左侧）
• reverse-horizontal-mix - 反向水平混合

核心组件

BaseLayout

基础布局容器，使用 @sa/materials 的 AdminLayout 组件实现。

代码位置: src/layouts/base-layout/BaseLayout.tsx

布局模块

• GlobalHeader - 全局头部，包含Logo、菜单、面包屑、搜索、用户信息等
• GlobalSider - 侧边栏，包含Logo和菜单
• GlobalTab - 标签页，支持多标签页管理
• GlobalContent - 内容区域，使用 <Outlet /> 渲染子路由
• GlobalFooter - 页脚信息

响应式设计

系统会自动检测屏幕尺寸，在移动端（小于 640px）强制切换为垂直布局模式。

const isMobile = !responsive.sm; // 小于 640px
if (isMobile) {
  dispatch(setLayoutMode('vertical'));
}

布局配置

通过 Redux store 中的主题配置可以控制布局行为：

• layout.mode - 布局模式
• layout.scrollMode - 滚动模式（content / wrapper）
• sider.width - 侧边栏宽度
• sider.collapsed - 侧边栏是否折叠
• header.height - 头部高度
• tab.visible - 是否显示标签页
• footer.visible - 是否显示页脚
• footer.fixed - 页脚是否固定

代码位置: src/store/slice/theme