mock-service-cli 3.3.6 → 3.4.0

package/README.md

@@ -1,15 +1,16 @@
 [![Node.js CI](https://github.com/chandq/mock-service-cli/actions/workflows/node.js.yml/badge.svg)](https://github.com/chandq/mock-service-cli/actions/workflows/node.js.yml)
 [![Coverage Status](https://coveralls.io/repos/github/chandq/mock-service-cli/badge.svg?branch=master)](https://coveralls.io/github/chandq/mock-service-cli?branch=master)
-[![mock-service-cli](https://img.shields.io/github/package-json/v/chandq/mock-service-cli?style=flat-square)](https://github.com/chandq/mock-service-cli)
+[![mock-service-cli](https://img.shields.io/github/package-json/v/chandq/mock-service-cli?style=flat-square)](https://www.npmjs.com/package/mock-service-cli)
 [![node](https://img.shields.io/badge/language-node-orange.svg)](https://nodejs.org/download/release/v12.0.0/)
 [![license:MIT](https://img.shields.io/npm/l/vue.svg?sanitize=true)](https://github.com/chandq/mock-service-cli/blob/master/LICENSE.md)
-[![Downloads:?](https://img.shields.io/npm/dm/mock-service-cli.svg?sanitize=true)](https://npmcharts.com/compare/mock-service-cli?minimal=true)
+
+<!-- [![Downloads:?](https://img.shields.io/npm/dm/mock-service-cli.svg?sanitize=true)](https://npmcharts.com/compare/mock-service-cli?minimal=true) -->
 
 # 🦅 一个基于 [node](https://nodejs.org/en/) 和 [express](https://www.expressjs.com.cn/) 的 轻量级 Mock 套件 命令行工具
 
 ### 简介
 
-内置 **Static Server**、**Mock Server**、**SPA Server**、Http?s request proxy 等功能集。
+内置 **Static Server**、**Mock Server**、**SPA Server**、Http?s request proxy、API overview page 等功能集。
 
 **简易轻量**、**B/S 架构**、**0 秒启动**的本地命令行 Mock 服务套件， 支持热更新，对于开发调试 mock 数据很实用，能提高前端开发者的开发效率。支持 `GET`,`POST`,`PUT`,`DELETE`,`PATCH`,`OPTIONS`,`COPY`,`LINK`,`UNLINK`,`PURGE` 等常用请求类型，无需布署后端，可能是本地最好用的 Mock 工具之一。
 
@@ -17,6 +18,7 @@
 
 - 支持统计 mock 的文件数量和 mock 请求数量
 - 支持终端打开 mock 文件的所在位置
+- 支持自动生成和打开现代化的 API 概览页面（按目录分类、可折叠展开、可点击测试 API）
 
 #### Static Server (和 Mock Server 互斥使用)
 
@@ -94,6 +96,7 @@ This will install `mock-service-cli` globally so that it may be run from the com
 | `-P` or `--web-port`       | Web server port to use. Use `-P 9090` to look for an open port, starting at 9090.                                                                                                                                                                                                                                    | 9090     |
 | `-b` or `--web-baseurl`    | Specify public path of the SPA web server, can be base address of SPA route.                                                                                                                                                                                                                                         | -        |
 | `-R` or `--static-server`  | Specify directory of the Static Web Server.                                                                                                                                                                                                                                                                          | -        |
+| `-w` or `--open`           | Open API overview page automatically.                                                                                                                                                                                                                                                                                | false    |
 
 ## Example
 
@@ -138,9 +141,9 @@ This will install `mock-service-cli` globally so that it may be run from the com
 
    - js file
 
-     `mock-service-cli -D ./ -O ./proxy.js`
+   `mock-service-cli -D ./ -O ./proxy.js`
 
-     proxy.js file content as follows:
+   proxy.js file content as follows:
 
 ```js
 module.exports = {
@@ -149,6 +152,14 @@ module.exports = {
 };
 ```
 
+10. Start Mock Server and automatically open API overview page.
+
+`mock-service-cli --open`
+
+11. Start Mock Server with custom port and automatically open API overview page.
+
+`mock-service-cli -p 8080 --open`
+
 ### 编写 Mock 文件
 
 > mock 请求的类型支持`GET`,`POST`,`PUT`,`DELETE`,`PATCH`,`OPTIONS`,`COPY`,`LINK`,`UNLINK`,`PURGE`
@@ -219,6 +230,42 @@ module.exports = {
 
 ![Web Server Proxy](/assets/web-server-proxy.jpg)
 
+### API 概览页面
+
+API 概览页面是一个现代化的 Web 界面，用于展示和测试所有已注册的 Mock API 接口。
+
+#### 功能特性
+
+- 按目录分类展示 API 接口
+- 目录可折叠/展开
+- 支持按 URL 或 HTTP 方法搜索接口
+- 每种 HTTP 方法使用不同颜色的标签（GET、POST、PUT、DELETE 等）
+- 点击接口可查看详细信息
+- 支持直接在页面中测试 API（发送请求并查看响应）
+- 响应数据格式化展示
+
+#### 访问方式
+
+1. **自动打开**：使用 `--open` 参数启动服务时，会自动在浏览器中打开 API 概览页面
+
+   ```bash
+   mock-service-cli --open
+   ```
+
+2. **手动访问**：在浏览器中访问以下地址
+   ```
+   http://localhost:8090/__api-overview
+   ```
+
+#### 页面预览
+
+API 概览页面采用现代化的响应式设计，包含以下部分：
+
+- 统计卡片：展示总接口数、目录数、各 HTTP 方法数量
+- 搜索框：快速查找接口
+- 目录列表：按目录分组展示所有接口
+- 测试面板：点击接口后可进行测试
+
 ### 借助 socket.io 保留接口数据
 
 > `save-data` 和 `mock-dir-stat` 事件会自动生成 `mock-list.json` 文件（维护接口`<url, [method]>`的关系映射），方便查阅接口统计信息

package/bin/mock-service-cli

@@ -45,7 +45,8 @@ if (argv.h || argv.help) {
       '  -R --static-server   Specify static resource file directory when enabled static server.',
       '',
       '  -h --help            Print this list and exit.',
-      '  -v --version         Print the version and exit.'
+      '  -v --version         Print the version and exit.',
+      '  -w --open            Open API overview page automatically, default false.'
     ].join('\n')
   );
   process.exit();
@@ -60,6 +61,7 @@ var port = argv.p || argv.port,
   version = argv.v || argv.version,
   isStartSocketServer = argv.S || false,
   rewrite = argv.r || argv.rewrite || false,
+  isOpenApiOverview = argv.w || argv.open || false,
   log = null;
 
 if (!argv.s && !argv.silent) {
@@ -79,6 +81,10 @@ if (isStartSocketServer) {
   process.env.SOCKET_SERVER = true;
 }
 
+if (isOpenApiOverview) {
+  process.env.OPEN_API_OVERVIEW = true;
+}
+
 if (version) {
   log.info('v' + require('../package.json').version);
   process.exit();

package/lib/api-overview.html

@@ -0,0 +1,684 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>API 概览 - Mock Service</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .header {
+            background: white;
+            padding: 24px;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            margin-bottom: 20px;
+        }
+
+        .header h1 {
+            color: #333;
+            font-size: 28px;
+            margin-bottom: 8px;
+        }
+
+        .header p {
+            color: #666;
+            font-size: 14px;
+        }
+
+        .stat-cards {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+
+        .stat-card {
+            background: white;
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .stat-card .number {
+            font-size: 36px;
+            font-weight: bold;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .stat-card .label {
+            color: #666;
+            font-size: 14px;
+            margin-top: 4px;
+        }
+
+        .api-container {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+        }
+
+        .search-box {
+            padding: 20px;
+            border-bottom: 1px solid #eee;
+        }
+
+        .search-box input {
+            width: 100%;
+            padding: 12px 16px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 14px;
+            transition: border-color 0.3s;
+        }
+
+        .search-box input:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        .directory {
+            border-bottom: 1px solid #eee;
+        }
+
+        .directory-header {
+            display: flex;
+            align-items: center;
+            padding: 16px 20px;
+            cursor: pointer;
+            background: #f8f9fa;
+            transition: background 0.3s;
+        }
+
+        .directory-header:hover {
+            background: #e9ecef;
+        }
+
+        .toggle-icon {
+            width: 20px;
+            height: 20px;
+            margin-right: 12px;
+            transition: transform 0.3s;
+        }
+
+        .toggle-icon.collapsed {
+            transform: rotate(-90deg);
+        }
+
+        .directory-name {
+            font-weight: 600;
+            color: #333;
+            flex: 1;
+        }
+
+        .api-count {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 4px 12px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: 600;
+        }
+
+        .directory-content {
+            max-height: 5000px;
+            overflow: hidden;
+            transition: max-height 0.3s ease-out;
+        }
+
+        .directory-content.collapsed {
+            max-height: 0;
+        }
+
+        .api-item {
+            display: flex;
+            align-items: center;
+            padding: 14px 20px 14px 52px;
+            border-bottom: 1px solid #f0f0f0;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+
+        .api-item:hover {
+            background: #f8f9fa;
+        }
+
+        .api-item:last-child {
+            border-bottom: none;
+        }
+
+        .method-badge {
+            padding: 4px 10px;
+            border-radius: 6px;
+            font-size: 12px;
+            font-weight: 700;
+            text-transform: uppercase;
+            margin-right: 12px;
+            min-width: 70px;
+            text-align: center;
+        }
+
+        .method-get { background: #61affe; color: white; }
+        .method-post { background: #49cc90; color: white; }
+        .method-put { background: #fca130; color: white; }
+        .method-delete { background: #f93e3e; color: white; }
+        .method-patch { background: #50e3c2; color: white; }
+        .method-head { background: #9012fe; color: white; }
+        .method-options { background: #0d5aa7; color: white; }
+
+        .api-url {
+            flex: 1;
+            color: #333;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+        }
+
+        .test-btn {
+            padding: 6px 16px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 6px;
+            font-size: 13px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+
+        .test-btn:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            padding: 20px;
+        }
+
+        .modal.active {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .modal-content {
+            background: white;
+            border-radius: 12px;
+            max-width: 800px;
+            width: 100%;
+            max-height: 90vh;
+            overflow-y: auto;
+            box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
+        }
+
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px;
+            border-bottom: 1px solid #eee;
+        }
+
+        .modal-title {
+            font-size: 20px;
+            font-weight: 600;
+            color: #333;
+        }
+
+        .close-btn {
+            width: 32px;
+            height: 32px;
+            border: none;
+            background: #f0f0f0;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 18px;
+            color: #666;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.2s;
+        }
+
+        .close-btn:hover {
+            background: #e0e0e0;
+        }
+
+        .modal-body {
+            padding: 20px;
+        }
+
+        .api-info-row {
+            display: flex;
+            margin-bottom: 16px;
+            align-items: center;
+        }
+
+        .api-info-label {
+            width: 100px;
+            font-weight: 600;
+            color: #666;
+        }
+
+        .api-info-value {
+            flex: 1;
+            color: #333;
+        }
+
+        .request-section {
+            margin-top: 24px;
+        }
+
+        .section-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 12px;
+        }
+
+        .request-body-input {
+            width: 100%;
+            min-height: 120px;
+            padding: 12px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-family: 'Courier New', monospace;
+            font-size: 13px;
+            resize: vertical;
+        }
+
+        .request-body-input:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        .send-btn {
+            margin-top: 16px;
+            padding: 12px 24px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+
+        .send-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+
+        .send-btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .response-section {
+            margin-top: 24px;
+        }
+
+        .response-status {
+            display: inline-flex;
+            align-items: center;
+            padding: 6px 12px;
+            border-radius: 6px;
+            font-weight: 600;
+            margin-bottom: 12px;
+        }
+
+        .response-status.success {
+            background: #d4edda;
+            color: #155724;
+        }
+
+        .response-status.error {
+            background: #f8d7da;
+            color: #721c24;
+        }
+
+        .response-output {
+            width: 100%;
+            min-height: 150px;
+            padding: 12px;
+            background: #f8f9fa;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            font-family: 'Courier New', monospace;
+            font-size: 13px;
+            white-space: pre-wrap;
+            word-break: break-all;
+        }
+
+        .loading {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border: 2px solid #ffffff;
+            border-radius: 50%;
+            border-top-color: transparent;
+            animation: spin 0.8s linear infinite;
+            margin-right: 8px;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+            color: #999;
+        }
+
+        .empty-state svg {
+            width: 100px;
+            height: 100px;
+            margin-bottom: 20px;
+            opacity: 0.5;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🎯 API 概览</h1>
+            <p>探索和测试您的 Mock API 接口</p>
+        </div>
+
+        <div class="stat-cards" id="statCards">
+        </div>
+
+        <div class="api-container">
+            <div class="search-box">
+                <input type="text" id="searchInput" placeholder="搜索 API 接口 (输入 URL 或 HTTP 方法)...">
+            </div>
+            <div id="apiList">
+            </div>
+        </div>
+    </div>
+
+    <div class="modal" id="apiModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <div class="modal-title" id="modalTitle">API 测试</div>
+                <button class="close-btn" onclick="closeModal()">×</button>
+            </div>
+            <div class="modal-body" id="modalBody">
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let apiData = null;
+        let currentApi = null;
+
+        document.addEventListener('DOMContentLoaded', () => {
+            fetchApiData();
+            document.getElementById('searchInput').addEventListener('input', filterApis);
+        });
+
+        async function fetchApiData() {
+            try {
+                const response = await fetch('/__api-data');
+                apiData = await response.json();
+                renderStatCards();
+                renderApiList();
+            } catch (error) {
+                console.error('Failed to fetch API data:', error);
+            }
+        }
+
+        function renderStatCards() {
+            const methodCounts = {};
+            apiData.apis.forEach(api => {
+                methodCounts[api.method] = (methodCounts[api.method] || 0) + 1;
+            });
+
+            const container = document.getElementById('statCards');
+            let html = `
+                <div class="stat-card">
+                    <div class="number">${apiData.apis.length}</div>
+                    <div class="label">总接口数</div>
+                </div>
+                <div class="stat-card">
+                    <div class="number">${Object.keys(apiData.groupedApis).length}</div>
+                    <div class="label">目录数</div>
+                </div>
+            `;
+
+            Object.entries(methodCounts).forEach(([method, count]) => {
+                html += `
+                    <div class="stat-card">
+                        <div class="number">${count}</div>
+                        <div class="label">${method.toUpperCase()}</div>
+                    </div>
+                `;
+            });
+
+            container.innerHTML = html;
+        }
+
+        function renderApiList(filterText = '') {
+            const container = document.getElementById('apiList');
+            const searchLower = filterText.toLowerCase();
+
+            let html = '';
+            let hasResults = false;
+
+            Object.entries(apiData.groupedApis).forEach(([dir, apis]) => {
+                const filteredApis = apis.filter(api => 
+                    api.url.toLowerCase().includes(searchLower) ||
+                    api.method.toLowerCase().includes(searchLower)
+                );
+
+                if (filteredApis.length === 0) return;
+                hasResults = true;
+
+                const dirName = dir.replace(/\\/g, '/');
+                html += `
+                    <div class="directory">
+                        <div class="directory-header" onclick="toggleDirectory(this)">
+                            <svg class="toggle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polyline points="9 18 15 12 9 6"></polyline>
+                            </svg>
+                            <span class="directory-name">📁 ${dirName}</span>
+                            <span class="api-count">${filteredApis.length}</span>
+                        </div>
+                        <div class="directory-content">
+                            ${filteredApis.map(api => renderApiItem(api)).join('')}
+                        </div>
+                    </div>
+                `;
+            });
+
+            if (!hasResults) {
+                html = `
+                    <div class="empty-state">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="11" cy="11" r="8"></circle>
+                            <path d="m21 21-4.35-4.35"></path>
+                        </svg>
+                        <h3>没有找到匹配的接口</h3>
+                        <p>尝试使用其他关键词搜索</p>
+                    </div>
+                `;
+            }
+
+            container.innerHTML = html;
+        }
+
+        function renderApiItem(api) {
+            return `
+                <div class="api-item" onclick="openApiModal('${api.method}', '${api.url.replace(/'/g, "\\'")}', '${api.file.replace(/'/g, "\\'")}')">
+                    <span class="method-badge method-${api.method.toLowerCase()}">${api.method}</span>
+                    <span class="api-url">${api.url}</span>
+                    <button class="test-btn" onclick="event.stopPropagation(); testApi('${api.method}', '${api.url.replace(/'/g, "\\'")}')">测试</button>
+                </div>
+            `;
+        }
+
+        function toggleDirectory(header) {
+            const icon = header.querySelector('.toggle-icon');
+            const content = header.nextElementSibling;
+            icon.classList.toggle('collapsed');
+            content.classList.toggle('collapsed');
+        }
+
+        function filterApis(e) {
+            renderApiList(e.target.value);
+        }
+
+        function openApiModal(method, url, file) {
+            currentApi = { method, url, file };
+            const modal = document.getElementById('apiModal');
+            const title = document.getElementById('modalTitle');
+            const body = document.getElementById('modalBody');
+
+            title.innerHTML = `<span class="method-badge method-${method.toLowerCase()}">${method}</span> ${url}`;
+
+            body.innerHTML = `
+                <div class="api-info-row">
+                    <span class="api-info-label">文件路径:</span>
+                    <span class="api-info-value">${file}</span>
+                </div>
+                ${(method === 'POST' || method === 'PUT' || method === 'PATCH') ? `
+                <div class="request-section">
+                    <div class="section-title">请求体 (JSON)</div>
+                    <textarea class="request-body-input" id="requestBody" placeholder='{"key": "value"}'></textarea>
+                </div>
+                ` : ''}
+                <button class="send-btn" id="sendBtn" onclick="sendRequest()">发送请求</button>
+                <div class="response-section" id="responseSection" style="display: none;">
+                    <div class="section-title">响应</div>
+                    <div class="response-status" id="responseStatus"></div>
+                    <pre class="response-output" id="responseOutput"></pre>
+                </div>
+            `;
+
+            modal.classList.add('active');
+        }
+
+        function closeModal() {
+            document.getElementById('apiModal').classList.remove('active');
+            currentApi = null;
+        }
+
+        async function testApi(method, url) {
+            currentApi = { method, url };
+            await sendRequestDirect(method, url);
+        }
+
+        async function sendRequest() {
+            if (!currentApi) return;
+            await sendRequestDirect(currentApi.method, currentApi.url);
+        }
+
+        async function sendRequestDirect(method, url) {
+            const sendBtn = document.getElementById('sendBtn');
+            const responseSection = document.getElementById('responseSection');
+            const responseStatus = document.getElementById('responseStatus');
+            const responseOutput = document.getElementById('responseOutput');
+
+            let requestBody = null;
+            const requestBodyEl = document.getElementById('requestBody');
+            if (requestBodyEl) {
+                const bodyText = requestBodyEl.value.trim();
+                if (bodyText) {
+                    try {
+                        requestBody = JSON.parse(bodyText);
+                    } catch (e) {
+                        alert('请求体 JSON 格式错误');
+                        return;
+                    }
+                }
+            }
+
+            if (sendBtn) {
+                sendBtn.disabled = true;
+                sendBtn.innerHTML = '<span class="loading"></span>发送中...';
+            }
+
+            try {
+                const options = {
+                    method: method,
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                };
+
+                if (requestBody) {
+                    options.body = JSON.stringify(requestBody);
+                }
+
+                const response = await fetch(url, options);
+                const data = await response.json();
+
+                if (responseSection) responseSection.style.display = 'block';
+                if (responseStatus) {
+                    responseStatus.className = 'response-status success';
+                    responseStatus.textContent = `✓ ${response.status} ${response.statusText}`;
+                }
+                if (responseOutput) {
+                    responseOutput.textContent = JSON.stringify(data, null, 2);
+                }
+            } catch (error) {
+                if (responseSection) responseSection.style.display = 'block';
+                if (responseStatus) {
+                    responseStatus.className = 'response-status error';
+                    responseStatus.textContent = '✗ 请求失败';
+                }
+                if (responseOutput) {
+                    responseOutput.textContent = error.message;
+                }
+            }
+
+            if (sendBtn) {
+                sendBtn.disabled = false;
+                sendBtn.innerHTML = '发送请求';
+            }
+        }
+
+        document.getElementById('apiModal').addEventListener('click', (e) => {
+            if (e.target === e.currentTarget) {
+                closeModal();
+            }
+        });
+
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                closeModal();
+            }
+        });
+    </script>
+</body>
+</html>

package/lib/mockServer.js

@@ -4,7 +4,8 @@ const express = require('express'), // 引入express
   os = require('os'),
   path = require('path'),
   colors = require('colors/safe'),
-  portfinder = require('portfinder');
+  portfinder = require('portfinder'),
+  { exec } = require('child_process');
 const { createProxyMiddleware } = require('http-proxy-middleware');
 const ifaces = os.networkInterfaces();
 const { Server } = require('socket.io');
@@ -19,6 +20,8 @@ const {
 } = require('./utils');
 const { genMockFiles, getMockStatFromDir, getMockStatFromFile } = require('./manageMockFiles');
 
+const registeredApis = [];
+
 const methodRegExp = new RegExp(`((${SupportMethods.join('|')}) +)?([^?]*)`, 'i');
 
 const app = express();
@@ -72,6 +75,36 @@ function init() {
   app.use(crossDomain()); // 允许跨域
   app.use(bodyParser.json()); // 解析body
 
+  // API 概览页面路由
+  app.get('/__api-overview', (req, res) => {
+    const htmlPath = path.resolve(__dirname, './api-overview.html');
+    if (existsSync(htmlPath)) {
+      res.sendFile(htmlPath);
+    } else {
+      res.status(404).send('API overview page not found');
+    }
+  });
+
+  // API 数据路由
+  app.get('/__api-data', (req, res) => {
+    // 按目录分组 API
+    const groupedApis = {};
+    registeredApis.forEach(api => {
+      // 从文件路径中提取相对路径作为目录
+      const dirPath = path.dirname(api.file);
+      if (!groupedApis[dirPath]) {
+        groupedApis[dirPath] = [];
+      }
+      groupedApis[dirPath].push(api);
+    });
+
+    res.json({
+      apis: registeredApis,
+      groupedApis: groupedApis,
+      port: process.env.PORT
+    });
+  });
+
   let requireMockServe = true;
   if (process.env.SPECIFIED_FILE) {
     composeRouteFromJsFile(process.env.SPECIFIED_FILE);
@@ -158,6 +191,13 @@ function composeRouteFromJsFile(file) {
         res.json(fileObject[item]);
       });
     }
+    // 收集 API 信息
+    registeredApis.push({
+      method: reqMethod.toUpperCase(),
+      url: reqUrl,
+      file: file,
+      data: fileObject[item]
+    });
   });
 }
 /**
@@ -199,6 +239,13 @@ function parseMockFiles(specialDir = '../mock') {
         app[method](apiUrl, function (req, res) {
           res.json(fileObject[method]);
         });
+        // 收集 API 信息
+        registeredApis.push({
+          method: method.toUpperCase(),
+          url: apiUrl,
+          file: filePath,
+          data: fileObject[method]
+        });
       });
       continue;
     }
@@ -361,6 +408,13 @@ function startServer() {
         );
         console.info(colors.yellow(`\n Mock server available on:\n`));
         console.info('    http://localhost:' + colors.green(process.env.PORT));
+        console.info(
+          '    ' +
+            colors.blue('API Overview: ') +
+            'http://localhost:' +
+            colors.green(process.env.PORT) +
+            colors.green('/__api-overview')
+        );
         Object.keys(ifaces).forEach(function (dev) {
           ifaces[dev].forEach(function (details) {
             if (details.family === 'IPv4') {
@@ -369,6 +423,32 @@ function startServer() {
           });
         });
       }
+
+      // 自动打开浏览器
+      if (process.env.OPEN_API_OVERVIEW && !process.env.RESTARTED) {
+        const apiOverviewUrl = `http://localhost:${process.env.PORT}/__api-overview`;
+        console.info(colors.yellow(`\nOpening API overview page...`));
+        let openCommand;
+        switch (process.platform) {
+          case 'darwin':
+            openCommand = `open ${apiOverviewUrl}`;
+            break;
+          case 'win32':
+            openCommand = `start ${apiOverviewUrl}`;
+            break;
+          case 'linux':
+            openCommand = `xdg-open ${apiOverviewUrl}`;
+            break;
+          default:
+            console.warn(colors.yellow(`Could not automatically open browser. Please visit: ${apiOverviewUrl}`));
+            return;
+        }
+        exec(openCommand, error => {
+          if (error) {
+            console.warn(colors.yellow(`Could not automatically open browser. Please visit: ${apiOverviewUrl}`));
+          }
+        });
+      }
     });
   }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mock-service-cli",
-  "version": "3.3.6",
-  "description": "🦅 Local Mock/Static/SPA server, Http?s request proxy",
+  "version": "3.4.0",
+  "description": "🦅 Local Mock/Static/SPA server, Http?s request proxy, API overview page",
   "main": "./lib/mockServer.js",
   "bin": {
     "mock-service-cli": "bin/mock-service-cli"