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

package/ui/src/pages/MockDataV2.js

@@ -3,6 +3,7 @@
  */
 
 import React, { useState, useEffect } from 'react';
+import { useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import AppLayout from '../components/AppLayout';
 import { Card, Row, Col, Button, Modal, Form, Input, message, Switch, Empty, Spin, Typography, Tooltip, Badge, Select, Pagination, Table, Space, Tag } from 'antd';
@@ -57,6 +58,24 @@ const MockData = () => {
     fetchFeatures();
   }, []);
 
+  // 键盘快捷键监听
+  useEffect(() => {
+    const handleSave = () => {
+      if (showModal) {
+        handleSubmit();
+      }
+    };
+    const handleNew = () => {
+      openModal();
+    };
+    window.addEventListener('shortcut-save', handleSave);
+    window.addEventListener('shortcut-new-interface', handleNew);
+    return () => {
+      window.removeEventListener('shortcut-save', handleSave);
+      window.removeEventListener('shortcut-new-interface', handleNew);
+    };
+  }, [showModal]);
+
   // 获取所有功能模块
   const fetchFeatures = async () => {
     try {
@@ -221,7 +240,7 @@ const MockData = () => {
   };
 
   const viewInterfaces = (feature) => {
-    // 导航到该功能的接口列表页面
+    localStorage.setItem('selectedFeatureId', feature.id);
     history.push(`/interface/${feature.id}`);
   };
 
@@ -566,7 +585,7 @@ const MockData = () => {
         width: 100,
         align: 'center',
         render: (count) => (
-          <Badge count={count || 0} showZero style={{ backgroundColor: '#1890ff' }} />
+          <Badge count={count || 0} showZero style={{ backgroundColor: '#1677ff' }} />
         ),
       },
       {
@@ -661,17 +680,6 @@ const MockData = () => {
           <div className="title-section">
             <div className="title-with-badge">
               <h1 className="page-title">功能模块管理</h1>
-              <Badge 
-                count="V2" 
-                style={{ 
-                  backgroundColor: '#52c41a',
-                  fontSize: '12px',
-                  height: '20px',
-                  lineHeight: '20px',
-                  borderRadius: '10px',
-                  marginLeft: '12px'
-                }} 
-              />
             </div>
             <div className="page-description">
               创建和管理功能模块，为每个功能配置独立的接口

package/ui/src/pages/Settings.js

@@ -1,11 +1,146 @@
-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, Modal, Button, message, Radio } 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(() => {});
+};
 
 const Settings = () => {
+  const [displayMode, setDisplayMode] = useState('modal');
+  const [interfaceFormDisplayMode, setInterfaceFormDisplayMode] = useState('modal');
+  const [interfaceParamMatcherEnabled, setInterfaceParamMatcherEnabled] = useState(true);
+  const [responseParamMatcherEnabled, setResponseParamMatcherEnabled] = useState(true);
+  const [currentTheme, setCurrentTheme] = useState('light');
+
+  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');
+    });
+
+    // 读取主题设置（兼容旧版 cyberTheme）
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+      setCurrentTheme(savedTheme);
+    } else {
+      const oldCyber = localStorage.getItem('cyberTheme');
+      const themeValue = oldCyber === 'false' ? 'light' : oldCyber === 'true' ? 'cyber' : 'light';
+      setCurrentTheme(themeValue);
+      localStorage.setItem('theme', themeValue);
+    }
+  }, []);
+
+  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'));
+  };
+
+  const handleThemeChange = (e) => {
+    const newTheme = e.target.value;
+    setCurrentTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+    // 兼容旧版存储
+    localStorage.setItem('cyberTheme', String(newTheme === 'cyber'));
+    window.dispatchEvent(new Event('storage'));
+    const themeNames = { light: '经典亮色', cyber: '赛博朋克', earth: '大地色系' };
+    message.success(`${themeNames[newTheme]}主题已开启`);
+  };
+
+  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">
@@ -19,14 +154,146 @@ 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">
+                  接口入参匹配
+                  <Button
+                    type="text"
+                    size="small"
+                    className="settings-help-icon"
+                    icon={<QuestionCircleOutlined />}
+                    onClick={() => showMatcherRuleModal('interface')}
+                  />
+                </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">
+                  响应入参匹配
+                  <Button
+                    type="text"
+                    size="small"
+                    className="settings-help-icon"
+                    icon={<QuestionCircleOutlined />}
+                    onClick={() => showMatcherRuleModal('response')}
+                  />
+                </div>
+                <div className="settings-item-description">
+                  是否在响应内容编辑器中显示「入参匹配规则」配置区域
+                </div>
+              </div>
+              <Space>
+                <Text type="secondary">
+                  {responseParamMatcherEnabled ? '已开启' : '已关闭'}
+                </Text>
+                <Switch
+                  checked={responseParamMatcherEnabled}
+                  onChange={handleResponseParamMatcherChange}
+                />
+              </Space>
+            </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>
+            </div>
+            <Radio.Group
+              value={currentTheme}
+              onChange={handleThemeChange}
+              style={{ marginTop: 12 }}
+            >
+              <Space direction="vertical">
+                <Radio value="light">
+                  <Space>
+                    <span style={{ display: 'inline-block', width: 16, height: 16, borderRadius: 4, background: '#1890ff', verticalAlign: 'middle', marginRight: 4 }} />
+                    经典亮色 — Ant Design 默认亮色风格
+                  </Space>
+                </Radio>
+                <Radio value="cyber">
+                  <Space>
+                    <span style={{ display: 'inline-block', width: 16, height: 16, borderRadius: 4, background: 'linear-gradient(135deg, #00f0ff, #00ff41)', verticalAlign: 'middle', marginRight: 4 }} />
+                    赛博朋克 — 深色霓虹科技风格
+                  </Space>
+                </Radio>
+                <Radio value="earth">
+                  <Space>
+                    <span style={{ display: 'inline-block', width: 16, height: 16, borderRadius: 4, background: 'linear-gradient(135deg, #b87333, #d4a017)', verticalAlign: 'middle', marginRight: 4 }} />
+                    大地色系 — 暖色调自然舒适风格
+                  </Space>
+                </Radio>
+              </Space>
+            </Radio.Group>
+          </div>
         </Card>
       </div>
     </AppLayout>
   );
 };
 
-export default Settings; 
+export default Settings;