whistle.mock-plugins 1.0.0

package/public/bundle.js.LICENSE.txt

@@ -0,0 +1,38 @@
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/public/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Whistle Mock 插件</title><script defer="defer" src="/bundle.js"></script></head><body><div id="root"></div></body></html>

package/public/plugin.mock-plugin.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="refresh" content="0;url=/ui/">
+  <title>Redirecting...</title>
+</head>
+<body>
+  <script>
+    // 重定向到正确的路径
+    window.location.href = '/ui/';
+  </script>
+  <p>如果页面没有自动跳转，<a href="/ui/">请点击这里</a></p>
+</body>
+</html> 

package/rules.txt

@@ -0,0 +1,22 @@
+# Whistle Mock Plugin 使用指南
+# 版本: 0.3.0
+
+# ===== 基本规则配置 =====
+# 在 Whistle 的规则配置中，使用以下格式添加规则：
+* whistle.mock-plugin://
+
+# 该插件现在会自动匹配已配置的接口规则，对于没有在插件中配置的接口，不会进行拦截
+
+# ===== 规则匹配逻辑 =====
+# 1. 请求会先检查是否匹配接口配置中定义的 URL 模式
+# 2. 如果找到匹配的接口配置，且该接口处于启用状态，才会由插件处理
+# 3. 如果没有匹配的接口配置，请求会直接透传到真实服务器
+
+# ===== 常见配置示例 =====
+# 不需要添加其他规则，只需要保留上面的全局规则即可
+# 插件会根据在插件界面中配置的接口规则自动决定哪些请求需要处理
+
+# ===== 调试功能 =====
+# 通过访问以下URL可以查看插件的配置和状态：
+# 查看全部配置: whistle.mock-plugin/_debug/config
+# 查看启用的接口: whistle.mock-plugin/_debug/enabled-interfaces

package/test/rulesServer.test.js

@@ -0,0 +1,120 @@
+/**
+ * 测试 rulesServer 规则匹配功能
+ * 
+ * 这个文件提供了一个简单的测试用例，用于验证 rulesServer 的匹配功能
+ * 实际环境中，您可以运行这个测试来确认规则匹配是否按预期工作
+ */
+
+// 模拟 fs-extra 模块
+const fsMock = {
+  existsSync: jest.fn().mockReturnValue(true),
+  readJsonSync: jest.fn().mockReturnValue({
+    interfaces: [
+      {
+        id: '1',
+        name: '测试接口1',
+        urlPattern: '/api/test1',
+        httpMethod: 'GET',
+        enabled: true
+      },
+      {
+        id: '2',
+        name: '测试接口2',
+        urlPattern: '/api/test2',
+        httpMethod: 'POST',
+        enabled: true
+      },
+      {
+        id: '3',
+        name: '测试接口3',
+        urlPattern: '/api/test3/*',
+        httpMethod: 'ALL',
+        enabled: true
+      },
+      {
+        id: '4',
+        name: '测试接口4',
+        urlPattern: '/api/test4',
+        httpMethod: 'GET',
+        enabled: false // 禁用状态
+      }
+    ]
+  })
+};
+
+// 模拟模块
+jest.mock('fs-extra', () => fsMock);
+jest.mock('path', () => ({
+  join: (...args) => args.join('/')
+}));
+
+// 导入被测试的模块
+const rulesServer = require('../lib/rules-server');
+
+describe('rulesServer 测试', () => {
+  let requestHandler;
+  let req;
+  let res;
+  
+  beforeEach(() => {
+    // 模拟 server
+    const server = {
+      on: (event, handler) => {
+        if (event === 'request') {
+          requestHandler = handler;
+        }
+      }
+    };
+    
+    // 模拟请求和响应对象
+    req = {
+      originalReq: {
+        url: 'http://example.com/api/test1',
+        method: 'GET'
+      }
+    };
+    
+    res = {
+      end: jest.fn()
+    };
+    
+    // 初始化 rulesServer
+    rulesServer(server, {});
+  });
+  
+  test('匹配到的URL应该返回mock-plugin规则', () => {
+    // 测试匹配成功的情况
+    req.originalReq.url = 'http://example.com/api/test1';
+    req.originalReq.method = 'GET';
+    
+    requestHandler(req, res);
+    expect(res.end).toHaveBeenCalledWith('mock-plugin://');
+  });
+  
+  test('未匹配的URL应该返回空字符串', () => {
+    // 测试匹配失败的情况
+    req.originalReq.url = 'http://example.com/api/not-exist';
+    req.originalReq.method = 'GET';
+    
+    requestHandler(req, res);
+    expect(res.end).toHaveBeenCalledWith('');
+  });
+  
+  test('禁用的接口不应该被匹配', () => {
+    // 测试禁用接口的情况
+    req.originalReq.url = 'http://example.com/api/test4';
+    req.originalReq.method = 'GET';
+    
+    requestHandler(req, res);
+    expect(res.end).toHaveBeenCalledWith('');
+  });
+  
+  test('通配符模式应该正确匹配', () => {
+    // 测试通配符匹配
+    req.originalReq.url = 'http://example.com/api/test3/123';
+    req.originalReq.method = 'GET';
+    
+    requestHandler(req, res);
+    expect(res.end).toHaveBeenCalledWith('mock-plugin://');
+  });
+}); 

package/ui/src/App.css

@@ -0,0 +1,173 @@
+.App {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  height: 100%;
+  width: 100%;
+}
+
+/* 页面容器样式 */
+.page-container {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  padding: 24px;
+  transition: all 0.3s;
+}
+
+/* 页面标题栏样式 */
+.page-title-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.page-title {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 32px;
+}
+
+.page-description {
+  margin-top: 8px;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+}
+
+.page-actions {
+  display: flex;
+  gap: 12px;
+}
+
+/* 卡片样式 */
+.custom-card {
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s;
+  height: 100%;
+}
+
+.custom-card:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  transform: translateY(-3px);
+}
+
+/* 表格样式 */
+.custom-table {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.custom-table .ant-table-thead > tr > th {
+  background: #fafafa;
+  font-weight: 600;
+}
+
+/* 表单样式 */
+.custom-form-item-label {
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.custom-form-item-hint {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 13px;
+  margin-top: 4px;
+}
+
+/* 按钮样式 */
+.custom-button {
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.custom-button-icon {
+  margin-right: 8px;
+}
+
+/* 状态标签样式 */
+.status-tag {
+  border-radius: 10px;
+  padding: 2px 8px;
+  font-size: 12px;
+  line-height: 1.5;
+  display: inline-flex;
+  align-items: center;
+}
+
+.status-tag-success {
+  background-color: #f6ffed;
+  border: 1px solid #b7eb8f;
+  color: #52c41a;
+}
+
+.status-tag-warning {
+  background-color: #fffbe6;
+  border: 1px solid #ffe58f;
+  color: #faad14;
+}
+
+.status-tag-error {
+  background-color: #fff2f0;
+  border: 1px solid #ffccc7;
+  color: #ff4d4f;
+}
+
+/* 动画效果 */
+.fade-in {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 响应式调整 */
+@media (max-width: 576px) {
+  .page-container {
+    padding: 16px;
+  }
+  
+  .page-title-bar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .page-actions {
+    margin-top: 16px;
+    width: 100%;
+    justify-content: flex-start;
+  }
+} 

package/ui/src/App.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
+import MockData from './pages/MockData';
+import InterfaceManagement from './pages/InterfaceManagement';
+import Settings from './pages/Settings';
+import './App.css';
+
+function App() {
+  return (
+    <Router>
+      <div className="App">
+        <Switch>
+          <Route exact path="/" component={MockData} />
+          <Route exact path="/interface" component={InterfaceManagement} />
+          <Route path="/interface/:featureId" component={InterfaceManagement} />
+          <Route path="/settings" component={Settings} />
+          <Redirect to="/" />
+        </Switch>
+      </div>
+    </Router>
+  );
+}
+
+export default App; 

package/ui/src/components/AppLayout.js

@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import { Layout, Menu, Button, Breadcrumb, Typography, Space, theme, Divider, Badge } from 'antd';
+import { 
+  AppstoreOutlined, 
+  ApiOutlined, 
+  SettingOutlined,
+  FileTextOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  DashboardOutlined
+} from '@ant-design/icons';
+import { Link, useLocation } from 'react-router-dom';
+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 { token } = theme.useToken();
+  
+  // 根据当前路径获取选中的菜单项和面包屑
+  const getSelectedKeys = () => {
+    if (currentPath === '/' || currentPath === '#/') return ['1'];
+    if (currentPath.startsWith('/interface') || currentPath.includes('/interface')) return ['2'];
+    if (currentPath === '/settings' || currentPath.includes('/settings')) return ['3'];
+    return [];
+  };
+
+  // 根据当前路径获取面包屑
+  const getBreadcrumbs = () => {
+    const breadcrumbs = [
+      { path: '/', title: '首页' }
+    ];
+    
+    if (currentPath.startsWith('/interface')) {
+      breadcrumbs.push({ path: '/interface', title: '接口管理' });
+      
+      // 如果有featureId参数，添加特定功能模块名称
+      if (currentPath.includes('/interface/') && currentPath !== '/interface/') {
+        breadcrumbs.push({ path: currentPath, title: '功能接口详情' });
+      }
+    } else if (currentPath === '/settings') {
+      breadcrumbs.push({ path: '/settings', title: '系统设置' });
+    }
+    
+    return breadcrumbs;
+  };
+
+  // 获取当前页面标题
+  const getPageTitle = () => {
+    if (currentPath === '/' || currentPath === '#/') return '功能模块管理';
+    if (currentPath.startsWith('/interface')) return '接口配置管理';
+    if (currentPath === '/settings') return '系统设置';
+    return 'Whistle Mock Plugin';
+  };
+
+  // 菜单配置
+  const menuItems = [
+    {
+      key: '1',
+      icon: <AppstoreOutlined />,
+      label: <Link to="/">功能模块</Link>,
+    },
+    {
+      key: '2',
+      icon: <ApiOutlined />,
+      label: <Link to="/interface">接口管理</Link>,
+    },
+    {
+      key: '3',
+      icon: <SettingOutlined />,
+      label: <Link to="/settings">系统设置</Link>,
+    }
+  ];
+
+  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">
+            <DashboardOutlined className="logo-icon" />
+            <div className="logo-text">Whistle Mock</div>
+          </div>
+          <Button
+            type="text"
+            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+            onClick={() => setCollapsed(!collapsed)}
+            className="collapse-button"
+          />
+        </div>
+        <div className="header-right">
+          <Space>
+            <Text type="secondary">v0.1.0</Text>
+          </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,
+            }}
+          >
+            {children}
+          </Content>
+        </Layout>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default AppLayout; 

package/ui/src/components/FeatureCard.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import '../styles/feature-card.css';
+
+const FeatureCard = ({ feature }) => {
+  const { name, description, active, interfaceCount, createdAt } = feature;
+  
+  // 生成随机的主题色（实际项目中可能会根据某种规则来确定）
+  const getRandomColor = () => {
+    const colors = ['#1890ff', '#13c2c2', '#52c41a', '#faad14', '#722ed1'];
+    return colors[Math.floor(Math.random() * colors.length)];
+  };
+  
+  const themeColor = getRandomColor();
+  
+  return (
+    <div className="feature-card">
+      <div className="feature-card-color-bar" style={{ backgroundColor: themeColor }}></div>
+      <div className="feature-card-header">
+        <h3 className="feature-card-title">{name}</h3>
+        <span className={`feature-card-badge ${active ? 'active' : 'inactive'}`}>
+          {active ? '已启用' : '未启用'}
+        </span>
+      </div>
+      <div className="feature-card-content">
+        <p className="feature-card-description">{description || '没有描述'}</p>
+        <div className="feature-card-stats">
+          <div className="feature-stat">
+            <span className="feature-stat-value">{interfaceCount}</span>
+            <span className="feature-stat-label">接口数量</span>
+          </div>
+          {createdAt && (
+            <div className="feature-stat">
+              <span className="feature-stat-label">创建于</span>
+              <span className="feature-stat-value feature-date">{createdAt}</span>
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="feature-card-footer">
+        <button className="card-btn edit-btn">
+          <i className="icon-edit"></i>
+          编辑
+        </button>
+        <button className="card-btn primary-btn" style={{ borderColor: themeColor, color: themeColor }}>
+          <i className="icon-manage"></i>
+          管理接口
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default FeatureCard; 

package/ui/src/components/Layout.js

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import '../styles/layout.css';
+
+const Layout = ({ children }) => {
+  const [activeFeature, setActiveFeature] = useState(null);
+  const [features, setFeatures] = useState([
+    { id: 1, name: '用户数据', active: true, count: 3 },
+    { id: 2, name: '订单信息', active: false, count: 2 },
+    { id: 3, name: '商品列表', active: false, count: 5 }
+  ]);
+
+  const handleFeatureClick = (id) => {
+    setActiveFeature(id);
+    // 更新功能状态
+    setFeatures(features.map(feature => ({
+      ...feature,
+      active: feature.id === id ? !feature.active : feature.active
+    })));
+  };
+
+  const handleCreateFeature = () => {
+    // 模拟创建新功能
+    const newId = features.length > 0 ? Math.max(...features.map(f => f.id)) + 1 : 1;
+    const newFeature = {
+      id: newId,
+      name: `新功能 ${newId}`,
+      active: false,
+      count: 0
+    };
+    setFeatures([...features, newFeature]);
+  };
+
+  return (
+    <div className="layout">
+      {/* 顶部导航栏 */}
+      <div className="header">
+        <div className="logo">
+          <div className="logo-icon">W</div>
+          Whistle 接口代理插件
+        </div>
+        <div className="search">
+          <input type="text" placeholder="搜索..." />
+        </div>
+        <div className="header-actions">
+          <button>
+            <i>🔄</i> 刷新
+          </button>
+          <button>
+            <i>⚙️</i> 设置
+          </button>
+        </div>
+      </div>
+      
+      {/* 主内容区域 */}
+      <div className="main-container">
+        {/* 左侧导航 */}
+        <div className="sidebar">
+          <div className="create-feature">
+            <button onClick={handleCreateFeature}>+ 创建新功能</button>
+          </div>
+          
+          <div className="feature-list">
+            {features.map(feature => (
+              <div 
+                key={feature.id}
+                className={`feature-item ${activeFeature === feature.id ? 'active' : ''}`}
+                onClick={() => handleFeatureClick(feature.id)}
+              >
+                <div className="feature-item-name">
+                  <div className={`status-icon ${feature.active ? 'active' : ''}`}>
+                    {feature.active ? '✓' : ''}
+                  </div>
+                  {feature.name}
+                </div>
+                <div className="feature-item-count">{feature.count}</div>
+              </div>
+            ))}
+          </div>
+          
+          <div className="sidebar-footer">
+            Whistle Mock Plugin v0.2.0
+          </div>
+        </div>
+        
+        {/* 内容区 */}
+        <div className="content">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Layout;