50 lines
1.0 KiB
Markdown
50 lines
1.0 KiB
Markdown
|
# T004 — App shell layout + nav + mobile dock
|
|||
|
|
|
|||
|
|
> Status: `todo`
|
|||
|
|
> Milestone: `M1`
|
|||
|
|
> Est. change: `~180 lines`
|
|||
|
|
|
|||
|
|
## Goal
|
|||
|
|
|
|||
|
|
登入後主殼：頂欄（logo、通知占位、使用者占位）+ 左導覽 5 項 + 手機底欄 5 項。
|
|||
|
|
|
|||
|
|
## Depends on
|
|||
|
|
|
|||
|
|
- T003
|
|||
|
|
|
|||
|
|
## Inputs
|
|||
|
|
|
|||
|
|
- Spec §9.1 Layout、§5.2 五入口：Today / Crew / Studio / Scout / Outbox
|
|||
|
|
|
|||
|
|
## Outputs
|
|||
|
|
|
|||
|
|
### 程式變更
|
|||
|
|
|
|||
|
|
| 路徑 | 動作 | 說明 |
|
|||
|
|
|------|------|------|
|
|||
|
|
| `apps/web/src/components/layout/AppShell.tsx` | add | 殼 |
|
|||
|
|
| `apps/web/src/components/layout/SidebarNav.tsx` | add | 桌面 |
|
|||
|
|
| `apps/web/src/components/layout/MobileDock.tsx` | add | 手機 |
|
|||
|
|
| `apps/web/src/components/layout/Topbar.tsx` | add | 頂欄 |
|
|||
|
|
| styles | add/edit | layout CSS |
|
|||
|
|
|
|||
|
|
### 行為變更
|
|||
|
|
|
|||
|
|
- 導覽項可高亮 active（依 path）
|
|||
|
|
- 內容區 `<Outlet />` 或 children
|
|||
|
|
|
|||
|
|
## Out of scope
|
|||
|
|
|
|||
|
|
- 真通知、真登出邏輯（T006/T018）
|
|||
|
|
- Scout 內容
|
|||
|
|
|
|||
|
|
## Acceptance
|
|||
|
|
|
|||
|
|
- [ ] 桌面見側欄 5 項
|
|||
|
|
- [ ] 窄螢幕見底欄
|
|||
|
|
- [ ] `npm run build` 通過
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd apps/web && npm run build
|
|||
|
|
```
|