whistle.mock-plugins 1.2.2-beta.8 → 1.3.0

package/ui/src/pages/Sniffer.js

@@ -0,0 +1,521 @@
+import React, { useState, useEffect } from 'react';
+import AppLayout from '../components/AppLayout';
+import {
+  Input, Select, Button, Tabs, Tag, Space, Divider, message,
+  Table, Popconfirm, Drawer, Form, Row, Col, Card, Tooltip, Empty
+} from 'antd';
+import {
+  SendOutlined, SaveOutlined, HistoryOutlined, DeleteOutlined,
+  PlusOutlined, CopyOutlined, ApiOutlined, ClearOutlined,
+  ThunderboltOutlined, CodeOutlined
+} from '@ant-design/icons';
+import axios from 'axios';
+
+const { Option } = Select;
+const { TextArea } = Input;
+
+const HTTP_METHODS = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'];
+const BODY_TYPES = [
+  { key: 'none', label: 'None' },
+  { key: 'json', label: 'JSON' },
+  { key: 'form', label: 'x-www-form-urlencoded' },
+  { key: 'text', label: 'Raw Text' },
+];
+
+const INITIAL_HISTORY = () => {
+  try {
+    const raw = localStorage.getItem('sniffer-history');
+    return raw ? JSON.parse(raw) : [];
+  } catch { return []; }
+};
+
+const Sniffer = () => {
+  const [url, setUrl] = useState('');
+  const [method, setMethod] = useState('GET');
+  const [bodyType, setBodyType] = useState('none');
+  const [bodyContent, setBodyContent] = useState('');
+  const [queryParams, setQueryParams] = useState([{ key: '', value: '', id: Date.now() }]);
+  const [headers, setHeaders] = useState([{ key: '', value: '', id: Date.now() + 1 }]);
+  const [loading, setLoading] = useState(false);
+  const [response, setResponse] = useState(null);
+  const [history, setHistory] = useState(INITIAL_HISTORY);
+  const [historyVisible, setHistoryVisible] = useState(false);
+  const [saveDrawerVisible, setSaveDrawerVisible] = useState(false);
+  const [saveForm] = Form.useForm();
+  const [features, setFeatures] = useState([]);
+
+  // 加载功能模块列表（用于保存时选择归属）
+  useEffect(() => {
+    axios.get('/cgi-bin/features').then(res => {
+      if (res.data.code === 0) {
+        setFeatures(res.data.data || []);
+      }
+    }).catch(() => {});
+  }, []);
+
+  // 持久化历史记录
+  useEffect(() => {
+    localStorage.setItem('sniffer-history', JSON.stringify(history.slice(0, 100)));
+  }, [history]);
+
+  const addParam = (list, setList) => {
+    setList([...list, { key: '', value: '', id: Date.now() + Math.random() }]);
+  };
+
+  const removeParam = (list, setList, idx) => {
+    const next = [...list];
+    next.splice(idx, 1);
+    if (next.length === 0) next.push({ key: '', value: '', id: Date.now() });
+    setList(next);
+  };
+
+  const updateParam = (list, setList, idx, field, value) => {
+    const next = [...list];
+    next[idx][field] = value;
+    setList(next);
+  };
+
+  const buildParamsObject = (list) => {
+    const obj = {};
+    list.forEach(item => {
+      if (item.key && item.value !== undefined) {
+        obj[item.key] = item.value;
+      }
+    });
+    return obj;
+  };
+
+  const handleSend = async () => {
+    if (!url.trim()) {
+      message.warning('请输入请求 URL');
+      return;
+    }
+    setLoading(true);
+    setResponse(null);
+    try {
+      const payload = {
+        url: url.trim(),
+        method,
+        headers: buildParamsObject(headers),
+        queryParams: buildParamsObject(queryParams),
+        body: bodyType === 'none' ? undefined : bodyContent,
+        bodyType
+      };
+
+      const res = await axios.post('/cgi-bin/proxy-fetch', payload);
+      if (res.data.code === 0) {
+        const resp = res.data.data;
+        setResponse(resp);
+
+        // 添加到历史记录
+        const record = {
+          id: Date.now().toString(),
+          timestamp: new Date().toISOString(),
+          url: payload.url,
+          method: payload.method,
+          status: resp.status,
+          statusText: resp.statusText,
+          preview: resp.body?.slice(0, 200) || '',
+          request: payload
+        };
+        setHistory(prev => [record, ...prev].slice(0, 100));
+
+        message.success(`请求成功 ${resp.status}`);
+      } else {
+        throw new Error(res.data.message);
+      }
+    } catch (err) {
+      message.error(err.response?.data?.message || err.message || '请求失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCopyResponse = () => {
+    if (response?.body) {
+      navigator.clipboard.writeText(response.body);
+      message.success('响应内容已复制');
+    }
+  };
+
+  const loadFromHistory = (record) => {
+    const req = record.request || {};
+    setUrl(req.url || record.url || '');
+    setMethod(req.method || 'GET');
+    setBodyType(req.bodyType || 'none');
+    setBodyContent(req.body || '');
+
+    const qs = Object.entries(req.queryParams || {}).map(([k, v], i) => ({
+      key: k, value: v, id: Date.now() + i
+    }));
+    setQueryParams(qs.length ? qs : [{ key: '', value: '', id: Date.now() }]);
+
+    const hs = Object.entries(req.headers || {}).map(([k, v], i) => ({
+      key: k, value: v, id: Date.now() + i + 1000
+    }));
+    setHeaders(hs.length ? hs : [{ key: '', value: '', id: Date.now() + 1000 }]);
+
+    setResponse({
+      status: record.status,
+      statusText: record.statusText,
+      body: record.preview,
+      headers: {}
+    });
+    setHistoryVisible(false);
+  };
+
+  const clearHistory = () => {
+    setHistory([]);
+    message.success('历史记录已清空');
+  };
+
+  const handleSaveAsMock = async () => {
+    try {
+      const values = await saveForm.validateFields();
+      const mockContent = response?.body || '';
+
+      // 构造接口数据
+      const interfaceData = {
+        name: values.name,
+        urlPattern: values.urlPattern || url,
+        proxyType: 'response',
+        httpMethod: method,
+        httpStatus: response?.status || 200,
+        contentType: 'application/json; charset=utf-8',
+        responseContent: mockContent,
+        responses: [
+          {
+            id: Date.now().toString(),
+            name: '默认响应',
+            description: '从接口嗅探导入',
+            content: mockContent,
+            paramMatchers: []
+          }
+        ],
+        activeResponseId: Date.now().toString(),
+        active: true
+      };
+
+      const res = await axios.post('/cgi-bin/interfaces', interfaceData);
+      if (res.data.code === 0) {
+        message.success('Mock 接口创建成功');
+        setSaveDrawerVisible(false);
+        saveForm.resetFields();
+      } else {
+        throw new Error(res.data.message);
+      }
+    } catch (err) {
+      if (err.errorFields) return;
+      message.error('创建失败: ' + (err.response?.data?.message || err.message));
+    }
+  };
+
+  const historyColumns = [
+    {
+      title: 'Method',
+      dataIndex: 'method',
+      key: 'method',
+      width: 80,
+      render: (m) => <Tag color={m === 'GET' ? 'blue' : m === 'POST' ? 'green' : 'default'}>{m}</Tag>
+    },
+    {
+      title: 'URL',
+      dataIndex: 'url',
+      key: 'url',
+      ellipsis: true,
+      render: (u) => <span style={{ fontSize: 12 }}>{u}</span>
+    },
+    {
+      title: 'Status',
+      dataIndex: 'status',
+      key: 'status',
+      width: 80,
+      render: (s) => <Tag color={s >= 200 && s < 300 ? 'success' : s >= 400 ? 'error' : 'default'}>{s}</Tag>
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+      render: (_, record) => (
+        <Space>
+          <Button size="small" onClick={() => loadFromHistory(record)}>加载</Button>
+          <Popconfirm title="确定删除？" onConfirm={() => setHistory(prev => prev.filter(h => h.id !== record.id))}>
+            <Button size="small" danger icon={<DeleteOutlined />} />
+          </Popconfirm>
+        </Space>
+      )
+    }
+  ];
+
+  const formatBody = (body) => {
+    try {
+      const json = JSON.parse(body);
+      return JSON.stringify(json, null, 2);
+    } catch {
+      return body;
+    }
+  };
+
+  return (
+    <AppLayout>
+      <div className="page-container">
+        <div className="page-title-bar">
+          <div>
+            <h1 className="page-title"><ApiOutlined /> 接口嗅探</h1>
+            <div className="page-description">
+              像 Postman 一样发送真实请求，抓取响应后一键保存为 Mock 接口
+            </div>
+          </div>
+          <Space>
+            <Button icon={<HistoryOutlined />} onClick={() => setHistoryVisible(true)}>
+              历史记录 ({history.length})
+            </Button>
+          </Space>
+        </div>
+
+        {/* 请求构建器 */}
+        <Card style={{ marginBottom: 24 }}>
+          {/* URL + Method + Send */}
+          <Row gutter={8} style={{ marginBottom: 16 }}>
+            <Col flex="120px">
+              <Select value={method} onChange={setMethod} style={{ width: '100%' }}>
+                {HTTP_METHODS.map(m => <Option key={m} value={m}>{m}</Option>)}
+              </Select>
+            </Col>
+            <Col flex="auto">
+              <Input
+                placeholder="https://api.example.com/users"
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+                onPressEnter={handleSend}
+                style={{ fontFamily: 'monospace' }}
+                prefix={<ThunderboltOutlined />}
+              />
+            </Col>
+            <Col flex="120px">
+              <Button
+                type="primary"
+                icon={<SendOutlined />}
+                loading={loading}
+                onClick={handleSend}
+                block
+              >
+                发送
+              </Button>
+            </Col>
+          </Row>
+
+          {/* Tabs: Params / Headers / Body */}
+          <Tabs defaultActiveKey="params">
+            <Tabs.TabPane tab={<span><CodeOutlined /> Query 参数</span>} key="params">
+              <Space direction="vertical" style={{ width: '100%' }}>
+                {queryParams.map((item, idx) => (
+                  <Row gutter={8} key={item.id}>
+                    <Col span={8}>
+                      <Input
+                        placeholder="参数名"
+                        value={item.key}
+                        onChange={(e) => updateParam(queryParams, setQueryParams, idx, 'key', e.target.value)}
+                      />
+                    </Col>
+                    <Col span={14}>
+                      <Input
+                        placeholder="参数值"
+                        value={item.value}
+                        onChange={(e) => updateParam(queryParams, setQueryParams, idx, 'value', e.target.value)}
+                      />
+                    </Col>
+                    <Col span={2}>
+                      <Button
+                        icon={<DeleteOutlined />}
+                        onClick={() => removeParam(queryParams, setQueryParams, idx)}
+                        disabled={queryParams.length === 1 && !item.key}
+                      />
+                    </Col>
+                  </Row>
+                ))}
+                <Button type="dashed" icon={<PlusOutlined />} onClick={() => addParam(queryParams, setQueryParams)}>
+                  添加参数
+                </Button>
+              </Space>
+            </Tabs.TabPane>
+
+            <Tabs.TabPane tab={<span><CodeOutlined /> Headers</span>} key="headers">
+              <Space direction="vertical" style={{ width: '100%' }}>
+                {headers.map((item, idx) => (
+                  <Row gutter={8} key={item.id}>
+                    <Col span={8}>
+                      <Input
+                        placeholder="Header 名"
+                        value={item.key}
+                        onChange={(e) => updateParam(headers, setHeaders, idx, 'key', e.target.value)}
+                      />
+                    </Col>
+                    <Col span={14}>
+                      <Input
+                        placeholder="Header 值"
+                        value={item.value}
+                        onChange={(e) => updateParam(headers, setHeaders, idx, 'value', e.target.value)}
+                      />
+                    </Col>
+                    <Col span={2}>
+                      <Button
+                        icon={<DeleteOutlined />}
+                        onClick={() => removeParam(headers, setHeaders, idx)}
+                        disabled={headers.length === 1 && !item.key}
+                      />
+                    </Col>
+                  </Row>
+                ))}
+                <Button type="dashed" icon={<PlusOutlined />} onClick={() => addParam(headers, setHeaders)}>
+                  添加 Header
+                </Button>
+              </Space>
+            </Tabs.TabPane>
+
+            <Tabs.TabPane tab={<span><CodeOutlined /> Body</span>} key="body">
+              <Space direction="vertical" style={{ width: '100%' }}>
+                <Select value={bodyType} onChange={setBodyType} style={{ width: 200 }}>
+                  {BODY_TYPES.map(t => <Option key={t.key} value={t.key}>{t.label}</Option>)}
+                </Select>
+                {bodyType !== 'none' && (
+                  <TextArea
+                    rows={8}
+                    placeholder={bodyType === 'json' ? '{\n  "name": "test"\n}' : bodyType === 'form' ? 'name=test&age=18' : 'raw text...'}
+                    value={bodyContent}
+                    onChange={(e) => setBodyContent(e.target.value)}
+                    style={{ fontFamily: 'monospace', fontSize: 13 }}
+                  />
+                )}
+              </Space>
+            </Tabs.TabPane>
+          </Tabs>
+        </Card>
+
+        {/* 响应区域 */}
+        {response && (
+          <Card
+            title={
+              <Space>
+                <span>响应结果</span>
+                <Tag color={response.status >= 200 && response.status < 300 ? 'success' : response.status >= 400 ? 'error' : 'default'}>
+                  {response.status} {response.statusText}
+                </Tag>
+              </Space>
+            }
+            extra={
+              <Space>
+                <Button size="small" icon={<CopyOutlined />} onClick={handleCopyResponse}>复制响应</Button>
+                <Button size="small" icon={<SaveOutlined />} type="primary" onClick={() => {
+                  saveForm.setFieldsValue({ name: '', urlPattern: url });
+                  setSaveDrawerVisible(true);
+                }}>
+                  保存为 Mock 接口
+                </Button>
+              </Space>
+            }
+          >
+            <Tabs defaultActiveKey="body">
+              <Tabs.TabPane tab="Body" key="body">
+                <TextArea
+                  value={formatBody(response.body)}
+                  readOnly
+                  rows={16}
+                  style={{ fontFamily: 'monospace', fontSize: 12, background: '#fafafa' }}
+                />
+              </Tabs.TabPane>
+              <Tabs.TabPane tab="Headers" key="headers">
+                <pre style={{ background: '#fafafa', padding: 16, borderRadius: 4, fontSize: 12 }}>
+                  {JSON.stringify(response.headers, null, 2)}
+                </pre>
+              </Tabs.TabPane>
+            </Tabs>
+          </Card>
+        )}
+
+        {!response && !loading && (
+          <Empty description="输入 URL 并点击「发送」开始嗅探真实接口" />
+        )}
+      </div>
+
+      {/* 历史记录 Drawer */}
+      <Drawer
+        title="历史记录"
+        open={historyVisible}
+        onClose={() => setHistoryVisible(false)}
+        width={600}
+        extra={
+          <Popconfirm title="确定清空全部历史？" onConfirm={clearHistory}>
+            <Button icon={<ClearOutlined />} danger>清空</Button>
+          </Popconfirm>
+        }
+      >
+        <Table
+          dataSource={history}
+          columns={historyColumns}
+          rowKey="id"
+          pagination={{ pageSize: 10 }}
+          size="small"
+        />
+      </Drawer>
+
+      {/* 保存为 Mock Drawer */}
+      <Drawer
+        title="保存为 Mock 接口"
+        open={saveDrawerVisible}
+        onClose={() => setSaveDrawerVisible(false)}
+        width={480}
+        footer={
+          <Space style={{ float: 'right' }}>
+            <Button onClick={() => setSaveDrawerVisible(false)}>取消</Button>
+            <Button type="primary" icon={<SaveOutlined />} onClick={handleSaveAsMock}>创建接口</Button>
+          </Space>
+        }
+      >
+        <Form form={saveForm} layout="vertical">
+          <Form.Item
+            name="name"
+            label="接口名称"
+            rules={[{ required: true, message: '请输入接口名称' }]}
+          >
+            <Input placeholder="例如：获取用户列表" />
+          </Form.Item>
+          <Form.Item
+            name="featureId"
+            label="所属功能模块"
+            rules={[{ required: true, message: '请选择功能模块' }]}
+          >
+            <Select placeholder="选择功能模块">
+              {features.map(f => (
+                <Option key={f.id} value={f.id}>{f.name}</Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Form.Item
+            name="urlPattern"
+            label="URL 匹配规则"
+            rules={[{ required: true, message: '请输入匹配规则' }]}
+          >
+            <Input placeholder="例如：/api/users 或 /api/users/*" />
+          </Form.Item>
+          <Form.Item label="请求方法">
+            <Tag>{method}</Tag>
+          </Form.Item>
+          <Form.Item label="响应状态码">
+            <Tag>{response?.status}</Tag>
+          </Form.Item>
+          <Form.Item label="响应预览">
+            <TextArea
+              value={response?.body?.slice(0, 500)}
+              readOnly
+              rows={6}
+              style={{ fontFamily: 'monospace', fontSize: 11, background: '#fafafa' }}
+            />
+          </Form.Item>
+        </Form>
+      </Drawer>
+    </AppLayout>
+  );
+};
+
+export default Sniffer;