mock-service-cli 4.4.0 → 4.5.0

package/README.md

@@ -37,6 +37,12 @@ npm install --global mock-service-cli
 brew install mock-service-cli
 ```
 
+需要 RAR、7z、bzip2、xz 等高级归档格式时，安装 Ultra 版。它与轻量版使用相同的命令，不能同时全局安装：
+
+```bash
+npm install --global mock-service-cli-ultra
+```
+
 ### 局部安装
 
 ```bash
@@ -71,6 +77,7 @@ npx mock-service-cli [options] [path]
 | `-P` 或 `--web-port`       | Web 服务器端口                                                    | 9090   |
 | `-b` 或 `--web-baseurl`    | 指定 SPA Web 服务器的公共路径                                     | -      |
 | `-R` 或 `--static-server`  | 启用静态服务器，指定静态资源目录                                  | -      |
+| `--static-config <file>`   | 静态服务器的 JSON 配置：热更新、HTTPS、挂载、代理与 SPA 回退      | -      |
 | `-w` 或 `--open`           | 自动打开 API 概览页、文件浏览器页                                 | false  |
 | `-e` 或 `--explorer`       | 启用文件浏览器服务器，指定要浏览的目录                            | ./     |
 | `--edit`                   | 启用文件浏览器的新建、重命名、删除和上传操作                      | false  |
@@ -100,8 +107,18 @@ mock-service-cli -f ./mock.js
 ```bash
 # 启动静态服务器
 mock-service-cli -R ./public
+
+# 使用 Live Server 风格的热更新配置
+mock-service-cli -R ./public --static-config ./static-server.json
 ```
 
+静态服务器会监听资源变化并向 HTML 页面注入热更新客户端：CSS 文件更新时替换样式表，其余变更刷新页面。
+默认不打开浏览器；在配置中设置 `"open": true` 或提供页面路径即可打开。完整配置字段和示例见
+[`docs/static-server.config.example.json`](./docs/static-server.config.example.json)：支持忽略规则、SPA 回退、挂载目录、代理、HTTPS、CORS、响应头和自定义浏览器命令。
+`-p`、`--host`、`-A` 和 `--proxy-options` 仍可使用，且同名 CLI 配置优先。
+未设置 `spaFallback` 时，根目录和子目录会显示可点击的目录索引，不会自动加载 `index.html`；用户可直接访问该文件。
+只有显式设置 `"spaFallback": "/index.html"`（或其他入口）时，未命中的路由才会返回 SPA 入口页。
+
 ### Web 服务器 (SPA)
 
 ```bash
@@ -153,7 +170,13 @@ mock-service-cli -e ./ --host ./allowed-ips.txt
 该规则同时作用于 Mock、SPA、Static、File Explorer 和 Socket 服务。
 
 文件浏览器默认只读；必须在启动时传入 `--edit` 才能创建、重命名、删除或上传。上传文件支持多选，上传文件夹会保留目录层级；
-同名路径不会覆盖，其他无冲突文件仍会继续上传。单文件最大 20MB，单次请求最大 20 个文件和 100MB。
+同名路径不会覆盖，其他无冲突文件仍会继续上传。单文件和单次请求最大 2GB，单次最多 100 个文件；
+文件夹上传会按最多 100 个文件且 1GB 自动分批，依次完成上传。大文件会先写入系统临时目录再复制到目标目录，
+上传时请确保临时目录和目标磁盘合计至少有文件大小两倍的可用空间。
+
+编辑模式下还可压缩选中项、预览压缩包目录和解压压缩包。轻量版创建压缩包支持 ZIP 和 TAR.GZ，预览和解压支持 ZIP、TAR 与 TAR.GZ；归档操作在后台执行，可取消；单个压缩包及解压后的总大小上限为 2GB，压缩包内最多 10,000 项，且会拒绝加密包、路径穿越、符号链接和目标冲突。
+
+Ultra 版额外支持 RAR、7z、gzip、bzip2 与 xz 系列的预览和解压；RAR 为只读支持，不能创建。Ultra 包会额外安装约 12MB 的跨平台 7-Zip 二进制，RAR 通过只读解码器处理；轻量版不包含这些二进制。
 
 `--auth` 会在文件浏览器中显示登录页，并在每次页面加载和每个 API 请求时验证密码。密码仅保存在当前浏览器标签页的
 `sessionStorage` 中，但命令行参数仍可能暴露在 shell 历史和进程列表里，因此只适用于可信本机或局域网环境。

package/dist/api-overview.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>API 概览 - Mock Service</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon-api-overview.svg">
     <style>
         * {
             margin: 0;

package/dist/edition.json

@@ -0,0 +1 @@
+{"edition":"light"}

package/dist/favicon-api-overview.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="14" fill="#0f766e"/>
+  <path d="M21 23 32 17l11 6v13l-11 6-11-6V23z" fill="none" stroke="#99f6e4" stroke-width="4" stroke-linejoin="round"/>
+  <path d="M32 23v13M21 23l11 6 11-6" stroke="#99f6e4" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="17" cy="45" r="5" fill="#fbbf24"/>
+  <circle cx="47" cy="45" r="5" fill="#fbbf24"/>
+  <path d="M21 43h22" stroke="#fbbf24" stroke-width="4" stroke-linecap="round"/>
+</svg>

package/dist/favicon-file-explorer-login.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="14" fill="#1e40af"/>
+  <path d="M14 20c0-3.3 2.7-6 6-6h11l5 6h8c3.3 0 6 2.7 6 6v8H14V20z" fill="#93c5fd"/>
+  <rect x="20" y="31" width="25" height="20" rx="4" fill="#f8fafc"/>
+  <path d="M26 31v-4a6.5 6.5 0 0 1 13 0v4" fill="none" stroke="#f8fafc" stroke-width="5" stroke-linecap="round"/>
+  <circle cx="32.5" cy="40" r="3" fill="#1e40af"/>
+  <path d="M32.5 43v3" stroke="#1e40af" stroke-width="3" stroke-linecap="round"/>
+</svg>

package/dist/favicon-file-explorer.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="14" fill="#1d4ed8"/>
+  <path d="M12 22c0-3.3 2.7-6 6-6h11l5 6h12c3.3 0 6 2.7 6 6v17c0 3.3-2.7 6-6 6H18c-3.3 0-6-2.7-6-6V22z" fill="#fbbf24"/>
+  <path d="M12 29h40v16c0 3.3-2.7 6-6 6H18c-3.3 0-6-2.7-6-6V29z" fill="#fde68a"/>
+  <path d="M21 37h22" stroke="#1d4ed8" stroke-width="4" stroke-linecap="round"/>
+</svg>

package/dist/favicon-static-server.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="14" fill="#0f766e"/>
+  <path d="M17 19h30v26H17z" fill="none" stroke="#ccfbf1" stroke-width="4" stroke-linejoin="round"/>
+  <path d="M24 28h16M24 36h11" stroke="#ccfbf1" stroke-width="4" stroke-linecap="round"/>
+  <circle cx="47" cy="45" r="7" fill="#fbbf24"/>
+</svg>

package/dist/file-explorer-login.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>文件浏览器登录</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon-file-explorer-login.svg" />
     <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; }

package/dist/file-explorer.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>文件浏览器 - File Explorer</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon-file-explorer.svg" />
     <style>
       * {
         margin: 0;
@@ -1010,14 +1011,29 @@
           <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
+            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
+            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)" />
+          <input
+            id="uploadFolderInput"
+            type="file"
+            webkitdirectory
+            directory
+            hidden
+            onchange="uploadSelectedFiles(this.files)"
+          />
           <button
             class="toolbar-action-btn danger edit-only edit-inline"
             id="deleteSelectedBtn"
@@ -1027,6 +1043,15 @@
           >
             删除选中
           </button>
+          <button
+            class="toolbar-action-btn edit-only edit-inline"
+            id="archiveSelectedBtn"
+            onclick="createArchiveFromSelection()"
+            title="压缩选中项"
+            disabled
+          >
+            压缩选中
+          </button>
           <button
             class="toggle-hidden-btn"
             id="toggleHiddenBtn"
@@ -1091,6 +1116,16 @@
       <div class="context-menu-item edit-only edit-flex" id="ctxDelete" onclick="handleContextMenuAction('delete')">
         🗑️ 删除
       </div>
+      <div class="context-menu-divider edit-only edit-block"></div>
+      <div class="context-menu-item edit-only edit-flex" id="ctxCompress" onclick="handleContextMenuAction('compress')">
+        🗜️ 压缩
+      </div>
+      <div class="context-menu-item edit-only edit-flex" id="ctxExtract" onclick="handleContextMenuAction('extract')">
+        📦 解压到当前目录
+      </div>
+      <div class="context-menu-item edit-only edit-flex" id="ctxArchivePreview" onclick="handleContextMenuAction('archivePreview')">
+        🔎 查看压缩包
+      </div>
     </div>
 
     <script>
@@ -1119,6 +1154,11 @@
       let fileGridResizeObserver = null;
       let healthCheckTimer = null;
       let serviceWasUnavailable = false;
+      let explorerInitializationPromise = null;
+      let explorerLifecycleVersion = 0;
+      let currentArchiveJobId = null;
+      let currentArchiveJobOperation = null;
+      let archiveCapabilities = { createFormats: [], readExtensions: [] };
 
       const EXPLORER_AUTH_STORAGE_KEY = 'mock-service-cli.file-explorer.password';
       const EXPLORER_PATH_STORAGE_KEY = 'mock-service-cli.file-explorer.path';
@@ -1127,6 +1167,9 @@
       const GRID_ROW_HEIGHT = 132;
       const GRID_MIN_ITEM_WIDTH = 100;
       const VIRTUAL_BUFFER_ROWS = 6;
+      const MAX_UPLOAD_FILE_SIZE = 2 * 1024 * 1024 * 1024;
+      const MAX_UPLOAD_BATCH_SIZE = 1024 * 1024 * 1024;
+      const MAX_UPLOAD_BATCH_FILE_COUNT = 100;
 
       let eventHandlers = [];
       let searchDebounceTimer = null;
@@ -1170,6 +1213,12 @@
         }
       }
 
+      function handlePageHide() {
+        explorerLifecycleVersion += 1;
+        explorerInitializationPromise = null;
+        cleanupEventListeners();
+      }
+
       function redirectToLogin() {
         sessionStorage.removeItem(EXPLORER_AUTH_STORAGE_KEY);
         window.location.replace('/__login');
@@ -1201,6 +1250,7 @@
       }
 
       function startHealthCheck() {
+        if (healthCheckTimer) return;
         healthCheckTimer = setInterval(async () => {
           try {
             const response = await explorerFetch('/__api/health');
@@ -1238,6 +1288,20 @@
         syncEditModeUI();
       }
 
+      async function loadArchiveCapabilities() {
+        archiveCapabilities = { createFormats: [], readExtensions: [] };
+        if (!editMode) return;
+        try {
+          const capabilities = await requestJson('/__api/archive/capabilities');
+          archiveCapabilities = {
+            createFormats: Array.isArray(capabilities.createFormats) ? capabilities.createFormats : [],
+            readExtensions: Array.isArray(capabilities.readExtensions) ? capabilities.readExtensions : []
+          };
+        } catch (error) {
+          console.warn('Failed to load archive capabilities:', error);
+        }
+      }
+
       function handleFileGridClick(e) {
         const actionBtn = e.target.closest('[data-action]');
         if (actionBtn) {
@@ -1349,46 +1413,72 @@
         }
       }
 
-      document.addEventListener('DOMContentLoaded', async () => {
-        const fileGrid = document.getElementById('fileGrid');
-        const previewModal = document.getElementById('previewModal');
-
-        addEventListenerWithCleanup(fileGrid, 'click', handleFileGridClick);
-        addEventListenerWithCleanup(fileGrid, 'contextmenu', handleFileGridContextmenu);
-        addEventListenerWithCleanup(fileGrid, 'scroll', handleFileGridScroll, { passive: true });
-        addEventListenerWithCleanup(document, 'click', handleDocumentClick);
-        addEventListenerWithCleanup(document, 'scroll', handleDocumentScroll);
-        addEventListenerWithCleanup(previewModal, 'click', handleModalClick);
-        addEventListenerWithCleanup(previewModal, 'wheel', handleModalWheel, { passive: false });
-        addEventListenerWithCleanup(document, 'keydown', handleDocumentKeydown);
-
-        fileGridResizeObserver = new ResizeObserver(() => {
-          if (virtualState) {
-            renderFiles(currentFiles, false);
+      async function initializeExplorer(isPageRestore = false) {
+        if (explorerInitializationPromise) return explorerInitializationPromise;
+
+        const lifecycleVersion = explorerLifecycleVersion;
+        const initializationPromise = (async () => {
+          const fileGrid = document.getElementById('fileGrid');
+          const previewModal = document.getElementById('previewModal');
+
+          addEventListenerWithCleanup(fileGrid, 'click', handleFileGridClick);
+          addEventListenerWithCleanup(fileGrid, 'contextmenu', handleFileGridContextmenu);
+          addEventListenerWithCleanup(fileGrid, 'scroll', handleFileGridScroll, { passive: true });
+          addEventListenerWithCleanup(document, 'click', handleDocumentClick);
+          addEventListenerWithCleanup(document, 'scroll', handleDocumentScroll);
+          addEventListenerWithCleanup(previewModal, 'click', handleModalClick);
+          addEventListenerWithCleanup(previewModal, 'wheel', handleModalWheel, { passive: false });
+          addEventListenerWithCleanup(document, 'keydown', handleDocumentKeydown);
+
+          fileGridResizeObserver = new ResizeObserver(() => {
+            if (virtualState) {
+              renderFiles(currentFiles, false);
+            }
+          });
+          fileGridResizeObserver.observe(fileGrid);
+
+          if (!(await verifyExplorerAuth()) || lifecycleVersion !== explorerLifecycleVersion) return;
+          await loadExplorerConfig();
+          if (lifecycleVersion !== explorerLifecycleVersion) return;
+          await loadArchiveCapabilities();
+          if (lifecycleVersion !== explorerLifecycleVersion) return;
+          startHealthCheck();
+          await loadDirectory(isPageRestore ? currentPath : sessionStorage.getItem(EXPLORER_PATH_STORAGE_KEY) || '/');
+        })();
+        explorerInitializationPromise = initializationPromise;
+
+        try {
+          await initializationPromise;
+        } finally {
+          if (explorerInitializationPromise === initializationPromise) {
+            explorerInitializationPromise = null;
           }
-        });
-        fileGridResizeObserver.observe(fileGrid);
+        }
+      }
 
-        if (!(await verifyExplorerAuth())) return;
-        await loadExplorerConfig();
-        startHealthCheck();
-        loadDirectory(sessionStorage.getItem(EXPLORER_PATH_STORAGE_KEY) || '/');
-      });
+      document.addEventListener('DOMContentLoaded', () => initializeExplorer());
 
-      window.addEventListener('beforeunload', cleanupEventListeners);
-      window.addEventListener('pagehide', cleanupEventListeners);
+      window.addEventListener('pagehide', handlePageHide);
+      window.addEventListener('pageshow', event => {
+        if (event.persisted) initializeExplorer(true);
+      });
 
       function showContextMenu(x, y, filePath, isDirectory) {
         currentContextMenuFile = { path: filePath, isDirectory };
 
         const menu = document.getElementById('contextMenu');
         const ctxDownload = document.getElementById('ctxDownload');
+        const isArchive = !isDirectory && isArchiveFile(filePath);
+        const ctxExtract = document.getElementById('ctxExtract');
+        const ctxArchivePreview = document.getElementById('ctxArchivePreview');
 
         if (isDirectory) {
           ctxDownload.classList.add('disabled');
         } else {
           ctxDownload.classList.remove('disabled');
         }
+        ctxExtract.classList.toggle('disabled', !isArchive);
+        ctxArchivePreview.classList.toggle('disabled', !isArchive);
 
         menu.style.left = `${x}px`;
         menu.style.top = `${y}px`;
@@ -1434,6 +1524,15 @@
           case 'delete':
             deletePath(path, path.split('/').pop());
             break;
+          case 'compress':
+            createArchiveFromSelection([path]);
+            break;
+          case 'extract':
+            if (!isDirectory && isArchiveFile(path)) extractArchive(path);
+            break;
+          case 'archivePreview':
+            if (!isDirectory && isArchiveFile(path)) previewArchive(path);
+            break;
         }
 
         hideContextMenu();
@@ -1640,27 +1739,205 @@
         return data;
       }
 
-      async function uploadSelectedFiles(files) {
-        const input = document.activeElement;
-        if (!files || files.length === 0) return;
+      function isArchiveFile(filePath) {
+        const lowerPath = String(filePath || '').toLowerCase();
+        return archiveCapabilities.readExtensions.some(extension => lowerPath.endsWith(`.${String(extension).toLowerCase()}`));
+      }
+
+      async function createArchiveFromSelection(sourceOverride) {
+        const sources = sourceOverride || [...selectedPaths];
+        if (!sources.length) {
+          showToast('请先选择要压缩的文件或文件夹');
+          return;
+        }
+        const defaultName = sources.length === 1 ? sources[0].split('/').pop().replace(/\.[^.]+$/, '') : 'archive';
+        const name = window.prompt('压缩包名称', defaultName);
+        if (name === null || !name.trim()) return;
+        const formats = archiveCapabilities.createFormats;
+        if (!formats.length) {
+          showToast('当前版本未提供压缩格式');
+          return;
+        }
+        const format = window.prompt(`压缩格式（${formats.join(' 或 ')}）`, formats[0]);
+        if (format === null) return;
+        if (!formats.includes(format.trim())) {
+          alert(`仅支持 ${formats.join(' 或 ')}`);
+          return;
+        }
+        await startArchiveJob({
+          operation: 'create',
+          sources,
+          destinationPath: currentPath,
+          name: name.trim(),
+          format: format.trim()
+        });
+      }
+
+      async function extractArchive(filePath) {
+        const confirmed = window.confirm(`将 “${filePath.split('/').pop()}” 解压到当前目录吗？已有同名文件将导致整个操作失败。`);
+        if (!confirmed) return;
+        await startArchiveJob({ operation: 'extract', path: filePath, destinationPath: currentPath });
+      }
+
+      async function startArchiveJob(payload) {
+        const operationName = payload.operation === 'extract' ? '解压' : '压缩';
+        try {
+          const job = await requestJson('/__api/archive/jobs', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+          });
+          currentArchiveJobId = job.id;
+          currentArchiveJobOperation = job.type || payload.operation;
+          monitorArchiveJob(job.id, currentArchiveJobOperation);
+        } catch (error) {
+          alert(`${operationName}无法启动: ${error.message}`);
+        }
+      }
+
+      function archiveOperationName(operation) {
+        return operation === 'extract' ? '解压' : '压缩';
+      }
+
+      async function monitorArchiveJob(id, operation) {
+        const modal = document.getElementById('previewModal');
+        const title = document.getElementById('previewTitle');
+        const body = document.getElementById('previewBody');
+        const operationName = archiveOperationName(operation || currentArchiveJobOperation);
+        title.textContent = `${operationName}任务`;
+        modal.classList.add('active');
+        try {
+          const job = await requestJson(`/__api/archive/jobs/${encodeURIComponent(id)}`);
+          const jobOperationName = archiveOperationName(job.type || operation || currentArchiveJobOperation);
+          title.textContent = `${jobOperationName}任务`;
+          const progress = job.progress || {};
+          body.innerHTML = `
+            <div class="preview-container">
+              <p>状态：${escapeHtml(job.status)}</p>
+              <p>进度：${Number(progress.processedEntries || 0)} / ${Number(progress.totalEntries || 0)} 项</p>
+              ${job.status === 'running' || job.status === 'queued' ? '<button class="toolbar-action-btn danger" onclick="cancelArchiveJob()">取消任务</button>' : ''}
+              ${job.error ? `<p style="color:#d32f2f">${escapeHtml(job.error)}</p>` : ''}
+            </div>
+          `;
+          if (job.status === 'running' || job.status === 'queued') {
+            setTimeout(() => {
+              if (currentArchiveJobId === id) monitorArchiveJob(id, job.type || operation);
+            }, 500);
+            return;
+          }
+          currentArchiveJobId = null;
+          currentArchiveJobOperation = null;
+          if (job.status === 'completed') {
+            showToast(`${jobOperationName}完成`);
+            await loadDirectory(currentPath);
+          }
+        } catch (error) {
+          currentArchiveJobId = null;
+          currentArchiveJobOperation = null;
+          body.innerHTML = `<div class="empty-state"><p>${escapeHtml(operationName)}失败: ${escapeHtml(error.message)}</p></div>`;
+        }
+      }
+
+      async function cancelArchiveJob() {
+        if (!currentArchiveJobId) return;
+        try {
+          await requestJson(`/__api/archive/jobs/${encodeURIComponent(currentArchiveJobId)}`, { method: 'DELETE' });
+          showToast(`正在取消${archiveOperationName(currentArchiveJobOperation)}任务`);
+        } catch (error) {
+          alert(`取消任务失败: ${error.message}`);
+        }
+      }
+
+      async function previewArchive(filePath) {
+        const modal = document.getElementById('previewModal');
+        const title = document.getElementById('previewTitle');
+        const body = document.getElementById('previewBody');
+        title.textContent = `${filePath.split('/').pop()} - 压缩包内容`;
+        body.innerHTML = '<div class="loading"><div class="spinner"></div><p>读取压缩包目录...</p></div>';
+        modal.classList.add('active');
+        try {
+          const preview = await requestJson(`/__api/archive/preview?path=${encodeURIComponent(filePath)}`);
+          const entries = preview.entries || [];
+          body.innerHTML = `
+            <div class="preview-container">
+              <div class="binary-info">${entries.length} 项 · 解压后 ${formatSize(preview.totalSize || 0)} · 包内数据 ${formatSize(preview.totalPackedSize || 0)}</div>
+              <div class="text-preview">${entries
+                .map(entry => {
+                  const depth = entry.path.split('/').length - 1;
+                  const label = `${entry.isDirectory ? '📁' : '📄'} ${entry.path.split('/').pop()}${entry.isDirectory ? '/' : ` (${formatSize(entry.size || 0)})`}`;
+                  return `<div style="padding-left:${depth * 16}px">${escapeHtml(label)}</div>`;
+                })
+                .join('')}</div>
+            </div>
+          `;
+        } catch (error) {
+          body.innerHTML = `<div class="empty-state"><p>读取压缩包失败: ${escapeHtml(error.message)}</p></div>`;
+        }
+      }
+
+      function createUploadBatches(files) {
+        const batches = [];
+        const failed = [];
+        let batch = [];
+        let batchSize = 0;
+
+        Array.from(files).forEach(file => {
+          if (file.size > MAX_UPLOAD_FILE_SIZE) {
+            failed.push({ name: file.webkitRelativePath || file.name, error: '单文件超过 2GB 限制' });
+            return;
+          }
+          const exceedsBatchLimit =
+            batch.length >= MAX_UPLOAD_BATCH_FILE_COUNT || batchSize + file.size > MAX_UPLOAD_BATCH_SIZE;
+          if (batch.length && exceedsBatchLimit) {
+            batches.push(batch);
+            batch = [];
+            batchSize = 0;
+          }
+          batch.push(file);
+          batchSize += file.size;
+        });
+        if (batch.length) batches.push(batch);
+        return { batches, failed };
+      }
+
+      async function uploadBatch(files) {
         const formData = new FormData();
         formData.append('parentPath', currentPath);
-        Array.from(files).forEach(file => {
+        files.forEach(file => {
           formData.append('files', file, file.webkitRelativePath || file.name);
         });
 
+        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 || '上传失败');
+        return result;
+      }
+
+      async function uploadSelectedFiles(files) {
+        const input = document.activeElement;
+        if (!files || files.length === 0) return;
+        const { batches, failed } = createUploadBatches(files);
+        const uploaded = [];
+
         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 || '上传失败');
+          for (let index = 0; index < batches.length; index++) {
+            const batch = batches[index];
+            showToast(`正在上传第 ${index + 1}/${batches.length} 批（${batch.length} 项）`);
+            try {
+              const result = await uploadBatch(batch);
+              uploaded.push(...result.uploaded);
+              failed.push(...result.failed);
+            } catch (error) {
+              batch.forEach(file => failed.push({ name: file.webkitRelativePath || file.name, error: error.message }));
+            }
+          }
+
           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(', ')}`);
+          if (uploaded.length) messages.push(`已上传 ${uploaded.length} 项`);
+          if (failed.length) messages.push(`${failed.length} 项未上传`);
           showToast(messages.join('；'));
-          await loadDirectory(currentPath);
-        } catch (error) {
-          console.error('上传失败:', error);
-          alert(`上传失败: ${error.message}`);
+          if (failed.length) console.warn('上传失败项:', failed);
+          if (uploaded.length) await loadDirectory(currentPath);
         } finally {
           document.getElementById('uploadFilesInput').value = '';
           document.getElementById('uploadFolderInput').value = '';
@@ -1821,11 +2098,16 @@
 
       function updateSelectionToolbar() {
         const deleteSelectedBtn = document.getElementById('deleteSelectedBtn');
+        const archiveSelectedBtn = document.getElementById('archiveSelectedBtn');
         if (!deleteSelectedBtn) return;
 
         const count = selectedPaths.size;
         deleteSelectedBtn.disabled = count === 0;
         deleteSelectedBtn.textContent = count ? `删除选中(${count})` : '删除选中';
+        if (archiveSelectedBtn) {
+          archiveSelectedBtn.disabled = count === 0;
+          archiveSelectedBtn.textContent = count ? `压缩选中(${count})` : '压缩选中';
+        }
       }
 
       function renderBreadcrumb(currentPath) {
@@ -2393,6 +2675,10 @@
         currentImageIndex = findCurrentImageIndex(path);
 
         try {
+          if (isArchiveFile(path)) {
+            await previewArchive(path);
+            return;
+          }
           const ext = path.split('.').pop().toLowerCase();
 
           const fileInfo = await getFileInfo(path);
@@ -2452,7 +2738,9 @@
                 </div>
               </div>
             `;
-            document.getElementById('previewDownloadBtn').addEventListener('click', () => downloadFile(path, path.split('/').pop()));
+            document
+              .getElementById('previewDownloadBtn')
+              .addEventListener('click', () => downloadFile(path, path.split('/').pop()));
           } else {
             if (isLargeFile) {
               body.innerHTML = `
@@ -2468,7 +2756,9 @@
                   </div>
                 </div>
               `;
-              document.getElementById('previewDownloadBtn').addEventListener('click', () => downloadFile(path, path.split('/').pop()));
+              document
+                .getElementById('previewDownloadBtn')
+                .addEventListener('click', () => downloadFile(path, path.split('/').pop()));
             } else {
               const response = await explorerFetch(`/__api/file?path=${encodeURIComponent(path)}`);
               const contentType = response.headers.get('content-type');
@@ -2549,6 +2839,8 @@
 
       function closeModal() {
         document.getElementById('previewModal').classList.remove('active');
+        currentArchiveJobId = null;
+        currentArchiveJobOperation = null;
         releasePreviewObjectUrl();
       }