1.8 KiB
1.8 KiB
9.16 布局系统
:::tip 概述
布局在 ui/src/layout/：主框架 index.vue + parentLayout.vue（多级嵌套），components/ 内含侧边栏、顶栏、标签页、面包屑等区域组件。菜单驱动侧边栏渲染。
:::
布局结构
┌──────────────────────────────────────┐
│ 顶栏：面包屑 + 标签页 + 用户头像 + 锁屏 │
├────────────┬─────────────────────────┤
│ 侧边栏 │ 内容区（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