Refactor code structure for improved readability and maintainability

doc/intro.md

@@ -38,10 +38,28 @@ docker run -p 3000:3000 samanhappy/mcphub
 
 ### 配置高德地图
 
+因为高德地图的 MCP 服务需要 API Key，所以我们需要在仪表盘中配置高德地图的 API Key。点击 amap-maps 右边的 Edit 按钮即可在弹出的窗口的环境变量中配置高德地图的 API Key。
 
+![配置高德地图](../assets/amap-edit.png)
+
+点击保存后，MCP Hub 将会自动重启高德地图的 MCP 服务。
+
+### 配置 MCP Hub SSE
+
+MCP Hub 提供了单一聚合的 MCP Server SSE 端点：`http://localhost:3000/sse`，可以在任意支持 MCP 的客户端中配置使用，这里我们选择开源的 Cherry Studio 用来演示。
+
+![配置 Cherry Studio](../assets/cherry-mcp.png)
+
+配置成功后，可以看到可用工具中已经列出了所有高德 MCP 服务支持的工具。
+
+### 使用高德地图 MCP 服务
+
+下面，我们就可以在 Cherry Studio 中使用高德地图的 MCP 服务了。我们可以选择硅基流动的 Qwen2.5-7B-Instruct 模型，并且记得把下面 MCP Server 的开关打开，接着输入“我明天要从南京去上海旅游，晚上想住在外滩附近，帮我规划一下交通和酒店行程”，然后点击发送按钮。
+  
+![高德地图行程规划](../assets/amap-result.png)
+
+可以看到，Cherry Studio 在回答过程中成功调用了高德地图 MCP 服务的多个 工具，包括高德地图的路线规划、酒店查询等功能，最终返回了一个完整的行程规划方案。
 
 ## 结语
 
-对于追求极致简便与个性化服务的个人开发者来说，MCPHub 提供了一种全新的解决方案——一键部署、轻松管理、灵活扩展，满足你对 MCP 服务的所有需求。现在就来体验 MCPHub，用最简单的方式构建属于你的专属 AI 服务平台吧！
-
-喜欢这篇文章的朋友请点赞、收藏，并分享给更多对 AI 与开源感兴趣的伙伴们。关注我们的公众号，获取更多技术干货与前沿资讯！
+MCPHub 的一键部署和动态配置功能，让个人开发者能够轻松搭建和管理多个 MCP 服务，极大地提升了开发效率和灵活性。无论是个人项目还是实验室环境，MCPHub 都能为你提供一个高效、便捷的解决方案。未来，我们将继续扩展更多的 MCP 服务和功能，敬请期待！