Files
map-client-vue/TOOLS_DATA_QUICKSTART.md
2025-10-14 21:52:11 +08:00

296 lines
7.4 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 工具管理与数据管理 - 快速上手指南
## 🎉 欢迎使用新功能!
我们刚刚为 MCP 客户端添加了两个重要模块:**工具管理**和**数据管理**。本指南将帮助您快速上手。
---
## 🚀 5 分钟快速开始
### 步骤 1访问功能
刷新浏览器后,您会在左侧菜单看到:
- 🛠️ **工具管理**
- 📊 **数据管理**
---
## 🛠️ 工具管理 - 快速教程
### 场景 1添加一个网页搜索工具
1. **点击「添加工具」**
2. **填写基本信息**
```
工具名称: web_search
显示名称: 网页搜索
描述: 搜索网页内容并返回相关结果
```
3. **配置端点**
```
端点地址: http://localhost:8080/api/search
```
4. **设置参数JSON 格式)**
```json
{
"query": {
"type": "string",
"description": "搜索关键词",
"required": true
},
"limit": {
"type": "number",
"description": "返回结果数量",
"default": 10
}
}
```
5. **保存并测试**
- 点击「保存」
- 点击「测试工具」
- 输入测试参数:
```json
{
"query": "Vue 3 教程",
"limit": 5
}
```
- 点击「运行测试」
### 场景 2管理现有工具
**启用/禁用工具**
- 使用卡片右上角的开关
**编辑工具**
- 点击三个点菜单 → 选择「编辑」
**复制配置**
- 点击三个点菜单 → 选择「复制配置」
- 可用于分享或备份
**删除工具**
- 点击三个点菜单 → 选择「删除」
---
## 📊 数据管理 - 快速教程
### 功能 1查看统计信息
页面顶部显示 4 个关键指标:
- 📝 对话数量
- 💬 消息总数
- 💾 存储使用
- ⏰ 最后活动
### 功能 2管理对话历史
**查看对话**
1. 在对话列表中找到目标对话
2. 点击眼睛 👁️ 图标
3. 查看完整的消息历史
**搜索对话**
1. 在搜索框输入关键词
2. 系统会搜索:
- 对话标题
- 消息内容
**导出单个对话**
1. 点击下载 📥 图标
2. 自动下载 JSON 文件
**删除对话**
1. 点击垃圾桶 🗑️ 图标
2. 确认删除
### 功能 3数据导出
**导出所有数据**
1. 点击顶部「导出数据」按钮
2. 系统会导出:
- 所有对话历史
- 工具配置
- 模型服务配置
- 系统设置
### 功能 4清理数据
**选择性清理**
1. 点击「清理数据」按钮
2. 勾选要清理的类型:
- ☑️ 对话历史
- ☑️ 工具配置
- ☑️ 模型服务
- ☑️ 系统设置
3. 确认清理
⚠️ **重要提示**:清理操作不可恢复,建议先导出备份!
---
## 💡 实用技巧
### 工具管理技巧
**技巧 1快速测试**
- 保存工具后立即测试,确保端点可用
- 使用简单的测试参数验证基本功能
**技巧 2参数模板**
```json
{
"paramName": {
"type": "string|number|boolean|object|array",
"description": "参数说明",
"required": true,
"default": "默认值"
}
}
```
**技巧 3批量管理**
- 使用「复制配置」功能快速创建相似工具
- 定期导出工具配置作为备份
### 数据管理技巧
**技巧 1定期备份**
- 每周导出一次数据备份
- 重要对话及时导出
**技巧 2搜索技巧**
- 搜索关键词会匹配标题和内容
- 使用具体的词语获得更精确的结果
**技巧 3存储管理**
- 关注存储使用量
- 接近限制时清理旧数据
- LocalStorage 限制约 5-10MB
---
## 🎨 界面说明
### 工具管理界面
```
┌─────────────────────────────────────┐
│ 工具管理 [添加工具] │
├─────────────────────────────────────┤
│ ┌───────────┐ ┌───────────┐ │
│ │ 工具卡片1 │ │ 工具卡片2 │ │
│ │ • 名称 │ │ • 名称 │ │
│ │ • 描述 │ │ • 描述 │ │
│ │ • 状态 │ │ • 状态 │ │
│ │ [测试][编辑]│ │ [测试][编辑]│ │
│ └───────────┘ └───────────┘ │
└─────────────────────────────────────┘
```
### 数据管理界面
```
┌─────────────────────────────────────┐
│ 数据管理 [导出数据] [清理数据] │
├─────────────────────────────────────┤
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐│
│ │对话数 │ │消息数 │ │存储量 │ │活动 ││
│ └──────┘ └──────┘ └──────┘ └──────┘│
├─────────────────────────────────────┤
│ 对话历史 [搜索框] │
│ ┌─────────────────────────────┐ │
│ │ 对话标题 [👁📥🗑]│ │
│ │ 消息预览... │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
```
---
## ❓ 常见问题
### Q1: 工具测试失败怎么办?
**A:** 检查以下几点:
1. 端点地址是否正确
2. 服务器是否正在运行
3. 是否有 CORS 跨域问题
4. 测试参数格式是否正确
### Q2: 对话数据存储在哪里?
**A:** 存储在浏览器的 LocalStorage 中,键名为:
- `mcp-tools` - 工具配置
- `mcp-conversations` - 对话历史
- `model-services` - 模型服务
- `mcp-settings` - 系统设置
### Q3: 数据会丢失吗?
**A:**
- ✅ 正常使用不会丢失
- ⚠️ 清除浏览器数据会丢失
- ⚠️ 隐私模式关闭后会丢失
- 💡 建议定期导出备份
### Q4: 可以导入数据吗?
**A:** 当前版本暂不支持导入功能,计划在后续版本添加。您可以:
1. 手动复制 JSON 到 LocalStorage
2. 使用浏览器开发工具导入
### Q5: 工具参数配置很复杂怎么办?
**A:** 使用 JSON 编辑器或在线工具验证:
- https://jsonlint.com/
- VS Code 的 JSON 编辑功能
---
## 🔗 相关资源
### 文档
- [完整实现文档](./TOOLS_DATA_IMPLEMENTATION.md)
- [MCP 协议文档](https://modelcontextprotocol.io/)
### 示例工具配置
查看 `TOOLS_DATA_IMPLEMENTATION.md` 中的示例部分
---
## 📞 需要帮助?
如果您遇到问题:
1. 查看浏览器控制台错误信息
2. 导出数据作为问题报告附件
3. 提供详细的操作步骤
---
## 🎯 下一步
现在您已经了解了基本功能,可以:
1. **添加第一个工具**
- 从简单的 HTTP 端点开始
2. **查看对话历史**
- 了解您的使用情况
3. **导出备份**
- 养成定期备份的好习惯
4. **探索更多**
- 尝试不同的工具配置
- 测试各种参数组合
---
**祝您使用愉快!** 🎉
如有任何问题或建议,欢迎反馈。
---
*快速指南 v1.0 - 2025-10-14*