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

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { ReactSortable } from 'react-sortablejs';
 import ReactDOM from 'react-dom';
-import { Card, Button, Space, Badge, Row, Col, Input, Select, Tooltip, message, AutoComplete, Tag } from 'antd';
+import { Card, Button, Space, Badge, Row, Col, Input, Select, Tooltip, message, Tag, Divider } from 'antd';
 import { 
   CodeOutlined, 
   EyeOutlined, 
@@ -15,13 +15,20 @@ import {
   FullscreenExitOutlined,
   MenuOutlined,
   FilterOutlined,
-  MinusCircleOutlined
+  PlusOutlined,
+  QuestionCircleOutlined
 } from '@ant-design/icons';
 import { generateResponseId } from './utils';
 
 const { TextArea } = Input;
 const { Option } = Select;
 
+const MATCH_TYPE_LABELS = {
+  exact: '精确',
+  contains: '包含',
+  regex: '正则',
+};
+
 const ResponseContentEditor = ({ 
   form,
   responses, 
@@ -35,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;
@@ -48,7 +69,6 @@ const ResponseContentEditor = ({
   }, [responses]);
 
   const handleAfterSort = (newList) => {
-    // 将排序后的列表写回表单 responses 字段；activeResponseId 不变
     setFieldsValue({ responses: newList });
   };
 
@@ -72,7 +92,6 @@ const ResponseContentEditor = ({
     const newResponseId = generateResponseId();
     let currentResponses = getFieldValue('responses') || [];
     
-    // 确保数组格式
     if (!Array.isArray(currentResponses)) {
       try {
         if (typeof currentResponses === 'string') {
@@ -97,7 +116,6 @@ const ResponseContentEditor = ({
     
     const updatedResponses = [...currentResponses, newResponse];
     
-    // 更新表单字段
     setFieldsValue({ 
       responses: updatedResponses,
       activeResponseId: newResponseId
@@ -115,7 +133,6 @@ const ResponseContentEditor = ({
     
     const updatedResponses = currentResponses.filter(resp => resp.id !== responseId);
     
-    // 如果删除的是当前选中的响应，切换到第一个响应
     let newActiveId = activeResponseId;
     if (responseId === activeResponseId) {
       newActiveId = updatedResponses[0]?.id;
@@ -186,132 +203,29 @@ const ResponseContentEditor = ({
     }
   };
 
-  // 添加一条匹配规则
-  const handleAddMatcher = () => {
-    const currentMatchers = activeResponse?.paramMatchers || [];
+  // 添加入参匹配规则
+  const handleAddParamMatcher = () => {
+    const currentMatchers = (activeResponse && activeResponse.paramMatchers) || [];
     updateActiveResponseParamMatchers([
       ...currentMatchers,
       { paramPath: '', paramValue: '', matchType: 'exact' }
     ]);
   };
 
-  // 删除一条匹配规则
-  const handleDeleteMatcher = (index) => {
-    const currentMatchers = [...(activeResponse?.paramMatchers || [])];
-    currentMatchers.splice(index, 1);
-    updateActiveResponseParamMatchers(currentMatchers);
+  // 删除入参匹配规则
+  const handleRemoveParamMatcher = (index) => {
+    const currentMatchers = (activeResponse && activeResponse.paramMatchers) || [];
+    const newMatchers = currentMatchers.filter((_, i) => i !== index);
+    updateActiveResponseParamMatchers(newMatchers);
   };
 
-  // 更新某条匹配规则的字段
-  const handleMatcherChange = (index, field, value) => {
-    const currentMatchers = [...(activeResponse?.paramMatchers || [])];
-    currentMatchers[index] = { ...currentMatchers[index], [field]: value };
-    updateActiveResponseParamMatchers(currentMatchers);
-  };
-
-  // 渲染入参匹配规则编辑区域
-  const renderParamMatchersSection = () => {
-    // 整个接口中是否有任意响应含有匹配规则
-    const anyHasMatchers = responses.some(
-      r => r.paramMatchers && Array.isArray(r.paramMatchers) && r.paramMatchers.length > 0
-    );
-    const currentHasMatchers = activeResponse.paramMatchers && activeResponse.paramMatchers.length > 0;
-    // 只有当接口中存在规则时，无规则的响应才叫"兜底"
-    const isFallback = anyHasMatchers && !currentHasMatchers;
-
-    return (
-      <div style={{
-        marginBottom: '16px',
-        border: '1px solid #e8e8e8',
-        borderRadius: '6px',
-        padding: '12px',
-        background: '#fafafa'
-      }}>
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          marginBottom: '10px'
-        }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-            <FilterOutlined style={{ color: '#1890ff' }} />
-            <label style={{ fontSize: '12px', color: '#333', fontWeight: 'bold' }}>
-              入参匹配规则
-            </label>
-            {currentHasMatchers ? (
-              <Tag color="blue" style={{ fontSize: '11px', lineHeight: '18px', padding: '0 6px' }}>
-                {activeResponse.paramMatchers.length}条
-              </Tag>
-            ) : isFallback ? (
-              <Tag color="default" style={{ fontSize: '11px', lineHeight: '18px', padding: '0 6px' }}>
-                兜底响应
-              </Tag>
-            ) : null}
-          </div>
-          <Button
-            type="dashed"
-            size="small"
-            icon={<PlusCircleOutlined />}
-            onClick={handleAddMatcher}
-            style={{ fontSize: '12px' }}
-          >
-            添加规则
-          </Button>
-        </div>
-
-        {isFallback && (
-          <div style={{
-            color: '#999',
-            fontSize: '12px',
-            textAlign: 'center',
-            padding: '8px 0'
-          }}>
-            无匹配规则，当其他响应均不匹配时作为兜底返回
-          </div>
-        )}
-
-        {activeResponse.paramMatchers && activeResponse.paramMatchers.map((matcher, index) => (
-          <Row key={index} gutter={8} style={{ marginBottom: '8px' }} align="middle">
-            <Col span={8}>
-              <Input
-                size="small"
-                placeholder="参数路径，如 data.type"
-                value={matcher.paramPath}
-                onChange={(e) => handleMatcherChange(index, 'paramPath', e.target.value)}
-              />
-            </Col>
-            <Col span={5}>
-              <Select
-                size="small"
-                style={{ width: '100%' }}
-                value={matcher.matchType || 'exact'}
-                onChange={(val) => handleMatcherChange(index, 'matchType', val)}
-              >
-                <Option value="exact">精确匹配</Option>
-                <Option value="contains">包含</Option>
-                <Option value="regex">正则</Option>
-              </Select>
-            </Col>
-            <Col span={9}>
-              <Input
-                size="small"
-                placeholder="期望值"
-                value={matcher.paramValue}
-                onChange={(e) => handleMatcherChange(index, 'paramValue', e.target.value)}
-              />
-            </Col>
-            <Col span={2} style={{ textAlign: 'center' }}>
-              <Tooltip title="删除此规则">
-                <MinusCircleOutlined
-                  style={{ color: '#ff4d4f', cursor: 'pointer', fontSize: '16px' }}
-                  onClick={() => handleDeleteMatcher(index)}
-                />
-              </Tooltip>
-            </Col>
-          </Row>
-        ))}
-      </div>
+  // 更新入参匹配规则某个字段
+  const handleParamMatcherChange = (index, field, value) => {
+    const currentMatchers = (activeResponse && activeResponse.paramMatchers) || [];
+    const newMatchers = currentMatchers.map((m, i) => 
+      i === index ? { ...m, [field]: value } : m
     );
+    updateActiveResponseParamMatchers(newMatchers);
   };
 
   // 格式化JSON内容
@@ -360,7 +274,7 @@ const ResponseContentEditor = ({
             onClick={toggleTextareaFullscreen}
             size="small"
             type="text"
-            style={{ color: '#ffffff' }}
+            style={{ color: '#595959' }}
           >
             退出全屏 (ESC)
           </Button>
@@ -377,6 +291,81 @@ const ResponseContentEditor = ({
     );
   };
 
+  // 渲染响应级入参匹配规则区域
+  const renderParamMatchers = () => {
+    if (!activeResponse) return null;
+
+    const matchers = activeResponse.paramMatchers || [];
+
+    return (
+      <div style={{ marginBottom: '12px' }}>
+        <Divider orientation="left" orientationMargin={0} style={{ margin: '0 0 10px 0', fontSize: '12px' }}>
+          <Space size={6}>
+            <FilterOutlined style={{ color: '#1677ff' }} />
+            <span style={{ fontWeight: 'bold', color: '#333' }}>入参匹配规则</span>
+            {matchers.length > 0 && (
+              <Tag color="blue" style={{ fontSize: '11px', padding: '0 4px' }}>{matchers.length}条</Tag>
+            )}
+            <Tooltip title="满足所有规则时返回此响应；无规则的响应作为默认兜底。响应按列表顺序依次检查，第一个匹配的响应被返回。">
+              <QuestionCircleOutlined style={{ color: '#bbb', cursor: 'help', fontSize: '12px' }} />
+            </Tooltip>
+          </Space>
+        </Divider>
+        <div>
+          {matchers.map((matcher, index) => (
+            <div key={index} style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '8px' }}>
+              <Input
+                style={{ flex: 1 }}
+                placeholder="参数路径（如：userId 或 data.user.id）"
+                value={matcher.paramPath || ''}
+                onChange={(e) => handleParamMatcherChange(index, 'paramPath', e.target.value)}
+                size="small"
+              />
+              <Input
+                style={{ flex: 1 }}
+                placeholder="期望值（如：123 或 admin）"
+                value={matcher.paramValue || ''}
+                onChange={(e) => handleParamMatcherChange(index, 'paramValue', e.target.value)}
+                size="small"
+              />
+              <Select
+                style={{ width: 90 }}
+                value={matcher.matchType || 'exact'}
+                onChange={(val) => handleParamMatcherChange(index, 'matchType', val)}
+                size="small"
+              >
+                <Option value="exact">精确匹配</Option>
+                <Option value="contains">包含</Option>
+                <Option value="regex">正则</Option>
+              </Select>
+              <Button
+                type="text"
+                danger
+                icon={<DeleteOutlined />}
+                size="small"
+                onClick={() => handleRemoveParamMatcher(index)}
+              />
+            </div>
+          ))}
+          <Button
+            type="dashed"
+            size="small"
+            icon={<PlusOutlined />}
+            onClick={handleAddParamMatcher}
+            style={{ width: '100%' }}
+          >
+            添加匹配规则
+          </Button>
+          {matchers.length === 0 && (
+            <div style={{ color: '#bbb', fontSize: '12px', marginTop: '6px', textAlign: 'center' }}>
+              无规则时此响应作为默认兜底响应
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
   // 如果没有响应数据，显示创建按钮
   if (!Array.isArray(responses) || responses.length === 0) {
     return (
@@ -393,11 +382,10 @@ const ResponseContentEditor = ({
         <div style={{ 
           textAlign: 'center', 
           padding: '40px 20px',
-          background: '#fafafa',
           borderRadius: '6px',
           border: '1px dashed #d9d9d9'
         }}>
-          <FileTextOutlined style={{ fontSize: '32px', color: '#d9d9d9', marginBottom: '12px' }} />
+          <FileTextOutlined style={{ fontSize: '32px', color: '#bfbfbf', marginBottom: '12px' }} />
           <div style={{ color: '#999', marginBottom: '16px' }}>暂无响应数据</div>
           <Button 
             type="primary" 
@@ -444,9 +432,7 @@ const ResponseContentEditor = ({
             style={{ 
               display: 'flex', 
               alignItems: 'center', 
-              gap: '4px',
-              borderColor: '#1890ff',
-              color: '#1890ff'
+              gap: '4px'
             }}
           >
             添加响应
@@ -527,7 +513,6 @@ const ResponseContentEditor = ({
             
             <div style={{ position: 'relative' }}>
               {isEditing ? (
-                // 编辑模式：显示输入框
                 <Input.Group compact>
                   <Input
                     style={{ width: 'calc(100% - 80px)' }}
@@ -551,57 +536,18 @@ const ResponseContentEditor = ({
                   />
                 </Input.Group>
               ) : (
-                // 选择模式：显示下拉选择器
                 <Input.Group compact>
                   <Select
                     style={{ width: 'calc(100% - 40px)' }}
                     placeholder="选择要编辑的响应"
                     value={activeResponseId}
                     onChange={handleResponseSelect}
-                    optionLabelProp="label"
                   >
-                    {responses.map((resp, index) => {
-                      const matcherCount = resp.paramMatchers?.length || 0;
-                      return (
-                        <Option 
-                          key={resp.id} 
-                          value={resp.id}
-                          label={
-                            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                              <CheckCircleOutlined style={{ color: '#52c41a' }} />
-                              <span>{resp.name || `响应 ${index + 1}`}</span>
-                            </div>
-                          }
-                        >
-                          <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}>
-                                {matcherCount > 0 ? (
-                                  <Tag color="blue" style={{ fontSize: '11px', margin: 0 }}>
-                                    {matcherCount}条规则
-                                  </Tag>
-                                ) : (
-                                  <Tag color="default" style={{ fontSize: '11px', margin: 0 }}>
-                                    兜底
-                                  </Tag>
-                                )}
-                                {resp.id === activeResponseId && (
-                                  <Badge status="processing" text="当前选中" />
-                                )}
-                              </Space>
-                            </div>
-                          </div>
-                        </Option>
-                      );
-                    })}
+                    {responses.map((resp, index) => (
+                      <Option key={resp.id} value={resp.id}>
+                        {resp.name || `响应 ${index + 1}`}
+                      </Option>
+                    ))}
                   </Select>
                   <Tooltip title="编辑响应名称">
                     <Button 
@@ -642,8 +588,8 @@ const ResponseContentEditor = ({
         </Row>
       </div>
 
-      {/* 入参匹配规则编辑区域 */}
-      {activeResponse && renderParamMatchersSection()}
+      {/* 响应级入参匹配规则区域 */}
+      {activeResponse && responseParamMatcherEnabled && renderParamMatchers()}
 
       {/* 响应内容编辑区域 */}
       {activeResponse && (
@@ -696,4 +642,4 @@ const ResponseContentEditor = ({
   );
 };
 
-export default ResponseContentEditor; 
+export default ResponseContentEditor;

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

@@ -2,5 +2,6 @@
 export { default as ResponseContentEditor } from './ResponseContentEditor';
 export { default as InterfaceTestModal } from './InterfaceTestModal';
 export { default as PreviewModal } from './PreviewModal';
+export { default as DataManagementDrawer } from './DataManagementDrawer';
 export * from './constants';
 export * from './utils'; 

package/ui/src/hooks/useKeyboardShortcuts.js

@@ -0,0 +1,99 @@
+import { useEffect, useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import { message } from 'antd';
+
+/**
+ * 全局键盘快捷键 Hook
+ * 
+ * 支持的快捷键：
+ * - Esc: 关闭当前弹窗/抽屉（触发全局 close-modal 事件）
+ * - Ctrl/Cmd + S: 保存（触发全局 save-form 事件）
+ * - Ctrl/Cmd + 1: 跳转到功能模块
+ * - Ctrl/Cmd + 2: 跳转到接口管理
+ * - Ctrl/Cmd + 3: 跳转到系统设置
+ * - Ctrl/Cmd + 4: 跳转到请求统计
+ * - Ctrl/Cmd + 5: 跳转到接口嗅探
+ * - Ctrl/Cmd + Shift + N: 新建接口（在接口管理页触发）
+ * - Ctrl/Cmd + K: 聚焦搜索框（触发全局 focus-search 事件）
+ * - Shift + ?: 显示快捷键帮助
+ */
+
+const SHORTCUTS = [
+  { key: 'Esc', desc: '关闭弹窗/抽屉' },
+  { key: 'Ctrl + S', desc: '保存表单' },
+  { key: 'Ctrl + 1', desc: '功能模块' },
+  { key: 'Ctrl + 2', desc: '接口管理' },
+  { key: 'Ctrl + 3', desc: '系统设置' },
+  { key: 'Ctrl + 4', desc: '请求统计' },
+  { key: 'Ctrl + 5', desc: '接口嗅探' },
+  { key: 'Ctrl + Shift + N', desc: '新建接口' },
+  { key: 'Ctrl + K', desc: '聚焦搜索' },
+  { key: 'Shift + ?', desc: '快捷键帮助' },
+];
+
+export const getShortcutsList = () => SHORTCUTS;
+
+export const useKeyboardShortcuts = () => {
+  const history = useHistory();
+
+  const handleKeyDown = useCallback((e) => {
+    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+    const ctrlOrCmd = isMac ? e.metaKey : e.ctrlKey;
+
+    // 忽略在输入框、文本域中的快捷键（导航类除外）
+    const tagName = e.target?.tagName?.toLowerCase();
+    const isInput = tagName === 'input' || tagName === 'textarea' || e.target?.isContentEditable;
+
+    // Shift + ? 显示帮助（非输入框时）
+    if (e.shiftKey && e.key === '?' && !isInput) {
+      e.preventDefault();
+      window.dispatchEvent(new CustomEvent('keyboard-shortcuts-help'));
+      return;
+    }
+
+    // Esc 关闭弹窗/抽屉
+    if (e.key === 'Escape') {
+      window.dispatchEvent(new CustomEvent('shortcut-esc'));
+      return;
+    }
+
+    // Ctrl/Cmd + 数字键 导航
+    if (ctrlOrCmd && !e.shiftKey && /^[1-5]$/.test(e.key)) {
+      e.preventDefault();
+      const routes = ['/', '/interface', '/settings', '/stats', '/sniffer'];
+      const names = ['功能模块', '接口管理', '系统设置', '请求统计', '接口嗅探'];
+      const idx = parseInt(e.key, 10) - 1;
+      history.push(routes[idx]);
+      message.success(`已切换到${names[idx]}`);
+      return;
+    }
+
+    // Ctrl/Cmd + S 保存
+    if (ctrlOrCmd && e.key.toLowerCase() === 's' && !e.shiftKey) {
+      e.preventDefault();
+      window.dispatchEvent(new CustomEvent('shortcut-save'));
+      return;
+    }
+
+    // Ctrl/Cmd + Shift + N 新建接口
+    if (ctrlOrCmd && e.shiftKey && e.key.toLowerCase() === 'n') {
+      e.preventDefault();
+      window.dispatchEvent(new CustomEvent('shortcut-new-interface'));
+      return;
+    }
+
+    // Ctrl/Cmd + K 聚焦搜索
+    if (ctrlOrCmd && e.key.toLowerCase() === 'k' && !e.shiftKey) {
+      e.preventDefault();
+      window.dispatchEvent(new CustomEvent('shortcut-focus-search'));
+      return;
+    }
+  }, [history]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+};
+
+export default useKeyboardShortcuts;

package/ui/src/index.html

@@ -3,9 +3,12 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Whistle Mock 数据工厂</title>
+  <title>Whistle Mock Plugin</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Orbitron:wght@400;500;600;700;800;900&family=Share+Tech+Mono&display=swap" rel="stylesheet">
 </head>
 <body>
   <div id="root"></div>
 </body>
-</html> 
+</html>

package/ui/src/index.js

@@ -3,14 +3,22 @@ import ReactDOM from 'react-dom';
 import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
 
 // 导入样式
-import 'antd/dist/reset.css'; // 导入antd样式，使用适合的版本
+import 'antd/dist/reset.css';
 import './styles/global.css';
 import './App.css';
 
+// 赛博朋克主题 CSS（规则均带 body.cyber-theme 前缀，默认不生效）
+require('./styles/cyber-theme.css');
+
+// 大地色系主题 CSS（规则均带 body.earth-theme 前缀，默认不生效）
+require('./styles/earth-theme.css');
+
 // 导入页面组件
 import MockData from './pages/MockDataV2';
 import InterfaceManagement from './pages/InterfaceManagementV2';
 import Settings from './pages/Settings';
+import Stats from './pages/Stats';
+import Sniffer from './pages/Sniffer';
 
 const App = () => {
   return (
@@ -20,6 +28,8 @@ const App = () => {
           <Route exact path="/" component={MockData} />
           <Route exact path="/interface" component={InterfaceManagement} />
           <Route path="/interface/:featureId" component={InterfaceManagement} />
+          <Route path="/stats" component={Stats} />
+          <Route path="/sniffer" component={Sniffer} />
           <Route path="/settings" component={Settings} />
           <Redirect to="/" />
         </Switch>
@@ -37,4 +47,4 @@ if (ReactDOM.createRoot) {
 } else {
   // 旧版本React
   ReactDOM.render(<App />, root);
-} 
+}