map-client-vue/CHAT_V2_GUIDE.md

# 聊天模块 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（初始版本）
- ✅ 基础聊天功能
- ✅ 话题管理
- ✅ 消息操作

---

**祝您使用愉快！** 🎉