24 lines
1.8 KiB
Markdown
24 lines
1.8 KiB
Markdown
# F4 · AI 穿搭对话页
|
||
|
||
> 分支：`task/f4-fe` ｜ worktree：`G:\meida-app-f4` ｜ 只改：`pages/ChatPage.ets`（填桩）、`ets/components/f4/`（自建）
|
||
> 先读《README-FE批次.md》，严格遵守（chat 响应结构见其 §4）。
|
||
|
||
## ChatPage 要求
|
||
|
||
1. **消息列表**：`@State messages: ChatMsg[]`（本地内存态，V1 不做会话持久化——后端 ag_conversation 属后续任务，注释说明）；List + ForEach 渲染，气泡样式区分用户/AI（左右对齐 + 配色）
|
||
2. `ChatMsg` 具名 interface：`{role: 'user'|'ai', text: string, meta?: string}`（meta 存"模型 · 耗时"小字）
|
||
3. **发送流程**：底部输入框（TextInput，回车/按钮发送）→ push 用户消息 → AI 侧显示"正在思考…"占位气泡 → `POST /api/v1/agent/chat` `{message}` → 成功替换为 reply，meta 拼接 `{model} · {latency_ms}ms`，并在顶部薄条更新 `quota_remaining`（"今日剩余 N 次"）
|
||
4. **失败态**（只 catch ApiError）：
|
||
- 40301（额度用尽）：AI 气泡位显示 e.message（后端文案无价格字样）+ e.hint 次行小字；输入框保留可重试
|
||
- 60003（今日服务上限）/ 其它：同样气泡位展示 message+hint；"正在思考…"占位必须撤掉
|
||
5. 发送中禁用输入框防连点；空消息不发送
|
||
6. 顶部栏：标题"AI 穿搭顾问" + 返回（router.back）
|
||
7. 首次进入自动插入一条 AI 欢迎语（本地静态文案，不调接口）："你好，我是你的穿搭顾问，可以问我面试怎么穿、约会怎么搭～"
|
||
|
||
## 验收
|
||
|
||
1. 构建门禁 `BUILD SUCCESSFUL`
|
||
2. 发送/思考/成功/四种失败展示（40301、60003、网络错）路径齐全；思考占位在失败时一定被撤掉
|
||
3. ArkTS 铁律零违规；只走 ApiClient；无第三方依赖
|
||
4. 单次提交：`feat(app): AI chat page with quota hint and error states（F4）`
|