299 lines
5.6 KiB
Markdown
299 lines
5.6 KiB
Markdown
# 🎬 演示指南
|
||
|
||
## 快速演示步骤
|
||
|
||
### 1. 启动应用
|
||
|
||
```bash
|
||
cd test-client/web_client
|
||
./start.sh
|
||
```
|
||
|
||
或者：
|
||
|
||
```bash
|
||
PORT=5001 python3 app.py
|
||
```
|
||
|
||
### 2. 打开浏览器
|
||
|
||
访问：http://localhost:5001
|
||
|
||
### 3. 界面展示
|
||
|
||
#### 首次加载
|
||
- ✅ 看到深空黑渐变背景
|
||
- ✅ 50个粒子在背景中浮动
|
||
- ✅ 左侧用户信息面板完整展示
|
||
- ✅ 右侧对话区域显示欢迎消息
|
||
- ✅ AI欢迎消息以滑入动画出现
|
||
|
||
#### 界面元素检查
|
||
- ✅ 左侧：用户画像、待办事项、提醒设置
|
||
- ✅ 顶部：品牌标识、主题按钮、字体选择、通知图标
|
||
- ✅ 中间：快捷回复按钮、对话区域
|
||
- ✅ 底部：语音按钮、输入框、发送按钮、功能按钮
|
||
|
||
## 功能演示
|
||
|
||
### 演示1：发送消息
|
||
|
||
**步骤：**
|
||
1. 在底部输入框输入："你好，请介绍一下你自己"
|
||
2. 按Enter键或点击发送按钮
|
||
3. 观察效果：
|
||
- ✅ 用户消息以紫蓝渐变气泡出现在右侧
|
||
- ✅ 消息从下方滑入
|
||
- ✅ 出现打字指示器（3个跳动的绿点）
|
||
- ✅ AI回复以青绿渐变气泡出现在左侧
|
||
- ✅ 自动滚动到底部
|
||
|
||
**预期结果：**
|
||
```
|
||
用户: 你好，请介绍一下你自己
|
||
AI: 这是对"你好，请介绍一下你自己"的模拟回复。实际使用时会调用真实的AI助手API。
|
||
```
|
||
|
||
### 演示2：快捷回复
|
||
|
||
**步骤：**
|
||
1. 点击顶部的"💡 今日天气如何？"按钮
|
||
2. 观察效果：
|
||
- ✅ 问题自动填充到输入框
|
||
- ✅ 输入框获得焦点
|
||
3. 按Enter发送
|
||
4. 观察AI回复
|
||
|
||
**预期结果：**
|
||
输入框自动填充："今日天气如何？"
|
||
|
||
### 演示3：主题切换
|
||
|
||
**步骤：**
|
||
1. 点击"极光蓝"主题按钮
|
||
2. 观察效果：
|
||
- ✅ 背景渐变变为蓝色系
|
||
- ✅ 过渡平滑
|
||
3. 依次点击其他主题：
|
||
- 霓虹紫（紫色系）
|
||
- 科技绿（绿色系）
|
||
- 深空黑（默认）
|
||
|
||
**预期结果：**
|
||
背景颜色平滑切换，其他元素保持不变
|
||
|
||
### 演示4：待办事项
|
||
|
||
**步骤：**
|
||
1. 在左侧待办事项输入框输入："测试新功能"
|
||
2. 按Enter或点击+按钮
|
||
3. 观察效果：
|
||
- ✅ 新任务添加到列表
|
||
- ✅ 带有复选框
|
||
- ✅ 半透明背景
|
||
4. 勾选复选框标记完成
|
||
|
||
**预期结果：**
|
||
任务成功添加到列表，可以勾选
|
||
|
||
### 演示5：动画效果
|
||
|
||
**观察以下动画：**
|
||
|
||
#### 粒子背景
|
||
- ✅ 50个粒子在背景中浮动
|
||
- ✅ 上下左右移动
|
||
- ✅ 透明度变化
|
||
|
||
#### 打字指示器
|
||
- ✅ 3个绿色圆点
|
||
- ✅ 依次上下跳动
|
||
- ✅ 循环动画
|
||
|
||
#### 语音波形
|
||
- ✅ 5条波形
|
||
- ✅ 高度变化
|
||
- ✅ 依次延迟
|
||
|
||
#### 发送按钮
|
||
- ✅ 脉冲动画
|
||
- ✅ 阴影扩散
|
||
- ✅ 循环播放
|
||
|
||
#### 悬停效果
|
||
- ✅ 鼠标悬停在按钮上
|
||
- ✅ 发光效果
|
||
- ✅ 轻微上移
|
||
|
||
### 演示6：响应式设计
|
||
|
||
**步骤：**
|
||
1. 打开浏览器开发者工具（F12）
|
||
2. 切换到设备模拟模式
|
||
3. 测试不同屏幕尺寸：
|
||
- 桌面（1920x1080）
|
||
- 平板（768x1024）
|
||
- 手机（375x667）
|
||
|
||
**预期结果：**
|
||
- ✅ 布局自动适配
|
||
- ✅ 消息气泡宽度调整
|
||
- ✅ 所有功能正常
|
||
|
||
## API测试
|
||
|
||
### 测试1：健康检查
|
||
|
||
```bash
|
||
curl http://localhost:5001/api/health
|
||
```
|
||
|
||
**预期响应：**
|
||
```json
|
||
{
|
||
"code": 200,
|
||
"message": "OK",
|
||
"data": {
|
||
"status": "healthy",
|
||
"api_client_available": false
|
||
}
|
||
}
|
||
```
|
||
|
||
### 测试2：获取应用列表
|
||
|
||
```bash
|
||
curl http://localhost:5001/api/applications
|
||
```
|
||
|
||
**预期响应：**
|
||
```json
|
||
{
|
||
"code": 200,
|
||
"message": "success",
|
||
"data": []
|
||
}
|
||
```
|
||
|
||
### 测试3：发送消息
|
||
|
||
```bash
|
||
curl -X POST http://localhost:5001/api/chat/send \
|
||
-H "Content-Type: application/json" \
|
||
-d '{
|
||
"appId": 15,
|
||
"message": "你好",
|
||
"chatId": null,
|
||
"stream": false
|
||
}'
|
||
```
|
||
|
||
**预期响应：**
|
||
```json
|
||
{
|
||
"code": 200,
|
||
"message": "success",
|
||
"data": {
|
||
"answer": "这是对\"你好\"的模拟回复。实际使用时会调用真实的AI助手API。",
|
||
"chatId": "mock_chat_id_001",
|
||
"messageId": "mock_message_id_001"
|
||
}
|
||
}
|
||
```
|
||
|
||
## 性能测试
|
||
|
||
### 加载性能
|
||
|
||
**使用浏览器开发者工具：**
|
||
1. 打开Network标签
|
||
2. 刷新页面
|
||
3. 查看加载时间
|
||
|
||
**预期指标：**
|
||
- ✅ DOMContentLoaded: < 500ms
|
||
- ✅ Load: < 1000ms
|
||
- ✅ 静态资源: < 100ms
|
||
|
||
### 动画性能
|
||
|
||
**使用Performance标签：**
|
||
1. 开始录制
|
||
2. 发送几条消息
|
||
3. 切换主题
|
||
4. 停止录制
|
||
5. 查看FPS
|
||
|
||
**预期指标：**
|
||
- ✅ FPS: 60fps
|
||
- ✅ CPU: < 10%
|
||
- ✅ 内存: < 50MB
|
||
|
||
## 兼容性测试
|
||
|
||
### 浏览器测试
|
||
|
||
**测试以下浏览器：**
|
||
- ✅ Chrome 90+
|
||
- ✅ Firefox 88+
|
||
- ✅ Safari 14+
|
||
- ✅ Edge 90+
|
||
|
||
**测试项目：**
|
||
- ✅ 页面正常显示
|
||
- ✅ 动画流畅
|
||
- ✅ 交互正常
|
||
- ✅ API调用成功
|
||
|
||
## 故障演示
|
||
|
||
### 演示1：空消息
|
||
|
||
**步骤：**
|
||
1. 不输入任何内容
|
||
2. 点击发送按钮
|
||
|
||
**预期结果：**
|
||
- ✅ 不发送消息
|
||
- ✅ 没有任何反应
|
||
|
||
### 演示2：网络错误
|
||
|
||
**步骤：**
|
||
1. 停止Flask服务器
|
||
2. 尝试发送消息
|
||
|
||
**预期结果：**
|
||
- ✅ 显示错误消息
|
||
- ✅ 提示用户稍后重试
|
||
|
||
## 总结
|
||
|
||
### 演示检查清单
|
||
|
||
- [ ] 应用成功启动
|
||
- [ ] 界面完整显示
|
||
- [ ] 粒子背景动画
|
||
- [ ] 发送消息功能
|
||
- [ ] 快捷回复功能
|
||
- [ ] 主题切换功能
|
||
- [ ] 待办事项功能
|
||
- [ ] 所有动画效果
|
||
- [ ] 响应式设计
|
||
- [ ] API接口测试
|
||
- [ ] 性能测试
|
||
- [ ] 兼容性测试
|
||
|
||
### 演示要点
|
||
|
||
1. **视觉效果** - 强调100%还原原型设计
|
||
2. **动画流畅** - 展示各种动画效果
|
||
3. **交互体验** - 演示所有交互功能
|
||
4. **响应式** - 展示不同屏幕适配
|
||
5. **性能优秀** - 强调60fps流畅体验
|
||
|
||
---
|
||
|
||
**演示完成！准备好展示给用户了！** 🎉
|
||
|