mock-service-cli 4.1.0 → 4.3.0

package/dist/file-explorer.html

@@ -83,6 +83,7 @@
         flex: 1;
         display: flex;
         flex-direction: column;
+        min-height: 0;
       }
 
       .toolbar {
@@ -156,6 +157,50 @@
         background: #e0e0e0;
       }
 
+      .toolbar-action-btn {
+        padding: 6px 10px;
+        background: #f0f0f0;
+        border: none;
+        border-radius: 4px;
+        font-size: 12px;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+
+      .toolbar-action-btn:hover:not(:disabled) {
+        background: #e0e0e0;
+      }
+
+      .toolbar-action-btn.danger:hover:not(:disabled) {
+        background: #dc3545;
+        color: white;
+      }
+
+      .toolbar-action-btn:disabled {
+        opacity: 0.45;
+        cursor: not-allowed;
+      }
+
+      body:not(.editing) .edit-only {
+        display: none !important;
+      }
+
+      body.editing .edit-inline {
+        display: inline-flex !important;
+      }
+
+      body.editing .edit-inline-block {
+        display: inline-block !important;
+      }
+
+      body.editing .edit-flex {
+        display: flex !important;
+      }
+
+      body.editing .edit-block {
+        display: block !important;
+      }
+
       .back-btn {
         padding: 6px 12px;
         background: #f0f0f0;
@@ -290,18 +335,33 @@
       }
 
       .file-grid {
-        padding: 8px;
+        position: relative;
+        overflow: auto;
+        flex: 1;
+        min-height: 0;
+      }
+
+      .virtual-spacer {
+        width: 1px;
+        pointer-events: none;
+      }
+
+      .virtual-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+      }
+
+      .virtual-content.grid-view {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
         gap: 8px;
-        overflow: auto;
+        grid-auto-rows: 124px;
+        padding: 8px;
       }
 
-      .file-grid.list-view {
-        grid-template-columns: 1fr;
-        gap: 0;
-        padding: 4px 0;
-        flex: unset;
+      .virtual-content.list-view {
+        display: block;
       }
 
       .file-item {
@@ -314,10 +374,19 @@
         transition: all 0.2s;
       }
 
+      .grid-view .file-item {
+        height: 124px;
+      }
+
       .file-item:hover {
         background: #f8f9fa;
       }
 
+      .file-item.selected {
+        background: #eef2ff;
+        outline: 1px solid #667eea;
+      }
+
       .list-view .file-item {
         flex-direction: row;
         padding: 6px 12px;
@@ -348,6 +417,17 @@
         height: 100%;
       }
 
+      .file-select {
+        align-self: flex-start;
+        margin-bottom: 6px;
+        cursor: pointer;
+      }
+
+      .list-view .file-select {
+        align-self: center;
+        margin: 0 8px 0 0;
+      }
+
       .file-info {
         text-align: center;
         word-break: break-all;
@@ -369,6 +449,13 @@
         line-height: 1.3;
       }
 
+      .grid-view .file-name {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+      }
+
       .list-view .file-name {
         margin-bottom: 0;
         flex: 1;
@@ -426,6 +513,16 @@
         color: white;
       }
 
+      .action-btn.rename:hover {
+        background: #ffc107;
+        color: #333;
+      }
+
+      .action-btn.delete:hover {
+        background: #dc3545;
+        color: white;
+      }
+
       .modal {
         display: none;
         position: fixed;
@@ -746,6 +843,25 @@
             返回上级
           </button>
           <button class="refresh-btn" onclick="loadDirectory(currentPath)" title="刷新">🔄</button>
+          <button
+            class="toolbar-action-btn edit-only edit-inline"
+            onclick="createEntry('directory')"
+            title="新建文件夹"
+          >
+            新建文件夹
+          </button>
+          <button class="toolbar-action-btn edit-only edit-inline" onclick="createEntry('file')" title="新建文件">
+            新建文件
+          </button>
+          <button
+            class="toolbar-action-btn danger edit-only edit-inline"
+            id="deleteSelectedBtn"
+            onclick="deleteSelectedPaths()"
+            title="删除选中项"
+            disabled
+          >
+            删除选中
+          </button>
           <button
             class="toggle-hidden-btn"
             id="toggleHiddenBtn"
@@ -803,6 +919,13 @@
         🖥️ 在文件管理器中打开
       </div>
       <div class="context-menu-item" id="ctxDownload" onclick="handleContextMenuAction('download')">⬇️ 下载</div>
+      <div class="context-menu-divider edit-only edit-block"></div>
+      <div class="context-menu-item edit-only edit-flex" id="ctxRename" onclick="handleContextMenuAction('rename')">
+        ✏️ 重命名
+      </div>
+      <div class="context-menu-item edit-only edit-flex" id="ctxDelete" onclick="handleContextMenuAction('delete')">
+        🗑️ 删除
+      </div>
     </div>
 
     <script>
@@ -816,11 +939,24 @@
       let showHiddenFiles = true;
       let showBirthtime = false;
       let currentPreviewContent = '';
+      let currentPreviewObjectUrl = null;
       let currentZoom = 1;
       let currentRotation = 0;
       let currentContextMenuFile = null;
       let currentImageIndex = -1;
       let imageFiles = [];
+      let selectedPaths = new Set();
+      let editMode = false;
+      let directoryRequestController = null;
+      let directoryRequestId = 0;
+      let virtualRenderFrame = null;
+      let virtualState = null;
+      let fileGridResizeObserver = null;
+
+      const LIST_ROW_HEIGHT = 37;
+      const GRID_ROW_HEIGHT = 132;
+      const GRID_MIN_ITEM_WIDTH = 100;
+      const VIRTUAL_BUFFER_ROWS = 6;
 
       let eventHandlers = [];
       let searchDebounceTimer = null;
@@ -846,6 +982,42 @@
           element.removeEventListener(event, handler, options);
         });
         eventHandlers = [];
+        if (virtualRenderFrame) {
+          cancelAnimationFrame(virtualRenderFrame);
+          virtualRenderFrame = null;
+        }
+        if (directoryRequestController) {
+          directoryRequestController.abort();
+          directoryRequestController = null;
+        }
+        if (fileGridResizeObserver) {
+          fileGridResizeObserver.disconnect();
+          fileGridResizeObserver = null;
+        }
+      }
+
+      function syncEditModeUI() {
+        document.body.classList.toggle('editing', editMode);
+
+        if (!editMode) {
+          selectedPaths.clear();
+          hideContextMenu();
+          currentContextMenuFile = null;
+        }
+
+        updateSelectionToolbar();
+      }
+
+      async function loadExplorerConfig() {
+        try {
+          const response = await fetch('/__api/config');
+          const config = await response.json();
+          editMode = Boolean(config.editMode);
+        } catch (error) {
+          console.warn('Failed to load file explorer configuration:', error);
+          editMode = false;
+        }
+        syncEditModeUI();
       }
 
       function handleFileGridClick(e) {
@@ -866,6 +1038,15 @@
             case 'download':
               downloadFile(path, filename);
               break;
+            case 'rename':
+              renamePath(path, filename);
+              break;
+            case 'delete':
+              deletePath(path, filename);
+              break;
+            case 'toggleSelect':
+              toggleSelectedPath(path, actionBtn.checked, actionBtn.closest('.file-item'));
+              break;
           }
           return;
         }
@@ -896,6 +1077,11 @@
         hideContextMenu();
       }
 
+      function handleFileGridScroll() {
+        hideContextMenu();
+        scheduleVirtualRender();
+      }
+
       function handleModalClick(e) {
         if (e.target === e.currentTarget) {
           closeModal();
@@ -939,19 +1125,28 @@
         }
       }
 
-      document.addEventListener('DOMContentLoaded', () => {
-        loadDirectory('/');
-
+      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 && currentView === 'grid') {
+            renderFiles(currentFiles, false);
+          }
+        });
+        fileGridResizeObserver.observe(fileGrid);
+
+        await loadExplorerConfig();
+        loadDirectory('/');
       });
 
       window.addEventListener('beforeunload', cleanupEventListeners);
@@ -1007,60 +1202,60 @@
               downloadFile(path, path.split('/').pop());
             }
             break;
+          case 'rename':
+            renamePath(path, path.split('/').pop());
+            break;
+          case 'delete':
+            deletePath(path, path.split('/').pop());
+            break;
         }
 
         hideContextMenu();
       }
 
       async function loadDirectory(path) {
-        // console.log('Loading directory:', path);
         const fileGrid = document.getElementById('fileGrid');
-
-        // 保存旧路径，以便失败时可以回退
         const oldCurrentPath = currentPath;
+        const requestId = ++directoryRequestId;
+
+        if (directoryRequestController) {
+          directoryRequestController.abort();
+        }
+        directoryRequestController = new AbortController();
 
-        // 重置所有状态
         allFiles = [];
         currentFiles = [];
+        selectedPaths.clear();
+        updateSelectionToolbar();
 
-        // 显示加载状态
         fileGrid.innerHTML = '<div class="loading"><div class="spinner"></div><p>加载中...</p></div>';
 
         try {
-          const response = await fetch(`/__api/list?path=${encodeURIComponent(path)}`);
-          // console.log('Response status:', response.status);
-
+          const response = await fetch(`/__api/list?path=${encodeURIComponent(path)}`, {
+            signal: directoryRequestController.signal
+          });
           const data = await response.json();
-          // console.log('API response data:', data);
 
-          if (data.error) {
+          if (!response.ok || data.error) {
             throw new Error(data.error);
           }
+          if (requestId !== directoryRequestId) return;
 
           currentPath = data.currentPath;
           allFiles = data.files || [];
 
-          // console.log('allFiles set to:', allFiles);
-
-          renderBreadcrumb(data.currentPath, data.parentPath);
-
-          // 确保在调用 processAndRenderFiles 之前 allFiles 已经设置好
-          setTimeout(() => {
-            processAndRenderFiles();
-          }, 10);
-
-          updateBackButton(data.parentPath);
-
-          // 清空搜索框
           if (document.getElementById('searchInput')) {
             document.getElementById('searchInput').value = '';
           }
           searchQuery = '';
+
+          renderBreadcrumb(data.currentPath, data.parentPath);
+          processAndRenderFiles();
+          updateBackButton(data.parentPath);
         } catch (error) {
+          if (error.name === 'AbortError' || requestId !== directoryRequestId) return;
           console.error('Error loading directory:', error);
-          // 回退到旧路径
           currentPath = oldCurrentPath;
-          // 计算旧路径的父路径
           const parentPath = currentPath === '/' ? null : currentPath.substring(0, currentPath.lastIndexOf('/')) || '/';
           updateBackButton(parentPath);
           fileGrid.innerHTML = `<div class="empty-state"><p>错误: ${error.message}</p></div>`;
@@ -1209,6 +1404,77 @@
         }
       }
 
+      async function requestJson(url, options) {
+        const response = await fetch(url, options);
+        const data = await response.json();
+        if (!response.ok || data.error) {
+          throw new Error(data.error || '请求失败');
+        }
+        return data;
+      }
+
+      async function createEntry(type) {
+        const label = type === 'directory' ? '文件夹' : '文件';
+        const name = window.prompt(`请输入${label}名称`);
+        if (name === null) return;
+
+        const trimmedName = name.trim();
+        if (!trimmedName) {
+          alert(`${label}名称不能为空`);
+          return;
+        }
+
+        try {
+          await requestJson('/__api/path', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+              parentPath: currentPath,
+              name: trimmedName,
+              type
+            })
+          });
+
+          showToast(`新建${label}成功`);
+          await loadDirectory(currentPath);
+        } catch (error) {
+          console.error(`新建${label}失败:`, error);
+          alert(`新建${label}失败: ` + error.message);
+        }
+      }
+
+      async function renamePath(filePath, fileName) {
+        const nextName = window.prompt('请输入新名称', fileName || filePath.split('/').pop());
+        if (nextName === null) return;
+
+        const trimmedName = nextName.trim();
+        if (!trimmedName) {
+          alert('名称不能为空');
+          return;
+        }
+
+        try {
+          await requestJson('/__api/path', {
+            method: 'PATCH',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+              path: filePath,
+              name: trimmedName
+            })
+          });
+
+          showToast('重命名成功');
+          await loadDirectory(currentPath);
+        } catch (error) {
+          console.error('重命名失败:', error);
+          alert('重命名失败: ' + error.message);
+        }
+      }
+
       function downloadFile(filePath, fileName) {
         const url = `/__api/file?path=${encodeURIComponent(filePath)}`;
         const a = document.createElement('a');
@@ -1219,32 +1485,119 @@
         document.body.removeChild(a);
       }
 
-      function renderBreadcrumb(currentPath, parentPath) {
-        const breadcrumb = document.getElementById('breadcrumb');
-        const parts = currentPath.split('/').filter(Boolean);
+      async function deletePath(filePath, fileName) {
+        const label = fileName || filePath.split('/').pop() || filePath;
+        const confirmed = window.confirm(`确定要删除 "${label}" 吗？此操作不可恢复。`);
+
+        if (!confirmed) return;
+
+        try {
+          const response = await fetch('/__api/path', {
+            method: 'DELETE',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ path: filePath })
+          });
+
+          const data = await response.json();
+          if (!response.ok || !data.success) {
+            throw new Error(data.error || '删除失败');
+          }
+
+          closeModal();
+          showToast('删除成功');
+          await loadDirectory(currentPath);
+        } catch (error) {
+          console.error('删除失败:', error);
+          alert('删除失败: ' + error.message);
+        }
+      }
+
+      async function deleteSelectedPaths() {
+        const paths = Array.from(selectedPaths);
+        if (paths.length === 0) return;
+
+        const confirmed = window.confirm(`确定要删除选中的 ${paths.length} 项吗？此操作不可恢复。`);
+        if (!confirmed) return;
+
+        try {
+          await requestJson('/__api/paths', {
+            method: 'DELETE',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ paths })
+          });
 
-        let html = '<div class="breadcrumb-item" onclick="loadDirectory(\'/\')">根目录</div>';
+          selectedPaths.clear();
+          updateSelectionToolbar();
+          showToast('批量删除成功');
+          await loadDirectory(currentPath);
+        } catch (error) {
+          console.error('批量删除失败:', error);
+          alert('批量删除失败: ' + error.message);
+          await loadDirectory(currentPath);
+        }
+      }
 
+      function toggleSelectedPath(filePath, checked, fileItem) {
+        if (checked) {
+          selectedPaths.add(filePath);
+        } else {
+          selectedPaths.delete(filePath);
+        }
+
+        if (fileItem) {
+          fileItem.classList.toggle('selected', checked);
+        }
+
+        updateSelectionToolbar();
+      }
+
+      function updateSelectionToolbar() {
+        const deleteSelectedBtn = document.getElementById('deleteSelectedBtn');
+        if (!deleteSelectedBtn) return;
+
+        const count = selectedPaths.size;
+        deleteSelectedBtn.disabled = count === 0;
+        deleteSelectedBtn.textContent = count ? `删除选中(${count})` : '删除选中';
+      }
+
+      function renderBreadcrumb(currentPath) {
+        const breadcrumb = document.getElementById('breadcrumb');
+        const parts = currentPath.split('/').filter(Boolean);
+        const fragment = document.createDocumentFragment();
+        const root = document.createElement('div');
+        root.className = 'breadcrumb-item';
+        root.textContent = '根目录';
+        root.addEventListener('click', () => loadDirectory('/'));
+        fragment.appendChild(root);
         let current = '';
         parts.forEach((part, index) => {
           current += '/' + part;
           const isLast = index === parts.length - 1;
-          html += '<span class="breadcrumb-separator">/</span>';
+          const separator = document.createElement('span');
+          separator.className = 'breadcrumb-separator';
+          separator.textContent = '/';
+          fragment.appendChild(separator);
+          const item = document.createElement('div');
+          item.className = `breadcrumb-item${isLast ? ' current' : ''}`;
+          item.textContent = part;
           if (isLast) {
-            html += `<div class="breadcrumb-item current">${escapeHtml(part)}</div>`;
           } else {
-            html += `<div class="breadcrumb-item" onclick="loadDirectory('${current}')">${escapeHtml(part)}</div>`;
+            const targetPath = current;
+            item.addEventListener('click', () => loadDirectory(targetPath));
           }
+          fragment.appendChild(item);
         });
-
-        breadcrumb.innerHTML = html;
+        breadcrumb.replaceChildren(fragment);
       }
 
-      function renderFiles(files) {
+      function renderFiles(files, resetScroll = true) {
         const fileGrid = document.getElementById('fileGrid');
         const toggleBirthtimeBtn = document.getElementById('toggleBirthtimeBtn');
 
-        // 确保视图类名正确
         if (currentView === 'list') {
           fileGrid.classList.add('list-view');
           toggleBirthtimeBtn.style.display = 'inline-block';
@@ -1254,67 +1607,99 @@
         }
 
         if (!files || files.length === 0) {
+          virtualState = null;
           fileGrid.innerHTML = '<div class="empty-state"><p>该目录为空</p></div>';
           return;
         }
 
-        const fragment = document.createDocumentFragment();
+        const isListView = currentView === 'list';
+        const columnCount = isListView
+          ? 1
+          : Math.max(1, Math.floor((Math.max(fileGrid.clientWidth, GRID_MIN_ITEM_WIDTH + 16) - 8) / (GRID_MIN_ITEM_WIDTH + 8)));
+        const rowHeight = isListView ? LIST_ROW_HEIGHT : GRID_ROW_HEIGHT;
+        const totalRows = Math.ceil(files.length / columnCount);
+        const spacer = document.createElement('div');
+        spacer.className = 'virtual-spacer';
+        spacer.style.height = `${totalRows * rowHeight + (isListView ? 0 : 8)}px`;
+        const content = document.createElement('div');
+        content.className = `virtual-content ${isListView ? 'list-view' : 'grid-view'}`;
+        if (!isListView) {
+          content.style.gridTemplateColumns = `repeat(${columnCount}, minmax(${GRID_MIN_ITEM_WIDTH}px, 1fr))`;
+        }
 
-        files.forEach(file => {
-          const icon = getFileIcon(file);
-          const size = formatSize(file.size);
-          const mtime = formatDate(file.mtime);
-          const birthtime = formatDate(file.birthtime);
-          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') {
-            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>
-                  <span class="birthtime" style="display: ${showBirthtime ? 'inline-block' : 'none'};">${birthtime}</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 {
-            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>
-            `;
-          }
+        virtualState = { files, columnCount, rowHeight, isListView, spacer, content, startRow: -1, endRow: -1 };
+        fileGrid.replaceChildren(spacer, content);
+        if (resetScroll) fileGrid.scrollTop = 0;
+        renderVirtualWindow();
+      }
 
-          fragment.appendChild(fileItem);
+      function scheduleVirtualRender() {
+        if (virtualRenderFrame || !virtualState) return;
+        virtualRenderFrame = requestAnimationFrame(() => {
+          virtualRenderFrame = null;
+          renderVirtualWindow();
         });
+      }
+
+      function renderVirtualWindow() {
+        if (!virtualState) return;
+        const fileGrid = document.getElementById('fileGrid');
+        const { files, columnCount, rowHeight, isListView, content } = virtualState;
+        const firstVisibleRow = Math.floor(fileGrid.scrollTop / rowHeight);
+        const visibleRows = Math.ceil(fileGrid.clientHeight / rowHeight);
+        const startRow = Math.max(0, firstVisibleRow - VIRTUAL_BUFFER_ROWS);
+        const endRow = Math.min(Math.ceil(files.length / columnCount), firstVisibleRow + visibleRows + VIRTUAL_BUFFER_ROWS);
+        const startIndex = startRow * columnCount;
+        const endIndex = Math.min(files.length, endRow * columnCount);
+
+        if (virtualState.startRow === startRow && virtualState.endRow === endRow) return;
+        virtualState.startRow = startRow;
+        virtualState.endRow = endRow;
+        const fragment = document.createDocumentFragment();
 
-        // 清空并一次性更新 DOM
-        fileGrid.innerHTML = '';
-        fileGrid.appendChild(fragment);
+        for (let index = startIndex; index < endIndex; index++) {
+          fragment.appendChild(createFileItem(files[index], isListView));
+        }
+
+        content.style.transform = `translateY(${startRow * rowHeight}px)`;
+        content.replaceChildren(fragment);
+      }
+
+      function createFileItem(file, isListView) {
+        const icon = getFileIcon(file);
+        const size = formatSize(file.size);
+        const mtime = formatDate(file.mtime);
+        const birthtime = formatDate(file.birthtime);
+        const hiddenClass = file.isHidden ? 'hidden-file' : '';
+        const selectedClass = selectedPaths.has(file.path) ? 'selected' : '';
+        const selectedAttr = selectedPaths.has(file.path) ? 'checked' : '';
+        const selectLabel = file.isDirectory ? '选择文件夹' : '选择文件';
+        const pathAttr = escapeAttribute(file.path);
+        const nameAttr = escapeAttribute(file.name);
+        const fileItem = document.createElement('div');
+        fileItem.className = `file-item ${hiddenClass} ${selectedClass}`;
+        fileItem.dataset.path = file.path;
+        fileItem.dataset.isDirectory = file.isDirectory;
+
+        if (isListView) {
+          fileItem.innerHTML = `
+            <input class="file-select edit-only edit-inline-block" type="checkbox" data-action="toggleSelect" data-path="${pathAttr}" title="${selectLabel}" ${selectedAttr} />
+            <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><span class="birthtime" style="display: ${showBirthtime ? 'inline-block' : 'none'};">${birthtime}</span></div></div>
+            <div class="action-buttons">
+              <button class="copy-btn" data-action="copyPath" data-path="${pathAttr}" title="复制路径">📋</button>
+              <button class="action-btn open" data-action="openInExplorer" data-path="${pathAttr}" title="在文件管理器中打开">📂</button>
+              ${!file.isDirectory ? `<button class="action-btn download" data-action="download" data-path="${pathAttr}" data-filename="${nameAttr}" title="下载">⬇️</button>` : ''}
+              <button class="action-btn rename edit-only edit-inline" data-action="rename" data-path="${pathAttr}" data-filename="${nameAttr}" title="重命名">✏️</button>
+              <button class="action-btn delete edit-only edit-inline" data-action="delete" data-path="${pathAttr}" data-filename="${nameAttr}" title="删除">🗑️</button>
+            </div>`;
+        } else {
+          fileItem.innerHTML = `
+            <input class="file-select edit-only edit-inline-block" type="checkbox" data-action="toggleSelect" data-path="${pathAttr}" title="${selectLabel}" ${selectedAttr} />
+            <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>`;
+        }
+        return fileItem;
       }
 
       function handleItemClick(path, isDirectory) {
@@ -1565,7 +1950,7 @@
       }
 
       function renderBinaryPreview(blob, filename) {
-        const url = URL.createObjectURL(blob);
+        currentPreviewObjectUrl = URL.createObjectURL(blob);
         return `
           <div class="preview-container">
             <div class="binary-info">
@@ -1575,7 +1960,7 @@
             </div>
             <div class="empty-state">
               <p>该文件类型暂不支持预览</p>
-              <p><a href="${url}" download="${filename}">点击下载</a></p>
+              <p><a href="${currentPreviewObjectUrl}" download="${escapeAttribute(filename)}">点击下载</a></p>
             </div>
           </div>
         `;
@@ -1587,6 +1972,7 @@
         const body = document.getElementById('previewBody');
 
         title.textContent = path.split('/').pop();
+        releasePreviewObjectUrl();
         body.innerHTML = '<div class="loading"><div class="spinner"></div><p>加载中...</p></div>';
         modal.classList.add('active');
 
@@ -1752,6 +2138,14 @@
 
       function closeModal() {
         document.getElementById('previewModal').classList.remove('active');
+        releasePreviewObjectUrl();
+      }
+
+      function releasePreviewObjectUrl() {
+        if (currentPreviewObjectUrl) {
+          URL.revokeObjectURL(currentPreviewObjectUrl);
+          currentPreviewObjectUrl = null;
+        }
       }
 
       function goBack() {
@@ -1895,6 +2289,16 @@
         div.textContent = text;
         return div.innerHTML;
       }
+
+      function escapeAttribute(value) {
+        return String(value).replace(/[&<>"']/g, char => ({
+          '&': '&amp;',
+          '<': '&lt;',
+          '>': '&gt;',
+          '"': '&quot;',
+          "'": '&#39;'
+        })[char]);
+      }
     </script>
   </body>
 </html>