mirror of
https://github.com/Megghy/vtsuru.live.git
synced 2025-12-07 02:46:55 +08:00
feat: Implement local question saving feature for unauthenticated users
- Added functionality to automatically save questions sent by unauthenticated users to local storage using VueUse's useStorage. - Introduced a local history button to display the number of saved questions. - Created a drawer component to view, delete, and clear local question records. - Enhanced the question form with options for anonymous name and email input. - Updated UI components and styles for better user experience. - Added tests and documentation for the new feature.
This commit is contained in:
Megghy
208
测试指南-本地提问保存.md
Normal file
208
测试指南-本地提问保存.md
Normal file
@@ -0,0 +1,208 @@
|
||||
# 测试指南 - 本地提问保存功能
|
||||
|
||||
## 测试前准备
|
||||
|
||||
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. 控制台错误信息（如果有）
|
||||
Reference in New Issue
Block a user