# 测试指南 - 本地提问保存功能

## 测试前准备

1. 确保已安装依赖：
```bash
bun install
```

2. 启动开发服务器：
```bash
bun dev
```

## 测试步骤

### 测试场景 1: 未登录用户发送提问并保存

1. **进入页面**
   - 访问任意用户的提问箱页面
   - 确保处于未登录状态（退出登录）

2. **查看按钮**
   - 应该能看到两个按钮：
     - "我要提问" (绿色主按钮)
     - "本地记录" (蓝色按钮，带数字徽章)
   - 初始状态徽章应该为 0 或不显示

3. **发送第一条提问**
   - 点击"我要提问"按钮
   - 填写提问内容（至少3个字）
   - 可选：填写昵称和邮箱
   - 可选：选择话题标签
   - 可选：上传图片（如果主播允许）
   - 完成人机验证
   - 点击"发送"按钮

4. **验证自动保存**
   - 发送成功后
   - "本地记录"按钮的徽章数字应该增加到 1
   - 提问表单应该自动收起

5. **查看本地记录**
   - 点击"本地记录"按钮
   - 应该打开右侧抽屉
   - 能看到刚才发送的提问
   - 显示内容包括：
     - 目标用户名称
     - 话题标签（如果有）
     - 提问内容
     - 发送时间
     - 昵称（如果填写了）
     - 邮箱（如果填写了）
     - 图片标识（如果上传了）

### 测试场景 2: 发送多条提问

1. **重复发送**
   - 继续发送 2-3 条提问
   - 每次发送成功后，徽章数字应该增加

2. **查看记录列表**
   - 打开本地记录抽屉
   - 应该看到所有发送的提问
   - 最新的提问在最上面
   - 每条记录都显示完整信息

### 测试场景 3: 删除单条记录

1. **删除操作**
   - 打开本地记录抽屉
   - 找到想删除的记录
   - 点击记录右上角的删除按钮（X图标）
   - 应该显示"已删除"提示

2. **验证删除**
   - 记录应该从列表中消失
   - 徽章数字应该减少 1
   - 其他记录不受影响

### 测试场景 4: 清空所有记录

1. **清空操作**
   - 打开本地记录抽屉
   - 点击右上角的"清空全部"按钮
   - 应该显示"已清空所有本地提问记录"提示

2. **验证清空**
   - 所有记录都应该消失
   - 显示空状态提示："还没有本地提问记录"
   - 徽章数字应该消失或变为 0

### 测试场景 5: 已登录用户不显示本地记录

1. **登录账号**
   - 使用任意账号登录

2. **验证显示**
   - "本地记录"按钮应该不显示
   - 只显示"我要提问"和"我发送的"按钮
   - 已登录用户应该使用"我发送的"查看历史

### 测试场景 6: 数据持久性

1. **刷新页面**
   - 发送几条提问后
   - 刷新浏览器页面
   - 本地记录应该仍然存在

2. **关闭重开**
   - 关闭浏览器标签页
   - 重新打开页面
   - 本地记录应该仍然存在

3. **清除数据**
   - 在浏览器开发者工具中
   - 清除本地存储（localStorage）
   - 本地记录应该被清空

### 测试场景 7: 不同用户的提问

1. **访问用户A的提问箱**
   - 发送一条提问
   - 记录应该保存目标用户名为"用户A"

2. **访问用户B的提问箱**
   - 发送一条提问
   - 记录应该保存目标用户名为"用户B"

3. **查看本地记录**
   - 打开本地记录抽屉
   - 应该看到两条记录
   - 分别标注了不同的目标用户

## 浏览器兼容性测试

建议在以下浏览器中测试：
- ✅ Chrome / Edge (推荐)
- ✅ Firefox
- ✅ Safari
- ⚠️ IE (不支持)

## 开发者工具检查

### 查看存储数据

1. 打开浏览器开发者工具 (F12)
2. 切换到 Application/Storage 标签
3. 找到 Local Storage
4. 查找键名：`vtsuru-local-questions`
5. 数据应该是 JSON 格式的数组

示例数据：
```json
[
  {
    "id": "local-1234567890-abc123",
    "targetUserId": 123,
    "targetUserName": "测试用户",
    "message": "这是一条测试提问",
    "tag": "测试话题",
    "anonymousName": "匿名用户",
    "anonymousEmail": "test@example.com",
    "hasImage": false,
    "sendAt": 1234567890000
  }
]
```

## 已知限制

1. **存储大小**: 浏览器 localStorage 有大小限制（通常 5-10MB）
2. **跨域隔离**: 不同域名下的数据互不可见
3. **无备份**: 清除浏览器数据会丢失所有记录
4. **图片不保存**: 只记录是否包含图片，不保存图片内容

## 故障排查

### 问题：本地记录不显示
- 检查是否处于未登录状态
- 检查浏览器是否禁用了 localStorage
- 打开开发者工具查看是否有错误

### 问题：发送成功但没有保存
- 检查开发者工具 Console 是否有错误
- 确认 userInfo 对象有正确的 id 和 name
- 检查 isUserLoggedIn 计算属性是否正确

### 问题：刷新后记录消失
- 检查浏览器隐私模式设置
- 确认没有自动清除 Cookie 和存储的设置
- 检查浏览器扩展是否影响存储

## 性能考虑

- ✅ 使用 VueUse 的 `useStorage` 自动处理序列化
- ✅ 数据保存是同步的，不影响发送速度
- ✅ 列表渲染使用虚拟滚动（如果记录很多）
- ⚠️ 建议不要保存超过 1000 条记录

## 反馈与改进

如果在测试过程中发现问题，请记录：
1. 浏览器类型和版本
2. 操作步骤
3. 预期结果
4. 实际结果
5. 控制台错误信息（如果有）