whistle.mock-plugins 1.2.2-beta.2 → 1.2.2-beta.22

package/ui/src/pages/InterfaceManagementV2.js

@@ -15,7 +15,6 @@ import {
   FileTextOutlined, PlusCircleOutlined, SettingOutlined,
   SearchOutlined, FilterOutlined, ReloadOutlined, DownOutlined, QuestionCircleOutlined, CopyOutlined
 } from '@ant-design/icons';
-// 移除 react-resizable，改用原生实现
 import '../styles/interface-management.css';
 import axios from 'axios';
 
@@ -32,6 +31,7 @@ import {
   generateResponseId
 } from '../components/interface-management';
 import DataManagementModal from '../components/interface-management/DataManagementModal';
+import { DataManagementDrawer } from '../components/interface-management';
 
 const { Option } = Select;
 const { Search } = AntInput;
@@ -90,7 +90,19 @@ const InterfaceManagement = () => {
   const [searchValue, setSearchValue] = useState('');
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const [drawerVisible, setDrawerVisible] = useState(false);
-  
+
+  // 数据管理显示模式（modal / drawer）
+  const [displayMode, setDisplayMode] = useState('modal');
+
+  // 接口表单显示模式（modal / drawer）
+  const [interfaceFormDisplayMode, setInterfaceFormDisplayMode] = useState('modal');
+
+  // 接口入参匹配显示开关
+  const [interfaceParamMatcherEnabled, setInterfaceParamMatcherEnabled] = useState(true);
+
+  // 响应入参匹配显示开关
+  const [responseParamMatcherEnabled, setResponseParamMatcherEnabled] = useState(true);
+
   // 表单实例
   const [form] = Form.useForm();
 
@@ -98,27 +110,13 @@ const InterfaceManagement = () => {
   const [tableConfig, setTableConfig] = useState(() => {
     const cached = localStorage.getItem('interface-table-config');
     const defaultVisibleColumns = COLUMN_CONFIG.map(col => col.key);
-    const defaultConfig = {
+    return cached ? JSON.parse(cached) : {
       sortOrder: null,
       sortField: null,
       pageSize: 10,
       current: 1,
-      visibleColumns: defaultVisibleColumns,
-      columnWidths: {
-        currentResponse: 180
-      }
+      visibleColumns: defaultVisibleColumns
     };
-    
-    if (cached) {
-      const parsedConfig = JSON.parse(cached);
-      // 确保 columnWidths 存在
-      if (!parsedConfig.columnWidths) {
-        parsedConfig.columnWidths = { currentResponse: 180 };
-      }
-      return parsedConfig;
-    }
-    
-    return defaultConfig;
   });
 
   // 保存表格配置到localStorage
@@ -138,6 +136,59 @@ const InterfaceManagement = () => {
     }
   }, [selectedFeatureId]);
 
+  // 监听数据管理显示模式变化
+  useEffect(() => {
+    const savedMode = localStorage.getItem('dataManagementDisplayMode');
+    if (savedMode) {
+      setDisplayMode(savedMode);
+    }
+
+    const handleStorageChange = () => {
+      const newMode = localStorage.getItem('dataManagementDisplayMode');
+      if (newMode) {
+        setDisplayMode(newMode);
+      }
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, []);
+
+  // 监听接口表单显示模式变化
+  useEffect(() => {
+    const savedMode = localStorage.getItem('interfaceFormDisplayMode');
+    if (savedMode) {
+      setInterfaceFormDisplayMode(savedMode);
+    }
+
+    const handleStorageChange = () => {
+      const newMode = localStorage.getItem('interfaceFormDisplayMode');
+      if (newMode) {
+        setInterfaceFormDisplayMode(newMode);
+      }
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, []);
+
+  // 监听接口入参匹配 / 响应入参匹配开关变化
+  useEffect(() => {
+    const readSwitches = () => {
+      const v1 = localStorage.getItem('interfaceParamMatcherEnabled');
+      setInterfaceParamMatcherEnabled(v1 === null ? true : v1 !== 'false');
+      const v2 = localStorage.getItem('responseParamMatcherEnabled');
+      setResponseParamMatcherEnabled(v2 === null ? true : v2 !== 'false');
+    };
+    readSwitches();
+    window.addEventListener('storage', readSwitches);
+    return () => window.removeEventListener('storage', readSwitches);
+  }, []);
+
   // 获取当前选中的功能模块
   const selectedFeature = features.find(f => f.id === selectedFeatureId);
 
@@ -146,9 +197,12 @@ const InterfaceManagement = () => {
       setFeaturesLoading(true);
       const response = await axios.get('/cgi-bin/features');
       if (response.data && response.data.code === 0 && Array.isArray(response.data.data)) {
-        setFeatures(response.data.data);
-        // 如果URL中有featureId参数，使用它
-        const initialFeatureId = featureId || (response.data.data[0]?.id);
+        const featureList = response.data.data;
+        setFeatures(featureList);
+        // 优先级：URL 参数 > localStorage 上次选择 > 第一个功能模块
+        const lastSelected = localStorage.getItem('selectedFeatureId');
+        const validLastSelected = lastSelected && featureList.find(f => f.id === lastSelected) ? lastSelected : null;
+        const initialFeatureId = featureId || validLastSelected || featureList[0]?.id;
         if (initialFeatureId) {
           setSelectedFeatureId(initialFeatureId);
         }
@@ -194,7 +248,8 @@ const InterfaceManagement = () => {
             id: resp.id || `resp-${index}-${Date.now()}`,
             name: resp.name || `响应 ${index + 1}`,
             description: resp.description || '',
-            content: resp.content || '{}'
+            content: resp.content || '{}',
+            paramMatchers: Array.isArray(resp.paramMatchers) ? resp.paramMatchers : []
           }));
           
           return item;
@@ -400,7 +455,8 @@ const InterfaceManagement = () => {
           id: newId,
           name: resp.name || '未命名响应',
           description: resp.description || '',
-          content: resp.content || '{}'
+          content: resp.content || '{}',
+          paramMatchers: Array.isArray(resp.paramMatchers) ? resp.paramMatchers.map(m => ({ ...m })) : []
         };
       });
       const mapped = idMap.get(source.activeResponseId) || responses[0]?.id;
@@ -516,6 +572,14 @@ const InterfaceManagement = () => {
         groupValue = groupValue.length > 0 ? groupValue[0] : '';
       }
       
+      // 处理 responses，清理每个响应中的空 paramMatchers 规则
+      const cleanedResponses = (values.responses || (editingInterface ? editingInterface.responses : [])).map(resp => ({
+        ...resp,
+        paramMatchers: Array.isArray(resp.paramMatchers)
+          ? resp.paramMatchers.filter(m => m && m.paramPath && m.paramValue)
+          : []
+      }));
+
       // 构建接口数据 - 在编辑模式下，确保关键字段不丢失
       const interfaceData = {
         name: values.name || (editingInterface ? editingInterface.name : ''),
@@ -523,7 +587,7 @@ const InterfaceManagement = () => {
         urlPattern: values.pattern || (editingInterface ? editingInterface.urlPattern : ''),
         proxyType: values.proxyType || (editingInterface ? editingInterface.proxyType : 'response'),
         featureId: selectedFeatureId,
-        responses: values.responses || (editingInterface ? editingInterface.responses : []),
+        responses: cleanedResponses,
         activeResponseId: values.activeResponseId || (editingInterface ? editingInterface.activeResponseId : null),
         httpStatus: parseInt(values.statusCode, 10) || (editingInterface ? editingInterface.httpStatus : 200), // 转换为数字
         contentType: values.contentType || (editingInterface ? editingInterface.contentType : 'application/json; charset=utf-8'),
@@ -590,6 +654,7 @@ const InterfaceManagement = () => {
 
   const handleSelectFeature = (featureId) => {
     setSelectedFeatureId(featureId);
+    localStorage.setItem('selectedFeatureId', featureId);
     // 切换功能模块时重置分页到第一页，但保留其他配置
     saveTableConfig({ current: 1 });
   };
@@ -690,12 +755,7 @@ const InterfaceManagement = () => {
   // 重置列配置
   const handleResetColumns = () => {
     const defaultColumns = COLUMN_CONFIG.map(col => col.key);
-    saveTableConfig({ 
-      visibleColumns: defaultColumns,
-      columnWidths: {
-        currentResponse: 180
-      }
-    });
+    saveTableConfig({ visibleColumns: defaultColumns });
   };
 
   // 切换列配置面板显示
@@ -726,61 +786,6 @@ const InterfaceManagement = () => {
     message.success('数据已刷新');
   };
 
-  // 可调整大小的表头组件（使用原生实现）
-  const ResizableTitle = (props) => {
-    const { onResize, width, columnKey, ...restProps } = props;
-
-    if (!width || !onResize) {
-      return <th {...restProps} />;
-    }
-
-    const handleMouseDown = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      
-      const startX = e.clientX;
-      const startWidth = width;
-
-      const handleMouseMove = (moveEvent) => {
-        const deltaX = moveEvent.clientX - startX;
-        const newWidth = Math.max(50, startWidth + deltaX); // 最小宽度 50px
-        onResize(columnKey, newWidth);
-      };
-
-      const handleMouseUp = () => {
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
-        document.body.style.cursor = '';
-        document.body.style.userSelect = '';
-      };
-
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
-      document.body.style.cursor = 'col-resize';
-      document.body.style.userSelect = 'none';
-    };
-
-    return (
-      <th {...restProps} style={{ ...restProps.style, position: 'relative' }}>
-        {restProps.children}
-        <span
-          className="column-resize-handle"
-          onMouseDown={handleMouseDown}
-          onClick={(e) => e.stopPropagation()}
-        />
-      </th>
-    );
-  };
-
-  // 处理列宽调整
-  const handleResize = (columnKey, newWidth) => {
-    const newColumnWidths = {
-      ...tableConfig.columnWidths,
-      [columnKey]: newWidth
-    };
-    saveTableConfig({ columnWidths: newColumnWidths });
-  };
-
   // 批量操作接口状态
   const handleBatchOperation = async (active) => {
     if (!selectedRowKeys || selectedRowKeys.length === 0) {
@@ -878,37 +883,27 @@ const InterfaceManagement = () => {
       title: '当前响应',
       dataIndex: 'activeResponseId',
       key: 'currentResponse',
-      width: tableConfig.columnWidths?.currentResponse || 180,
-      onHeaderCell: (column) => ({
-        width: column.width,
-        columnKey: 'currentResponse',
-        onResize: handleResize,
-      }),
+      width: 200,
       render: (activeResponseId, record) => {
         // 如果没有响应数据，返回空
         if (!record.responses || !Array.isArray(record.responses) || record.responses.length === 0) {
           return <span className="no-response">无响应数据</span>;
         }
-        
-        // 找到当前激活的响应
-        const activeResponse = record.responses.find(resp => resp.id === activeResponseId);
-        
-        // 如果没有找到激活的响应，使用第一个
-        const currentResponse = activeResponse || record.responses[0];
-        
+
         return (
           <Select
             value={activeResponseId || record.responses[0]?.id}
             style={{ width: '100%' }}
             onChange={(value) => handleResponseSwitch(record.id, value)}
             disabled={record.proxyType !== 'response'}
-            getPopupContainer={(trigger) => trigger.parentNode}
           >
-            {record.responses.map(resp => (
-              <Option key={resp.id} value={resp.id}>
-                {resp.name}
-              </Option>
-            ))}
+            {record.responses.map(resp => {
+              return (
+                <Option key={resp.id} value={resp.id}>
+                  {resp.name}
+                </Option>
+              );
+            })}
           </Select>
         );
       },
@@ -1029,35 +1024,78 @@ const InterfaceManagement = () => {
       title: '参数匹配',
       dataIndex: 'paramMatchers',
       key: 'paramMatchers',
-      width: 100,
+      width: 120,
       render: (_, record) => {
         if (record.proxyType !== 'response') {
           return '-';
         }
-        
-        const matchers = record.paramMatchers || [];
-        const count = matchers.length;
-        
-        if (count === 0) {
+
+        const showInterface = interfaceParamMatcherEnabled;
+        const showResponse = responseParamMatcherEnabled;
+
+        const interfaceMatchers = record.paramMatchers || [];
+        const interfaceCount = showInterface ? interfaceMatchers.filter(m => m.paramPath).length : 0;
+
+        // 统计所有响应级规则
+        const responsesWithMatchers = showResponse
+          ? (record.responses || []).filter(resp =>
+              Array.isArray(resp.paramMatchers) && resp.paramMatchers.filter(m => m.paramPath).length > 0
+            )
+          : [];
+        const responseMatcherTotal = responsesWithMatchers.reduce(
+          (sum, resp) => sum + resp.paramMatchers.filter(m => m.paramPath).length, 0
+        );
+
+        if (interfaceCount === 0 && responseMatcherTotal === 0) {
           return '-';
         }
-        
+
+        const tooltipContent = (
+          <div style={{ maxWidth: 280 }}>
+            {interfaceCount > 0 && (
+              <div style={{ marginBottom: responsesWithMatchers.length > 0 ? 8 : 0 }}>
+                <div style={{ fontWeight: 'bold', marginBottom: 4, color: '#faad14' }}>接口级条件（{interfaceCount}条）</div>
+                {interfaceMatchers.filter(m => m.paramPath).map((m, i) => (
+                  <div key={i} style={{ fontSize: '12px' }}>
+                    {m.paramPath}: {m.paramValue}
+                    <span style={{ color: '#52c41a', marginLeft: 4 }}>
+                      ({m.matchType === 'exact' ? '精确' : m.matchType === 'contains' ? '包含' : '正则'})
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+            {responsesWithMatchers.length > 0 && (
+              <div>
+                <div style={{ fontWeight: 'bold', marginBottom: 4, color: '#1890ff' }}>响应级规则（共{responseMatcherTotal}条）</div>
+                {responsesWithMatchers.map((resp, ri) => (
+                  <div key={ri} style={{ marginBottom: 4 }}>
+                    <div style={{ fontSize: '12px', color: '#aaa', marginBottom: 2 }}>{resp.name}：</div>
+                    {resp.paramMatchers.filter(m => m.paramPath).map((m, mi) => (
+                      <div key={mi} style={{ fontSize: '12px', paddingLeft: 8 }}>
+                        {m.paramPath}: {m.paramValue}
+                        <span style={{ color: '#52c41a', marginLeft: 4 }}>
+                          ({m.matchType === 'exact' ? '精确' : m.matchType === 'contains' ? '包含' : '正则'})
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        );
+
         return (
-          <Tooltip title={
-            <div>
-              {matchers.map((matcher, index) => (
-                <div key={index}>
-                  {matcher.paramPath}: {matcher.paramValue}
-                  <span style={{ color: '#52c41a', marginLeft: 4 }}>
-                    ({matcher.matchType === 'exact' ? '精确' : matcher.matchType === 'contains' ? '包含' : '正则'})
-                  </span>
-                </div>
-              ))}
-            </div>
-          }>
-            <span style={{ color: '#1890ff' }}>
-              {count}条规则
-            </span>
+          <Tooltip title={tooltipContent}>
+            <Space size={4} direction="vertical" style={{ lineHeight: 1.4 }}>
+              {interfaceCount > 0 && (
+                <Tag color="orange" style={{ fontSize: '11px', padding: '0 4px' }}>接口:{interfaceCount}条</Tag>
+              )}
+              {responseMatcherTotal > 0 && (
+                <Tag color="blue" style={{ fontSize: '11px', padding: '0 4px' }}>响应:{responseMatcherTotal}条</Tag>
+              )}
+            </Space>
           </Tooltip>
         );
       }
@@ -1414,11 +1452,6 @@ const InterfaceManagement = () => {
                 selectedRowKeys,
                 onChange: onSelectChange,
               }}
-              components={{
-                header: {
-                  cell: ResizableTitle,
-                },
-              }}
               size="middle"
               pagination={{
                 current: tableConfig.current,
@@ -1436,8 +1469,250 @@ const InterfaceManagement = () => {
           </div>
         </Card>
 
-        {/* 接口编辑/创建模态框 */}
-        <Modal
+        {/* 接口编辑/创建模态框/抽屉 */}
+        {interfaceFormDisplayMode === 'drawer' ? (
+          <Drawer
+            title={
+              <div style={{
+                fontSize: '18px',
+                fontWeight: 600,
+                color: '#262626',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px'
+              }}>
+                <span>{editingInterface ? '编辑接口' : (isDuplicateMode ? '复制新增接口' : '添加接口')}</span>
+                <Badge
+                  count="配置向导"
+                  style={{
+                    backgroundColor: '#f0f9ff',
+                    color: '#1677ff',
+                    fontSize: '11px',
+                    fontWeight: 'normal'
+                  }}
+                />
+              </div>
+            }
+            placement="right"
+            width={1040}
+            open={modalVisible}
+            onClose={handleCancel}
+            destroyOnClose
+            bodyStyle={{
+              padding: '0',
+              background: '#fafafa',
+              overflowY: 'auto'
+            }}
+            footer={
+              <div style={{ textAlign: 'right' }}>
+                <Space>
+                  <Button onClick={handleCancel}>取消</Button>
+                  <Button type="primary" onClick={handleSubmit}>
+                    {editingInterface ? '保存' : '创建'}
+                  </Button>
+                </Space>
+              </div>
+            }
+            className="interface-drawer"
+          >
+            <div style={{ padding: '24px' }}>
+              <Form
+                form={form}
+                layout="vertical"
+                initialValues={{
+                  name: '',
+                  group: '',
+                  pattern: '',
+                  proxyType: 'response',
+                  statusCode: '200',
+                  contentType: 'application/json; charset=utf-8',
+                  responses: [],
+                  httpMethod: 'ALL',
+                  targetUrl: '',
+                  headerItems: [],
+                  paramMatchers: [],
+                  responseDelay: '0'
+                }}
+              >
+                <Collapse
+                  defaultActiveKey={
+                    editingInterface && editingInterface.proxyType === 'response'
+                      ? ['3']
+                      : ['1', '2', '3']
+                  }
+                  style={{ marginBottom: '16px' }}
+                  ghost
+                >
+                  {/* 第一步：基础信息 */}
+                  <Collapse.Panel
+                    header={<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Badge count="1" style={{ backgroundColor: '#1677ff' }} /><span>基础信息</span></div>}
+                    key="1"
+                  >
+                    <div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
+                      <div style={{ flex: 1 }}>
+                        <Form.Item name="name" label="接口名称" rules={[{ required: true, message: '请输入接口名称' }]}>
+                          <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) => {
+                              if (Array.isArray(value) && value.length > 0) {
+                                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>
+                  </Collapse.Panel>
+
+                  {/* 第二步：URL配置（复用 Modal 的内容） */}
+                  <Collapse.Panel
+                    header={<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Badge count="2" style={{ backgroundColor: '#1677ff' }} /><span>URL配置</span></div>}
+                    key="2"
+                  >
+                    <div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
+                      <div style={{ flex: 1 }}>
+                        <Form.Item name="pattern" label="URL匹配规则" rules={[{ required: true, message: '请输入URL匹配规则' }, ({ getFieldValue }) => ({ validator(_, value) { const proxyType = getFieldValue('proxyType'); if (!value) return Promise.resolve(); if (proxyType === 'url_redirect') { try { new URL(value); return Promise.resolve(); } catch (e) { return Promise.reject(new Error('URL重定向模式下，URL匹配规则必须是完整的URL')); } } if (proxyType === 'redirect') { if (value.startsWith('http://') || value.startsWith('https://')) return Promise.resolve(); return Promise.reject(new Error('重定向模式下，URL匹配规则必须以http://或https://开头')); } return Promise.resolve(); } })]}>
+                          <Input placeholder="根据选择的处理方式输入相应格式的URL" />
+                        </Form.Item>
+                      </div>
+                      <div style={{ flex: 1 }}>
+                        <Form.Item name="proxyType" label="处理方式" rules={[{ required: true, message: '请选择处理方式' }]}>
+                          <Select onChange={() => form.setFieldsValue({ pattern: '' })}>
+                            {proxyTypes.map(item => (<Option key={item.value} value={item.value}>{item.label}</Option>))}
+                          </Select>
+                        </Form.Item>
+                      </div>
+                    </div>
+                    <div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
+                      <div style={{ flex: 1 }}>
+                        <Form.Item name="httpMethod" label="请求方法" rules={[{ required: true, message: '请选择请求方法' }]}>
+                          <Select>{httpMethods.map(item => (<Option key={item.value} value={item.value}>{item.label}</Option>))}</Select>
+                        </Form.Item>
+                      </div>
+                      <div style={{ flex: 1 }} />
+                    </div>
+                  </Collapse.Panel>
+
+                  {/* 第三步：高级配置 */}
+                  <Collapse.Panel
+                    header={<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Badge count="3" style={{ backgroundColor: '#1677ff' }} /><span>高级配置</span></div>}
+                    key="3"
+                  >
+                    <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.proxyType !== currentValues.proxyType}>
+                      {({ getFieldValue, setFieldsValue }) => {
+                        const proxyType = getFieldValue('proxyType');
+                        if (proxyType === 'response') {
+                          return (
+                            <>
+                              <div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
+                                <div style={{ flex: 1 }}>
+                                  <Form.Item name="statusCode" label="状态码" rules={[{ required: true, message: '请选择状态码' }]}>
+                                    <Select>{statusCodes.map(item => (<Option key={item.value} value={item.value}>{item.label}</Option>))}</Select>
+                                  </Form.Item>
+                                </div>
+                                <div style={{ flex: 1 }}>
+                                  <Form.Item name="contentType" label="内容类型" rules={[{ required: true, message: '请选择内容类型' }]}>
+                                    <Select>{contentTypes.map(item => (<Option key={item.value} value={item.value}>{item.label}</Option>))}</Select>
+                                  </Form.Item>
+                                </div>
+                                <div style={{ flex: 1 }}>
+                                  <Form.Item name="responseDelay" label="延迟响应(毫秒)" rules={[{ pattern: /^\d*$/, message: '请输入有效的数字' }]}>
+                                    <Input placeholder="例如：500" />
+                                  </Form.Item>
+                                </div>
+                              </div>
+                              {interfaceParamMatcherEnabled && (
+                              <Form.Item label="接口匹配条件" tooltip="接口级入参匹配：用于区分同一URL下的不同接口定义。可为每条规则指定响应内容，匹配时直接返回该响应；不指定则走响应级匹配逻辑。">
+                                <Form.List name="paramMatchers">
+                                  {(fields, { add, remove }) => (<>
+                                    {fields.map(({ key, name, ...restField }) => (
+                                      <div key={key} style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '8px' }}>
+                                        <Form.Item {...restField} name={[name, 'paramPath']} rules={[{ required: true, message: '请输入参数路径' }]} style={{ flex: 1, margin: 0 }}>
+                                          <Input placeholder="参数路径（如：userId 或 data.user.id）" />
+                                        </Form.Item>
+                                        <Form.Item {...restField} name={[name, 'paramValue']} rules={[{ required: true, message: '请输入期望值' }]} style={{ flex: 1, margin: 0 }}>
+                                          <Input placeholder="期望值（如：123 或 admin）" />
+                                        </Form.Item>
+                                        <Form.Item {...restField} name={[name, 'matchType']} style={{ width: 90, margin: 0 }} initialValue="exact">
+                                          <Select><Option value="exact">精确匹配</Option><Option value="contains">包含</Option><Option value="regex">正则</Option></Select>
+                                        </Form.Item>
+                                        <Form.Item noStyle shouldUpdate>
+                                          {({ getFieldValue }) => {
+                                            const responses = getFieldValue('responses') || [];
+                                            return (
+                                              <Form.Item {...restField} name={[name, 'targetResponseId']} style={{ width: 130, margin: 0 }}>
+                                                <Select allowClear placeholder="指定响应（可选）">
+                                                  {responses.filter(r => r && r.id).map(r => (
+                                                    <Option key={r.id} value={r.id}>{r.name || '未命名'}</Option>
+                                                  ))}
+                                                </Select>
+                                              </Form.Item>
+                                            );
+                                          }}
+                                        </Form.Item>
+                                        <Button type="text" danger icon={<DeleteOutlined />} onClick={() => remove(name)} />
+                                      </div>
+                                    ))}
+                                    <Button type="dashed" onClick={() => add()} icon={<PlusOutlined />} style={{ width: '100%' }}>添加参数匹配规则</Button>
+                                  </>)}
+                                </Form.List>
+                              </Form.Item>
+                              )}
+                              <Form.Item name="responses" initialValue={[]} hidden><Input /></Form.Item>
+                              <Form.Item name="activeResponseId" hidden><Input /></Form.Item>
+                              <Form.Item noStyle shouldUpdate>
+                                {({ getFieldValue }) => {
+                                  let responses = getFieldValue('responses') || [];
+                                  const activeResponseId = getFieldValue('activeResponseId');
+                                  if (!Array.isArray(responses)) { try { responses = JSON.parse(responses); } catch (e) { responses = []; } }
+                                  return (<ResponseContentEditor form={form} responses={responses} activeResponseId={activeResponseId} onPreview={handlePreview} />);
+                                }}
+                              </Form.Item>
+                            </>
+                          );
+                        } else if (proxyType === 'redirect' || proxyType === 'url_redirect') {
+                          return (
+                            <>
+                              <Form.Item name="targetUrl" label="重定向目标URL" rules={[{ required: true, message: '请输入重定向目标URL' }, { validator(_, value) { if (!value) return Promise.resolve(); try { new URL(value); return Promise.resolve(); } catch (e) { return Promise.reject(new Error('请输入有效的URL格式')); } } }]} tooltip="重定向的目标URL，必须是完整的URL格式">
+                                <Input placeholder="例如：https://api.example.com/users" />
+                              </Form.Item>
+                              <Form.Item label="自定义请求头">
+                                <Form.List name="headerItems">
+                                  {(fields, { add, remove }) => (<>
+                                    {fields.map(({ key, name, ...restField }) => (
+                                      <div key={key} style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '8px' }}>
+                                        <Form.Item {...restField} name={[name, 'headerName']} rules={[{ required: true, message: '请输入请求头名称' }]} style={{ flex: 1, margin: 0 }}><Input placeholder="请求头名称（如：Authorization）" /></Form.Item>
+                                        <Form.Item {...restField} name={[name, 'headerValue']} rules={[{ required: true, message: '请输入请求头值' }]} style={{ flex: 1, margin: 0 }}><Input placeholder="请求头值（如：Bearer token123）" /></Form.Item>
+                                        <Button type="text" danger icon={<DeleteOutlined />} onClick={() => remove(name)} />
+                                      </div>
+                                    ))}
+                                    <Button type="dashed" onClick={() => add()} icon={<PlusOutlined />} style={{ width: '100%', marginTop: '8px' }}>添加请求头</Button>
+                                  </>)}
+                                </Form.List>
+                              </Form.Item>
+                            </>
+                          );
+                        }
+                        return null;
+                      }}
+                    </Form.Item>
+                  </Collapse.Panel>
+                </Collapse>
+              </Form>
+            </div>
+          </Drawer>
+        ) : (
+          <Modal
           title={
             <div style={{ 
               fontSize: '18px', 
@@ -1784,10 +2059,11 @@ const InterfaceManagement = () => {
                         </div>
                       </div>
 
-                      {/* 请求入参匹配设置 */}
+                      {/* 请求入参匹配设置（接口级，用于同URL多接口区分） */}
+                      {interfaceParamMatcherEnabled && (
                       <Form.Item
-                        label="请求入参匹配"
-                        tooltip="设置请求参数的匹配条件，只有当请求参数满足条件时才返回对应的响应。支持嵌套属性路径，如：a.b.c"
+                        label="接口匹配条件"
+                        tooltip="接口级入参匹配：用于区分同一URL下的不同接口定义。可为每条规则指定响应内容，匹配时直接返回该响应；不指定则走响应级匹配逻辑。支持嵌套属性路径，如：a.b.c"
                       >
                         <Form.List name="paramMatchers">
                           {(fields, { add, remove }) => (
@@ -1828,6 +2104,20 @@ const InterfaceManagement = () => {
                                       <Option value="regex">正则</Option>
                                     </Select>
                                   </Form.Item>
+                                  <Form.Item noStyle shouldUpdate>
+                                    {({ getFieldValue }) => {
+                                      const responses = getFieldValue('responses') || [];
+                                      return (
+                                        <Form.Item {...restField} name={[name, 'targetResponseId']} style={{ width: 140, margin: 0 }}>
+                                          <Select allowClear placeholder="指定响应（可选）">
+                                            {responses.filter(r => r && r.id).map(r => (
+                                              <Option key={r.id} value={r.id}>{r.name || '未命名'}</Option>
+                                            ))}
+                                          </Select>
+                                        </Form.Item>
+                                      );
+                                    }}
+                                  </Form.Item>
                               <Button 
                                     type="text" 
                                     danger 
@@ -1876,6 +2166,7 @@ const InterfaceManagement = () => {
                           )}
                         </Form.List>
                       </Form.Item>
+                      )}
 
                       {/* 隐藏的表单字段用于存储响应数据 */}
                       <Form.Item 
@@ -2000,6 +2291,7 @@ const InterfaceManagement = () => {
             </Form>
           </div>
         </Modal>
+        )}
                     
         {/* 使用拆分后的预览模态框组件 */}
         <PreviewModal
@@ -2008,15 +2300,26 @@ const InterfaceManagement = () => {
           previewContent={previewContent}
         />
 
-        {/* 数据管理弹窗 */}
-        <DataManagementModal
-          visible={dataModalVisible}
-          onCancel={() => { setDataModalVisible(false); setDataModalRecord(null); }}
-          interfaceItem={dataModalRecord}
-          onSaved={() => {
-            fetchInterfaces();
-          }}
-        />
+        {/* 数据管理弹窗/抽屉 */}
+        {displayMode === 'drawer' ? (
+          <DataManagementDrawer
+            visible={dataModalVisible}
+            onCancel={() => { setDataModalVisible(false); setDataModalRecord(null); }}
+            interfaceItem={dataModalRecord}
+            onSaved={() => {
+              fetchInterfaces();
+            }}
+          />
+        ) : (
+          <DataManagementModal
+            visible={dataModalVisible}
+            onCancel={() => { setDataModalVisible(false); setDataModalRecord(null); }}
+            interfaceItem={dataModalRecord}
+            onSaved={() => {
+              fetchInterfaces();
+            }}
+          />
+        )}
       </div>
     </AppLayout>
   );