mock-service-cli 4.3.2 → 4.5.0

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,6 +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>
+          <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"
@@ -1019,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"
@@ -1083,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>
@@ -1109,11 +1152,24 @@
       let virtualRenderFrame = null;
       let virtualState = null;
       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';
 
       const LIST_ROW_HEIGHT = 37;
       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;
@@ -1151,6 +1207,60 @@
           fileGridResizeObserver.disconnect();
           fileGridResizeObserver = null;
         }
+        if (healthCheckTimer) {
+          clearInterval(healthCheckTimer);
+          healthCheckTimer = null;
+        }
+      }
+
+      function handlePageHide() {
+        explorerLifecycleVersion += 1;
+        explorerInitializationPromise = null;
+        cleanupEventListeners();
+      }
+
+      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() {
+        if (healthCheckTimer) return;
+        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 +1277,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);
@@ -1177,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) {
@@ -1288,44 +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);
+        }
+      }
 
-        await loadExplorerConfig();
-        loadDirectory('/');
-      });
+      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`;
@@ -1371,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();
@@ -1394,7 +1556,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 +1567,7 @@
           if (requestId !== directoryRequestId) return;
 
           currentPath = data.currentPath;
+          sessionStorage.setItem(EXPLORER_PATH_STORAGE_KEY, currentPath);
           allFiles = data.files || [];
 
           if (document.getElementById('searchInput')) {
@@ -1548,7 +1711,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 +1731,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 +1739,212 @@
         return data;
       }
 
+      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);
+        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 {
+          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 (uploaded.length) messages.push(`已上传 ${uploaded.length} 项`);
+          if (failed.length) messages.push(`${failed.length} 项未上传`);
+          showToast(messages.join('；'));
+          if (failed.length) console.warn('上传失败项:', failed);
+          if (uploaded.length) await loadDirectory(currentPath);
+        } 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,18 +2007,23 @@
         }
       }
 
-      function getDownloadUrl(filePath) {
-        return `/__api/file?path=${encodeURIComponent(filePath)}&download=1`;
-      }
-
-      function downloadFile(filePath, fileName) {
-        const a = document.createElement('a');
-        a.href = getDownloadUrl(filePath);
-        a.download = fileName || '';
-        a.style.display = 'none';
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
+      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) {
@@ -1659,7 +2033,7 @@
         if (!confirmed) return;
 
         try {
-          const response = await fetch('/__api/path', {
+          const response = await explorerFetch('/__api/path', {
             method: 'DELETE',
             headers: {
               'Content-Type': 'application/json'
@@ -1724,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) {
@@ -2296,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);
@@ -2328,7 +2711,6 @@
                   <button class="zoom-btn" onclick="resetImage()">🔄 重置</button>
                 </div>
                 <img
-                  src="/__api/file?path=${encodeURIComponent(path)}"
                   class="image-preview"
                   id="previewImage"
                   alt="Preview"
@@ -2336,8 +2718,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 = getDownloadUrl(path);
             const fileSize = fileInfo ? formatSize(fileInfo.size) : '未知大小';
 
             body.innerHTML = `
@@ -2349,13 +2734,15 @@
                 </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 = getDownloadUrl(path);
               body.innerHTML = `
                 <div class="preview-container">
                   <div class="binary-info">
@@ -2365,12 +2752,15 @@
                   </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')) {
@@ -2449,6 +2839,8 @@
 
       function closeModal() {
         document.getElementById('previewModal').classList.remove('active');
+        currentArchiveJobId = null;
+        currentArchiveJobOperation = null;
         releasePreviewObjectUrl();
       }