whistle.mock-plugins 1.3.1 → 1.4.0-beta.2

package/ui/src/pages/Stats.js

@@ -1,288 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import AppLayout from '../components/AppLayout';
-import {
-  Card, Row, Col, Statistic, Table, Tag, Spin, Empty, Badge,
-  DatePicker, Input, Space
-} from 'antd';
-import {
-  ApiOutlined, ThunderboltOutlined,
-  BarChartOutlined, RiseOutlined, SearchOutlined
-} from '@ant-design/icons';
-import axios from 'axios';
-import dayjs from 'dayjs';
-
-const Stats = () => {
-  const [loading, setLoading] = useState(true);
-  const [overview, setOverview] = useState({});
-  const [topData, setTopData] = useState({ topInterfaces: [], topFeatures: [] });
-  const [timeline, setTimeline] = useState({});
-  const [recentLogs, setRecentLogs] = useState([]);
-  const [recentLoading, setRecentLoading] = useState(false);
-  const [filterDate, setFilterDate] = useState(null);
-  const [filterUrl, setFilterUrl] = useState('');
-
-  const fetchOverview = useCallback(async () => {
-    const [oRes, tRes, tlRes] = await Promise.all([
-      axios.get('/cgi-bin/stats?type=overview'),
-      axios.get('/cgi-bin/stats?type=top'),
-      axios.get('/cgi-bin/stats?type=timeline'),
-    ]);
-    setOverview(oRes.data.data || {});
-    setTopData(tRes.data.data || { topInterfaces: [], topFeatures: [] });
-    setTimeline(tlRes.data.data?.timeline || {});
-  }, []);
-
-  const fetchRecent = useCallback(async (date, url) => {
-    setRecentLoading(true);
-    try {
-      const params = new URLSearchParams({ type: 'recent' });
-      if (date) params.append('date', date);
-      if (url) params.append('url', url);
-      const res = await axios.get(`/cgi-bin/stats?${params.toString()}`);
-      setRecentLogs(res.data.data?.logs || []);
-    } catch (e) {
-      console.error('加载最近记录失败:', e);
-    } finally {
-      setRecentLoading(false);
-    }
-  }, []);
-
-  const fetchAll = async () => {
-    setLoading(true);
-    try {
-      await fetchOverview();
-      const dateStr = filterDate ? dayjs(filterDate).format('YYYY-MM-DD') : '';
-      await fetchRecent(dateStr, filterUrl);
-    } catch (e) {
-      console.error('加载统计数据失败:', e);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchAll();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handleDateChange = (date) => {
-    setFilterDate(date);
-    const dateStr = date ? dayjs(date).format('YYYY-MM-DD') : '';
-    fetchRecent(dateStr, filterUrl);
-  };
-
-  const handleUrlChange = (e) => {
-    const value = e.target.value;
-    setFilterUrl(value);
-    const dateStr = filterDate ? dayjs(filterDate).format('YYYY-MM-DD') : '';
-    fetchRecent(dateStr, value);
-  };
-
-  const hitColumns = [
-    { title: '接口名称', dataIndex: 'name', key: 'name' },
-    { title: '命中次数', dataIndex: 'count', key: 'count', width: 120 },
-    {
-      title: '占比',
-      key: 'percent',
-      width: 120,
-      render: (_, record) => {
-        const total = overview.totalHits || 1;
-        const pct = ((record.count / total) * 100).toFixed(1);
-        return <Badge count={`${pct}%`} style={{ backgroundColor: '#52c41a' }} />;
-      },
-    },
-  ];
-
-  const featureColumns = [
-    { title: '模块名称', dataIndex: 'name', key: 'name' },
-    { title: '命中次数', dataIndex: 'count', key: 'count', width: 120 },
-  ];
-
-  const recentColumns = [
-    {
-      title: '时间',
-      dataIndex: 'timestamp',
-      key: 'timestamp',
-      width: 180,
-      render: (t) => new Date(t).toLocaleString(),
-    },
-    { title: '方法', dataIndex: 'method', key: 'method', width: 80 },
-    { title: 'URL', dataIndex: 'url', key: 'url', ellipsis: true },
-    {
-      title: '状态',
-      dataIndex: 'status',
-      key: 'status',
-      width: 80,
-      render: (s) => <Tag color={s >= 200 && s < 300 ? 'success' : 'default'}>{s}</Tag>,
-    },
-    { title: '模块', dataIndex: 'featureName', key: 'featureName', width: 140 },
-    { title: '接口', dataIndex: 'interfaceName', key: 'interfaceName', width: 160 },
-  ];
-
-  const timelineEntries = Object.entries(timeline).sort();
-  const maxTimeline = Math.max(...Object.values(timeline), 1);
-
-  return (
-    <AppLayout>
-      <div className="page-container">
-        <div className="page-title-bar">
-          <div>
-            <h1 className="page-title">📊 请求统计</h1>
-            <div className="page-description">
-              查看 Mock 接口的命中情况、流量趋势和未覆盖接口
-            </div>
-          </div>
-        </div>
-
-        {loading ? (
-          <Spin size="large" style={{ display: 'block', margin: '80px auto' }} />
-        ) : (
-          <>
-            {/* 概览卡片 */}
-            <Row gutter={16} style={{ marginBottom: 24 }}>
-              <Col span={6}>
-                <Card>
-                  <Statistic
-                    title="今日命中"
-                    value={overview.todayHits || 0}
-                    prefix={<ThunderboltOutlined />}
-                    valueStyle={{ color: '#52c41a' }}
-                  />
-                </Card>
-              </Col>
-              <Col span={6}>
-                <Card>
-                  <Statistic
-                    title="7日总请求"
-                    value={overview.totalRequests || 0}
-                    prefix={<BarChartOutlined />}
-                  />
-                </Card>
-              </Col>
-              <Col span={6}>
-                <Card>
-                  <Statistic
-                    title="命中率"
-                    value={overview.hitRate || 0}
-                    suffix="%"
-                    prefix={<RiseOutlined />}
-                    valueStyle={{ color: '#1890ff' }}
-                  />
-                </Card>
-              </Col>
-              <Col span={6}>
-                <Card>
-                  <Statistic
-                    title="活跃接口 / 总数"
-                    value={`${overview.activeInterfaces || 0} / ${overview.totalInterfaces || 0}`}
-                    prefix={<ApiOutlined />}
-                  />
-                </Card>
-              </Col>
-            </Row>
-
-            {/* 趋势图（简单柱状图） */}
-            <Card title="📈 近7天命中趋势" style={{ marginBottom: 24 }}>
-              {timelineEntries.length === 0 ? (
-                <Empty description="暂无数据" />
-              ) : (
-                <div style={{ display: 'flex', alignItems: 'flex-end', height: 160, gap: 12, padding: '0 8px' }}>
-                  {timelineEntries.map(([date, count]) => (
-                    <div key={date} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                      <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 4 }}>{count}</div>
-                      <div
-                        style={{
-                          width: '100%',
-                          height: `${(count / maxTimeline) * 120}px`,
-                          background: '#1890ff',
-                          borderRadius: '4px 4px 0 0',
-                          minHeight: count > 0 ? 4 : 0,
-                          transition: 'height 0.3s',
-                        }}
-                      />
-                      <div style={{ fontSize: 11, color: '#999', marginTop: 4 }}>{date.slice(5)}</div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </Card>
-
-            {/* Top 命中接口 & 功能模块 */}
-            <Row gutter={16} style={{ marginBottom: 24 }}>
-              <Col span={12}>
-                <Card title="🏆 Top 10 命中接口">
-                  {topData.topInterfaces.length === 0 ? (
-                    <Empty description="暂无命中记录" />
-                  ) : (
-                    <Table
-                      dataSource={topData.topInterfaces}
-                      columns={hitColumns}
-                      rowKey="id"
-                      pagination={false}
-                      size="small"
-                    />
-                  )}
-                </Card>
-              </Col>
-              <Col span={12}>
-                <Card title="📦 Top 10 功能模块">
-                  {topData.topFeatures.length === 0 ? (
-                    <Empty description="暂无命中记录" />
-                  ) : (
-                    <Table
-                      dataSource={topData.topFeatures}
-                      columns={featureColumns}
-                      rowKey="id"
-                      pagination={false}
-                      size="small"
-                    />
-                  )}
-                </Card>
-              </Col>
-            </Row>
-
-            {/* 最近命中 */}
-            <Card
-              title="🕐 最近命中记录"
-              extra={
-                <Space>
-                  <DatePicker
-                    placeholder="筛选日期"
-                    value={filterDate}
-                    onChange={handleDateChange}
-                    allowClear
-                    style={{ width: 140 }}
-                  />
-                  <Input
-                    placeholder="筛选 URL"
-                    value={filterUrl}
-                    onChange={handleUrlChange}
-                    allowClear
-                    prefix={<SearchOutlined />}
-                    style={{ width: 200 }}
-                  />
-                </Space>
-              }
-            >
-              {recentLoading ? (
-                <Spin size="small" style={{ display: 'block', margin: '40px auto' }} />
-              ) : recentLogs.length === 0 ? (
-                <Empty description="暂无记录" />
-              ) : (
-                <Table
-                  dataSource={recentLogs}
-                  columns={recentColumns}
-                  rowKey="id"
-                  pagination={false}
-                  size="small"
-                />
-              )}
-            </Card>
-          </>
-        )}
-      </div>
-    </AppLayout>
-  );
-};
-
-export default Stats;

package/ui/src/services/del_api.js

@@ -1,192 +0,0 @@
-/**
- * API 服务模块
- * 提供功能和接口相关的 API 调用
- */
-const API_BASE_URL = '/api';
-
-/**
- * 通用 API 请求方法
- * @param {string} url - 请求 URL
- * @param {object} options - 请求选项
- * @returns {Promise<any>} - 请求结果
- */
-const request = async (url, options = {}) => {
-  const response = await fetch(url, {
-    ...options,
-    headers: {
-      'Content-Type': 'application/json',
-      ...options.headers
-    }
-  });
-  
-  const data = await response.json();
-  
-  if (!response.ok) {
-    throw new Error(data.message || '请求失败');
-  }
-  
-  return data;
-};
-
-/**
- * 功能相关 API
- */
-export const FeatureAPI = {
-  /**
-   * 获取所有功能
-   * @returns {Promise<Array>} 功能列表
-   */
-  getAllFeatures: () => request(`${API_BASE_URL}/features`),
-  
-  /**
-   * 获取单个功能
-   * @param {string} id - 功能 ID
-   * @returns {Promise<object>} 功能对象
-   */
-  getFeature: (id) => request(`${API_BASE_URL}/features/${id}`),
-  
-  /**
-   * 创建功能
-   * @param {object} feature - 功能对象
-   * @returns {Promise<object>} 创建的功能对象
-   */
-  createFeature: (feature) => request(`${API_BASE_URL}/features`, {
-    method: 'POST',
-    body: JSON.stringify(feature)
-  }),
-  
-  /**
-   * 更新功能
-   * @param {string} id - 功能 ID
-   * @param {object} feature - 功能对象
-   * @returns {Promise<object>} 更新的功能对象
-   */
-  updateFeature: (id, feature) => request(`${API_BASE_URL}/features/${id}`, {
-    method: 'PUT',
-    body: JSON.stringify(feature)
-  }),
-  
-  /**
-   * 删除功能
-   * @param {string} id - 功能 ID
-   * @returns {Promise<object>} 删除结果
-   */
-  deleteFeature: (id) => request(`${API_BASE_URL}/features/${id}`, {
-    method: 'DELETE'
-  }),
-  
-  /**
-   * 获取功能下的所有接口
-   * @param {string} id - 功能 ID
-   * @returns {Promise<Array>} 接口列表
-   */
-  getFeatureInterfaces: (id) => request(`${API_BASE_URL}/features/${id}/interfaces`)
-};
-
-/**
- * 接口相关 API
- */
-export const InterfaceAPI = {
-  /**
-   * 获取单个接口
-   * @param {string} id - 接口 ID
-   * @returns {Promise<object>} 接口对象
-   */
-  getInterface: (id) => request(`${API_BASE_URL}/interfaces/${id}`),
-  
-  /**
-   * 创建接口
-   * @param {object} interfaceObj - 接口对象
-   * @returns {Promise<object>} 创建的接口对象
-   */
-  createInterface: (interfaceObj) => request(`${API_BASE_URL}/interfaces`, {
-    method: 'POST',
-    body: JSON.stringify(interfaceObj)
-  }),
-  
-  /**
-   * 更新接口
-   * @param {string} id - 接口 ID
-   * @param {object} interfaceObj - 接口对象
-   * @returns {Promise<object>} 更新的接口对象
-   */
-  updateInterface: (id, interfaceObj) => request(`${API_BASE_URL}/interfaces/${id}`, {
-    method: 'PUT',
-    body: JSON.stringify(interfaceObj)
-  }),
-  
-  /**
-   * 删除接口
-   * @param {string} id - 接口 ID
-   * @returns {Promise<object>} 删除结果
-   */
-  deleteInterface: (id) => request(`${API_BASE_URL}/interfaces/${id}`, {
-    method: 'DELETE'
-  }),
-  
-  /**
-   * 测试接口
-   * @param {string} id - 接口 ID
-   * @param {object} testData - 测试数据
-   * @returns {Promise<object>} 测试结果
-   */
-  testInterface: (id, testData) => request(`${API_BASE_URL}/interfaces/${id}/test`, {
-    method: 'POST',
-    body: JSON.stringify(testData)
-  })
-};
-
-/**
- * 代理相关 API
- */
-export const ProxyAPI = {
-  /**
-   * 获取文件内容
-   * @param {string} path - 文件路径
-   * @returns {Promise<object>} 文件内容
-   */
-  getFile: (path) => request(`${API_BASE_URL}/proxy/file?path=${encodeURIComponent(path)}`),
-  
-  /**
-   * 保存文件内容
-   * @param {string} path - 文件路径
-   * @param {string} content - 文件内容
-   * @returns {Promise<object>} 保存结果
-   */
-  saveFile: (path, content) => request(`${API_BASE_URL}/proxy/file`, {
-    method: 'POST',
-    body: JSON.stringify({ path, content })
-  }),
-  
-  /**
-   * 列出文件
-   * @param {string} path - 目录路径
-   * @returns {Promise<Array>} 文件列表
-   */
-  listFiles: (path = '') => request(`${API_BASE_URL}/proxy/files?path=${encodeURIComponent(path)}`),
-  
-  /**
-   * 删除文件
-   * @param {string} path - 文件路径
-   * @returns {Promise<object>} 删除结果
-   */
-  deleteFile: (path) => request(`${API_BASE_URL}/proxy/file?path=${encodeURIComponent(path)}`, {
-    method: 'DELETE'
-  }),
-  
-  /**
-   * 测试 mock 数据模板
-   * @param {string} template - 模板字符串
-   * @returns {Promise<object>} 生成的数据
-   */
-  testMockTemplate: (template) => request(`${API_BASE_URL}/proxy/test`, {
-    method: 'POST',
-    body: JSON.stringify({ template })
-  }),
-  
-  /**
-   * 获取版本信息
-   * @returns {Promise<object>} 版本信息文件内容
-   */
-  getVersionInfo: () => request('/cgi-bin/version')
-};