47 lines
1.5 KiB
Markdown
47 lines
1.5 KiB
Markdown
# Spec: 管理后台布局系统
|
|
|
|
## ADDED Requirements
|
|
|
|
#### Scenario: 管理后台主布局渲染
|
|
**Given** 用户已登录并访问管理后台
|
|
**When** 页面加载
|
|
**Then** 显示包含侧边栏、头部、主内容区的完整布局
|
|
|
|
#### Scenario: 侧边栏导航
|
|
**Given** 管理后台布局
|
|
**When** 用户点击侧边栏菜单项
|
|
**Then** 高亮当前路由对应的菜单项，平滑跳转到对应页面
|
|
|
|
#### Scenario: 侧边栏折叠功能
|
|
**Given** 管理后台布局
|
|
**When** 用户点击折叠按钮
|
|
**Then** 侧边栏平滑折叠/展开，保持用户偏好设置
|
|
|
|
#### Scenario: 头部面包屑导航
|
|
**Given** 管理后台布局
|
|
**When** 用户在不同页面间切换
|
|
**Then** 显示当前页面的面包屑路径，支持点击跳转
|
|
|
|
#### Scenario: 用户操作菜单
|
|
**Given** 管理后台头部
|
|
**When** 用户点击用户头像或用户名
|
|
**Then** 显示下拉菜单，包含用户信息、设置、退出等选项
|
|
|
|
#### Scenario: 响应式布局适配
|
|
**Given** 管理后台布局在不同设备上
|
|
**When** 屏幕尺寸变化
|
|
**Then** 自动调整布局：桌面端显示完整侧边栏，平板端可折叠，移动端隐藏侧边栏
|
|
|
|
## 组件结构
|
|
- AdminLayout.vue: 主布局容器
|
|
- Sidebar.vue: 侧边栏导航
|
|
- Header.vue: 头部导航
|
|
- Breadcrumb.vue: 面包屑组件
|
|
- UserActions.vue: 用户操作菜单
|
|
|
|
## 样式规范
|
|
- 主色调: #6B46C1 (紫色)
|
|
- 边框圆角: 8px
|
|
- 过渡动画: all 200ms ease-in-out
|
|
- 8px 网格间距系统
|
|
- 使用 CSS 变量管理主题 |