map-client-vue/CHAT_QUICKSTART.md

# 聊天对话功能 - 快速上手

## 🎉 欢迎使用全新的聊天对话功能！

我们刚刚完成了聊天对话模块的重构，基于 Cherry Studio 的优秀架构，实现了话题管理、流式响应等核心功能。

---

## 🚀 60秒快速开始

### 第一步：准备工作

1. **配置模型服务**（必需）
   ```
   打开应用 → 左侧菜单"模型服务" → 添加服务 → 测试连接
   ```
   
   推荐配置：
   - OpenAI
   - 火山引擎
   - 阿里云 DashScope
   - 本地模型（Ollama）

2. **刷新页面**
   ```
   按 F5 或 Cmd+R 刷新浏览器
   ```

### 第二步：开始对话

1. **点击"聊天对话"菜单**
2. **看到默认话题"欢迎使用"**
3. **在输入框输入消息，按 Enter 发送**
4. **等待 AI 回复**

就这么简单！✨

---

## 📱 界面导航

### 左侧 - 话题列表
```
┌─────────────────┐
│  对话列表    [+]│  ← 点击创建新对话
├─────────────────┤
│  [🔍 搜索框]    │  ← 搜索对话
├─────────────────┤
│  📌 欢迎使用    │  ← 置顶的对话
│  💬 第二个对话  │
│  💬 第三个对话  │
└─────────────────┘
```

### 右侧 - 对话区域
```
┌─────────────────────────────┐
│  欢迎使用        [清空]     │  ← 对话头部
├─────────────────────────────┤
│  👤 你: 你好                │  ← 用户消息
│  🤖 AI: 你好！有什么...     │  ← AI 回复
│                             │
│  (更多消息...)              │
├─────────────────────────────┤
│  [输入框...]        [发送]  │  ← 输入区
└─────────────────────────────┘
```

---

## 💬 基本操作

### 创建新对话

**方法1：点击按钮**
1. 点击话题列表顶部的 `+` 按钮
2. 输入对话名称（如"学习Vue 3"）
3. 按确定

**方法2：快捷创建**
- 点击空状态下的"新建对话"按钮

### 发送消息

**键盘快捷键**
- `Enter`: 发送消息
- `Shift + Enter`: 换行

**提示**
- 输入框支持多行文本
- 发送中会显示"发送中..."状态

### 管理对话

**话题操作菜单**（点击话题右侧的 ⋮ 图标）
- **置顶**: 让重要对话始终在顶部
- **重命名**: 修改对话名称和描述
- **删除**: 删除不需要的对话

### 消息操作

**AI 消息下方的按钮**
- **复制**: 复制回复内容
- **重新生成**: 让 AI 重新回答
- **删除**: 删除这条及之后的消息

---

## 🎯 实用技巧

### 技巧1：搜索对话
```
在搜索框输入关键词 → 自动过滤对话列表
```
- 搜索对话名称
- 搜索消息内容
- 实时过滤，无需按回车

### 技巧2：置顶重要对话
```
点击话题菜单 → 选择"置顶" → 对话固定在顶部
```
- 置顶的对话标记为 📌
- 始终显示在列表最上方
- 适合长期使用的对话

### 技巧3：快速输入
```
Shift + Enter: 换行
Enter: 发送
```
- 长文本用 Shift+Enter 换行
- 短消息直接 Enter 发送

### 技巧4：重新生成回答
```
对 AI 的回答不满意？
点击"重新生成"按钮 → 立即获得新答案
```
- 使用相同的问题
- 可能得到不同的答案
- 之前的回答会被删除

### 技巧5：管理长对话
```
对话太长了？
点击"清空"按钮 → 清空所有消息
或者创建新对话 → 重新开始
```

---

## 🎨 界面说明

### 状态指示器

**消息状态**
- ⏳ **发送中...**: 正在发送到 AI
- ✅ **已发送**: 成功接收回复
- ❌ **发送失败**: 显示错误信息

**打字动画**
```
● ● ●  ← AI 正在思考和回复
```

### 时间显示
- **刚刚**: 1分钟内
- **5分钟前**: 1小时内
- **2小时前**: 24小时内
- **2天前**: 7天内
- **2023/10/14**: 7天以上

---

## ❓ 常见问题

### Q1: 发送失败怎么办？
**A:** 检查以下几点：
1. 模型服务是否已连接？
   - 进入"模型服务"页面查看
   - 状态应显示"已连接"
2. 网络是否正常？
3. API Key 是否有效？
4. 是否超出配额？

### Q2: AI 回复很慢？
**A:** 可能的原因：
- 网络延迟
- 服务器负载高
- 选择的模型较慢

**建议**：
- 使用更快的模型（如 Lite 系列）
- 检查网络连接
- 等待几秒钟

### Q3: 对话会丢失吗？
**A:** 不会！
- 所有对话保存在本地浏览器
- 除非清除浏览器数据
- 建议定期在"数据管理"页面导出备份

### Q4: 支持多少条消息？
**A:** 
- 理论上无限制
- 但浏览器 LocalStorage 有 5-10MB 限制
- 建议每个对话保持在 100 条消息以内
- 长对话可以归档或导出

### Q5: 可以同时进行多个对话吗？
**A:** 可以！
- 创建多个话题
- 在话题之间切换
- 每个话题独立管理

### Q6: 如何更换 AI 模型？
**A:** 
- 当前使用第一个已连接的服务
- 未来版本将支持选择模型
- 可以在"模型服务"中调整顺序

---

## 🎬 使用场景

### 场景1：学习编程
```
对话名称：学习 Vue 3
示例提问：
- "解释一下 Composition API"
- "如何使用 ref 和 reactive"
- "写一个简单的 Todo 应用"
```

### 场景2：文案创作
```
对话名称：产品文案
示例提问：
- "帮我写一段产品介绍"
- "优化这段文字：..."
- "生成5个标题"
```

### 场景3：代码审查
```
对话名称：代码优化
示例提问：
- "这段代码有什么问题？"
- "如何优化性能？"
- "重构这个函数"
```

### 场景4：问题解答
```
对话名称：技术问答
示例提问：
- "什么是虚拟 DOM？"
- "解释一下闭包"
- "HTTP 和 HTTPS 的区别"
```

---

## 🔧 故障排除

### 问题：点击发送没反应
**解决方案**：
1. 检查输入框是否有内容
2. 查看是否显示"发送中"
3. 打开浏览器控制台查看错误
4. 刷新页面重试

### 问题：消息发送后没有回复
**解决方案**：
1. 等待至少 10 秒
2. 检查模型服务连接状态
3. 查看消息是否显示错误
4. 尝试重新生成

### 问题：对话列表是空的
**解决方案**：
1. 刷新页面
2. 检查浏览器 LocalStorage
3. 清除缓存后重新创建对话

### 问题：界面显示异常
**解决方案**：
1. 清除浏览器缓存
2. 硬刷新（Ctrl+Shift+R）
3. 检查浏览器控制台错误

---

## 📚 进阶使用

### 自定义系统提示词
```
未来版本将支持：
- 为每个话题设置不同的系统提示词
- 创建助手模板
- 保存常用提示词
```

### 导出对话
```
进入"数据管理"页面：
1. 查看对话历史
2. 点击导出按钮
3. 保存 JSON 文件
```

### 批量管理
```
未来功能：
- 批量删除对话
- 批量归档
- 批量导出
```

---

## 🎯 下一步

现在您已经掌握了基本用法，可以：

1. **探索不同的 AI 模型**
   - 在"模型服务"中添加多个服务
   - 比较不同模型的回复质量

2. **创建专题对话**
   - 为不同主题创建独立对话
   - 使用清晰的命名

3. **尝试高级功能**
   - 长文本生成
   - 代码生成和调试
   - 创意写作

4. **提供反馈**
   - 遇到问题随时报告
   - 提出功能建议

---

## 💡 最佳实践

### 1. 对话命名
✅ **好的命名**
- "学习 React Hooks"
- "项目需求讨论"
- "代码优化建议"

❌ **不好的命名**
- "对话1"
- "测试"
- "aaa"

### 2. 消息组织
✅ **清晰的提问**
- 一次问一个问题
- 提供足够的上下文
- 使用具体的描述

❌ **模糊的提问**
- "这个怎么做？"
- "有问题"
- "帮我"

### 3. 对话管理
✅ **良好习惯**
- 定期归档旧对话
- 为重要对话置顶
- 及时导出备份

❌ **不好的习惯**
- 从不清理对话
- 所有对话都叫"新对话"
- 从不备份

---

## 🎊 开始使用吧！

一切准备就绪，现在：

1. **刷新页面** 🔄
2. **点击"聊天对话"** 💬
3. **开始你的第一次对话** 🚀

祝您使用愉快！如有任何问题，随时查看本指南或提出反馈。

---

*快速指南 v1.0 - 2025-10-14*