Molan

Appearance

布局系统 ​

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

布局模式 ​

1. 竖版布局（默认） ​

特点：

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

核心组件： VerticalLayout.vue

2. 横版布局 ​

特点：

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

核心组件： HorizontalLayout.vue

3. 布局切换 ​

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

布局切换

布局配置选项 ​

1. Logo 显示控制 ​

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

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

2. 菜单折叠 ​

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

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

3. 菜单手风琴 ​

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

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

4. 固定 Header ​

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

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

5. 面包屑导航 ​

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

核心组件： Breadcrumb.vue

响应式布局 ​

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

核心组件 ​

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

  • 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 - 标签页高度

使用建议 ​

布局选择 ​

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

响应式适配 ​

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

扩展布局 ​

如需添加新的布局模式：

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

总结 ​

Molan Cloud 的布局系统提供了：

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