whistle.mock-plugins 1.0.0

package/ui/src/pages/MockData.js

@@ -0,0 +1,472 @@
+import React, { useState, useEffect } 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 } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, ApiOutlined, ExportOutlined, InfoCircleOutlined, CalendarOutlined } from '@ant-design/icons';
+import '../styles/mock-data.css';
+
+const { Text, Title, Paragraph } = Typography;
+const { TextArea } = Input;
+
+const MockData = () => {
+  const history = useHistory();
+  const [mockFeatures, setMockFeatures] = useState([]);
+  const [showModal, setShowModal] = useState(false);
+  const [currentFeature, setCurrentFeature] = useState(null);
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    active: true
+  });
+  const [loading, setLoading] = useState(true);
+  const [form] = Form.useForm();
+
+  // 加载功能列表
+  useEffect(() => {
+    fetchFeatures();
+  }, []);
+
+  // 获取所有功能模块
+  const fetchFeatures = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/cgi-bin/features');
+      const result = await response.json();
+      
+      if (result.code === 0) {
+        setMockFeatures(result.data || []);
+      } else {
+        console.error('获取功能模块失败:', result.message);
+        message.error('获取功能模块失败: ' + result.message);
+      }
+    } catch (error) {
+      console.error('获取功能模块错误:', error);
+      message.error('获取功能模块失败, 请检查网络连接');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const openModal = (feature = null) => {
+    if (feature) {
+      setCurrentFeature(feature);
+      form.setFieldsValue({
+        name: feature.name,
+        description: feature.description,
+        active: feature.active !== false
+      });
+    } else {
+      setCurrentFeature(null);
+      form.resetFields();
+      form.setFieldsValue({
+        active: true
+      });
+    }
+    setShowModal(true);
+  };
+
+  const closeModal = () => {
+    setShowModal(false);
+  };
+
+  const handleSubmit = async (values) => {
+    try {
+      const featureData = {
+        ...values
+      };
+      
+      // 如果是编辑已有功能，添加ID
+      if (currentFeature) {
+        featureData.id = currentFeature.id;
+      }
+      
+      setLoading(true);
+      const response = await fetch('/cgi-bin/features', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(featureData)
+      });
+      
+      const result = await response.json();
+      
+      if (result.code === 0) {
+        // 刷新功能列表
+        message.success(currentFeature ? '功能模块更新成功' : '功能模块创建成功');
+        fetchFeatures();
+        closeModal();
+      } else {
+        message.error('操作失败: ' + result.message);
+      }
+    } catch (error) {
+      console.error('保存功能模块错误:', error);
+      message.error('保存失败: ' + error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleToggleActive = async (id, currentActive) => {
+    try {
+      const response = await fetch(`/cgi-bin/features?id=${id}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          active: !currentActive
+        })
+      });
+      
+      const result = await response.json();
+      
+      if (result.code === 0) {
+        message.success(`${currentActive ? '禁用' : '启用'}功能模块成功`);
+        // 更新本地状态
+        setMockFeatures(mockFeatures.map(feature => 
+          feature.id === id ? { ...feature, active: !currentActive } : feature
+        ));
+      } else {
+        message.error(`${currentActive ? '禁用' : '启用'}功能模块失败: ${result.message}`);
+      }
+    } catch (error) {
+      console.error(`${currentActive ? '禁用' : '启用'}功能模块错误:`, error);
+      message.error(`操作失败: ${error.message}`);
+    }
+  };
+
+  const deleteFeature = async (id) => {
+    Modal.confirm({
+      title: '确定要删除此功能吗？',
+      content: '这将删除所有相关的接口和模拟数据，此操作无法恢复。',
+      okText: '删除',
+      okType: 'danger',
+      cancelText: '取消',
+      onOk: async () => {
+        try {
+          setLoading(true);
+          const response = await fetch(`/cgi-bin/features?id=${id}`, {
+            method: 'DELETE'
+          });
+          
+          const result = await response.json();
+          
+          if (result.code === 0) {
+            message.success('功能模块已成功删除');
+            // 更新本地状态
+            setMockFeatures(mockFeatures.filter(f => f.id !== id));
+          } else {
+            message.error('删除失败: ' + result.message);
+          }
+        } catch (error) {
+          console.error('删除功能错误:', error);
+          message.error('操作失败: ' + error.message);
+        } finally {
+          setLoading(false);
+        }
+      }
+    });
+  };
+
+  const viewInterfaces = (feature) => {
+    // 导航到该功能的接口列表页面
+    history.push(`/interface/${feature.id}`);
+  };
+
+  const exportFeatureConfig = async (feature) => {
+    try {
+      // 获取该功能的所有接口
+      const response = await fetch(`/cgi-bin/interfaces?featureId=${feature.id}`);
+      const result = await response.json();
+      
+      // 创建完整配置
+      const config = {
+        ...feature,
+        interfaces: result.code === 0 ? result.data : []
+      };
+      
+      const dataStr = JSON.stringify(config, null, 2);
+      const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
+      
+      const exportFileDefaultName = `whistle-mock-feature-${feature.id}.json`;
+      
+      const linkElement = document.createElement('a');
+      linkElement.setAttribute('href', dataUri);
+      linkElement.setAttribute('download', exportFileDefaultName);
+      linkElement.click();
+      
+      message.success('配置导出成功');
+    } catch (error) {
+      console.error('导出配置错误:', error);
+      message.error('导出失败: ' + error.message);
+    }
+  };
+
+  const importFeatureConfig = () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.json';
+    
+    input.onchange = async (e) => {
+      const file = e.target.files[0];
+      if (!file) return;
+      
+      const reader = new FileReader();
+      reader.onload = async (event) => {
+        try {
+          const config = JSON.parse(event.target.result);
+          
+          // 验证导入的配置
+          if (!config.name) {
+            message.error('无效的配置文件: 缺少功能名称');
+            return;
+          }
+          
+          // 创建新功能
+          const featureData = {
+            name: config.name,
+            description: config.description || '',
+            active: config.active !== false
+          };
+          
+          // 保存功能
+          const featureResponse = await fetch('/cgi-bin/features', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(featureData)
+          });
+          
+          const featureResult = await featureResponse.json();
+          
+          if (featureResult.code === 0) {
+            const newFeature = featureResult.data;
+            
+            // 导入接口配置
+            if (Array.isArray(config.interfaces) && config.interfaces.length > 0) {
+              message.loading({ content: '正在导入接口配置...', key: 'importInfo' });
+              
+              let successCount = 0;
+              let errorCount = 0;
+              
+              for (const interfaceItem of config.interfaces) {
+                try {
+                  // 创建接口，使用新功能ID
+                  const interfaceData = {
+                    ...interfaceItem,
+                    featureId: newFeature.id,
+                    id: undefined // 不使用原接口ID
+                  };
+                  
+                  await fetch('/cgi-bin/interfaces', {
+                    method: 'POST',
+                    headers: {
+                      'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(interfaceData)
+                  });
+                  
+                  successCount++;
+                } catch (error) {
+                  console.error('导入接口配置失败:', error);
+                  errorCount++;
+                }
+              }
+              
+              if (errorCount > 0) {
+                message.info({ content: `导入完成，成功 ${successCount} 个接口，失败 ${errorCount} 个接口`, key: 'importInfo', duration: 3 });
+              } else {
+                message.success({ content: `成功导入 ${successCount} 个接口`, key: 'importInfo', duration: 2 });
+              }
+            } else {
+              message.success('功能导入成功（无接口配置）');
+            }
+            
+            // 刷新功能列表
+            fetchFeatures();
+          } else {
+            message.error('导入功能失败: ' + featureResult.message);
+          }
+        } catch (error) {
+          console.error('导入配置错误:', error);
+          message.error('导入失败: ' + error.message);
+        }
+      };
+      
+      reader.readAsText(file);
+    };
+    
+    input.click();
+  };
+
+  // 渲染功能模块卡片
+  const renderFeatureCard = (feature) => {
+    const formattedDate = feature.createdAt 
+      ? new Date(feature.createdAt).toLocaleDateString()
+      : '未知日期';
+    
+    return (
+      <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'}
+          style={{ display: 'block' }}
+        >
+          <Card
+            hoverable
+            className={`feature-card ${!feature.active ? 'inactive-feature' : ''}`}
+            actions={[
+              <Tooltip title="管理接口">
+                <ApiOutlined key="interfaces" onClick={() => viewInterfaces(feature)} />
+              </Tooltip>,
+              <Tooltip title="编辑功能">
+                <EditOutlined key="edit" onClick={() => openModal(feature)} />
+              </Tooltip>,
+              <Tooltip title="删除功能">
+                <DeleteOutlined key="delete" onClick={() => deleteFeature(feature.id)} />
+              </Tooltip>,
+              <Tooltip title="导出配置">
+                <ExportOutlined key="export" onClick={() => exportFeatureConfig(feature)} />
+              </Tooltip>
+            ]}
+          >
+            <div className="feature-card-content">
+              <div className="feature-name">
+                <Title level={4} ellipsis={{ tooltip: feature.name }}>
+                  {feature.name}
+                </Title>
+
+                <Switch
+                  checked={feature.active}
+                  onChange={() => handleToggleActive(feature.id, feature.active)}
+                  size="small"
+                />
+              </div>
+              
+              <Paragraph className="feature-description" ellipsis={{ rows: 2, expandable: false, tooltip: feature.description }}>
+                {feature.description || '无描述'}
+              </Paragraph>
+              
+              <div className="feature-stat">
+                <span>
+                  <InfoCircleOutlined /> {feature.interfaceCount || 0} 个接口
+                </span>
+                <span className="feature-date">
+                  <CalendarOutlined /> {formattedDate}
+                </span>
+              </div>
+            </div>
+          </Card>
+        </Badge.Ribbon>
+      </Col>
+    );
+  };
+
+  return (
+    <AppLayout>
+      <div className="page-container">
+        <div className="page-title-bar">
+          <div>
+            <h1 className="page-title">功能模块管理</h1>
+            <div className="page-description">
+              创建和管理功能模块，为每个功能配置独立的接口
+            </div>
+          </div>
+          <div className="page-actions">
+            <Button 
+              type="primary" 
+              icon={<PlusOutlined />}
+              onClick={() => openModal()}
+            >
+              新建功能
+            </Button>
+            <Button 
+              type="primary" 
+              icon={<ExportOutlined />}
+              onClick={importFeatureConfig}
+              style={{ backgroundColor: '#52c41a', borderColor: '#52c41a' }}
+            >
+              导入功能
+            </Button>
+          </div>
+        </div>
+        
+        <div className="feature-list-container">
+          {loading ? (
+            <div className="loading">
+              <div className="loading-spinner"></div>
+              <div>正在加载功能模块...</div>
+            </div>
+          ) : mockFeatures.length > 0 ? (
+            <Row gutter={[16, 16]}>
+              {mockFeatures.map(feature => renderFeatureCard(feature))}
+            </Row>
+          ) : (
+            <div className="empty-data">
+              <div className="empty-icon">📂</div>
+              <div className="empty-text">暂无功能，请点击"新建功能"按钮创建</div>
+              <div className="empty-actions">
+                <button className="create-button" onClick={() => openModal()}>
+                  创建新功能
+                </button>
+                <button className="import-button-large" onClick={importFeatureConfig}>
+                  导入已有功能
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+      
+      <Modal
+        title={currentFeature ? '编辑功能' : '新建功能'}
+        open={showModal}
+        onCancel={closeModal}
+        footer={null}
+        destroyOnClose
+        width={500}
+      >
+        <Form 
+          form={form}
+          layout="vertical"
+          onFinish={handleSubmit}
+          initialValues={{
+            name: '',
+            description: '',
+            active: true
+          }}
+        >
+          <Form.Item
+            name="name"
+            label="功能名称"
+            rules={[{ required: true, message: '请输入功能名称' }]}
+          >
+            <Input placeholder="请输入功能名称" />
+          </Form.Item>
+          
+          <Form.Item
+            name="description"
+            label="功能描述"
+          >
+            <TextArea 
+              placeholder="请输入功能描述（可选）" 
+              autoSize={{ minRows: 3, maxRows: 6 }}
+            />
+          </Form.Item>
+          <div className="form-actions">
+            <Button onClick={closeModal}>
+              取消
+            </Button>
+            <Button type="primary" htmlType="submit" loading={loading}>
+              确定
+            </Button>
+          </div>
+        </Form>
+      </Modal>
+    </AppLayout>
+  );
+};
+
+export default MockData; 

package/ui/src/pages/Settings.js

@@ -0,0 +1,192 @@
+import React, { useState, useEffect } from 'react';
+import AppLayout from '../components/AppLayout';
+import { Form, Input, Button, Switch, Card, message, Divider, Typography, Space, Alert, InputNumber } from 'antd';
+import { SaveOutlined, UndoOutlined } from '@ant-design/icons';
+import '../styles/settings.css';
+
+const { Title, Text } = Typography;
+
+const Settings = () => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [settings, setSettings] = useState(null);
+
+  // 获取当前设置
+  useEffect(() => {
+    fetchSettings();
+  }, []);
+
+  const fetchSettings = async () => {
+    try {
+      setLoading(true);
+      // 这里假设有一个获取设置的接口
+      // 为了示例，我们使用默认设置
+      const defaultSettings = {
+        logRetention: 7,
+        enableLogging: true,
+        enableAutoRefresh: false,
+        maxLogEntries: 10000,
+        notificationEnabled: true,
+        mockjsEnabled: true,
+        responseDelay: 0
+      };
+      
+      setSettings(defaultSettings);
+      form.setFieldsValue(defaultSettings);
+    } catch (error) {
+      console.error('获取设置失败:', error);
+      message.error('获取设置失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSave = async (values) => {
+    try {
+      setLoading(true);
+      // 这里假设有一个保存设置的接口
+      // 现在只是模拟保存成功
+      await new Promise(resolve => setTimeout(resolve, 500));
+      
+      setSettings(values);
+      message.success('设置已保存');
+    } catch (error) {
+      console.error('保存设置失败:', error);
+      message.error('保存设置失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleReset = () => {
+    if (settings) {
+      form.setFieldsValue(settings);
+    }
+  };
+
+  return (
+    <AppLayout>
+      <div className="page-container">
+        <div className="page-title-bar">
+          <div>
+            <h1 className="page-title">系统设置</h1>
+            <div className="page-description">
+              配置插件的全局设置项，这些设置将影响所有功能模块
+            </div>
+          </div>
+        </div>
+
+        <Alert
+          message="设置功能正在开发中"
+          description="目前部分设置可能不生效，我们正在努力完善此功能"
+          type="info"
+          showIcon
+          style={{ marginBottom: 20 }}
+        />
+        
+        <Form
+          form={form}
+          layout="vertical"
+          onFinish={handleSave}
+          initialValues={settings || {}}
+        >
+          <Card title="日志设置" className="settings-card">
+            <Form.Item
+              name="enableLogging"
+              label="启用请求日志记录"
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
+            
+            <Form.Item
+              name="logRetention"
+              label="日志保留天数"
+              rules={[{ required: true, message: '请输入日志保留天数' }]}
+              tooltip="超过设定天数的日志将被自动清理"
+            >
+              <InputNumber min={1} max={90} />
+            </Form.Item>
+            
+            <Form.Item
+              name="maxLogEntries"
+              label="最大日志条数"
+              rules={[{ required: true, message: '请输入最大日志条数' }]}
+              tooltip="超过设定条数的日志将被清理"
+            >
+              <InputNumber min={1000} max={100000} step={1000} />
+            </Form.Item>
+          </Card>
+          
+          <Card title="接口模拟设置" className="settings-card">
+            <Form.Item
+              name="mockjsEnabled"
+              label="启用 Mock.js 数据模拟"
+              valuePropName="checked"
+              tooltip="使用 Mock.js 生成随机数据"
+            >
+              <Switch />
+            </Form.Item>
+            
+            <Form.Item
+              name="responseDelay"
+              label="全局响应延迟（毫秒）"
+              tooltip="所有接口默认的响应延迟时间"
+            >
+              <InputNumber min={0} max={10000} />
+            </Form.Item>
+            
+            <Form.Item
+              name="notificationEnabled"
+              label="启用请求匹配通知"
+              valuePropName="checked"
+              tooltip="接口匹配成功时显示通知"
+            >
+              <Switch />
+            </Form.Item>
+          </Card>
+          
+          <Card title="界面设置" className="settings-card">
+            <Form.Item
+              name="enableAutoRefresh"
+              label="启用页面自动刷新"
+              valuePropName="checked"
+              tooltip="启用后，页面数据将定期自动刷新"
+            >
+              <Switch />
+            </Form.Item>
+            
+            <Form.Item
+              name="theme"
+              label="界面主题"
+            >
+              <Input disabled placeholder="暂不支持自定义主题" />
+            </Form.Item>
+          </Card>
+          
+          <div className="settings-actions">
+            <Space>
+              <Button 
+                type="default" 
+                icon={<UndoOutlined />} 
+                onClick={handleReset}
+              >
+                重置
+              </Button>
+              <Button 
+                type="primary" 
+                icon={<SaveOutlined />} 
+                htmlType="submit" 
+                loading={loading}
+              >
+                保存设置
+              </Button>
+            </Space>
+          </div>
+        </Form>
+      </div>
+    </AppLayout>
+  );
+};
+
+export default Settings;