# 9.16 布局系统

:::tip 概述
布局在 `ui/src/layout/`：主框架 index.vue + parentLayout.vue（多级嵌套），components/ 内含侧边栏、顶栏、标签页、面包屑等区域组件。菜单驱动侧边栏渲染。
:::

## 布局结构

```text
┌──────────────────────────────────────┐
│ 顶栏：面包屑 + 标签页 + 用户头像 + 锁屏 │
├────────────┬─────────────────────────┤
│ 侧边栏      │  内容区（router-view）    │
│ （菜单树）  │                          │
└────────────┴─────────────────────────┘
```

## 组件划分

| 区域 | 内容 |
|---|---|
| index.vue | 主布局（区域编排） |
| parentLayout.vue | 动态路由的父级壳（嵌套路由承接） |
| 侧边栏 | 按 asyncRoute 菜单树渲染，图标经 router-icons 映射 |
| 顶栏 | 折叠开关、面包屑、标签页、用户下拉 |
| 标签页 | tabsView store 驱动的多页签 |

## 菜单渲染

侧边栏数据来自动态路由表（GetMenus 生成）：隐藏菜单（hide=1）、停用菜单（status=1）在生成阶段已过滤——**菜单表即侧边栏**，前端不维护第二份菜单配置。

## 响应式

布局断点经 breakpointEnum 与 element-resize-detector 处理：窄屏自动折叠侧边栏，移动端适配基础布局。

## 定制入口

- 区域增减改 index.vue 布局编排
- 各区域内部样式在对应组件 scoped 内
- 全局尺寸（侧边栏宽度、顶栏高度）在 designSetting store

## 相关

- [9.5 路由与动态菜单](/zh/frontend/router.html)
- [6.3 菜单管理](/zh/modules/menu.html)