布局系统

MolanDev Cloud 提供了灵活的布局系统，支持横版/竖版两种布局模式，并提供丰富的配置选项。

TODO - 布局模式对比

建议截图： 竖版布局和横版布局的对比图（左右分屏或上下对比），标注关键区域（侧边栏、顶部菜单、主内容区等）

布局模式

1. 竖版布局（默认）

特点：

侧边栏在左侧，菜单垂直排列
适合功能模块较多的场景
经典的后台管理系统布局

核心组件： VerticalLayout.vue

2. 横版布局

特点：

菜单在顶部，水平排列
适合功能模块较少的场景
空间利用率更高

核心组件： HorizontalLayout.vue

3. 布局切换

支持运行时动态切换布局模式，使用 View Transition API 实现平滑的过渡动画。

TODO - 布局切换演示

建议GIF： 录制从竖版切换到横版（或反向）的过程，展示切换动画效果（约 2-3 秒）

布局配置选项

1. Logo 显示控制

控制是否在侧边栏/顶部显示 Logo。

javascript

setting.value.showLogo = true  // 显示 Logo
setting.value.showLogo = false // 隐藏 Logo

2. 菜单折叠

仅在竖版布局下生效，支持折叠侧边栏以获得更多内容空间。

折叠前：200px
折叠后：64px（仅显示图标）

TODO - 菜单折叠对比

建议截图： 菜单展开和折叠状态的对比图，展示侧边栏宽度变化

3. 菜单手风琴

仅在竖版布局下生效，控制菜单是否只能展开一个。

开启：同时只能展开一个菜单
关闭：可同时展开多个菜单

控制滚动时是否固定顶部导航栏。

开启：Header 固定在顶部
关闭：Header 随页面滚动

5. 面包屑导航

仅在竖版布局下显示，提供层级导航。支持显示/隐藏面包屑图标。

核心组件： Breadcrumb.vue

响应式布局

布局系统支持响应式设计，自动适配不同屏幕尺寸。

断点设置

移动端（< 768px）：抽屉式侧边栏
平板端（768px - 1024px）：自动折叠侧边栏
桌面端（> 1024px）：完整布局

TODO - 响应式适配演示

建议GIF： 录制浏览器窗口从桌面端缩小到移动端的过程，展示布局自动适配效果

核心组件

布局系统由以下核心组件组成：

Logo.vue - Logo 展示组件
Menu.vue - 菜单组件（支持竖版和横版模式）
MenuItem.vue - 菜单项组件（递归渲染）
Breadcrumb.vue - 面包屑导航
RightNav.vue - 右侧导航栏（全屏、消息、设置、用户信息）

布局样式

使用 CSS 变量统一管理布局尺寸：

--molan-layout-nav-height: 60px - 导航栏高度
--molan-layout-aside-width: 200px - 侧边栏宽度
--molan-layout-aside-collapsed: 64px - 折叠后宽度
--molan-layout-tags-height: 34px - 标签页高度

使用建议

布局选择

竖版布局：功能模块多、层级深的系统
横版布局：功能模块少、扁平化的系统

响应式适配

移动端：抽屉式侧边栏
平板端：折叠的侧边栏
桌面端：完整布局

扩展布局

如需添加新的布局模式：

创建布局组件（如 CustomLayout.vue）
在 layout/index.vue 中注册组件
添加对应的布局样式

总结

MolanDev Cloud 的布局系统提供了：

✅ 两种布局模式（竖版/横版）
✅ 丰富的配置选项（Logo、折叠、手风琴、固定 Header、面包屑等）
✅ 响应式设计（自动适配移动端/平板/桌面端）
✅ 平滑切换动画（基于 View Transition API）
✅ 配置持久化（用户选择自动保存）
✅ 易于扩展（支持自定义布局模式）

布局系统 ​

布局模式 ​

1. 竖版布局（默认） ​

2. 横版布局 ​

3. 布局切换 ​

布局配置选项 ​

1. Logo 显示控制 ​

2. 菜单折叠 ​

3. 菜单手风琴 ​

4. 固定 Header ​

5. 面包屑导航 ​

响应式布局 ​

断点设置 ​

核心组件 ​

布局样式 ​

使用建议 ​

布局选择 ​

响应式适配 ​

扩展布局 ​

总结 ​