whistle.mock-plugins 1.2.0-beta.13 → 1.2.0-beta.15

package/package.json

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

package/ui/src/pages/InterfaceManagement.js

@@ -9,7 +9,7 @@ import {
 import { 
   PlusOutlined, EditOutlined, DeleteOutlined, 
   FileTextOutlined, PlusCircleOutlined, SettingOutlined,
-  SearchOutlined, FilterOutlined, ReloadOutlined
+  SearchOutlined, FilterOutlined, ReloadOutlined, CopyOutlined
 } from '@ant-design/icons';
 import '../styles/interface-management.css';
 import axios from 'axios';
@@ -68,6 +68,7 @@ const InterfaceManagement = () => {
   // 模态框状态
   const [modalVisible, setModalVisible] = useState(false);
   const [previewVisible, setPreviewVisible] = useState(false);
+  const [isDuplicateMode, setIsDuplicateMode] = useState(false);
   
   // 列配置状态
   const [columnConfigVisible, setColumnConfigVisible] = useState(false);
@@ -247,6 +248,7 @@ const InterfaceManagement = () => {
       return;
     }
     form.resetFields();
+    setIsDuplicateMode(false);
     
     // 创建默认响应
     const defaultResponseId = generateResponseId();
@@ -286,6 +288,7 @@ const InterfaceManagement = () => {
     
     // 重置表单
     form.resetFields();
+    setIsDuplicateMode(false);
     
     // 处理响应数据
     let responses = [];
@@ -345,6 +348,91 @@ const InterfaceManagement = () => {
     setModalVisible(true);
   };
 
+  // 复制新增接口
+  const handleDuplicate = (record) => {
+    if (!selectedFeatureId) {
+      message.warning('请先选择一个功能模块');
+      return;
+    }
+    if (!record) {
+      message.warning('接口数据不完整，无法复制');
+      return;
+    }
+
+    form.resetFields();
+
+    // 深拷贝源数据
+    const source = JSON.parse(JSON.stringify(record));
+
+    // 处理响应数据
+    let responses = [];
+    let activeResponseId = '';
+
+    if (Array.isArray(source.responses) && source.responses.length > 0) {
+      // 为每条响应生成新的ID，并重映射activeResponseId
+      const idMap = new Map();
+      responses = source.responses.map((resp) => {
+        const newId = generateResponseId();
+        idMap.set(resp.id, newId);
+        return {
+          id: newId,
+          name: resp.name || '未命名响应',
+          description: resp.description || '',
+          content: resp.content || '{}'
+        };
+      });
+      const mapped = idMap.get(source.activeResponseId) || responses[0]?.id;
+      activeResponseId = mapped || '';
+    } else if (source.responseContent) {
+      // 兼容旧数据格式
+      const defaultResponseId = generateResponseId();
+      responses = [{
+        id: defaultResponseId,
+        name: '默认响应',
+        description: '',
+        content: source.responseContent
+      }];
+      activeResponseId = defaultResponseId;
+    }
+
+    // 处理自定义请求头 -> 表单需要的数组结构
+    let headerItems = [];
+    if (source.headers && typeof source.headers === 'object') {
+      headerItems = Object.entries(source.headers).map(([headerName, headerValue]) => ({
+        headerName,
+        headerValue
+      }));
+    }
+
+    // 分组值保证为字符串
+    let groupValue = source.group;
+    if (Array.isArray(groupValue)) {
+      groupValue = groupValue.length > 0 ? groupValue[0] : undefined;
+    }
+
+    // 设定表单初值
+    form.setFieldsValue({
+      name: `${source.name || '未命名接口'} - 副本`,
+      group: groupValue || undefined,
+      pattern: source.urlPattern,
+      proxyType: source.proxyType || 'response',
+      statusCode: (source.httpStatus || source.statusCode || 200).toString(),
+      contentType: source.contentType || 'application/json; charset=utf-8',
+      responses,
+      activeResponseId,
+      httpMethod: source.httpMethod || source.method || 'ALL',
+      targetUrl: source.targetUrl || '',
+      headerItems,
+      paramMatchers: Array.isArray(source.paramMatchers) ? source.paramMatchers : [],
+      responseDelay: source.responseDelay ? String(source.responseDelay) : '0'
+    });
+
+    setCurrentResponseId(activeResponseId || null);
+    setEditingInterface(null); // 新增模式
+    setIsDuplicateMode(true);
+    setModalVisible(true);
+  };
+
   const handleDeleteInterface = async (id) => {
     try {
       const response = await axios.delete(`/cgi-bin/interfaces?id=${id}`);
@@ -430,13 +518,11 @@ const InterfaceManagement = () => {
         interfaceData.headers = headers;
       }
       
-      // 添加参数匹配规则
-      if (values.paramMatchers && Array.isArray(values.paramMatchers) && values.paramMatchers.length > 0) {
-        // 过滤掉空的匹配规则
-        interfaceData.paramMatchers = values.paramMatchers.filter(matcher => 
-          matcher && matcher.paramPath && matcher.paramValue
-        );
-      }
+      // 添加参数匹配规则（始终发送，空数组用于清空后端旧值）
+      const filteredParamMatchers = Array.isArray(values.paramMatchers)
+        ? values.paramMatchers.filter(matcher => matcher && matcher.paramPath && matcher.paramValue)
+        : [];
+      interfaceData.paramMatchers = filteredParamMatchers;
       
       console.log('提交接口数据:', interfaceData);
       
@@ -477,6 +563,7 @@ const InterfaceManagement = () => {
 
   const handleCancel = () => {
     setModalVisible(false);
+    setIsDuplicateMode(false);
   };
 
   const handleSelectFeature = (featureId) => {
@@ -906,7 +993,7 @@ const InterfaceManagement = () => {
     {
       title: '操作',
       key: 'action',
-      width: 180,
+      width: 220,
       render: (_, record) => (
         <div className="action-buttons">
           <Button 
@@ -914,6 +1001,13 @@ const InterfaceManagement = () => {
             icon={<EditOutlined />} 
             onClick={() => handleEditInterface(record)}
           />
+          <Tooltip title="复制新增">
+            <Button 
+              type="text" 
+              icon={<CopyOutlined />} 
+              onClick={() => handleDuplicate(record)}
+            />
+          </Tooltip>
           <Popconfirm
             title="确定要删除此接口吗？"
             onConfirm={() => handleDeleteInterface(record.id)}
@@ -1253,7 +1347,7 @@ const InterfaceManagement = () => {
 
         {/* 接口编辑/创建模态框 */}
         <Modal
-          title={editingInterface ? '编辑接口' : '添加接口'}
+          title={editingInterface ? '编辑接口' : (isDuplicateMode ? '复制新增接口' : '添加接口')}
           open={modalVisible}
           onOk={handleSubmit}
           onCancel={handleCancel}

package/ui/src/pages/InterfaceManagementV2.js

@@ -15,7 +15,7 @@ import {
 import { 
   PlusOutlined, EditOutlined, DeleteOutlined, 
   FileTextOutlined, PlusCircleOutlined, SettingOutlined,
-  SearchOutlined, FilterOutlined, ReloadOutlined, DownOutlined, QuestionCircleOutlined
+  SearchOutlined, FilterOutlined, ReloadOutlined, DownOutlined, QuestionCircleOutlined, CopyOutlined
 } from '@ant-design/icons';
 import '../styles/interface-management.css';
 import axios from 'axios';
@@ -74,6 +74,7 @@ const InterfaceManagement = () => {
   // 模态框状态
   const [modalVisible, setModalVisible] = useState(false);
   const [previewVisible, setPreviewVisible] = useState(false);
+  const [isDuplicateMode, setIsDuplicateMode] = useState(false);
   
   // 列配置状态
   const [columnConfigVisible, setColumnConfigVisible] = useState(false);
@@ -253,6 +254,7 @@ const InterfaceManagement = () => {
       return;
     }
     form.resetFields();
+    setIsDuplicateMode(false);
     
     // 创建默认响应
     const defaultResponseId = generateResponseId();
@@ -292,6 +294,7 @@ const InterfaceManagement = () => {
     
     // 重置表单
     form.resetFields();
+    setIsDuplicateMode(false);
     
     // 处理响应数据
     let responses = [];
@@ -351,6 +354,91 @@ const InterfaceManagement = () => {
     setModalVisible(true);
   };
 
+  // 复制新增接口
+  const handleDuplicate = (record) => {
+    if (!selectedFeatureId) {
+      message.warning('请先选择一个功能模块');
+      return;
+    }
+    if (!record) {
+      message.warning('接口数据不完整，无法复制');
+      return;
+    }
+
+    form.resetFields();
+
+    // 深拷贝源数据
+    const source = JSON.parse(JSON.stringify(record));
+
+    // 处理响应数据
+    let responses = [];
+    let activeResponseId = '';
+
+    if (Array.isArray(source.responses) && source.responses.length > 0) {
+      // 为每条响应生成新的ID，并重映射activeResponseId
+      const idMap = new Map();
+      responses = source.responses.map((resp) => {
+        const newId = generateResponseId();
+        idMap.set(resp.id, newId);
+        return {
+          id: newId,
+          name: resp.name || '未命名响应',
+          description: resp.description || '',
+          content: resp.content || '{}'
+        };
+      });
+      const mapped = idMap.get(source.activeResponseId) || responses[0]?.id;
+      activeResponseId = mapped || '';
+    } else if (source.responseContent) {
+      // 兼容旧数据格式
+      const defaultResponseId = generateResponseId();
+      responses = [{
+        id: defaultResponseId,
+        name: '默认响应',
+        description: '',
+        content: source.responseContent
+      }];
+      activeResponseId = defaultResponseId;
+    }
+
+    // 处理自定义请求头 -> 表单需要的数组结构
+    let headerItems = [];
+    if (source.headers && typeof source.headers === 'object') {
+      headerItems = Object.entries(source.headers).map(([headerName, headerValue]) => ({
+        headerName,
+        headerValue
+      }));
+    }
+
+    // 分组值保证为字符串
+    let groupValue = source.group;
+    if (Array.isArray(groupValue)) {
+      groupValue = groupValue.length > 0 ? groupValue[0] : undefined;
+    }
+
+    // 设定表单初值
+    form.setFieldsValue({
+      name: `${source.name || '未命名接口'} - 副本`,
+      group: groupValue || undefined,
+      pattern: source.urlPattern,
+      proxyType: source.proxyType || 'response',
+      statusCode: (source.httpStatus || source.statusCode || 200).toString(),
+      contentType: source.contentType || 'application/json; charset=utf-8',
+      responses,
+      activeResponseId,
+      httpMethod: source.httpMethod || source.method || 'ALL',
+      targetUrl: source.targetUrl || '',
+      headerItems,
+      paramMatchers: Array.isArray(source.paramMatchers) ? source.paramMatchers : [],
+      responseDelay: source.responseDelay ? String(source.responseDelay) : '0'
+    });
+
+    setCurrentResponseId(activeResponseId || null);
+    setEditingInterface(null); // 新增模式
+    setIsDuplicateMode(true);
+    setModalVisible(true);
+  };
+
   const handleDeleteInterface = async (id) => {
     try {
       const response = await axios.delete(`/cgi-bin/interfaces?id=${id}`);
@@ -436,13 +524,11 @@ const InterfaceManagement = () => {
         interfaceData.headers = headers;
       }
       
-      // 添加参数匹配规则
-      if (values.paramMatchers && Array.isArray(values.paramMatchers) && values.paramMatchers.length > 0) {
-        // 过滤掉空的匹配规则
-        interfaceData.paramMatchers = values.paramMatchers.filter(matcher => 
-          matcher && matcher.paramPath && matcher.paramValue
-        );
-      }
+      // 添加参数匹配规则（始终发送，空数组用于清空后端旧值）
+      const filteredParamMatchers = Array.isArray(values.paramMatchers)
+        ? values.paramMatchers.filter(matcher => matcher && matcher.paramPath && matcher.paramValue)
+        : [];
+      interfaceData.paramMatchers = filteredParamMatchers;
       
       console.log('提交接口数据:', interfaceData);
       
@@ -483,6 +569,7 @@ const InterfaceManagement = () => {
 
   const handleCancel = () => {
     setModalVisible(false);
+    setIsDuplicateMode(false);
   };
 
   const handleSelectFeature = (featureId) => {
@@ -912,7 +999,7 @@ const InterfaceManagement = () => {
     {
       title: '操作',
       key: 'action',
-      width: 180,
+      width: 220,
       render: (_, record) => (
         <div className="action-buttons">
           <Button 
@@ -920,6 +1007,13 @@ const InterfaceManagement = () => {
             icon={<EditOutlined />} 
             onClick={() => handleEditInterface(record)}
           />
+          <Tooltip title="复制新增">
+            <Button 
+              type="text" 
+              icon={<CopyOutlined />} 
+              onClick={() => handleDuplicate(record)}
+            />
+          </Tooltip>
           <Popconfirm
             title="确定要删除此接口吗？"
             onConfirm={() => handleDeleteInterface(record.id)}
@@ -1272,7 +1366,7 @@ const InterfaceManagement = () => {
               alignItems: 'center',
               gap: '8px'
             }}>
-              <span>{editingInterface ? '编辑接口' : '添加接口'}</span>
+              <span>{editingInterface ? '编辑接口' : (isDuplicateMode ? '复制新增接口' : '添加接口')}</span>
               <Badge 
                 count="配置向导" 
                 style={{