mirror of
https://github.com/Megghy/vtsuru.live.git
synced 2025-12-07 02:46:55 +08:00
4ad9766043
- 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.
136 lines
3.8 KiB
Markdown
136 lines
3.8 KiB
Markdown
# 本地提问保存功能说明
|
||
|
||
## 功能概述
|
||
为未登录用户实现了本地提问历史保存功能，使用 VueUse 的 `useStorage` 将提问保存到浏览器的 IndexedDB 中。
|
||
|
||
## 实现的功能
|
||
|
||
### 1. 自动保存提问
|
||
- **触发时机**: 未登录用户成功发送提问后自动保存
|
||
- **保存内容**:
|
||
- 提问ID（本地生成）
|
||
- 目标用户ID和用户名
|
||
- 提问内容
|
||
- 话题标签
|
||
- 匿名昵称
|
||
- 匿名邮箱
|
||
- 是否包含图片
|
||
- 发送时间
|
||
|
||
### 2. 本地记录按钮
|
||
- **位置**: 在"我要提问"按钮旁边
|
||
- **显示条件**: 仅对未登录用户显示
|
||
- **功能**:
|
||
- 显示本地记录数量徽章
|
||
- 点击打开本地提问历史抽屉
|
||
|
||
### 3. 本地提问历史抽屉
|
||
- **布局**: 右侧抽屉，宽度 500px
|
||
- **功能**:
|
||
- 查看所有本地保存的提问
|
||
- 显示每条提问的详细信息
|
||
- 删除单条记录
|
||
- 清空所有记录
|
||
- 提示数据仅保存在浏览器中
|
||
|
||
### 4. 记录卡片显示
|
||
每条本地提问记录包含:
|
||
- 目标用户名称
|
||
- 话题标签（如果有）
|
||
- 提问内容
|
||
- 发送时间（格式化显示）
|
||
- 匿名昵称（如果有）
|
||
- 匿名邮箱（如果有）
|
||
- 图片标识（如果有）
|
||
- 删除按钮
|
||
|
||
## 技术实现
|
||
|
||
### 使用的技术栈
|
||
- **VueUse**: `useStorage` - 用于持久化存储
|
||
- **Naive UI**: 提供 UI 组件（Drawer、Badge、Card 等）
|
||
- **TypeScript**: 类型安全
|
||
- **Vue 3**: 组合式 API
|
||
|
||
### 数据结构
|
||
```typescript
|
||
interface LocalQuestion {
|
||
id: string // 本地生成的唯一ID
|
||
targetUserId: number // 目标用户ID
|
||
targetUserName: string // 目标用户名称
|
||
message: string // 提问内容
|
||
tag: string | null // 话题标签
|
||
anonymousName: string // 匿名昵称
|
||
anonymousEmail: string // 匿名邮箱
|
||
hasImage: boolean // 是否包含图片
|
||
sendAt: number // 发送时间戳
|
||
}
|
||
```
|
||
|
||
### 存储方式
|
||
```typescript
|
||
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
|
||
```typescript
|
||
function deleteLocalQuestion(id: string)
|
||
```
|
||
删除指定ID的本地提问记录
|
||
|
||
### 2. clearAllLocalQuestions
|
||
```typescript
|
||
function clearAllLocalQuestions()
|
||
```
|
||
清空所有本地提问记录
|
||
|
||
## UI 组件更新
|
||
|
||
### 新增导入
|
||
- `History24Regular` - 历史图标
|
||
- `NDrawer` - 抽屉组件
|
||
- `NDrawerContent` - 抽屉内容
|
||
- `NBadge` - 徽章组件
|
||
- `useStorage` from '@vueuse/core' - 存储hook
|
||
|
||
### 样式更新
|
||
- 提问按钮区域改为横向布局
|
||
- 新增本地历史按钮样式
|
||
- 新增本地提问卡片样式
|
||
- 优化过渡动画
|
||
|
||
## 用户体验优化
|
||
|
||
1. **自动保存**: 发送成功后自动保存，无需用户手动操作
|
||
2. **徽章提示**: 按钮上显示记录数量，直观了解保存的提问数
|
||
3. **详细信息**: 记录所有相关信息，方便用户回顾
|
||
4. **便捷管理**: 支持单条删除和批量清空
|
||
5. **数据提示**: 明确告知数据保存在本地浏览器中
|
||
6. **响应式设计**: 抽屉宽度适配不同屏幕
|
||
|
||
## 注意事项
|
||
|
||
1. **数据持久性**: 数据保存在浏览器本地存储，清除浏览器数据会丢失
|
||
2. **仅未登录用户**: 已登录用户可以在"我发送的"中查看完整历史
|
||
3. **图片信息**: 仅记录是否包含图片，不保存图片内容
|
||
4. **跨设备**: 记录仅在当前浏览器可见，不跨设备同步
|
||
|
||
## 使用场景
|
||
|
||
- 未登录用户想回顾自己发送的提问
|
||
- 确认提问是否成功发送
|
||
- 管理和清理本地提问记录
|
||
- 离线查看已发送的提问内容
|