64 lines
2.8 KiB
Markdown
64 lines
2.8 KiB
Markdown
# 9.15 布局系统
|
||
|
||
:::tip 概述
|
||
布局系统（src/layout/）提供管理后台标准骨架：侧栏菜单、顶栏（面包屑/用户区）、标签页（tabsView）、内容区（keep-alive 页面缓存）、锁屏等，全部受 projectSetting 在线配置驱动。
|
||
:::
|
||
|
||
## 布局骨架
|
||
|
||
```text
|
||
┌───────┬──────────────────────────────────────────┐
|
||
│ │ 顶栏：折叠按钮 / 面包屑 / 全屏 / 用户头像 │
|
||
│ 侧栏 ├──────────────────────────────────────────┤
|
||
│ 菜单 │ 标签页（tabsView）：多页签导航 + 缓存 │
|
||
│ ├──────────────────────────────────────────┤
|
||
│ │ │
|
||
│ │ 内容区 <router-view> + keep-alive │
|
||
│ │ │
|
||
└───────┴──────────────────────────────────────────┘
|
||
```
|
||
|
||
## 组成
|
||
|
||
| 部分 | 说明 |
|
||
|------|------|
|
||
| 侧栏 | 菜单数据来自 asyncRoute（getMenus 生成）；支持折叠；图标 router-icons 映射 |
|
||
| 顶栏 | 面包屑（路由层级）、主题/全屏工具、用户下拉（个人中心/退出） |
|
||
| tabsView | 多标签页导航；visitedTabs 记录；keep-alive name 对应缓存 |
|
||
| 内容区 | router-view；cachedTabs 内页面状态保留（列表筛选/页码不丢） |
|
||
| 锁屏 | lockscreen store（离开工位锁定） |
|
||
|
||
## 布局模式（projectSetting）
|
||
|
||
```text
|
||
侧栏布局（默认）/ 顶部导航布局等模式切换
|
||
侧栏主题（深/浅）、固定头/侧栏、标签页开关、面包屑开关
|
||
响应式：窄屏侧栏自动折叠
|
||
```
|
||
|
||
## 与路由/菜单的协作
|
||
|
||
```text
|
||
asyncRoute.generateRoutes（getMenus）
|
||
→ 侧栏渲染菜单树（hide=1 不渲染，sort 排序）
|
||
→ 动态路由 addRoute
|
||
→ tabsView 记录访问页签
|
||
→ keep-alive 按 name 缓存页面状态
|
||
```
|
||
|
||
## keep-alive 与页面缓存
|
||
|
||
```text
|
||
缓存条件：路由 meta.keepAlive + tabsView cachedTabs 包含
|
||
页面 component name 需与路由 name 一致（缓存键）
|
||
清除缓存：tabsView 右键"关闭其他/全部"或 delCachedTab
|
||
列表页需要保留筛选/页码时开启 keep-alive
|
||
```
|
||
|
||
## 定制建议
|
||
|
||
+ 品牌定制：logo（assets）、主题色（9.14 样式与主题定制）、系统名称（配置）
|
||
+ 新布局组件放 layout/ 下，勿塞进页面
|
||
+ 布局级权限：菜单驱动（未授权菜单不出现）——无需布局层额外判断
|
||
+ iframe 页面：views/iframe（内嵌外部系统场景，路由 meta 指定 URL）
|