thread-master/docs/product/haixun-console/tasks/T004-app-shell.md

T004 — App shell layout + nav + mobile dock

Status: done
Milestone: M1
Est. change: ~180 lines
Completed: 2026-07-09

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 通過

cd apps/web && npm run build