# 🎬 演示指南

## 快速演示步骤

### 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流畅体验

---

**演示完成！准备好展示给用户了！** 🎉