# Whistle Mock Plugin

一个用于Whistle的mock数据插件，帮助前端开发者管理和模拟API接口响应。

## 核心功能

### 1. 功能模块管理

- **创建功能模块**：用户可以创建多个功能模块，每个模块代表一组相关的API接口
- **启用/禁用功能模块**：整体控制一组接口的启用状态
- **管理功能模块**：编辑、删除功能模块及其描述信息

### 2. 接口代理配置

在每个功能模块下，用户可以添加多个接口代理配置，支持以下代理方式：

- **URL重定向**：将请求重定向到另一个URL地址
- **本地文件代理**：返回本地文件的内容作为响应
- **响应内容直接配置**：直接编辑JSON、HTML等响应内容

### 3. 代理规则控制

- **每个接口可独立启用/禁用**：精细控制每个接口的代理状态
- **匹配规则配置**：支持精确匹配、通配符、正则表达式等多种匹配方式
- **请求方法过滤**：可限定特定HTTP方法(GET, POST等)的请求被代理

### 4. 高级功能

- **响应延迟模拟**：模拟网络延迟，可针对接口设置响应时间
- **状态码与响应头配置**：自定义HTTP状态码和响应头
- **请求日志记录**：记录被代理的请求，便于调试和回溯

## 使用场景

1. **前后端分离开发**：前端开发不依赖后端接口进度
2. **复杂场景测试**：模拟各种API响应状态和错误情况
3. **演示环境搭建**：快速构建演示环境，无需部署完整后端
4. **接口联调**：在本地环境联调多个微服务接口

## 项目结构

```
whistle.mock-plugin/
├── app/                  # 插件服务端代码
│   ├── index.js          # 插件入口文件
│   └── public/           # 插件UI静态资源
├── ui/                   # 插件UI源代码
│   ├── src/              # React源代码
│   ├── package.json      # UI依赖配置
│   └── webpack.config.js # 构建配置
├── package.json          # 插件依赖配置
└── README.md             # 项目说明文档
```

## 页面结构

### 1. 首页/概览

- 显示插件使用统计信息
- 快速入门指南和使用提示
- 最近活动记录

### 2. 功能模块管理页面

- 功能模块列表展示
- 添加/编辑/删除功能模块
- 功能模块启用/禁用控制
- 每个功能模块的接口数量统计

### 3. 接口管理页面

- 特定功能模块下的接口列表
- 添加/编辑/删除接口配置
- 接口启用/禁用控制
- 接口详细配置：
  - URL匹配规则
  - 代理方式选择(URL重定向/本地文件/直接响应)
  - 响应配置(状态码、头信息、延迟)

### 4. 系统设置页面

- 全局插件设置
- 日志记录设置
- 默认响应行为配置

## 技术实现

- 前端：React框架构建UI界面
- 构建：使用Webpack打包前端资源
- 插件通信：利用Whistle插件API与主程序通信
- 数据存储：使用本地文件系统存储配置信息