mock-service-cli 3.6.2 → 3.6.4

package/README.md

@@ -71,7 +71,7 @@ npx mock-service-cli [options] [path]
 | `-P` 或 `--web-port`       | Web 服务器端口                                              | 9090   |
 | `-b` 或 `--web-baseurl`    | 指定 SPA Web 服务器的公共路径                               | -      |
 | `-R` 或 `--static-server`  | 启用静态服务器，指定静态资源目录                            | -      |
-| `-w` 或 `--open`           | 自动打开 API 概览页面                                       | false  |
+| `-w` 或 `--open`           | 自动打开 API 概览页、文件浏览器页                           | false  |
 | `-e` 或 `--explorer`       | 启用文件浏览器服务器，指定要浏览的目录                      | ./     |
 
 ## 📖 使用示例

package/lib/file-explorer.html

@@ -295,13 +295,13 @@
         grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
         gap: 8px;
         overflow: auto;
-        flex: 1;
       }
 
       .file-grid.list-view {
         grid-template-columns: 1fr;
         gap: 0;
         padding: 4px 0;
+        flex: unset;
       }
 
       .file-item {
@@ -324,6 +324,7 @@
         border-bottom: 1px solid #f0f0f0;
         border-radius: 0;
         min-height: auto;
+        height: 37px;
       }
 
       .file-icon {
@@ -809,29 +810,141 @@
       let currentImageIndex = -1;
       let imageFiles = [];
 
-      document.addEventListener('DOMContentLoaded', () => {
-        loadDirectory('/');
+      let eventHandlers = [];
+      let searchDebounceTimer = null;
 
-        const fileGrid = document.getElementById('fileGrid');
-        fileGrid.addEventListener('contextmenu', e => {
-          const fileItem = e.target.closest('.file-item');
-          if (fileItem) {
-            e.preventDefault();
-            const filePath = fileItem.dataset.path;
-            const isDirectory = fileItem.dataset.isDirectory === 'true';
-            showContextMenu(e.clientX, e.clientY, filePath, isDirectory);
-          }
-        });
+      function debounce(func, wait) {
+        return function (...args) {
+          clearTimeout(searchDebounceTimer);
+          searchDebounceTimer = setTimeout(() => func.apply(this, args), wait);
+        };
+      }
 
-        document.addEventListener('click', () => {
-          hideContextMenu();
-        });
+      function addEventListenerWithCleanup(element, event, handler, options) {
+        element.addEventListener(event, handler, options);
+        eventHandlers.push({ element, event, handler, options });
+      }
 
-        document.addEventListener('scroll', () => {
-          hideContextMenu();
+      function cleanupEventListeners() {
+        if (searchDebounceTimer) {
+          clearTimeout(searchDebounceTimer);
+          searchDebounceTimer = null;
+        }
+        eventHandlers.forEach(({ element, event, handler, options }) => {
+          element.removeEventListener(event, handler, options);
         });
+        eventHandlers = [];
+      }
+
+      function handleFileGridClick(e) {
+        const actionBtn = e.target.closest('[data-action]');
+        if (actionBtn) {
+          e.stopPropagation();
+          const action = actionBtn.dataset.action;
+          const path = actionBtn.dataset.path;
+          const filename = actionBtn.dataset.filename;
+
+          switch (action) {
+            case 'copyPath':
+              copyToClipboard(path);
+              break;
+            case 'openInExplorer':
+              openInExplorer(path);
+              break;
+            case 'download':
+              downloadFile(path, filename);
+              break;
+          }
+          return;
+        }
+
+        const fileItem = e.target.closest('.file-item');
+        if (fileItem) {
+          const filePath = fileItem.dataset.path;
+          const isDirectory = fileItem.dataset.isDirectory === 'true';
+          handleItemClick(filePath, isDirectory);
+        }
+      }
+
+      function handleFileGridContextmenu(e) {
+        const fileItem = e.target.closest('.file-item');
+        if (fileItem) {
+          e.preventDefault();
+          const filePath = fileItem.dataset.path;
+          const isDirectory = fileItem.dataset.isDirectory === 'true';
+          showContextMenu(e.clientX, e.clientY, filePath, isDirectory);
+        }
+      }
+
+      function handleDocumentClick() {
+        hideContextMenu();
+      }
+
+      function handleDocumentScroll() {
+        hideContextMenu();
+      }
+
+      function handleModalClick(e) {
+        if (e.target === e.currentTarget) {
+          closeModal();
+        }
+      }
+
+      function handleModalWheel(e) {
+        const img = document.getElementById('previewImage');
+        if (!img) return;
+
+        e.preventDefault();
+        const delta = e.deltaY > 0 ? -0.1 : 0.1;
+        zoomImage(delta);
+      }
+
+      function handleDocumentKeydown(e) {
+        if (e.key === 'Escape') {
+          closeModal();
+        }
+        if (e.key === 'Backspace' && document.activeElement.tagName !== 'INPUT') {
+          e.preventDefault();
+          goBack();
+        }
+        const img = document.getElementById('previewImage');
+        if (img) {
+          if (e.key === '+' || e.key === '=') {
+            zoomImage(0.1);
+          } else if (e.key === '-') {
+            zoomImage(-0.1);
+          } else if (e.key === '0') {
+            resetImage();
+          } else if (e.key === '[' || e.key === '{') {
+            rotateImage(-90);
+          } else if (e.key === ']' || e.key === '}') {
+            rotateImage(90);
+          } else if (e.key === 'ArrowLeft') {
+            navigateImage(-1);
+          } else if (e.key === 'ArrowRight') {
+            navigateImage(1);
+          }
+        }
+      }
+
+      document.addEventListener('DOMContentLoaded', () => {
+        loadDirectory('/');
+
+        const fileGrid = document.getElementById('fileGrid');
+        const previewModal = document.getElementById('previewModal');
+
+        addEventListenerWithCleanup(fileGrid, 'click', handleFileGridClick);
+        addEventListenerWithCleanup(fileGrid, 'contextmenu', handleFileGridContextmenu);
+        addEventListenerWithCleanup(document, 'click', handleDocumentClick);
+        addEventListenerWithCleanup(document, 'scroll', handleDocumentScroll);
+        addEventListenerWithCleanup(previewModal, 'click', handleModalClick);
+        addEventListenerWithCleanup(previewModal, 'wheel', handleModalWheel, { passive: false });
+        addEventListenerWithCleanup(document, 'keydown', handleDocumentKeydown);
       });
 
+      window.addEventListener('beforeunload', cleanupEventListeners);
+      window.addEventListener('pagehide', cleanupEventListeners);
+
       function showContextMenu(x, y, filePath, isDirectory) {
         currentContextMenuFile = { path: filePath, isDirectory };
 
@@ -1029,10 +1142,10 @@
         }
       }
 
-      function handleSearch() {
+      const handleSearch = debounce(() => {
         searchQuery = document.getElementById('searchInput').value;
         processAndRenderFiles();
-      }
+      }, 200);
 
       function handleSort() {
         sortBy = document.getElementById('sortSelect').value;
@@ -1112,64 +1225,61 @@
           return;
         }
 
-        let html = '';
+        const fragment = document.createDocumentFragment();
+
         files.forEach(file => {
           const icon = getFileIcon(file);
           const size = formatSize(file.size);
           const mtime = formatDate(file.mtime);
           const hiddenClass = file.isHidden ? 'hidden-file' : '';
 
+          const fileItem = document.createElement('div');
+          fileItem.className = `file-item ${hiddenClass}`;
+          fileItem.dataset.path = file.path;
+          fileItem.dataset.isDirectory = file.isDirectory;
+
           if (currentView === 'list') {
-            html += `
-                        <div class="file-item ${hiddenClass}" data-path="${file.path}" data-is-directory="${
-              file.isDirectory
-            }">
-                            <div class="file-icon" onclick="handleItemClick('${file.path}', ${
-              file.isDirectory
-            })">${icon}</div>
-                            <div class="file-info" onclick="handleItemClick('${file.path}', ${file.isDirectory})">
-                                <div class="file-name">${escapeHtml(file.name)}</div>
-                                <div class="file-meta">
-                                    ${file.isDirectory ? '<span>目录</span>' : `<span>${size}</span>`}
-                                    <span>${mtime}</span>
-                                </div>
-                            </div>
-                            <div class="action-buttons">
-                                <button class="copy-btn" onclick="event.stopPropagation(); copyToClipboard('${
-                                  file.path
-                                }')" title="复制路径">📋</button>
-                                <button class="action-btn open" onclick="event.stopPropagation(); openInExplorer('${
-                                  file.path
-                                }')" title="在文件管理器中打开">📂</button>
-                                ${
-                                  !file.isDirectory
-                                    ? `<button class="action-btn download" onclick="event.stopPropagation(); downloadFile('${
-                                        file.path
-                                      }', '${escapeHtml(file.name)}')" title="下载">⬇️</button>`
-                                    : ''
-                                }
-                            </div>
-                        </div>
-                    `;
+            fileItem.innerHTML = `
+              <div class="file-icon">${icon}</div>
+              <div class="file-info">
+                <div class="file-name">${escapeHtml(file.name)}</div>
+                <div class="file-meta">
+                  ${file.isDirectory ? '<span>目录</span>' : `<span>${size}</span>`}
+                  <span>${mtime}</span>
+                </div>
+              </div>
+              <div class="action-buttons">
+                <button class="copy-btn" data-action="copyPath" data-path="${file.path}" title="复制路径">📋</button>
+                <button class="action-btn open" data-action="openInExplorer" data-path="${
+                  file.path
+                }" title="在文件管理器中打开">📂</button>
+                ${
+                  !file.isDirectory
+                    ? `<button class="action-btn download" data-action="download" data-path="${
+                        file.path
+                      }" data-filename="${escapeHtml(file.name)}" title="下载">⬇️</button>`
+                    : ''
+                }
+              </div>
+            `;
           } else {
-            html += `
-                        <div class="file-item ${hiddenClass}" data-path="${file.path}" data-is-directory="${
-              file.isDirectory
-            }" onclick="handleItemClick('${file.path}', ${file.isDirectory})">
-                            <div class="file-icon">${icon}</div>
-                            <div class="file-info">
-                                <div class="file-name">${escapeHtml(file.name)}</div>
-                                <div class="file-meta">
-                                    ${file.isDirectory ? '目录' : size}
-                                </div>
-                            </div>
-                        </div>
-                    `;
+            fileItem.innerHTML = `
+              <div class="file-icon">${icon}</div>
+              <div class="file-info">
+                <div class="file-name">${escapeHtml(file.name)}</div>
+                <div class="file-meta">
+                  ${file.isDirectory ? '目录' : size}
+                </div>
+              </div>
+            `;
           }
+
+          fragment.appendChild(fileItem);
         });
 
-        // 强制更新 DOM
-        fileGrid.innerHTML = html;
+        // 清空并一次性更新 DOM
+        fileGrid.innerHTML = '';
+        fileGrid.appendChild(fragment);
       }
 
       function handleItemClick(path, isDirectory) {
@@ -1749,53 +1859,6 @@
         div.textContent = text;
         return div.innerHTML;
       }
-
-      document.getElementById('previewModal').addEventListener('click', e => {
-        if (e.target === e.currentTarget) {
-          closeModal();
-        }
-      });
-
-      document.getElementById('previewModal').addEventListener(
-        'wheel',
-        e => {
-          const img = document.getElementById('previewImage');
-          if (!img) return;
-
-          e.preventDefault();
-          const delta = e.deltaY > 0 ? -0.1 : 0.1;
-          zoomImage(delta);
-        },
-        { passive: false }
-      );
-
-      document.addEventListener('keydown', e => {
-        if (e.key === 'Escape') {
-          closeModal();
-        }
-        if (e.key === 'Backspace' && document.activeElement.tagName !== 'INPUT') {
-          e.preventDefault();
-          goBack();
-        }
-        const img = document.getElementById('previewImage');
-        if (img) {
-          if (e.key === '+' || e.key === '=') {
-            zoomImage(0.1);
-          } else if (e.key === '-') {
-            zoomImage(-0.1);
-          } else if (e.key === '0') {
-            resetImage();
-          } else if (e.key === '[' || e.key === '{') {
-            rotateImage(-90);
-          } else if (e.key === ']' || e.key === '}') {
-            rotateImage(90);
-          } else if (e.key === 'ArrowLeft') {
-            navigateImage(-1);
-          } else if (e.key === 'ArrowRight') {
-            navigateImage(1);
-          }
-        }
-      });
     </script>
   </body>
 </html>

package/lib/fileExplorerServer.js

@@ -49,15 +49,20 @@ function init() {
     dirPath = decodeURIComponent(dirPath);
 
     let fullPath;
-    if (dirPath.startsWith('/')) {
+    const resolvedRoot = path.resolve(explorerRoot);
+
+    if (explorerRoot === '/') {
+      // 根目录，可以直接使用绝对路径
       fullPath = dirPath;
     } else {
-      fullPath = path.resolve(explorerRoot, dirPath);
+      // 非根目录，应该将 dirPath 视为相对于 explorerRoot 的路径
+      // 如果 dirPath 以 / 开头，去掉前面的 /
+      const relativePath = dirPath.startsWith('/') ? dirPath.substring(1) : dirPath;
+      fullPath = path.resolve(explorerRoot, relativePath);
     }
 
     // 防止路径遍历攻击 - 确保路径不会越界
     if (explorerRoot !== '/') {
-      const resolvedRoot = path.resolve(explorerRoot);
       if (!fullPath.startsWith(resolvedRoot)) {
         return res.status(403).json({ error: 'Access denied' });
       }
@@ -127,15 +132,20 @@ function init() {
     filePath = decodeURIComponent(filePath);
 
     let fullPath;
-    if (filePath.startsWith('/')) {
+    const resolvedRoot = path.resolve(explorerRoot);
+
+    if (explorerRoot === '/') {
+      // 根目录，可以直接使用绝对路径
       fullPath = filePath;
     } else {
-      fullPath = path.resolve(explorerRoot, filePath);
+      // 非根目录，应该将 filePath 视为相对于 explorerRoot 的路径
+      // 如果 filePath 以 / 开头，去掉前面的 /
+      const relativePath = filePath.startsWith('/') ? filePath.substring(1) : filePath;
+      fullPath = path.resolve(explorerRoot, relativePath);
     }
 
     // 防止路径遍历攻击 - 确保路径不会越界
     if (explorerRoot !== '/') {
-      const resolvedRoot = path.resolve(explorerRoot);
       if (!fullPath.startsWith(resolvedRoot)) {
         return res.status(403).json({ error: 'Access denied' });
       }
@@ -181,15 +191,20 @@ function init() {
     filePath = decodeURIComponent(filePath);
 
     let fullPath;
-    if (filePath.startsWith('/')) {
+    const resolvedRoot = path.resolve(explorerRoot);
+
+    if (explorerRoot === '/') {
+      // 根目录，可以直接使用绝对路径
       fullPath = filePath;
     } else {
-      fullPath = path.resolve(explorerRoot, filePath);
+      // 非根目录，应该将 filePath 视为相对于 explorerRoot 的路径
+      // 如果 filePath 以 / 开头，去掉前面的 /
+      const relativePath = filePath.startsWith('/') ? filePath.substring(1) : filePath;
+      fullPath = path.resolve(explorerRoot, relativePath);
     }
 
     // 防止路径遍历攻击 - 确保路径不会越界
     if (explorerRoot !== '/') {
-      const resolvedRoot = path.resolve(explorerRoot);
       if (!fullPath.startsWith(resolvedRoot)) {
         return res.status(403).json({ error: 'Access denied' });
       }

package/package.json

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