mock-service-cli 4.4.0 → 4.5.1

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="__FILE_EXPLORER_FAVICON_URL__" />
     <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,12 @@
       let fileGridResizeObserver = null;
       let healthCheckTimer = null;
       let serviceWasUnavailable = false;
+      let explorerInitializationPromise = null;
+      let explorerLifecycleVersion = 0;
+      let currentArchiveJobId = null;
+      let currentArchiveJobOperation = null;
+      let explorerRootId = 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 +1168,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 +1214,12 @@
         }
       }
 
+      function handlePageHide() {
+        explorerLifecycleVersion += 1;
+        explorerInitializationPromise = null;
+        cleanupEventListeners();
+      }
+
       function redirectToLogin() {
         sessionStorage.removeItem(EXPLORER_AUTH_STORAGE_KEY);
         window.location.replace('/__login');
@@ -1201,6 +1251,7 @@
       }
 
       function startHealthCheck() {
+        if (healthCheckTimer) return;
         healthCheckTimer = setInterval(async () => {
           try {
             const response = await explorerFetch('/__api/health');
@@ -1231,6 +1282,7 @@
           const config = await response.json();
           if (!response.ok || config.error) throw new Error(config.error || 'Failed to load configuration');
           editMode = Boolean(config.editMode);
+          explorerRootId = typeof config.rootId === 'string' ? config.rootId : null;
         } catch (error) {
           console.warn('Failed to load file explorer configuration:', error);
           editMode = false;
@@ -1238,6 +1290,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 +1415,90 @@
         }
       }
 
-      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);
+      function getStoredExplorerPath() {
+        try {
+          const stored = JSON.parse(sessionStorage.getItem(EXPLORER_PATH_STORAGE_KEY));
+          if (stored && stored.rootId === explorerRootId && typeof stored.path === 'string' && stored.path.startsWith('/')) {
+            return stored.path;
           }
-        });
-        fileGridResizeObserver.observe(fileGrid);
+        } catch (error) {
+          // Earlier releases stored the path directly; discard that unscoped value.
+        }
+        sessionStorage.removeItem(EXPLORER_PATH_STORAGE_KEY);
+        return '/';
+      }
 
-        if (!(await verifyExplorerAuth())) return;
-        await loadExplorerConfig();
-        startHealthCheck();
-        loadDirectory(sessionStorage.getItem(EXPLORER_PATH_STORAGE_KEY) || '/');
-      });
+      function storeExplorerPath(path) {
+        if (!explorerRootId) return;
+        sessionStorage.setItem(EXPLORER_PATH_STORAGE_KEY, JSON.stringify({ rootId: explorerRootId, path }));
+      }
 
-      window.addEventListener('beforeunload', cleanupEventListeners);
-      window.addEventListener('pagehide', cleanupEventListeners);
+      async function initializeExplorer() {
+        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(getStoredExplorerPath(), { fallbackToRoot: true });
+        })();
+        explorerInitializationPromise = initializationPromise;
+
+        try {
+          await initializationPromise;
+        } finally {
+          if (explorerInitializationPromise === initializationPromise) {
+            explorerInitializationPromise = null;
+          }
+        }
+      }
+
+      document.addEventListener('DOMContentLoaded', () => initializeExplorer());
+
+      window.addEventListener('pagehide', handlePageHide);
+      window.addEventListener('pageshow', event => {
+        if (event.persisted) initializeExplorer();
+      });
 
       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,12 +1544,21 @@
           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();
       }
 
-      async function loadDirectory(path) {
+      async function loadDirectory(path, { fallbackToRoot = false } = {}) {
         const fileGrid = document.getElementById('fileGrid');
         const oldCurrentPath = currentPath;
         const requestId = ++directoryRequestId;
@@ -1463,12 +1582,14 @@
           const data = await response.json();
 
           if (!response.ok || data.error) {
-            throw new Error(data.error);
+            const error = new Error(data.error || 'Failed to load directory');
+            error.status = response.status;
+            throw error;
           }
           if (requestId !== directoryRequestId) return;
 
           currentPath = data.currentPath;
-          sessionStorage.setItem(EXPLORER_PATH_STORAGE_KEY, currentPath);
+          storeExplorerPath(currentPath);
           allFiles = data.files || [];
 
           if (document.getElementById('searchInput')) {
@@ -1481,6 +1602,10 @@
           updateBackButton(data.parentPath);
         } catch (error) {
           if (error.name === 'AbortError' || requestId !== directoryRequestId) return;
+          if (fallbackToRoot && path !== '/' && error.status === 404) {
+            sessionStorage.removeItem(EXPLORER_PATH_STORAGE_KEY);
+            return loadDirectory('/', { fallbackToRoot: false });
+          }
           console.error('Error loading directory:', error);
           currentPath = oldCurrentPath;
           const parentPath = currentPath === '/' ? null : currentPath.substring(0, currentPath.lastIndexOf('/')) || '/';
@@ -1640,27 +1765,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 +2124,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 +2701,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 +2764,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 +2782,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 +2865,8 @@
 
       function closeModal() {
         document.getElementById('previewModal').classList.remove('active');
+        currentArchiveJobId = null;
+        currentArchiveJobOperation = null;
         releasePreviewObjectUrl();
       }