update at 2025-10-14 21:52:11
This commit is contained in:
douboer
338
CHAT_V2_GUIDE.md
Normal file
338
CHAT_V2_GUIDE.md
Normal file
@@ -0,0 +1,338 @@
|
||||
# 聊天模块 V2.0 - 快速上手
|
||||
|
||||
## ✅ 问题已修复
|
||||
|
||||
### 1. 消息列表实时更新
|
||||
- ✅ 发送消息后立即显示
|
||||
- ✅ 无需刷新页面
|
||||
- ✅ 消息条数自动同步
|
||||
|
||||
### 2. 界面全新升级
|
||||
- ✅ 左侧导航可折叠
|
||||
- ✅ 右侧对话列表
|
||||
- ✅ 底部工具栏（选择 MCP 和模型）
|
||||
|
||||
---
|
||||
|
||||
## 🎯 新界面使用指南
|
||||
|
||||
### 布局说明
|
||||
|
||||
```
|
||||
┌─────┬────────────────────────────┬──────────┐
|
||||
│ │ │ │
|
||||
│ 导航 │ 主对话区 │ 对话列表 │
|
||||
│ 栏 │ │ │
|
||||
│ │ [工具栏: MCP | 模型 | 快捷键]│ │
|
||||
│ │ [输入框] │ │
|
||||
└─────┴────────────────────────────┴──────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 主要功能
|
||||
|
||||
### 1. 折叠左侧导航
|
||||
点击左上角的 **☰** 按钮，节省屏幕空间
|
||||
|
||||
**效果**：
|
||||
- 展开：280px（显示文字）
|
||||
- 折叠：64px（仅显示图标）
|
||||
|
||||
### 2. 右侧对话列表
|
||||
- 显示所有对话
|
||||
- 搜索对话
|
||||
- 创建新对话
|
||||
- 管理对话（置顶/重命名/删除）
|
||||
|
||||
**操作**：
|
||||
- 小屏幕：点击"对话列表"按钮显示/隐藏
|
||||
- 大屏幕：始终显示在右侧
|
||||
|
||||
### 3. 工具栏 - 左侧
|
||||
|
||||
#### 选择 MCP 服务
|
||||
```
|
||||
[🔌 不启用 MCP 服务 ▼]
|
||||
```
|
||||
点击选择：
|
||||
- 不启用 MCP 服务（默认）
|
||||
- xhs-sse
|
||||
- 其他配置的服务
|
||||
|
||||
#### 添加服务器
|
||||
```
|
||||
[+ 添加服务器...]
|
||||
```
|
||||
快速添加新的 MCP 服务器
|
||||
|
||||
### 4. 工具栏 - 右侧
|
||||
|
||||
#### 选择 AI 模型
|
||||
```
|
||||
[🧠 选择模型 ▼]
|
||||
```
|
||||
从已配置的模型中选择：
|
||||
- 格式：服务名 | 模型名
|
||||
- 例如：火山引擎 | doubao-1.5-pro-32k
|
||||
|
||||
#### 快捷操作
|
||||
```
|
||||
[📄] [📎] [🎤]
|
||||
```
|
||||
- 📄 文本文件
|
||||
- 📎 附件
|
||||
- 🎤 语音（占位，待开发）
|
||||
|
||||
#### 确认按钮
|
||||
```
|
||||
[确认]
|
||||
```
|
||||
发送消息（等同于 Enter 键）
|
||||
|
||||
---
|
||||
|
||||
## ⌨️ 快捷键
|
||||
|
||||
| 快捷键 | 功能 |
|
||||
|--------|------|
|
||||
| `Enter` | 发送消息 |
|
||||
| `Shift + Enter` | 换行 |
|
||||
| `ESC` | 关闭弹窗 |
|
||||
|
||||
---
|
||||
|
||||
## 📱 响应式设计
|
||||
|
||||
### 宽屏（> 1200px）
|
||||
```
|
||||
┌─────┬──────────────┬─────────┐
|
||||
│导航 │ 主对话区 │对话列表 │
|
||||
└─────┴──────────────┴─────────┘
|
||||
```
|
||||
|
||||
### 窄屏（< 1200px）
|
||||
```
|
||||
┌─────┬────────────────┐
|
||||
│导航 │ 主对话区 │
|
||||
│ │ [对话列表按钮] │
|
||||
└─────┴────────────────┘
|
||||
|
||||
点击按钮后：
|
||||
┌──────────┬─────────┐
|
||||
│主对话区 │对话列表 │
|
||||
│(半透明) │(浮动) │
|
||||
└──────────┴─────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎬 使用流程
|
||||
|
||||
### 第一次使用
|
||||
|
||||
1. **配置模型服务**
|
||||
```
|
||||
侧边栏 → 模型服务 → 添加服务 → 测试连接
|
||||
```
|
||||
|
||||
2. **创建对话**
|
||||
```
|
||||
点击 [+] 按钮 → 输入对话名称
|
||||
```
|
||||
|
||||
3. **选择模型**
|
||||
```
|
||||
工具栏 → [选择模型▼] → 选择一个模型
|
||||
```
|
||||
|
||||
4. **发送消息**
|
||||
```
|
||||
输入框 → 输入消息 → Enter 或点击"确认"
|
||||
```
|
||||
|
||||
### 日常使用
|
||||
|
||||
1. **切换对话**
|
||||
```
|
||||
右侧列表 → 点击对话名称
|
||||
```
|
||||
|
||||
2. **管理对话**
|
||||
```
|
||||
对话列表 → 点击 ⋮ → 选择操作
|
||||
- 置顶：固定在顶部
|
||||
- 重命名：修改名称
|
||||
- 删除：删除对话
|
||||
```
|
||||
|
||||
3. **搜索对话**
|
||||
```
|
||||
右侧列表 → [搜索框] → 输入关键词
|
||||
```
|
||||
|
||||
4. **使用 MCP**
|
||||
```
|
||||
工具栏 → [MCP选择器▼] → 选择服务
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💡 最佳实践
|
||||
|
||||
### 1. 组织对话
|
||||
```
|
||||
✅ 好的命名
|
||||
- "学习 Vue 3 Composition API"
|
||||
- "项目需求讨论 - 2024/10"
|
||||
- "代码审查 - 登录模块"
|
||||
|
||||
❌ 不好的命名
|
||||
- "新对话"
|
||||
- "测试"
|
||||
- "aaa"
|
||||
```
|
||||
|
||||
### 2. 选择合适的模型
|
||||
```
|
||||
📝 日常对话：
|
||||
- lite 系列模型（快速、便宜）
|
||||
|
||||
💻 代码生成：
|
||||
- pro 系列模型（准确、强大）
|
||||
|
||||
🎨 创意写作：
|
||||
- character 系列模型（富有创意）
|
||||
```
|
||||
|
||||
### 3. 使用 MCP 扩展能力
|
||||
```
|
||||
🔌 启用 MCP 服务器可以：
|
||||
- 调用外部工具
|
||||
- 访问本地文件
|
||||
- 执行系统命令
|
||||
- 查询数据库
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🐛 常见问题
|
||||
|
||||
### Q1: 发送后没反应？
|
||||
**检查**：
|
||||
1. 是否选择了模型？
|
||||
2. 模型服务是否连接？
|
||||
3. 网络是否正常？
|
||||
4. 查看浏览器控制台错误
|
||||
|
||||
### Q2: 找不到对话列表？
|
||||
**解决**：
|
||||
- 宽屏：默认在右侧
|
||||
- 窄屏：点击"对话列表"按钮
|
||||
|
||||
### Q3: 消息条数不对？
|
||||
**已修复**：V2.0 版本已解决此问题
|
||||
|
||||
### Q4: 模型选择器是空的？
|
||||
**原因**：未配置模型服务
|
||||
**解决**：
|
||||
```
|
||||
侧边栏 → 模型服务 → 添加服务
|
||||
```
|
||||
|
||||
### Q5: MCP 选择器没有选项？
|
||||
**原因**：未配置 MCP 服务器
|
||||
**解决**：
|
||||
```
|
||||
侧边栏 → MCP 设置 → 添加服务器
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 界面元素说明
|
||||
|
||||
### 对话列表项
|
||||
```
|
||||
┌─────────────────────────┐
|
||||
│ 📌 对话名称 ⋮ │ ← 置顶标记、菜单
|
||||
│ 最后一条消息内容... │ ← 消息预览
|
||||
│ 5 条消息 2小时前 │ ← 统计信息
|
||||
└─────────────────────────┘
|
||||
```
|
||||
|
||||
### 消息项
|
||||
```
|
||||
┌─────────────────────────┐
|
||||
│ 👤 你 刚刚 │ ← 角色、时间
|
||||
│ 你好，这是我的消息 │ ← 消息内容
|
||||
└─────────────────────────┘
|
||||
|
||||
┌─────────────────────────┐
|
||||
│ 🤖 AI 助手 刚刚 │
|
||||
│ 你好！有什么可以帮... │
|
||||
│ [复制] [重新生成] [删除] │ ← 操作按钮
|
||||
└─────────────────────────┘
|
||||
```
|
||||
|
||||
### 工具栏
|
||||
```
|
||||
┌──────────────────────────────────────────┐
|
||||
│ 左侧 右侧 │
|
||||
│ [MCP▼] [+添加] | [模型▼] | [📄📎🎤] [确认]│
|
||||
└──────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 性能提示
|
||||
|
||||
### 建议的对话数量
|
||||
- ✅ < 50 个对话：流畅
|
||||
- ⚠️ 50-100 个对话：正常
|
||||
- ❌ > 100 个对话：考虑归档或导出
|
||||
|
||||
### 建议的消息数量（每个对话）
|
||||
- ✅ < 100 条：流畅
|
||||
- ⚠️ 100-500 条：正常
|
||||
- ❌ > 500 条：考虑清空或导出
|
||||
|
||||
### 数据管理
|
||||
```
|
||||
侧边栏 → 数据管理
|
||||
- 查看统计
|
||||
- 导出数据
|
||||
- 清理旧数据
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 开始使用
|
||||
|
||||
**现在就刷新页面，体验全新的聊天界面！**
|
||||
|
||||
```bash
|
||||
# 如果页面未更新，请强制刷新
|
||||
Mac: Cmd + Shift + R
|
||||
Windows: Ctrl + Shift + R
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📝 更新记录
|
||||
|
||||
### V2.0（2024/10/14）
|
||||
- ✅ 修复消息列表实时更新
|
||||
- ✅ 修复消息条数显示
|
||||
- ✅ 添加可折叠导航
|
||||
- ✅ 重构右侧对话列表
|
||||
- ✅ 添加完整工具栏
|
||||
- ✅ 支持 MCP 和模型选择
|
||||
|
||||
### V1.0（初始版本）
|
||||
- ✅ 基础聊天功能
|
||||
- ✅ 话题管理
|
||||
- ✅ 消息操作
|
||||
|
||||
---
|
||||
|
||||
**祝您使用愉快！** 🎉
|
||||
Reference in New Issue
Block a user