map-client-vue/CHAT_V2.1_QUICKSTART.md

# V2.1 新功能快速指南

## 🎉 三大新功能

### 1. 📱 对话列表可折叠

**位置**：右上角按钮  
**效果**：隐藏对话列表，获得更大对话空间

```
点击前：
┌──────────────┬────────┐
│  对话区域     │ 列表   │
└──────────────┴────────┘

点击后：
┌─────────────────────┐
│  对话区域（全屏）    │
└─────────────────────┘
```

**操作**：
- 点击右上角 `[显示列表]` / `[隐藏列表]` 按钮
- 平滑动画效果
- 快捷键：待添加

---

### 2. 🤖 智能模型选择

**位置**：工具栏右侧 `[选择模型 ▼]`  
**效果**：自动读取"模型服务"中配置的所有模型

**配置流程**：
```
第一步：添加模型服务
侧边栏 → 模型服务 → 添加服务
例如：火山引擎、OpenAI、Ollama

第二步：测试连接
点击"测试连接" → 确保服务可用

第三步：聊天中选择
聊天页面 → 工具栏 → [选择模型▼]
显示：火山引擎 | doubao-1.5-pro-32k
```

**特性**：
- ✅ 实时同步：添加服务后立即可用
- ✅ 多服务：显示所有服务的模型
- ✅ 清晰标识：`服务名 | 模型名`
- ✅ 记忆选择：下次使用相同模型

**示例**：
```
可选模型：
- 火山引擎 | doubao-1.5-pro-32k
- 火山引擎 | doubao-1.5-lite-32k  
- OpenAI | gpt-4
- Ollama | llama2:latest
```

---

### 3. 🔌 MCP 服务集成

**位置**：工具栏左侧 `[不启用 MCP 服务 ▼]`  
**效果**：选择 MCP 服务器，扩展 AI 能力

**配置流程**：
```
第一步：添加 MCP 服务器
侧边栏 → MCP 设置 → 添加服务器
名称：xhs-sse
URL：http://localhost:3200
传输：SSE

第二步：连接服务器
点击"连接" → 查看可用工具
例如：xhs-sse (5 个工具)

第三步：聊天中选择
聊天页面 → 工具栏 → [MCP 选择器▼]
选择：xhs-sse (5 个工具)
```

**当前状态**：
- ✅ 基础架构：服务器选择和传递
- ✅ 自动重连：刷新页面自动连接
- ✅ 工具显示：显示可用工具数量
- ⏳ 工具调用：逻辑待实现（V2.2）

**未来功能**（V2.2）：
```
1. AI 可以调用 MCP 工具
2. 显示工具调用过程
3. 支持多步工具调用
4. 工具结果可视化
```

---

## 🎯 使用场景

### 场景A：专注写作
```
1. 隐藏对话列表（点击折叠按钮）
2. 选择文案模型（如 character 版）
3. 全屏对话，专注创作
```

### 场景B：多模型对比
```
1. 创建多个对话
2. 为每个对话选择不同模型
3. 同一问题看不同回答
4. 在对话列表快速切换
```

### 场景C：使用 MCP 工具（待实现）
```
1. 连接 MCP 服务器
2. 在聊天中选择服务器
3. 让 AI 调用工具完成任务
例如："搜索最新的 AI 新闻"
AI → 调用搜索工具 → 返回结果
```

---

## ⚡ 快速操作

| 操作 | 位置 | 快捷键 |
|------|------|--------|
| 折叠列表 | 右上角按钮 | 待添加 |
| 选择模型 | 工具栏右侧 | 待添加 |
| 选择 MCP | 工具栏左侧 | 待添加 |
| 发送消息 | 输入框 | Enter |
| 换行 | 输入框 | Shift+Enter |

---

## 🔧 配置检查

### 模型服务检查清单
- [ ] 至少添加一个模型服务
- [ ] 测试连接成功
- [ ] 在聊天中可以看到模型
- [ ] 选择模型后可以正常对话

### MCP 服务检查清单
- [ ] 添加 MCP 服务器
- [ ] 服务器连接成功
- [ ] 在聊天中可以看到服务器
- [ ] 显示工具数量正确

---

## 💡 提示

### 模型选择建议
```
日常对话：
→ Lite 系列（快速、便宜）

代码生成：
→ Pro 系列（准确、强大）

角色扮演：
→ Character 系列（富有个性）

长文本：
→ 32k/128k 系列（大上下文）
```

### MCP 服务器建议
```
本地开发：
→ http://localhost:3200

远程服务：
→ https://your-mcp-server.com

传输方式：
→ SSE（推荐）
→ HTTP（兼容性好）
```

---

## 🐛 故障排除

### Q1: 模型列表是空的？
**原因**：未配置模型服务  
**解决**：
```
侧边栏 → 模型服务 → 添加服务 → 测试连接
```

### Q2: MCP 列表只有"不启用"？
**原因**：未连接 MCP 服务器  
**解决**：
```
侧边栏 → MCP 设置 → 添加服务器 → 点击连接
```

### Q3: 折叠按钮无反应？
**原因**：小屏幕模式下行为不同  
**解决**：
```
宽屏（>1200px）：列表固定在右侧，可折叠
窄屏（<1200px）：列表浮动，按钮切换显示/隐藏
```

### Q4: 刷新后 MCP 断开？
**原因**：自动重连可能失败  
**解决**：
```
1. 检查 MCP 服务器是否运行
2. 手动点击"连接"按钮
3. 查看浏览器控制台错误
```

---

## 📊 功能对比

| 功能 | V2.0 | V2.1 |
|------|------|------|
| 对话列表 | 固定显示 | ✅ 可折叠 |
| 模型选择 | 手动配置 | ✅ 自动加载 |
| MCP 集成 | 示例选项 | ✅ 动态读取 |
| 自动重连 | ❌ | ✅ |
| 工具调用 | ❌ | ⏳ 架构就绪 |

---

## 🎬 演示视频（待录制）

### 视频1：折叠列表
```
1. 展示默认状态
2. 点击折叠按钮
3. 列表平滑隐藏
4. 对话区域扩大
5. 再次点击恢复
```

### 视频2：模型切换
```
1. 打开模型选择器
2. 显示多个服务的模型
3. 选择一个模型
4. 发送消息测试
5. 切换到另一个模型
```

### 视频3：MCP 集成
```
1. 在 MCP 设置添加服务器
2. 连接成功显示工具
3. 在聊天中选择服务器
4. 查看工具数量显示
5. 发送消息（当前仅传递 ID）
```

---

## 🚀 开始使用

### 立即体验

1. **刷新页面**
   ```bash
   Mac: Cmd + Shift + R
   Windows: Ctrl + Shift + R
   ```

2. **配置服务**
   ```
   模型服务 → 添加至少一个服务
   MCP 设置 → 添加至少一个服务器
   ```

3. **开始对话**
   ```
   聊天对话 → 选择模型 → 输入消息
   ```

---

## 📞 获取帮助

遇到问题？
1. 查看 `CHAT_V2.1_UPDATE.md` 详细文档
2. 检查浏览器控制台错误
3. 查看服务器连接状态
4. 提交 Issue

---

**V2.1 更新完成！** 🎉

开始体验全新的聊天功能吧！