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

package/lib/routes/settings.js

@@ -0,0 +1,51 @@
+const express = require('express');
+const fs = require('fs-extra');
+const path = require('path');
+const storage = require('../storage');
+
+const DATA_DIR = storage.DATA_DIR;
+const SETTINGS_FILE = path.join(DATA_DIR, 'settings.json');
+
+fs.ensureDirSync(DATA_DIR);
+
+const DEFAULT_SETTINGS = {
+  interfaceParamMatcherEnabled: true,
+  responseParamMatcherEnabled: true,
+};
+
+const getSettings = () => {
+  try {
+    if (!fs.existsSync(SETTINGS_FILE)) return { ...DEFAULT_SETTINGS };
+    return { ...DEFAULT_SETTINGS, ...fs.readJsonSync(SETTINGS_FILE) };
+  } catch (err) {
+    return { ...DEFAULT_SETTINGS };
+  }
+};
+
+const saveSettings = (settings) => {
+  fs.writeJsonSync(SETTINGS_FILE, settings, { spaces: 2 });
+};
+
+const initRouter = () => {
+  const router = express.Router();
+  router.use(express.json());
+
+  router.get('/settings', (req, res) => {
+    res.json(getSettings());
+  });
+
+  router.put('/settings', (req, res) => {
+    try {
+      const current = getSettings();
+      const updated = { ...current, ...req.body };
+      saveSettings(updated);
+      res.json(updated);
+    } catch (err) {
+      res.status(500).json({ error: '保存设置失败' });
+    }
+  });
+
+  return router;
+};
+
+module.exports = { initRouter, getSettings };

package/lib/ruleManager.js

@@ -1,7 +1,24 @@
 const fs = require('fs');
+const fse = require('fs-extra');
 const path = require('path');
 const url = require('url');
 const Mock = require('mockjs');
+const storage = require('./storage');
+
+const SETTINGS_FILE = path.join(storage.DATA_DIR, 'settings.json');
+
+const getSettings = () => {
+  try {
+    if (!fse.existsSync(SETTINGS_FILE)) return { interfaceParamMatcherEnabled: true, responseParamMatcherEnabled: true };
+    const s = fse.readJsonSync(SETTINGS_FILE);
+    return {
+      interfaceParamMatcherEnabled: s.interfaceParamMatcherEnabled !== false,
+      responseParamMatcherEnabled: s.responseParamMatcherEnabled !== false,
+    };
+  } catch (e) {
+    return { interfaceParamMatcherEnabled: true, responseParamMatcherEnabled: true };
+  }
+};
 
 // 获取嵌套对象属性值的工具函数
 const getNestedValue = (obj, path) => {
@@ -268,29 +285,34 @@ const ruleManager = {
       return null;
     }
     
-    // 在URL匹配的接口中，查找参数也匹配的接口
-    for (const intf of urlMatchedInterfaces) {
-      // 检查参数匹配
-      if (isParamMatch(req, intf.paramMatchers, this.log)) {
-        this.log(`[规则处理器] 找到完全匹配的接口: ${intf.name} (URL + 参数匹配)`);
-        return intf;
-      } else {
-        this.log(`[规则处理器] 接口 ${intf.name} URL匹配但参数不匹配，继续查找...`);
+    // 在URL匹配的接口中，查找参数也匹配的接口（受接口入参匹配开关控制）
+    const settings = getSettings();
+    if (settings.interfaceParamMatcherEnabled) {
+      for (const intf of urlMatchedInterfaces) {
+        if (isParamMatch(req, intf.paramMatchers, this.log)) {
+          this.log(`[规则处理器] 找到完全匹配的接口: ${intf.name} (URL + 参数匹配)`);
+          return intf;
+        } else {
+          this.log(`[规则处理器] 接口 ${intf.name} URL匹配但参数不匹配，继续查找...`);
+        }
       }
+
+      // 如果没有参数匹配的接口，返回第一个没有参数匹配规则的接口
+      const fallbackInterface = urlMatchedInterfaces.find(intf =>
+        !intf.paramMatchers || !Array.isArray(intf.paramMatchers) || intf.paramMatchers.length === 0
+      );
+
+      if (fallbackInterface) {
+        this.log(`[规则处理器] 使用回退接口: ${fallbackInterface.name} (无参数匹配规则)`);
+        return fallbackInterface;
+      }
+
+      this.log(`[规则处理器] 所有URL匹配的接口都有参数匹配规则且都不满足，未找到合适的接口`);
+      return null;
+    } else {
+      this.log('[规则处理器] 接口入参匹配已关闭，直接返回第一个URL匹配的接口');
+      return urlMatchedInterfaces[0];
     }
-    
-    // 如果没有参数匹配的接口，返回第一个没有参数匹配规则的接口
-    const fallbackInterface = urlMatchedInterfaces.find(intf => 
-      !intf.paramMatchers || !Array.isArray(intf.paramMatchers) || intf.paramMatchers.length === 0
-    );
-    
-    if (fallbackInterface) {
-      this.log(`[规则处理器] 使用回退接口: ${fallbackInterface.name} (无参数匹配规则)`);
-      return fallbackInterface;
-    }
-    
-    this.log(`[规则处理器] 所有URL匹配的接口都有参数匹配规则且都不满足，未找到合适的接口`);
-    return null;
   },
 
   /**
@@ -756,21 +778,48 @@ const ruleManager = {
     // 检查是否有多响应配置
     if (config.responses && Array.isArray(config.responses) && config.responses.length > 0) {
       let selectedResponse = null;
+      const settings = getSettings();
 
-      // 1. 按顺序查找第一个入参匹配的响应
-      for (const resp of config.responses) {
-        if (resp.paramMatchers && Array.isArray(resp.paramMatchers) && resp.paramMatchers.length > 0) {
-          if (isParamMatch(req, resp.paramMatchers, this.log)) {
-            selectedResponse = resp;
-            this.log(`[规则处理器] 响应级入参匹配成功，使用响应: ${resp.name || '未命名'}`);
-            break;
-          } else {
-            this.log(`[规则处理器] 响应 "${resp.name || '未命名'}" 入参不匹配，继续检查下一个`);
+      // 1. 优先检查接口级 paramMatchers 中带 targetResponseId 的规则（受开关控制）
+      if (settings.interfaceParamMatcherEnabled) {
+        const interfaceMatchers = config.paramMatchers;
+        if (interfaceMatchers && Array.isArray(interfaceMatchers) && interfaceMatchers.length > 0) {
+          for (const matcher of interfaceMatchers) {
+            if (!matcher.targetResponseId) continue;
+            if (isParamMatch(req, [matcher], this.log)) {
+              const target = config.responses.find(r => r.id === matcher.targetResponseId);
+              if (target) {
+                selectedResponse = target;
+                this.log(`[规则处理器] 接口级规则指定响应匹配成功，使用响应: ${target.name || '未命名'}`);
+                break;
+              }
+            }
+          }
+        }
+      } else {
+        this.log('[规则处理器] 接口入参匹配已关闭，跳过接口级匹配');
+      }
+
+      // 2. 按顺序查找第一个响应级入参匹配的响应（受开关控制）
+      if (!selectedResponse) {
+        if (settings.responseParamMatcherEnabled) {
+          for (const resp of config.responses) {
+            if (resp.paramMatchers && Array.isArray(resp.paramMatchers) && resp.paramMatchers.length > 0) {
+              if (isParamMatch(req, resp.paramMatchers, this.log)) {
+                selectedResponse = resp;
+                this.log(`[规则处理器] 响应级入参匹配成功，使用响应: ${resp.name || '未命名'}`);
+                break;
+              } else {
+                this.log(`[规则处理器] 响应 "${resp.name || '未命名'}" 入参不匹配，继续检查下一个`);
+              }
+            }
           }
+        } else {
+          this.log('[规则处理器] 响应入参匹配已关闭，跳过响应级匹配');
         }
       }
 
-      // 2. 无匹配则回退到 activeResponseId 指定的默认响应
+      // 3. 无匹配则回退到 activeResponseId 指定的默认响应
       if (!selectedResponse) {
         const activeResponseId = config.activeResponseId;
         selectedResponse = (activeResponseId && config.responses.find(r => r.id === activeResponseId))

package/lib/server.js

@@ -270,6 +270,10 @@ const app = express();
 app.use(express.json({limit: '100mb'}));
 app.use(express.urlencoded({ extended: true, limit: '100mb'}));
 
+// 注册设置路由
+const settingsRouter = require('./routes/settings');
+app.use('/api', settingsRouter.initRouter());
+
 // 加载功能和接口配置
 const loadConfigurations = () => {
   try {

package/package.json

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

package/ui/src/components/interface-management/ResponseContentEditor.js

@@ -42,6 +42,20 @@ const ResponseContentEditor = ({
   const [isTextareaFullscreen, setIsTextareaFullscreen] = useState(false);
   const [showSorting, setShowSorting] = useState(false);
 
+  const [responseParamMatcherEnabled, setResponseParamMatcherEnabled] = useState(() => {
+    const v = localStorage.getItem('responseParamMatcherEnabled');
+    return v === null ? true : v !== 'false';
+  });
+
+  useEffect(() => {
+    const handleStorage = () => {
+      const v = localStorage.getItem('responseParamMatcherEnabled');
+      setResponseParamMatcherEnabled(v === null ? true : v !== 'false');
+    };
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+
   // 查找激活的响应
   const activeResponseIndex = responses.findIndex(r => r.id === activeResponseId);
   const activeResponse = activeResponseIndex >= 0 ? responses[activeResponseIndex] : null;
@@ -289,10 +303,8 @@ const ResponseContentEditor = ({
           <Space size={6}>
             <FilterOutlined style={{ color: '#1890ff' }} />
             <span style={{ fontWeight: 'bold', color: '#333' }}>入参匹配规则</span>
-            {matchers.length > 0 ? (
+            {matchers.length > 0 && (
               <Tag color="blue" style={{ fontSize: '11px', padding: '0 4px' }}>{matchers.length}条</Tag>
-            ) : (
-              <Tag color="default" style={{ fontSize: '11px', padding: '0 4px' }}>无规则（默认响应）</Tag>
             )}
             <Tooltip title="满足所有规则时返回此响应；无规则的响应作为默认兜底。响应按列表顺序依次检查，第一个匹配的响应被返回。">
               <QuestionCircleOutlined style={{ color: '#bbb', cursor: 'help', fontSize: '12px' }} />
@@ -533,48 +545,12 @@ const ResponseContentEditor = ({
                     placeholder="选择要编辑的响应"
                     value={activeResponseId}
                     onChange={handleResponseSelect}
-                    optionLabelProp="label"
                   >
-                    {responses.map((resp, index) => {
-                      const matcherCount = (resp.paramMatchers || []).filter(m => m.paramPath).length;
-                      const isDefault = resp.id === getFieldValue('activeResponseId');
-                      const labelContent = (
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-                          <CheckCircleOutlined style={{ color: '#52c41a' }} />
-                          <span>{resp.name || `响应 ${index + 1}`}</span>
-                          {isDefault && <Tag color="green" style={{ marginLeft: 2, fontSize: '11px', padding: '0 4px' }}>默认</Tag>}
-                          {matcherCount > 0 && <Tag color="blue" style={{ marginLeft: 2, fontSize: '11px', padding: '0 4px' }}>{matcherCount}条规则</Tag>}
-                        </div>
-                      );
-                      return (
-                        <Option 
-                          key={resp.id} 
-                          value={resp.id}
-                          label={labelContent}
-                        >
-                          <div style={{ padding: '4px 0' }}>
-                            <div style={{ 
-                              display: 'flex', 
-                              alignItems: 'center', 
-                              justifyContent: 'space-between',
-                              marginBottom: '4px'
-                            }}>
-                              <span style={{ fontWeight: 'bold' }}>
-                                {resp.name || `响应 ${index + 1}`}
-                              </span>
-                              <Space size={4}>
-                                {isDefault && <Badge status="processing" text="默认" />}
-                                {matcherCount > 0 && (
-                                  <Tag color="blue" style={{ fontSize: '11px', padding: '0 4px' }}>
-                                    {matcherCount}条规则
-                                  </Tag>
-                                )}
-                              </Space>
-                            </div>
-                          </div>
-                        </Option>
-                      );
-                    })}
+                    {responses.map((resp, index) => (
+                      <Option key={resp.id} value={resp.id}>
+                        {resp.name || `响应 ${index + 1}`}
+                      </Option>
+                    ))}
                   </Select>
                   <Tooltip title="编辑响应名称">
                     <Button 
@@ -616,7 +592,7 @@ const ResponseContentEditor = ({
       </div>
 
       {/* 响应级入参匹配规则区域 */}
-      {activeResponse && renderParamMatchers()}
+      {activeResponse && responseParamMatcherEnabled && renderParamMatchers()}
 
       {/* 响应内容编辑区域 */}
       {activeResponse && (

package/ui/src/pages/InterfaceManagementV2.js

@@ -97,6 +97,12 @@ const InterfaceManagement = () => {
   // 接口表单显示模式（modal / drawer）
   const [interfaceFormDisplayMode, setInterfaceFormDisplayMode] = useState('modal');
 
+  // 接口入参匹配显示开关
+  const [interfaceParamMatcherEnabled, setInterfaceParamMatcherEnabled] = useState(true);
+
+  // 响应入参匹配显示开关
+  const [responseParamMatcherEnabled, setResponseParamMatcherEnabled] = useState(true);
+
   // 表单实例
   const [form] = Form.useForm();
 
@@ -170,6 +176,19 @@ const InterfaceManagement = () => {
     };
   }, []);
 
+  // 监听接口入参匹配 / 响应入参匹配开关变化
+  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);
 
@@ -178,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);
         }
@@ -632,6 +654,7 @@ const InterfaceManagement = () => {
 
   const handleSelectFeature = (featureId) => {
     setSelectedFeatureId(featureId);
+    localStorage.setItem('selectedFeatureId', featureId);
     // 切换功能模块时重置分页到第一页，但保留其他配置
     saveTableConfig({ current: 1 });
   };
@@ -873,27 +896,11 @@ const InterfaceManagement = () => {
             style={{ width: '100%' }}
             onChange={(value) => handleResponseSwitch(record.id, value)}
             disabled={record.proxyType !== 'response'}
-            optionLabelProp="label"
           >
             {record.responses.map(resp => {
-              const matcherCount = (resp.paramMatchers || []).filter(m => m.paramPath).length;
-              const isDefault = resp.id === activeResponseId;
-              const labelContent = (
-                <span style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-                  <span>{resp.name}</span>
-                  {isDefault && <Tag color="green" style={{ fontSize: '11px', padding: '0 4px', marginLeft: 2 }}>默认</Tag>}
-                  {matcherCount > 0 && <Tag color="blue" style={{ fontSize: '11px', padding: '0 4px', marginLeft: 2 }}>{matcherCount}条规则</Tag>}
-                </span>
-              );
               return (
-                <Option key={resp.id} value={resp.id} label={labelContent}>
-                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                    <span>{resp.name}</span>
-                    <Space size={4}>
-                      {isDefault && <Tag color="green" style={{ fontSize: '11px', padding: '0 4px' }}>默认</Tag>}
-                      {matcherCount > 0 && <Tag color="blue" style={{ fontSize: '11px', padding: '0 4px' }}>{matcherCount}条规则</Tag>}
-                    </Space>
-                  </div>
+                <Option key={resp.id} value={resp.id}>
+                  {resp.name}
                 </Option>
               );
             })}
@@ -1023,13 +1030,18 @@ const InterfaceManagement = () => {
           return '-';
         }
 
+        const showInterface = interfaceParamMatcherEnabled;
+        const showResponse = responseParamMatcherEnabled;
+
         const interfaceMatchers = record.paramMatchers || [];
-        const interfaceCount = interfaceMatchers.filter(m => m.paramPath).length;
+        const interfaceCount = showInterface ? interfaceMatchers.filter(m => m.paramPath).length : 0;
 
         // 统计所有响应级规则
-        const responsesWithMatchers = (record.responses || []).filter(resp =>
-          Array.isArray(resp.paramMatchers) && resp.paramMatchers.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
         );
@@ -1619,7 +1631,8 @@ const InterfaceManagement = () => {
                                   </Form.Item>
                                 </div>
                               </div>
-                              <Form.Item label="接口匹配条件" tooltip="接口级入参匹配：用于区分同一URL下的不同接口定义。若需要同一接口内不同入参返回不同响应，请在下方「响应内容编辑」中为每个响应单独配置匹配规则。">
+                              {interfaceParamMatcherEnabled && (
+                              <Form.Item label="接口匹配条件" tooltip="接口级入参匹配：用于区分同一URL下的不同接口定义。可为每条规则指定响应内容，匹配时直接返回该响应；不指定则走响应级匹配逻辑。">
                                 <Form.List name="paramMatchers">
                                   {(fields, { add, remove }) => (<>
                                     {fields.map(({ key, name, ...restField }) => (
@@ -1630,9 +1643,23 @@ const InterfaceManagement = () => {
                                         <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">
+                                        <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>
                                     ))}
@@ -1640,6 +1667,7 @@ const InterfaceManagement = () => {
                                   </>)}
                                 </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>
@@ -2032,9 +2060,10 @@ const InterfaceManagement = () => {
                       </div>
 
                       {/* 请求入参匹配设置（接口级，用于同URL多接口区分） */}
+                      {interfaceParamMatcherEnabled && (
                       <Form.Item
                         label="接口匹配条件"
-                        tooltip="接口级入参匹配：用于区分同一URL下的不同接口定义。满足条件时此接口才会被命中。若需要同一接口内不同入参返回不同响应，请在下方「响应内容编辑」中为每个响应单独配置匹配规则。支持嵌套属性路径，如：a.b.c"
+                        tooltip="接口级入参匹配：用于区分同一URL下的不同接口定义。可为每条规则指定响应内容，匹配时直接返回该响应；不指定则走响应级匹配逻辑。支持嵌套属性路径，如：a.b.c"
                       >
                         <Form.List name="paramMatchers">
                           {(fields, { add, remove }) => (
@@ -2075,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 
@@ -2123,6 +2166,7 @@ const InterfaceManagement = () => {
                           )}
                         </Form.List>
                       </Form.Item>
+                      )}
 
                       {/* 隐藏的表单字段用于存储响应数据 */}
                       <Form.Item 

package/ui/src/pages/MockDataV2.js

@@ -221,7 +221,7 @@ const MockData = () => {
   };
 
   const viewInterfaces = (feature) => {
-    // 导航到该功能的接口列表页面
+    localStorage.setItem('selectedFeatureId', feature.id);
     history.push(`/interface/${feature.id}`);
   };
 

package/ui/src/pages/Settings.js

@@ -1,33 +1,49 @@
 import React, { useState, useEffect } from 'react';
 import AppLayout from '../components/AppLayout';
 import { Card, Typography, Switch, Space, Divider } from 'antd';
+import axios from 'axios';
 import '../styles/settings.css';
 
 const { Title, Text, Paragraph } = Typography;
 
+const syncSettingsToBackend = (patch) => {
+  axios.put('/cgi-bin/settings', patch).catch(() => {});
+};
+
 const Settings = () => {
   const [displayMode, setDisplayMode] = useState('modal');
   const [interfaceFormDisplayMode, setInterfaceFormDisplayMode] = useState('modal');
+  const [interfaceParamMatcherEnabled, setInterfaceParamMatcherEnabled] = useState(true);
+  const [responseParamMatcherEnabled, setResponseParamMatcherEnabled] = useState(true);
 
   useEffect(() => {
-    // 从 localStorage 读取配置
     const savedMode = localStorage.getItem('dataManagementDisplayMode');
-    if (savedMode) {
-      setDisplayMode(savedMode);
-    }
+    if (savedMode) setDisplayMode(savedMode);
 
     const savedInterfaceFormMode = localStorage.getItem('interfaceFormDisplayMode');
-    if (savedInterfaceFormMode) {
-      setInterfaceFormDisplayMode(savedInterfaceFormMode);
-    }
+    if (savedInterfaceFormMode) setInterfaceFormDisplayMode(savedInterfaceFormMode);
+
+    // 优先从后端读取入参匹配开关，保持前后端一致
+    axios.get('/cgi-bin/settings').then(({ data }) => {
+      const ipm = data.interfaceParamMatcherEnabled !== false;
+      const rpm = data.responseParamMatcherEnabled !== false;
+      setInterfaceParamMatcherEnabled(ipm);
+      setResponseParamMatcherEnabled(rpm);
+      localStorage.setItem('interfaceParamMatcherEnabled', String(ipm));
+      localStorage.setItem('responseParamMatcherEnabled', String(rpm));
+      window.dispatchEvent(new Event('storage'));
+    }).catch(() => {
+      const savedInterfaceParamMatcher = localStorage.getItem('interfaceParamMatcherEnabled');
+      if (savedInterfaceParamMatcher !== null) setInterfaceParamMatcherEnabled(savedInterfaceParamMatcher !== 'false');
+      const savedResponseParamMatcher = localStorage.getItem('responseParamMatcherEnabled');
+      if (savedResponseParamMatcher !== null) setResponseParamMatcherEnabled(savedResponseParamMatcher !== 'false');
+    });
   }, []);
 
   const handleDisplayModeChange = (checked) => {
     const newMode = checked ? 'drawer' : 'modal';
     setDisplayMode(newMode);
     localStorage.setItem('dataManagementDisplayMode', newMode);
-    
-    // 触发 storage 事件，通知其他页面
     window.dispatchEvent(new Event('storage'));
   };
 
@@ -35,8 +51,20 @@ const Settings = () => {
     const newMode = checked ? 'drawer' : 'modal';
     setInterfaceFormDisplayMode(newMode);
     localStorage.setItem('interfaceFormDisplayMode', newMode);
-    
-    // 触发 storage 事件，通知其他页面
+    window.dispatchEvent(new Event('storage'));
+  };
+
+  const handleInterfaceParamMatcherChange = (checked) => {
+    setInterfaceParamMatcherEnabled(checked);
+    localStorage.setItem('interfaceParamMatcherEnabled', String(checked));
+    syncSettingsToBackend({ interfaceParamMatcherEnabled: checked });
+    window.dispatchEvent(new Event('storage'));
+  };
+
+  const handleResponseParamMatcherChange = (checked) => {
+    setResponseParamMatcherEnabled(checked);
+    localStorage.setItem('responseParamMatcherEnabled', String(checked));
+    syncSettingsToBackend({ responseParamMatcherEnabled: checked });
     window.dispatchEvent(new Event('storage'));
   };
 
@@ -92,6 +120,46 @@ const Settings = () => {
               </Space>
             </div>
           </div>
+
+          <div className="settings-item">
+            <div className="settings-item-header">
+              <div>
+                <div className="settings-item-title">接口入参匹配</div>
+                <div className="settings-item-description">
+                  是否在接口编辑表单中显示「接口匹配条件」配置区域
+                </div>
+              </div>
+              <Space>
+                <Text type="secondary">
+                  {interfaceParamMatcherEnabled ? '已开启' : '已关闭'}
+                </Text>
+                <Switch
+                  checked={interfaceParamMatcherEnabled}
+                  onChange={handleInterfaceParamMatcherChange}
+                />
+              </Space>
+            </div>
+          </div>
+
+          <div className="settings-item">
+            <div className="settings-item-header">
+              <div>
+                <div className="settings-item-title">响应入参匹配</div>
+                <div className="settings-item-description">
+                  是否在响应内容编辑器中显示「入参匹配规则」配置区域
+                </div>
+              </div>
+              <Space>
+                <Text type="secondary">
+                  {responseParamMatcherEnabled ? '已开启' : '已关闭'}
+                </Text>
+                <Switch
+                  checked={responseParamMatcherEnabled}
+                  onChange={handleResponseParamMatcherChange}
+                />
+              </Space>
+            </div>
+          </div>
         </Card>
       </div>
     </AppLayout>