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

package/ui/src/components/AppLayout.js

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Layout, Menu, Button, Breadcrumb, Typography, Space, theme, Divider, Badge } from 'antd';
+import React, { useState, useMemo, useEffect } from 'react';
+import { Layout, Menu, Button, Breadcrumb, Space, ConfigProvider, theme } from 'antd';
 import { 
   AppstoreOutlined, 
   ApiOutlined, 
@@ -7,21 +7,196 @@ import {
   FileTextOutlined,
   MenuFoldOutlined,
   MenuUnfoldOutlined,
-  ExperimentOutlined
+  ExperimentOutlined,
+  BarChartOutlined,
+  ThunderboltOutlined
 } from '@ant-design/icons';
 import { Link, useLocation } from 'react-router-dom';
 import VersionModal from './VersionModal';
+import KeyboardShortcutsHelp from './KeyboardShortcutsHelp';
+import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
 import '../styles/app-layout.css';
 
 const { Header, Content, Sider } = Layout;
-const { Title, Text } = Typography;
+
+const THEMES = ['light', 'cyber', 'earth'];
 
 const AppLayout = ({ children }) => {
   const location = useLocation();
   const currentPath = location.pathname;
   const [collapsed, setCollapsed] = useState(false);
   const [versionModalVisible, setVersionModalVisible] = useState(false);
-  const { token } = theme.useToken();
+  const [shortcutsHelpVisible, setShortcutsHelpVisible] = useState(false);
+  
+  // 注册全局键盘快捷键
+  useKeyboardShortcuts();
+  
+  // 监听快捷键帮助事件
+  useEffect(() => {
+    const handleHelp = () => setShortcutsHelpVisible(true);
+    window.addEventListener('keyboard-shortcuts-help', handleHelp);
+    return () => window.removeEventListener('keyboard-shortcuts-help', handleHelp);
+  }, []);
+  
+  // 主题切换（兼容旧版 cyberTheme 存储）
+  const [currentTheme, setCurrentTheme] = useState(() => {
+    const saved = localStorage.getItem('theme');
+    if (saved && THEMES.includes(saved)) return saved;
+    // 兼容旧版 boolean 存储
+    const oldCyber = localStorage.getItem('cyberTheme');
+    return oldCyber === 'false' ? 'light' : oldCyber === 'true' ? 'cyber' : 'light';
+  });
+
+  useEffect(() => {
+    document.body.classList.remove('cyber-theme', 'earth-theme');
+    if (currentTheme !== 'light') {
+      document.body.classList.add(`${currentTheme}-theme`);
+    }
+  }, [currentTheme]);
+
+  useEffect(() => {
+    const handleStorage = () => {
+      const saved = localStorage.getItem('theme');
+      if (saved && THEMES.includes(saved)) {
+        setCurrentTheme(saved);
+      } else {
+        const oldCyber = localStorage.getItem('cyberTheme');
+        setCurrentTheme(oldCyber === 'false' ? 'light' : 'cyber');
+      }
+    };
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+  
+  const cyberTheme = useMemo(() => ({
+    token: {
+      colorPrimary: '#00f0ff',
+      colorPrimaryHover: '#33f3ff',
+      colorPrimaryActive: '#00c2cc',
+      colorSuccess: '#00ff41',
+      colorWarning: '#f0e800',
+      colorError: '#ff4d4f',
+      colorInfo: '#00f0ff',
+      colorText: '#e0e0e0',
+      colorTextSecondary: '#a0a0a0',
+      colorTextTertiary: '#6b7280',
+      colorBorder: '#1a1a2e',
+      colorBorderSecondary: '#1a1a2e',
+      colorBgBase: '#050508',
+      colorBgContainer: '#0f0f1a',
+      colorBgElevated: '#141420',
+      colorBgLayout: '#0a0a12',
+      colorBgSpotlight: '#141420',
+      borderRadius: 6,
+      borderRadiusSM: 4,
+      borderRadiusLG: 8,
+      wireframe: false,
+      fontFamily: "'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+      fontFamilyCode: "'Share Tech Mono', 'SFMono-Regular', Consolas, monospace",
+    },
+    algorithm: theme.darkAlgorithm,
+  }), []);
+
+  const earthTheme = useMemo(() => ({
+    token: {
+      colorPrimary: '#b87333',
+      colorPrimaryHover: '#c9894d',
+      colorPrimaryActive: '#9a5f2a',
+      colorSuccess: '#6b8e23',
+      colorWarning: '#d4a017',
+      colorError: '#c0392b',
+      colorInfo: '#8d6e63',
+      colorText: '#3d3630',
+      colorTextSecondary: '#6d6459',
+      colorTextTertiary: '#9e9488',
+      colorBorder: '#e0d8cf',
+      colorBorderSecondary: '#d5cdc2',
+      colorBgBase: '#faf6f0',
+      colorBgContainer: '#fdfcfa',
+      colorBgElevated: '#f5f0e8',
+      colorBgLayout: '#f0ebe3',
+      colorBgSpotlight: '#f5f0e8',
+      borderRadius: 6,
+      borderRadiusSM: 4,
+      borderRadiusLG: 8,
+      wireframe: false,
+      fontFamily: "'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+      fontFamilyCode: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
+    },
+    algorithm: theme.defaultAlgorithm,
+  }), []);
+
+  const lightTheme = useMemo(() => ({
+    token: {
+      borderRadius: 6,
+      borderRadiusSM: 4,
+      borderRadiusLG: 8,
+    },
+    algorithm: theme.defaultAlgorithm,
+  }), []);
+
+  const activeTheme = useMemo(() => {
+    if (currentTheme === 'cyber') return cyberTheme;
+    if (currentTheme === 'earth') return earthTheme;
+    return lightTheme;
+  }, [currentTheme, cyberTheme, earthTheme, lightTheme]);
+
+  // 主题颜色映射（用于 inline style）
+  const t = useMemo(() => {
+    switch (currentTheme) {
+      case 'cyber':
+        return {
+          headerBg: '#0f0f1a',
+          headerBorder: '#1a1a2e',
+          logoIcon: '#00ff41',
+          logoGradient: 'linear-gradient(135deg, #00f0ff, #00ff41)',
+          versionColor: '#6b7280',
+          siderBg: '#0f0f1a',
+          wrapperBg: '#0a0a12',
+          breadcrumbLink: '#a0a0a0',
+          breadcrumbCurrent: '#e0e0e0',
+          titleColor: '#e0e0e0',
+          titleFont: "'Orbitron', sans-serif",
+          titleLetterSpacing: '0.5px',
+          contentBg: '#0f0f1a',
+          contentBorder: '#1a1a2e',
+        };
+      case 'earth':
+        return {
+          headerBg: '#fdfcfa',
+          headerBorder: '#e0d8cf',
+          logoIcon: '#b87333',
+          logoGradient: 'linear-gradient(135deg, #b87333, #d4a017)',
+          versionColor: '#6d6459',
+          siderBg: '#f5f0e8',
+          wrapperBg: '#f0ebe3',
+          breadcrumbLink: '#6d6459',
+          breadcrumbCurrent: '#3d3630',
+          titleColor: '#3d3630',
+          titleFont: undefined,
+          titleLetterSpacing: undefined,
+          contentBg: '#fdfcfa',
+          contentBorder: '#e0d8cf',
+        };
+      default: // light
+        return {
+          headerBg: '#ffffff',
+          headerBorder: '#f0f0f0',
+          logoIcon: '#52c41a',
+          logoGradient: 'linear-gradient(135deg, #1890ff, #52c41a)',
+          versionColor: '#000000d9',
+          siderBg: '#ffffff',
+          wrapperBg: '#f5f5f5',
+          breadcrumbLink: '#000000d9',
+          breadcrumbCurrent: '#000000d9',
+          titleColor: '#000000d9',
+          titleFont: undefined,
+          titleLetterSpacing: undefined,
+          contentBg: '#ffffff',
+          contentBorder: '#f0f0f0',
+        };
+    }
+  }, [currentTheme]);
   
   // 版本弹窗控制方法
   const showVersionModal = () => setVersionModalVisible(true);
@@ -31,6 +206,8 @@ const AppLayout = ({ children }) => {
   const getSelectedKeys = () => {
     if (currentPath === '/' || currentPath === '#/') return ['1'];
     if (currentPath.startsWith('/interface') || currentPath.includes('/interface')) return ['2'];
+    if (currentPath === '/stats' || currentPath.includes('/stats')) return ['4'];
+    if (currentPath === '/sniffer' || currentPath.includes('/sniffer')) return ['5'];
     if (currentPath === '/settings' || currentPath.includes('/settings')) return ['3'];
     return [];
   };
@@ -48,6 +225,10 @@ const AppLayout = ({ children }) => {
       if (currentPath.includes('/interface/') && currentPath !== '/interface/') {
         breadcrumbs.push({ path: currentPath, title: '功能接口详情' });
       }
+    } else if (currentPath === '/stats') {
+      breadcrumbs.push({ path: '/stats', title: '请求统计' });
+    } else if (currentPath === '/sniffer') {
+      breadcrumbs.push({ path: '/sniffer', title: '接口嗅探' });
     } else if (currentPath === '/settings') {
       breadcrumbs.push({ path: '/settings', title: '系统设置' });
     }
@@ -59,6 +240,8 @@ const AppLayout = ({ children }) => {
   const getPageTitle = () => {
     if (currentPath === '/' || currentPath === '#/') return '功能模块管理';
     if (currentPath.startsWith('/interface')) return '接口配置管理';
+    if (currentPath === '/stats') return '请求统计';
+    if (currentPath === '/sniffer') return '接口嗅探';
     if (currentPath === '/settings') return '系统设置';
     return 'Whistle Mock Plugin';
   };
@@ -75,6 +258,16 @@ const AppLayout = ({ children }) => {
       icon: <ApiOutlined />,
       label: <Link to="/interface">接口管理</Link>,
     },
+    {
+      key: '4',
+      icon: <BarChartOutlined />,
+      label: <Link to="/stats">请求统计</Link>,
+    },
+    {
+      key: '5',
+      icon: <ThunderboltOutlined />,
+      label: <Link to="/sniffer">接口嗅探</Link>,
+    },
     {
       key: '3',
       icon: <SettingOutlined />,
@@ -83,88 +276,132 @@ const AppLayout = ({ children }) => {
   ];
 
   const breadcrumbs = getBreadcrumbs();
-  const colorBgContainer = token.colorBgContainer;
-  const colorBgLayout = token.colorBgLayout;
-  const borderRadius = token.borderRadius;
 
   return (
-    <Layout className="app-layout">
-      {/* 顶部导航栏 */}
-      <Header className="app-header" style={{ background: colorBgContainer }}>
-        <div className="header-left">
-          <div className="logo-container">
-            <div className="logo-icon-group">
-              <ExperimentOutlined className="logo-icon logo-icon-secondary" />
+    <ConfigProvider theme={activeTheme}>
+      <Layout className="app-layout">
+        {/* 顶部导航栏 */}
+        <Header className="app-header" style={{ background: t.headerBg, borderBottom: `1px solid ${t.headerBorder}` }}>
+          <div className="header-left">
+            <div className="logo-container">
+              <div className="logo-icon-group">
+                <ExperimentOutlined className="logo-icon logo-icon-secondary" style={{ color: t.logoIcon }} />
+              </div>
+              <div 
+                className="logo-text" 
+                style={{
+                  background: t.logoGradient,
+                  WebkitBackgroundClip: 'text',
+                  WebkitTextFillColor: 'transparent',
+                }}
+              >
+                MockMaster
+              </div>
             </div>
-            <div className="logo-text">MockMaster</div>
+            <Button
+              type="text"
+              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+              onClick={() => setCollapsed(!collapsed)}
+              className="collapse-button"
+            />
           </div>
-          <Button
-            type="text"
-            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
-            onClick={() => setCollapsed(!collapsed)}
-            className="collapse-button"
-          />
-        </div>
-        <div className="header-right">
-          <Space>
-            <Button 
-              type="text" 
-              size="small"
-              className="version-button"
-              onClick={showVersionModal}
-            >
-              <Text type="secondary">v{__APP_VERSION__}</Text>
-            </Button>
-          </Space>
-        </div>
-      </Header>
-
-      <Layout>
-        {/* 侧边导航 */}
-        <Sider 
-          width={220} 
-          className="app-sider" 
-          collapsed={collapsed} 
-          collapsible 
-          trigger={null}
-          style={{ background: colorBgContainer }}
-        >
-          <Menu
-            mode="inline"
-            selectedKeys={getSelectedKeys()}
-            items={menuItems}
-            style={{ 
-              height: '100%', 
-              borderRight: 0, 
-              padding: '8px',
-            }}
-          />
-        </Sider>
-
-        {/* 主内容区 */}
-        <Layout className="app-content-wrapper" style={{ padding: 0, background: colorBgLayout }}>
-          {/* 内容区 */}
-          <Content
-            className="app-content"
-            style={{
-              background: colorBgContainer,
-              padding: 24,
-              borderRadius: borderRadius,
-              minHeight: 280,
-            }}
+          <div className="header-right">
+            <Space>
+              <Button 
+                type="text" 
+                size="small"
+                className="version-button"
+                onClick={showVersionModal}
+              >
+                <span style={{ color: t.versionColor, fontFamily: "'Share Tech Mono', monospace" }}>
+                  v{__APP_VERSION__}
+                </span>
+              </Button>
+            </Space>
+          </div>
+        </Header>
+
+        <Layout>
+          {/* 侧边导航 */}
+          <Sider 
+            width={220} 
+            className="app-sider" 
+            collapsed={collapsed} 
+            collapsible 
+            trigger={null}
+            style={{ background: t.siderBg }}
           >
-            {children}
-          </Content>
+            <Menu
+              mode="inline"
+              selectedKeys={getSelectedKeys()}
+              items={menuItems}
+              style={{ 
+                height: '100%', 
+                borderRight: 0, 
+                padding: '8px',
+                background: t.siderBg,
+              }}
+            />
+          </Sider>
+
+          {/* 主内容区 */}
+          <Layout className="app-content-wrapper" style={{ padding: 0, background: t.wrapperBg }}>
+            {/* 面包屑和标题 */}
+            <div style={{ padding: '16px 24px 0' }}>
+              <Breadcrumb className="app-breadcrumb" style={{ marginBottom: 16 }}>
+                {breadcrumbs.map((crumb, index) => (
+                  <Breadcrumb.Item key={index}>
+                    {index < breadcrumbs.length - 1 ? (
+                      <Link to={crumb.path} style={{ color: t.breadcrumbLink }}>{crumb.title}</Link>
+                    ) : (
+                      <span style={{ color: t.breadcrumbCurrent, fontWeight: 500 }}>{crumb.title}</span>
+                    )}
+                  </Breadcrumb.Item>
+                ))}
+              </Breadcrumb>
+              <h1 style={{ 
+                margin: 0, 
+                fontSize: 22, 
+                fontWeight: 700, 
+                color: t.titleColor,
+                fontFamily: t.titleFont,
+                letterSpacing: t.titleLetterSpacing,
+              }}>
+                {getPageTitle()}
+              </h1>
+            </div>
+            
+            {/* 内容区 */}
+            <Content
+              className="app-content"
+              style={{
+                background: t.contentBg,
+                padding: 24,
+                borderRadius: 6,
+                minHeight: 280,
+                margin: '16px 24px 24px',
+                border: `1px solid ${t.contentBorder}`,
+              }}
+            >
+              {children}
+            </Content>
+          </Layout>
         </Layout>
+        
+        {/* 版本信息弹窗 */}
+        <VersionModal 
+          visible={versionModalVisible}
+          onCancel={hideVersionModal}
+        />
+        
+        {/* 快捷键帮助弹窗 */}
+        <KeyboardShortcutsHelp
+          visible={shortcutsHelpVisible}
+          onClose={() => setShortcutsHelpVisible(false)}
+        />
       </Layout>
-      
-      {/* 版本信息弹窗 */}
-      <VersionModal 
-        visible={versionModalVisible}
-        onCancel={hideVersionModal}
-      />
-    </Layout>
+    </ConfigProvider>
   );
 };
 
-export default AppLayout; 
+export default AppLayout;

package/ui/src/components/FeatureCard.js

@@ -4,9 +4,14 @@ import '../styles/feature-card.css';
 const FeatureCard = ({ feature }) => {
   const { name, description, active, interfaceCount, createdAt } = feature;
   
-  // 生成随机的主题色（实际项目中可能会根据某种规则来确定）
+  // 生成随机的主题色（根据当前主题选择色系）
   const getRandomColor = () => {
-    const colors = ['#1890ff', '#13c2c2', '#52c41a', '#faad14', '#722ed1'];
+    const isEarth = document.body.classList.contains('earth-theme');
+    if (isEarth) {
+      const colors = ['#b87333', '#6b8e23', '#d4a017', '#8d6e63', '#c0392b'];
+      return colors[Math.floor(Math.random() * colors.length)];
+    }
+    const colors = ['#00f0ff', '#00ff41', '#f0e800', '#ff00a0', '#bd00ff'];
     return colors[Math.floor(Math.random() * colors.length)];
   };
   

package/ui/src/components/KeyboardShortcutsHelp.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Modal, Table } from 'antd';
+import { getShortcutsList } from '../hooks/useKeyboardShortcuts';
+
+const KeyboardShortcutsHelp = ({ visible, onClose }) => {
+  const shortcuts = getShortcutsList();
+
+  const columns = [
+    {
+      title: '快捷键',
+      dataIndex: 'key',
+      key: 'key',
+      width: 180,
+      render: (text) => (
+        <kbd style={{
+          display: 'inline-block',
+          padding: '4px 8px',
+          fontSize: '12px',
+          fontFamily: 'monospace',
+          lineHeight: 1,
+          color: '#333',
+          background: '#f5f5f5',
+          border: '1px solid #d9d9d9',
+          borderRadius: '4px',
+          boxShadow: '0 1px 0 rgba(0,0,0,0.1)',
+        }}>
+          {text}
+        </kbd>
+      ),
+    },
+    {
+      title: '功能',
+      dataIndex: 'desc',
+      key: 'desc',
+    },
+  ];
+
+  return (
+    <Modal
+      title="⌨️ 键盘快捷键"
+      open={visible}
+      onCancel={onClose}
+      footer={null}
+      width={480}
+    >
+      <Table
+        dataSource={shortcuts.map((s, i) => ({ ...s, id: i }))}
+        columns={columns}
+        rowKey="id"
+        pagination={false}
+        size="small"
+        showHeader={false}
+      />
+    </Modal>
+  );
+};
+
+export default KeyboardShortcutsHelp;

package/ui/src/components/VersionModal.js

@@ -1,47 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { Modal, Spin, Alert } from 'antd';
+import ReactMarkdown from 'react-markdown';
 import '../styles/version-modal.css';
 
-/**
- * 简单的Markdown渲染器组件
- * @param {Object} props - 组件属性
- * @param {string} props.children - 要渲染的Markdown文本
- */
-const SimpleMarkdownRenderer = ({ children }) => {
-  const renderMarkdown = (text) => {
-    return text
-      .split('\n')
-      .map((line, index) => {
-        // 处理标题
-        if (line.startsWith('# ')) {
-          return <h1 key={index}>{line.substring(2)}</h1>;
-        } 
-        if (line.startsWith('## ')) {
-          return <h2 key={index}>{line.substring(3)}</h2>;
-        }
-        if (line.startsWith('### ')) {
-          return <h3 key={index}>{line.substring(4)}</h3>;
-        }
-        
-        // 处理列表项
-        if (line.startsWith('- ')) {
-          return <li key={index}>{line.substring(2)}</li>;
-        }
-        
-        // 处理空行
-        if (line.trim() === '') {
-          return <br key={index} />;
-        }
-        
-        // 处理加粗文本
-        const boldText = line.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
-        return <p key={index} dangerouslySetInnerHTML={{ __html: boldText }} />;
-      });
-  };
-
-  return <div className="simple-markdown">{renderMarkdown(children)}</div>;
-};
-
 /**
  * 获取版本信息的请求函数
  * @returns {Promise<Object>} 版本信息
@@ -125,7 +86,9 @@ const VersionModal = ({ visible, onCancel }) => {
         
         {!loading && !error && versionContent && (
           <div className="version-markdown-content">
-            <SimpleMarkdownRenderer>{versionContent}</SimpleMarkdownRenderer>
+            <ReactMarkdown>
+              {versionContent.replace(/^#\s*🔄?\s*版本更新记录\s*\n+/, '')}
+            </ReactMarkdown>
           </div>
         )}
       </div>