whistle.mock-plugins 1.2.2-beta.23 → 1.2.2-beta.28

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

@@ -0,0 +1,165 @@
+import React, { useState } from 'react';
+import { Button, Input, message, Space, Tabs, Tag } from 'antd';
+import { DownloadOutlined, ThunderboltOutlined, CopyOutlined } from '@ant-design/icons';
+import axios from 'axios';
+
+const { TextArea } = Input;
+
+/**
+ * JSON 转 Mock.js 模板
+ * 简单转换：字符串 -> '@string', 数字 -> '@integer(1,100)', 布尔 -> '@boolean'
+ * 保留对象结构
+ */
+const jsonToMockTemplate = (obj, depth = 0) => {
+  if (obj === null) return null;
+  if (typeof obj === 'string') {
+    // 保留特定格式字符串的提示
+    if (/^\d{4}-\d{2}-\d{2}/.test(obj)) return '@date';
+    if (/^\d{4}-\d{2}-\d{2}T/.test(obj)) return '@datetime';
+    if (/^https?:\/\//.test(obj)) return '@url';
+    if (/^\w+@\w+\.\w+/.test(obj)) return '@email';
+    if (/^1[3-9]\d{9}$/.test(obj)) return '@string("number", 11)';
+    return '@csentence(3, 10)';
+  }
+  if (typeof obj === 'number') {
+    if (Number.isInteger(obj)) return '@integer(1, 999)';
+    return '@float(1, 100, 2, 2)';
+  }
+  if (typeof obj === 'boolean') return '@boolean';
+  if (Array.isArray(obj)) {
+    if (obj.length === 0) return [];
+    const template = jsonToMockTemplate(obj[0], depth + 1);
+    // 用 |1-5 表示数组长度随机
+    return [template];
+  }
+  if (typeof obj === 'object') {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+      result[key] = jsonToMockTemplate(value, depth + 1);
+    }
+    return result;
+  }
+  return obj;
+};
+
+const RealResponseRecorder = ({ urlPattern, onApply }) => {
+  const [fetchUrl, setFetchUrl] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [response, setResponse] = useState(null);
+  const [activeTab, setActiveTab] = useState('preview');
+
+  const handleFetch = async () => {
+    const targetUrl = fetchUrl.trim() || urlPattern;
+    if (!targetUrl) {
+      message.warning('请输入目标 URL');
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await axios.post('/cgi-bin/proxy-fetch', {
+        url: targetUrl,
+        method: 'GET',
+      });
+      if (res.data.code === 0) {
+        setResponse(res.data.data);
+        setActiveTab('preview');
+        message.success('抓取成功');
+      } else {
+        throw new Error(res.data.message);
+      }
+    } catch (err) {
+      message.error('抓取失败: ' + (err.response?.data?.message || err.message));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleGenerateMock = () => {
+    if (!response?.body) return;
+    try {
+      const json = JSON.parse(response.body);
+      const template = jsonToMockTemplate(json);
+      const mockTemplate = JSON.stringify(template, null, 2);
+      onApply?.(mockTemplate);
+      message.success('Mock 模板已生成');
+    } catch (e) {
+      message.error('响应不是 JSON，无法生成模板: ' + e.message);
+    }
+  };
+
+  const handleCopy = () => {
+    if (response?.body) {
+      navigator.clipboard.writeText(response.body);
+      message.success('已复制');
+    }
+  };
+
+  return (
+    <div style={{ padding: '16px 0' }}>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <Space style={{ width: '100%' }}>
+          <Input
+            placeholder={urlPattern || '输入真实接口 URL'}
+            value={fetchUrl}
+            onChange={(e) => setFetchUrl(e.target.value)}
+            style={{ width: 400 }}
+            onPressEnter={handleFetch}
+          />
+          <Button
+            type="primary"
+            icon={<ThunderboltOutlined />}
+            loading={loading}
+            onClick={handleFetch}
+          >
+            抓取真实响应
+          </Button>
+        </Space>
+
+        {response && (
+          <>
+            <Space>
+              <Tag color={response.status >= 200 && response.status < 300 ? 'success' : 'error'}>
+                {response.status} {response.statusText}
+              </Tag>
+              <Button size="small" icon={<CopyOutlined />} onClick={handleCopy}>
+                复制原文
+              </Button>
+              <Button size="small" icon={<DownloadOutlined />} onClick={handleGenerateMock} type="primary">
+                生成 Mock 模板
+              </Button>
+            </Space>
+
+            <Tabs activeKey={activeTab} onChange={setActiveTab}>
+              <Tabs.TabPane tab="响应预览" key="preview">
+                <TextArea
+                  value={response.body}
+                  readOnly
+                  rows={12}
+                  style={{ fontFamily: 'monospace', fontSize: 12 }}
+                />
+              </Tabs.TabPane>
+              <Tabs.TabPane tab="生成的 Mock 模板" key="mock">
+                <TextArea
+                  value={(() => {
+                    try {
+                      const json = JSON.parse(response.body);
+                      const template = jsonToMockTemplate(json);
+                      return JSON.stringify(template, null, 2);
+                    } catch (e) {
+                      return '// 响应不是 JSON，无法生成模板\n' + response.body;
+                    }
+                  })()}
+                  readOnly
+                  rows={12}
+                  style={{ fontFamily: 'monospace', fontSize: 12 }}
+                />
+              </Tabs.TabPane>
+            </Tabs>
+          </>
+        )}
+      </Space>
+    </div>
+  );
+};
+
+export default RealResponseRecorder;

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

@@ -274,7 +274,7 @@ const ResponseContentEditor = ({
             onClick={toggleTextareaFullscreen}
             size="small"
             type="text"
-            style={{ color: '#ffffff' }}
+            style={{ color: '#595959' }}
           >
             退出全屏 (ESC)
           </Button>
@@ -301,7 +301,7 @@ const ResponseContentEditor = ({
       <div style={{ marginBottom: '12px' }}>
         <Divider orientation="left" orientationMargin={0} style={{ margin: '0 0 10px 0', fontSize: '12px' }}>
           <Space size={6}>
-            <FilterOutlined style={{ color: '#1890ff' }} />
+            <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>
@@ -382,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" 
@@ -433,9 +432,7 @@ const ResponseContentEditor = ({
             style={{ 
               display: 'flex', 
               alignItems: 'center', 
-              gap: '4px',
-              borderColor: '#1890ff',
-              color: '#1890ff'
+              gap: '4px'
             }}
           >
             添加响应

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,19 @@ 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');
+
 // 导入页面组件
 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 +25,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 +44,4 @@ if (ReactDOM.createRoot) {
 } else {
   // 旧版本React
   ReactDOM.render(<App />, root);
-} 
+}

package/ui/src/pages/InterfaceManagementV2.js

@@ -2,7 +2,7 @@
  * InterfaceManagementV2.js - 接口管理页面
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import AppLayout from '../components/AppLayout';
 import { 
@@ -87,6 +87,7 @@ const InterfaceManagement = () => {
   const [currentResponseId, setCurrentResponseId] = useState(null);
   
   // 搜索状态
+  const searchRef = useRef(null);
   const [searchValue, setSearchValue] = useState('');
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const [drawerVisible, setDrawerVisible] = useState(false);
@@ -136,6 +137,29 @@ const InterfaceManagement = () => {
     }
   }, [selectedFeatureId]);
 
+  // 键盘快捷键监听
+  useEffect(() => {
+    const handleSave = () => {
+      if (modalVisible) {
+        handleSubmit();
+      }
+    };
+    const handleNew = () => {
+      handleAddInterface();
+    };
+    const handleFocusSearch = () => {
+      searchRef.current?.focus();
+    };
+    window.addEventListener('shortcut-save', handleSave);
+    window.addEventListener('shortcut-new-interface', handleNew);
+    window.addEventListener('shortcut-focus-search', handleFocusSearch);
+    return () => {
+      window.removeEventListener('shortcut-save', handleSave);
+      window.removeEventListener('shortcut-new-interface', handleNew);
+      window.removeEventListener('shortcut-focus-search', handleFocusSearch);
+    };
+  }, [modalVisible]);
+
   // 监听数据管理显示模式变化
   useEffect(() => {
     const savedMode = localStorage.getItem('dataManagementDisplayMode');
@@ -1012,7 +1036,7 @@ const InterfaceManagement = () => {
               ))}
             </div>
           }>
-            <span style={{ color: '#1890ff' }}>
+            <span style={{ color: '#1677ff' }}>
               {count}个
               {hasRandomValue && <span style={{ marginLeft: 4 }}>🎲</span>}
             </span>
@@ -1067,7 +1091,7 @@ const InterfaceManagement = () => {
             )}
             {responsesWithMatchers.length > 0 && (
               <div>
-                <div style={{ fontWeight: 'bold', marginBottom: 4, color: '#1890ff' }}>响应级规则（共{responseMatcherTotal}条）</div>
+                <div style={{ fontWeight: 'bold', marginBottom: 4, color: '#1677ff' }}>响应级规则（共{responseMatcherTotal}条）</div>
                 {responsesWithMatchers.map((resp, ri) => (
                   <div key={ri} style={{ marginBottom: 4 }}>
                     <div style={{ fontSize: '12px', color: '#aaa', marginBottom: 2 }}>{resp.name}：</div>
@@ -1231,6 +1255,7 @@ const InterfaceManagement = () => {
               </div>
               
               <Search
+                ref={searchRef}
                 placeholder="搜索接口名称或URL"
                 onSearch={handleSearch}
                 value={searchValue}
@@ -1500,7 +1525,6 @@ const InterfaceManagement = () => {
             destroyOnClose
             bodyStyle={{
               padding: '0',
-              background: '#fafafa',
               overflowY: 'auto'
             }}
             footer={
@@ -1744,8 +1768,7 @@ const InterfaceManagement = () => {
           bodyStyle={{ 
             maxHeight: '75vh', 
             overflow: 'auto', 
-            padding: '0',
-            background: '#fafafa'
+            padding: '0'
           }}
           className="interface-modal"
         >

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 {
@@ -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,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import AppLayout from '../components/AppLayout';
-import { Card, Typography, Switch, Space, Modal, Button } 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';
@@ -16,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');
@@ -39,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) => {
@@ -69,6 +74,13 @@ 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 ? '赛博朋克主题已开启' : '经典主题已开启');
+  };
+
   const showMatcherRuleModal = (type) => {
     if (type === 'interface') {
       Modal.info({
@@ -229,6 +241,28 @@ 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>
   );