Day 23 · PRD 详细设计：交互流程

属性	值
日期	2026-09-03（周四）
周次	第5周：PRD 撰写
轨	轨2 · 项目 Agent 落地调研
时间	1 小时
状态	⬜ 待完成 → ✅ 已完成

📋 Checklist

设计对话交互界面（聊天框样式、消息类型、Loading 状态）
设计 Tool 调用过程的可视化（是否展示"正在搜索商品..."）
设计反馈机制（点赞/踩、举报、重新生成）
参考现有 AI 搜索的 UI 风格（保持一致性）

📖 参考材料

材料	路径
现有 AI 搜索 UI	`smallrig-shop-mall/pc/src/pages/ai-search/`
AI 搜索组件	`smallrig-shop-mall/pc/src/components/ai-search/`
反馈机制（点赞/踩）	AI 搜索结果页已有

✍️ PRD 草稿

对话界面设计

┌──────────────────────────────────┐
│  🤖 AI 购物助手                    │
│  ──────────────────────────────── │
│                                   │
│  👤 用户：我想给 Sony A7III 配一个   │
│      兔笼和跟焦器                    │
│                                   │
│  🤖 助手：好的，帮你搜索...          │
│      🔍 正在搜索「A7III 兔笼」...    │
│      🔍 正在搜索「A7III 跟焦器」...  │
│                                   │
│      📦 为你找到以下推荐：           │
│      ┌──────┐ ┌──────┐            │
│      │ 兔笼A │ │ 兔笼B │            │
│      └──────┘ └──────┘            │
│      ...                          │
│                                   │
│  ──────────────────────────────── │
│  💬 输入你的需求...          [发送] │
└──────────────────────────────────┘

消息类型

类型	样式	说明
用户消息	右对齐，气泡
Agent 文本	左对齐，气泡
Agent 搜索中	左对齐，Loading 动画	"正在搜索..."
Agent 商品卡片	左对齐，商品卡片列表	可点击跳转
Agent 错误	左对齐，错误提示	"搜索失败，请重试"

反馈机制

操作	触发	已有实现
点赞	点击 👍	✅ AI 搜索已有
踩	点击 👎	✅ AI 搜索已有
重新生成	点击刷新	需新增
举报	点击举报	需新增

❓ 疑问

📤 产出

交互设计 → 追加到产出归档/Agent模块PRD.md

⏭️ 完成后：更新当前进度