whistle.mock-plugins 1.1.1-beta.3 → 1.1.1-beta.4

package/FEATURE_ENHANCEMENT.md

@@ -0,0 +1,157 @@
+# 前端表格和列表功能增强
+
+本次更新为whistle mock插件的前端界面添加了表格排序、分页大小选择和前端缓存功能。
+
+## 🆕 新增功能
+
+### 1. 接口管理页面 (InterfaceManagement.js)
+
+#### 表格列排序功能
+- **支持的排序列**：
+  - 状态 (active) - 启用优先/禁用优先
+  - 名称 (name) - 中文字母排序
+  - URL匹配规则 (urlPattern) - 字母排序
+  - 处理方式 (proxyType) - 字母排序
+  - 状态码 (httpStatus) - 数值排序
+  - 内容类型 (contentType) - 字母排序
+  - 目标URL (targetUrl) - 字母排序
+  - 自定义头 (customHeaders) - 按数量排序
+  - 请求方法 (httpMethod) - 字母排序
+
+- **排序特性**：
+  - 支持升序/降序两个方向
+  - 点击列标题进行排序
+  - 排序状态有视觉指示器
+  - 智能处理空值和特殊字符
+
+#### 分页功能增强
+- **可选择每页显示数量**：10、20、50、100 条
+- **分页信息显示**：显示当前页范围和总数
+- **快速跳转**：支持直接跳转到指定页面
+- **智能分页**：切换功能模块时自动重置到第一页
+
+#### 前端缓存
+- **缓存内容**：
+  - 当前排序字段和顺序
+  - 每页显示数量
+  - 当前页码
+- **缓存键**：`interface-table-config`
+- **自动恢复**：页面刷新后自动恢复上次的表格状态
+
+#### 状态栏显示
+- 显示当前功能模块名称
+- 显示接口总数和分页信息
+- 显示当前排序状态
+
+### 2. 功能模块管理页面 (MockData.js)
+
+#### 卡片列表排序功能
+- **支持的排序字段**：
+  - 名称 (name) - 中文字母排序
+  - 创建时间 (createdAt) - 时间排序
+  - 接口数量 (interfaceCount) - 数值排序
+  - 状态 (active) - 启用/禁用排序
+
+- **排序控制器**：
+  - 下拉选择排序字段
+  - 下拉选择排序方向（升序/降序）
+  - 实时排序，无需刷新页面
+
+#### 分页功能
+- **可选择每页显示数量**：8、12、16、24 个卡片
+- **分页组件**：
+  - 页码导航
+  - 快速跳转
+  - 每页大小选择器
+  - 总数统计显示
+
+#### 前端缓存
+- **缓存内容**：
+  - 排序字段和顺序
+  - 每页显示数量
+  - 当前页码
+- **缓存键**：`feature-list-config`
+- **状态持久化**：所有设置在页面刷新后保持不变
+
+#### 控制栏设计
+- **排序区域**：左侧显示排序选项
+- **分页区域**：右侧显示分页大小和总数
+- **响应式设计**：在小屏幕上自动换行
+
+## 🛠️ 技术实现
+
+### 缓存机制
+```javascript
+// 读取缓存配置
+const [tableConfig, setTableConfig] = useState(() => {
+  const cached = localStorage.getItem('interface-table-config');
+  return cached ? JSON.parse(cached) : defaultConfig;
+});
+
+// 保存配置到缓存
+const saveTableConfig = (config) => {
+  const newConfig = { ...tableConfig, ...config };
+  setTableConfig(newConfig);
+  localStorage.setItem('interface-table-config', JSON.stringify(newConfig));
+};
+```
+
+### 排序算法
+- **字符串排序**：使用 `localeCompare` 支持中文排序
+- **数值排序**：使用数值比较，处理空值情况
+- **时间排序**：转换为时间戳进行比较
+- **布尔值排序**：转换为数值进行比较
+
+### 分页逻辑
+```javascript
+// 获取分页数据
+const getPaginatedData = () => {
+  const sortedData = getSortedData();
+  const startIndex = (current - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  return sortedData.slice(startIndex, endIndex);
+};
+```
+
+## 🎯 用户体验优化
+
+### 视觉反馈
+- 排序状态有明确的图标指示
+- 分页信息清晰显示当前状态
+- 控制栏使用浅色背景区分
+
+### 操作便捷性
+- 点击列标题即可排序
+- 分页大小选择器支持快速切换
+- 状态信息实时更新
+
+### 性能优化
+- localStorage缓存减少重复配置
+- 智能的默认值设置
+- 分页减少DOM渲染压力
+
+## 📋 使用说明
+
+### 接口管理页面
+1. **排序**：点击表格列标题进行排序，再次点击切换排序方向
+2. **分页**：使用表格底部的分页控件调整每页显示数量和切换页面
+3. **状态查看**：在列表上方的状态栏查看当前排序和分页信息
+
+### 功能模块管理页面  
+1. **排序**：使用控制栏左侧的下拉菜单选择排序字段和方向
+2. **分页**：使用控制栏右侧的下拉菜单调整每页显示数量
+3. **导航**：使用底部分页组件进行页面切换
+
+## 🔧 配置说明
+
+### 默认配置
+- **接口表格**：每页10条，按名称升序排序
+- **功能模块**：每页12个，按名称升序排序
+- **缓存时效**：永久保存直到手动清除
+
+### 自定义选项
+- 分页大小可根据需要调整
+- 排序字段可扩展
+- 缓存策略可配置
+
+这些功能大大提升了用户在管理大量接口和功能模块时的效率，提供了更好的用户体验。 

package/README.md

@@ -1,91 +1,239 @@
 # Whistle Mock Plugin
 
-一个用于Whistle的mock数据插件，帮助前端开发者管理和模拟API接口响应。
+一个功能强大的Whistle接口Mock插件，提供完整的API接口模拟解决方案，支持多响应管理、智能参数匹配、灵活代理配置等高级功能。
 
-## 核心功能
+## 🚀 核心功能特性
 
 ### 1. 功能模块管理
+- **模块化组织**：将相关接口按功能模块分组管理
+- **批量控制**：一键启用/禁用整个功能模块
+- **描述信息**：为每个模块添加详细说明和标签
+- **状态统计**：实时显示模块下接口数量和启用状态
+
+### 2. 多响应管理 ⭐ 核心特性
+- **多响应支持**：每个接口可配置多个不同的响应内容
+- **响应切换**：可随时切换不同的响应场景
+- **响应描述**：为每个响应添加名称和详细描述
+- **内容预览**：支持JSON格式化预览和编辑
+- **向下兼容**：完全兼容单响应模式的历史配置
+
+### 3. 智能接口匹配
+- **多种匹配模式**：
+  - 精确匹配：完全匹配URL路径
+  - 通配符匹配：支持 `*` 通配符模式
+  - 正则表达式：支持复杂的URL匹配规则
+- **HTTP方法过滤**：支持GET、POST、PUT、DELETE等方法筛选
+- **参数匹配**：支持query参数、body参数的智能匹配
+- **匹配优先级**：精确匹配优先，正则匹配兜底
+
+### 4. 代理模式支持
+- **响应模式**：直接返回配置的JSON/HTML响应内容
+- **文件代理**：返回本地文件内容作为响应
+- **URL重定向**：将请求转发到指定的目标URL
+- **参数保留**：重定向时可选择保留原始请求参数
+
+### 5. Mock.js 集成
+- **动态数据生成**：集成Mock.js库，支持动态数据生成
+- **模板语法**：支持Mock.js的所有数据模板语法
+- **随机数据**：自动生成随机的姓名、地址、图片等数据
+- **数据类型**：支持字符串、数字、布尔值、数组、对象等所有数据类型
+
+### 6. 高级配置选项
+- **响应延迟**：模拟网络延迟，设置响应时间
+- **HTTP状态码**：自定义返回状态码（200、404、500等）
+- **响应头设置**：配置Content-Type、CORS等响应头
+- **请求日志**：详细记录所有匹配的请求信息
+
+### 7. 用户界面特性
+- **现代化UI**：基于Ant Design的美观界面
+- **响应式设计**：适配不同屏幕尺寸
+- **实时预览**：JSON内容格式化显示
+- **快速操作**：支持快捷键和批量操作
+- **搜索过滤**：快速查找接口和功能模块
+
+## 📋 使用场景
+
+### 开发阶段
+- **前后端分离开发**：前端独立开发，不依赖后端接口
+- **接口设计验证**：快速验证接口设计的合理性
+- **并行开发**：前后端团队并行开发，提高效率
+
+### 测试阶段
+- **边界测试**：模拟各种异常状态和边界数据
+- **压力测试**：模拟高延迟、超时等网络状况
+- **错误场景**：测试错误处理逻辑和用户体验
+
+### 演示阶段
+- **客户演示**：构建稳定的演示环境
+- **功能展示**：展示不同的业务场景和数据状态
+- **原型验证**：快速搭建原型进行需求验证
+
+## 🏗️ 项目架构
 
-- **创建功能模块**：用户可以创建多个功能模块，每个模块代表一组相关的API接口
-- **启用/禁用功能模块**：整体控制一组接口的启用状态
-- **管理功能模块**：编辑、删除功能模块及其描述信息
+```
+whistle.mock-plugin/
+├── lib/                          # 核心业务逻辑
+│   ├── models.js                 # 数据模型定义
+│   ├── ruleManager.js           # 规则匹配引擎
+│   └── routes/                  # API路由
+│       ├── features.js          # 功能模块管理
+│       └── interfaces.js        # 接口管理
+├── ui/                          # 前端界面
+│   ├── src/
+│   │   ├── components/          # 通用组件
+│   │   ├── pages/              # 页面组件
+│   │   │   ├── Home.js         # 首页
+│   │   │   ├── FeatureManagement.js  # 功能模块管理
+│   │   │   └── InterfaceManagement.js # 接口管理
+│   │   └── utils/              # 工具函数
+│   └── public/                 # 静态资源
+├── app/                        # Whistle插件入口
+│   └── index.js               # 插件主文件
+├── test/                      # 测试文件
+├── package.json              # 项目依赖
+└── README.md                # 项目文档
+```
 
-### 2. 接口代理配置
+## 🔧 安装和使用
 
-在每个功能模块下，用户可以添加多个接口代理配置，支持以下代理方式：
+### 1. 安装插件
+```bash
+# 通过npm安装
+npm install whistle.mock-plugin -g
 
-- **URL重定向**：将请求重定向到另一个URL地址
-- **本地文件代理**：返回本地文件的内容作为响应
-- **响应内容直接配置**：直接编辑JSON、HTML等响应内容
+# 或通过yarn安装
+yarn global add whistle.mock-plugin
+```
 
-### 3. 代理规则控制
+### 2. 启动Whistle
+```bash
+# 启动whistle
+w2 start
 
-- **每个接口可独立启用/禁用**：精细控制每个接口的代理状态
-- **匹配规则配置**：支持精确匹配、通配符、正则表达式等多种匹配方式
-- **请求方法过滤**：可限定特定HTTP方法(GET, POST等)的请求被代理
+# 打开whistle管理界面
+# 访问 http://localhost:8899
+```
 
-### 4. 高级功能
+### 3. 配置插件
+1. 在Whistle管理界面中进入"Plugins"页面
+2. 找到"mock-plugin"并启用
+3. 点击插件名称进入管理界面
+
+### 4. 基本使用
+1. **创建功能模块**：点击"添加功能模块"创建一个新的模块
+2. **添加接口**：在功能模块中添加需要Mock的接口
+3. **配置响应**：为接口添加多个响应内容
+4. **启用代理**：启用功能模块和接口，开始拦截请求
+
+## 📝 配置示例
+
+### 基本接口配置
+```json
+{
+  "name": "用户信息接口",
+  "urlPattern": "/api/user/info",
+  "method": "GET",
+  "responses": [
+    {
+      "id": "success",
+      "name": "成功响应",
+      "description": "正常返回用户信息",
+      "content": {
+        "code": 200,
+        "data": {
+          "id": "@integer(10000, 99999)",
+          "name": "@cname",
+          "email": "@email",
+          "avatar": "@image('200x200')"
+        }
+      }
+    },
+    {
+      "id": "error",
+      "name": "错误响应", 
+      "description": "用户不存在的情况",
+      "content": {
+        "code": 404,
+        "message": "用户不存在"
+      }
+    }
+  ]
+}
+```
 
-- **响应延迟模拟**：模拟网络延迟，可针对接口设置响应时间
-- **状态码与响应头配置**：自定义HTTP状态码和响应头
-- **请求日志记录**：记录被代理的请求，便于调试和回溯
+### 通配符匹配配置
+```json
+{
+  "name": "文件下载接口",
+  "urlPattern": "/api/files/*",
+  "method": "GET",
+  "proxyType": "redirect",
+  "targetUrl": "https://cdn.example.com/files/",
+  "preserveParams": true
+}
+```
 
-## 使用场景
+## 🔄 版本更新记录
 
-1. **前后端分离开发**：前端开发不依赖后端接口进度
-2. **复杂场景测试**：模拟各种API响应状态和错误情况
-3. **演示环境搭建**：快速构建演示环境，无需部署完整后端
-4. **接口联调**：在本地环境联调多个微服务接口
+### v1.1.0
+#### 🆕 新增功能
+- **多响应管理系统**：每个接口支持配置多个不同的响应内容
+- **响应切换功能**：可在多个响应之间快速切换，便于测试不同场景
+- **响应描述系统**：为每个响应添加名称和详细描述
+- **JSON格式化预览**：响应内容支持JSON格式化显示和编辑
+- **响应管理界面**：全新的响应管理卡片式界面
 
-## 项目结构
+#### 🔧 优化改进
+- **接口匹配引擎重构**：大幅简化匹配逻辑，提升匹配性能
+- **正则表达式缓存**：避免重复编译正则表达式，提升匹配效率
+- **向下兼容性**：完全兼容旧版本的单响应配置格式
+- **错误处理增强**：完善错误日志记录和异常处理机制
+- **代码简化**：移除复杂的参数匹配功能，专注核心URL匹配
 
-```
-whistle.mock-plugin/
-├── app/                  # 插件服务端代码
-│   ├── index.js          # 插件入口文件
-│   └── public/           # 插件UI静态资源
-├── ui/                   # 插件UI源代码
-│   ├── src/              # React源代码
-│   ├── package.json      # UI依赖配置
-│   └── webpack.config.js # 构建配置
-├── package.json          # 插件依赖配置
-└── README.md             # 项目说明文档
-```
+#### 🐛 问题修复
+- 修复响应内容保存不生效的问题
+- 修复接口启用状态显示异常的问题
+- 修复正则表达式匹配失效的问题
+- 修复重定向功能参数丢失的问题
 
-## 页面结构
+#### 🗑️ 移除功能
+- 移除复杂的参数匹配功能（paramMatchers）
+- 移除代理类型区分逻辑
+- 移除模拟请求功能，简化为直接重定向
 
-### 1. 首页/概览
 
-- 显示插件使用统计信息
-- 快速入门指南和使用提示
-- 最近活动记录
+## 🤝 贡献指南
 
-### 2. 功能模块管理页面
+欢迎提交Issue和Pull Request来帮助改进这个项目！
 
-- 功能模块列表展示
-- 添加/编辑/删除功能模块
-- 功能模块启用/禁用控制
-- 每个功能模块的接口数量统计
+### 开发环境搭建
+```bash
+# 克隆项目
+git clone [repository-url]
 
-### 3. 接口管理页面
+# 安装依赖
+cd whistle.mock-plugin
+npm install
+
+# 启动开发服务
+npm run dev
+
+# 构建项目
+npm run build
+```
 
-- 特定功能模块下的接口列表
-- 添加/编辑/删除接口配置
-- 接口启用/禁用控制
-- 接口详细配置：
-  - URL匹配规则
-  - 代理方式选择(URL重定向/本地文件/直接响应)
-  - 响应配置(状态码、头信息、延迟)
+### 开发规范
+- 使用ESLint进行代码检查
+- 遵循React和Node.js最佳实践
+- 提交前请运行测试用例
+- 提交信息请使用中文并保持简洁明了
 
-### 4. 系统设置页面
+## 📄 许可证
 
-- 全局插件设置
-- 日志记录设置
-- 默认响应行为配置
+MIT License
 
-## 技术实现
+## 🔗 相关链接
 
-- 前端：React框架构建UI界面
-- 构建：使用Webpack打包前端资源
-- 插件通信：利用Whistle插件API与主程序通信
-- 数据存储：使用本地文件系统存储配置信息 
+- [Whistle官方文档](https://wproxy.org/whistle/)
+- [Mock.js文档](http://mockjs.com/)
+- [Ant Design](https://ant.design/)