# 页面设计 

## 页面总体布局设计
### 现代化布局
- 采用经典的“侧边导航 + 顶部应用栏 + 主内容区”布局
- 主内容区最上面显示Header,显示当前处于的主功能区介绍

### 可收缩侧边栏
- 左侧的功能栏可以通过点击按钮在“完整模式”和“图标模式”之间平滑切换，有效节省屏幕空间。

### 页面切换
- 点击侧边栏的不同菜单项，主内容区会流畅地切换到对应的页面组件，实现了单页面应用（SPA）的核心导航功能。
- 侧边栏高亮展示当前功能页面

### 明亮/暗色主题
- 左侧功能栏最下面提供了一个主题切换按钮，可以一键在明亮（Light）和暗色（Dark）模式间切换。

### 响应式设计
- 整个布局基于 Vuetify 的栅格系统，无论在桌面、平板还是手机上都能提供良好的视觉和操作体验。

