7.3 KiB
7.3 KiB
聊天模块 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）
┌─────┬────────────────┐
│导航 │ 主对话区 │
│ │ [对话列表按钮] │
└─────┴────────────────┘
点击按钮后：
┌──────────┬─────────┐
│主对话区 │对话列表 │
│(半透明) │(浮动) │
└──────────┴─────────┘
🎬 使用流程
第一次使用
-
配置模型服务
侧边栏 → 模型服务 → 添加服务 → 测试连接 -
创建对话
点击 [+] 按钮 → 输入对话名称 -
选择模型
工具栏 → [选择模型▼] → 选择一个模型 -
发送消息
输入框 → 输入消息 → Enter 或点击"确认"
日常使用
-
切换对话
右侧列表 → 点击对话名称 -
管理对话
对话列表 → 点击 ⋮ → 选择操作 - 置顶：固定在顶部 - 重命名：修改名称 - 删除：删除对话 -
搜索对话
右侧列表 → [搜索框] → 输入关键词 -
使用 MCP
工具栏 → [MCP选择器▼] → 选择服务
💡 最佳实践
1. 组织对话
✅ 好的命名
- "学习 Vue 3 Composition API"
- "项目需求讨论 - 2024/10"
- "代码审查 - 登录模块"
❌ 不好的命名
- "新对话"
- "测试"
- "aaa"
2. 选择合适的模型
📝 日常对话：
- lite 系列模型（快速、便宜）
💻 代码生成：
- pro 系列模型（准确、强大）
🎨 创意写作：
- character 系列模型（富有创意）
3. 使用 MCP 扩展能力
🔌 启用 MCP 服务器可以：
- 调用外部工具
- 访问本地文件
- 执行系统命令
- 查询数据库
🐛 常见问题
Q1: 发送后没反应？
检查：
- 是否选择了模型？
- 模型服务是否连接？
- 网络是否正常？
- 查看浏览器控制台错误
Q2: 找不到对话列表？
解决：
- 宽屏：默认在右侧
- 窄屏：点击"对话列表"按钮
Q3: 消息条数不对？
已修复：V2.0 版本已解决此问题
Q4: 模型选择器是空的？
原因：未配置模型服务
解决：
侧边栏 → 模型服务 → 添加服务
Q5: MCP 选择器没有选项？
原因：未配置 MCP 服务器
解决：
侧边栏 → MCP 设置 → 添加服务器
🎨 界面元素说明
对话列表项
┌─────────────────────────┐
│ 📌 对话名称 ⋮ │ ← 置顶标记、菜单
│ 最后一条消息内容... │ ← 消息预览
│ 5 条消息 2小时前 │ ← 统计信息
└─────────────────────────┘
消息项
┌─────────────────────────┐
│ 👤 你 刚刚 │ ← 角色、时间
│ 你好，这是我的消息 │ ← 消息内容
└─────────────────────────┘
┌─────────────────────────┐
│ 🤖 AI 助手 刚刚 │
│ 你好！有什么可以帮... │
│ [复制] [重新生成] [删除] │ ← 操作按钮
└─────────────────────────┘
工具栏
┌──────────────────────────────────────────┐
│ 左侧 右侧 │
│ [MCP▼] [+添加] | [模型▼] | [📄📎🎤] [确认]│
└──────────────────────────────────────────┘
📊 性能提示
建议的对话数量
- ✅ < 50 个对话：流畅
- ⚠️ 50-100 个对话：正常
- ❌ > 100 个对话：考虑归档或导出
建议的消息数量（每个对话）
- ✅ < 100 条：流畅
- ⚠️ 100-500 条：正常
- ❌ > 500 条：考虑清空或导出
数据管理
侧边栏 → 数据管理
- 查看统计
- 导出数据
- 清理旧数据
🚀 开始使用
现在就刷新页面，体验全新的聊天界面！
# 如果页面未更新，请强制刷新
Mac: Cmd + Shift + R
Windows: Ctrl + Shift + R
📝 更新记录
V2.0（2024/10/14）
- ✅ 修复消息列表实时更新
- ✅ 修复消息条数显示
- ✅ 添加可折叠导航
- ✅ 重构右侧对话列表
- ✅ 添加完整工具栏
- ✅ 支持 MCP 和模型选择
V1.0（初始版本）
- ✅ 基础聊天功能
- ✅ 话题管理
- ✅ 消息操作
祝您使用愉快！ 🎉