46 lines
1.8 KiB
Markdown
46 lines
1.8 KiB
Markdown
# 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)
|