whistle.mock-plugins 1.0.3 → 1.0.5

package/ui/src/pages/InterfaceManagement.js

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import AppLayout from '../components/AppLayout';
-import { Table, Button, Modal, Form, Input, Select, message, Switch, Popconfirm, Alert, Space, Tabs } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, ExclamationCircleOutlined, PlayCircleOutlined, FormatPainterOutlined, EyeOutlined } from '@ant-design/icons';
+import { Table, Button, Modal, Form, Input, Select, message, Switch, Popconfirm, Alert, Space, Tabs, Card, Divider, Badge, Tooltip, Row, Col } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, ExclamationCircleOutlined, PlayCircleOutlined, FormatPainterOutlined, EyeOutlined, CopyOutlined, CodeOutlined, CheckCircleOutlined, CloseCircleOutlined, MenuOutlined, PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';
 import '../styles/interface-management.css';
 import axios from 'axios';
 
@@ -38,6 +38,12 @@ const InterfaceManagement = () => {
     { value: 'application/javascript; charset=utf-8', label: 'JavaScript' },
   ];
 
+  const proxyTypes = [
+    { value: 'response', label: '模拟响应' },
+    { value: 'redirect', label: '重定向' },
+    { value: 'url_redirect', label: 'URL重定向' },
+  ];
+
   const statusCodes = [
     { value: '200', label: '200 OK' },
     { value: '201', label: '201 Created' },
@@ -131,13 +137,26 @@ const InterfaceManagement = () => {
 
   const handleEditInterface = (record) => {
     setEditingInterface(record);
+    
+    // 将自定义请求头转换为数组格式，用于动态表单项
+    let headersArray = [];
+    if (record.customHeaders && typeof record.customHeaders === 'object') {
+      headersArray = Object.entries(record.customHeaders).map(([key, value]) => ({
+        headerName: key,
+        headerValue: value
+      }));
+    }
+    
     form.setFieldsValue({
       name: record.name,
       pattern: record.urlPattern,
+      proxyType: record.proxyType || 'response',
       statusCode: record.httpStatus?.toString() || '200',
       contentType: record.contentType || 'application/json; charset=utf-8',
       responseBody: record.responseContent || '',
       httpMethod: record.httpMethod || 'ALL',
+      targetUrl: record.targetUrl || '',
+      headerItems: headersArray // 使用数组存储表单项
     });
     setModalVisible(true);
   };
@@ -174,7 +193,6 @@ const InterfaceManagement = () => {
     }
   };
 
-  // 清理JSON响应内容中不需要的空白和格式化
   const cleanJsonResponse = (jsonStr) => {
     try {
       const parsed = JSON.parse(jsonStr);
@@ -184,35 +202,53 @@ const InterfaceManagement = () => {
     }
   };
 
+  // 验证URL是否合法
+  const isValidUrl = (url) => {
+    if (!url) return false;
+    
+    try {
+      new URL(url);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  };
+
   const handleSubmit = async () => {
     try {
       const values = await form.validateFields();
       
-      // 验证 URL 匹配规则格式
-      if (!isValidPattern(values.pattern)) {
-        message.error('URL匹配规则格式不正确');
-        return;
-      }
-
-      // 验证响应内容格式
-      if (values.contentType.includes('json')) {
+      // 检查responseBody是否是有效的JSON
+      if (values.proxyType === 'response' && values.contentType.includes('application/json')) {
         try {
-          // 清理并验证JSON
-          const cleanedJson = cleanJsonResponse(values.responseBody);
-          JSON.parse(cleanedJson);
-          values.responseBody = cleanedJson;
+          JSON.parse(values.responseBody);
         } catch (e) {
-          message.error('JSON响应内容格式不正确');
+          message.error('响应体不是有效的JSON格式');
           return;
         }
       }
+      
+      // 处理自定义请求头，将表单项数组转换为对象格式
+      let customHeaders = {};
+      
+      if (values.proxyType === 'redirect' || values.proxyType === 'url_redirect') {
+        if (values.headerItems && values.headerItems.length > 0) {
+          values.headerItems.forEach(item => {
+            if (item && item.headerName && item.headerName.trim()) {
+              customHeaders[item.headerName.trim()] = item.headerValue || '';
+            }
+          });
+        }
+      }
 
       const interfaceData = {
         name: values.name,
         featureId: selectedFeatureId,
         urlPattern: values.pattern,
-        proxyType: 'response',
-        responseContent: values.responseBody,
+        proxyType: values.proxyType,
+        responseContent: values.proxyType === 'response' ? values.responseBody : '',
+        targetUrl: (values.proxyType === 'redirect' || values.proxyType === 'url_redirect') ? values.targetUrl : '',
+        customHeaders: (values.proxyType === 'redirect' || values.proxyType === 'url_redirect') ? customHeaders : {},
         httpStatus: parseInt(values.statusCode, 10), // 转换为数字
         contentType: values.contentType,
         responseDelay: 0,
@@ -247,29 +283,6 @@ const InterfaceManagement = () => {
     }
   };
 
-  // 验证 URL 匹配规则格式
-  const isValidPattern = (pattern) => {
-    if (!pattern) return false;
-    
-    // 检查是否是有效的正则表达式
-    if (pattern.startsWith('/') && pattern.endsWith('/')) {
-      try {
-        new RegExp(pattern.slice(1, -1));
-        return true;
-      } catch (e) {
-        return false;
-      }
-    }
-    
-    // 检查通配符格式
-    if (pattern.includes('*')) {
-      return /^[a-zA-Z0-9\-_/.*]+$/.test(pattern);
-    }
-    
-    // 检查普通路径格式
-    return /^[a-zA-Z0-9\-_/]+$/.test(pattern);
-  };
-
   const handleCancel = () => {
     setModalVisible(false);
   };
@@ -282,6 +295,45 @@ const InterfaceManagement = () => {
     testForm.resetFields();
   };
 
+  // 检查 URL 是否匹配模式
+  const isUrlMatchPattern = (url, pattern, proxyType) => {
+    if (!url || !pattern) return false;
+    
+    try {
+      // 对于url_redirect类型，需要完全匹配
+      if (proxyType === 'url_redirect') {
+        return url === pattern;
+      }
+      
+      // 对于redirect类型，只要url以pattern开头即可命中（前缀匹配）
+      if (proxyType === 'redirect') {
+        return url.indexOf(pattern) === 0;
+      }
+      
+      // 以下是默认的匹配逻辑（用于response类型等）
+      // 如果是正则表达式
+      if (pattern.startsWith('/') && pattern.endsWith('/')) {
+        const regex = new RegExp(pattern.slice(1, -1));
+        return regex.test(url);
+      }
+      
+      // 如果是通配符模式
+      if (pattern.includes('*')) {
+        const regexPattern = pattern
+          .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+          .replace(/\*/g, '.*');
+        const regex = new RegExp(`^${regexPattern}$`);
+        return regex.test(url);
+      }
+      
+      // 精确匹配
+      return url === pattern;
+    } catch (e) {
+      console.error('URL匹配检查失败:', e);
+      return false;
+    }
+  };
+
   const handleTestSubmit = async () => {
     try {
       const values = await testForm.validateFields();
@@ -289,12 +341,21 @@ const InterfaceManagement = () => {
       
       try {
         // 验证测试 URL 是否匹配当前接口的匹配规则
-        if (!isUrlMatchPattern(values.testUrl, editingInterface.urlPattern)) {
+        if (!isUrlMatchPattern(values.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: '测试URL与接口匹配规则不匹配'
+            error: errorMessage
           });
-          message.error('测试URL与接口匹配规则不匹配');
+          message.error(errorMessage);
           return;
         }
 
@@ -336,34 +397,6 @@ const InterfaceManagement = () => {
     }
   };
 
-  // 检查 URL 是否匹配模式
-  const isUrlMatchPattern = (url, pattern) => {
-    if (!url || !pattern) return false;
-    
-    try {
-      // 如果是正则表达式
-      if (pattern.startsWith('/') && pattern.endsWith('/')) {
-        const regex = new RegExp(pattern.slice(1, -1));
-        return regex.test(url);
-      }
-      
-      // 如果是通配符模式
-      if (pattern.includes('*')) {
-        const regexPattern = pattern
-          .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-          .replace(/\*/g, '.*');
-        const regex = new RegExp(`^${regexPattern}$`);
-        return regex.test(url);
-      }
-      
-      // 精确匹配
-      return url === pattern;
-    } catch (e) {
-      console.error('URL匹配检查失败:', e);
-      return false;
-    }
-  };
-
   const handleSelectFeature = (featureId) => {
     setSelectedFeatureId(featureId);
   };
@@ -381,6 +414,11 @@ const InterfaceManagement = () => {
   };
 
   const formatJsonContent = () => {
+    const proxyType = form.getFieldValue('proxyType');
+    if (proxyType !== 'response') {
+      return;
+    }
+    
     const responseBody = form.getFieldValue('responseBody');
     if (responseBody) {
       try {
@@ -394,6 +432,11 @@ const InterfaceManagement = () => {
   };
 
   const handlePreview = () => {
+    const proxyType = form.getFieldValue('proxyType');
+    if (proxyType !== 'response') {
+      return;
+    }
+    
     const responseBody = form.getFieldValue('responseBody');
     if (responseBody) {
       try {
@@ -442,22 +485,88 @@ const InterfaceManagement = () => {
       key: 'urlPattern',
       ellipsis: true,
     },
+    {
+      title: '处理方式',
+      dataIndex: 'proxyType',
+      key: 'proxyType',
+      width: 120,
+      render: (text) => {
+        const found = proxyTypes.find(item => item.value === text);
+        return found ? found.label : text || '模拟响应';
+      }
+    },
     {
       title: '状态码',
       dataIndex: 'httpStatus',
       key: 'httpStatus',
       width: 100,
+      render: (text, record) => {
+        return record.proxyType === 'response' ? text : '-';
+      }
     },
     {
       title: '内容类型',
       dataIndex: 'contentType',
       key: 'contentType',
       width: 120,
-      render: (text) => {
+      render: (text, record) => {
+        if (record.proxyType !== 'response') {
+          return '-';
+        }
         const found = contentTypes.find(item => item.value === text);
         return found ? found.label : text;
       }
     },
+    {
+      title: '目标URL',
+      dataIndex: 'targetUrl',
+      key: 'targetUrl',
+      ellipsis: true,
+      render: (text, record) => {
+        return (record.proxyType === 'redirect' || record.proxyType === 'url_redirect') ? text : '-';
+      }
+    },
+    {
+      title: '自定义头',
+      dataIndex: 'customHeaders',
+      key: 'customHeaders',
+      width: 100,
+      render: (_, record) => {
+        if (record.proxyType !== 'redirect' && record.proxyType !== 'url_redirect') {
+          return '-';
+        }
+        
+        const headers = record.customHeaders || {};
+        const count = Object.keys(headers).length;
+        
+        if (count === 0) {
+          return '-';
+        }
+        
+        // 检查是否包含随机值
+        const hasRandomValue = Object.values(headers).some(v => v && v.startsWith('@'));
+        
+        return (
+          <Tooltip title={
+            <div>
+              {Object.entries(headers).map(([key, value]) => (
+                <div key={key}>
+                  {key}: {value}
+                  {value && value.startsWith('@') && (
+                    <span style={{ color: '#52c41a' }}> (随机)</span>
+                  )}
+                </div>
+              ))}
+            </div>
+          }>
+            <span style={{ color: '#1890ff' }}>
+              {count}个
+              {hasRandomValue && <span style={{ marginLeft: 4 }}>🎲</span>}
+            </span>
+          </Tooltip>
+        );
+      }
+    },
     {
       title: '请求方法',
       dataIndex: 'httpMethod',
@@ -577,10 +686,13 @@ const InterfaceManagement = () => {
             initialValues={{
               name: '',
               pattern: '',
+              proxyType: 'response',
               statusCode: '200',
               contentType: 'application/json; charset=utf-8',
               responseBody: '{\n  "code": 0,\n  "message": "success",\n  "data": {}\n}',
-              httpMethod: 'ALL'
+              httpMethod: 'ALL',
+              targetUrl: '',
+              headerItems: []
             }}
           >
             <div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
@@ -597,36 +709,120 @@ const InterfaceManagement = () => {
                 <Form.Item
                   name="pattern"
                   label="URL匹配规则"
-                  rules={[{ required: true, message: '请输入URL匹配规则' }]}
-                  tooltip="支持多种匹配方式：精确匹配 - /api/users，通配符 - /api/users/*，正则表达式 - /api\/users\/\d+/"
+                  rules={[
+                    { required: true, message: '请输入URL匹配规则' },
+                    ({ getFieldValue }) => ({
+                      validator(_, value) {
+                        const proxyType = getFieldValue('proxyType');
+                        if (!value) return Promise.resolve();
+                        
+                        // URL重定向模式下，必须是完整URL
+                        if (proxyType === 'url_redirect') {
+                          try {
+                            new URL(value);
+                            return Promise.resolve();
+                          } catch (e) {
+                            return Promise.reject(new Error('URL重定向模式下，URL匹配规则必须是完整的URL（包括http://或https://）'));
+                          }
+                        }
+                        
+                        // 重定向模式下，必须以http://或https://开头
+                        if (proxyType === 'redirect') {
+                          if (value.startsWith('http://') || value.startsWith('https://')) {
+                            return Promise.resolve();
+                          }
+                          return Promise.reject(new Error('重定向模式下，URL匹配规则必须以http://或https://开头'));
+                        }
+                        
+                        // 响应模式下的验证
+                        if (proxyType === 'response') {
+                          // 正则表达式验证
+                          if (value.startsWith('/') && value.endsWith('/')) {
+                            try {
+                              new RegExp(value.slice(1, -1));
+                              return Promise.resolve();
+                            } catch (e) {
+                              return Promise.reject(new Error('无效的正则表达式格式'));
+                            }
+                          }
+                          
+                          // 通配符验证
+                          if (value.includes('*')) {
+                            if (/^[a-zA-Z0-9\-_/.*]+$/.test(value)) {
+                              return Promise.resolve();
+                            }
+                            return Promise.reject(new Error('通配符URL格式不正确'));
+                          }
+                          
+                          // 普通路径验证
+                          if (/^[a-zA-Z0-9\-_/]+$/.test(value)) {
+                            return Promise.resolve();
+                          }
+                          return Promise.reject(new Error('URL路径格式不正确'));
+                        }
+                        
+                        return Promise.resolve();
+                      },
+                    }),
+                  ]}
+                  tooltip={{
+                    title: (
+                      <>
+                        <div>不同处理方式下URL匹配规则要求：</div>
+                        <ul style={{margin: '5px 0 0 15px', padding: 0}}>
+                          <li><b>模拟响应：</b> 支持路径格式如 /api/users，通配符如 /api/*，正则如 /\/api\/\d+/</li>
+                          <li><b>重定向：</b> 必须以http://或https://开头，例如：https://example.com/api</li>
+                          <li><b>URL重定向：</b> 必须是完整URL，包括http://或https://，例如：https://example.com/api/users</li>
+                        </ul>
+                      </>
+                    ),
+                    overlayStyle: { maxWidth: '450px' }
+                  }}
                 >
-                  <Input placeholder="例如：/api/users，/api/users/*，/api\/users\/\d+/" />
+                  <Input 
+                    placeholder="根据选择的处理方式输入相应格式的URL" 
+                  />
                 </Form.Item>
               </div>
             </div>
-
+            
             <div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
               <div style={{ flex: 1 }}>
                 <Form.Item
-                  name="statusCode"
-                  label="状态码"
-                  rules={[{ required: true, message: '请选择状态码' }]}
+                  name="proxyType"
+                  label="处理方式"
+                  rules={[{ required: true, message: '请选择处理方式' }]}
+                  tooltip={{
+                    title: (
+                      <>
+                        <div>不同处理方式的规则说明：</div>
+                        <ul style={{margin: '5px 0 0 15px', padding: 0}}>
+                          <li><b>模拟响应：</b> 返回您定义的响应内容</li>
+                          <li><b>重定向：</b> 将请求重定向到其他URL，URL匹配规则必须以http://或https://开头</li>
+                          <li><b>URL重定向：</b> 完全匹配URL时重定向，URL匹配规则必须是完整URL</li>
+                        </ul>
+                      </>
+                    ),
+                    overlayStyle: { maxWidth: '450px' }
+                  }}
                 >
-                  <Select>
-                    {statusCodes.map(item => (
-                      <Option key={item.value} value={item.value}>{item.label}</Option>
-                    ))}
-                  </Select>
-                </Form.Item>
-              </div>
-              <div style={{ flex: 1 }}>
-                <Form.Item
-                  name="contentType"
-                  label="内容类型"
-                  rules={[{ required: true, message: '请选择内容类型' }]}
-                >
-                  <Select>
-                    {contentTypes.map(item => (
+                  <Select onChange={(value) => {
+                    // 当切换代理类型时，清空pattern字段，并提供不同的placeholder
+                    form.setFieldsValue({ pattern: '' });
+                    
+                    // 为不同的代理类型提供不同的pattern占位符
+                    const patternInput = document.querySelector('input[placeholder="根据选择的处理方式输入相应格式的URL"]');
+                    if (patternInput) {
+                      if (value === 'response') {
+                        patternInput.placeholder = "例如：/api/users，/api/users/*，/api\/users\/\d+/";
+                      } else if (value === 'redirect') {
+                        patternInput.placeholder = "例如：https://example.com/api";
+                      } else if (value === 'url_redirect') {
+                        patternInput.placeholder = "例如：https://example.com/api/users";
+                      }
+                    }
+                  }}>
+                    {proxyTypes.map(item => (
                       <Option key={item.value} value={item.value}>{item.label}</Option>
                     ))}
                   </Select>
@@ -647,37 +843,263 @@ const InterfaceManagement = () => {
               </div>
             </div>
 
-            <Form.Item
-              name="responseBody"
-              labelCol={{
-                span: 8,          /* 宽度比例 */
+            {/* 根据proxyType显示不同的表单项 */}
+            <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.proxyType !== currentValues.proxyType}>
+              {({ getFieldValue }) => {
+                const proxyType = getFieldValue('proxyType');
+                
+                if (proxyType === 'response') {
+                  return (
+                    <>
+                      <div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
+                        <div style={{ flex: 1 }}>
+                          <Form.Item
+                            name="statusCode"
+                            label="状态码"
+                            rules={[{ required: true, message: '请选择状态码' }]}
+                          >
+                            <Select>
+                              {statusCodes.map(item => (
+                                <Option key={item.value} value={item.value}>{item.label}</Option>
+                              ))}
+                            </Select>
+                          </Form.Item>
+                        </div>
+                        <div style={{ flex: 1 }}>
+                          <Form.Item
+                            name="contentType"
+                            label="内容类型"
+                            rules={[{ required: true, message: '请选择内容类型' }]}
+                          >
+                            <Select>
+                              {contentTypes.map(item => (
+                                <Option key={item.value} value={item.value}>{item.label}</Option>
+                              ))}
+                            </Select>
+                          </Form.Item>
+                        </div>
+                      </div>
+
+                      <Form.Item
+                        name="responseBody"
+                        labelCol={{
+                          span: 8,          /* 宽度比例 */
+                        }}
+                        label={
+                          <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
+                            <span>响应内容</span>
+                            <Space>
+                              <Button 
+                                type="link" 
+                                icon={<EyeOutlined />} 
+                                onClick={handlePreview}
+                                style={{ padding: 0 }}
+                              >
+                                预览
+                              </Button>
+                              <Button 
+                                type="link" 
+                                icon={<FormatPainterOutlined />} 
+                                onClick={formatJsonContent}
+                                style={{ padding: 0 }}
+                              >
+                                格式化JSON
+                              </Button>
+                            </Space>
+                          </div>
+                        }
+                        rules={[{ required: true, message: '请输入响应内容' }]}
+                      >
+                        <TextArea rows={12} placeholder="请输入响应内容" style={{ fontFamily: 'monospace' }} />
+                      </Form.Item>
+                    </>
+                  );
+                }
+                
+                if (proxyType === 'redirect' || proxyType === 'url_redirect') {
+                  return (
+                    <>
+                      <Form.Item
+                        name="targetUrl"
+                        label="重定向目标URL"
+                        rules={[
+                          { required: true, message: '请输入重定向目标URL' },
+                          { 
+                            validator: (_, value) => {
+                              if (!value) return Promise.resolve();
+                              
+                              try {
+                                new URL(value);
+                                return Promise.resolve();
+                              } catch (e) {
+                                return Promise.reject(new Error('请输入有效的URL，必须包含http://或https://'));
+                              }
+                            }
+                          }
+                        ]}
+                        tooltip={proxyType === 'redirect' ? 
+                          "重定向模式：输入完整的目标URL。匹配时使用前缀匹配，只要请求URL以匹配规则开头即命中。例如：https://example.com/api" : 
+                          "URL重定向模式：输入完整的目标URL。匹配时要求完全匹配URL，必须与匹配规则完全一致才命中。例如：https://example.com/api/users"
+                        }
+                      >
+                        <Input 
+                          placeholder={proxyType === 'redirect' ? 
+                            "例如：https://example.com/api" : 
+                            "例如：https://example.com/api/users"
+                          } 
+                          addonBefore={
+                            <Select 
+                              defaultValue="https://" 
+                              className="select-before" 
+                              style={{ width: 100 }}
+                              onChange={(value) => {
+                                const currentUrl = form.getFieldValue('targetUrl') || '';
+                                const urlWithoutProtocol = currentUrl.replace(/^https?:\/\//, '');
+                                form.setFieldsValue({ targetUrl: value + urlWithoutProtocol });
+                              }}
+                            >
+                              <Option value="http://">http://</Option>
+                              <Option value="https://">https://</Option>
+                            </Select>
+                          }
+                        />
+                      </Form.Item>
+                      
+                      <Form.Item
+                        label="自定义请求头"
+                        tooltip="为请求添加或替换HTTP请求头"
+                        className="custom-headers-container"
+                      >
+                        <Form.List name="headerItems">
+                          {(fields, { add, remove }) => (
+                            <>
+                              {fields.map(({ key, name, ...restField }) => (
+                                <Row key={key} gutter={8} style={{ marginBottom: 8 }}>
+                                  <Col span={10}>
+                                    <Form.Item
+                                      {...restField}
+                                      name={[name, 'headerName']}
+                                      noStyle
+                                      rules={[
+                                        { 
+                                          required: true, 
+                                          message: '请输入请求头名称' 
+                                        },
+                                        {
+                                          pattern: /^[^:]+$/,
+                                          message: '请求头名称不能包含冒号'
+                                        }
+                                      ]}
+                                    >
+                                      <Input placeholder="Header-Name" />
+                                    </Form.Item>
+                                  </Col>
+                                  <Col span={12}>
+                                    <Form.Item
+                                      {...restField}
+                                      name={[name, 'headerValue']}
+                                      noStyle
+                                      rules={[
+                                        {
+                                          validator: (_, value) => {
+                                            if (!value) return Promise.resolve();
+                                            
+                                            // 检查是否是随机数格式 @xxxx-xxx
+                                            if (value.startsWith('@')) {
+                                              const randomPattern = value.substring(1);
+                                              // 验证格式: 只能包含x和-，且首尾不能是-
+                                              if (!/^[x][-x]*[x]$/.test(randomPattern) || 
+                                                  randomPattern.startsWith('-') || 
+                                                  randomPattern.endsWith('-')) {
+                                                return Promise.reject(
+                                                  new Error('随机数格式错误，应为@xxxx-xxx格式，只能包含x和-，且首尾不能是-')
+                                                );
+                                              }
+                                            }
+                                            return Promise.resolve();
+                                          }
+                                        }
+                                      ]}
+                                    >
+                                      <Input placeholder="Header-Value" />
+                                    </Form.Item>
+                                  </Col>
+                                  <Col span={2}>
+                                    <Button 
+                                      type="text" 
+                                      icon={<MinusCircleOutlined />} 
+                                      onClick={() => remove(name)}
+                                      style={{ color: '#ff4d4f' }}
+                                    />
+                                  </Col>
+                                </Row>
+                              ))}
+                              
+                              <Form.Item>
+                                <Button 
+                                  type="dashed" 
+                                  onClick={() => add()} 
+                                  block 
+                                  icon={<PlusOutlined />}
+                                >
+                                  添加请求头
+                                </Button>
+                              </Form.Item>
+                              
+                              <div style={{ marginTop: 8 }}>
+                                <Button 
+                                  type="link" 
+                                  onClick={() => {
+                                    add({ headerName: 'Content-Type', headerValue: 'application/json' });
+                                  }}
+                                >
+                                  添加 Content-Type
+                                </Button>
+                                <Button 
+                                  type="link" 
+                                  onClick={() => {
+                                    add({ headerName: 'Authorization', headerValue: 'Bearer ' });
+                                  }}
+                                >
+                                  添加 Authorization
+                                </Button>
+                                <Button 
+                                  type="link" 
+                                  onClick={() => {
+                                    add({ headerName: 'User-Agent', headerValue: 'Mozilla/5.0' });
+                                  }}
+                                >
+                                  添加 User-Agent
+                                </Button>
+                                <Button
+                                  type="link"
+                                  onClick={() => {
+                                    add({ headerName: 'X-Random-ID', headerValue: '@xxxx-xxxx' });
+                                  }}
+                                >
+                                  添加随机ID
+                                </Button>
+                              </div>
+                              
+                              <div style={{ marginTop: 8, background: '#f5f5f5', padding: '8px', borderRadius: '4px' }}>
+                                <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>随机数格式说明：</div>
+                                <ul style={{ margin: 0, paddingLeft: '20px' }}>
+                                  <li>使用 <code>@</code> 开头表示这是一个随机数值</li>
+                                  <li>格式示例：<code>@xxxx-xxxx</code> 将生成如 <code>a1b2-c3d4</code> 的随机值</li>
+                                  <li>每个 <code>x</code> 将替换为随机字母或数字</li>
+                                  <li><code>-</code> 将保留在输出中作为分隔符</li>
+                                </ul>
+                              </div>
+                            </>
+                          )}
+                        </Form.List>
+                      </Form.Item>
+                    </>
+                  );
+                }
+                
+                return null;
               }}
-              label={
-                <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
-                  <span>响应内容</span>
-                  <Space>
-                    <Button 
-                      type="link" 
-                      icon={<EyeOutlined />} 
-                      onClick={handlePreview}
-                      style={{ padding: 0 }}
-                    >
-                      预览
-                    </Button>
-                    <Button 
-                      type="link" 
-                      icon={<FormatPainterOutlined />} 
-                      onClick={formatJsonContent}
-                      style={{ padding: 0 }}
-                    >
-                      格式化JSON
-                    </Button>
-                  </Space>
-                </div>
-              }
-              rules={[{ required: true, message: '请输入响应内容' }]}
-            >
-              <TextArea rows={12} placeholder="请输入响应内容" style={{ fontFamily: 'monospace' }} />
             </Form.Item>
           </Form>
         </Modal>
@@ -703,14 +1125,45 @@ const InterfaceManagement = () => {
                 description={
                   <div>
                     <p>当前接口匹配规则：<code>{editingInterface.urlPattern}</code></p>
-                    <p>在Whistle规则中，您需要配置完整URL或域名指向whistle.mock-plugins://，然后插件会根据接口的匹配规则处理请求。</p>
-                    <p>插件支持以下匹配方式：</p>
-                    <ul>
-                      <li>精确匹配：完全匹配URL路径部分</li>
-                      <li>通配符匹配：使用*代表任意字符（例如：/api/users/*）</li>
-                      <li>正则表达式：使用/pattern/格式（例如：/\/api\/users\/\d+/）</li>
-                      <li>部分匹配：URL包含指定路径即匹配</li>
-                    </ul>
+                    <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>
                 }
@@ -761,13 +1214,63 @@ const InterfaceManagement = () => {
                         <span className="value">{testResult.httpMethod || 'ALL'}</span>
                       </div>
                       <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>
+                        <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">
@@ -780,10 +1283,13 @@ const InterfaceManagement = () => {
                           </div>
                         </>
                       )}
-                      <div className="result-body">
-                        <div className="label">响应内容：</div>
-                        <pre>{formatResponseContent(testResult.responseBody, testResult.contentType)}</pre>
-                      </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">