Whistle.mock-plugins

一个强大的 Whistle 插件，用于快速创建 API 模拟数据，提供友好的用户界面和丰富的功能。

项目概述

这是一个 Whistle 的插件，主要用于功能级别的接口代理和 response 的 mock 功能，配备美观的用户界面。插件提供了丰富的接口模拟功能，可以帮助前端开发人员在后端 API 尚未开发完成的情况下继续工作。

已实现功能

功能模块管理

• ✅ 创建和管理功能模块（功能集合）
• ✅ 一键启用/禁用功能模块
• ✅ 编辑功能模块信息
• ✅ 删除功能模块
• ✅ 功能模块状态显示（已启用/已禁用）
• ✅ 导入/导出功能配置

接口管理

• ✅ 按功能模块组织接口
• ✅ 创建和编辑接口配置
• ✅ 一键启用/禁用单个接口
• ✅ 丰富的接口配置选项：
  • URL 匹配规则（支持精确匹配、通配符、正则表达式）
  • HTTP 方法选择（GET、POST、PUT、DELETE 等）
  • HTTP 状态码设置
  • 内容类型设置
  • 响应内容编辑器
• ✅ 接口测试功能
• ✅ JSON 响应格式化功能
• ✅ 响应内容预览功能

数据模拟

• ✅ 静态 JSON 数据支持
• ✅ 模板数据支持（集成 Mock.js）
• ✅ 延时响应模拟
• ✅ 自定义 HTTP 状态码和内容类型
• ✅ 请求参数匹配和自定义响应

日志记录

• ✅ 实时请求匹配日志
• ✅ 请求详情记录（URL、方法、时间）
• ✅ 响应状态记录
• ✅ 错误信息捕获
• ✅ 日志过滤和管理功能
• ✅ 自动控制日志数量（最多10000条）

用户界面

• ✅ 现代化响应式设计
• ✅ 统一的页面布局和导航
• ✅ 卡片式功能模块显示
• ✅ 直观的接口列表
• ✅ 美观的测试结果展示
• ✅ 表单验证和错误提示
• ✅ 操作成功/失败提示

计划中的功能

接口代理方式

• 🚧 URL 重定向：将请求转发到指定的其他 URL（UI已设计，后端实现中）
• 🚧 本地文件代理：返回本地文件内容（UI已设计，后端实现中）
• 🚧 接口文档直接生成 mock 数据

数据管理

• 场景管理：同一接口配置多种场景响应
• 批量导入导出：支持导入/导出多个接口配置
• 数据备份和恢复：定期自动备份配置数据

高级匹配

• 请求头匹配：根据请求头内容条件性返回不同响应
• 请求体匹配：根据请求体内容条件性返回不同响应
• 路径参数提取：从URL路径中提取参数并在响应中使用
• 查询参数提取：从URL查询字符串中提取参数并在响应中使用

用户体验

• 暗色模式支持
• 个性化设置：自定义UI主题和行为
• 快捷键支持
• 接口搜索和过滤
• 接口分类和标签
• 接口使用统计和分析图表

技术实现

前端技术栈

• React 构建 UI
• Ant Design 提供组件库
• 状态管理：React Hooks

后端实现

• 基于 Whistle 插件 API
• Express 处理请求
• 数据存储：本地文件系统
• Mock.js 生成模拟数据

使用方法

1. 安装 Whistle：npm install -g whistle
2. 安装插件：npm install -g whistle.mock-plugins
3. 启动 Whistle：w2 start
4. 访问插件页面：http://local.whistlejs.com/plugin.mock-plugin/
5. 创建功能模块和接口配置
6. 在 Whistle 中添加规则：pattern whistle.mock-plugins://

贡献指南

欢迎提交 Issue 和 Pull Request，一起完善这个项目！

许可证

MIT