whistle.mock-plugins 1.1.2 → 1.1.3-beta.2

package/ui/src/pages/del_InterfacePage.js

@@ -1,342 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Card, Table, Button, Space, Select, Tabs, Form, Input, Modal, Divider, message } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, SaveOutlined, ExclamationCircleOutlined, CopyOutlined, PlayCircleOutlined } from '@ant-design/icons';
-import { FeatureAPI, InterfaceAPI } from '../services/api';
-
-const { Option } = Select;
-const { TabPane } = Tabs;
-const { confirm } = Modal;
-const { TextArea } = Input;
-
-const InterfacePage = () => {
-  const [features, setFeatures] = useState([]);
-  const [interfaces, setInterfaces] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [selectedFeature, setSelectedFeature] = useState(null);
-  const [modalVisible, setModalVisible] = useState(false);
-  const [currentInterface, setCurrentInterface] = useState(null);
-  const [form] = Form.useForm();
-
-  useEffect(() => {
-    fetchFeatures();
-  }, []);
-
-  useEffect(() => {
-    if (selectedFeature) {
-      fetchInterfaces(selectedFeature);
-    }
-  }, [selectedFeature]);
-
-  const fetchFeatures = async () => {
-    setLoading(true);
-    try {
-      const data = await FeatureAPI.getAllFeatures();
-      setFeatures(data);
-      if (data.length > 0 && !selectedFeature) {
-        setSelectedFeature(data[0].id);
-      }
-    } catch (error) {
-      console.error("获取功能列表失败:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const fetchInterfaces = async (featureId) => {
-    setLoading(true);
-    try {
-      const data = await FeatureAPI.getFeatureInterfaces(featureId);
-      setInterfaces(data);
-    } catch (error) {
-      console.error("获取接口列表失败:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleFeatureChange = (value) => {
-    setSelectedFeature(value);
-  };
-
-  const handleAdd = () => {
-    form.resetFields();
-    form.setFieldsValue({
-      featureId: selectedFeature,
-      method: 'GET',
-      status: 200,
-      delay: 0,
-      headers: '{\n  "Content-Type": "application/json"\n}',
-      responseBody: '{\n  "code": 0,\n  "message": "success",\n  "data": {}\n}'
-    });
-    setCurrentInterface(null);
-    setModalVisible(true);
-  };
-
-  const handleEdit = (record) => {
-    form.setFieldsValue({
-      ...record,
-      headers: typeof record.headers === 'object' 
-        ? JSON.stringify(record.headers, null, 2) 
-        : record.headers || '{}',
-      responseBody: typeof record.responseBody === 'object' 
-        ? JSON.stringify(record.responseBody, null, 2) 
-        : record.responseBody || '{}'
-    });
-    setCurrentInterface(record);
-    setModalVisible(true);
-  };
-
-  const handleDelete = (record) => {
-    confirm({
-      title: '确认删除',
-      icon: <ExclamationCircleOutlined />,
-      content: `确定要删除接口 "${record.path}" 吗？`,
-      okText: '确认',
-      cancelText: '取消',
-      onOk: async () => {
-        try {
-          await InterfaceAPI.deleteInterface(record.id);
-          fetchInterfaces(selectedFeature);
-        } catch (error) {
-          console.error("删除接口失败:", error);
-        }
-      },
-    });
-  };
-
-  const handleCancel = () => {
-    setModalVisible(false);
-  };
-
-  const handleOk = async () => {
-    try {
-      const values = await form.validateFields();
-      
-      try {
-        // 尝试解析 JSON
-        if (values.headers) {
-          values.headers = JSON.parse(values.headers);
-        }
-        if (values.responseBody) {
-          values.responseBody = JSON.parse(values.responseBody);
-        }
-      } catch (e) {
-        message.error('JSON 格式错误，请检查');
-        return;
-      }
-      
-      if (currentInterface) {
-        await InterfaceAPI.updateInterface(currentInterface.id, values);
-      } else {
-        await InterfaceAPI.createInterface(values);
-      }
-      
-      setModalVisible(false);
-      fetchInterfaces(selectedFeature);
-    } catch (error) {
-      console.error("保存接口失败:", error);
-    }
-  };
-
-  const handleTest = async (record) => {
-    try {
-      const result = await InterfaceAPI.testInterface(record.id);
-      Modal.info({
-        title: '测试结果',
-        width: 800,
-        content: (
-          <div>
-            <pre style={{ maxHeight: '500px', overflow: 'auto' }}>
-              {JSON.stringify(result, null, 2)}
-            </pre>
-          </div>
-        ),
-        okText: '关闭'
-      });
-    } catch (error) {
-      console.error("测试失败:", error);
-      message.error('测试失败: ' + error.message);
-    }
-  };
-
-  const columns = [
-    {
-      title: 'URL 路径',
-      dataIndex: 'path',
-      key: 'path',
-      ellipsis: true,
-    },
-    {
-      title: '请求方法',
-      dataIndex: 'method',
-      key: 'method',
-      width: 100,
-    },
-    {
-      title: '状态码',
-      dataIndex: 'status',
-      key: 'status',
-      width: 100,
-    },
-    {
-      title: '延迟(ms)',
-      dataIndex: 'delay',
-      key: 'delay',
-      width: 100,
-    },
-    {
-      title: '描述',
-      dataIndex: 'description',
-      key: 'description',
-      ellipsis: true,
-    },
-    {
-      title: '操作',
-      key: 'action',
-      width: 240,
-      render: (_, record) => (
-        <Space size="small">
-          <Button type="text" icon={<EditOutlined />} onClick={() => handleEdit(record)}>
-            编辑
-          </Button>
-          <Button type="text" icon={<PlayCircleOutlined />} onClick={() => handleTest(record)}>
-            测试
-          </Button>
-          <Button type="text" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
-            删除
-          </Button>
-        </Space>
-      ),
-    },
-  ];
-
-  return (
-    <div className="interface-page">
-      <Card
-        title="接口管理"
-        extra={
-          <Space>
-            <span>功能：</span>
-            <Select
-              style={{ width: 200 }}
-              value={selectedFeature}
-              onChange={handleFeatureChange}
-              loading={loading}
-            >
-              {features.map(feature => (
-                <Option key={feature.id} value={feature.id}>{feature.name}</Option>
-              ))}
-            </Select>
-            <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
-              添加接口
-            </Button>
-          </Space>
-        }
-      >
-        <Table
-          columns={columns}
-          dataSource={interfaces}
-          rowKey="id"
-          loading={loading}
-        />
-      </Card>
-
-      <Modal
-        title={currentInterface ? "编辑接口" : "添加接口"}
-        open={modalVisible}
-        onOk={handleOk}
-        onCancel={handleCancel}
-        width={800}
-        okText="保存"
-        cancelText="取消"
-      >
-        <Form
-          form={form}
-          layout="vertical"
-        >
-          <Form.Item
-            name="featureId"
-            label="所属功能"
-            rules={[{ required: true, message: '请选择所属功能!' }]}
-          >
-            <Select>
-              {features.map(feature => (
-                <Option key={feature.id} value={feature.id}>{feature.name}</Option>
-              ))}
-            </Select>
-          </Form.Item>
-
-          <Form.Item
-            name="path"
-            label="URL 路径"
-            rules={[{ required: true, message: '请输入 URL 路径!' }]}
-          >
-            <Input placeholder="/api/your-path" />
-          </Form.Item>
-
-          <div style={{ display: 'flex', gap: '16px' }}>
-            <Form.Item
-              name="method"
-              label="请求方法"
-              rules={[{ required: true, message: '请选择请求方法!' }]}
-              style={{ flex: 1 }}
-            >
-              <Select>
-                <Option value="GET">GET</Option>
-                <Option value="POST">POST</Option>
-                <Option value="PUT">PUT</Option>
-                <Option value="DELETE">DELETE</Option>
-                <Option value="PATCH">PATCH</Option>
-              </Select>
-            </Form.Item>
-
-            <Form.Item
-              name="status"
-              label="状态码"
-              rules={[{ required: true, message: '请输入状态码!' }]}
-              style={{ flex: 1 }}
-            >
-              <Input type="number" placeholder="200" />
-            </Form.Item>
-
-            <Form.Item
-              name="delay"
-              label="延迟(ms)"
-              rules={[{ required: true, message: '请输入延迟时间!' }]}
-              style={{ flex: 1 }}
-            >
-              <Input type="number" placeholder="0" />
-            </Form.Item>
-          </div>
-
-          <Form.Item
-            name="description"
-            label="描述"
-          >
-            <Input placeholder="接口描述" />
-          </Form.Item>
-
-          <Tabs defaultActiveKey="1">
-            <TabPane tab="响应体" key="1">
-              <Form.Item
-                name="responseBody"
-                rules={[{ required: true, message: '请输入响应体!' }]}
-              >
-                <TextArea rows={10} placeholder="响应JSON数据" />
-              </Form.Item>
-            </TabPane>
-            <TabPane tab="响应头" key="2">
-              <Form.Item
-                name="headers"
-              >
-                <TextArea rows={10} placeholder="响应头JSON数据" />
-              </Form.Item>
-            </TabPane>
-          </Tabs>
-        </Form>
-      </Modal>
-    </div>
-  );
-};
-
-export default InterfacePage; 

package/ui/src/pages/del_SettingsPage.js

@@ -1,165 +0,0 @@
-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;