whistle.mock-plugins 1.0.4 → 1.0.6-beta.0

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);
   };
@@ -156,6 +167,9 @@ const InterfaceManagement = () => {
       if (response.data && response.data.code === 0) {
         message.success('接口删除成功');
         fetchInterfaces();
+        
+        // 刷新规则缓存
+        refreshCacheAfterUpdate();
       } else {
         throw new Error(response.data?.message || '接口删除失败');
       }
@@ -203,33 +217,53 @@ const InterfaceManagement = () => {
     }
   };
 
+  // 缓存刷新服务
+  const flushCache = async () => {
+    try {
+      const response = await axios.get('/_flush_cache');
+      return response.data;
+    } catch (error) {
+      console.error('刷新缓存失败:', error);
+      throw error;
+    }
+  };
+
+  // 更新成功后刷新缓存
+  const refreshCacheAfterUpdate = async () => {
+    try {
+      await flushCache();
+      // 这里不需要显示提示，因为主要操作会有自己的提示
+    } catch (error) {
+      // 如果刷新缓存失败，记录错误但不影响用户体验
+      console.error('刷新缓存失败，可能需要等待缓存自动过期:', error);
+    }
+  };
+
   const handleSubmit = async () => {
     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 +273,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,
@@ -246,30 +281,28 @@ const InterfaceManagement = () => {
         active: true
       };
       
+      let response;
       if (editingInterface) {
-        const response = await axios.put(`/cgi-bin/interfaces?id=${editingInterface.id}`, interfaceData);
-        if (response.data && response.data.code === 0) {
-          message.success('接口更新成功');
-        } else {
-          throw new Error(response.data?.message || '接口更新失败');
-        }
+        // 更新现有接口
+        response = await axios.put(`/cgi-bin/interfaces?id=${editingInterface.id}`, interfaceData);
       } else {
-        const response = await axios.post('/cgi-bin/interfaces', interfaceData);
-        if (response.data && response.data.code === 0) {
-          message.success('接口添加成功');
-        } else {
-          throw new Error(response.data?.message || '接口添加失败');
-        }
+        // 创建新接口
+        response = await axios.post('/cgi-bin/interfaces', interfaceData);
       }
-      
-      setModalVisible(false);
-      fetchInterfaces();
-    } catch (error) {
-      if (error.errorFields) {
-        return; // 表单验证错误
+
+      if (response.data && response.data.code === 0) {
+        message.success(editingInterface ? '接口更新成功' : '接口创建成功');
+        setModalVisible(false);
+        fetchInterfaces();
+        
+        // 刷新规则缓存
+        refreshCacheAfterUpdate();
+      } else {
+        throw new Error(response.data?.message || '操作失败');
       }
+    } catch (error) {
       console.error('操作失败:', error);
-      message.error(error.response?.data?.message || error.message || '操作失败，请检查数据格式是否正确');
+      message.error(error.response?.data?.message || error.message || '操作失败');
     }
   };
 
@@ -277,10 +310,11 @@ const InterfaceManagement = () => {
     setModalVisible(false);
   };
 
-  const handleTestInterface = (record) => {
+  const handleTestInterface = async (record) => {
     setEditingInterface(record);
     setTestUrl('');
     setTestResult(null);
+    setTestLoading(false);
     setTestModalVisible(true);
     testForm.resetFields();
   };
@@ -327,11 +361,26 @@ const InterfaceManagement = () => {
   const handleTestSubmit = async () => {
     try {
       const values = await testForm.validateFields();
+      const { testUrl } = values;
+      
+      if (!testUrl) {
+        message.error('请输入测试URL');
+        return;
+      }
+      
       setTestLoading(true);
       
+      try {
+        // 测试前刷新缓存，确保使用最新的接口定义
+        await refreshCacheAfterUpdate();
+      } catch (error) {
+        // 即使刷新缓存失败，也继续测试
+        console.warn('刷新缓存失败，将使用现有的缓存数据:', error);
+      }
+      
       try {
         // 验证测试 URL 是否匹配当前接口的匹配规则
-        if (!isUrlMatchPattern(values.testUrl, editingInterface.urlPattern, editingInterface.proxyType)) {
+        if (!isUrlMatchPattern(testUrl, editingInterface.urlPattern, editingInterface.proxyType)) {
           let errorMessage = '测试URL与接口匹配规则不匹配';
           
           // 根据不同的代理类型提供更具体的错误信息
@@ -346,27 +395,26 @@ const InterfaceManagement = () => {
             error: errorMessage
           });
           message.error(errorMessage);
+          setTestLoading(false);
           return;
         }
 
         // 调用实际测试接口
         const response = await axios.post(`/cgi-bin/test-interface`, {
-          url: values.testUrl,
+          url: testUrl,
           interfaceId: editingInterface.id
         });
-
-        if (response.data && response.data.code === 0 && response.data.data) {
+        
+        if (response.data && response.data.code === 0) {
+          // 设置测试结果
           setTestResult({
             success: true,
-            statusCode: response.data.data.statusCode,
-            contentType: response.data.data.contentType,
-            responseBody: response.data.data.responseBody,
+            ...response.data.data,
             matchedRule: editingInterface.urlPattern,
             httpMethod: editingInterface.httpMethod,
-            requestUrl: values.testUrl,
+            requestUrl: testUrl,
             mockInfo: response.data.data.mockInfo
           });
-          message.success('测试成功');
         } else {
           throw new Error(response.data?.message || '测试响应格式不正确');
         }
@@ -383,6 +431,8 @@ const InterfaceManagement = () => {
       if (error.errorFields) {
         return; // 表单验证错误
       }
+      console.error('测试失败:', error);
+      message.error(error.message || '测试失败');
       setTestLoading(false);
     }
   };
@@ -516,6 +566,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 +731,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 +958,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 +1270,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">

package/ui/src/pages/MockData.js

@@ -4,10 +4,22 @@ import AppLayout from '../components/AppLayout';
 import { Card, Row, Col, Button, Modal, Form, Input, message, Switch, Empty, Spin, Typography, Tooltip, Badge } from 'antd';
 import { PlusOutlined, EditOutlined, DeleteOutlined, ApiOutlined, ExportOutlined, InfoCircleOutlined, CalendarOutlined } from '@ant-design/icons';
 import '../styles/mock-data.css';
+import axios from 'axios';
 
 const { Text, Title, Paragraph } = Typography;
 const { TextArea } = Input;
 
+// 刷新缓存服务
+const flushCache = async () => {
+  try {
+    const response = await axios.get(`/_flush_cache`);
+    return response.data;
+  } catch (error) {
+    console.error('刷新缓存失败:', error);
+    throw error;
+  }
+};
+
 const MockData = () => {
   const history = useHistory();
   const [mockFeatures, setMockFeatures] = useState([]);
@@ -69,6 +81,17 @@ const MockData = () => {
     setShowModal(false);
   };
 
+  // 更新成功后刷新缓存
+  const refreshCacheAfterUpdate = async () => {
+    try {
+      await flushCache();
+      // 不显示提示，避免干扰主操作的反馈
+    } catch (error) {
+      // 记录错误但不影响用户体验
+      console.error('刷新缓存失败，可能需要等待缓存自动过期:', error);
+    }
+  };
+
   const handleSubmit = async (values) => {
     try {
       const featureData = {
@@ -96,6 +119,9 @@ const MockData = () => {
         message.success(currentFeature ? '功能模块更新成功' : '功能模块创建成功');
         fetchFeatures();
         closeModal();
+        
+        // 刷新缓存
+        refreshCacheAfterUpdate();
       } else {
         message.error('操作失败: ' + result.message);
       }
@@ -127,6 +153,9 @@ const MockData = () => {
         setMockFeatures(mockFeatures.map(feature => 
           feature.id === id ? { ...feature, active: !currentActive } : feature
         ));
+        
+        // 刷新缓存 - 功能启用状态变化是最关键的需要刷新缓存的操作
+        refreshCacheAfterUpdate();
       } else {
         message.error(`${currentActive ? '禁用' : '启用'}功能模块失败: ${result.message}`);
       }
@@ -156,6 +185,9 @@ const MockData = () => {
             message.success('功能模块已成功删除');
             // 更新本地状态
             setMockFeatures(mockFeatures.filter(f => f.id !== id));
+            
+            // 刷新缓存
+            refreshCacheAfterUpdate();
           } else {
             message.error('删除失败: ' + result.message);
           }