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

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,11 +1,73 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import AppLayout from '../components/AppLayout';
-import { Card, Typography, Empty } from 'antd';
+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(() => {
+    const savedMode = localStorage.getItem('dataManagementDisplayMode');
+    if (savedMode) setDisplayMode(savedMode);
+
+    const savedInterfaceFormMode = localStorage.getItem('interfaceFormDisplayMode');
+    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);
+    window.dispatchEvent(new Event('storage'));
+  };
+
+  const handleInterfaceFormDisplayModeChange = (checked) => {
+    const newMode = checked ? 'drawer' : 'modal';
+    setInterfaceFormDisplayMode(newMode);
+    localStorage.setItem('interfaceFormDisplayMode', newMode);
+    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'));
+  };
+
   return (
     <AppLayout>
       <div className="page-container">
@@ -19,10 +81,85 @@ const Settings = () => {
         </div>
 
         <Card title="界面设置" className="settings-card">
-          <Empty 
-            description="暂无可配置项" 
-            style={{ padding: '40px 0' }}
-          />
+          <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">
+                  {displayMode === 'drawer' ? '抽屉模式' : '弹窗模式'}
+                </Text>
+                <Switch 
+                  checked={displayMode === 'drawer'}
+                  onChange={handleDisplayModeChange}
+                />
+              </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">
+                  {interfaceFormDisplayMode === 'drawer' ? '抽屉模式' : '弹窗模式'}
+                </Text>
+                <Switch 
+                  checked={interfaceFormDisplayMode === 'drawer'}
+                  onChange={handleInterfaceFormDisplayModeChange}
+                />
+              </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>

package/ui/src/styles/interface-management.css

@@ -294,20 +294,11 @@
 .interface-table td {
   padding: 12px 16px !important;
   white-space: nowrap;
-  overflow: visible !important;
-  text-overflow: ellipsis;
-}
-
-/* 确保表格容器不裁剪下拉菜单 */
-.interface-list-container {
-  overflow: visible !important;
-}
-
-.interface-list-container .ant-table-container {
-  overflow: visible !important;
+  overflow: hidden;
 }
 
-.interface-list-container .ant-table-body {
+/* 当前响应列需要 overflow: visible 以显示完整的下拉菜单 */
+.interface-table td.current-response-cell {
   overflow: visible !important;
 }
 

package/ui/src/styles/settings.css

@@ -33,6 +33,35 @@
   font-weight: 500;
 }
 
+/* 设置项样式 */
+.settings-item {
+  padding: 16px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.settings-item:last-child {
+  border-bottom: none;
+}
+
+.settings-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.settings-item-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #262626;
+  margin-bottom: 4px;
+}
+
+.settings-item-description {
+  font-size: 12px;
+  color: #8c8c8c;
+  line-height: 1.5;
+}
+
 .settings-section {
   margin-bottom: 32px;
 }