whistle.mock-plugins 1.0.4 → 1.0.5

package/app/public/js/index.js.LICENSE.txt

@@ -127,6 +127,8 @@
 
 /**![menu-unfold](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQwOCA0NDJoNDgwYzQuNCAwIDgtMy42IDgtOHYtNTZjMC00LjQtMy42LTgtOC04SDQwOGMtNC40IDAtOCAzLjYtOCA4djU2YzAgNC40IDMuNiA4IDggOHptLTggMjA0YzAgNC40IDMuNiA4IDggOGg0ODBjNC40IDAgOC0zLjYgOC04di01NmMwLTQuNC0zLjYtOC04LThINDA4Yy00LjQgMC04IDMuNi04IDh2NTZ6bTUwNC00ODZIMTIwYy00LjQgMC04IDMuNi04IDh2NTZjMCA0LjQgMy42IDggOCA4aDc4NGM0LjQgMCA4LTMuNiA4LTh2LTU2YzAtNC40LTMuNi04LTgtOHptMCA2MzJIMTIwYy00LjQgMC04IDMuNi04IDh2NTZjMCA0LjQgMy42IDggOCA4aDc4NGM0LjQgMCA4LTMuNiA4LTh2LTU2YzAtNC40LTMuNi04LTgtOHpNMTQyLjQgNjQyLjFMMjk4LjcgNTE5YTguODQgOC44NCAwIDAwMC0xMy45TDE0Mi40IDM4MS45Yy01LjgtNC42LTE0LjQtLjUtMTQuNCA2Ljl2MjQ2LjNhOC45IDguOSAwIDAwMTQuNCA3eiIgLz48L3N2Zz4=) */
 
+/**![minus-circle](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTY5NiA0ODBIMzI4Yy00LjQgMC04IDMuNi04IDh2NDhjMCA0LjQgMy42IDggOCA4aDM2OGM0LjQgMCA4LTMuNiA4LTh2LTQ4YzAtNC40LTMuNi04LTgtOHoiIC8+PHBhdGggZD0iTTUxMiA2NEMyNjQuNiA2NCA2NCAyNjQuNiA2NCA1MTJzMjAwLjYgNDQ4IDQ0OCA0NDggNDQ4LTIwMC42IDQ0OC00NDhTNzU5LjQgNjQgNTEyIDY0em0wIDgyMGMtMjA1LjQgMC0zNzItMTY2LjYtMzcyLTM3MnMxNjYuNi0zNzIgMzcyLTM3MiAzNzIgMTY2LjYgMzcyIDM3Mi0xNjYuNiAzNzItMzcyIDM3MnoiIC8+PC9zdmc+) */
+
 /**![minus-square](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTMyOCA1NDRoMzY4YzQuNCAwIDgtMy42IDgtOHYtNDhjMC00LjQtMy42LTgtOC04SDMyOGMtNC40IDAtOCAzLjYtOCA4djQ4YzAgNC40IDMuNiA4IDggOHoiIC8+PHBhdGggZD0iTTg4MCAxMTJIMTQ0Yy0xNy43IDAtMzIgMTQuMy0zMiAzMnY3MzZjMCAxNy43IDE0LjMgMzIgMzIgMzJoNzM2YzE3LjcgMCAzMi0xNC4zIDMyLTMyVjE0NGMwLTE3LjctMTQuMy0zMi0zMi0zMnptLTQwIDcyOEgxODRWMTg0aDY1NnY2NTZ6IiAvPjwvc3ZnPg==) */
 
 /**![play-circle](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUxMiA2NEMyNjQuNiA2NCA2NCAyNjQuNiA2NCA1MTJzMjAwLjYgNDQ4IDQ0OCA0NDggNDQ4LTIwMC42IDQ0OC00NDhTNzU5LjQgNjQgNTEyIDY0em0wIDgyMGMtMjA1LjQgMC0zNzItMTY2LjYtMzcyLTM3MnMxNjYuNi0zNzIgMzcyLTM3MiAzNzIgMTY2LjYgMzcyIDM3Mi0xNjYuNiAzNzItMzcyIDM3MnoiIC8+PHBhdGggZD0iTTcxOS40IDQ5OS4xbC0yOTYuMS0yMTVBMTUuOSAxNS45IDAgMDAzOTggMjk3djQzMGMwIDEzLjEgMTQuOCAyMC41IDI1LjMgMTIuOWwyOTYuMS0yMTVhMTUuOSAxNS45IDAgMDAwLTI1Ljh6bS0yNTcuNiAxMzRWMzkwLjlMNjI4LjUgNTEyIDQ2MS44IDYzMy4xeiIgLz48L3N2Zz4=) */

package/lib/rules-server.js

@@ -192,6 +192,50 @@ const validateRedirectRule = (interface) => {
   return true;
 };
 
+// 生成随机数工具函数
+const generateRandomValue = (pattern) => {
+  // 如果不是以@开头的模式，直接返回原值
+  if (!pattern || !pattern.startsWith('@')) {
+    return pattern;
+  }
+  
+  const formatPattern = pattern.substring(1); // 去掉@前缀
+  // 为每个x生成一个随机字符（字母或数字）
+  return formatPattern.replace(/x/g, () => {
+    const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+    return chars.charAt(Math.floor(Math.random() * chars.length));
+  });
+};
+
+// 构建重定向规则
+const buildRedirectRule = (fullUrl, targetUrl, customHeaders, pattern, isUrlRedirect = 0) => {
+  if(!isUrlRedirect){
+    targetUrl = fullUrl.replace(pattern, targetUrl);
+  }else{
+    targetUrl = `redirect://${targetUrl}`;
+  }
+
+  let rule = `${fullUrl} ${targetUrl}`;
+  
+  // 如果有自定义请求头，添加到规则中
+  if (customHeaders && Object.keys(customHeaders).length > 0) {
+    // 构建headerReplace规则，格式: headerReplace://req.header-name:pattern1=replacement1&pattern2=replacement2
+    const headerRuleLines = Object.entries(customHeaders).map(([key, value]) => {
+      // 处理随机值
+      const processedValue = generateRandomValue(value);
+      
+      return `${fullUrl} headerReplace://req.${key}:/(.*)/=${processedValue}`;
+    });
+    
+    if (headerRuleLines.length > 0) {
+      // 将所有规则合并为一个多行规则字符串
+      rule = `${rule}\n${headerRuleLines.join('\n')}`;
+    }
+  }
+  
+  return rule;
+};
+
 // Whistle 规则服务器实现
 module.exports = (server, options) => {
   server.on('request', (req, res) => {
@@ -337,12 +381,15 @@ module.exports = (server, options) => {
         // 执行重定向：将fullUrl中匹配的pattern替换为targetUrl
         // 对于redirect类型，我们使用indexOf确认前缀匹配
         if (fullUrl.indexOf(pattern) === 0) {
-          // 构建新的目标URL
-          const redirectUrl = fullUrl.replace(pattern, targetUrl);
+          // 获取自定义请求头
+          const customHeaders = matchedInterface.customHeaders || {};
+          
+          // 构建重定向规则，包括自定义请求头
+          const redirectRule = buildRedirectRule(fullUrl, targetUrl, customHeaders, pattern, 0);
           
-          // 按照 whistle 规则格式返回重定向规则
-          res.end(`${fullUrl} ${redirectUrl}`);
-          log(`重定向规则: ${fullUrl} ${redirectUrl}`);
+          // 返回规则
+          res.end(redirectRule);
+          log(`重定向规则: ${redirectRule}`);
           return;
         } else {
           log(`URL ${fullUrl} 不以 ${pattern} 开头，跳过处理`);
@@ -365,9 +412,15 @@ module.exports = (server, options) => {
         
         // 对于url_redirect，我们需要完全匹配
         if (fullUrl === matchedInterface.urlPattern) {
-          // 直接返回whistle规则
-          res.end(`${fullUrl} redirect://${targetUrl}`);
-          log(`URL重定向规则: ${fullUrl} redirect://${targetUrl}`);
+          // 获取自定义请求头
+          const customHeaders = matchedInterface.customHeaders || {};
+          
+          // 构建重定向规则，包括自定义请求头
+          const redirectRule = buildRedirectRule(fullUrl, targetUrl, customHeaders, pattern, 1);
+          
+          // 返回规则
+          res.end(redirectRule);
+          log(`URL重定向规则: ${redirectRule}`);
           return;
         } else {
           log(`URL ${fullUrl} 不完全匹配 ${matchedInterface.urlPattern}，跳过处理`);

package/package.json

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

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';
 
@@ -137,6 +137,16 @@ 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,
@@ -146,6 +156,7 @@ const InterfaceManagement = () => {
       responseBody: record.responseContent || '',
       httpMethod: record.httpMethod || 'ALL',
       targetUrl: record.targetUrl || '',
+      headerItems: headersArray // 使用数组存储表单项
     });
     setModalVisible(true);
   };
@@ -207,29 +218,27 @@ const InterfaceManagement = () => {
     try {
       const values = await form.validateFields();
       
-      // 验证响应内容格式
-      if (values.proxyType === 'response' && 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;
         }
       }
       
-      // 验证重定向URL
-      if ((values.proxyType === 'redirect' || values.proxyType === 'url_redirect') && !values.targetUrl) {
-        message.error('重定向目标URL不能为空');
-        return;
-      }
+      // 处理自定义请求头，将表单项数组转换为对象格式
+      let customHeaders = {};
       
-      // 验证重定向URL的格式
-      if ((values.proxyType === 'redirect' || values.proxyType === 'url_redirect') && !isValidUrl(values.targetUrl)) {
-        message.error('重定向目标URL格式不正确，请输入完整的URL，包括http://或https://');
-        return;
+      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 = {
@@ -239,6 +248,7 @@ const InterfaceManagement = () => {
         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,
@@ -516,6 +526,47 @@ const InterfaceManagement = () => {
         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',
@@ -640,7 +691,8 @@ const InterfaceManagement = () => {
               contentType: 'application/json; charset=utf-8',
               responseBody: '{\n  "code": 0,\n  "message": "success",\n  "data": {}\n}',
               httpMethod: 'ALL',
-              targetUrl: ''
+              targetUrl: '',
+              headerItems: []
             }}
           >
             <div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
@@ -866,51 +918,183 @@ const InterfaceManagement = () => {
                 
                 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://'));
+                    <>
+                      <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"
                         }
-                      ]}
-                      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>
+                      >
+                        <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>
+                    </>
                   );
                 }
                 
@@ -1046,6 +1230,34 @@ const InterfaceManagement = () => {
                         </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">