whistle.mock-plugins 1.0.6-beta.2 → 1.0.6-beta.21

package/lib/server.js

@@ -410,20 +410,6 @@ const handleLegacyRequest = (req, res, next) => {
   const https = require('https');
   const { Readable } = require('stream');
   
-  // 添加CORS支持 - 设置跨域相关的响应头
-  res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*');
-  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, PATCH');
-  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With, Accept');
-  res.setHeader('Access-Control-Allow-Credentials', 'true');
-  res.setHeader('Access-Control-Max-Age', '86400'); // 24小时
-  
-  // 处理预检请求
-  if (req.method === 'OPTIONS') {
-    res.statusCode = 204; // No Content
-    res.end();
-    return;
-  }
-  
   // 获取原始完整URL的所有可能来源
   let originalUrl = null;
   
@@ -519,20 +505,6 @@ const handleLegacyRequest = (req, res, next) => {
         res.setHeader(key, proxyRes.headers[key]);
       });
       
-      // 确保设置CORS头，即使原始响应没有
-      if (!res.getHeader('Access-Control-Allow-Origin')) {
-        res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*');
-      }
-      if (!res.getHeader('Access-Control-Allow-Methods')) {
-        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, PATCH');
-      }
-      if (!res.getHeader('Access-Control-Allow-Headers')) {
-        res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With, Accept');
-      }
-      if (!res.getHeader('Access-Control-Allow-Credentials')) {
-        res.setHeader('Access-Control-Allow-Credentials', 'true');
-      }
-      
       // 设置状态码
       res.statusCode = proxyRes.statusCode;
       

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whistle.mock-plugins",
-  "version": "1.0.6-beta.2",
+  "version": "1.0.6-beta.21",
   "description": "Whistle 插件，用于快速创建 API 模拟数据",
   "main": "lib/index.js",
   "scripts": {

package/ui/src/components/interface-management/InterfaceTestModal.js

@@ -0,0 +1,304 @@
+import React, { useState } from 'react';
+import { Modal, Button, Form, Input, Alert, Space } from 'antd';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { proxyTypes } from './constants';
+import { isUrlMatchPattern, refreshCacheAfterUpdate } from './utils';
+import axios from 'axios';
+
+const InterfaceTestModal = ({ 
+  visible, 
+  onCancel, 
+  editingInterface 
+}) => {
+  const [testForm] = Form.useForm();
+  const [testResult, setTestResult] = useState(null);
+  const [testLoading, setTestLoading] = useState(false);
+
+  const handleTestSubmit = async () => {
+    try {
+      const values = await testForm.validateFields();
+      const { testUrl } = values;
+      
+      if (!testUrl) {
+        return;
+      }
+      
+      setTestLoading(true);
+      
+      try {
+        // 测试前刷新缓存，确保使用最新的接口定义
+        await refreshCacheAfterUpdate();
+      } catch (error) {
+        // 即使刷新缓存失败，也继续测试
+        console.warn('刷新缓存失败，将使用现有的缓存数据:', error);
+      }
+      
+      try {
+        // 验证测试 URL 是否匹配当前接口的匹配规则
+        if (!isUrlMatchPattern(testUrl, editingInterface.urlPattern, editingInterface.proxyType)) {
+          let errorMessage = '测试URL与接口匹配规则不匹配';
+          
+          // 根据不同的代理类型提供更具体的错误信息
+          if (editingInterface.proxyType === 'url_redirect') {
+            errorMessage = `测试URL必须完全匹配 ${editingInterface.urlPattern}`;
+          } else if (editingInterface.proxyType === 'redirect') {
+            errorMessage = `测试URL必须以 ${editingInterface.urlPattern} 开头`;
+          }
+          
+          setTestResult({
+            success: false,
+            error: errorMessage
+          });
+          setTestLoading(false);
+          return;
+        }
+
+        // 调用实际测试接口
+        const response = await axios.post(`/cgi-bin/test-interface`, {
+          url: testUrl,
+          interfaceId: editingInterface.id
+        });
+        
+        if (response.data && response.data.code === 0) {
+          // 设置测试结果
+          setTestResult({
+            success: true,
+            ...response.data.data,
+            matchedRule: editingInterface.urlPattern,
+            httpMethod: editingInterface.httpMethod,
+            requestUrl: testUrl,
+            mockInfo: response.data.data.mockInfo
+          });
+        } else {
+          throw new Error(response.data?.message || '测试响应格式不正确');
+        }
+      } catch (error) {
+        setTestResult({
+          success: false,
+          error: error.response?.data?.message || error.message || '测试失败'
+        });
+      }
+      
+      setTestLoading(false);
+    } catch (error) {
+      if (error.errorFields) {
+        return; // 表单验证错误
+      }
+      console.error('测试失败:', error);
+      setTestLoading(false);
+    }
+  };
+
+  const formatResponseContent = (content, contentType) => {
+    if (contentType && contentType.includes('json')) {
+      try {
+        const parsed = JSON.parse(content);
+        return JSON.stringify(parsed, null, 2);
+      } catch (e) {
+        return content;
+      }
+    }
+    return content;
+  };
+
+  return (
+    <Modal
+      title="测试接口"
+      open={visible}
+      onCancel={onCancel}
+      footer={[
+        <Button key="back" onClick={onCancel}>
+          关闭
+        </Button>,
+        <Button key="submit" type="primary" loading={testLoading} onClick={handleTestSubmit}>
+          测试
+        </Button>
+      ]}
+      width={800}
+    >
+      {editingInterface && (
+        <div className="test-interface-container">
+          <Alert
+            message="URL匹配规则说明"
+            description={
+              <div>
+                <p>当前接口匹配规则：<code>{editingInterface.urlPattern}</code></p>
+                <p>代理类型：{
+                  proxyTypes.find(item => item.value === editingInterface.proxyType)?.label || 
+                  editingInterface.proxyType || '模拟响应'
+                }</p>
+                
+                {editingInterface.proxyType === 'url_redirect' && (
+                  <div>
+                    <p><b>URL重定向模式规则：</b></p>
+                    <ul>
+                      <li>URL匹配规则必须是完整URL（包括http://或https://）</li>
+                      <li>需要完全匹配URL路径，测试URL必须与匹配规则<b>完全一致</b></li>
+                      <li>命中后将直接跳转到目标URL: {editingInterface.targetUrl}</li>
+                    </ul>
+                  </div>
+                )}
+                
+                {editingInterface.proxyType === 'redirect' && (
+                  <div>
+                    <p><b>重定向模式规则：</b></p>
+                    <ul>
+                      <li>URL匹配规则必须以http://或https://开头</li>
+                      <li>测试URL必须以匹配规则开头（<b>前缀匹配</b>）</li>
+                      <li>命中后将直接跳转到目标URL: {editingInterface.targetUrl}</li>
+                    </ul>
+                  </div>
+                )}
+                
+                {editingInterface.proxyType === 'response' && (
+                  <div>
+                    <p>在Whistle规则中，您需要配置完整URL或域名指向whistle.mock-plugins://，然后插件会根据接口的匹配规则处理请求。</p>
+                    <p>插件支持以下匹配方式：</p>
+                    <ul>
+                      <li>精确匹配：完全匹配URL路径部分</li>
+                      <li>通配符匹配：使用*代表任意字符（例如：/api/users/*）</li>
+                      <li>正则表达式：使用/pattern/格式（例如：/\/api\/users\/\d+/）</li>
+                    </ul>
+                  </div>
+                )}
+                
+                <p>请在下方输入完整测试URL进行测试</p>
+              </div>
+            }
+            type="info"
+            showIcon
+            style={{ marginBottom: 16 }}
+          />
+
+          <Form
+            form={testForm}
+            layout="vertical"
+          >
+            <Form.Item
+              name="testUrl"
+              label="测试URL"
+              rules={[{ required: true, message: '请输入测试URL' }]}
+            >
+              <Input
+                placeholder="输入完整URL，例如：https://example.com/api/users"
+              />
+            </Form.Item>
+          </Form>
+
+          {testResult && (
+            <div className="test-result">
+              <div className="result-header">
+                <h3>测试结果</h3>
+                {testResult.success ? (
+                  <span className="status success">成功</span>
+                ) : (
+                  <span className="status error">失败</span>
+                )}
+              </div>
+
+              {testResult.success ? (
+                <div className="result-content">
+                  <div className="result-item">
+                    <span className="label">请求URL：</span>
+                    <span className="value">{testResult.requestUrl}</span>
+                  </div>
+                  <div className="result-item">
+                    <span className="label">匹配规则：</span>
+                    <span className="value">{testResult.matchedRule}</span>
+                  </div>
+                  <div className="result-item">
+                    <span className="label">请求方法：</span>
+                    <span className="value">{testResult.httpMethod || 'ALL'}</span>
+                  </div>
+                  <div className="result-item">
+                    <span className="label">处理方式：</span>
+                    <span className="value">
+                      {(() => {
+                        const found = proxyTypes.find(item => item.value === editingInterface.proxyType);
+                        return found ? found.label : editingInterface.proxyType || '模拟响应';
+                      })()}
+                    </span>
+                  </div>
+                  
+                  {(editingInterface.proxyType === 'redirect' || editingInterface.proxyType === 'url_redirect') && (
+                    <div className="result-item">
+                      <span className="label">重定向目标：</span>
+                      <span className="value">{testResult.targetUrl || editingInterface.targetUrl}</span>
+                    </div>
+                  )}
+                  
+                  {(editingInterface.proxyType === 'redirect' || editingInterface.proxyType === 'url_redirect') && 
+                   testResult.formattedHeaders && (
+                    <div className="result-item">
+                      <span className="label">自定义请求头：</span>
+                      <div className="value" style={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}>
+                        {
+                          editingInterface.customHeaders && 
+                          Object.entries(editingInterface.customHeaders)
+                            .map(([key, value]) => {
+                              const generatedValue = testResult.customHeaders[key];
+                              return (
+                                <div key={key}>
+                                  {key}: {value.startsWith('@') ? (
+                                    <span>
+                                      <span style={{ color: '#d9d9d9' }}>{value}</span>
+                                      {' '} → {' '}
+                                      <span style={{ color: '#52c41a', fontWeight: 'bold' }}>{generatedValue}</span>
+                                      <span style={{ color: '#8c8c8c', fontSize: '12px' }}> (随机生成)</span>
+                                    </span>
+                                  ) : generatedValue}
+                                </div>
+                              );
+                            })
+                        }
+                      </div>
+                    </div>
+                  )}
+                  
+                  {editingInterface.proxyType === 'response' && (
+                    <>
+                      <div className="result-item">
+                        <span className="label">状态码：</span>
+                        <span className="value">{testResult.statusCode}</span>
+                      </div>
+                      <div className="result-item">
+                        <span className="label">内容类型：</span>
+                        <span className="value">{testResult.contentType}</span>
+                      </div>
+                    </>
+                  )}
+                  
+                  {testResult.mockInfo && (
+                    <>
+                      <div className="result-item">
+                        <span className="label">模拟延迟：</span>
+                        <span className="value">{testResult.mockInfo.delay}ms</span>
+                      </div>
+                      <div className="result-item">
+                        <span className="label">响应时间：</span>
+                        <span className="value">{new Date(testResult.mockInfo.timestamp).toLocaleString()}</span>
+                      </div>
+                    </>
+                  )}
+                  
+                  {editingInterface.proxyType === 'response' && (
+                    <div className="result-body">
+                      <div className="label">响应内容：</div>
+                      <pre>{formatResponseContent(testResult.responseBody, testResult.contentType)}</pre>
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <div className="result-error">
+                  <ExclamationCircleOutlined /> {testResult.error}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </Modal>
+  );
+};
+
+export default InterfaceTestModal; 

package/ui/src/components/interface-management/PreviewModal.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Modal, Button } from 'antd';
+
+const PreviewModal = ({ 
+  visible, 
+  onCancel, 
+  previewContent 
+}) => {
+  return (
+    <Modal
+      title={previewContent?.title || "预览响应内容"}
+      open={visible}
+      onCancel={onCancel}
+      footer={[
+        <Button key="close" onClick={onCancel}>
+          关闭
+        </Button>
+      ]}
+      width={600}
+    >
+      {previewContent?.description && (
+        <div style={{ 
+          marginBottom: '16px',
+          padding: '8px',
+          background: '#f9f9f9',
+          borderRadius: '4px',
+          borderLeft: '4px solid #1890ff'
+        }}>
+          <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>描述：</div>
+          <div>{previewContent.description}</div>
+        </div>
+      )}
+      
+      <div style={{ 
+        maxHeight: '60vh', 
+        overflow: 'auto', 
+        backgroundColor: '#f5f5f5', 
+        padding: '16px',
+        borderRadius: '4px',
+        fontFamily: 'monospace'
+      }}>
+        <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}>
+          {previewContent?.content}
+        </pre>
+      </div>
+    </Modal>
+  );
+};
+
+export default PreviewModal; 

package/ui/src/components/interface-management/README.md

@@ -0,0 +1,143 @@
+# 接口管理组件拆分与优化
+
+## 概述
+将原本的 `InterfaceManagement.js` 文件（2100多行）拆分为多个更小、更易维护的组件文件，并优化响应管理UI，简化用户界面。
+
+## 文件结构
+
+```
+src/components/interface-management/
+├── index.js                    # 统一导出文件
+├── constants.js                # 常量定义（选项数组）
+├── utils.js                    # 工具函数
+├── ResponseContentEditor.js    # 合并的响应内容编辑器（包含管理功能）
+├── InterfaceTestModal.js       # 接口测试模态框
+├── PreviewModal.js             # 预览模态框
+└── README.md                   # 说明文档
+```
+
+## 组件优化说明
+
+### 1. 响应管理UI优化
+- **合并组件**：将原来的 `ResponseManager` 和 `ResponseEditor` 合并为一个 `ResponseContentEditor` 组件
+- **简化界面**：移除响应描述字段和内容统计信息，只保留响应名称设置
+- **一体化操作**：响应的添加、删除、切换和内容编辑都在同一个Card组件中完成
+- **更简洁的UI**：减少界面复杂度，提升用户体验
+
+### 2. 各组件职责
+
+#### constants.js
+- `contentTypes`: 内容类型选项
+- `proxyTypes`: 代理类型选项  
+- `statusCodes`: 状态码选项
+- `httpMethods`: HTTP方法选项
+
+#### utils.js
+- `cleanJsonResponse()`: 清理JSON响应
+- `isValidUrl()`: 验证URL格式
+- `flushCache()`: 刷新缓存
+- `refreshCacheAfterUpdate()`: 更新后刷新缓存
+- `isUrlMatchPattern()`: URL匹配检查
+- `formatResponseContent()`: 格式化响应内容
+- `generateResponseId()`: 生成唯一响应ID
+
+#### ResponseContentEditor.js
+**合并后的响应内容编辑器组件**，负责：
+- 响应的增删改查操作
+- 响应选择和切换
+- 响应名称编辑（简化，只保留名称字段）
+- 响应内容编辑和格式化
+- 预览功能集成
+
+Props:
+- `form`: 表单实例
+- `responses`: 响应数组
+- `activeResponseId`: 当前激活的响应ID
+- `onPreview`: 预览回调
+
+#### InterfaceTestModal.js
+接口测试模态框组件，负责：
+- 接口测试表单
+- 测试结果显示
+- URL匹配规则说明
+- 测试失败错误处理
+
+Props:
+- `visible`: 是否显示
+- `onCancel`: 取消回调
+- `editingInterface`: 当前编辑的接口
+
+#### PreviewModal.js
+预览模态框组件，负责：
+- 响应内容预览
+- 格式化内容显示
+
+Props:
+- `visible`: 是否显示
+- `onCancel`: 取消回调
+- `previewContent`: 预览内容对象
+
+## 主文件变更
+
+新的 `InterfaceManagement.js` 文件：
+- 从 2126 行减少到约 800 行
+- 导入优化后的 `ResponseContentEditor` 组件
+- 简化响应相关的状态管理
+- 保持完整的功能性
+
+## 使用方式
+
+```javascript
+// 导入优化后的组件
+import {
+  ResponseContentEditor,
+  InterfaceTestModal,
+  PreviewModal,
+  contentTypes,
+  proxyTypes,
+  statusCodes,
+  httpMethods,
+  refreshCacheAfterUpdate,
+  formatResponseContent,
+  generateResponseId
+} from '../components/interface-management';
+
+// 使用合并后的响应编辑器
+<ResponseContentEditor
+  form={form}
+  responses={responses}
+  activeResponseId={activeResponseId}
+  onPreview={handlePreview}
+/>
+```
+
+## 优化效果
+
+### UI简化
+1. **移除冗余字段**：去掉响应描述和内容统计，界面更简洁
+2. **合并操作区域**：响应管理和内容编辑在同一界面完成
+3. **流程简化**：减少用户操作步骤，提升效率
+
+### 代码优化
+1. **组件合并**：从2个组件合并为1个，减少组件复杂度
+2. **逻辑集中**：相关功能集中在一个组件中，便于维护
+3. **接口简化**：减少组件间的通信和状态传递
+
+### 功能保持
+1. **完整功能**：所有原有功能都得到保留
+2. **兼容性**：保持与现有数据结构的完全兼容
+3. **稳定性**：优化过程中不破坏任何现有功能
+
+## 优势
+
+1. **用户体验**：更简洁的界面，更流畅的操作体验
+2. **代码维护**：更少的组件数量，更集中的业务逻辑
+3. **性能提升**：减少组件渲染和状态更新的复杂度
+4. **开发效率**：简化的代码结构，更容易理解和修改
+
+## 兼容性
+
+- 完全兼容原有功能和数据格式
+- 保持所有API接口不变
+- 用户界面和交互逻辑保持一致
+- 构建和打包正常工作