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

package/lib/routes/interfaces.js

@@ -516,6 +516,175 @@ const initRouter = () => {
     }
   });
   
+  // 批量更新接口状态
+  router.patch('/interfaces', (req, res) => {
+    try {
+      const { active } = req.query;
+      const { featureId, group } = req.body;
+      
+      if (active === undefined) {
+        return res.status(400).json({ 
+          code: 1,
+          message: '状态参数为必填项' 
+        });
+      }
+      
+      if (!featureId) {
+        return res.status(400).json({ 
+          code: 1,
+          message: '功能ID为必填项' 
+        });
+      }
+      
+      // 检查功能是否存在
+      const featuresFile = path.join(DATA_DIR, 'features.json');
+      if (!fs.existsSync(featuresFile)) {
+        return res.status(404).json({ 
+          code: 1,
+          message: '功能不存在' 
+        });
+      }
+      
+      const features = fs.readJsonSync(featuresFile);
+      const feature = features.find(f => f.id === featureId);
+      if (!feature) {
+        return res.status(404).json({ 
+          code: 1,
+          message: '功能不存在' 
+        });
+      }
+      
+      // 读取接口列表
+      const interfacesFile = path.join(DATA_DIR, `interfaces-${featureId}.json`);
+      if (!fs.existsSync(interfacesFile)) {
+        return res.status(404).json({ 
+          code: 1,
+          message: '接口列表不存在' 
+        });
+      }
+      
+      const interfaces = fs.readJsonSync(interfacesFile);
+      
+      // 根据分组筛选要更新的接口
+      let updatedCount = 0;
+      const updatedInterfaces = interfaces.map(item => {
+        // 如果指定了分组，只更新该分组下的接口
+        if (group && item.group !== group) {
+          return item;
+        }
+        
+        // 更新接口状态
+        if (item.active !== (active === 'true')) {
+          updatedCount++;
+          return {
+            ...item,
+            active: active === 'true',
+            updatedAt: new Date().toISOString()
+          };
+        }
+        
+        return item;
+      });
+      
+      // 保存更新后的接口列表
+      fs.writeJsonSync(interfacesFile, updatedInterfaces, { spaces: 2 });
+      
+      res.json({
+        code: 0,
+        message: `成功${active === 'true' ? '启用' : '禁用'} ${updatedCount} 个接口`,
+        data: { updatedCount }
+      });
+    } catch (err) {
+      console.error('批量更新接口状态失败:', err);
+      res.status(500).json({ 
+        code: 1,
+        message: '批量更新接口状态失败: ' + err.message 
+      });
+    }
+  });
+
+  // 部分更新接口
+  router.patch('/interfaces/:id', (req, res) => {
+    try {
+      const { id } = req.params;
+      const updateData = req.body;
+      
+      if (!id) {
+        return res.status(400).json({ 
+          code: 1,
+          message: '接口ID为必填项' 
+        });
+      }
+      
+      // 检查功能是否存在
+      const featuresFile = path.join(DATA_DIR, 'features.json');
+      if (!fs.existsSync(featuresFile)) {
+        return res.status(404).json({ 
+          code: 1,
+          message: '功能不存在' 
+        });
+      }
+      
+      const features = fs.readJsonSync(featuresFile);
+      
+      // 在所有功能模块中查找接口
+      let foundInterface = null;
+      let foundFeature = null;
+      let foundInterfaceIndex = -1;
+      let interfacesFile = '';
+      
+      for (const feature of features) {
+        const featureInterfacesFile = path.join(DATA_DIR, `interfaces-${feature.id}.json`);
+        if (fs.existsSync(featureInterfacesFile)) {
+          const interfaces = fs.readJsonSync(featureInterfacesFile);
+          const index = interfaces.findIndex(item => item.id === id);
+          
+          if (index !== -1) {
+            foundInterface = interfaces[index];
+            foundFeature = feature;
+            foundInterfaceIndex = index;
+            interfacesFile = featureInterfacesFile;
+            break;
+          }
+        }
+      }
+      
+      if (!foundInterface) {
+        return res.status(404).json({ 
+          code: 1,
+          message: '接口不存在' 
+        });
+      }
+      
+      // 读取接口所在文件的所有接口
+      const interfaces = fs.readJsonSync(interfacesFile);
+      
+      // 更新接口
+      const updatedInterface = {
+        ...foundInterface,
+        ...updateData,
+        updatedAt: new Date().toISOString()
+      };
+      
+      interfaces[foundInterfaceIndex] = updatedInterface;
+      
+      // 保存更新后的接口列表
+      fs.writeJsonSync(interfacesFile, interfaces, { spaces: 2 });
+      
+      res.json({
+        code: 0,
+        message: '接口更新成功',
+        data: updatedInterface
+      });
+    } catch (err) {
+      console.error('更新接口失败:', err);
+      res.status(500).json({ 
+        code: 1,
+        message: '更新接口失败: ' + err.message 
+      });
+    }
+  });
+  
   return router;
 };
 

package/package.json

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

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,6 +32,7 @@ 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 },
@@ -57,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);
@@ -166,6 +172,9 @@ const InterfaceManagement = () => {
         
         setInterfaces(processedInterfaces);
         console.log('处理后的接口列表:', processedInterfaces);
+        
+        // 提取并更新分组列表
+        updateGroups(processedInterfaces);
       } else {
         console.warn('接口数据格式不正确:', response.data);
         setInterfaces([]);
@@ -179,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) {
@@ -256,6 +300,7 @@ const InterfaceManagement = () => {
     // 设置表单值
     form.setFieldsValue({
       name: record.name,
+      group: record.group || '',
       pattern: record.urlPattern,
       proxyType: record.proxyType || 'response',
       statusCode: (record.httpStatus || record.statusCode || 200).toString(),
@@ -294,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 ? '启用' : '禁用'}失败`);
       }
@@ -328,6 +376,7 @@ const InterfaceManagement = () => {
       // 构建接口数据
       const interfaceData = {
         name: values.name,
+        group: values.group,
         urlPattern: values.pattern,
         proxyType: values.proxyType,
         featureId: selectedFeatureId,
@@ -460,9 +509,7 @@ const InterfaceManagement = () => {
     }
   };
 
-  const filteredInterfaces = interfaces.filter(item => 
-    !selectedFeatureId || item.featureId === selectedFeatureId
-  );
+  const filteredInterfaces = getFilteredInterfaces();
 
   // 处理表格变化（排序、分页）
   const handleTableChange = (pagination, filters, sorter) => {
@@ -527,6 +574,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,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">
@@ -828,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={{ 
@@ -843,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} 个
@@ -957,6 +1123,7 @@ const InterfaceManagement = () => {
             layout="vertical"
             initialValues={{
               name: '',
+              group: '',
               pattern: '',
               proxyType: 'response',
               statusCode: '200',
@@ -969,7 +1136,7 @@ const InterfaceManagement = () => {
               responseDelay: '0'
             }}
           >
-            {/* 基础信息表单项保持原样 */}
+            {/* 基础信息表单项 */}
             <div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
               <div style={{ flex: 1 }}>
                 <Form.Item
@@ -980,6 +1147,26 @@ const InterfaceManagement = () => {
                   <Input placeholder="请输入接口名称" />
                 </Form.Item>
               </div>
+              <div style={{ flex: 1 }}>
+                <Form.Item
+                  name="group"
+                  label="分组"
+                  tooltip="为接口设置分组，便于管理和批量操作"
+                >
+                  <Select
+                    placeholder="选择或创建分组"
+                    showSearch
+                    allowClear
+                  >
+                    {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 +1246,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 +1273,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 +1287,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 +1303,9 @@ const InterfaceManagement = () => {
                   </Select>
                 </Form.Item>
               </div>
+              <div style={{ flex: 1 }}>
+                {/* 这里可以留空或添加其他字段 */}
+              </div>
             </div>
 
             {/* 根据proxyType显示不同的表单项 */}