mirror of https://github.com/Megghy/vtsuru.live.git synced 2025-12-06 18:36:55 +08:00

Files

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

3.8 KiB

Raw Blame History

本地提问保存功能说明

功能概述

为未登录用户实现了本地提问历史保存功能，使用 VueUse 的 useStorage 将提问保存到浏览器的 IndexedDB 中。

实现的功能

1. 自动保存提问

触发时机: 未登录用户成功发送提问后自动保存
保存内容:
- 提问ID（本地生成）
- 目标用户ID和用户名
- 提问内容
- 话题标签
- 匿名昵称
- 匿名邮箱
- 是否包含图片
- 发送时间

2. 本地记录按钮

位置: 在"我要提问"按钮旁边
显示条件: 仅对未登录用户显示
功能:
- 显示本地记录数量徽章
- 点击打开本地提问历史抽屉

3. 本地提问历史抽屉

布局: 右侧抽屉，宽度 500px
功能:
- 查看所有本地保存的提问
- 显示每条提问的详细信息
- 删除单条记录
- 清空所有记录
- 提示数据仅保存在浏览器中

4. 记录卡片显示

每条本地提问记录包含:

目标用户名称
话题标签（如果有）
提问内容
发送时间（格式化显示）
匿名昵称（如果有）
匿名邮箱（如果有）
图片标识（如果有）
删除按钮

技术实现

使用的技术栈

VueUse: useStorage - 用于持久化存储
Naive UI: 提供 UI 组件（Drawer、Badge、Card 等）
TypeScript: 类型安全
Vue 3: 组合式 API

数据结构

interface LocalQuestion {
  id: string                // 本地生成的唯一ID
  targetUserId: number      // 目标用户ID
  targetUserName: string    // 目标用户名称
  message: string           // 提问内容
  tag: string | null        // 话题标签
  anonymousName: string     // 匿名昵称
  anonymousEmail: string    // 匿名邮箱
  hasImage: boolean         // 是否包含图片
  sendAt: number            // 发送时间戳
}

存储方式

const localQuestions = useStorage<LocalQuestion[]>(
  'vtsuru-local-questions',  // 存储键名
  [],                        // 默认值
  undefined,                 // 使用默认存储（localStorage/sessionStorage）
  {
    serializer: {
      read: (v: any) => v ? JSON.parse(v) : [],
      write: (v: any) => JSON.stringify(v),
    },
  }
)

新增的功能函数

1. deleteLocalQuestion

function deleteLocalQuestion(id: string)

删除指定ID的本地提问记录

2. clearAllLocalQuestions

function clearAllLocalQuestions()

清空所有本地提问记录

UI 组件更新

新增导入

History24Regular - 历史图标
NDrawer - 抽屉组件
NDrawerContent - 抽屉内容
NBadge - 徽章组件
useStorage from '@vueuse/core' - 存储hook

样式更新

提问按钮区域改为横向布局
新增本地历史按钮样式
新增本地提问卡片样式
优化过渡动画

用户体验优化

自动保存: 发送成功后自动保存，无需用户手动操作
徽章提示: 按钮上显示记录数量，直观了解保存的提问数
详细信息: 记录所有相关信息，方便用户回顾
便捷管理: 支持单条删除和批量清空
数据提示: 明确告知数据保存在本地浏览器中
响应式设计: 抽屉宽度适配不同屏幕

注意事项

数据持久性: 数据保存在浏览器本地存储，清除浏览器数据会丢失
仅未登录用户: 已登录用户可以在"我发送的"中查看完整历史
图片信息: 仅记录是否包含图片，不保存图片内容
跨设备: 记录仅在当前浏览器可见，不跨设备同步

使用场景

未登录用户想回顾自己发送的提问
确认提问是否成功发送
管理和清理本地提问记录
离线查看已发送的提问内容

3.8 KiB Raw Blame History Unescape Escape