feat: 统一全局 Header 结构
- 新增 AppHeader 组件(Logo + 台入口 + 用户状态) - 新增 UserDropdown 组件(用户下拉菜单) - 新增 AppLayout 布局组件 - 移除 SidebarBrand 和 SidebarUser 组件 - 修改各台页面,移除侧边栏中的品牌区和用户区 - 修改 HomePage,移除独立 header/footer - 修改 Layout 组件,简化为 sidebar + content - 账户设置改为弹框形式,不中断用户操作 - 更新 README.md 布局系统说明 - 同步 delta specs 到主 specs
This commit is contained in:
111
openspec/specs/unified-header/spec.md
Normal file
111
openspec/specs/unified-header/spec.md
Normal file
@@ -0,0 +1,111 @@
|
||||
## Purpose
|
||||
统一的全局导航头部,包含品牌标识、台入口切换和用户状态管理。
|
||||
|
||||
## Requirements
|
||||
|
||||
### Requirement: 统一导航头部
|
||||
系统 SHALL 提供统一的全局导航头部组件,包含品牌标识、台入口切换和用户状态。
|
||||
|
||||
#### Scenario: 头部基础结构
|
||||
- **WHEN** 页面需要显示导航头部
|
||||
- **THEN** 系统 SHALL 提供 `AppHeader` 组件
|
||||
- **AND** 组件包含左侧品牌区和右侧功能区
|
||||
|
||||
#### Scenario: 品牌区展示
|
||||
- **WHEN** 用户查看头部左侧
|
||||
- **THEN** 系统 SHALL 显示 Logo 图标和 "GrandClaw" 标题
|
||||
- **AND** Logo 使用 `.sidebar-logo-icon` 样式类
|
||||
|
||||
### Requirement: 台入口切换
|
||||
系统 SHALL 在头部提供三个台的入口导航,支持切换确认和高亮状态。
|
||||
|
||||
#### Scenario: 台入口展示
|
||||
- **WHEN** 用户查看头部右侧
|
||||
- **THEN** 系统 SHALL 显示"工作台"、"开发台"、"管理台"三个入口
|
||||
- **AND** 每个入口包含图标和文字
|
||||
|
||||
#### Scenario: 当前台高亮
|
||||
- **WHEN** 用户在某个台内(如工作台)
|
||||
- **THEN** 系统 SHALL 为当前台入口添加高亮样式
|
||||
- **AND** 其他台入口保持默认样式
|
||||
|
||||
#### Scenario: 台切换确认
|
||||
- **WHEN** 用户点击非当前台的入口
|
||||
- **THEN** 系统 SHALL 显示确认对话框
|
||||
- **AND** 对话框提示"切换到[台名称]?"
|
||||
- **AND** 用户确认后执行跳转
|
||||
|
||||
#### Scenario: 台入口路由
|
||||
- **WHEN** 用户确认切换
|
||||
- **THEN** 系统 SHALL 跳转到对应的路由
|
||||
- **AND** 工作台路由为 `/console`
|
||||
- **AND** 开发台路由为 `/developer`
|
||||
- **AND** 管理台路由为 `/admin`
|
||||
|
||||
### Requirement: 用户状态区域
|
||||
系统 SHALL 在头部右侧显示当前用户状态,支持已登录和未登录两种状态。
|
||||
|
||||
#### Scenario: 已登录状态展示
|
||||
- **WHEN** 用户已登录
|
||||
- **THEN** 系统 SHALL 显示用户头像、用户名和下拉图标
|
||||
- **AND** 头像使用 `user-avatar` 样式类
|
||||
|
||||
#### Scenario: 未登录状态展示
|
||||
- **WHEN** 用户未登录
|
||||
- **THEN** 系统 SHALL 显示"登录"按钮
|
||||
- **AND** 点击后跳转到登录页
|
||||
|
||||
### Requirement: 用户下拉菜单
|
||||
系统 SHALL 提供用户下拉菜单,包含账户设置和退出登录选项。
|
||||
|
||||
#### Scenario: 下拉菜单展开
|
||||
- **WHEN** 用户点击用户状态区域
|
||||
- **THEN** 系统 SHALL 展开下拉菜单
|
||||
- **AND** 菜单包含"账户设置"和"退出登录"选项
|
||||
|
||||
#### Scenario: 账户设置入口
|
||||
- **WHEN** 用户点击"账户设置"
|
||||
- **THEN** 系统 SHALL 打开账户设置弹框
|
||||
- **AND** 下拉菜单收起
|
||||
- **AND** 弹框宽度为 720px
|
||||
- **AND** 弹框内按钮靠右对齐
|
||||
|
||||
#### Scenario: 退出登录
|
||||
- **WHEN** 用户点击"退出登录"
|
||||
- **THEN** 系统 SHALL 执行退出操作
|
||||
- **AND** 跳转到登录页
|
||||
|
||||
#### Scenario: 点击外部关闭
|
||||
- **WHEN** 下拉菜单展开时
|
||||
- **AND** 用户点击菜单外部区域
|
||||
- **THEN** 系统 SHALL 收起下拉菜单
|
||||
|
||||
### Requirement: 头部移动端适配
|
||||
系统 SHALL 在移动端适配头部布局,将台入口收起到汉堡菜单。
|
||||
|
||||
#### Scenario: 移动端台入口收起
|
||||
- **WHEN** 屏幕宽度小于 768px
|
||||
- **THEN** 系统 SHALL 隐藏台入口的直接显示
|
||||
- **AND** 显示汉堡菜单按钮
|
||||
|
||||
#### Scenario: 移动端菜单展开
|
||||
- **WHEN** 用户点击汉堡菜单按钮
|
||||
- **THEN** 系统 SHALL 展开移动端菜单
|
||||
- **AND** 菜单包含三个台入口选项
|
||||
|
||||
#### Scenario: 移动端用户状态保留
|
||||
- **WHEN** 屏幕宽度小于 768px
|
||||
- **THEN** 系统 SHALL 保持用户状态区域可见
|
||||
- **AND** 用户状态不收起到汉堡菜单中
|
||||
|
||||
### Requirement: 头部布局路由控制
|
||||
系统 SHALL 通过路由配置控制头部的显示与隐藏。
|
||||
|
||||
#### Scenario: 需要 Header 的页面
|
||||
- **WHEN** 用户访问主页、工作台、开发台、管理台
|
||||
- **THEN** 系统 SHALL 显示统一头部
|
||||
|
||||
#### Scenario: 不需要 Header 的页面
|
||||
- **WHEN** 用户访问登录页
|
||||
- **THEN** 系统 SHALL 不显示头部
|
||||
- **AND** 页面使用独立布局
|
||||
Reference in New Issue
Block a user