whistle.mock-plugins 1.0.0

package/ui/src/pages/SettingsPage.js

@@ -0,0 +1,165 @@
+import React, { useState, useEffect } from 'react';
+import { Card, Form, Input, Button, Switch, message, Divider, Typography, Space, Select } from 'antd';
+import { SaveOutlined, ReloadOutlined } from '@ant-design/icons';
+
+const { Title, Paragraph, Text } = Typography;
+const { Option } = Select;
+
+// 模拟设置 API
+const SettingsAPI = {
+  getSettings: () => Promise.resolve({
+    mockFolder: './mocks',
+    enableAutoSave: true,
+    responseDelay: 200,
+    logLevel: 'info',
+  }),
+  saveSettings: (settings) => Promise.resolve(settings)
+};
+
+const SettingsPage = () => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    fetchSettings();
+  }, []);
+
+  const fetchSettings = async () => {
+    setLoading(true);
+    try {
+      const settings = await SettingsAPI.getSettings();
+      form.setFieldsValue(settings);
+    } catch (error) {
+      console.error("获取设置失败:", error);
+      message.error('获取设置失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    try {
+      const values = await form.validateFields();
+      setLoading(true);
+      await SettingsAPI.saveSettings(values);
+      message.success('设置保存成功');
+    } catch (error) {
+      console.error("保存设置失败:", error);
+      message.error('保存设置失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleReset = () => {
+    form.resetFields();
+    fetchSettings();
+  };
+
+  return (
+    <div className="settings-page">
+      <Card title="全局设置">
+        <Form
+          form={form}
+          layout="vertical"
+          initialValues={{
+            mockFolder: './mocks',
+            enableAutoSave: true,
+            responseDelay: 200,
+            logLevel: 'info',
+          }}
+        >
+          <Title level={4}>基本设置</Title>
+          <Form.Item
+            name="mockFolder"
+            label="Mock 数据文件夹路径"
+            rules={[{ required: true, message: '请输入 Mock 数据文件夹路径!' }]}
+          >
+            <Input placeholder="./mocks" />
+          </Form.Item>
+
+          <Form.Item
+            name="enableAutoSave"
+            label="启用自动保存"
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+
+          <Form.Item
+            name="responseDelay"
+            label="默认响应延迟(ms)"
+            rules={[{ required: true, message: '请输入默认响应延迟!' }]}
+          >
+            <Input type="number" placeholder="200" />
+          </Form.Item>
+
+          <Form.Item
+            name="logLevel"
+            label="日志级别"
+            rules={[{ required: true, message: '请选择日志级别!' }]}
+          >
+            <Select placeholder="请选择日志级别">
+              <Option value="debug">Debug</Option>
+              <Option value="info">Info</Option>
+              <Option value="warn">Warning</Option>
+              <Option value="error">Error</Option>
+            </Select>
+          </Form.Item>
+
+          <Divider />
+
+          <Title level={4}>使用说明</Title>
+          <Paragraph>
+            Whistle Mock 插件用于快速创建 API 模拟数据，支持以下功能：
+          </Paragraph>
+
+          <Paragraph>
+            <ul>
+              <li>
+                <Text strong>接口管理</Text> - 创建和管理模拟接口，支持 GET、POST 等多种请求方法
+              </li>
+              <li>
+                <Text strong>文件管理</Text> - 编辑 JSON 文件作为模拟数据源
+              </li>
+              <li>
+                <Text strong>Mock 模板语法</Text> - 支持使用 Mock.js 模板语法生成随机数据
+              </li>
+              <li>
+                <Text strong>路径匹配规则</Text> - 支持通配符和正则表达式匹配请求路径
+              </li>
+            </ul>
+          </Paragraph>
+
+          <Paragraph>
+            要启用 Whistle Mock 插件，请在 Whistle 界面添加以下规则：
+            <pre>
+              example.com mock://
+            </pre>
+          </Paragraph>
+
+          <Divider />
+
+          <Space>
+            <Button 
+              type="primary" 
+              icon={<SaveOutlined />} 
+              onClick={handleSave}
+              loading={loading}
+            >
+              保存设置
+            </Button>
+            <Button 
+              icon={<ReloadOutlined />} 
+              onClick={handleReset}
+            >
+              重置
+            </Button>
+          </Space>
+        </Form>
+      </Card>
+    </div>
+  );
+};
+
+export default SettingsPage; 

package/ui/src/pages/UrlRedirect.js

@@ -0,0 +1,225 @@
+import React, { useState } from 'react';
+import AppLayout from '../components/AppLayout';
+import '../styles/url-redirect.css';
+
+const UrlRedirect = () => {
+  const [urlRedirects, setUrlRedirects] = useState([
+    {
+      id: 1,
+      sourceUrl: 'https://api.example.com/users',
+      targetUrl: 'http://localhost:3000/mock/users',
+      description: '用户API重定向到本地',
+      active: true
+    },
+    {
+      id: 2,
+      sourceUrl: 'https://api.example.com/products',
+      targetUrl: 'http://localhost:3000/mock/products',
+      description: '产品API重定向到本地',
+      active: false
+    }
+  ]);
+  
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [currentRedirect, setCurrentRedirect] = useState(null);
+  const [sourceUrl, setSourceUrl] = useState('');
+  const [targetUrl, setTargetUrl] = useState('');
+  const [description, setDescription] = useState('');
+  
+  const openModal = (redirect = null) => {
+    if (redirect) {
+      setCurrentRedirect(redirect);
+      setSourceUrl(redirect.sourceUrl);
+      setTargetUrl(redirect.targetUrl);
+      setDescription(redirect.description);
+    } else {
+      setCurrentRedirect(null);
+      setSourceUrl('');
+      setTargetUrl('');
+      setDescription('');
+    }
+    setIsModalOpen(true);
+  };
+  
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+  
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    
+    if (!sourceUrl || !targetUrl) {
+      alert('请填写源URL和目标URL');
+      return;
+    }
+    
+    if (currentRedirect) {
+      // 编辑现有配置
+      setUrlRedirects(urlRedirects.map(redirect => 
+        redirect.id === currentRedirect.id 
+          ? { ...redirect, sourceUrl, targetUrl, description }
+          : redirect
+      ));
+    } else {
+      // 添加新配置
+      const newRedirect = {
+        id: urlRedirects.length > 0 ? Math.max(...urlRedirects.map(r => r.id)) + 1 : 1,
+        sourceUrl,
+        targetUrl,
+        description,
+        active: true
+      };
+      setUrlRedirects([...urlRedirects, newRedirect]);
+    }
+    
+    closeModal();
+  };
+  
+  const toggleActive = (id) => {
+    setUrlRedirects(urlRedirects.map(redirect => 
+      redirect.id === id ? { ...redirect, active: !redirect.active } : redirect
+    ));
+  };
+  
+  const deleteRedirect = (id) => {
+    if (window.confirm('确定要删除此条重定向配置吗？')) {
+      setUrlRedirects(urlRedirects.filter(redirect => redirect.id !== id));
+    }
+  };
+  
+  return (
+    <AppLayout>
+      <div className="url-redirect-container">
+        <div className="page-title-bar">
+          <div>
+            <h1 className="page-title">URL重定向配置</h1>
+            <div className="page-description">
+              配置URL重定向规则，支持路径和查询参数匹配
+            </div>
+          </div>
+          <div className="page-actions">
+            <button className="add-button" onClick={() => openModal()}>
+              添加URL重定向
+            </button>
+          </div>
+        </div>
+        
+        <div className="redirect-list-container">
+          {urlRedirects.length === 0 ? (
+            <div className="empty-data">
+              <div className="empty-icon">🔄</div>
+              <div className="empty-text">暂无URL重定向配置</div>
+              <button className="add-button" onClick={() => openModal()}>
+                添加URL重定向
+              </button>
+            </div>
+          ) : (
+            <table className="redirect-table">
+              <thead>
+                <tr>
+                  <th>状态</th>
+                  <th>源URL</th>
+                  <th>目标URL</th>
+                  <th>描述</th>
+                  <th>操作</th>
+                </tr>
+              </thead>
+              <tbody>
+                {urlRedirects.map(redirect => (
+                  <tr key={redirect.id} className={redirect.active ? '' : 'inactive'}>
+                    <td>
+                      <label className="switch">
+                        <input 
+                          type="checkbox" 
+                          checked={redirect.active} 
+                          onChange={() => toggleActive(redirect.id)} 
+                        />
+                        <span className="slider"></span>
+                      </label>
+                    </td>
+                    <td className="url-text">{redirect.sourceUrl}</td>
+                    <td className="url-text">{redirect.targetUrl}</td>
+                    <td>{redirect.description || '-'}</td>
+                    <td>
+                      <div className="action-buttons">
+                        <button 
+                          className="edit-button" 
+                          onClick={() => openModal(redirect)}
+                        >
+                          编辑
+                        </button>
+                        <button 
+                          className="delete-button" 
+                          onClick={() => deleteRedirect(redirect.id)}
+                        >
+                          删除
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+        
+        {isModalOpen && (
+          <div className="modal-overlay">
+            <div className="modal">
+              <div className="modal-header">
+                <h2>{currentRedirect ? '编辑URL重定向' : '添加URL重定向'}</h2>
+                <button className="close-button" onClick={closeModal}>×</button>
+              </div>
+              <form className="redirect-form" onSubmit={handleSubmit}>
+                <div className="form-group">
+                  <label>源URL</label>
+                  <input 
+                    type="text" 
+                    value={sourceUrl} 
+                    onChange={(e) => setSourceUrl(e.target.value)} 
+                    placeholder="https://api.example.com/endpoint"
+                    required
+                  />
+                  <div className="help-text">需要重定向的原始URL</div>
+                </div>
+                
+                <div className="form-group">
+                  <label>目标URL</label>
+                  <input 
+                    type="text" 
+                    value={targetUrl} 
+                    onChange={(e) => setTargetUrl(e.target.value)} 
+                    placeholder="http://localhost:3000/mock/endpoint"
+                    required
+                  />
+                  <div className="help-text">重定向的目标地址</div>
+                </div>
+                
+                <div className="form-group">
+                  <label>描述（可选）</label>
+                  <input 
+                    type="text" 
+                    value={description} 
+                    onChange={(e) => setDescription(e.target.value)} 
+                    placeholder="重定向描述"
+                  />
+                </div>
+                
+                <div className="form-actions">
+                  <button type="button" className="cancel-button" onClick={closeModal}>
+                    取消
+                  </button>
+                  <button type="submit" className="submit-button">
+                    {currentRedirect ? '保存修改' : '添加重定向'}
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        )}
+      </div>
+    </AppLayout>
+  );
+};
+
+export default UrlRedirect; 

package/ui/src/pages/Welcome.js

@@ -0,0 +1,155 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import AppLayout from '../components/AppLayout';
+import '../styles/welcome.css';
+
+const Welcome = () => {
+  // 模拟统计数据
+  const stats = {
+    featuresCount: 3,
+    interfacesCount: 15,
+    activeInterfacesCount: 12,
+    requestsHandledCount: 256
+  };
+
+  // 模拟最近活动数据
+  const recentActivities = [
+    { id: 1, type: '创建', target: '功能', name: '商品列表', time: '2023-11-05 14:30' },
+    { id: 2, type: '修改', target: '接口', name: '用户登录', time: '2023-11-05 14:15' },
+    { id: 3, type: '启用', target: '接口', name: '获取用户信息', time: '2023-11-05 13:45' },
+    { id: 4, type: '创建', target: '接口', name: '商品详情', time: '2023-11-05 13:30' },
+    { id: 5, type: '禁用', target: '功能', name: '购物车', time: '2023-11-05 11:20' }
+  ];
+
+  return (
+    <AppLayout>
+      <div className="welcome-container">
+        <div className="welcome-header">
+          <h1>欢迎使用 Whistle Mock 数据工厂</h1>
+          <p>快速创建和管理模拟数据，提高前端开发效率</p>
+        </div>
+        
+        <div className="cards-container">
+          {/* 功能概览卡片 */}
+          <div className="card stats-card">
+            <div className="card-header">
+              <div className="card-icon">📊</div>
+              <h2>功能概览</h2>
+            </div>
+            <div className="card-content">
+              <div className="stat-item">
+                <div className="stat-value">{stats.featuresCount}</div>
+                <div className="stat-label">功能模块</div>
+              </div>
+              <div className="stat-item">
+                <div className="stat-value">{stats.interfacesCount}</div>
+                <div className="stat-label">接口配置</div>
+              </div>
+              <div className="stat-item">
+                <div className="stat-value">{stats.activeInterfacesCount}</div>
+                <div className="stat-label">启用接口</div>
+              </div>
+              <div className="stat-item">
+                <div className="stat-value">{stats.requestsHandledCount}</div>
+                <div className="stat-label">已处理请求</div>
+              </div>
+            </div>
+          </div>
+          
+          {/* 快速开始卡片 */}
+          <div className="card quickstart-card">
+            <div className="card-header">
+              <div className="card-icon">🚀</div>
+              <h2>快速开始</h2>
+            </div>
+            <div className="card-content">
+              <div className="steps">
+                <div className="step">
+                  <div className="step-number">1</div>
+                  <div className="step-content">
+                    <div className="step-title">创建功能模块</div>
+                    <div className="step-desc">创建一个功能模块，用于组织相关接口</div>
+                  </div>
+                </div>
+                <div className="step">
+                  <div className="step-number">2</div>
+                  <div className="step-content">
+                    <div className="step-title">添加接口配置</div>
+                    <div className="step-desc">配置API接口的URL匹配规则和响应数据</div>
+                  </div>
+                </div>
+                <div className="step">
+                  <div className="step-number">3</div>
+                  <div className="step-content">
+                    <div className="step-title">启用接口使用</div>
+                    <div className="step-desc">启用功能模块和接口，即可在Whistle中使用</div>
+                  </div>
+                </div>
+              </div>
+              <div className="quickstart-actions">
+                <Link to="/mock-data">
+                  <button className="quickstart-button">开始创建功能</button>
+                </Link>
+              </div>
+            </div>
+          </div>
+          
+          {/* 使用说明卡片 */}
+          <div className="card usage-card">
+            <div className="card-header">
+              <div className="card-icon">📘</div>
+              <h2>使用说明</h2>
+            </div>
+            <div className="card-content">
+              <div className="usage-item">
+                <div className="usage-title">添加Whistle规则</div>
+                <div className="usage-desc">
+                  在Whistle中添加如下规则：
+                  <pre className="code-block">example.com mock://</pre>
+                </div>
+              </div>
+              <div className="usage-item">
+                <div className="usage-title">匹配规则说明</div>
+                <div className="usage-desc">
+                  支持多种匹配方式：
+                  <ul className="usage-list">
+                    <li>精确匹配: <code>/api/users</code></li>
+                    <li>通配符匹配: <code>/api/users/*</code></li>
+                    <li>正则匹配: <code>/\/api\/products\/\d+/</code></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        {/* 最近活动 */}
+        <div className="recent-activities">
+          <div className="section-header">
+            <h2>最近活动</h2>
+          </div>
+          <div className="activities-list">
+            {recentActivities.map(activity => (
+              <div key={activity.id} className="activity-item">
+                <div className="activity-icon">
+                  {activity.type === '创建' ? '➕' : 
+                   activity.type === '修改' ? '✏️' : 
+                   activity.type === '启用' ? '✅' : 
+                   activity.type === '禁用' ? '❌' : '🔄'}
+                </div>
+                <div className="activity-content">
+                  <div className="activity-title">
+                    {activity.type}了{activity.target}「{activity.name}」
+                  </div>
+                  <div className="activity-time">{activity.time}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </AppLayout>
+  );
+};
+
+export default Welcome;