whistle.mock-plugins 1.2.2-beta.8 → 1.3.0

package/ui/src/pages/InterfaceManagementV2.js

@@ -2,7 +2,7 @@
  * InterfaceManagementV2.js - 接口管理页面
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import AppLayout from '../components/AppLayout';
 import { 
@@ -31,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;
@@ -42,13 +43,13 @@ const COLUMN_CONFIG = [
   { key: 'group', title: '分组', required: false },
   { key: 'urlPattern', title: 'URL匹配规则', required: false },
   { key: 'proxyType', title: '处理方式', required: false },
-  { key: 'currentResponse', 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 },
   { key: 'customHeaders', title: '自定义头', required: false },
-  { key: 'paramMatchers', title: '匹配规则', required: false },
+  { key: 'paramMatchers', title: '参数匹配', required: false },
   { key: 'httpMethod', title: '请求方法', required: false },
   { key: 'action', title: '操作', required: true }
 ];
@@ -86,10 +87,23 @@ const InterfaceManagement = () => {
   const [currentResponseId, setCurrentResponseId] = useState(null);
   
   // 搜索状态
+  const searchRef = useRef(null);
   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();
 
@@ -123,6 +137,82 @@ const InterfaceManagement = () => {
     }
   }, [selectedFeatureId]);
 
+  // 键盘快捷键监听
+  useEffect(() => {
+    const handleSave = () => {
+      if (modalVisible) {
+        handleSubmit();
+      }
+    };
+    const handleNew = () => {
+      handleAddInterface();
+    };
+    const handleFocusSearch = () => {
+      searchRef.current?.focus();
+    };
+    window.addEventListener('shortcut-save', handleSave);
+    window.addEventListener('shortcut-new-interface', handleNew);
+    window.addEventListener('shortcut-focus-search', handleFocusSearch);
+    return () => {
+      window.removeEventListener('shortcut-save', handleSave);
+      window.removeEventListener('shortcut-new-interface', handleNew);
+      window.removeEventListener('shortcut-focus-search', handleFocusSearch);
+    };
+  }, [modalVisible]);
+
+  // 监听数据管理显示模式变化
+  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);
 
@@ -131,9 +221,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);
         }
@@ -179,7 +272,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;
@@ -385,7 +479,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;
@@ -501,6 +596,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 : ''),
@@ -508,7 +611,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'),
@@ -575,6 +678,7 @@ const InterfaceManagement = () => {
 
   const handleSelectFeature = (featureId) => {
     setSelectedFeatureId(featureId);
+    localStorage.setItem('selectedFeatureId', featureId);
     // 切换功能模块时重置分页到第一页，但保留其他配置
     saveTableConfig({ current: 1 });
   };
@@ -800,74 +904,31 @@ const InterfaceManagement = () => {
       },
     },
     {
-      title: '响应配置',
+      title: '当前响应',
       dataIndex: 'activeResponseId',
       key: 'currentResponse',
-      width: 160,
+      width: 200,
       render: (activeResponseId, record) => {
-        if (record.proxyType !== 'response') {
-          return <span style={{ color: '#ccc' }}>-</span>;
-        }
+        // 如果没有响应数据，返回空
         if (!record.responses || !Array.isArray(record.responses) || record.responses.length === 0) {
-          return <span style={{ color: '#ff4d4f', fontSize: '12px' }}>无响应数据</span>;
+          return <span className="no-response">无响应数据</span>;
         }
 
-        const total = record.responses.length;
-        const hasSmartMatch = record.responses.some(
-          r => r.paramMatchers && Array.isArray(r.paramMatchers) && r.paramMatchers.length > 0
-        );
-        const fallbackResp = record.responses.find(r => r.id === activeResponseId) || record.responses[0];
-
-        const tooltipContent = (
-          <div style={{ maxWidth: 260 }}>
-            {record.responses.map((resp) => {
-              const matchers = resp.paramMatchers || [];
+        return (
+          <Select
+            value={activeResponseId || record.responses[0]?.id}
+            style={{ width: '100%' }}
+            onChange={(value) => handleResponseSwitch(record.id, value)}
+            disabled={record.proxyType !== 'response'}
+          >
+            {record.responses.map(resp => {
               return (
-                <div key={resp.id} style={{ marginBottom: 6 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                    {matchers.length > 0 ? (
-                      <Tag color="blue" style={{ fontSize: '11px', margin: 0 }}>{matchers.length}条规则</Tag>
-                    ) : (
-                      <Tag color="default" style={{ fontSize: '11px', margin: 0 }}>兜底</Tag>
-                    )}
-                    <span style={{ fontWeight: resp.id === activeResponseId ? 'bold' : 'normal' }}>
-                      {resp.name}
-                    </span>
-                  </div>
-                  {matchers.length > 0 && (
-                    <div style={{ paddingLeft: 8, marginTop: 2 }}>
-                      {matchers.map((m, i) => (
-                        <div key={i} style={{ fontSize: '11px', color: '#666' }}>
-                          {m.paramPath} = {m.paramValue}
-                          <span style={{ color: '#52c41a', marginLeft: 4 }}>
-                            ({m.matchType === 'exact' ? '精确' : m.matchType === 'contains' ? '包含' : '正则'})
-                          </span>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
+                <Option key={resp.id} value={resp.id}>
+                  {resp.name}
+                </Option>
               );
             })}
-          </div>
-        );
-
-        return (
-          <Tooltip title={tooltipContent} placement="left">
-            {hasSmartMatch ? (
-              <Tag color="blue" style={{ cursor: 'default' }}>
-                智能匹配 · {total}个响应
-              </Tag>
-            ) : total > 1 ? (
-              <Tag color="orange" style={{ cursor: 'default' }}>
-                手动切换 · {total}个响应
-              </Tag>
-            ) : (
-              <span style={{ color: '#999', fontSize: '12px' }}>
-                {fallbackResp?.name || '1个响应'}
-              </span>
-            )}
-          </Tooltip>
+          </Select>
         );
       },
     },
@@ -975,7 +1036,7 @@ const InterfaceManagement = () => {
               ))}
             </div>
           }>
-            <span style={{ color: '#1890ff' }}>
+            <span style={{ color: '#1677ff' }}>
               {count}个
               {hasRandomValue && <span style={{ marginLeft: 4 }}>🎲</span>}
             </span>
@@ -984,75 +1045,81 @@ const InterfaceManagement = () => {
       }
     },
     {
-      title: '匹配规则',
-      dataIndex: 'responses',
+      title: '参数匹配',
+      dataIndex: 'paramMatchers',
       key: 'paramMatchers',
-      width: 100,
-      render: (responses, record) => {
+      width: 120,
+      render: (_, record) => {
         if (record.proxyType !== 'response') {
-          return <span style={{ color: '#ccc' }}>-</span>;
+          return '-';
         }
 
-        // 汇总所有响应的 paramMatchers（响应级），兼容旧数据接口级 paramMatchers
-        const responsesWithMatchers = Array.isArray(responses)
-          ? responses.filter(r => r.paramMatchers && Array.isArray(r.paramMatchers) && r.paramMatchers.length > 0)
-          : [];
-        const totalRules = responsesWithMatchers.reduce((sum, r) => sum + r.paramMatchers.length, 0);
+        const showInterface = interfaceParamMatcherEnabled;
+        const showResponse = responseParamMatcherEnabled;
 
-        // 兼容旧数据：接口级 paramMatchers
-        const legacyMatchers = record.paramMatchers || [];
+        const interfaceMatchers = record.paramMatchers || [];
+        const interfaceCount = showInterface ? interfaceMatchers.filter(m => m.paramPath).length : 0;
 
-        if (totalRules === 0 && legacyMatchers.length === 0) {
-          return <span style={{ color: '#ccc' }}>-</span>;
-        }
+        // 统计所有响应级规则
+        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 (totalRules > 0) {
-          const tooltipContent = (
-            <div style={{ maxWidth: 280 }}>
-              {responsesWithMatchers.map(resp => (
-                <div key={resp.id} style={{ marginBottom: 6 }}>
-                  <div style={{ fontWeight: 'bold', marginBottom: 2 }}>{resp.name}：</div>
-                  {resp.paramMatchers.map((m, i) => (
-                    <div key={i} style={{ paddingLeft: 8, fontSize: '12px' }}>
-                      {m.paramPath} = {m.paramValue}
-                      <span style={{ color: '#52c41a', marginLeft: 4 }}>
-                        ({m.matchType === 'exact' ? '精确' : m.matchType === 'contains' ? '包含' : '正则'})
-                      </span>
-                    </div>
-                  ))}
-                </div>
-              ))}
-              {Array.isArray(responses) && responses.some(r => !r.paramMatchers || r.paramMatchers.length === 0) && (
-                <div style={{ color: '#999', fontSize: '12px', marginTop: 4 }}>
-                  + 兜底响应（无规则）
-                </div>
-              )}
-            </div>
-          );
-          return (
-            <Tooltip title={tooltipContent} placement="left">
-              <span style={{ color: '#1890ff', cursor: 'default' }}>{totalRules}条规则</span>
-            </Tooltip>
-          );
+        if (interfaceCount === 0 && responseMatcherTotal === 0) {
+          return '-';
         }
 
-        // 旧数据兼容展示
         const tooltipContent = (
-          <div>
-            {legacyMatchers.map((matcher, index) => (
-              <div key={index}>
-                {matcher.paramPath}: {matcher.paramValue}
-                <span style={{ color: '#52c41a', marginLeft: 4 }}>
-                  ({matcher.matchType === 'exact' ? '精确' : matcher.matchType === 'contains' ? '包含' : '正则'})
-                </span>
+          <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: '#1677ff' }}>响应级规则（共{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={tooltipContent} placement="left">
-            <span style={{ color: '#fa8c16', cursor: 'default' }}>{legacyMatchers.length}条(旧)</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>
         );
       }
@@ -1188,6 +1255,7 @@ const InterfaceManagement = () => {
               </div>
               
               <Search
+                ref={searchRef}
                 placeholder="搜索接口名称或URL"
                 onSearch={handleSearch}
                 value={searchValue}
@@ -1426,8 +1494,249 @@ 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',
+              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', 
@@ -1459,8 +1768,7 @@ const InterfaceManagement = () => {
           bodyStyle={{ 
             maxHeight: '75vh', 
             overflow: 'auto', 
-            padding: '0',
-            background: '#fafafa'
+            padding: '0'
           }}
           className="interface-modal"
         >
@@ -1774,10 +2082,114 @@ const InterfaceManagement = () => {
                         </div>
                       </div>
 
-                      {/* 入参匹配规则已移至各响应内部配置，此处保留隐藏字段向后兼容旧数据 */}
-                      <Form.Item name="paramMatchers" hidden initialValue={[]}>
-                        <Input />
+                      {/* 请求入参匹配设置（接口级，用于同URL多接口区分） */}
+                      {interfaceParamMatcherEnabled && (
+                      <Form.Item
+                        label="接口匹配条件"
+                        tooltip="接口级入参匹配：用于区分同一URL下的不同接口定义。可为每条规则指定响应内容，匹配时直接返回该响应；不指定则走响应级匹配逻辑。支持嵌套属性路径，如：a.b.c"
+                      >
+                        <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: '请输入参数路径' },
+                                      {
+                                        pattern: /^[a-zA-Z_$][a-zA-Z0-9_$.]*$/,
+                                        message: '请输入有效的参数路径，如：userId 或 data.user.id'
+                                      }
+                                    ]}
+                                    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: 100, margin: 0 }}
+                                    initialValue="exact"
+                                  >
+                                    <Select placeholder="匹配类型">
+                                      <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: 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 
+                                    icon={<DeleteOutlined />}
+                                    onClick={() => remove(name)}
+                                  />
+                                </div>
+                              ))}
+                              <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '8px' }}>
+                                <Button
+                                  type="dashed"
+                                  onClick={() => add()}
+                                  icon={<PlusOutlined />}
+                                  style={{ flex: 1 }}
+                                >
+                                  添加参数匹配规则
+                                </Button>
+                                <Popover
+                                  content={
+                                    <div style={{ maxWidth: '300px' }}>
+                                      <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>匹配规则说明：</div>
+                                      <div style={{ lineHeight: '1.6' }}>
+                                        <div>• <strong>精确匹配</strong>：参数值完全相等</div>
+                                        <div>• <strong>包含</strong>：参数值包含指定内容</div>
+                                        <div>• <strong>正则</strong>：参数值符合正则表达式</div>
+                                        <div>• <strong>嵌套路径</strong>：使用点号分隔，如 data.user.id</div>
+                                      </div>
+                                    </div>
+                                  }
+                                  title="参数匹配规则"
+                                  trigger="click"
+                                  placement="top"
+                                >
+                                  <Button
+                                    type="text"
+                                    icon={<QuestionCircleOutlined />}
+                                    style={{ 
+                                      color: '#999',
+                                      padding: '4px'
+                                    }}
+                                    size="small"
+                                  />
+                                </Popover>
+                              </div>
+                            </>
+                          )}
+                        </Form.List>
                       </Form.Item>
+                      )}
 
                       {/* 隐藏的表单字段用于存储响应数据 */}
                       <Form.Item 
@@ -1902,6 +2314,7 @@ const InterfaceManagement = () => {
             </Form>
           </div>
         </Modal>
+        )}
                     
         {/* 使用拆分后的预览模态框组件 */}
         <PreviewModal
@@ -1910,15 +2323,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>
   );