gavin/map-client-vue

Fork 0

Files

douboer 4f5eea604e update at 2025-10-14 21:52:11

2025-10-14 21:52:11 +08:00

7.4 KiB

Raw Blame History

工具管理与数据管理 - 快速上手指南

🎉 欢迎使用新功能！

我们刚刚为 MCP 客户端添加了两个重要模块：工具管理和数据管理。本指南将帮助您快速上手。

🚀 5 分钟快速开始

步骤 1：访问功能

刷新浏览器后，您会在左侧菜单看到：

🛠️ 工具管理
📊 数据管理

🛠️ 工具管理 - 快速教程

场景 1：添加一个网页搜索工具

点击「添加工具」

填写基本信息

工具名称: web_search
显示名称: 网页搜索
描述: 搜索网页内容并返回相关结果

配置端点

端点地址: http://localhost:8080/api/search

设置参数（JSON 格式）

{
  "query": {
    "type": "string",
    "description": "搜索关键词",
    "required": true
  },
  "limit": {
    "type": "number",
    "description": "返回结果数量",
    "default": 10
  }
}

保存并测试
- 点击「保存」
- 点击「测试工具」
- 输入测试参数：
```
{
  "query": "Vue 3 教程",
  "limit": 5
}
```
- 点击「运行测试」

场景 2：管理现有工具

启用/禁用工具

使用卡片右上角的开关

编辑工具

点击三个点菜单 → 选择「编辑」

复制配置

点击三个点菜单 → 选择「复制配置」
可用于分享或备份

删除工具

点击三个点菜单 → 选择「删除」

📊 数据管理 - 快速教程

功能 1：查看统计信息

页面顶部显示 4 个关键指标：

📝 对话数量
💬 消息总数
💾 存储使用
⏰ 最后活动

功能 2：管理对话历史

查看对话

在对话列表中找到目标对话
点击眼睛 👁️ 图标
查看完整的消息历史

搜索对话

在搜索框输入关键词
系统会搜索：
- 对话标题
- 消息内容

导出单个对话

点击下载 📥 图标
自动下载 JSON 文件

删除对话

点击垃圾桶 🗑️ 图标
确认删除

功能 3：数据导出

导出所有数据

点击顶部「导出数据」按钮
系统会导出：
- 所有对话历史
- 工具配置
- 模型服务配置
- 系统设置

功能 4：清理数据

选择性清理

点击「清理数据」按钮
勾选要清理的类型：
- ☑️ 对话历史
- ☑️ 工具配置
- ☑️ 模型服务
- ☑️ 系统设置
确认清理

⚠️ 重要提示：清理操作不可恢复，建议先导出备份！

💡 实用技巧

工具管理技巧

技巧 1：快速测试

保存工具后立即测试，确保端点可用
使用简单的测试参数验证基本功能

技巧 2：参数模板

{
  "paramName": {
    "type": "string|number|boolean|object|array",
    "description": "参数说明",
    "required": true,
    "default": "默认值"
  }
}

技巧 3：批量管理

使用「复制配置」功能快速创建相似工具
定期导出工具配置作为备份

数据管理技巧

技巧 1：定期备份

每周导出一次数据备份
重要对话及时导出

技巧 2：搜索技巧

搜索关键词会匹配标题和内容
使用具体的词语获得更精确的结果

技巧 3：存储管理

关注存储使用量
接近限制时清理旧数据
LocalStorage 限制约 5-10MB

🎨 界面说明

工具管理界面

┌─────────────────────────────────────┐
│  工具管理              [添加工具]  │
├─────────────────────────────────────┤
│  ┌───────────┐  ┌───────────┐      │
│  │ 工具卡片1  │  │ 工具卡片2  │      │
│  │  • 名称    │  │  • 名称    │      │
│  │  • 描述    │  │  • 描述    │      │
│  │  • 状态    │  │  • 状态    │      │
│  │ [测试][编辑]│  │ [测试][编辑]│      │
│  └───────────┘  └───────────┘      │
└─────────────────────────────────────┘

数据管理界面

┌─────────────────────────────────────┐
│  数据管理    [导出数据] [清理数据]  │
├─────────────────────────────────────┤
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐│
│  │对话数 │ │消息数 │ │存储量 │ │活动  ││
│  └──────┘ └──────┘ └──────┘ └──────┘│
├─────────────────────────────────────┤
│  对话历史              [搜索框]     │
│  ┌─────────────────────────────┐   │
│  │ 对话标题                [👁📥🗑]│   │
│  │ 消息预览...                  │   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘

❓ 常见问题

Q1: 工具测试失败怎么办？

A: 检查以下几点：

端点地址是否正确
服务器是否正在运行
是否有 CORS 跨域问题
测试参数格式是否正确

Q2: 对话数据存储在哪里？

A: 存储在浏览器的 LocalStorage 中，键名为：

mcp-tools - 工具配置
mcp-conversations - 对话历史
model-services - 模型服务
mcp-settings - 系统设置

Q3: 数据会丢失吗？

✅ 正常使用不会丢失
⚠️ 清除浏览器数据会丢失
⚠️ 隐私模式关闭后会丢失
💡 建议定期导出备份

Q4: 可以导入数据吗？

A: 当前版本暂不支持导入功能，计划在后续版本添加。您可以：

手动复制 JSON 到 LocalStorage
使用浏览器开发工具导入

Q5: 工具参数配置很复杂怎么办？

A: 使用 JSON 编辑器或在线工具验证：

https://jsonlint.com/
VS Code 的 JSON 编辑功能

🔗 相关资源

文档

示例工具配置

查看 TOOLS_DATA_IMPLEMENTATION.md 中的示例部分

📞 需要帮助？

如果您遇到问题：

查看浏览器控制台错误信息
导出数据作为问题报告附件
提供详细的操作步骤

🎯 下一步

现在您已经了解了基本功能，可以：

添加第一个工具
- 从简单的 HTTP 端点开始
查看对话历史
- 了解您的使用情况
导出备份
- 养成定期备份的好习惯
探索更多
- 尝试不同的工具配置
- 测试各种参数组合

祝您使用愉快！ 🎉

如有任何问题或建议，欢迎反馈。

快速指南 v1.0 - 2025-10-14

7.4 KiB Raw Blame History Unescape Escape