meida/docs/开发任务包/F2-应用壳与首页.md

F2 · 应用壳（Tabs）与首页

分支：task/f2-fe ｜ worktree：G:\meida-app-f2 ｜ 只改：app/entry/src/main/ets/pages/HomePage.ets（填桩）、ets/components/f2/（自建） 先读《README-FE批次.md》，严格遵守。禁止 import 其它页面文件（规程铁律 2）。

目标

应用主壳：底部 Tabs（首页/报告/AI/我的）+ 首页内容 + 两个通用组件。

HomePage 要求

1. @Entry @Component struct HomePage + 底部 Tabs（TabContent × 4，barMode 固定四项、图标用 SymbolGlyph 或简单 Text、中文标签）
2. Tab1 首页（本页实现）：
   • 问候区（"你好，美搭" + 日期）
   • 功能入口卡 ×2：「生成我的形象报告」「AI 穿搭顾问」——点击 router.pushUrl({url:'pages/ReportCreatePage'}) / 'pages/ChatPage'（路径跳转，不 import）
   • 「今日额度」小卡：GET /api/v1/quota?quota_key=agent_chat 显示"AI 对话剩余 N 次"（失败静默显示占位"—"，不打扰首页）
3. Tab2 报告 / Tab4 我的：占位内容 + 居中按钮跳 pages/ReportCreatePage / pages/ProfilePage（真页面是独立路由页；后续迭代再决定嵌组件还是跳页，本批先跳页）
4. Tab3 AI：占位说明 + 跳 pages/ChatPage 按钮
   • 备选方案：若你能在不 import ChatPage 文件的前提下用 builder 占位则更好；做不到就跳页，别破铁律
5. 返回键处理：Tab 页内再按返回应退出应用（onBackPress 返回 false 走默认）——不加复杂逻辑，注释说明即可

通用组件（ets/components/f2/）

1. LoadingView：居中 LoadingProgress + 可选文案；props 用 @Prop
2. ErrorView：错误图标/文案 + message + hint + 「重试」按钮回调（onRetry?: () => void）——这是 NFR-UX-02「失败态有原因+下一步指引」的落地组件，其它任务后续会移用（目录带 f2 前缀，移动由协调者做）

验收

1. 构建门禁 BUILD SUCCESSFUL
2. 四 Tab 可切换、三个跳转按钮路径正确（跳转目标页面是桩也没关系）
3. ArkTS 铁律自查零违规；请求只走 ApiClient
4. 单次提交：feat(app): app shell tabs with home entries and common loading/error views（F2）