feat: 统一全局 Header 结构

- 新增 AppHeader 组件(Logo + 台入口 + 用户状态)
- 新增 UserDropdown 组件(用户下拉菜单)
- 新增 AppLayout 布局组件
- 移除 SidebarBrand 和 SidebarUser 组件
- 修改各台页面,移除侧边栏中的品牌区和用户区
- 修改 HomePage,移除独立 header/footer
- 修改 Layout 组件,简化为 sidebar + content
- 账户设置改为弹框形式,不中断用户操作
- 更新 README.md 布局系统说明
- 同步 delta specs 到主 specs
This commit is contained in:
2026-03-27 12:27:38 +08:00
parent ce9ebe5784
commit 7f493aa921
22 changed files with 793 additions and 608 deletions

View File

@@ -96,8 +96,8 @@ pnpm build # 验证打包不运行pnpm dev会挂起流程
src/
├── components/ # 组件库
│ ├── common/ # 通用组件 (Modal, Toast, EmptyState等)
│ ├── layout/ # 布局组件 (SidebarBrand, SidebarUser等)
│ ├── Layout.jsx # 主布局组件
│ ├── layout/ # 布局组件 (AppHeader, AppLayout, UserDropdown等)
│ ├── Layout.jsx # 主布局组件sidebar + content
│ └── ListSelector.jsx # 列表选择器
├── contexts/ # 全局状态 (UserContext)
@@ -264,14 +264,15 @@ export default Example;
| 组件 | 路径 | 用途 |
|------|------|------|
| Layout | `components/Layout.jsx` | 主布局sidebar+header+main |
| Layout | `components/Layout.jsx` | 主布局sidebar + content |
| AppLayout | `components/layout/AppLayout.jsx` | 全局布局header + main |
| AppHeader | `components/layout/AppHeader.jsx` | 统一导航头部 |
| UserDropdown | `components/layout/UserDropdown.jsx` | 用户下拉菜单 |
| Modal | `components/common/Modal.jsx` | 确认弹窗 |
| Toast | `components/common/Toast.jsx` | 消息提示 |
| EmptyState | `components/common/EmptyState.jsx` | 空状态展示 |
| SearchBar | `components/common/SearchBar.jsx` | 搜索框 |
| StatusBadge | `components/common/StatusBadge.jsx` | 状态标签 |
| SidebarBrand | `components/layout/SidebarBrand.jsx` | 侧边栏品牌 |
| SidebarUser | `components/layout/SidebarUser.jsx` | 侧边栏用户信息 |
| SidebarNavItem | `components/layout/SidebarNavItem.jsx` | 侧边栏导航项 |
---
@@ -284,14 +285,21 @@ export default Example;
// App.jsx
<HashRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/console" element={<ConsolePage />} />
<Route path="/admin" element={<AdminPage />} />
<Route path="/developer" element={<DeveloperPage />} />
<Route path="/login" element={<LoginPage />} />
<Route element={<AppLayout />}>
<Route path="/" element={<HomePage />} />
<Route path="/console" element={<ConsolePage />} />
<Route path="/admin" element={<AdminPage />} />
<Route path="/developer" element={<DeveloperPage />} />
</Route>
</Routes>
</HashRouter>
```
**说明**
- `AppLayout` 包裹所有需要统一 Header 的页面
- 登录页独立,不使用 `AppLayout`
### 子页面路由
每个主页面内部管理子页面:
@@ -425,4 +433,4 @@ api.logs.filter({ user, type, status });
---
*最后更新2026-03-26*
*最后更新2026-03-27*