feat: 统一全局 Header 结构
- 新增 AppHeader 组件(Logo + 台入口 + 用户状态) - 新增 UserDropdown 组件(用户下拉菜单) - 新增 AppLayout 布局组件 - 移除 SidebarBrand 和 SidebarUser 组件 - 修改各台页面,移除侧边栏中的品牌区和用户区 - 修改 HomePage,移除独立 header/footer - 修改 Layout 组件,简化为 sidebar + content - 账户设置改为弹框形式,不中断用户操作 - 更新 README.md 布局系统说明 - 同步 delta specs 到主 specs
This commit is contained in:
@@ -1,15 +1,25 @@
|
||||
## ADDED Requirements
|
||||
## Purpose
|
||||
布局系统提供应用级外壳布局、聊天页面布局、管理台布局等核心页面骨架。
|
||||
|
||||
## Requirements
|
||||
|
||||
### Requirement: 应用外壳布局
|
||||
布局系统 SHALL 提供应用级外壳布局,包含侧边栏、顶部栏、主内容区。
|
||||
布局系统 SHALL 提供应用级外壳布局,包含全局头部、可选侧边栏、主内容区。
|
||||
|
||||
#### Scenario: 基础应用布局
|
||||
- **WHEN** 开发者需要管理控制台布局
|
||||
- **THEN** 系统 SHALL 提供 `.app-shell` 类,包含 `.app-shell__sidebar`、`.app-shell__header`、`.app-shell__main` 区域
|
||||
- **THEN** 系统 SHALL 提供 `.app-layout` 类,包含 `.app-layout__header`、`.app-layout__sidebar`(可选)、`.app-layout__main` 区域
|
||||
|
||||
#### Scenario: 侧边栏结构
|
||||
- **WHEN** 侧边栏需要品牌区、导航区、用户区
|
||||
- **THEN** 系统 SHALL 提供 `.sidebar__brand`、`.sidebar__nav`、`.sidebar__user` 元素类
|
||||
#### Scenario: 全局头部
|
||||
- **WHEN** 页面需要统一导航
|
||||
- **THEN** 系统 SHALL 在 `.app-layout__header` 区域渲染 `AppHeader` 组件
|
||||
- **AND** 头部固定在页面顶部
|
||||
|
||||
#### Scenario: 侧边栏可选
|
||||
- **WHEN** 页面需要侧边栏(如工作台、开发台、管理台)
|
||||
- **THEN** 系统 SHALL 渲染 `.app-layout__sidebar` 区域
|
||||
- **WHEN** 页面不需要侧边栏(如主页)
|
||||
- **THEN** 系统 SHALL 不渲染侧边栏区域
|
||||
|
||||
#### Scenario: 导航项
|
||||
- **WHEN** 侧边栏需要导航菜单
|
||||
@@ -27,16 +37,13 @@
|
||||
- **WHEN** 导航项需要文本和额外信息
|
||||
- **THEN** 系统 SHALL 提供 `.nav-item__text` 和 `.nav-item__meta` 元素类
|
||||
|
||||
#### Scenario: 顶部栏结构
|
||||
- **WHEN** 顶部栏需要左侧标题区和右侧操作区
|
||||
- **THEN** 系统 SHALL 提供 `.header__left`、`.header__right` 元素类
|
||||
|
||||
### Requirement: 聊天页面布局
|
||||
布局系统 SHALL 提供聊天页面专用布局。
|
||||
布局系统 SHALL 提供聊天页面专用布局,侧边栏不包含品牌区和用户区。
|
||||
|
||||
#### Scenario: 聊天布局容器
|
||||
- **WHEN** 开发者需要聊天界面布局
|
||||
- **THEN** 系统 SHALL 提供 `.chat-layout` 类,包含 `.chat-layout__header`、`.chat-layout__sidebar`、`.chat-layout__content`
|
||||
- **THEN** 系统 SHALL 提供 `.chat-layout` 类,包含 `.chat-layout__sidebar`、`.chat-layout__content`
|
||||
- **AND** 侧边栏不包含品牌区(`.sidebar-brand`)
|
||||
|
||||
#### Scenario: 会话列表
|
||||
- **WHEN** 侧边栏需要展示会话列表
|
||||
@@ -46,12 +53,23 @@
|
||||
- **WHEN** 需要展示消息和输入区
|
||||
- **THEN** 系统 SHALL 提供 `.chat-content__messages` 和 `.chat-content__input` 区域
|
||||
|
||||
#### Scenario: 侧边栏不含用户区
|
||||
- **WHEN** 聊天页面侧边栏渲染时
|
||||
- **THEN** 系统 SHALL 不显示用户状态区域
|
||||
- **AND** 用户状态统一在全局头部显示
|
||||
|
||||
### Requirement: 管理台布局
|
||||
布局系统 SHALL 提供管理台页面布局。
|
||||
布局系统 SHALL 提供管理台页面布局,侧边栏不包含品牌区和用户区。
|
||||
|
||||
#### Scenario: 管理台侧边栏
|
||||
- **WHEN** 管理台需要独立导航结构
|
||||
- **THEN** 系统 SHALL 提供 `.admin-layout` 类,包含 `.admin-layout__sidebar` 和 `.admin-layout__content`
|
||||
- **AND** 侧边栏不包含品牌区(`.admin-sidebar-header`)和用户区(`.admin-sidebar-user`)
|
||||
|
||||
#### Scenario: 侧边栏不含用户区
|
||||
- **WHEN** 管理台侧边栏渲染时
|
||||
- **THEN** 系统 SHALL 不显示用户状态区域
|
||||
- **AND** 用户状态统一在全局头部显示
|
||||
|
||||
### Requirement: 页面内容区
|
||||
布局系统 SHALL 提供标准化的页面内容容器。
|
||||
|
||||
Reference in New Issue
Block a user