33 lines
2.2 KiB
Markdown
33 lines
2.2 KiB
Markdown
# 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）`
|