feat: 统一全局 Header 结构
- 新增 AppHeader 组件(Logo + 台入口 + 用户状态) - 新增 UserDropdown 组件(用户下拉菜单) - 新增 AppLayout 布局组件 - 移除 SidebarBrand 和 SidebarUser 组件 - 修改各台页面,移除侧边栏中的品牌区和用户区 - 修改 HomePage,移除独立 header/footer - 修改 Layout 组件,简化为 sidebar + content - 账户设置改为弹框形式,不中断用户操作 - 更新 README.md 布局系统说明 - 同步 delta specs 到主 specs
This commit is contained in:
28
README.md
28
README.md
@@ -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*
|
||||
|
||||
Reference in New Issue
Block a user