whistle.mock-plugins 1.0.6 → 1.1.0

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

@@ -0,0 +1,427 @@
+import React, { useState } from 'react';
+import { Card, Button, Space, Badge, Row, Col, Input, Select, Tooltip, message, AutoComplete } from 'antd';
+import { 
+  CodeOutlined, 
+  EyeOutlined, 
+  FormatPainterOutlined,
+  FileTextOutlined,
+  PlusCircleOutlined,
+  DeleteOutlined,
+  CheckCircleOutlined,
+  EditOutlined 
+} from '@ant-design/icons';
+import { generateResponseId } from './utils';
+
+const { TextArea } = Input;
+const { Option } = Select;
+
+const ResponseContentEditor = ({ 
+  form,
+  responses, 
+  activeResponseId, 
+  onPreview
+}) => {
+  const { getFieldValue, setFieldsValue } = form;
+  const [isEditing, setIsEditing] = useState(false);
+  const [editingName, setEditingName] = useState('');
+
+  // 查找激活的响应
+  const activeResponseIndex = responses.findIndex(r => r.id === activeResponseId);
+  const activeResponse = activeResponseIndex >= 0 ? responses[activeResponseIndex] : null;
+
+  // 添加新响应
+  const handleAddResponse = () => {
+    const newResponseId = generateResponseId();
+    let currentResponses = getFieldValue('responses') || [];
+    
+    // 确保数组格式
+    if (!Array.isArray(currentResponses)) {
+      try {
+        if (typeof currentResponses === 'string') {
+          currentResponses = JSON.parse(currentResponses);
+        }
+      } catch (e) {
+        currentResponses = [];
+      }
+    }
+    
+    if (!Array.isArray(currentResponses)) {
+      currentResponses = [];
+    }
+    
+    const newResponse = {
+      id: newResponseId,
+      name: `响应 ${currentResponses.length + 1}`,
+      description: '',
+      content: '{\n  "code": 0,\n  "message": "success",\n  "data": {}\n}'
+    };
+    
+    const updatedResponses = [...currentResponses, newResponse];
+    
+    // 更新表单字段
+    setFieldsValue({ 
+      responses: updatedResponses,
+      activeResponseId: newResponseId
+    });
+  };
+
+  // 删除响应
+  const handleDeleteResponse = (responseId) => {
+    let currentResponses = getFieldValue('responses') || [];
+    
+    if (currentResponses.length <= 1) {
+      message.warning('至少需要保留一个响应');
+      return;
+    }
+    
+    const updatedResponses = currentResponses.filter(resp => resp.id !== responseId);
+    
+    // 如果删除的是当前选中的响应，切换到第一个响应
+    let newActiveId = activeResponseId;
+    if (responseId === activeResponseId) {
+      newActiveId = updatedResponses[0]?.id;
+    }
+    
+    setFieldsValue({ 
+      responses: updatedResponses,
+      activeResponseId: newActiveId
+    });
+  };
+
+  // 切换响应
+  const handleResponseSelect = (responseId) => {
+    setFieldsValue({ activeResponseId: responseId });
+    setIsEditing(false);
+  };
+
+  // 开始编辑响应名称
+  const handleStartEdit = () => {
+    if (activeResponse) {
+      setEditingName(activeResponse.name || '');
+      setIsEditing(true);
+    }
+  };
+
+  // 完成编辑响应名称
+  const handleFinishEdit = () => {
+    if (activeResponseId && editingName.trim()) {
+      const currentResponses = getFieldValue('responses') || [];
+      const updatedResponses = currentResponses.map(resp => 
+        resp.id === activeResponseId ? { ...resp, name: editingName.trim() } : resp
+      );
+      setFieldsValue({ responses: updatedResponses });
+    }
+    setIsEditing(false);
+    setEditingName('');
+  };
+
+  // 取消编辑
+  const handleCancelEdit = () => {
+    setIsEditing(false);
+    setEditingName('');
+  };
+
+  // 更新响应内容
+  const updateActiveResponseContent = (content) => {
+    if (activeResponseIndex >= 0) {
+      const currentResponses = getFieldValue('responses') || [];
+      const newResponses = [...currentResponses];
+      newResponses[activeResponseIndex] = {
+        ...newResponses[activeResponseIndex],
+        content
+      };
+      setFieldsValue({ responses: newResponses });
+    }
+  };
+
+  // 格式化JSON内容
+  const formatJsonContent = () => {
+    if (!activeResponse || !activeResponse.content) {
+      message.warning('没有可格式化的JSON内容');
+      return;
+    }
+    
+    try {
+      const parsedJson = JSON.parse(activeResponse.content);
+      const formattedJson = JSON.stringify(parsedJson, null, 2);
+      
+      updateActiveResponseContent(formattedJson);
+      message.success('JSON已格式化');
+    } catch (error) {
+      message.error('无效的JSON格式，无法格式化');
+    }
+  };
+
+  // 预览响应内容
+  const handlePreview = () => {
+    if (!activeResponse) {
+      message.error('未找到有效的响应内容');
+      return;
+    }
+    
+    if (onPreview) {
+      onPreview();
+    }
+  };
+
+  // 如果没有响应数据，显示创建按钮
+  if (!Array.isArray(responses) || responses.length === 0) {
+    return (
+      <Card
+        title={
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <CodeOutlined />
+            <span>响应内容编辑</span>
+          </div>
+        }
+        style={{ marginBottom: 16 }}
+        bodyStyle={{ padding: '16px' }}
+      >
+        <div style={{ 
+          textAlign: 'center', 
+          padding: '40px 20px',
+          background: '#fafafa',
+          borderRadius: '6px',
+          border: '1px dashed #d9d9d9'
+        }}>
+          <FileTextOutlined style={{ fontSize: '32px', color: '#d9d9d9', marginBottom: '12px' }} />
+          <div style={{ color: '#999', marginBottom: '16px' }}>暂无响应数据</div>
+          <Button 
+            type="primary" 
+            icon={<PlusCircleOutlined />} 
+            onClick={handleAddResponse}
+          >
+            创建第一个响应
+          </Button>
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card
+      title={
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <CodeOutlined />
+          <span>响应内容编辑</span>
+          <Badge 
+            count={responses.length} 
+            style={{ backgroundColor: '#52c41a' }} 
+          />
+        </div>
+      }
+      extra={
+        <Space size="small">
+          <Button 
+            type="default" 
+            icon={<PlusCircleOutlined />} 
+            onClick={handleAddResponse}
+            size="small"
+            style={{ 
+              display: 'flex', 
+              alignItems: 'center', 
+              gap: '4px',
+              borderColor: '#1890ff',
+              color: '#1890ff'
+            }}
+          >
+            添加响应
+          </Button>
+          <Button 
+            type="default" 
+            icon={<EyeOutlined />} 
+            onClick={handlePreview}
+            size="small"
+            style={{ 
+              display: 'flex', 
+              alignItems: 'center', 
+              gap: '4px',
+              borderColor: '#52c41a',
+              color: '#52c41a'
+            }}
+          >
+            预览
+          </Button>
+          <Button 
+            type="default" 
+            icon={<FormatPainterOutlined />} 
+            onClick={formatJsonContent}
+            size="small"
+            style={{ 
+              display: 'flex', 
+              alignItems: 'center', 
+              gap: '4px',
+              borderColor: '#fa8c16',
+              color: '#fa8c16'
+            }}
+          >
+            格式化JSON
+          </Button>
+        </Space>
+      }
+      style={{ marginBottom: 16 }}
+      bodyStyle={{ padding: '16px' }}
+    >
+      {/* 响应选择和名称编辑合并区域 */}
+      <div style={{ marginBottom: '16px' }}>
+        <Row gutter={12} align="middle">
+          <Col span={20}>
+            <div style={{ marginBottom: '8px' }}>
+              <label style={{ 
+                fontSize: '12px', 
+                color: '#666', 
+                fontWeight: 'bold' 
+              }}>
+                选择响应 / 编辑名称
+              </label>
+            </div>
+            
+            <div style={{ position: 'relative' }}>
+              {isEditing ? (
+                // 编辑模式：显示输入框
+                <Input.Group compact>
+                  <Input
+                    style={{ width: 'calc(100% - 80px)' }}
+                    value={editingName}
+                    onChange={(e) => setEditingName(e.target.value)}
+                    onPressEnter={handleFinishEdit}
+                    onBlur={handleFinishEdit}
+                    placeholder="输入响应名称"
+                    autoFocus
+                  />
+                  <Button 
+                    style={{ width: '40px' }}
+                    type="primary" 
+                    icon={<CheckCircleOutlined />}
+                    onClick={handleFinishEdit}
+                  />
+                  <Button 
+                    style={{ width: '40px' }}
+                    icon={<DeleteOutlined />}
+                    onClick={handleCancelEdit}
+                  />
+                </Input.Group>
+              ) : (
+                // 选择模式：显示下拉选择器
+                <Input.Group compact>
+                  <Select
+                    style={{ width: 'calc(100% - 40px)' }}
+                    placeholder="选择要编辑的响应"
+                    value={activeResponseId}
+                    onChange={handleResponseSelect}
+                    optionLabelProp="label"
+                  >
+                    {responses.map((resp, index) => (
+                      <Option 
+                        key={resp.id} 
+                        value={resp.id}
+                        label={
+                          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                            <CheckCircleOutlined style={{ color: '#52c41a' }} />
+                            <span>{resp.name || `响应 ${index + 1}`}</span>
+                          </div>
+                        }
+                      >
+                        <div style={{ padding: '4px 0' }}>
+                          <div style={{ 
+                            display: 'flex', 
+                            alignItems: 'center', 
+                            justifyContent: 'space-between',
+                            marginBottom: '4px'
+                          }}>
+                            <span style={{ fontWeight: 'bold' }}>
+                              {resp.name || `响应 ${index + 1}`}
+                            </span>
+                            {resp.id === activeResponseId && (
+                              <Badge status="processing" text="当前选中" />
+                            )}
+                          </div>
+                        </div>
+                      </Option>
+                    ))}
+                  </Select>
+                  <Tooltip title="编辑响应名称">
+                    <Button 
+                      style={{ width: '40px' }}
+                      icon={<EditOutlined />}
+                      onClick={handleStartEdit}
+                      disabled={!activeResponse}
+                    />
+                  </Tooltip>
+                </Input.Group>
+              )}
+            </div>
+          </Col>
+          
+          <Col span={4}>
+            <div style={{ marginBottom: '8px' }}>
+              <label style={{ 
+                fontSize: '12px', 
+                color: '#666', 
+                fontWeight: 'bold' 
+              }}>
+                操作
+              </label>
+            </div>
+            <Tooltip title="删除当前响应">
+              <Button
+                type="text"
+                danger
+                icon={<DeleteOutlined />}
+                onClick={() => activeResponseId && handleDeleteResponse(activeResponseId)}
+                disabled={responses.length <= 1 || !activeResponse}
+                style={{ width: '100%' }}
+              >
+                删除
+              </Button>
+            </Tooltip>
+          </Col>
+        </Row>
+      </div>
+
+      {/* 响应内容编辑区域 */}
+      {activeResponse && (
+        <>
+          <div style={{ marginBottom: '8px' }}>
+            <label style={{ 
+              fontSize: '12px', 
+              color: '#666', 
+              fontWeight: 'bold' 
+            }}>
+              响应内容
+            </label>
+          </div>
+          
+          <div style={{ position: 'relative' }}>
+            <TextArea 
+              rows={12} 
+              placeholder="请输入响应内容..." 
+              style={{ 
+                fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+                fontSize: '13px',
+                lineHeight: '1.5'
+              }}
+              value={activeResponse.content || ''}
+              onChange={(e) => updateActiveResponseContent(e.target.value)}
+            />
+            <div style={{
+              position: 'absolute',
+              top: '8px',
+              right: '8px',
+              background: 'rgba(0, 0, 0, 0.1)',
+              borderRadius: '4px',
+              padding: '2px 6px',
+              fontSize: '11px',
+              color: '#666',
+              pointerEvents: 'none'
+            }}>
+              JSON
+            </div>
+          </div>
+        </>
+      )}
+    </Card>
+  );
+};
+
+export default ResponseContentEditor; 

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

@@ -0,0 +1,36 @@
+// 常量定义文件
+export const contentTypes = [
+  { value: 'application/json; charset=utf-8', label: 'JSON' },
+  { value: 'text/plain; charset=utf-8', label: '纯文本' },
+  { value: 'text/html; charset=utf-8', label: 'HTML' },
+  { value: 'application/xml; charset=utf-8', label: 'XML' },
+  { value: 'application/javascript; charset=utf-8', label: 'JavaScript' },
+];
+
+export const proxyTypes = [
+  { value: 'response', label: '模拟响应' },
+  { value: 'redirect', label: '重定向' },
+  { value: 'url_redirect', label: 'URL重定向' },
+];
+
+export const statusCodes = [
+  { value: '200', label: '200 OK' },
+  { value: '201', label: '201 Created' },
+  { value: '204', label: '204 No Content' },
+  { value: '400', label: '400 Bad Request' },
+  { value: '401', label: '401 Unauthorized' },
+  { value: '403', label: '403 Forbidden' },
+  { value: '404', label: '404 Not Found' },
+  { value: '500', label: '500 Internal Server Error' },
+];
+
+export const httpMethods = [
+  { value: 'ALL', label: '所有方法' },
+  { value: 'GET', label: 'GET' },
+  { value: 'POST', label: 'POST' },
+  { value: 'PUT', label: 'PUT' },
+  { value: 'DELETE', label: 'DELETE' },
+  { value: 'PATCH', label: 'PATCH' },
+  { value: 'HEAD', label: 'HEAD' },
+  { value: 'OPTIONS', label: 'OPTIONS' },
+]; 

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

@@ -0,0 +1,6 @@
+// 统一导出接口管理相关的组件
+export { default as ResponseContentEditor } from './ResponseContentEditor';
+export { default as InterfaceTestModal } from './InterfaceTestModal';
+export { default as PreviewModal } from './PreviewModal';
+export * from './constants';
+export * from './utils'; 

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

@@ -0,0 +1,103 @@
+import axios from 'axios';
+import { v4 as uuidv4 } from 'uuid';
+
+// 清理JSON响应
+export const cleanJsonResponse = (jsonStr) => {
+  try {
+    const parsed = JSON.parse(jsonStr);
+    return JSON.stringify(parsed);
+  } catch (e) {
+    return jsonStr;
+  }
+};
+
+// 验证URL是否合法
+export const isValidUrl = (url) => {
+  if (!url) return false;
+  
+  try {
+    new URL(url);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+// 缓存刷新服务
+export const flushCache = async () => {
+  try {
+    const response = await axios.get('/_flush_cache');
+    return response.data;
+  } catch (error) {
+    console.error('刷新缓存失败:', error);
+    throw error;
+  }
+};
+
+// 更新成功后刷新缓存
+export const refreshCacheAfterUpdate = async () => {
+  try {
+    await flushCache();
+    // 这里不需要显示提示，因为主要操作会有自己的提示
+  } catch (error) {
+    // 如果刷新缓存失败，记录错误但不影响用户体验
+    console.error('刷新缓存失败，可能需要等待缓存自动过期:', error);
+  }
+};
+
+// 检查 URL 是否匹配模式
+export 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;
+  }
+};
+
+// 格式化响应内容
+export const formatResponseContent = (content, contentType) => {
+  if (contentType && contentType.includes('json')) {
+    try {
+      const parsed = JSON.parse(content);
+      return JSON.stringify(parsed, null, 2);
+    } catch (e) {
+      return content;
+    }
+  }
+  return content;
+};
+
+// 生成唯一的响应ID
+export const generateResponseId = () => {
+  return uuidv4();
+};