D2C MCP 服务管理器
一个专为 D2C (Design to Code) 项目设计的 VSCode 扩展，提供便捷的 MCP (Model Context Protocol) 服务管理功能。
✨ 功能特性
🎯 核心功能
- 可视化服务管理 - 在 VSCode 侧边栏中直观显示 MCP 服务状态
- 一键操作 - 支持启动、停止、强制停止 MCP 服务
- 实时监控 - 实时查看服务输出日志和运行状态
- 智能检测 - 自动检测服务端口和运行状态
- 调试支持 - 内置 Webview 调试功能
🔧 管理功能
- 服务状态查看 - 实时显示服务运行状态和端口信息
- 快速访问 - 一键打开服务地址进行测试
- 日志输出 - 在专用输出面板中查看服务日志
- 刷新机制 - 支持手动刷新服务状态
🚀 快速开始
安装要求
- VSCode 版本 >= 1.94.0
- 安装
pnpm 包管理器
d2c-mcp 项目（会自动包含在扩展中）
使用步骤
打开服务面板
- 在 VSCode 活动栏（左侧）找到 "D2C MCP 服务" 图标 🖥️
- 点击图标打开 MCP 服务管理面板
启动服务
- 点击 ▶️ 播放按钮启动 MCP 服务
- 服务状态会实时更新显示
监控服务
- 查看服务运行状态（🟢 运行中 / 🔴 已停止）
- 点击 🔗 链接图标快速访问服务地址
- 在 "D2C MCP Server" 输出面板查看详细日志
管理服务
- 使用 ⏹️ 停止按钮正常停止服务
- 使用 🛑 强制停止按钮处理异常情况
- 点击 🔄 刷新按钮更新服务状态
🏗️ 工作模式
扩展支持两种工作模式，会自动检测并选择合适的模式：
开发模式
- 从同级目录的
d2c-mcp 项目启动服务
- 适用于开发环境，支持实时代码更新
生产模式
- 从扩展包内的
d2c-mcp 启动服务
- 首次运行会自动安装依赖
- 适用于发布版本，独立运行
🎨 界面说明
侧边栏视图
- MCP 服务管理 - 主要的服务控制面板
- 服务状态指示器 - 实时显示运行状态
- 操作按钮 - 启动、停止、刷新等快捷操作
状态指示
- 🟢 运行中 - 服务正常运行
- 🔴 已停止 - 服务未运行
- ⚠️ 异常 - 服务运行异常
可用命令
启动 MCP 服务 - 启动服务停止 MCP 服务 - 正常停止服务强制停止 MCP 服务 - 强制终止服务进程查看服务状态 - 检查当前服务状态打开服务地址 - 在浏览器中打开服务URL刷新 - 刷新服务状态和界面
🛠️ 开发指南
环境准备
# 安装依赖
pnpm install
开发命令
# 编译扩展
pnpm run compile
# 监听模式（开发时使用）
pnpm run watch
# 构建 MCP 服务
pnpm run build-mcp
# 复制 MCP 服务到扩展
pnpm run copy-mcp
# 预构建（构建并复制 MCP 服务）
pnpm run prebuild
# 打包发布
pnpm run package
# 代码检查
pnpm run lint
# 编译测试文件
pnpm run compile-tests
# 监听测试文件变化
pnpm run watch-tests
# 运行测试
pnpm run test
测试命令
# 测试扩展包
pnpm run test-package
# 测试 UI 界面
pnpm run test-ui
# 测试自动关闭功能
pnpm run test-auto-close
# 调试 Webview
pnpm run test-debug-webview
# 测试模板功能
pnpm run test-template
# 测试浏览器功能
pnpm run test-browser
# 测试 CSS 变量
pnpm run test-css
📁 项目结构
d2c-extension/
├── src/
│ ├── extension.ts # 主扩展逻辑
│ └── webview-template.html # Webview 模板
├── dist/ # 编译输出
├── package.json # 扩展配置
└── README.md # 项目文档
🔧 配置说明
扩展会自动处理以下配置：
- 端口检测 - 自动检测可用端口（默认从 3001 开始）
- 依赖安装 - 首次运行时自动安装 MCP 服务依赖
- 进程管理 - 智能管理服务进程生命周期
🐛 故障排除
常见问题
服务启动失败
- 检查是否安装了
pnpm
- 确认端口 3001 未被占用
- 查看输出面板中的错误日志
服务状态异常
- 使用"强制停止"命令清理异常进程
- 点击刷新按钮更新状态
- 重启 VSCode 重置扩展状态
无法访问服务地址
- 确认服务已正常启动
- 检查防火墙设置
- 尝试使用 localhost 替代 127.0.0.1
📝 更新日志
0.0.1 (当前版本)
- ✨ 初始版本发布
- 🎯 添加 MCP 服务管理功能
- 🎨 集成 VSCode 侧边栏界面
- 🔧 支持服务启动、停止、状态查看
- 📊 添加实时日志输出功能
- 🐛 内置调试和测试工具
📄 许可证
本项目采用 MIT 许可证。
🤝 贡献
欢迎提交 Issue 和 Pull Request 来改进这个扩展！
享受使用 D2C MCP 服务管理器！ 🎉
| |
