npm - mock-service-cli - Versions diffs - 4.3.1 → 4.4.0 - Mend

mock-service-cli 4.3.1 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md +18 -4
package/dist/file-explorer-login.html +59 -0
package/dist/file-explorer.html +125 -21
package/dist/runtime.js +9 -6
package/package.json +4 -2

package/README.md CHANGED Viewed

@@ -73,8 +73,9 @@ npx mock-service-cli [options] [path]
 | `-R` 或 `--static-server`  | 启用静态服务器，指定静态资源目录                                  | -      |
 | `-w` 或 `--open`           | 自动打开 API 概览页、文件浏览器页                                 | false  |
 | `-e` 或 `--explorer`       | 启用文件浏览器服务器，指定要浏览的目录                            | ./     |
-| `--edit`                   | 启用文件浏览器的新建、重命名和删除操作                            | false  |
-| `--host`                   | 将全部 Web 服务暴露到所有 IPv4 网卡                               | false  |
+| `--edit`                   | 启用文件浏览器的新建、重命名、删除和上传操作                      | false  |
+| `--auth <password>`        | 为文件浏览器启用密码认证（仅可搭配 `--explorer`）                 | -      |
+| `--host [allowlist-file]`  | 暴露全部 IPv4 网卡；传入文件时仅允许白名单 IP 访问                | false  |
 ## 📖 使用示例
@@ -136,13 +137,26 @@ mock-service-cli -e ./ -p 9090
 # 启用文件编辑操作
 mock-service-cli -e ./ --edit
+# 启用文件浏览器密码认证
+mock-service-cli -e ./ --auth 'local-password'
 # 暴露到局域网（编辑操作仍需额外传入 --edit）
 mock-service-cli -e ./ --host
+# 仅向白名单 IP 暴露服务
+mock-service-cli -e ./ --host ./allowed-ips.txt
 ```
 默认情况下，Mock、SPA、Static 和 File Explorer 服务只监听 `127.0.0.1`。
-`--host` 会使这些服务监听所有 IPv4 网卡，请仅在可信网络中使用。文件浏览器默认只读；
-必须在启动时传入 `--edit` 才能创建、重命名或删除文件。
+`--host` 会使这些服务监听所有 IPv4 网卡，请仅在可信网络中使用。传入白名单文件时，服务仍监听全部 IPv4 网卡，
+但仅允许 `localhost`、`127.0.0.1`、`::1` 及文件中的 IP/CIDR 访问；空行和行首 `#` 注释会忽略，非法或空白名单会阻止启动。
+该规则同时作用于 Mock、SPA、Static、File Explorer 和 Socket 服务。
+文件浏览器默认只读；必须在启动时传入 `--edit` 才能创建、重命名、删除或上传。上传文件支持多选，上传文件夹会保留目录层级；
+同名路径不会覆盖，其他无冲突文件仍会继续上传。单文件最大 20MB，单次请求最大 20 个文件和 100MB。
+`--auth` 会在文件浏览器中显示登录页，并在每次页面加载和每个 API 请求时验证密码。密码仅保存在当前浏览器标签页的
+`sessionStorage` 中，但命令行参数仍可能暴露在 shell 历史和进程列表里，因此只适用于可信本机或局域网环境。
 ## 📝 编写 Mock 文件

package/dist/file-explorer-login.html ADDED Viewed

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>文件浏览器登录</title>
+    <style>
+      * { box-sizing: border-box; }
+      body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #f4f6f8; color: #202124; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+      main { width: min(360px, calc(100vw - 32px)); padding: 28px; background: #fff; border: 1px solid #dde1e6; border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); }
+      h1 { margin: 0 0 22px; font-size: 20px; }
+      label { display: block; margin-bottom: 8px; font-size: 14px; }
+      input { width: 100%; height: 38px; padding: 8px 10px; border: 1px solid #b9c1cb; border-radius: 4px; font: inherit; }
+      button { width: 100%; height: 38px; margin-top: 16px; border: 0; border-radius: 4px; background: #276ef1; color: #fff; cursor: pointer; font: inherit; }
+      button:disabled { opacity: 0.6; cursor: wait; }
+      #error { min-height: 20px; margin: 12px 0 0; color: #c62828; font-size: 13px; }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>文件浏览器</h1>
+      <form id="loginForm">
+        <label for="password">访问密码</label>
+        <input id="password" type="password" autocomplete="current-password" required autofocus />
+        <button id="submitButton" type="submit">登录</button>
+        <p id="error" role="alert"></p>
+      </form>
+    </main>
+    <script>
+      const storageKey = 'mock-service-cli.file-explorer.password';
+      const form = document.getElementById('loginForm');
+      const passwordInput = document.getElementById('password');
+      const submitButton = document.getElementById('submitButton');
+      const errorElement = document.getElementById('error');
+      form.addEventListener('submit', async event => {
+        event.preventDefault();
+        const password = passwordInput.value;
+        submitButton.disabled = true;
+        errorElement.textContent = '';
+        try {
+          const response = await fetch('/__api/auth/verify', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'X-File-Explorer-Password': password },
+            body: JSON.stringify({ password })
+          });
+          if (!response.ok) throw new Error('密码不正确');
+          sessionStorage.setItem(storageKey, password);
+          window.location.replace('/');
+        } catch (error) {
+          errorElement.textContent = error.message || '登录失败';
+          passwordInput.select();
+        } finally {
+          submitButton.disabled = false;
+        }
+      });
+    </script>
+  </body>
+</html>

package/dist/file-explorer.html CHANGED Viewed

@@ -1010,6 +1010,14 @@
           <button class="toolbar-action-btn edit-only edit-inline" onclick="createEntry('file')" title="新建文件">
             新建文件
           </button>
+          <button class="toolbar-action-btn edit-only edit-inline" onclick="document.getElementById('uploadFilesInput').click()" title="上传文件">
+            上传文件
+          </button>
+          <button class="toolbar-action-btn edit-only edit-inline" onclick="document.getElementById('uploadFolderInput').click()" title="上传文件夹">
+            上传文件夹
+          </button>
+          <input id="uploadFilesInput" type="file" multiple hidden onchange="uploadSelectedFiles(this.files)" />
+          <input id="uploadFolderInput" type="file" webkitdirectory directory hidden onchange="uploadSelectedFiles(this.files)" />
           <button
             class="toolbar-action-btn danger edit-only edit-inline"
             id="deleteSelectedBtn"
@@ -1093,7 +1101,7 @@
       let searchQuery = '';
       let sortBy = 'name';
       let sortAscending = true;
-      let showHiddenFiles = true;
+      let showHiddenFiles = false;
       let showBirthtime = false;
       let currentPreviewContent = '';
       let currentPreviewObjectUrl = null;
@@ -1109,6 +1117,11 @@
       let virtualRenderFrame = null;
       let virtualState = null;
       let fileGridResizeObserver = null;
+      let healthCheckTimer = null;
+      let serviceWasUnavailable = false;
+      const EXPLORER_AUTH_STORAGE_KEY = 'mock-service-cli.file-explorer.password';
+      const EXPLORER_PATH_STORAGE_KEY = 'mock-service-cli.file-explorer.path';
       const LIST_ROW_HEIGHT = 37;
       const GRID_ROW_HEIGHT = 132;
@@ -1151,6 +1164,53 @@
           fileGridResizeObserver.disconnect();
           fileGridResizeObserver = null;
         }
+        if (healthCheckTimer) {
+          clearInterval(healthCheckTimer);
+          healthCheckTimer = null;
+        }
+      }
+      function redirectToLogin() {
+        sessionStorage.removeItem(EXPLORER_AUTH_STORAGE_KEY);
+        window.location.replace('/__login');
+      }
+      async function explorerFetch(url, options = {}) {
+        const headers = new Headers(options.headers || {});
+        const password = sessionStorage.getItem(EXPLORER_AUTH_STORAGE_KEY);
+        if (password) headers.set('X-File-Explorer-Password', password);
+        const response = await fetch(url, { ...options, headers });
+        if (response.status === 401) redirectToLogin();
+        return response;
+      }
+      async function verifyExplorerAuth() {
+        const password = sessionStorage.getItem(EXPLORER_AUTH_STORAGE_KEY);
+        try {
+          const response = await explorerFetch('/__api/auth/verify', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ password })
+          });
+          if (!response.ok) return false;
+          return Boolean((await response.json()).success);
+        } catch (error) {
+          console.error('Failed to verify file explorer authentication:', error);
+          return false;
+        }
+      }
+      function startHealthCheck() {
+        healthCheckTimer = setInterval(async () => {
+          try {
+            const response = await explorerFetch('/__api/health');
+            if (!response.ok) throw new Error(`Unexpected status ${response.status}`);
+            if (serviceWasUnavailable) window.location.reload();
+            serviceWasUnavailable = false;
+          } catch (error) {
+            serviceWasUnavailable = true;
+          }
+        }, 2000);
       }
       function syncEditModeUI() {
@@ -1167,8 +1227,9 @@
       async function loadExplorerConfig() {
         try {
-          const response = await fetch('/__api/config');
+          const response = await explorerFetch('/__api/config');
           const config = await response.json();
+          if (!response.ok || config.error) throw new Error(config.error || 'Failed to load configuration');
           editMode = Boolean(config.editMode);
         } catch (error) {
           console.warn('Failed to load file explorer configuration:', error);
@@ -1308,8 +1369,10 @@
         });
         fileGridResizeObserver.observe(fileGrid);
+        if (!(await verifyExplorerAuth())) return;
         await loadExplorerConfig();
-        loadDirectory('/');
+        startHealthCheck();
+        loadDirectory(sessionStorage.getItem(EXPLORER_PATH_STORAGE_KEY) || '/');
       });
       window.addEventListener('beforeunload', cleanupEventListeners);
@@ -1394,7 +1457,7 @@
         fileGrid.innerHTML = '<div class="loading"><div class="spinner"></div><p>加载中...</p></div>';
         try {
-          const response = await fetch(`/__api/list?path=${encodeURIComponent(path)}`, {
+          const response = await explorerFetch(`/__api/list?path=${encodeURIComponent(path)}`, {
             signal: directoryRequestController.signal
           });
           const data = await response.json();
@@ -1405,6 +1468,7 @@
           if (requestId !== directoryRequestId) return;
           currentPath = data.currentPath;
+          sessionStorage.setItem(EXPLORER_PATH_STORAGE_KEY, currentPath);
           allFiles = data.files || [];
           if (document.getElementById('searchInput')) {
@@ -1548,7 +1612,7 @@
       async function openInExplorer(path) {
         try {
-          const response = await fetch('/__api/open-in-explorer', {
+          const response = await explorerFetch('/__api/open-in-explorer', {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json'
@@ -1568,7 +1632,7 @@
       }
       async function requestJson(url, options) {
-        const response = await fetch(url, options);
+        const response = await explorerFetch(url, options);
         const data = await response.json();
         if (!response.ok || data.error) {
           throw new Error(data.error || '请求失败');
@@ -1576,6 +1640,34 @@
         return data;
       }
+      async function uploadSelectedFiles(files) {
+        const input = document.activeElement;
+        if (!files || files.length === 0) return;
+        const formData = new FormData();
+        formData.append('parentPath', currentPath);
+        Array.from(files).forEach(file => {
+          formData.append('files', file, file.webkitRelativePath || file.name);
+        });
+        try {
+          const response = await explorerFetch('/__api/upload', { method: 'POST', body: formData });
+          const result = await response.json();
+          if (!response.ok && response.status !== 207) throw new Error(result.error || '上传失败');
+          const messages = [];
+          if (result.uploaded.length) messages.push(`已上传 ${result.uploaded.length} 项`);
+          if (result.failed.length) messages.push(`${result.failed.length} 项未上传: ${result.failed.map(item => item.name).join(', ')}`);
+          showToast(messages.join('；'));
+          await loadDirectory(currentPath);
+        } catch (error) {
+          console.error('上传失败:', error);
+          alert(`上传失败: ${error.message}`);
+        } finally {
+          document.getElementById('uploadFilesInput').value = '';
+          document.getElementById('uploadFolderInput').value = '';
+          if (input && input.blur) input.blur();
+        }
+      }
       async function createEntry(type) {
         const label = type === 'directory' ? '文件夹' : '文件';
         const name = window.prompt(`请输入${label}名称`);
@@ -1638,14 +1730,23 @@
         }
       }
-      function downloadFile(filePath, fileName) {
-        const url = `/__api/file?path=${encodeURIComponent(filePath)}`;
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = fileName;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
+      async function downloadFile(filePath, fileName) {
+        try {
+          const response = await explorerFetch(`/__api/file?path=${encodeURIComponent(filePath)}&download=1`);
+          if (!response.ok) throw new Error('下载失败');
+          const objectUrl = URL.createObjectURL(await response.blob());
+          const a = document.createElement('a');
+          a.href = objectUrl;
+          a.download = fileName || '';
+          a.style.display = 'none';
+          document.body.appendChild(a);
+          a.click();
+          a.remove();
+          URL.revokeObjectURL(objectUrl);
+        } catch (error) {
+          console.error('下载失败:', error);
+          alert(`下载失败: ${error.message}`);
+        }
       }
       async function deletePath(filePath, fileName) {
@@ -1655,7 +1756,7 @@
         if (!confirmed) return;
         try {
-          const response = await fetch('/__api/path', {
+          const response = await explorerFetch('/__api/path', {
             method: 'DELETE',
             headers: {
               'Content-Type': 'application/json'
@@ -2324,7 +2425,6 @@
                   <button class="zoom-btn" onclick="resetImage()">🔄 重置</button>
                 </div>
                 <img
-                  src="/__api/file?path=${encodeURIComponent(path)}"
                   class="image-preview"
                   id="previewImage"
                   alt="Preview"
@@ -2332,8 +2432,11 @@
                 >
               </div>
             `;
+            const imageResponse = await explorerFetch(`/__api/file?path=${encodeURIComponent(path)}`);
+            if (!imageResponse.ok) throw new Error('图片加载失败');
+            currentPreviewObjectUrl = URL.createObjectURL(await imageResponse.blob());
+            document.getElementById('previewImage').src = currentPreviewObjectUrl;
           } else if (BINARY_EXTS.includes(ext)) {
-            const downloadUrl = `/__api/file?path=${encodeURIComponent(path)}`;
             const fileSize = fileInfo ? formatSize(fileInfo.size) : '未知大小';
             body.innerHTML = `
@@ -2345,13 +2448,13 @@
                 </div>
                 <div class="empty-state">
                   <p>此文件类型无法预览内容</p>
-                  <p><a href="${downloadUrl}" download="${path.split('/').pop()}">点击下载</a></p>
+                  <p><button class="toolbar-action-btn" id="previewDownloadBtn">点击下载</button></p>
                 </div>
               </div>
             `;
+            document.getElementById('previewDownloadBtn').addEventListener('click', () => downloadFile(path, path.split('/').pop()));
           } else {
             if (isLargeFile) {
-              const downloadUrl = `/__api/file?path=${encodeURIComponent(path)}`;
               body.innerHTML = `
                 <div class="preview-container">
                   <div class="binary-info">
@@ -2361,12 +2464,13 @@
                   </div>
                   <div class="empty-state">
                     <p>该文件超过 ${formatSize(LARGE_FILE_THRESHOLD)}，不建议在线预览</p>
-                    <p><a href="${downloadUrl}" download="${path.split('/').pop()}">点击下载</a></p>
+                    <p><button class="toolbar-action-btn" id="previewDownloadBtn">点击下载</button></p>
                   </div>
                 </div>
               `;
+              document.getElementById('previewDownloadBtn').addEventListener('click', () => downloadFile(path, path.split('/').pop()));
             } else {
-              const response = await fetch(`/__api/file?path=${encodeURIComponent(path)}`);
+              const response = await explorerFetch(`/__api/file?path=${encodeURIComponent(path)}`);
               const contentType = response.headers.get('content-type');
               if (contentType && contentType.includes('application/json')) {