Megghy/vtsuru.live
1
0
Fork 0
mirror of https://github.com/Megghy/vtsuru.live.git synced 2025-12-07 02:46:55 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
4ad976604362471942bd0a45d4af4938241e533f
vtsuru.live/测试指南-本地提问保存.md
Megghy 4ad9766043 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.
2025-10-10 14:35:56 +08:00

5.2 KiB
Raw Blame History

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

测试前准备

  1. 确保已安装依赖：
bun install
  1. 启动开发服务器：
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 格式的数组

示例数据：

[
  {
    "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 View Git Blame Copy Permalink