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