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

package/ui/src/pages/Settings.js

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import AppLayout from '../components/AppLayout';
-import { Card, Typography, Switch, Space, Divider } from 'antd';
+import { Card, Typography, Switch, Space, Modal, Button, message } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 import axios from 'axios';
 import '../styles/settings.css';
 
-const { Title, Text, Paragraph } = Typography;
+const { Text } = Typography;
 
 const syncSettingsToBackend = (patch) => {
   axios.put('/cgi-bin/settings', patch).catch(() => {});
@@ -15,6 +16,7 @@ const Settings = () => {
   const [interfaceFormDisplayMode, setInterfaceFormDisplayMode] = useState('modal');
   const [interfaceParamMatcherEnabled, setInterfaceParamMatcherEnabled] = useState(true);
   const [responseParamMatcherEnabled, setResponseParamMatcherEnabled] = useState(true);
+  const [cyberThemeEnabled, setCyberThemeEnabled] = useState(true);
 
   useEffect(() => {
     const savedMode = localStorage.getItem('dataManagementDisplayMode');
@@ -38,6 +40,10 @@ const Settings = () => {
       const savedResponseParamMatcher = localStorage.getItem('responseParamMatcherEnabled');
       if (savedResponseParamMatcher !== null) setResponseParamMatcherEnabled(savedResponseParamMatcher !== 'false');
     });
+
+    // 读取赛博朋克主题开关（默认开启）
+    const savedCyber = localStorage.getItem('cyberTheme');
+    setCyberThemeEnabled(savedCyber !== 'false');
   }, []);
 
   const handleDisplayModeChange = (checked) => {
@@ -68,6 +74,66 @@ const Settings = () => {
     window.dispatchEvent(new Event('storage'));
   };
 
+  const handleCyberThemeChange = (checked) => {
+    setCyberThemeEnabled(checked);
+    localStorage.setItem('cyberTheme', String(checked));
+    window.dispatchEvent(new Event('storage'));
+    message.success(checked ? '赛博朋克主题已开启，刷新页面后生效' : '经典主题已开启，刷新页面后生效');
+    // 1.5秒后自动刷新
+    setTimeout(() => {
+      window.location.reload();
+    }, 1500);
+  };
+
+  const showMatcherRuleModal = (type) => {
+    if (type === 'interface') {
+      Modal.info({
+        title: '接口入参匹配规则说明',
+        width: 560,
+        content: (
+          <div>
+            <p>用于区分同一 URL 下的不同接口定义（接口级匹配）。</p>
+            <p>执行顺序与优先级：</p>
+            <ul>
+              <li>先进行 URL 匹配，命中多个接口时，按接口匹配条件顺序查找第一条命中规则。</li>
+              <li>若命中规则且配置了目标响应，则直接返回该响应（最高优先级）。</li>
+              <li>若命中规则但未配置目标响应，则进入“响应入参匹配”阶段继续判断。</li>
+              <li>若本开关关闭，则跳过接口级匹配，直接走“响应入参匹配”（若开启）。</li>
+            </ul>
+            <p>兜底逻辑：</p>
+            <ul>
+              <li>若最终没有任何入参规则命中，系统返回默认响应。</li>
+              <li>支持嵌套参数路径，例如：data.user.id。</li>
+            </ul>
+          </div>
+        )
+      });
+      return;
+    }
+
+    Modal.info({
+      title: '响应入参匹配规则说明',
+      width: 560,
+      content: (
+        <div>
+          <p>用于在同一接口内，根据请求参数选择具体响应（响应级匹配）。</p>
+          <p>执行顺序与优先级：</p>
+          <ul>
+            <li>仅在“接口入参匹配”未直接确定目标响应时才会执行。</li>
+            <li>按响应配置顺序匹配，命中第一条规则即返回对应响应。</li>
+            <li>支持精确匹配、包含匹配、正则匹配。</li>
+            <li>若本开关关闭，则跳过响应级匹配，直接使用默认响应。</li>
+          </ul>
+          <p>兜底逻辑：</p>
+          <ul>
+            <li>开启但未命中任一规则时，使用默认响应。</li>
+            <li>与接口级都关闭时，请求将直接返回默认响应。</li>
+          </ul>
+        </div>
+      )
+    });
+  };
+
   return (
     <AppLayout>
       <div className="page-container">
@@ -124,7 +190,16 @@ const Settings = () => {
           <div className="settings-item">
             <div className="settings-item-header">
               <div>
-                <div className="settings-item-title">接口入参匹配</div>
+                <div className="settings-item-title">
+                  接口入参匹配
+                  <Button
+                    type="text"
+                    size="small"
+                    className="settings-help-icon"
+                    icon={<QuestionCircleOutlined />}
+                    onClick={() => showMatcherRuleModal('interface')}
+                  />
+                </div>
                 <div className="settings-item-description">
                   是否在接口编辑表单中显示「接口匹配条件」配置区域
                 </div>
@@ -144,7 +219,16 @@ const Settings = () => {
           <div className="settings-item">
             <div className="settings-item-header">
               <div>
-                <div className="settings-item-title">响应入参匹配</div>
+                <div className="settings-item-title">
+                  响应入参匹配
+                  <Button
+                    type="text"
+                    size="small"
+                    className="settings-help-icon"
+                    icon={<QuestionCircleOutlined />}
+                    onClick={() => showMatcherRuleModal('response')}
+                  />
+                </div>
                 <div className="settings-item-description">
                   是否在响应内容编辑器中显示「入参匹配规则」配置区域
                 </div>
@@ -161,9 +245,31 @@ const Settings = () => {
             </div>
           </div>
         </Card>
+
+        <Card title="主题设置" className="settings-card" style={{ marginTop: 24 }}>
+          <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">
+                  {cyberThemeEnabled ? '已开启' : '已关闭'}
+                </Text>
+                <Switch
+                  checked={cyberThemeEnabled}
+                  onChange={handleCyberThemeChange}
+                />
+              </Space>
+            </div>
+          </div>
+        </Card>
       </div>
     </AppLayout>
   );
 };
 
-export default Settings; 
+export default Settings;