布局系统
相关源文件
介绍
vue-element-admin 中的布局系统为应用程序的用户界面提供了基础结构。它定义了应用程序的主要部分如何组织以及它们之间如何交互。本文档涵盖了核心布局组件、它们之间的关系以及它们如何协同工作以创建一致的用户体验。
有关侧边栏实现的具体信息，请参阅 侧边栏和导航。有关基于选项卡导航系统的详细信息，请参阅 TagsView 和缓存。
布局结构概览
布局系统创建了一个标准的管理界面，分为四个主要区域：
- Navbar - 顶部导航栏，包含控件和用户信息
- Sidebar - 左侧导航菜单，包含应用程序路由
- TagsView - 选项卡式界面，用于显示已打开的页面/路由
- AppMain - 主要内容区域，页面组件在此渲染
布局组件图
来源
关键布局组件
AppMain 组件
AppMain 是路由组件（页面）显示的主要内容容器。它包括：
- 路由变更时的过渡效果
- 使用
<keep-alive> 进行视图缓存，以保留组件状态
- 根据是否存在 navbar 和 tagsview 动态计算高度
关键实现细节
- 使用带有“fade-transform”效果的
<transition> 实现平滑的页面过渡
- 通过
<keep-alive> 使用计算出的要缓存视图列表进行组件缓存
- 响应式尺寸，根据头部是否固定以及是否启用 TagsView 进行调整
来源
Navbar 组件
Navbar 在应用程序顶部提供导航控件和用户相关功能。
特性
- 汉堡包菜单切换侧边栏
- 显示当前路由路径的面包屑导航
- 头部搜索，方便快速导航
- 错误日志访问
- 全屏切换
- UI 尺寸选择器
- 用户头像及下拉菜单（个人资料、退出等）
实现
- 响应式设计，桌面版和移动版有不同的组件集
- 与 Vuex store 集成，用于应用程序状态（侧边栏状态、用户信息）
- 侧边栏切换和用户登出的事件处理
来源
TagsView 实现了一个选项卡式导航系统，将当前打开的页面显示为可点击的选项卡。
特性
- 当前活动路由的视觉指示
- 选项卡之间的点击导航
- 鼠标中键单击以关闭选项卡
- 右键上下文菜单，包含选项
- 刷新当前视图
- 关闭当前选项卡
- 关闭其他选项卡
- 关闭所有选项卡
- 当打开许多选项卡时，进行水平滚动
- 支持无法关闭的“固定”选项卡
实现细节
- 使用 ScrollPane 组件进行水平滚动
- 通过 Vuex store 维护已访问的视图
- 支持路由缓存以保留组件状态
- 对路由配置中标记的“固定”路由进行特殊处理
来源
布局交互和状态管理
布局组件通过多种机制相互以及与应用程序的其余部分进行交互：
响应式布局行为
布局系统适应不同的屏幕尺寸和设备。
桌面模式
- 完整的侧边栏，包含文本和图标
- 完整的导航栏，显示所有控件
移动模式
- 折叠的侧边栏，仅显示图标
- 简化的导航栏，包含基本控件
这通过 Vuex store 的 app 模块进行管理，该模块跟踪设备类型和侧边栏状态。
路由渲染和缓存过程
来源
页面组件与布局集成
页面组件在 AppMain 区域内渲染。它们通常使用标准的“app-container”类以实现一致的样式。
标准页面结构
<div class="app-container">
<!-- Page content -->
</div>
导航到页面时：
- 路由由 Vue Router 处理。
- 相应的组件在 AppMain 中渲染。
- 如果尚未存在，则向 TagsView 添加一个选项卡。
- 如果配置了缓存，则缓存该组件。
代码库中的示例页面遵循此模式：
- Excel 导出页面
- 指南页面
- 剪贴板演示
- 带 keep-alive 的选项卡演示
来源
高级布局功能
视图缓存
布局系统实现了智能视图缓存，以在路由之间导航时保留组件状态。
- TagsView 组件在 Vuex store 中跟踪已访问的视图。
- AppMain 使用计算属性从 store 获取缓存的视图。
- 组件
<keep-alive> 接收此列表以确定要缓存的组件。
- 刷新视图时，将在导航之前移除缓存的实例。
该系统允许：
- 离开页面后再返回时，保留表单输入
- 维护滚动位置和 UI 状态
- 通过不重新渲染未更改的组件来提高性能
来源
TagsView 实现了一个自定义的上下文菜单系统，用于选项卡管理。
- 在任何选项卡上单击鼠标右键时出现。
- 位置根据单击坐标计算。
- 提供了多个选项卡管理选项。
- 单击其他地方会自动关闭。
- 使用事件监听器进行正确清理。
来源
总结
vue-element-admin 中的布局系统为应用程序界面提供了一个灵活、响应式的框架。它将内容渲染与导航控件分离，同时在路由更改时保持状态。基于组件的架构允许自定义，同时确保一致的用户体验。
关键组件（Navbar、Sidebar、TagsView 和 AppMain）协同工作，为管理应用程序创建了一个高效的界面，其中内置了选项卡导航、状态保存和响应式设计等功能。