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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whistle.mock-plugins",
-  "version": "1.2.2-beta.23",
+  "version": "1.2.2-beta.25",
   "description": "Whistle 插件，用于快速创建 API 模拟数据",
   "main": "lib/index.js",
   "scripts": {

package/ui/src/App.css

@@ -170,4 +170,4 @@
     width: 100%;
     justify-content: flex-start;
   }
-} 
+}

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, 
@@ -14,14 +14,67 @@ import VersionModal from './VersionModal';
 import '../styles/app-layout.css';
 
 const { Header, Content, Sider } = Layout;
-const { Title, Text } = Typography;
 
 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 [enableCyber, setEnableCyber] = useState(() => {
+    return localStorage.getItem('cyberTheme') !== 'false';
+  });
+
+  useEffect(() => {
+    document.body.classList.toggle('cyber-theme', enableCyber);
+  }, [enableCyber]);
+
+  useEffect(() => {
+    const handleStorage = () => {
+      setEnableCyber(localStorage.getItem('cyberTheme') !== 'false');
+    };
+    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 lightTheme = useMemo(() => ({
+    token: {
+      borderRadius: 6,
+      borderRadiusSM: 4,
+      borderRadiusLG: 8,
+    },
+    algorithm: theme.defaultAlgorithm,
+  }), []);
   
   // 版本弹窗控制方法
   const showVersionModal = () => setVersionModalVisible(true);
@@ -83,88 +136,130 @@ 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={enableCyber ? cyberTheme : lightTheme}>
+      <Layout className="app-layout">
+        {/* 顶部导航栏 */}
+        <Header className="app-header" style={{ background: enableCyber ? '#0f0f1a' : '#ffffff', borderBottom: enableCyber ? '1px solid #1a1a2e' : '1px solid #f0f0f0' }}>
+          <div className="header-left">
+            <div className="logo-container">
+              <div className="logo-icon-group">
+                <ExperimentOutlined className="logo-icon logo-icon-secondary" style={{ color: enableCyber ? '#00ff41' : '#52c41a' }} />
+              </div>
+              <div 
+                className="logo-text" 
+                style={enableCyber ? {
+                  background: 'linear-gradient(135deg, #00f0ff, #00ff41)',
+                  WebkitBackgroundClip: 'text',
+                  WebkitTextFillColor: 'transparent',
+                } : {
+                  background: 'linear-gradient(135deg, #1890ff, #52c41a)',
+                  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>
+          <div className="header-right">
+            <Space>
+              <Button 
+                type="text" 
+                size="small"
+                className="version-button"
+                onClick={showVersionModal}
+              >
+                <span style={{ color: enableCyber ? '#6b7280' : '#000000d9', fontFamily: "'Share Tech Mono', monospace" }}>
+                  v{__APP_VERSION__}
+                </span>
+              </Button>
+            </Space>
+          </div>
+        </Header>
 
-        {/* 主内容区 */}
-        <Layout className="app-content-wrapper" style={{ padding: 0, background: colorBgLayout }}>
-          {/* 内容区 */}
-          <Content
-            className="app-content"
-            style={{
-              background: colorBgContainer,
-              padding: 24,
-              borderRadius: borderRadius,
-              minHeight: 280,
-            }}
+        <Layout>
+          {/* 侧边导航 */}
+          <Sider 
+            width={220} 
+            className="app-sider" 
+            collapsed={collapsed} 
+            collapsible 
+            trigger={null}
+            style={{ background: enableCyber ? '#0f0f1a' : '#ffffff' }}
           >
-            {children}
-          </Content>
+            <Menu
+              mode="inline"
+              selectedKeys={getSelectedKeys()}
+              items={menuItems}
+              style={{ 
+                height: '100%', 
+                borderRight: 0, 
+                padding: '8px',
+                background: enableCyber ? '#0f0f1a' : '#ffffff',
+              }}
+            />
+          </Sider>
+
+          {/* 主内容区 */}
+          <Layout className="app-content-wrapper" style={{ padding: 0, background: enableCyber ? '#0a0a12' : '#f5f5f5' }}>
+            {/* 面包屑和标题 */}
+            <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: enableCyber ? '#a0a0a0' : '#000000d9' }}>{crumb.title}</Link>
+                    ) : (
+                      <span style={{ color: enableCyber ? '#e0e0e0' : '#000000d9', fontWeight: 500 }}>{crumb.title}</span>
+                    )}
+                  </Breadcrumb.Item>
+                ))}
+              </Breadcrumb>
+              <h1 style={{ 
+                margin: 0, 
+                fontSize: 22, 
+                fontWeight: 700, 
+                color: enableCyber ? '#e0e0e0' : '#000000d9',
+                fontFamily: enableCyber ? "'Orbitron', sans-serif" : undefined,
+                letterSpacing: enableCyber ? '0.5px' : undefined,
+              }}>
+                {getPageTitle()}
+              </h1>
+            </div>
+            
+            {/* 内容区 */}
+            <Content
+              className="app-content"
+              style={{
+                background: enableCyber ? '#0f0f1a' : '#ffffff',
+                padding: 24,
+                borderRadius: 6,
+                minHeight: 280,
+                margin: '16px 24px 24px',
+                border: enableCyber ? '1px solid #1a1a2e' : '1px solid #f0f0f0',
+              }}
+            >
+              {children}
+            </Content>
+          </Layout>
         </Layout>
+        
+        {/* 版本信息弹窗 */}
+        <VersionModal 
+          visible={versionModalVisible}
+          onCancel={hideVersionModal}
+        />
       </Layout>
-      
-      {/* 版本信息弹窗 */}
-      <VersionModal 
-        visible={versionModalVisible}
-        onCancel={hideVersionModal}
-      />
-    </Layout>
+    </ConfigProvider>
   );
 };
 
-export default AppLayout; 
+export default AppLayout;

package/ui/src/components/FeatureCard.js

@@ -6,7 +6,7 @@ const FeatureCard = ({ feature }) => {
   
   // 生成随机的主题色（实际项目中可能会根据某种规则来确定）
   const getRandomColor = () => {
-    const colors = ['#1890ff', '#13c2c2', '#52c41a', '#faad14', '#722ed1'];
+    const colors = ['#00f0ff', '#00ff41', '#f0e800', '#ff00a0', '#bd00ff'];
     return colors[Math.floor(Math.random() * colors.length)];
   };
   

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

@@ -252,7 +252,7 @@ const InterfaceTestModal = ({
                                     <span>
                                       <span style={{ color: '#d9d9d9' }}>{value}</span>
                                       {' '} → {' '}
-                                      <span style={{ color: '#52c41a', fontWeight: 'bold' }}>{generatedValue}</span>
+                                      <span style={{ color: '#00ff41', fontWeight: 'bold' }}>{generatedValue}</span>
                                       <span style={{ color: '#8c8c8c', fontSize: '12px' }}> (随机生成)</span>
                                     </span>
                                   ) : generatedValue}

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

@@ -22,22 +22,20 @@ const PreviewModal = ({
         <div style={{ 
           marginBottom: '16px',
           padding: '8px',
-          background: '#f9f9f9',
           borderRadius: '4px',
-          borderLeft: '4px solid #1890ff'
+          borderLeft: '4px solid #00f0ff'
         }}>
           <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>描述：</div>
-          <div>{previewContent.description}</div>
+          <div style={{ opacity: 0.7 }}>{previewContent.description}</div>
         </div>
       )}
       
       <div style={{ 
         maxHeight: '60vh', 
         overflow: 'auto', 
-        backgroundColor: '#f5f5f5', 
         padding: '16px',
         borderRadius: '4px',
-        fontFamily: 'monospace'
+        fontFamily: "'Share Tech Mono', monospace",
       }}>
         <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}>
           {previewContent?.content}
@@ -47,4 +45,4 @@ const PreviewModal = ({
   );
 };
 
-export default PreviewModal; 
+export default PreviewModal;

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" 
@@ -408,7 +407,7 @@ const ResponseContentEditor = ({
           <span>响应内容编辑</span>
           <Badge 
             count={responses.length} 
-            style={{ backgroundColor: '#52c41a' }} 
+            style={{ backgroundColor: '#00ff41' }} 
           />
         </div>
       }
@@ -433,9 +432,7 @@ const ResponseContentEditor = ({
             style={{ 
               display: 'flex', 
               alignItems: 'center', 
-              gap: '4px',
-              borderColor: '#1890ff',
-              color: '#1890ff'
+              gap: '4px'
             }}
           >
             添加响应
@@ -449,8 +446,8 @@ const ResponseContentEditor = ({
               display: 'flex', 
               alignItems: 'center', 
               gap: '4px',
-              borderColor: '#52c41a',
-              color: '#52c41a'
+              borderColor: '#00ff41',
+              color: '#00ff41'
             }}
           >
             预览

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,10 +3,13 @@ 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';
@@ -37,4 +40,4 @@ if (ReactDOM.createRoot) {
 } else {
   // 旧版本React
   ReactDOM.render(<App />, root);
-} 
+}

package/ui/src/pages/InterfaceManagementV2.js

@@ -1006,13 +1006,13 @@ const InterfaceManagement = () => {
                 <div key={key}>
                   {key}: {value}
                   {value && value.startsWith('@') && (
-                    <span style={{ color: '#52c41a' }}> (随机)</span>
+                    <span style={{ color: '#00ff41' }}> (随机)</span>
                   )}
                 </div>
               ))}
             </div>
           }>
-            <span style={{ color: '#1890ff' }}>
+            <span style={{ color: '#1677ff' }}>
               {count}个
               {hasRandomValue && <span style={{ marginLeft: 4 }}>🎲</span>}
             </span>
@@ -1058,7 +1058,7 @@ const InterfaceManagement = () => {
                 {interfaceMatchers.filter(m => m.paramPath).map((m, i) => (
                   <div key={i} style={{ fontSize: '12px' }}>
                     {m.paramPath}: {m.paramValue}
-                    <span style={{ color: '#52c41a', marginLeft: 4 }}>
+                    <span style={{ color: '#00ff41', marginLeft: 4 }}>
                       ({m.matchType === 'exact' ? '精确' : m.matchType === 'contains' ? '包含' : '正则'})
                     </span>
                   </div>
@@ -1067,14 +1067,14 @@ 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>
                     {resp.paramMatchers.filter(m => m.paramPath).map((m, mi) => (
                       <div key={mi} style={{ fontSize: '12px', paddingLeft: 8 }}>
                         {m.paramPath}: {m.paramValue}
-                        <span style={{ color: '#52c41a', marginLeft: 4 }}>
+                        <span style={{ color: '#00ff41', marginLeft: 4 }}>
                           ({m.matchType === 'exact' ? '精确' : m.matchType === 'contains' ? '包含' : '正则'})
                         </span>
                       </div>
@@ -1312,7 +1312,7 @@ const InterfaceManagement = () => {
                   ) : (
                     <Badge 
                       count={`共 ${filteredInterfaces.length} 个接口`} 
-                      style={{ backgroundColor: '#52c41a' }} 
+                      style={{ backgroundColor: '#00ff41' }} 
                     />
                   )}
                 </span>
@@ -1500,7 +1500,6 @@ const InterfaceManagement = () => {
             destroyOnClose
             bodyStyle={{
               padding: '0',
-              background: '#fafafa',
               overflowY: 'auto'
             }}
             footer={
@@ -1744,8 +1743,7 @@ const InterfaceManagement = () => {
           bodyStyle={{ 
             maxHeight: '75vh', 
             overflow: 'auto', 
-            padding: '0',
-            background: '#fafafa'
+            padding: '0'
           }}
           className="interface-modal"
         >

package/ui/src/pages/MockDataV2.js

@@ -454,7 +454,7 @@ const MockData = () => {
       <Col xs={24} sm={12} md={8} lg={6} key={feature.id} style={{ marginBottom: 16 }}>
         <Badge.Ribbon 
           text={feature.active ? '已启用' : '已禁用'} 
-          color={feature.active ? '#52c41a' : '#f5222d'}
+          color={feature.active ? '#00ff41' : '#f5222d'}
           style={{ display: 'block' }}
         >
           <Card
@@ -566,7 +566,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' }} />
         ),
       },
       {
@@ -664,7 +664,7 @@ const MockData = () => {
               <Badge 
                 count="V2" 
                 style={{ 
-                  backgroundColor: '#52c41a',
+                  backgroundColor: '#00ff41',
                   fontSize: '12px',
                   height: '20px',
                   lineHeight: '20px',
@@ -689,7 +689,7 @@ const MockData = () => {
               type="primary" 
               icon={<ExportOutlined />}
               onClick={importFeatureConfig}
-              style={{ backgroundColor: '#52c41a', borderColor: '#52c41a' }}
+              style={{ backgroundColor: '#00ff41', borderColor: '#00ff41' }}
             >
               导入功能
             </Button>

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,17 @@ 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({
@@ -229,6 +245,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>
   );