whistle.mock-plugins 1.3.1 → 1.4.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whistle.mock-plugins",
-  "version": "1.3.1",
+  "version": "1.4.0-beta.2",
   "description": "Whistle 插件，用于快速创建 API 模拟数据",
   "main": "lib/index.js",
   "scripts": {
@@ -51,5 +51,12 @@
   "whistleConfig": {
     "homepage": "https://github.com/yourusername/whistle.mock-plugin",
     "name": "mock-plugin"
-  }
+  },
+  "files": [
+    "lib/",
+    "app/cgi-bin/",
+    "app/public/",
+    "VERSION.md",
+    "README.md"
+  ]
 }

package/API.md

@@ -1,247 +0,0 @@
-# whistle.mock-plugin API 文档
-
-本文档描述了 whistle.mock-plugin 插件的 API 接口和数据模型。
-
-## 数据模型
-
-### 功能模块 (Feature)
-
-功能模块是接口的分组，用于组织和管理相关的接口。
-
-| 字段 | 类型 | 描述 |
-| --- | --- | --- |
-| id | string | 功能模块唯一标识符 |
-| name | string | 功能模块名称 |
-| description | string | 功能模块描述 |
-| interfaceCount | number | 该功能模块下的接口数量 |
-| active | boolean | 功能模块是否启用 |
-| createdAt | string | 创建时间，ISO 字符串格式 |
-| updatedAt | string | 最后更新时间，ISO 字符串格式 |
-
-### 接口 (Interface)
-
-接口定义了匹配规则和响应内容，用于模拟 API 响应。
-
-| 字段 | 类型 | 描述 |
-| --- | --- | --- |
-| id | string | 接口唯一标识符 |
-| featureId | string | 所属功能模块 ID |
-| name | string | 接口名称 |
-| urlPattern | string | URL 匹配规则，支持精确匹配、通配符和正则表达式 |
-| proxyType | string | 代理类型，可选值: 'response'(数据模板), 'redirect'(URL重定向), 'file'(文件代理) |
-| responseContent | string | 响应内容，使用 Mock.js 语法 |
-| targetUrl | string | 重定向目标 URL，仅在 proxyType='redirect' 时有效 |
-| filePath | string | 文件路径，仅在 proxyType='file' 时有效 |
-| httpStatus | number | HTTP 状态码 |
-| responseDelay | number | 响应延迟，单位毫秒 |
-| httpMethod | string | HTTP 方法，可选值: 'GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS', 'ALL' |
-| active | boolean | 接口是否启用 |
-| contentType | string | 响应内容类型 |
-| headers | object | 自定义响应头 |
-| createdAt | string | 创建时间，ISO 字符串格式 |
-| updatedAt | string | 最后更新时间，ISO 字符串格式 |
-
-### API 响应 (ApiResponse)
-
-所有 API 接口的标准响应格式。
-
-| 字段 | 类型 | 描述 |
-| --- | --- | --- |
-| code | number | 状态码，0 表示成功，其他值表示错误 |
-| message | string | 状态消息 |
-| data | any | 响应数据，具体结构根据接口而定 |
-
-## API 接口
-
-### 功能模块
-
-#### 获取所有功能模块
-
-```
-GET /cgi-bin/features
-```
-
-请求参数：无
-
-响应示例：
-
-```json
-{
-  "code": 0,
-  "message": "成功",
-  "data": [
-    {
-      "id": "1",
-      "name": "用户管理",
-      "description": "用户相关接口",
-      "interfaceCount": 3,
-      "active": true,
-      "createdAt": "2023-01-01T00:00:00.000Z",
-      "updatedAt": "2023-01-01T00:00:00.000Z"
-    }
-  ]
-}
-```
-
-#### 获取指定功能模块的接口列表
-
-```
-GET /cgi-bin/interfaces?featureId={featureId}
-```
-
-请求参数：
-
-| 参数 | 类型 | 必填 | 描述 |
-| --- | --- | --- | --- |
-| featureId | string | 是 | 功能模块 ID |
-
-响应示例：
-
-```json
-{
-  "code": 0,
-  "message": "成功",
-  "data": [
-    {
-      "id": "1",
-      "featureId": "1",
-      "name": "获取用户信息",
-      "urlPattern": "/api/users/*",
-      "proxyType": "response",
-      "responseContent": "{\"code\":0,\"data\":{\"id\":1,\"name\":\"test\"}}",
-      "httpStatus": 200,
-      "contentType": "application/json; charset=utf-8",
-      "active": true
-    }
-  ]
-}
-```
-
-### 接口
-
-#### 创建接口
-
-```
-POST /cgi-bin/interfaces
-```
-
-请求参数：
-
-| 参数 | 类型 | 必填 | 描述 |
-| --- | --- | --- | --- |
-| name | string | 是 | 接口名称 |
-| featureId | string | 是 | 功能模块 ID |
-| urlPattern | string | 是 | URL 匹配规则 |
-| proxyType | string | 否 | 代理类型，默认 'response' |
-| responseContent | string | 否 | 响应内容 |
-| httpStatus | number | 否 | HTTP 状态码，默认 200 |
-| contentType | string | 否 | 响应内容类型 |
-| active | boolean | 否 | 是否启用，默认 true |
-
-响应示例：
-
-```json
-{
-  "code": 0,
-  "message": "接口创建成功",
-  "data": {
-    "id": "1",
-    "featureId": "1",
-    "name": "获取用户信息",
-    "urlPattern": "/api/users/*",
-    "proxyType": "response",
-    "responseContent": "{\"code\":0,\"data\":{\"id\":1,\"name\":\"test\"}}",
-    "httpStatus": 200,
-    "contentType": "application/json; charset=utf-8",
-    "active": true
-  }
-}
-```
-
-#### 更新接口
-
-```
-PUT /cgi-bin/interfaces?id={id}
-```
-
-请求参数：
-
-| 参数 | 类型 | 必填 | 描述 |
-| --- | --- | --- | --- |
-| id | string | 是 | 接口 ID (URL参数) |
-| name | string | 否 | 接口名称 |
-| urlPattern | string | 否 | URL 匹配规则 |
-| proxyType | string | 否 | 代理类型 |
-| responseContent | string | 否 | 响应内容 |
-| httpStatus | number | 否 | HTTP 状态码 |
-| contentType | string | 否 | 响应内容类型 |
-| active | boolean | 否 | 是否启用 |
-
-响应示例：
-
-```json
-{
-  "code": 0,
-  "message": "接口更新成功",
-  "data": {
-    "id": "1",
-    "featureId": "1",
-    "name": "获取用户信息",
-    "urlPattern": "/api/users/*",
-    "proxyType": "response",
-    "responseContent": "{\"code\":0,\"data\":{\"id\":1,\"name\":\"updated\"}}",
-    "httpStatus": 200,
-    "contentType": "application/json; charset=utf-8",
-    "active": true
-  }
-}
-```
-
-#### 删除接口
-
-```
-DELETE /cgi-bin/interfaces?id={id}
-```
-
-请求参数：
-
-| 参数 | 类型 | 必填 | 描述 |
-| --- | --- | --- | --- |
-| id | string | 是 | 接口 ID (URL参数) |
-
-响应示例：
-
-```json
-{
-  "code": 0,
-  "message": "接口删除成功",
-  "data": null
-}
-```
-
-#### 测试接口
-
-```
-POST /cgi-bin/test-interface
-```
-
-请求参数：
-
-| 参数 | 类型 | 必填 | 描述 |
-| --- | --- | --- | --- |
-| url | string | 是 | 测试 URL |
-| interfaceId | string | 是 | 接口 ID |
-
-响应示例：
-
-```json
-{
-  "code": 0,
-  "message": "成功",
-  "data": {
-    "statusCode": 200,
-    "contentType": "application/json; charset=utf-8",
-    "responseBody": "{\"code\":0,\"data\":{\"id\":1,\"name\":\"test\"}}"
-  }
-}
-``` 

package/COLUMN_RESIZE_IMPLEMENTATION.md

@@ -1,162 +0,0 @@
-# 列宽拖动调整功能实现说明
-
-## 实现日期
-2025-11-06
-
-## 功能概述
-为接口管理页面的"当前响应"列添加了拖动调整宽度的功能，列内的下拉框（Select）会自动根据列宽进行自适应。
-
-## 技术方案
-使用 Ant Design + react-resizable 的组合方案实现列宽拖动调整。
-
-## 修改文件清单
-
-### 1. package.json
-**修改内容：**
-- 添加 `react-resizable: ^3.0.5` 依赖到 devDependencies
-
-**位置：** 第42行
-
-### 2. InterfaceManagementV2.js
-**修改内容：**
-
-#### 2.1 导入模块（第18-19行）
-```javascript
-import { Resizable } from 'react-resizable';
-import 'react-resizable/css/styles.css';
-```
-
-#### 2.2 扩展 tableConfig 状态（第98-123行）
-- 添加 `columnWidths` 字段到状态中
-- 为"当前响应"列设置默认宽度 180px
-- 添加兼容性处理，确保旧缓存数据能正确加载
-
-#### 2.3 创建 ResizableTitle 组件（第714-740行）
-- 封装可调整大小的表头组件
-- 集成 react-resizable 的 Resizable 组件
-- 添加拖动手柄和事件处理
-
-#### 2.4 创建 handleResize 函数（第742-749行）
-- 处理列宽调整事件
-- 更新 tableConfig.columnWidths
-- 自动保存到 localStorage
-
-#### 2.5 修改"当前响应"列配置（第844-881行）
-- 将固定宽度改为动态读取：`tableConfig.columnWidths?.currentResponse || 180`
-- 添加 `onHeaderCell` 属性，配置可调整大小的表头
-- 为 Select 组件添加 `getPopupContainer` 属性，确保下拉菜单正确定位
-
-#### 2.6 修改 Table 组件（第1383-1387行）
-- 添加 `components` 属性
-- 配置自定义表头组件：`{ header: { cell: ResizableTitle } }`
-
-#### 2.7 更新 handleResetColumns 函数（第680-689行）
-- 重置列配置时同时重置列宽到默认值 180px
-
-### 3. interface-management.css
-**修改内容：**
-
-添加拖动手柄样式（第1287-1321行）：
-- `.react-resizable` - 可调整大小容器的基础样式
-- `.react-resizable-handle` - 拖动手柄的样式和定位
-- `.react-resizable-handle:hover` - 悬停时的视觉反馈
-- `.react-resizable-handle::after` - 拖动指示线的样式
-
-## 功能特性
-
-### 1. 列宽拖动
-- 鼠标悬停在"当前响应"列的右边缘时，光标变为调整大小的图标
-- 拖动边缘可以调整列宽
-- 拖动时有视觉反馈（蓝色高亮）
-
-### 2. 自动保存
-- 调整后的列宽自动保存到 localStorage
-- 页面刷新后保持用户设置的列宽
-
-### 3. Select 自适应
-- 列内的下拉框宽度设置为 100%
-- 随列宽变化自动调整
-- 下拉菜单正确定位，不会超出容器
-
-### 4. 重置功能
-- 点击"重置"按钮可以恢复默认列宽（180px）
-
-### 5. 兼容性处理
-- 兼容旧版本的缓存数据
-- 如果缓存中没有 columnWidths，自动初始化为默认值
-
-## 使用说明
-
-### 安装依赖
-```bash
-cd whistle.mock-plugin
-npm install
-```
-
-### 构建项目
-```bash
-npm run build
-```
-
-### 测试功能
-1. 启动 whistle 服务
-2. 打开接口管理页面
-3. 找到"当前响应"列
-4. 将鼠标移动到列标题的右边缘
-5. 当光标变为调整大小图标时，拖动调整列宽
-6. 刷新页面，验证列宽是否保持
-
-## 技术细节
-
-### 最小/最大宽度
-当前实现没有设置硬性的最小/最大宽度限制，但可以通过以下方式添加：
-
-```javascript
-onResize: (e, { size }) => {
-  const minWidth = 120;
-  const maxWidth = 400;
-  const newWidth = Math.max(minWidth, Math.min(maxWidth, size.width));
-  // 更新列宽...
-}
-```
-
-### 扩展到其他列
-如果需要为其他列也添加拖动调整功能：
-
-1. 在 `tableConfig.columnWidths` 中添加对应列的默认宽度
-2. 在列配置中添加 `onHeaderCell` 属性
-3. 使用动态宽度替代固定宽度
-
-示例：
-```javascript
-{
-  title: '延迟(毫秒)',
-  key: 'responseDelay',
-  width: tableConfig.columnWidths?.responseDelay || 100,
-  onHeaderCell: (column) => ({
-    width: column.width,
-    onResize: handleResize('responseDelay'),
-  }),
-  // ...
-}
-```
-
-## 注意事项
-
-1. **性能考虑**：拖动时会频繁更新状态和 localStorage，对于大量数据的表格可能需要添加防抖处理
-2. **浏览器兼容性**：react-resizable 依赖现代浏览器的 API，IE11 可能需要 polyfill
-3. **移动端支持**：当前实现主要针对桌面端，移动端的触摸拖动可能需要额外配置
-
-## 后续优化建议
-
-1. 添加最小/最大宽度限制，防止列宽过小或过大
-2. 为拖动操作添加防抖，减少状态更新频率
-3. 支持双击列边缘自动调整到最适宽度
-4. 支持更多列的宽度调整
-5. 添加"恢复默认列宽"的快捷按钮
-
-## 相关文档
-
-- [react-resizable 官方文档](https://github.com/react-grid-layout/react-resizable)
-- [Ant Design Table 可调整列宽示例](https://ant.design/components/table-cn#components-table-demo-resizable-column)
-

package/FEATURE_ENHANCEMENT.md

@@ -1,157 +0,0 @@
-# 前端表格和列表功能增强
-
-本次更新为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个，按名称升序排序
-- **缓存时效**：永久保存直到手动清除
-
-### 自定义选项
-- 分页大小可根据需要调整
-- 排序字段可扩展
-- 缓存策略可配置
-
-这些功能大大提升了用户在管理大量接口和功能模块时的效率，提供了更好的用户体验。