whistle.mock-plugins 1.2.2-beta.25 → 1.2.2-beta.28

package/VERSION.md

@@ -1,5 +1,41 @@
 # 🔄 版本更新记录
 
+## v1.2.2-beta.28
+
+### ✨ Feature
+- **请求统计-最近命中记录增强**：增加"模块"列展示命中接口所属功能模块；去掉冗余的"响应"列
+- **Top 10 功能模块命中**：原"Top 10 未命中 URL"（实际无数据）改为"Top 10 功能模块命中排行"，按模块聚合命中次数
+- **最近命中记录筛选**：去掉分页，固定展示 20 条；新增日期选择器和 URL 关键字输入框，支持按日期精确筛选和 URL 模糊匹配
+
+### 🎨 UI
+- **亮色主题颜色优化**：将组件中硬编码的刺眼霓虹绿 `#00ff41` 替换为标准柔和绿 `#52c41a`，在亮色主题下视觉更舒适（赛博朋克主题仍通过 CSS 覆盖保持霓虹效果）
+- **去掉 V2 标签**：功能模块管理页面右上角 "V2" 标签移除
+
+### 🔧 Technical
+- **后端日志字段扩展**：`ruleManager.js` 记录 `mock_hit` 日志时新增 `featureName`（功能模块名称）和 `responseName`（命中响应名称）字段
+- **stats API 增强**：`cgi-bin/stats?type=recent` 支持 `date`（YYYY-MM-DD）和 `url`（模糊匹配）查询参数过滤
+
+## v1.2.2-beta.26
+
+### ✨ Feature
+- **主题切换免刷新**：关闭 Settings 中的强制刷新逻辑，主题切换通过 `storage` 事件 + `body.cyber-theme` class 动态切换即时生效
+- **请求统计面板**：新增「请求统计」页面（Ctrl+4），展示近7天命中趋势、Top 10 命中接口、Top 10 未命中 URL、最近命中记录
+- **从真实接口导入**：接口编辑表单新增「从真实接口导入」区域，输入真实 API URL 后一键抓取响应，自动生成 Mock.js 模板并应用到当前响应
+- **全局键盘快捷键**：
+  - `Ctrl+1/2/3/4` — 快速切换功能模块/接口管理/系统设置/请求统计
+  - `Ctrl+S` — 保存当前表单（Modal/Drawer 打开时）
+  - `Ctrl+Shift+N` — 新建接口/功能模块
+  - `Ctrl+K` — 聚焦搜索框
+  - `Shift+?` — 显示快捷键帮助
+
+### 🔧 Technical
+- **新增 `app/cgi-bin/stats.js`**：后端统计 API，支持 overview/top/timeline/recent 四种查询维度
+- **新增 `app/cgi-bin/proxy-fetch.js`**：后端代理抓取真实接口响应
+- **新增 `ui/src/pages/Stats.js`**：请求统计前端页面
+- **新增 `ui/src/hooks/useKeyboardShortcuts.js`**：全局键盘快捷键 Hook
+- **新增 `ui/src/components/KeyboardShortcutsHelp.js`**：快捷键帮助弹窗
+- **新增 `ui/src/components/interface-management/RealResponseRecorder.js`**：真实响应抓取与 Mock 模板生成组件
+
 ## v1.2.2-beta.25
 
 ### 🐛 Fix

package/app/cgi-bin/proxy-fetch.js

@@ -0,0 +1,117 @@
+const axios = require('axios');
+const { URL } = require('url');
+
+/**
+ * 代理抓取真实接口响应
+ * POST /cgi-bin/proxy-fetch
+ * body: {
+ *   url: string,
+ *   method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS',
+ *   headers?: Record<string, string>,
+ *   queryParams?: Record<string, string>,
+ *   body?: any,
+ *   bodyType?: 'json' | 'form' | 'text' | 'none'
+ * }
+ *
+ * 注意：ui-server.js 已用 body-parser 解析 JSON，直接取 req.body
+ */
+module.exports = async (req, res) => {
+  if (req.method !== 'POST') {
+    res.statusCode = 405;
+    res.setHeader('Content-Type', 'application/json');
+    res.end(JSON.stringify({ code: 405, message: 'Method Not Allowed' }));
+    return;
+  }
+
+  try {
+    const params = req.body || {};
+    const {
+      url: targetUrl,
+      method = 'GET',
+      headers = {},
+      queryParams = {},
+      body: requestBody,
+      bodyType = 'none'
+    } = params;
+
+    if (!targetUrl) {
+      res.setHeader('Content-Type', 'application/json');
+      res.end(JSON.stringify({ code: 400, message: '缺少 URL 参数' }));
+      return;
+    }
+
+    // 构建带 query 参数的 URL
+    const parsed = new URL(targetUrl);
+    Object.entries(queryParams).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== '') {
+        parsed.searchParams.set(key, String(value));
+      }
+    });
+    const finalUrl = parsed.toString();
+
+    // 构造 axios 请求配置
+    const axiosConfig = {
+      url: finalUrl,
+      method: method.toUpperCase(),
+      headers: {
+        'Accept': 'application/json, text/plain, */*',
+        'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+        ...headers
+      },
+      timeout: 15000,
+      maxRedirects: 5,
+      responseType: 'text',
+      decompress: true,
+      validateStatus: () => true,
+    };
+
+    // 移除禁止客户端发送的请求头（不区分大小写）
+    ['host', 'content-length', 'transfer-encoding'].forEach(h => {
+      const key = Object.keys(axiosConfig.headers).find(k => k.toLowerCase() === h);
+      if (key) delete axiosConfig.headers[key];
+    });
+
+    // 处理请求体
+    if (requestBody && bodyType !== 'none' && method.toUpperCase() !== 'GET' && method.toUpperCase() !== 'HEAD') {
+      if (bodyType === 'json') {
+        axiosConfig.headers['Content-Type'] = 'application/json; charset=utf-8';
+        axiosConfig.data = typeof requestBody === 'string' ? requestBody : JSON.stringify(requestBody);
+      } else if (bodyType === 'form') {
+        axiosConfig.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';
+        if (typeof requestBody === 'object' && requestBody !== null) {
+          const qs = new URLSearchParams();
+          Object.entries(requestBody).forEach(([k, v]) => qs.append(k, v));
+          axiosConfig.data = qs.toString();
+        } else {
+          axiosConfig.data = String(requestBody);
+        }
+      } else {
+        axiosConfig.headers['Content-Type'] = 'text/plain; charset=utf-8';
+        axiosConfig.data = String(requestBody);
+      }
+    }
+
+    console.log('[proxy-fetch] 发起请求:', axiosConfig.method, finalUrl);
+    const proxyRes = await axios(axiosConfig);
+    console.log('[proxy-fetch] 请求完成:', proxyRes.status, finalUrl);
+
+    res.setHeader('Content-Type', 'application/json');
+    res.end(JSON.stringify({
+      code: 0,
+      data: {
+        status: proxyRes.status,
+        statusText: proxyRes.statusText,
+        headers: proxyRes.headers,
+        body: typeof proxyRes.data === 'string' ? proxyRes.data : JSON.stringify(proxyRes.data),
+        finalUrl: proxyRes.request?.res?.responseUrl || finalUrl
+      }
+    }));
+  } catch (err) {
+    console.error('[proxy-fetch] 请求失败:', err.message);
+    res.setHeader('Content-Type', 'application/json');
+    res.end(JSON.stringify({
+      code: 500,
+      message: '请求失败: ' + (err.response?.statusText || err.message)
+    }));
+  }
+};

package/app/cgi-bin/stats.js

@@ -0,0 +1,149 @@
+const fs = require('fs-extra');
+const path = require('path');
+const storage = require('../../lib/storage');
+
+const DATA_DIR = storage.DATA_DIR;
+const LOGS_FILE = path.join(DATA_DIR, 'logs.json');
+
+/**
+ * 统计接口
+ * GET /cgi-bin/stats?type=overview|hits|misses|top
+ */
+module.exports = (req, res) => {
+  try {
+    const type = req.query.type || 'overview';
+
+    if (!fs.existsSync(LOGS_FILE)) {
+      return res.json({ code: 0, data: { logs: [], stats: {} } });
+    }
+
+    const logsData = fs.readJsonSync(LOGS_FILE);
+    const logs = logsData.logs || [];
+
+    // 只取最近 7 天的日志做统计（避免数据量过大）
+    const now = new Date();
+    const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+    const recentLogs = logs.filter(log => {
+      const t = new Date(log.timestamp);
+      return t >= sevenDaysAgo;
+    });
+
+    // 分离命中和未命中
+    const hitLogs = recentLogs.filter(log => log.eventType === 'mock_hit');
+    const missLogs = recentLogs.filter(log => log.eventType === 'mock_miss' || log.eventType === 'proxy_pass');
+
+    let data = {};
+
+    switch (type) {
+      case 'overview': {
+        // 接口总数
+        const interfacesFile = path.join(DATA_DIR, 'interfaces.json');
+        let totalInterfaces = 0;
+        let activeInterfaces = 0;
+        if (fs.existsSync(interfacesFile)) {
+          const intfData = fs.readJsonSync(interfacesFile);
+          const list = intfData.data || intfData.interfaces || intfData || [];
+          totalInterfaces = Array.isArray(list) ? list.length : 0;
+          activeInterfaces = Array.isArray(list) ? list.filter(i => i.active).length : 0;
+        }
+
+        data = {
+          totalRequests: recentLogs.length,
+          totalHits: hitLogs.length,
+          totalMisses: missLogs.length,
+          totalInterfaces,
+          activeInterfaces,
+          hitRate: recentLogs.length > 0 ? ((hitLogs.length / recentLogs.length) * 100).toFixed(1) : 0,
+          todayHits: hitLogs.filter(log => {
+            const t = new Date(log.timestamp);
+            return t.toDateString() === now.toDateString();
+          }).length,
+        };
+        break;
+      }
+
+      case 'top': {
+        // Top 10 命中接口
+        const interfaceHitMap = {};
+        hitLogs.forEach(log => {
+          const id = log.interfaceId || log.interfaceName || 'unknown';
+          const name = log.interfaceName || id;
+          if (!interfaceHitMap[id]) {
+            interfaceHitMap[id] = { id, name, count: 0 };
+          }
+          interfaceHitMap[id].count++;
+        });
+        const topInterfaces = Object.values(interfaceHitMap)
+          .sort((a, b) => b.count - a.count)
+          .slice(0, 10);
+
+        // Top 10 命中功能模块
+        const featureHitMap = {};
+        hitLogs.forEach(log => {
+          const id = log.featureName || log.featureId || 'unknown';
+          const name = log.featureName || '未分类';
+          if (!featureHitMap[id]) {
+            featureHitMap[id] = { id, name, count: 0 };
+          }
+          featureHitMap[id].count++;
+        });
+        const topFeatures = Object.values(featureHitMap)
+          .sort((a, b) => b.count - a.count)
+          .slice(0, 10);
+
+        data = { topInterfaces, topFeatures };
+        break;
+      }
+
+      case 'timeline': {
+        // 最近 7 天每天的命中数
+        const timeline = {};
+        for (let i = 6; i >= 0; i--) {
+          const d = new Date(now.getTime() - i * 24 * 60 * 60 * 1000);
+          const key = d.toISOString().slice(0, 10);
+          timeline[key] = 0;
+        }
+        hitLogs.forEach(log => {
+          const key = new Date(log.timestamp).toISOString().slice(0, 10);
+          if (timeline[key] !== undefined) {
+            timeline[key]++;
+          }
+        });
+        data = { timeline };
+        break;
+      }
+
+      case 'recent': {
+        let filteredLogs = hitLogs;
+        const filterDate = req.query.date;
+        const filterUrl = req.query.url;
+        
+        if (filterDate) {
+          filteredLogs = filteredLogs.filter(log => {
+            const logDate = new Date(log.timestamp).toISOString().slice(0, 10);
+            return logDate === filterDate;
+          });
+        }
+        
+        if (filterUrl) {
+          const lowerUrl = filterUrl.toLowerCase();
+          filteredLogs = filteredLogs.filter(log => {
+            const logUrl = (log.url || '').toLowerCase();
+            return logUrl.includes(lowerUrl);
+          });
+        }
+        
+        data = { logs: filteredLogs.slice(0, 20) };
+        break;
+      }
+
+      default:
+        data = {};
+    }
+
+    res.json({ code: 0, data });
+  } catch (err) {
+    console.error('Stats error:', err);
+    res.status(500).json({ code: 500, message: err.message });
+  }
+};