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

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

@@ -1,313 +0,0 @@
-import React, { useState, useEffect } 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);
-
-  // 清理函数：模态框关闭时重置状态
-  useEffect(() => {
-    if (!visible) {
-      setTestResult(null);
-      setTestLoading(false);
-      testForm.resetFields();
-    }
-  }, [visible, testForm]);
-
-  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

@@ -1,48 +0,0 @@
-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',
-          borderRadius: '4px',
-          borderLeft: '4px solid #00f0ff'
-        }}>
-          <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>描述：</div>
-          <div style={{ opacity: 0.7 }}>{previewContent.description}</div>
-        </div>
-      )}
-      
-      <div style={{ 
-        maxHeight: '60vh', 
-        overflow: 'auto', 
-        padding: '16px',
-        borderRadius: '4px',
-        fontFamily: "'Share Tech Mono', 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

@@ -1,184 +0,0 @@
-# 接口管理组件拆分与优化
-
-## 概述
-将原本的 `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组件中完成
-
-#### 第二阶段：交互优化
-- **智能下拉框**：将响应选择和名称编辑合并为一个既可选择又可编辑的交互组件
-- **双模式切换**：
-  - **选择模式**：下拉选择器用于切换不同响应，右侧编辑按钮可进入编辑模式
-  - **编辑模式**：输入框直接编辑响应名称，确认或取消按钮完成操作
-- **更简洁的布局**：从三列布局（选择/名称/操作）优化为两列布局（选择编辑/删除）
-
-### 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`: 预览回调
-
-特色功能：
-- **双模式交互界面**：选择模式下可快速切换响应，编辑模式下可直接修改名称
-- **一键切换**：点击编辑按钮立即进入编辑模式，支持回车确认和失焦保存
-- **优雅的状态管理**：使用useState管理编辑状态，实现流畅的模式切换
-
-#### 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. **状态清晰**：选择模式和编辑模式有明确的视觉区分
-4. **快速操作**：支持回车确认、失焦保存等快捷操作
-
-### 布局优化
-- **从3列布局简化为2列**：选择编辑区域（span=20）+ 删除操作（span=4）
-- **更好的空间利用**：合并后的组件占据更大空间，操作更便捷
-- **视觉统一**：保持与整体设计风格的一致性
-
-### 代码优化
-1. **状态管理增强**：新增编辑状态和名称编辑状态管理
-2. **交互逻辑清晰**：分离选择、编辑开始、编辑完成、编辑取消等逻辑
-3. **事件处理完善**：支持多种编辑完成方式（回车、点击确认、失焦）
-
-### 功能保持
-1. **完整功能**：所有原有功能都得到保留和增强
-2. **兼容性**：保持与现有数据结构的完全兼容
-3. **稳定性**：优化过程中不破坏任何现有功能
-
-## 新的UI布局
-
-优化后的响应模块布局：
-
-```
-┌─ 响应内容编辑 ─ [添加响应] [预览] [格式化JSON] ─┐
-│                                              │
-│ ┌─ 选择响应 / 编辑名称 ────────────┐ ┌─ 操作 ─┐  │
-│ │ 选择模式：[下拉选择器] [编辑按钮] │ │ [删除] │  │
-│ │ 编辑模式：[输入框] [确认] [取消]  │ │        │  │
-│ └─────────────────────────────┘ └──────┘  │
-│                                              │
-│ 响应内容：                                    │
-│ ┌──────────────────────────────────────────┐  │
-│ │                                          │  │
-│ │  JSON内容编辑区域                          │  │
-│ │                                          │  │
-│ └──────────────────────────────────────────┘  │
-└──────────────────────────────────────────────┘
-```
-
-## 优势
-
-1. **用户体验**：更智能的交互设计，一个组件完成多种操作
-2. **界面简洁**：减少界面元素，视觉更清爽
-3. **操作效率**：快速切换选择和编辑模式，提升工作效率
-4. **代码质量**：清晰的状态管理和事件处理逻辑
-5. **扩展性**：良好的组件设计，便于后续功能扩展
-
-## 兼容性
-
-- 完全兼容原有功能和数据格式
-- 保持所有API接口不变
-- 用户界面和交互逻辑保持一致
-- 构建和打包正常工作
-- 向前兼容，新功能不影响现有数据