mock-service-cli 4.2.0 → 4.3.1

package/dist/file-explorer.html

@@ -11,6 +11,13 @@
         box-sizing: border-box;
       }
 
+      .icon-sprite {
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+      }
+
       body {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -83,6 +90,7 @@
         flex: 1;
         display: flex;
         flex-direction: column;
+        min-height: 0;
       }
 
       .toolbar {
@@ -180,56 +188,6 @@
         cursor: not-allowed;
       }
 
-      .edit-mode-toggle {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 12px;
-        color: #666;
-        user-select: none;
-        white-space: nowrap;
-      }
-
-      .edit-mode-toggle input {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        opacity: 0;
-        pointer-events: none;
-      }
-
-      .edit-mode-switch {
-        width: 38px;
-        height: 20px;
-        background: #d1d5db;
-        border-radius: 999px;
-        position: relative;
-        transition: background 0.2s;
-        flex-shrink: 0;
-        cursor: pointer;
-      }
-
-      .edit-mode-switch::after {
-        content: '';
-        position: absolute;
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        top: 2px;
-        left: 2px;
-        background: #fff;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-        transition: transform 0.2s;
-      }
-
-      .edit-mode-toggle input:checked + .edit-mode-switch {
-        background: #667eea;
-      }
-
-      .edit-mode-toggle input:checked + .edit-mode-switch::after {
-        transform: translateX(18px);
-      }
-
       body:not(.editing) .edit-only {
         display: none !important;
       }
@@ -384,18 +342,36 @@
       }
 
       .file-grid {
-        padding: 8px;
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-        gap: 8px;
+        --list-row-height: 37px;
+        position: relative;
         overflow: auto;
+        flex: 1;
+        min-height: 0;
       }
 
-      .file-grid.list-view {
-        grid-template-columns: 1fr;
-        gap: 0;
-        padding: 4px 0;
-        flex: unset;
+      .virtual-spacer {
+        width: 1px;
+        pointer-events: none;
+      }
+
+      .virtual-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        overflow-anchor: none;
+      }
+
+      .virtual-content.grid-view {
+        display: block;
+      }
+
+      .virtual-content.list-view {
+        display: block;
+      }
+
+      .virtual-content .file-item {
+        position: absolute;
       }
 
       .file-item {
@@ -405,7 +381,11 @@
         padding: 10px 8px;
         border-radius: 6px;
         cursor: pointer;
-        transition: all 0.2s;
+        transition: background-color 0.2s;
+      }
+
+      .grid-view .file-item {
+        height: 124px;
       }
 
       .file-item:hover {
@@ -423,7 +403,7 @@
         border-bottom: 1px solid #f0f0f0;
         border-radius: 0;
         min-height: auto;
-        height: 37px;
+        height: var(--list-row-height);
       }
 
       .file-icon {
@@ -479,10 +459,18 @@
         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;
         font-size: 12px;
+        min-width: 0;
       }
 
       .file-meta {
@@ -491,6 +479,11 @@
       }
       .birthtime {
         padding-right: 4px;
+        display: none;
+      }
+
+      .birthtime.visible {
+        display: inline-block;
       }
 
       .list-view .file-meta {
@@ -499,6 +492,11 @@
         font-size: 10px;
       }
 
+      .date-compact,
+      .more-actions-btn {
+        display: none;
+      }
+
       .hidden-file {
         opacity: 0.6;
       }
@@ -509,7 +507,50 @@
       }
 
       .list-view .action-buttons {
-        display: flex;
+        display: none;
+      }
+
+      .list-view .more-actions-btn {
+        display: inline-flex;
+        flex: 0 0 32px;
+        align-items: center;
+        justify-content: center;
+        align-self: center;
+        width: 32px;
+        height: 28px;
+        margin-left: 8px;
+        padding: 0;
+        border: 1px solid transparent;
+        border-radius: 5px;
+        background: #f1f3f5;
+        color: #555;
+        font-size: 20px;
+        line-height: 1;
+        cursor: pointer;
+        touch-action: manipulation;
+        -webkit-tap-highlight-color: transparent;
+        transition:
+          background-color 120ms ease,
+          border-color 120ms ease,
+          color 120ms ease,
+          transform 120ms ease;
+      }
+
+      .list-view .more-actions-btn:hover {
+        border-color: #d9dce1;
+        background: #e5e7eb;
+        color: #222;
+        transform: scale(1.06);
+      }
+
+      .list-view .more-actions-btn:active {
+        background: #d9dce1;
+        transform: scale(0.92);
+      }
+
+      .list-view .more-actions-btn:focus-visible {
+        outline: 2px solid #667eea;
+        outline-offset: 1px;
       }
 
       .action-btn {
@@ -546,6 +587,90 @@
         color: white;
       }
 
+      @media (max-width: 767px) {
+        .file-grid.list-view {
+          --list-row-height: 48px;
+        }
+
+        .file-grid.list-view.show-birthtime {
+          --list-row-height: 65px;
+        }
+
+        .list-view .file-item {
+          align-items: flex-start;
+          padding: 7px 10px;
+        }
+
+        .list-view .file-icon {
+          flex: 0 0 20px;
+          margin-top: 2px;
+          margin-right: 7px;
+        }
+
+        .list-view .file-select {
+          flex: 0 0 auto;
+          margin: 3px 7px 0 0;
+        }
+
+        .list-view .file-info {
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          align-items: stretch;
+          gap: 3px;
+          min-width: 0;
+        }
+
+        .list-view .file-name {
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .list-view .file-meta {
+          display: flex;
+          width: 100%;
+          gap: 3px;
+          flex-wrap: wrap;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+
+        .list-view .file-meta > span {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .date-full {
+          display: none;
+        }
+
+        .date-compact {
+          display: inline;
+          vertical-align: middle;
+        }
+
+        .list-view .birthtime.visible {
+          flex-basis: 100%;
+          display: block;
+          padding-right: 0;
+        }
+
+        .list-view .action-buttons {
+          display: none !important;
+        }
+
+        .list-view .more-actions-btn {
+          align-self: flex-start;
+          margin: 10px 0 0 6px;
+        }
+
+        .file-grid.list-view.show-birthtime .more-actions-btn {
+          margin-top: 17px;
+        }
+      }
+
       .modal {
         display: none;
         position: fixed;
@@ -851,6 +976,15 @@
     </style>
   </head>
   <body>
+    <svg class="icon-sprite" aria-hidden="true" focusable="false">
+      <symbol id="icon-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+      </symbol>
+      <symbol id="icon-file" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+        <polyline points="14 2 14 8 20 8"></polyline>
+      </symbol>
+    </svg>
     <div class="container">
       <div class="header">
         <h1>📁 文件浏览器</h1>
@@ -866,11 +1000,6 @@
             返回上级
           </button>
           <button class="refresh-btn" onclick="loadDirectory(currentPath)" title="刷新">🔄</button>
-          <label class="edit-mode-toggle" title="启用编辑模式">
-            <input id="editModeToggle" type="checkbox" onchange="toggleEditMode(this.checked)" />
-            <span class="edit-mode-switch"></span>
-            <span class="edit-mode-label">编辑</span>
-          </label>
           <button
             class="toolbar-action-btn edit-only edit-inline"
             onclick="createEntry('directory')"
@@ -967,6 +1096,7 @@
       let showHiddenFiles = true;
       let showBirthtime = false;
       let currentPreviewContent = '';
+      let currentPreviewObjectUrl = null;
       let currentZoom = 1;
       let currentRotation = 0;
       let currentContextMenuFile = null;
@@ -974,6 +1104,16 @@
       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;
@@ -999,20 +1139,22 @@
           element.removeEventListener(event, handler, options);
         });
         eventHandlers = [];
-      }
-
-      function initializeEditMode() {
-        editMode = false;
+        if (virtualRenderFrame) {
+          cancelAnimationFrame(virtualRenderFrame);
+          virtualRenderFrame = null;
+        }
+        if (directoryRequestController) {
+          directoryRequestController.abort();
+          directoryRequestController = null;
+        }
+        if (fileGridResizeObserver) {
+          fileGridResizeObserver.disconnect();
+          fileGridResizeObserver = null;
+        }
       }
 
       function syncEditModeUI() {
-        const body = document.body;
-        const toggle = document.getElementById('editModeToggle');
-
-        body.classList.toggle('editing', editMode);
-        if (toggle) {
-          toggle.checked = editMode;
-        }
+        document.body.classList.toggle('editing', editMode);
 
         if (!editMode) {
           selectedPaths.clear();
@@ -1023,10 +1165,16 @@
         updateSelectionToolbar();
       }
 
-      function toggleEditMode(enabled) {
-        editMode = Boolean(enabled);
+      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();
-        processAndRenderFiles();
       }
 
       function handleFileGridClick(e) {
@@ -1056,6 +1204,12 @@
             case 'toggleSelect':
               toggleSelectedPath(path, actionBtn.checked, actionBtn.closest('.file-item'));
               break;
+            case 'more': {
+              const fileItem = actionBtn.closest('.file-item');
+              const rect = actionBtn.getBoundingClientRect();
+              showContextMenu(rect.right, rect.bottom, fileItem.dataset.path, fileItem.dataset.isDirectory === 'true');
+              break;
+            }
           }
           return;
         }
@@ -1086,6 +1240,11 @@
         hideContextMenu();
       }
 
+      function handleFileGridScroll() {
+        hideContextMenu();
+        scheduleVirtualRender();
+      }
+
       function handleModalClick(e) {
         if (e.target === e.currentTarget) {
           closeModal();
@@ -1129,21 +1288,28 @@
         }
       }
 
-      document.addEventListener('DOMContentLoaded', () => {
-        initializeEditMode();
-        syncEditModeUI();
-        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) {
+            renderFiles(currentFiles, false);
+          }
+        });
+        fileGridResizeObserver.observe(fileGrid);
+
+        await loadExplorerConfig();
+        loadDirectory('/');
       });
 
       window.addEventListener('beforeunload', cleanupEventListeners);
@@ -1211,56 +1377,48 @@
       }
 
       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>`;
@@ -1569,129 +1727,286 @@
         deleteSelectedBtn.textContent = count ? `删除选中(${count})` : '删除选中';
       }
 
-      function renderBreadcrumb(currentPath, parentPath) {
+      function renderBreadcrumb(currentPath) {
         const breadcrumb = document.getElementById('breadcrumb');
         const parts = currentPath.split('/').filter(Boolean);
-
-        let html = '<div class="breadcrumb-item" onclick="loadDirectory(\'/\')">根目录</div>';
-
+        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');
+          fileGrid.classList.toggle('show-birthtime', showBirthtime);
           toggleBirthtimeBtn.style.display = 'inline-block';
         } else {
           toggleBirthtimeBtn.style.display = 'none';
           fileGrid.classList.remove('list-view');
+          fileGrid.classList.remove('show-birthtime');
         }
 
         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 ? getListRowHeight(fileGrid) : GRID_ROW_HEIGHT;
+        const totalRows = Math.ceil(files.length / columnCount);
+        const gridItemWidth = isListView ? null : (fileGrid.clientWidth - 16 - (columnCount - 1) * 8) / 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'}`;
+
+        virtualState = {
+          files,
+          columnCount,
+          rowHeight,
+          gridItemWidth,
+          isListView,
+          spacer,
+          content,
+          itemPool: [],
+          freeItems: [],
+          renderedItems: new Map(),
+          startRow: -1,
+          endRow: -1
+        };
+        fileGrid.replaceChildren(spacer, content);
+        if (resetScroll) fileGrid.scrollTop = 0;
+        renderVirtualWindow();
+      }
 
-        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 selectedClass = selectedPaths.has(file.path) ? 'selected' : '';
-          const selectedAttr = selectedPaths.has(file.path) ? 'checked' : '';
-          const selectLabel = file.isDirectory ? '选择文件夹' : '选择文件';
-
-          const fileItem = document.createElement('div');
-          fileItem.className = `file-item ${hiddenClass} ${selectedClass}`;
-          fileItem.dataset.path = file.path;
-          fileItem.dataset.isDirectory = file.isDirectory;
-
-          if (currentView === 'list') {
-            fileItem.innerHTML = `
-              <input
-                class="file-select edit-only edit-inline-block"
-                type="checkbox"
-                data-action="toggleSelect"
-                data-path="${file.path}"
-                data-filename="${escapeHtml(file.name)}"
-                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="${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>`
-                    : ''
-                }
-                <button class="action-btn rename edit-only edit-inline" data-action="rename" data-path="${file.path}" data-filename="${escapeHtml(
-                  file.name
-                )}" title="重命名">✏️</button>
-                <button class="action-btn delete edit-only edit-inline" data-action="delete" data-path="${file.path}" data-filename="${escapeHtml(
-                  file.name
-                )}" title="删除">🗑️</button>
-              </div>
-            `;
-          } else {
-            fileItem.innerHTML = `
-              <input
-                class="file-select edit-only edit-inline-block"
-                type="checkbox"
-                data-action="toggleSelect"
-                data-path="${file.path}"
-                data-filename="${escapeHtml(file.name)}"
-                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>
-            `;
-          }
+      function scheduleVirtualRender() {
+        if (virtualRenderFrame || !virtualState) return;
+        virtualRenderFrame = requestAnimationFrame(() => {
+          virtualRenderFrame = null;
+          renderVirtualWindow();
+        });
+      }
 
-          fragment.appendChild(fileItem);
+      function getListRowHeight(fileGrid) {
+        const rowHeight = Number.parseFloat(getComputedStyle(fileGrid).getPropertyValue('--list-row-height'));
+        return Number.isFinite(rowHeight) ? rowHeight : LIST_ROW_HEIGHT;
+      }
+
+      function renderVirtualWindow() {
+        if (!virtualState) return;
+        const fileGrid = document.getElementById('fileGrid');
+        const {
+          files,
+          columnCount,
+          rowHeight,
+          gridItemWidth,
+          isListView,
+          content,
+          itemPool,
+          freeItems,
+          renderedItems
+        } = 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;
+        renderedItems.forEach((fileItem, fileIndex) => {
+          if (fileIndex < startIndex || fileIndex >= endIndex) {
+            renderedItems.delete(fileIndex);
+            fileItem.hidden = true;
+            freeItems.push(fileItem);
+          }
         });
 
-        // 清空并一次性更新 DOM
-        fileGrid.innerHTML = '';
-        fileGrid.appendChild(fragment);
+        for (let fileIndex = startIndex; fileIndex < endIndex; fileIndex++) {
+          if (renderedItems.has(fileIndex)) continue;
+
+          let fileItem = freeItems.pop();
+          if (!fileItem) {
+            fileItem = createFileItemElement(isListView);
+            itemPool.push(fileItem);
+            content.appendChild(fileItem);
+          }
+          updateFileItem(fileItem, files[fileIndex]);
+          positionVirtualItem(fileItem, fileIndex, columnCount, rowHeight, gridItemWidth, isListView);
+          fileItem.hidden = false;
+          renderedItems.set(fileIndex, fileItem);
+        }
+      }
+
+      function positionVirtualItem(fileItem, fileIndex, columnCount, rowHeight, gridItemWidth, isListView) {
+        fileItem.style.transform = '';
+        if (isListView) {
+          fileItem.style.left = '0';
+          fileItem.style.right = '0';
+          fileItem.style.top = `${fileIndex * rowHeight}px`;
+          fileItem.style.width = '';
+          return;
+        }
+
+        const row = Math.floor(fileIndex / columnCount);
+        const column = fileIndex % columnCount;
+        fileItem.style.left = `${8 + column * (gridItemWidth + 8)}px`;
+        fileItem.style.right = 'auto';
+        fileItem.style.top = `${8 + row * rowHeight}px`;
+        fileItem.style.width = `${gridItemWidth}px`;
+      }
+
+      function createFileItemElement(isListView) {
+        const fileItem = document.createElement('div');
+        fileItem.className = 'file-item';
+        const select = document.createElement('input');
+        select.className = 'file-select edit-only edit-inline-block';
+        select.type = 'checkbox';
+        select.dataset.action = 'toggleSelect';
+        fileItem.appendChild(select);
+
+        const icon = createFileIconElement();
+        fileItem.appendChild(icon.wrapper);
+
+        const info = document.createElement('div');
+        info.className = 'file-info';
+        const name = document.createElement('div');
+        name.className = 'file-name';
+        info.appendChild(name);
+        const meta = document.createElement('div');
+        meta.className = 'file-meta';
+        const type = document.createElement('span');
+        meta.appendChild(type);
+        info.appendChild(meta);
+        fileItem.appendChild(info);
+
+        const refs = { select, icon, name, type };
+
+        if (isListView) {
+          const mtime = createDateMeta();
+          const birthtime = createDateMeta('birthtime');
+          meta.append(mtime.container, birthtime.container);
+          const more = createActionButton('more-actions-btn', 'more', '更多操作', '⋮');
+          more.setAttribute('aria-label', '更多操作');
+          fileItem.appendChild(more);
+          Object.assign(refs, { mtime, birthtime });
+        }
+
+        fileItem._refs = refs;
+        return fileItem;
+      }
+
+      function createFileIconElement() {
+        const namespace = 'http://www.w3.org/2000/svg';
+        const wrapper = document.createElement('div');
+        wrapper.className = 'file-icon';
+        const svg = document.createElementNS(namespace, 'svg');
+        svg.setAttribute('viewBox', '0 0 24 24');
+        svg.setAttribute('aria-hidden', 'true');
+        const use = document.createElementNS(namespace, 'use');
+        svg.appendChild(use);
+        wrapper.appendChild(svg);
+        return { wrapper, svg, use };
+      }
+
+      function createDateMeta(className = '') {
+        const container = document.createElement('span');
+        if (className) container.className = className;
+        const full = document.createElement('span');
+        full.className = 'date-full';
+        const compact = document.createElement('span');
+        compact.className = 'date-compact';
+        container.append(full, compact);
+        return { container, full, compact };
+      }
+
+      function createActionButton(className, action, title, label) {
+        const button = document.createElement('button');
+        button.className = className;
+        button.dataset.action = action;
+        button.title = title;
+        button.textContent = label;
+        return button;
+      }
+
+      function updateFileItem(fileItem, file) {
+        const refs = fileItem._refs;
+        const view = getFileView(file);
+        const isSelected = selectedPaths.has(file.path);
+        fileItem.className = `file-item${file.isHidden ? ' hidden-file' : ''}${isSelected ? ' selected' : ''}`;
+        fileItem.dataset.path = file.path;
+        fileItem.dataset.isDirectory = file.isDirectory;
+        refs.select.dataset.path = file.path;
+        refs.select.checked = isSelected;
+        refs.select.title = file.isDirectory ? '选择文件夹' : '选择文件';
+        updateFileIcon(refs.icon, view.iconInfo);
+        refs.name.textContent = file.name;
+        refs.type.textContent = view.typeLabel;
+
+        if (!refs.mtime) return;
+
+        refs.mtime.full.textContent = view.mtime;
+        refs.mtime.compact.textContent = view.compactMtime;
+        refs.birthtime.full.textContent = view.birthtime;
+        refs.birthtime.compact.textContent = view.compactBirthtime;
+        refs.birthtime.container.classList.toggle('visible', showBirthtime);
+      }
+
+      function getFileView(file) {
+        if (!file._view) {
+          file._view = {
+            typeLabel: file.isDirectory ? '目录' : formatSize(file.size),
+            mtime: formatDate(file.mtime),
+            compactMtime: formatDate(file.mtime, false),
+            birthtime: formatDate(file.birthtime),
+            compactBirthtime: `创建 ${formatDate(file.birthtime, false)}`,
+            iconInfo: getFileIconInfo(file)
+          };
+        }
+        return file._view;
+      }
+
+      function updateFileIcon(icon, iconInfo) {
+        icon.use.setAttribute('href', iconInfo.symbol);
+        icon.svg.style.color = iconInfo.color;
       }
 
       function handleItemClick(path, isDirectory) {
@@ -1942,7 +2257,7 @@
       }
 
       function renderBinaryPreview(blob, filename) {
-        const url = URL.createObjectURL(blob);
+        currentPreviewObjectUrl = URL.createObjectURL(blob);
         return `
           <div class="preview-container">
             <div class="binary-info">
@@ -1952,7 +2267,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>
         `;
@@ -1964,6 +2279,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');
 
@@ -2129,6 +2445,14 @@
 
       function closeModal() {
         document.getElementById('previewModal').classList.remove('active');
+        releasePreviewObjectUrl();
+      }
+
+      function releasePreviewObjectUrl() {
+        if (currentPreviewObjectUrl) {
+          URL.revokeObjectURL(currentPreviewObjectUrl);
+          currentPreviewObjectUrl = null;
+        }
       }
 
       function goBack() {
@@ -2161,14 +2485,16 @@
         renderFiles(currentFiles);
       }
 
-      function getFileIcon(file) {
+      const fileIconInfoCache = new Map();
+
+      function getFileIconInfo(file) {
         if (file.isDirectory) {
-          return `<svg viewBox="0 0 24 24" fill="none" stroke="#667eea" stroke-width="2">
-                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
-                </svg>`;
+          return { symbol: '#icon-folder', color: '#667eea' };
         }
 
         const ext = file.name.split('.').pop().toLowerCase();
+        const cached = fileIconInfoCache.get(ext);
+        if (cached) return cached;
         const iconColors = {
           js: '#f7df1e',
           json: '#292929',
@@ -2246,12 +2572,9 @@
           webm: '#2196f3'
         };
 
-        const color = iconColors[ext] || '#95a5a6';
-
-        return `<svg viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2">
-                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-                <polyline points="14 2 14 8 20 8"></polyline>
-            </svg>`;
+        const iconInfo = { symbol: '#icon-file', color: iconColors[ext] || '#95a5a6' };
+        fileIconInfoCache.set(ext, iconInfo);
+        return iconInfo;
       }
 
       function formatSize(bytes) {
@@ -2262,9 +2585,15 @@
         return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
       }
 
-      function formatDate(dateStr) {
-        const date = new Date(dateStr);
-        return date.toLocaleString('zh-CN');
+      function formatDate(value, includeSeconds = true) {
+        const date = new Date(value);
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        const hours = String(date.getHours()).padStart(2, '0');
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        const base = `${year}/${month}/${day} ${hours}:${minutes}`;
+        return includeSeconds ? `${base}:${String(date.getSeconds()).padStart(2, '0')}` : base;
       }
 
       function escapeHtml(text) {
@@ -2272,6 +2601,20 @@
         div.textContent = text;
         return div.innerHTML;
       }
+
+      function escapeAttribute(value) {
+        return String(value).replace(
+          /[&<>"']/g,
+          char =>
+            ({
+              '&': '&amp;',
+              '<': '&lt;',
+              '>': '&gt;',
+              '"': '&quot;',
+              "'": '&#39;'
+            })[char]
+        );
+      }
     </script>
   </body>
 </html>