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

package/VERSION.md

@@ -1,5 +1,70 @@
 # 🔄 版本更新记录
+
+## 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
+- **主题切换彻底修复**：`cyber-theme.css` 全部选择器添加 `body.cyber-theme` 前缀，`:root` CSS 变量移至 `body.cyber-theme` 作用域，关闭主题后不再污染亮色模式
+- **动态 class 切换**：`AppLayout.js` 通过 `useEffect` 实时 toggle `body.cyber-theme` class，并监听 `storage` 事件实现跨组件同步
+- **Modal/Drawer 亮色恢复**：移除 `InterfaceManagementV2.js`、`PreviewModal.js`、`ResponseContentEditor.js` 中硬编码的深色背景/边框/文字色，恢复 Ant Design 默认亮色样式
+- **顶部栏/侧边栏/内容区亮色修复**：非赛博朋克模式下显式设置白色/浅灰色背景（`#ffffff` / `#f5f5f5`）和深色文字（`#000000d9`），避免 `ConfigProvider` 算法切换后样式残留
+- **版本号可见性修复**：亮色模式下版本号按钮文字改为 `#000000d9`，确保在白色顶部栏上清晰可见
+
+### 🔧 Technical
+- **`index.js`**：改为始终加载 `cyber-theme.css`（规则带前缀，默认不生效）
+- **`AppLayout.js`**：`enableCyber` 改为响应式 `useState`，配合 `useEffect` 动态管理主题状态
+
+## v1.2.2-beta.24
+
+### ✨ Feature
+- **赛博朋克主题**：全新深色霓虹主题，采用青色 `#00f0ff` 为主色调，搭配绿色 `#00ff41`、黄色 `#f0e800`、洋红 `#ff00a0` 等霓虹色，科技感十足
+- **主题切换开关**：系统设置页面新增「赛博朋克风格」开关，默认开启，关闭后恢复经典 Ant Design 亮色主题，切换后自动刷新页面生效
+- **动态主题加载**：通过 `localStorage` 持久化主题偏好，`ConfigProvider` 动态切换 `darkAlgorithm` / `defaultAlgorithm`，CSS 条件加载实现零闪烁切换
+- **字体升级**：引入 Orbitron（标题）、Share Tech Mono（代码/版本号）、Noto Sans SC（正文）三款字体，强化科技感
+
+### 🎨 UI
+- **全局深色化**：所有页面容器、卡片、表格、表单、弹窗、侧边栏、导航栏统一深色背景 `#0f0f1a`
+- **霓虹发光效果**：主按钮、开关、标签、选中菜单项均带有青色微光阴影
+- **状态标签霓虹化**：成功/警告/错误状态标签改为半透明霓虹底色 + 发光文字
+- **代码区域深色化**：预览弹窗、测试结果等代码展示区域改为深色背景 + 等宽字体
+
 ## v1.2.2-beta.22
+
 ### ✨ Feature
 - **入参匹配开关**：系统设置新增「接口入参匹配」和「响应入参匹配」两个显示开关，关闭后对应 UI 区域隐藏，同时后端运行时跳过对应匹配逻辑，直接使用默认响应
 - **开关持久化**：开关状态通过 `app/cgi-bin/settings.js` 持久化到 `settings.json`，前端初始化时从后端同步，保证多端一致
@@ -12,6 +77,7 @@
 - **`server.js`**：注册 `lib/routes/settings.js` 路由（`/api/settings`）
 
 ## v1.2.2-beta.18
+
 ### ✨ Feature
 - **响应级入参匹配**：每个响应内容支持独立配置入参匹配规则，同一接口内不同入参可自动匹配返回不同响应，无需创建多个接口定义
 - **动态响应选择**：运行时按响应列表顺序依次检查入参规则，第一个匹配成功的响应被返回；无规则的响应作为默认兜底
@@ -28,6 +94,7 @@
 - **匹配逻辑升级**：`ruleManager.handleDataTemplate` 新增响应级入参匹配逻辑，命中后响应头 `X-Whistle-Mock-Response` 准确反映实际返回的响应
 
 ## v1.2.2-beta.7
+
 ### ✨ Feature
 - **交互增强**：接口表单（添加/编辑接口）支持弹窗/抽屉模式切换
 - **设置新增**：系统设置页面新增"接口表单交互"开关，支持弹窗/抽屉模式切换
@@ -41,6 +108,7 @@
 - **表单复用**：Modal 和 Drawer 共享相同的表单逻辑和验证规则
 
 ## v1.2.2-beta.4
+
 ### ✨ Feature
 - **交互增强**：数据管理支持抽屉模式，从右侧滑出，宽度 1040px，上下撑满
 - **设置新增**：系统设置页面新增"数据管理交互"开关，支持弹窗/抽屉模式切换
@@ -49,6 +117,7 @@
 - **拖动优化**：拖动时实时更新列宽，提供流畅的视觉反馈
 
 ## v1.2.2-beta.3
+
 ### ✨ Feature
 - **交互优化**：接口列表"当前响应"列支持拖动调整宽度
 - **自适应优化**：列内下拉框根据列宽自动调整显示
@@ -62,6 +131,7 @@
 - **样式优化**：优化拖动手柄样式，提供更好的视觉反馈
 
 ## v1.2.1
+
 ### ✨ Feature
 - **界面优化**：功能模块页面支持列表/卡片视图切换，列表视图更加紧凑高效
 - **代码优化**：下线 V1 版本代码，全面采用 V2 版本
@@ -72,21 +142,24 @@
 - **问题修复**：请求入参匹配在编辑删除后保存不生效（V1/V2）。前端在提交时始终显式发送 `paramMatchers` 字段，空数组表示清空，后端得以覆盖旧值。
 
 ## v1.2.0
+
 ### ✨ Feature
 - **代码优化**：下线 V1 版本代码，全面采用 V2 版本
 - **界面简化**：移除版本切换功能，统一用户体验
 
 ## v1.2.1-beta.5
+
 ### ✨ Feature
 - **新增功能**：新增mock数据管理弹窗
 
 ## v1.2.0
+
 ### ✨ Feature
 - **界面优化**：模块管理接口管理页面细节调整（v2版本）
 - **设置更新**：设置界面添加切换 UI 版本
 - **界面优化**：功能模块支持列表展示（v2）
 - **界面优化**：页面细节调整
-- **新增**：接口管理页支持“复制新增”。可基于已配置接口一键打开新增弹窗并预填，响应模式会为每个响应生成全新ID并正确映射激活响应；其余配置（分组、参数匹配、重定向设定等）保留。保存后自动刷新缓存。
+- **新增**：接口管理页支持"复制新增"。可基于已配置接口一键打开新增弹窗并预填，响应模式会为每个响应生成全新ID并正确映射激活响应；其余配置（分组、参数匹配、重定向设定等）保留。保存后自动刷新缓存。
 
 ### 🐛 Fix
 - **问题修复**：请求入参匹配在编辑删除后保存不生效（V1/V2）。前端在提交时始终显式发送 `paramMatchers` 字段，空数组表示清空，后端得以覆盖旧值。
@@ -94,10 +167,12 @@
 - **问题修复**：编辑接口保存折叠内容丢失
 
 ## v1.1.2
+
 ### 🐛 Fix
 - **问题修复**: 接口管理中禁用启用功能失效
 
 ## v1.1.1
+
 ### 🆕 更新功能
 - **项目优化**：版本号同步显示在页面右上角，支持点击查看详细更新记录
 - **项目优化**：新增模拟响应入参校验功能，提升数据准确性
@@ -116,6 +191,7 @@
 
 
 ## v1.1.0
+
 ### 🆕 更新功能
 - **多响应管理系统**：每个接口支持配置多个不同的响应内容
 - **响应切换功能**：可在多个响应之间快速切换，便于测试不同场景
@@ -124,4 +200,4 @@
 - **响应管理界面**：全新的响应管理卡片式界面
 - **接口匹配引擎重构**：大幅简化匹配逻辑，提升匹配性能
 - **正则表达式缓存**：避免重复编译正则表达式，提升匹配效率
-- **代码简化**：移除复杂的参数匹配功能，专注核心URL匹配
+- **代码简化**：移除复杂的参数匹配功能，专注核心URL匹配

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 });
+  }
+};

package/app/public/index.html

@@ -1 +1 @@
-<!doctype html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Whistle Mock 数据工厂</title><script defer="defer" src="/js/index.js"></script></head><body><div id="root"></div></body></html>
+<!doctype html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Whistle Mock Plugin</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Orbitron:wght@400;500;600;700;800;900&family=Share+Tech+Mono&display=swap" rel="stylesheet"><script defer="defer" src="/js/index.js"></script></head><body><div id="root"></div></body></html>