whistle.mock-plugins 1.1.1-dev.8 → 1.1.1

package/ui/src/pages/InterfaceManagement.js

@@ -4,11 +4,13 @@ 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, Input as AntInput, Radio, Drawer
 } from 'antd';
 import { 
   PlusOutlined, EditOutlined, DeleteOutlined, 
-  FileTextOutlined, PlusCircleOutlined, SettingOutlined 
+  FileTextOutlined, PlusCircleOutlined, SettingOutlined,
+  SearchOutlined, FilterOutlined, AppstoreOutlined,
+  UnorderedListOutlined, ReloadOutlined
 } from '@ant-design/icons';
 import '../styles/interface-management.css';
 import axios from 'axios';
@@ -27,11 +29,13 @@ import {
 } from '../components/interface-management';
 
 const { Option } = Select;
+const { Search } = AntInput;
 
 // 列配置数据结构
 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 },
@@ -57,6 +61,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);
@@ -69,6 +78,12 @@ const InterfaceManagement = () => {
   const [previewContent, setPreviewContent] = useState(null);
   const [currentResponseId, setCurrentResponseId] = useState(null);
   
+  // 搜索和视图状态
+  const [searchValue, setSearchValue] = useState('');
+  const [viewMode, setViewMode] = useState('table'); // 'table' or 'card'
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  
   // 表单实例
   const [form] = Form.useForm();
 
@@ -166,6 +181,10 @@ const InterfaceManagement = () => {
         
         setInterfaces(processedInterfaces);
         console.log('处理后的接口列表:', processedInterfaces);
+        console.log('接口分组信息:', processedInterfaces.map(item => ({ id: item.id, name: item.name, group: item.group })));
+        
+        // 提取并更新分组列表
+        updateGroups(processedInterfaces);
       } else {
         console.warn('接口数据格式不正确:', response.data);
         setInterfaces([]);
@@ -179,6 +198,50 @@ 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 = () => {
+    // 首先按功能模块筛选
+    let featureFiltered = interfaces.filter(item => 
+      !selectedFeatureId || item.featureId === selectedFeatureId
+    );
+    
+    // 然后按分组筛选
+    if (selectedGroup) {
+      featureFiltered = featureFiltered.filter(item => item.group === selectedGroup);
+    }
+    
+    // 最后按搜索关键词筛选
+    if (searchValue) {
+      const searchLower = searchValue.toLowerCase();
+      return featureFiltered.filter(item => 
+        (item.name && item.name.toLowerCase().includes(searchLower)) || 
+        (item.urlPattern && item.urlPattern.toLowerCase().includes(searchLower))
+      );
+    }
+    
+    return featureFiltered;
+  };
 
   const handleAddInterface = () => {
     if (!selectedFeatureId) {
@@ -206,7 +269,8 @@ const InterfaceManagement = () => {
       activeResponseId: defaultResponseId,
       httpMethod: 'ALL',
       headerItems: [], // 初始化为空数组
-      paramMatchers: [] // 初始化为空数组
+      paramMatchers: [], // 初始化为空数组
+      group: undefined // 确保分组字段为undefined，而不是空字符串
     });
     
     setCurrentResponseId(defaultResponseId);
@@ -253,9 +317,16 @@ const InterfaceManagement = () => {
       }));
     }
     
+    // 处理分组值，确保它是字符串而不是数组
+    let groupValue = record.group;
+    if (Array.isArray(groupValue)) {
+      groupValue = groupValue.length > 0 ? groupValue[0] : undefined;
+    }
+    
     // 设置表单值
     form.setFieldsValue({
       name: record.name,
+      group: groupValue || undefined, // 使用undefined而不是空字符串
       pattern: record.urlPattern,
       proxyType: record.proxyType || 'response',
       statusCode: (record.httpStatus || record.statusCode || 200).toString(),
@@ -269,6 +340,8 @@ const InterfaceManagement = () => {
       responseDelay: record.responseDelay ? record.responseDelay.toString() : '0'
     });
     
+    console.log('编辑接口时设置的分组值:', groupValue);
+    
     setCurrentResponseId(activeResponseId);
     setEditingInterface(record);
     setModalVisible(true);
@@ -294,12 +367,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,9 +401,16 @@ const InterfaceManagement = () => {
         });
       }
       
+      // 处理分组值，确保它是字符串而不是数组
+      let groupValue = values.group;
+      if (Array.isArray(groupValue)) {
+        groupValue = groupValue.length > 0 ? groupValue[0] : '';
+      }
+      
       // 构建接口数据
       const interfaceData = {
         name: values.name,
+        group: groupValue || '', // 确保group不为undefined
         urlPattern: values.pattern,
         proxyType: values.proxyType,
         featureId: selectedFeatureId,
@@ -340,6 +423,8 @@ const InterfaceManagement = () => {
         active: true
       };
       
+      console.log('提交的分组值:', groupValue);
+      
       // 根据代理类型添加不同字段
       if (values.proxyType === 'redirect' || values.proxyType === 'url_redirect') {
         interfaceData.targetUrl = values.targetUrl;
@@ -374,6 +459,8 @@ const InterfaceManagement = () => {
         const response = await axios.post('/cgi-bin/interfaces', interfaceData);
         if (response.data && response.data.code === 0) {
           message.success('接口创建成功');
+          console.log('接口创建成功，返回数据:', response.data);
+          console.log('返回的接口数据中的分组信息:', response.data.data?.group);
           setModalVisible(false);
           fetchInterfaces();
           
@@ -460,9 +547,7 @@ const InterfaceManagement = () => {
     }
   };
 
-  const filteredInterfaces = interfaces.filter(item => 
-    !selectedFeatureId || item.featureId === selectedFeatureId
-  );
+  const filteredInterfaces = getFilteredInterfaces();
 
   // 处理表格变化（排序、分页）
   const handleTableChange = (pagination, filters, sorter) => {
@@ -505,6 +590,60 @@ const InterfaceManagement = () => {
     setColumnConfigVisible(visible);
   };
 
+  // 搜索处理
+  const handleSearch = (value) => {
+    setSearchValue(value);
+  };
+  
+  // 清除搜索
+  const handleClearSearch = () => {
+    setSearchValue('');
+  };
+  
+  // 表格行选择处理
+  const onSelectChange = (selectedKeys) => {
+    setSelectedRowKeys(selectedKeys);
+  };
+  
+  // 切换视图模式
+  const toggleViewMode = () => {
+    setViewMode(viewMode === 'table' ? 'card' : 'table');
+  };
+
+  // 刷新数据
+  const refreshData = () => {
+    fetchInterfaces();
+    message.success('数据已刷新');
+  };
+
+  // 批量操作接口状态
+  const handleBatchOperation = async (active) => {
+    if (!selectedRowKeys || selectedRowKeys.length === 0) {
+      message.warning('请先选择要操作的接口');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const operations = selectedRowKeys.map(id => 
+        axios.patch(`/cgi-bin/interfaces/${id}`, { active })
+      );
+      
+      await Promise.all(operations);
+      message.success(`已${active ? '启用' : '禁用'} ${selectedRowKeys.length} 个接口`);
+      setSelectedRowKeys([]);
+      fetchInterfaces();
+      
+      // 刷新规则缓存
+      refreshCacheAfterUpdate();
+    } catch (error) {
+      console.error('批量操作失败:', error);
+      message.error('批量操作失败: ' + (error.response?.data?.message || error.message));
+    } finally {
+      setLoading(false);
+    }
+  };
+
   // 定义所有可用的列
   const allColumns = [
     {
@@ -527,6 +666,27 @@ const InterfaceManagement = () => {
       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',
@@ -775,38 +935,94 @@ 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">
-        <div className="interface-management-header">
-          <div className="feature-selector">
-            <span>功能模块：</span>
-            <Select
-              value={selectedFeatureId}
-              onChange={handleSelectFeature}
-              style={{ width: 200 }}
-              placeholder="选择功能模块"
-              loading={featuresLoading}
-            >
-              {(features || []).map(feature => (
-                <Option key={feature.id} value={feature.id}>
-                  {feature.name}
-                  {feature.active === false && 
-                    <span style={{ color: '#ff4d4f', marginLeft: 8 }}>(已禁用)</span>
-                  }
-                </Option>
-              ))}
-            </Select>
+        <Card className="interface-header-card">
+          <div className="interface-management-header">
+            <div className="feature-selector-container">
+              <div className="feature-selector">
+                <span>功能模块：</span>
+                <Select
+                  value={selectedFeatureId}
+                  onChange={handleSelectFeature}
+                  style={{ width: 240 }}
+                  placeholder="选择功能模块"
+                  loading={featuresLoading}
+                  dropdownMatchSelectWidth={false}
+                >
+                  {(features || []).map(feature => (
+                    <Option key={feature.id} value={feature.id}>
+                      {feature.name}
+                      {feature.active === false && 
+                        <span style={{ color: '#ff4d4f', marginLeft: 8 }}>(已禁用)</span>
+                      }
+                    </Option>
+                  ))}
+                </Select>
+              </div>
+              
+              <Search
+                placeholder="搜索接口名称或URL"
+                onSearch={handleSearch}
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                style={{ width: 250, marginLeft: 16 }}
+                enterButton={<SearchOutlined />}
+                allowClear
+              />
+            </div>
+            
+            <div className="interface-actions">
+              <Space>
+                <Tooltip title="刷新数据">
+                  <Button 
+                    icon={<ReloadOutlined />} 
+                    onClick={refreshData}
+                    loading={interfacesLoading}
+                  />
+                </Tooltip>
+                <Tooltip title={viewMode === 'table' ? '切换到卡片视图' : '切换到表格视图'}>
+                  <Button 
+                    icon={viewMode === 'table' ? <AppstoreOutlined /> : <UnorderedListOutlined />} 
+                    onClick={toggleViewMode}
+                  />
+                </Tooltip>
+                <Button
+                  type="primary"
+                  icon={<PlusOutlined />}
+                  onClick={handleAddInterface}
+                  disabled={!selectedFeatureId || selectedFeature?.active === false}
+                  className="add-interface-button"
+                >
+                  添加接口
+                </Button>
+              </Space>
+            </div>
           </div>
-          <Button
-            type="primary"
-            icon={<PlusOutlined />}
-            onClick={handleAddInterface}
-            disabled={!selectedFeatureId || selectedFeature?.active === false}
-          >
-            添加接口
-          </Button>
-        </div>
+        </Card>
         
         {!features.length && (
           <Alert
@@ -828,33 +1044,129 @@ const InterfaceManagement = () => {
           />
         )}
 
+        {/* 分组筛选和操作区域 */}
+        <Card className="filter-card" bordered={false}>
+          <div className="filter-header">
+            <div className="filter-title">
+              <FilterOutlined /> 分组筛选
+            </div>
+            {selectedGroup && (
+              <Button 
+                type="link" 
+                onClick={() => setSelectedGroup(null)}
+                size="small"
+              >
+                清除筛选
+              </Button>
+            )}
+          </div>
+          
+          <div className="group-tags-container">
+            {groups.length === 0 ? (
+              <div className="empty-groups">暂无分组</div>
+            ) : (
+              <div className="group-tags">
+                {groups.map(group => (
+                  <Tag 
+                    key={group} 
+                    color={selectedGroup === group ? "blue" : "default"}
+                    onClick={() => setSelectedGroup(group === selectedGroup ? null : group)}
+                    className={`group-tag ${selectedGroup === group ? 'active' : ''}`}
+                  >
+                    {group} ({interfaces.filter(item => item.group === group).length})
+                  </Tag>
+                ))}
+              </div>
+            )}
+          </div>
+          
+          {selectedGroup && (
+            <div className="group-actions">
+              <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>
+          )}
+        </Card>
+
         {/* 接口列表状态栏 */}
-        {filteredInterfaces.length > 0 && !interfacesLoading && (
-          <div style={{ 
-            marginBottom: 16, 
-            padding: '8px 12px', 
-            background: '#f8f9fa', 
-            borderRadius: '4px',
-            fontSize: '13px',
-            color: '#666',
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center'
-          }}>
-            <span>
-              当前功能模块：<strong>{selectedFeature?.name}</strong>
-            </span>
-            <span>
-              共 {filteredInterfaces.length} 个接口，每页显示 {tableConfig.pageSize} 个
-              {tableConfig.sortField && (
-                <span style={{ marginLeft: 8 }}>
-                  | 按"{allColumns.find(col => col.key === tableConfig.sortField)?.title || tableConfig.sortField}"
-                  {tableConfig.sortOrder === 'ascend' ? '升序' : '降序'}排列
-                </span>
+        <Card className="list-header-card" bordered={false}>
+          <div className="list-header">
+            <div className="list-header-info">
+              <div className="feature-info">
+                <span className="label">功能模块：</span>
+                <span className="value">{selectedFeature?.name}</span>
+                {selectedGroup && (
+                  <Tag color="blue" className="group-badge">{selectedGroup}</Tag>
+                )}
+              </div>
+              <div className="interface-stats">
+                {searchValue ? (
+                  <Badge 
+                    count={`搜索"${searchValue}" - ${filteredInterfaces.length}个结果`} 
+                    style={{ backgroundColor: '#108ee9' }} 
+                  />
+                ) : (
+                  <Badge 
+                    count={`共 ${filteredInterfaces.length} 个接口`} 
+                    style={{ backgroundColor: '#52c41a' }} 
+                  />
+                )}
+              </div>
+            </div>
+            <div className="batch-actions">
+              {selectedRowKeys.length > 0 && (
+                <Space>
+                  <span className="selected-count">
+                    已选择 {selectedRowKeys.length} 项
+                  </span>
+                  <Popconfirm
+                    title="确定要批量启用选中的接口吗？"
+                    onConfirm={() => handleBatchOperation(true)}
+                    okText="确定"
+                    cancelText="取消"
+                  >
+                    <Button size="small" type="primary">批量启用</Button>
+                  </Popconfirm>
+                  <Popconfirm
+                    title="确定要批量禁用选中的接口吗？"
+                    onConfirm={() => handleBatchOperation(false)}
+                    okText="确定"
+                    cancelText="取消"
+                  >
+                    <Button size="small" danger>批量禁用</Button>
+                  </Popconfirm>
+                </Space>
               )}
-            </span>
+            </div>
           </div>
-        )}
+        </Card>
 
         {/* 列配置区域 */}
         <div style={{ 
@@ -919,26 +1231,156 @@ const InterfaceManagement = () => {
           </Popover>
         </div>
 
-        <div className="interface-list-container">
-          <Table
-            columns={columns}
-            dataSource={filteredInterfaces}
-            rowKey="id"
-            loading={interfacesLoading}
-            onChange={handleTableChange}
-            pagination={{
-              current: tableConfig.current,
-              pageSize: tableConfig.pageSize,
-              showSizeChanger: true,
-              showQuickJumper: true,
-              showTotal: (total, range) => `共 ${total} 个接口，显示第 ${range[0]}-${range[1]} 个`,
-              pageSizeOptions: ['10', '20', '50', '100'],
-              size: 'default'
-            }}
-            locale={{ emptyText: '暂无接口配置' }}
-            sortDirections={['ascend', 'descend']}
-          />
-        </div>
+        <Card className="list-container-card" bordered={false} bodyStyle={{ padding: 0 }}>
+          {/* 表格视图 */}
+          {viewMode === 'table' && (
+            <div className="interface-list-container">
+              <Table
+                columns={columns}
+                dataSource={filteredInterfaces}
+                rowKey="id"
+                loading={interfacesLoading}
+                onChange={handleTableChange}
+                rowSelection={{
+                  selectedRowKeys,
+                  onChange: onSelectChange,
+                }}
+                size="middle"
+                pagination={{
+                  current: tableConfig.current,
+                  pageSize: tableConfig.pageSize,
+                  showSizeChanger: true,
+                  showQuickJumper: true,
+                  showTotal: (total, range) => `共 ${total} 个接口，显示第 ${range[0]}-${range[1]} 个`,
+                  pageSizeOptions: ['10', '20', '50', '100'],
+                  size: 'default'
+                }}
+                locale={{ emptyText: '暂无接口配置' }}
+                sortDirections={['ascend', 'descend']}
+                className="interface-table"
+              />
+            </div>
+          )}
+          
+          {/* 卡片视图 */}
+          {viewMode === 'card' && (
+            <div className="interface-card-view">
+              <Row gutter={[16, 16]} style={{ padding: 16 }}>
+                {interfacesLoading ? (
+                  [1,2,3,4,5,6].map(i => (
+                    <Col xs={24} sm={12} md={8} lg={8} xl={6} key={`loading-${i}`}>
+                      <Card loading style={{ height: 180 }} />
+                    </Col>
+                  ))
+                ) : filteredInterfaces.length === 0 ? (
+                  <Col span={24}>
+                    <div className="empty-data">暂无接口配置</div>
+                  </Col>
+                ) : (
+                  filteredInterfaces.map(item => (
+                    <Col xs={24} sm={12} md={8} lg={8} xl={6} key={item.id}>
+                      <Card 
+                        className={`interface-card ${item.active === false ? 'inactive' : ''}`}
+                        hoverable
+                      >
+                        <div className="interface-card-header">
+                          <Switch
+                            checked={item.active !== false}
+                            onChange={() => handleToggleActive(item.id, item.active)}
+                            size="small"
+                            className="interface-card-switch"
+                          />
+                          <div className="interface-card-title">{item.name}</div>
+                          {item.group && (
+                            <Tag 
+                              color="blue" 
+                              className="interface-card-group"
+                              onClick={() => setSelectedGroup(item.group)}
+                            >
+                              {item.group}
+                            </Tag>
+                          )}
+                        </div>
+                        
+                        <div className="interface-card-content">
+                          <div className="url-pattern-container">
+                            <Tooltip title={item.urlPattern}>
+                              <div className="url-pattern">{item.urlPattern}</div>
+                            </Tooltip>
+                          </div>
+                          
+                          <div className="interface-card-info">
+                            <div className="info-item">
+                              <span className="info-label">处理方式:</span>
+                              <Badge 
+                                color={proxyTypes.find(t => t.value === item.proxyType)?.color || '#999'} 
+                                text={proxyTypes.find(t => t.value === item.proxyType)?.label || item.proxyType} 
+                                className="info-value"
+                              />
+                            </div>
+                            <div className="info-item">
+                              <span className="info-label">状态码:</span>
+                              <span className={`status-badge status-${item.httpStatus >= 400 ? 'error' : item.httpStatus >= 300 ? 'warning' : 'success'}`}>
+                                {item.httpStatus || 200}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        
+                        <div className="interface-card-actions">
+                          <Button 
+                            type="primary" 
+                            size="small" 
+                            icon={<EditOutlined />}
+                            onClick={() => handleEditInterface(item)}
+                          >
+                            编辑
+                          </Button>
+                          <Popconfirm
+                            title="确定要删除此接口吗？"
+                            onConfirm={() => handleDeleteInterface(item.id)}
+                            okText="确定"
+                            cancelText="取消"
+                          >
+                            <Button 
+                              danger 
+                              size="small"
+                              icon={<DeleteOutlined />}
+                            >
+                              删除
+                            </Button>
+                          </Popconfirm>
+                        </div>
+                      </Card>
+                    </Col>
+                  ))
+                )}
+              </Row>
+              
+              {/* 卡片视图分页 */}
+              {filteredInterfaces.length > 0 && (
+                <div className="card-pagination">
+                  <Pagination
+                    current={tableConfig.current}
+                    pageSize={tableConfig.pageSize}
+                    total={filteredInterfaces.length}
+                    showSizeChanger
+                    showQuickJumper
+                    showTotal={(total, range) => `共 ${total} 个接口，显示第 ${range[0]}-${range[1]} 个`}
+                    pageSizeOptions={['10', '20', '50', '100']}
+                    size="default"
+                    onChange={(page, pageSize) => {
+                      saveTableConfig({
+                        current: page,
+                        pageSize: pageSize
+                      });
+                    }}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+        </Card>
 
         {/* 接口编辑/创建模态框 */}
         <Modal
@@ -957,6 +1399,7 @@ const InterfaceManagement = () => {
             layout="vertical"
             initialValues={{
               name: '',
+              group: '',
               pattern: '',
               proxyType: 'response',
               statusCode: '200',
@@ -969,7 +1412,7 @@ const InterfaceManagement = () => {
               responseDelay: '0'
             }}
           >
-            {/* 基础信息表单项保持原样 */}
+            {/* 基础信息表单项 */}
             <div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
               <div style={{ flex: 1 }}>
                 <Form.Item
@@ -980,6 +1423,44 @@ const InterfaceManagement = () => {
                   <Input placeholder="请输入接口名称" />
                 </Form.Item>
               </div>
+              <div style={{ flex: 1 }}>
+                <Form.Item
+                  name="group"
+                  label="分组"
+                  tooltip="为接口设置分组，便于管理和批量操作"
+                >
+                  <Select
+                    placeholder="选择或创建分组"
+                    showSearch
+                    allowClear
+                    style={{ width: '100%' }}
+                    mode="tags"
+                    maxTagCount="responsive"
+                    maxTagTextLength={10}
+                    onChange={(value) => {
+                      // 如果值是数组（tags模式），只取第一个元素
+                      if (Array.isArray(value) && value.length > 0) {
+                        // 如果第一个元素是空字符串，则设置为undefined
+                        const groupValue = value[0] === '' ? undefined : value[0];
+                        form.setFieldsValue({ group: groupValue });
+                      }
+                    }}
+                    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"
@@ -1059,9 +1540,6 @@ const InterfaceManagement = () => {
                   />
                 </Form.Item>
               </div>
-            </div>
-            
-            <div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
               <div style={{ flex: 1 }}>
                 <Form.Item
                   name="proxyType"
@@ -1089,7 +1567,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') {
@@ -1103,6 +1581,9 @@ const InterfaceManagement = () => {
                   </Select>
                 </Form.Item>
               </div>
+            </div>
+            
+            <div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
               <div style={{ flex: 1 }}>
                 <Form.Item
                   name="httpMethod"
@@ -1116,6 +1597,9 @@ const InterfaceManagement = () => {
                   </Select>
                 </Form.Item>
               </div>
+              <div style={{ flex: 1 }}>
+                {/* 这里可以留空或添加其他字段 */}
+              </div>
             </div>
 
             {/* 根据proxyType显示不同的表单项 */}