whistle.mock-plugins 1.1.1-beta.7 → 1.1.1-dev.10

package/ui/src/pages/InterfaceManagement.js

@@ -4,7 +4,7 @@ import AppLayout from '../components/AppLayout';
 import { 
   Table, Button, Modal, Form, Input, Select, message, Switch, 
   Popconfirm, Alert, Space, Card, Badge, Tooltip, Row, Col,
-  Popover, Checkbox 
+  Popover, Checkbox, Tag 
 } from 'antd';
 import { 
   PlusOutlined, EditOutlined, DeleteOutlined, 
@@ -32,9 +32,11 @@ const { Option } = Select;
 const COLUMN_CONFIG = [
   { key: 'active', title: '状态', required: true },
   { key: 'name', title: '名称', required: true },
+  { key: 'group', title: '分组', required: false },
   { key: 'urlPattern', title: 'URL匹配规则', required: false },
   { key: 'proxyType', title: '处理方式', required: false },
   { key: 'currentResponse', title: '当前响应', required: false },
+  { key: 'responseDelay', title: '延迟(毫秒)', required: false },
   { key: 'httpStatus', title: '状态码', required: false },
   { key: 'contentType', title: '内容类型', required: false },
   { key: 'targetUrl', title: '目标URL', required: false },
@@ -56,6 +58,11 @@ const InterfaceManagement = () => {
   const [interfacesLoading, setInterfacesLoading] = useState(false);
   const [selectedFeatureId, setSelectedFeatureId] = useState(null);
   
+  // 分组状态
+  const [groups, setGroups] = useState([]);
+  const [selectedGroup, setSelectedGroup] = useState(null);
+  const [groupActionLoading, setGroupActionLoading] = useState(false);
+  
   // 模态框状态
   const [modalVisible, setModalVisible] = useState(false);
   const [previewVisible, setPreviewVisible] = useState(false);
@@ -165,6 +172,9 @@ const InterfaceManagement = () => {
         
         setInterfaces(processedInterfaces);
         console.log('处理后的接口列表:', processedInterfaces);
+        
+        // 提取并更新分组列表
+        updateGroups(processedInterfaces);
       } else {
         console.warn('接口数据格式不正确:', response.data);
         setInterfaces([]);
@@ -178,6 +188,41 @@ const InterfaceManagement = () => {
       setInterfacesLoading(false);
     }
   };
+  
+  // 提取并更新分组列表
+  const updateGroups = (interfaces) => {
+    // 从接口列表中提取所有分组
+    const groupSet = new Set();
+    interfaces.forEach(item => {
+      if (item.group) {
+        groupSet.add(item.group);
+      }
+    });
+    
+    // 转换为数组并排序
+    const groupArray = Array.from(groupSet).sort();
+    setGroups(groupArray);
+    
+    // 如果当前选中的分组不在列表中，重置选中的分组
+    if (selectedGroup && !groupArray.includes(selectedGroup)) {
+      setSelectedGroup(null);
+    }
+  };
+  
+  // 根据分组筛选接口
+  const getFilteredInterfaces = () => {
+    // 首先按功能模块筛选
+    const featureFiltered = interfaces.filter(item => 
+      !selectedFeatureId || item.featureId === selectedFeatureId
+    );
+    
+    // 然后按分组筛选
+    if (selectedGroup) {
+      return featureFiltered.filter(item => item.group === selectedGroup);
+    }
+    
+    return featureFiltered;
+  };
 
   const handleAddInterface = () => {
     if (!selectedFeatureId) {
@@ -214,77 +259,63 @@ const InterfaceManagement = () => {
   };
 
   const handleEditInterface = (record) => {
-    console.log('开始编辑接口:', record.name, '原始数据:', record);
-    setEditingInterface(record);
-    
-    // 将自定义请求头转换为数组格式，用于动态表单项
-    let headersArray = [];
-    if (record.customHeaders && typeof record.customHeaders === 'object') {
-      headersArray = Object.entries(record.customHeaders).map(([key, value]) => ({
-        headerName: key,
-        headerValue: value
-      }));
-    }
-
-    // 处理参数匹配规则，转换为数组格式
-    let paramMatchersArray = [];
-    if (record.paramMatchers && Array.isArray(record.paramMatchers)) {
-      paramMatchersArray = record.paramMatchers.map(matcher => ({
-        paramPath: matcher.paramPath || '',
-        paramValue: matcher.paramValue || '',
-        matchType: matcher.matchType || 'exact'
-      }));
+    if (!record) {
+      message.warning('接口数据不完整，无法编辑');
+      return;
     }
-
-    // 处理多响应数据
-    let initialResponses = [];
-    let initialResponseId = null;
-
-    // 深拷贝记录中的响应数据，避免引用问题
+    
+    console.log('编辑接口:', record);
+    
+    // 重置表单
+    form.resetFields();
+    
+    // 处理响应数据
+    let responses = [];
+    let activeResponseId = '';
+    
     if (record.responses && Array.isArray(record.responses) && record.responses.length > 0) {
-      console.log('使用现有响应数据, 数量:', record.responses.length);
-      
-      initialResponses = JSON.parse(JSON.stringify(record.responses));
-      initialResponseId = record.activeResponseId || record.responses[0].id;
-      
-      // 确保每个响应都有名称
-      initialResponses = initialResponses.map((resp, index) => ({
-        id: resp.id || generateResponseId(),
-        name: resp.name || `响应 ${index + 1}`,
-        description: resp.description || '',
-        content: resp.content || '{}'
-      }));
+      responses = record.responses;
+      activeResponseId = record.activeResponseId || responses[0].id;
     } else if (record.responseContent) {
-      // 向后兼容：如果只有传统的 responseContent 字段，创建一个默认响应
-      console.log('创建默认响应，使用responseContent字段');
+      // 兼容旧数据格式，创建默认响应
       const defaultResponseId = generateResponseId();
-      initialResponses = [
-        {
-          id: defaultResponseId,
-          name: '默认响应',
-          description: '',
-          content: record.responseContent
-        }
-      ];
-      initialResponseId = defaultResponseId;
+      responses = [{
+        id: defaultResponseId,
+        name: '默认响应',
+        description: '',
+        content: record.responseContent
+      }];
+      activeResponseId = defaultResponseId;
     }
     
-    console.log('编辑接口，设置响应数据:', initialResponses);
-    setCurrentResponseId(initialResponseId);
+    // 处理自定义请求头
+    let headerItems = [];
+    if (record.headers && typeof record.headers === 'object') {
+      headerItems = Object.entries(record.headers).map(([headerName, headerValue]) => ({
+        headerName,
+        headerValue
+      }));
+    }
     
+    // 设置表单值
     form.setFieldsValue({
       name: record.name,
+      group: record.group || '',
       pattern: record.urlPattern,
       proxyType: record.proxyType || 'response',
-      statusCode: record.httpStatus?.toString() || '200',
+      statusCode: (record.httpStatus || record.statusCode || 200).toString(),
       contentType: record.contentType || 'application/json; charset=utf-8',
-      responses: initialResponses,
-      activeResponseId: initialResponseId,
-      httpMethod: record.httpMethod || 'ALL',
+      responses,
+      activeResponseId,
+      httpMethod: record.httpMethod || record.method || 'ALL',
       targetUrl: record.targetUrl || '',
-      headerItems: headersArray, // 使用数组存储表单项
-      paramMatchers: paramMatchersArray
+      headerItems,
+      paramMatchers: record.paramMatchers || [],
+      responseDelay: record.responseDelay ? record.responseDelay.toString() : '0'
     });
+    
+    setCurrentResponseId(activeResponseId);
+    setEditingInterface(record);
     setModalVisible(true);
   };
 
@@ -308,12 +339,15 @@ const InterfaceManagement = () => {
 
   const handleToggleActive = async (id, currentActive) => {
     try {
-      const response = await axios.patch(`/cgi-bin/interfaces?id=${id}`, {
+      const response = await axios.patch(`/cgi-bin/interfaces/${id}`, {
         active: !currentActive
       });
       if (response.data && response.data.code === 0) {
         message.success(`接口${!currentActive ? '启用' : '禁用'}成功`);
         fetchInterfaces();
+        
+        // 刷新规则缓存
+        refreshCacheAfterUpdate();
       } else {
         throw new Error(response.data?.message || `接口${!currentActive ? '启用' : '禁用'}失败`);
       }
@@ -325,174 +359,81 @@ const InterfaceManagement = () => {
 
   const handleSubmit = async () => {
     try {
+      // 表单验证
       const values = await form.validateFields();
-      console.log('=== 开始表单提交 ===');
-      console.log('表单提交，原始值:', JSON.stringify(values, null, 2));
-      
-      // 获取当前激活的响应ID和所有响应
-      const activeResponseId = values.activeResponseId;
-      let responses = values.responses || [];
-      
-      console.log('提取的原始响应数据:', responses);
-      console.log('响应数据类型:', typeof responses);
-      console.log('是否为数组:', Array.isArray(responses));
+      console.log('表单提交数据:', values);
       
-      // 确保responses是数组格式
-      if (!Array.isArray(responses)) {
-        console.log('响应数据不是数组，尝试解析...');
-        try {
-          if (typeof responses === 'string') {
-            responses = JSON.parse(responses);
-            if (!Array.isArray(responses)) {
-              responses = [];
-            }
-          } else {
-            responses = [];
+      // 处理自定义请求头
+      let headers = {};
+      if (values.headerItems && Array.isArray(values.headerItems)) {
+        values.headerItems.forEach(item => {
+          if (item && item.headerName) {
+            headers[item.headerName] = item.headerValue;
           }
-    } catch (e) {
-          console.error('解析响应数据失败:', e);
-          responses = [];
-    }
-      }
-      
-      console.log('处理前的响应数据:', JSON.stringify(responses, null, 2));
-
-      // 确保每个响应都有名称、描述和内容
-      const cleanedResponses = responses.map((resp, index) => {
-        console.log(`处理响应 ${index}:`, resp);
-        const cleaned = {
-          id: resp.id || generateResponseId(),
-          name: resp.name || `响应 ${index + 1}`,
-          description: resp.description || '',
-          content: resp.content || '{}'
-        };
-        console.log(`处理后的响应 ${index}:`, cleaned);
-        return cleaned;
-      });
-
-      // 如果没有响应，创建一个默认响应
-      if (cleanedResponses.length === 0) {
-        console.log('没有响应数据，创建默认响应');
-        const defaultId = generateResponseId();
-        cleanedResponses.push({
-          id: defaultId,
-          name: '默认响应',
-          description: '',
-          content: '{\n  "code": 0,\n  "message": "success",\n  "data": {}\n}'
         });
-        setCurrentResponseId(defaultId);
       }
       
-      // 确保有一个激活的响应ID
-      const validActiveResponseId = activeResponseId && cleanedResponses.some(r => r.id === activeResponseId) 
-        ? activeResponseId 
-        : cleanedResponses[0].id;
-      
-      // 获取激活的响应
-      const activeResponse = cleanedResponses.find(r => r.id === validActiveResponseId) || cleanedResponses[0];
-      
-      console.log('=== 清理后的响应数据 ===');
-      console.log('清理后的响应数据:', JSON.stringify(cleanedResponses, null, 2));
-      console.log('激活的响应ID:', validActiveResponseId);
-      console.log('激活的响应:', activeResponse);
-      
-      // 检查responseBody是否是有效的JSON
-      if (values.proxyType === 'response' && values.contentType.includes('application/json')) {
-        cleanedResponses.forEach(response => {
-        try {
-            if (response.content) {
-              JSON.parse(response.content);
-            }
-        } catch (e) {
-            message.error(`响应 "${response.name}" 不是有效的JSON格式`);
-            throw new Error(`响应 "${response.name}" 不是有效的JSON格式`);
-        }
-        });
-      }
-      
-      // 处理自定义请求头，将表单项数组转换为对象格式
-      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 || '';
-            }
-          });
-        }
-      }
-
-      // 处理参数匹配规则，清理无效的规则
-      let paramMatchers = [];
-      if (values.proxyType === 'response' && values.paramMatchers && values.paramMatchers.length > 0) {
-        paramMatchers = values.paramMatchers
-          .filter(item => item && item.paramPath && item.paramPath.trim() && item.paramValue !== undefined)
-          .map(item => ({
-            paramPath: item.paramPath.trim(),
-            paramValue: item.paramValue,
-            matchType: item.matchType || 'exact'
-          }));
-      }
-
-      console.log('=== 参数匹配规则处理 ===');
-      console.log('原始参数匹配规则:', values.paramMatchers);
-      console.log('清理后的参数匹配规则:', paramMatchers);
-
+      // 构建接口数据
       const interfaceData = {
         name: values.name,
-        featureId: selectedFeatureId,
+        group: values.group,
         urlPattern: values.pattern,
         proxyType: values.proxyType,
-        // 同时保存所有响应和当前活跃的响应
-        responses: cleanedResponses,
-        activeResponseId: validActiveResponseId,
-        // 兼容性保留：将当前活跃响应的内容保存到 responseContent
-        responseContent: activeResponse ? activeResponse.content : '',
-        targetUrl: (values.proxyType === 'redirect' || values.proxyType === 'url_redirect') ? values.targetUrl : '',
-        customHeaders: (values.proxyType === 'redirect' || values.proxyType === 'url_redirect') ? customHeaders : {},
-        paramMatchers: paramMatchers, // 添加参数匹配规则
+        featureId: selectedFeatureId,
+        responses: values.responses,
+        activeResponseId: values.activeResponseId,
         httpStatus: parseInt(values.statusCode, 10), // 转换为数字
         contentType: values.contentType,
-        responseDelay: 0,
+        responseDelay: parseInt(values.responseDelay, 10) || 0,
         httpMethod: values.httpMethod,
         active: true
       };
       
-      console.log('=== 最终提交的接口数据 ===');
-      console.log('提交的接口数据:', JSON.stringify(interfaceData, null, 2));
+      // 根据代理类型添加不同字段
+      if (values.proxyType === 'redirect' || values.proxyType === 'url_redirect') {
+        interfaceData.targetUrl = values.targetUrl;
+        interfaceData.headers = headers;
+      }
       
-      let response;
-      if (editingInterface) {
-        // 更新现有接口
-        console.log('执行接口更新，ID:', editingInterface.id);
-        response = await axios.put(`/cgi-bin/interfaces?id=${editingInterface.id}`, interfaceData);
-      } else {
-        // 创建新接口
-        console.log('执行接口创建');
-        response = await axios.post('/cgi-bin/interfaces', interfaceData);
+      // 添加参数匹配规则
+      if (values.paramMatchers && Array.isArray(values.paramMatchers) && values.paramMatchers.length > 0) {
+        // 过滤掉空的匹配规则
+        interfaceData.paramMatchers = values.paramMatchers.filter(matcher => 
+          matcher && matcher.paramPath && matcher.paramValue
+        );
       }
-
-      console.log('服务器响应:', response.data);
-
-      if (response.data && response.data.code === 0) {
-        console.log('=== 接口操作成功 ===');
-        message.success(editingInterface ? '接口更新成功' : '接口创建成功');
-        setModalVisible(false);
-        fetchInterfaces();
-        
-        // 刷新规则缓存
-        refreshCacheAfterUpdate();
+      
+      console.log('提交接口数据:', interfaceData);
+      
+      if (editingInterface) {
+        // 更新接口
+        const response = await axios.put(`/cgi-bin/interfaces?id=${editingInterface.id}`, interfaceData);
+        if (response.data && response.data.code === 0) {
+          message.success('接口更新成功');
+          setModalVisible(false);
+          fetchInterfaces();
+          
+          // 刷新规则缓存
+          refreshCacheAfterUpdate();
+        } else {
+          throw new Error(response.data?.message || '接口更新失败');
+        }
       } else {
-        throw new Error(response.data?.message || '操作失败');
+        // 创建接口
+        const response = await axios.post('/cgi-bin/interfaces', interfaceData);
+        if (response.data && response.data.code === 0) {
+          message.success('接口创建成功');
+          setModalVisible(false);
+          fetchInterfaces();
+          
+          // 刷新规则缓存
+          refreshCacheAfterUpdate();
+        } else {
+          throw new Error(response.data?.message || '接口创建失败');
+        }
       }
     } catch (error) {
-      if (error.message && error.message.includes('JSON格式')) {
-        // 已经显示了错误信息，不需要再显示
-        return;
-      }
-      console.error('=== 接口操作失败 ===');
-      console.error('操作失败:', error);
+      console.error('表单提交失败:', error);
       message.error(error.response?.data?.message || error.message || '操作失败');
     }
   };
@@ -568,9 +509,7 @@ const InterfaceManagement = () => {
     }
   };
 
-  const filteredInterfaces = interfaces.filter(item => 
-    !selectedFeatureId || item.featureId === selectedFeatureId
-  );
+  const filteredInterfaces = getFilteredInterfaces();
 
   // 处理表格变化（排序、分页）
   const handleTableChange = (pagination, filters, sorter) => {
@@ -620,15 +559,11 @@ const InterfaceManagement = () => {
       dataIndex: 'active',
       key: 'active',
       width: 80,
-      sorter: (a, b) => {
-        // true排在前面，false排在后面
-        return Number(b.active) - Number(a.active);
-      },
-      sortDirections: ['descend', 'ascend'],
       render: (active, record) => (
         <Switch
-          checked={active}
+          checked={active !== false}
           onChange={() => handleToggleActive(record.id, active)}
+          size="small"
         />
       ),
     },
@@ -636,113 +571,115 @@ const InterfaceManagement = () => {
       title: '名称',
       dataIndex: 'name',
       key: 'name',
-      ellipsis: true,
-      sorter: (a, b) => a.name.localeCompare(b.name, 'zh-CN'),
-      sortDirections: ['ascend', 'descend'],
+      sorter: (a, b) => a.name.localeCompare(b.name),
+      render: (text) => <span className="interface-name">{text}</span>,
+    },
+    {
+      title: '分组',
+      dataIndex: 'group',
+      key: 'group',
+      width: 120,
+      sorter: (a, b) => {
+        const groupA = a.group || '';
+        const groupB = b.group || '';
+        return groupA.localeCompare(groupB);
+      },
+      render: (group) => {
+        if (!group) {
+          return <span style={{ color: '#999', fontStyle: 'italic' }}>未分组</span>;
+        }
+        return (
+          <Tag color="blue" style={{ cursor: 'pointer' }} onClick={() => setSelectedGroup(group)}>
+            {group}
+          </Tag>
+        );
+      },
     },
     {
       title: 'URL匹配规则',
       dataIndex: 'urlPattern',
       key: 'urlPattern',
       ellipsis: true,
-      sorter: (a, b) => a.urlPattern.localeCompare(b.urlPattern),
-      sortDirections: ['ascend', 'descend'],
+      render: (text) => <span className="url-pattern">{text}</span>,
     },
     {
       title: '处理方式',
       dataIndex: 'proxyType',
       key: 'proxyType',
       width: 120,
-      sorter: (a, b) => {
-        const aType = a.proxyType || 'response';
-        const bType = b.proxyType || 'response';
-        return aType.localeCompare(bType);
-      },
-      sortDirections: ['ascend', 'descend'],
       render: (text) => {
-        const found = proxyTypes.find(item => item.value === text);
-        return found ? found.label : text || '模拟响应';
-      }
+        const proxyType = proxyTypes.find(item => item.value === text);
+        return (
+          <Badge 
+            color={proxyType?.color || '#999'} 
+            text={proxyType?.label || text} 
+          />
+        );
+      },
     },
     {
       title: '当前响应',
-      dataIndex: 'responses',
+      dataIndex: 'activeResponseId',
       key: 'currentResponse',
-      width: 160,
-      render: (responses, record) => {
-        // 仅在模拟响应类型时显示
-        if (record.proxyType !== 'response') {
-          return '-';
-        }
-        
-        // 如果没有响应数据
-        if (!responses || !Array.isArray(responses) || responses.length === 0) {
-          return <span style={{ color: '#999' }}>无响应数据</span>;
+      width: 180,
+      render: (activeResponseId, record) => {
+        // 如果没有响应数据，返回空
+        if (!record.responses || !Array.isArray(record.responses) || record.responses.length === 0) {
+          return <span className="no-response">无响应数据</span>;
         }
         
-        // 如果只有一个响应，直接显示名称
-        if (responses.length === 1) {
-          return (
-            <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-              <span>{responses[0].name || '默认响应'}</span>
-              <Badge count="1" style={{ backgroundColor: '#52c41a' }} />
-            </div>
-          );
-        }
+        // 找到当前激活的响应
+        const activeResponse = record.responses.find(resp => resp.id === activeResponseId);
         
-        // 多个响应时显示选择器
-        const activeResponse = responses.find(r => r.id === record.activeResponseId) || responses[0];
+        // 如果没有找到激活的响应，使用第一个
+        const currentResponse = activeResponse || record.responses[0];
         
         return (
-          <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-            <Select
-              size="small"
-              value={record.activeResponseId || activeResponse.id}
-              onChange={(responseId) => handleResponseSwitch(record.id, responseId)}
-              style={{ width: '110px' }}
-              optionLabelProp="label"
-              disabled={record.active === false}
-            >
-              {responses.map(resp => (
-                <Option 
-                  key={resp.id} 
-                  value={resp.id} 
-                  label={resp.name || '未命名'}
-                >
-                  <Tooltip title={resp.description || resp.name}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-                      <span>{resp.name || '未命名'}</span>
-                      {resp.id === (record.activeResponseId || activeResponse.id) && (
-                        <Badge status="processing" />
-                      )}
-                    </div>
-                  </Tooltip>
-                </Option>
-              ))}
-            </Select>
-            <Badge 
-              count={responses.length} 
-              style={{ backgroundColor: '#1890ff' }}
-              title={`共${responses.length}个响应`}
-            />
-          </div>
+          <Select
+            value={activeResponseId || record.responses[0]?.id}
+            style={{ width: '100%' }}
+            onChange={(value) => handleResponseSwitch(record.id, value)}
+            disabled={record.proxyType !== 'response'}
+          >
+            {record.responses.map(resp => (
+              <Option key={resp.id} value={resp.id}>
+                {resp.name}
+              </Option>
+            ))}
+          </Select>
         );
-      }
+      },
+    },
+    {
+      title: '延迟(毫秒)',
+      dataIndex: 'responseDelay',
+      key: 'responseDelay',
+      width: 100,
+      sorter: (a, b) => (a.responseDelay || 0) - (b.responseDelay || 0),
+      render: (delay) => {
+        const delayValue = parseInt(delay, 10) || 0;
+        return (
+          <span className={delayValue > 0 ? 'delay-active' : 'delay-inactive'}>
+            {delayValue > 0 ? delayValue : '无延迟'}
+          </span>
+        );
+      },
     },
     {
       title: '状态码',
       dataIndex: 'httpStatus',
       key: 'httpStatus',
       width: 100,
-      sorter: (a, b) => {
-        const aStatus = parseInt(a.httpStatus) || 0;
-        const bStatus = parseInt(b.httpStatus) || 0;
-        return aStatus - bStatus;
+      render: (status) => {
+        const statusCode = status || 200;
+        let statusClass = 'status-success';
+        if (statusCode >= 400) {
+          statusClass = 'status-error';
+        } else if (statusCode >= 300) {
+          statusClass = 'status-warning';
+        }
+        return <span className={statusClass}>{statusCode}</span>;
       },
-      sortDirections: ['ascend', 'descend'],
-      render: (text, record) => {
-        return record.proxyType === 'response' ? text : '-';
-      }
     },
     {
       title: '内容类型',
@@ -906,6 +843,28 @@ const InterfaceManagement = () => {
   const visibleColumns = tableConfig.visibleColumns || COLUMN_CONFIG.map(col => col.key);
   const columns = allColumns.filter(col => visibleColumns.includes(col.key));
 
+  // 分组筛选和操作区域
+  const handleBatchToggleActive = async (active) => {
+    try {
+      setGroupActionLoading(true);
+      const response = await axios.patch(`/cgi-bin/interfaces?active=${active}`, {
+        featureId: selectedFeatureId,
+        group: selectedGroup
+      });
+      if (response.data && response.data.code === 0) {
+        message.success(`分组 "${selectedGroup}" 中的接口已成功${active ? '启用' : '禁用'}`);
+        fetchInterfaces();
+      } else {
+        throw new Error(response.data?.message || '批量操作失败');
+      }
+    } catch (error) {
+      console.error('批量操作失败:', error);
+      message.error(error.response?.data?.message || error.message || '批量操作失败');
+    } finally {
+      setGroupActionLoading(false);
+    }
+  };
+
   return (
     <AppLayout>
       <div className="interface-management-container">
@@ -959,6 +918,77 @@ const InterfaceManagement = () => {
           />
         )}
 
+        {/* 分组筛选和操作区域 */}
+        <div style={{ 
+          display: 'flex', 
+          justifyContent: 'space-between', 
+          alignItems: 'center',
+          marginBottom: 16,
+          padding: '12px 16px',
+          backgroundColor: '#f5f5f5',
+          borderRadius: '4px'
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+            <span>分组筛选：</span>
+            <Select
+              value={selectedGroup}
+              onChange={value => setSelectedGroup(value)}
+              style={{ width: 200 }}
+              placeholder="选择分组"
+              allowClear
+              showSearch
+              loading={interfacesLoading}
+            >
+              {groups.map(group => (
+                <Option key={group} value={group}>{group}</Option>
+              ))}
+            </Select>
+            {selectedGroup && (
+              <Button 
+                type="link" 
+                onClick={() => setSelectedGroup(null)}
+                size="small"
+              >
+                清除筛选
+              </Button>
+            )}
+          </div>
+          
+          {selectedGroup && (
+            <div style={{ display: 'flex', gap: '8px' }}>
+              <Popconfirm
+                title={`确定要启用分组 "${selectedGroup}" 中的所有接口吗？`}
+                onConfirm={() => handleBatchToggleActive(true)}
+                okText="确定"
+                cancelText="取消"
+              >
+                <Button 
+                  type="primary" 
+                  size="small"
+                  loading={groupActionLoading}
+                >
+                  批量启用
+                </Button>
+              </Popconfirm>
+              
+              <Popconfirm
+                title={`确定要禁用分组 "${selectedGroup}" 中的所有接口吗？`}
+                onConfirm={() => handleBatchToggleActive(false)}
+                okText="确定"
+                cancelText="取消"
+              >
+                <Button 
+                  danger 
+                  size="small"
+                  loading={groupActionLoading}
+                >
+                  批量禁用
+                </Button>
+              </Popconfirm>
+            </div>
+          )}
+        </div>
+
         {/* 接口列表状态栏 */}
         {filteredInterfaces.length > 0 && !interfacesLoading && (
           <div style={{ 
@@ -974,6 +1004,11 @@ const InterfaceManagement = () => {
           }}>
             <span>
               当前功能模块：<strong>{selectedFeature?.name}</strong>
+              {selectedGroup && (
+                <span style={{ marginLeft: 8 }}>
+                  | 分组：<Tag color="blue">{selectedGroup}</Tag>
+                </span>
+              )}
             </span>
             <span>
               共 {filteredInterfaces.length} 个接口，每页显示 {tableConfig.pageSize} 个
@@ -1088,6 +1123,7 @@ const InterfaceManagement = () => {
             layout="vertical"
             initialValues={{
               name: '',
+              group: '',
               pattern: '',
               proxyType: 'response',
               statusCode: '200',
@@ -1096,10 +1132,11 @@ const InterfaceManagement = () => {
               httpMethod: 'ALL',
               targetUrl: '',
               headerItems: [],
-              paramMatchers: []
+              paramMatchers: [],
+              responseDelay: '0'
             }}
           >
-            {/* 基础信息表单项保持原样 */}
+            {/* 基础信息表单项 */}
             <div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
               <div style={{ flex: 1 }}>
                 <Form.Item
@@ -1110,6 +1147,34 @@ const InterfaceManagement = () => {
                   <Input placeholder="请输入接口名称" />
                 </Form.Item>
               </div>
+              <div style={{ flex: 1 }}>
+                <Form.Item
+                  name="group"
+                  label="分组"
+                  tooltip="为接口设置分组，便于管理和批量操作"
+                >
+                  <Select
+                    placeholder="选择或创建分组"
+                    showSearch
+                    allowClear
+                    mode="tags"
+                    tokenSeparators={[',']}
+                    onInputKeyDown={(e) => {
+                      // 防止回车键提交表单
+                      if (e.key === 'Enter') {
+                        e.stopPropagation();
+                      }
+                    }}
+                  >
+                    {Array.from(new Set(interfaces.map(item => item.group).filter(Boolean))).map(group => (
+                      <Option key={group} value={group}>{group}</Option>
+                    ))}
+                  </Select>
+                </Form.Item>
+              </div>
+            </div>
+            
+            <div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
               <div style={{ flex: 1 }}>
                 <Form.Item
                   name="pattern"
@@ -1189,9 +1254,6 @@ const InterfaceManagement = () => {
                   />
                 </Form.Item>
               </div>
-            </div>
-            
-            <div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
               <div style={{ flex: 1 }}>
                 <Form.Item
                   name="proxyType"
@@ -1219,7 +1281,7 @@ const InterfaceManagement = () => {
                     const patternInput = document.querySelector('input[placeholder="根据选择的处理方式输入相应格式的URL"]');
                     if (patternInput) {
                       if (value === 'response') {
-                        patternInput.placeholder = "例如：/api/users，/api/users/*，/api\/users\/\d+/";
+                        patternInput.placeholder = "例如：/api/users，/api/users/*，/api\\/users\\/\\d+/";
                       } else if (value === 'redirect') {
                         patternInput.placeholder = "例如：https://example.com/api";
                       } else if (value === 'url_redirect') {
@@ -1233,6 +1295,9 @@ const InterfaceManagement = () => {
                   </Select>
                 </Form.Item>
               </div>
+            </div>
+            
+            <div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
               <div style={{ flex: 1 }}>
                 <Form.Item
                   name="httpMethod"
@@ -1246,6 +1311,9 @@ const InterfaceManagement = () => {
                   </Select>
                 </Form.Item>
               </div>
+              <div style={{ flex: 1 }}>
+                {/* 这里可以留空或添加其他字段 */}
+              </div>
             </div>
 
             {/* 根据proxyType显示不同的表单项 */}
@@ -1283,6 +1351,29 @@ const InterfaceManagement = () => {
                             </Select>
                           </Form.Item>
                         </div>
+                        <div style={{ flex: 1 }}>
+                          <Form.Item
+                            name="responseDelay"
+                            label="延迟响应(毫秒)"
+                            tooltip="设置接口响应延迟时间，单位为毫秒"
+                            rules={[
+                              { 
+                                pattern: /^\d*$/, 
+                                message: '请输入有效的数字' 
+                              },
+                              {
+                                validator: (_, value) => {
+                                  if (!value || parseInt(value, 10) <= 60000) {
+                                    return Promise.resolve();
+                                  }
+                                  return Promise.reject(new Error('延迟时间不能超过60秒(60000毫秒)'));
+                                }
+                              }
+                            ]}
+                          >
+                            <Input placeholder="例如：500" />
+                          </Form.Item>
+                        </div>
                       </div>
 
                       {/* 请求入参匹配设置 */}