MBFE Develop Helper

满帮大前端开发助手，为前端开发者提供移动端 H5 开发、API 管理和调试的完整解决方案。

✨ 核心功能

🚀 一键 Mock 调试

• 客户端 Mock：在日志管理面板中直接修改 API 响应数据
• Bridge Mock：模拟位置变化等原生桥接功能
• 实时 Mock：启用临时 Mock 开关，即时更新数据
• 服务隔离：本地 Mock 服务器避免团队成员间的冲突

📝 自动代码生成

• API 类型：根据接口规范自动生成 TypeScript 接口定义
• Mock 数据：基于类型定义一键生成 Mock 数据
• 实时同步：保持前端类型与后端 API 同步
• 告别手写：消除容易出错的手动接口编码

📊 日志管理面板

• 接口监控：实时查看所有 API 请求/响应数据
• 控制台日志：捕获并执行临时控制台方法
• Bridge 调用：监控原生桥接交互
• 移动端调试：在桌面端远程调试移动端 H5 应用

🔍 智能日志搜索

• Hubble 集成：使用自定义条件查询 Hubble 日志
• 条件筛选：使用自定义逻辑查找特定日志条目
• 高效挖掘：智能搜索消除手动日志浏览

🔍 AI 代码质量诊断

• 实时装饰线：在代码中直接显示 AI 检测的问题，使用波浪下划线标记
• 严重程度分级：根据问题严重程度使用不同颜色
  • 🔴 高危问题 (high)：红色波浪线，对应 VSCode Error 级别
  • 🟡 中等问题 (medium)：黄色波浪线，对应 VSCode Warning 级别
  • 🔵 低危问题 (low)：蓝色波浪线，对应 VSCode Information 级别
• 问题面板集成：所有问题自动显示在 VSCode 问题面板（Problems Panel）中，来源标记为 "AI Code Quality"
• 快速导航：
  • 从 AI 问题面板点击文件路径，自动打开文件并选中问题行
  • 从 VSCode 问题面板点击问题，直接跳转到对应代码位置
  • 使用 F8 快捷键在问题间快速导航
• 智能同步：过滤问题列表时，编辑器中的装饰线自动更新，始终与当前显示的问题保持同步

🚀 快速开始

安装方法

1. 从 VSCode 扩展商店安装本插件
2. 打开满帮前端项目
3. 插件会自动激活并在侧边栏提供操作面板

系统要求

• VSCode 1.60.0 或更高版本
• Node.js（用于本地 Mock 服务器功能）
• 安装满帮 eruda 插件的移动设备

QA 数据库配置

本插件集成了 AI 代码质量检测功能，需要连接 QA 环境的 MySQL 数据库。

环境变量设置

1. 在项目根目录创建 .env 文件（参考 .env.example）
2. 添加 QA 数据库连接字符串：

QA_DATABASE_URL="mysql://vaiadmin:YOUR_PASSWORD@qa-mysql-qacomm-rds-hz.mysql.rds.aliyuncs.com:3306/vai_tools"

数据库凭据

• 主机: qa-mysql-qacomm-rds-hz.mysql.rds.aliyuncs.com
• 端口: 3306
• 用户名: vaiadmin
• 数据库: vai_tools
• 密码: 请联系团队管理员获取

安全注意事项

⚠️ 重要：

• 请勿将 .env 文件提交到版本控制系统
• 仅使用只读权限的数据库用户
• 密码应通过安全渠道获取和传递
• 建议使用 VSCode Secure Storage 存储敏感凭据

连接测试

插件启动时会自动尝试连接 QA 数据库。如遇连接问题：

1. 检查网络连接：确保可以访问满帮内网
2. 验证凭据：确认数据库用户名和密码正确
3. 查看日志：在 VSCode 开发者工具中查看连接错误详情
4. 重试机制：插件会自动重试连接 3 次（间隔 1s, 2s, 4s）

📱 快速设置指南

Mock 调试设置

1. 移动端配置：在测试环境中打开 eruda 调试器，输入电脑的 IP 地址
2. 桌面端插件：安装本插件并导航到接口详情，启用本地 Mock
3. 实时 Mock：访问日志管理面板，切换临时 Mock 开关

代码生成工作流

1. 新接口集成：为新的 API 端点一键生成代码
2. 代码更新：跳转到 API 文档并无缝更新代码

日志管理

1. 移动端设置：在 eruda 中启用 Mock 调试和日志查看
2. 桌面端界面：点击日志管理按钮打开控制面板

Hubble 日志搜索

输入条件逻辑，高效筛选和查找特定日志条目：

🛠 技术特性

• 本地 Mock 服务器：3354 端口的隔离测试环境
• 实时调试：基于 WebSocket 与移动设备通信
• TypeScript 集成：自动生成类型定义和接口
• 跨平台支持：支持微前端和独立 H5 项目
• 零配置启动：与满帮开发工作流开箱即用

🤖 MCP 服务集成

本插件内置了 MCP (Model Context Protocol) 服务，为 AI 助手提供强大的工具调用能力，让 AI 能够直接操作满帮开发工具链。

MCP 服务架构

MCP 服务运行在 3355 端口，提供 HTTP 和 STDIO 两种通信方式：

• HTTP 模式：通过 REST API 和 MCP Remote 协议与 AI 助手通信
• STDIO 模式：通过标准输入输出与本地 AI 工具集成

核心功能模块

📦 Mock 数据管理 (15+ 工具)

完整的 Mock 数据 CRUD 操作：

• mock_query - 查询和过滤 Mock 项
• mock_create / mock_create_multiple - 创建单个或批量 Mock
• mock_update / mock_update_multiple - 更新 Mock 数据
• mock_set_enabled / mock_set_multiple_enabled - 启用/禁用 Mock
• mock_delete / mock_delete_by_criteria - 删除 Mock 项
• mock_move_to_group / mock_rename_group - 分组管理

📝 API 文档生成

• api_get_interface_by_url - 从 FTAPI URL 自动生成 TypeScript 接口
  • 自动获取 SSO 认证 Cookie
  • 支持 dev/qa/prod 多环境
  • 生成 Request/Response 接口定义
  • 可选生成 API 调用函数

🔔 Hubble 告警管理

• hubble_create_alert_policy - 创建 Hubble 监控告警策略
  • 支持按平台(iOS/Android/H5)分别创建策略
  • 支持聚合告警(所有平台统一策略)
  • 内置推荐告警策略配置
  • 支持多种监控类型(路由404、资源加载、JS异常等)

🌐 内网 HTTP 访问

• intranet_fetch - 使用认证 Cookie 访问满帮内网页面
  • 自动附加 SSO 认证信息
  • 支持 GET/POST/PUT/DELETE 请求
  • 仅限 *.amh-group.com 域名
• intranet_get_cookies - 查看可用的认证 Cookie 信息

使用方式

1. 测试 MCP 服务

# 启动测试服务器(HTTP模式，3355端口)
npx ts-node src/test-mcp-server.ts

# 查看可用工具
curl http://localhost:3355/tools

# 调用工具示例
curl -X POST http://localhost:3355/call/mock_query \
  -H "Content-Type: application/json" \
  -d '{"groupName": "my-group"}'

2. 在 Claude Desktop 中使用

在 Claude Desktop 配置文件中添加：

{
  "mcpServers": {
    "mbfe-helper": {
      "command": "node",
      "args": [
        "/path/to/MBFE-develop-helper/lib/mcp-service/index.js",
        "/path/to/storage",
        "mock-list.json",
        "3355"
      ]
    }
  }
}

3. MCP Remote 协议集成

// 使用 mcp-remote 包连接
import { createMCPClient } from 'mcp-remote'

const client = await createMCPClient({
  url: 'http://localhost:3355/api/mcp/code/mcp'
})

// 调用工具
const result = await client.callTool('api_get_interface_by_url', {
  url: 'https://ftapi.amh-group.com/doc/detail?id=12345',
  env: 'dev'
})

技术实现

• 框架：基于 @modelcontextprotocol/sdk 官方 SDK
• HTTP 服务：Koa.js 实现 REST API 和 MCP Remote 协议
• 模块化设计：每个功能模块独立注册工具和提示词
• 进程通信：支持作为子进程 fork 或直接导入使用
• 自动重启：插件内集成 MCP 服务管理和自动重启

📝 开源许可

MIT License - 详情请查看 LICENSE 文件

🤝 贡献指南

本插件专为满帮前端开发工作流设计。如有问题或功能建议，请联系满帮前端团队。