# 本地提问保存功能说明

## 功能概述
为未登录用户实现了本地提问历史保存功能，使用 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. **跨设备**: 记录仅在当前浏览器可见，不跨设备同步

## 使用场景

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