meida/docs/开发任务包/F4-AI对话页.md

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）