1.5 KiB
1.5 KiB
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 变量管理主题