# 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）