51 lines
2.1 KiB
Markdown
51 lines
2.1 KiB
Markdown
# 用户端聊天页设计验收
|
||
|
||
## 对照范围
|
||
|
||
- 参考图：`/Users/nelson/Downloads/ChatGPT Image 2026年7月11日 16_21_34.png`
|
||
- 实际页面：`http://127.0.0.1:5173/`
|
||
- 主要对照尺寸：390 × 844
|
||
- 补充响应式尺寸：375 × 667、414 × 896
|
||
- 对照截图：`test_records/screenshots/用户端聊天页设计对照.png`
|
||
|
||
## 验收结果
|
||
|
||
### 视觉层级
|
||
|
||
- 顶部菜单、助手名称、连接状态、用户信息和退出按钮层级清楚。
|
||
- 当前会话额度使用紧凑浅绿色横条，真实展示 `todayUsed/dailyLimit`。
|
||
- 用户消息为右侧绿色气泡，AI 回复为左侧白色阅读卡片。
|
||
- 长文本标题、段落、列表、粗体和引用层级清楚，未显示 Markdown 原始符号。
|
||
- 底部输入区固定且不遮挡消息区。
|
||
- 历史会话使用左侧抽屉和独立遮罩，不再呈现为后台固定列表。
|
||
|
||
### 交互状态
|
||
|
||
- 已验证空会话、真实消息发送、生成中、回答完成和额度刷新。
|
||
- 已验证抽屉打开、关闭、遮罩、改名弹窗和删除确认弹窗。
|
||
- 已验证输入框发送失败保留、成功后清空的实现逻辑。
|
||
- 已验证模型嵌套 `<think>` 内容和残留标签不展示。
|
||
- 已验证当前会话时间、会话消息数量和会话更新时间来自真实接口。
|
||
|
||
### 移动端适配
|
||
|
||
- 375px、390px、414px 宽度均无横向滚动。
|
||
- 顶部栏固定在应用容器顶部，底部输入区贴合视口底部。
|
||
- 中间消息列表独立滚动，长回答完整展示。
|
||
- 输入框字号为 16px，并处理底部安全区。
|
||
- 小高度 667px 下页面未截断，核心操作始终可见。
|
||
|
||
### 工程检查
|
||
|
||
- `npm run build`：通过。
|
||
- Vue TypeScript 类型检查：通过（包含在构建命令中）。
|
||
- 390 × 844 最终浏览器控制台错误和警告：0。
|
||
- 浏览器页面宽度与视口宽度一致：390/390。
|
||
- 未发现 P0、P1、P2 级视觉或交互问题。
|
||
|
||
## 设计取舍
|
||
|
||
参考图底部的水墨和莲花属于可选氛围元素。当前版本采用纯雾白背景，优先保证长回答阅读清晰度、加载性能和维护成本，不引入与业务无关的装饰图片。
|
||
|
||
final result: passed
|