mock-service-cli 4.1.0 → 4.2.0

package/dist/file-explorer.html

@@ -156,6 +156,100 @@
         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;
+      }
+
+      .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;
+      }
+
+      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;
@@ -318,6 +412,11 @@
         background: #f8f9fa;
       }
 
+      .file-item.selected {
+        background: #eef2ff;
+        outline: 1px solid #667eea;
+      }
+
       .list-view .file-item {
         flex-direction: row;
         padding: 6px 12px;
@@ -348,6 +447,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;
@@ -426,6 +536,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 +866,30 @@
             返回上级
           </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')"
+            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 +947,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>
@@ -821,6 +972,8 @@
       let currentContextMenuFile = null;
       let currentImageIndex = -1;
       let imageFiles = [];
+      let selectedPaths = new Set();
+      let editMode = false;
 
       let eventHandlers = [];
       let searchDebounceTimer = null;
@@ -848,6 +1001,34 @@
         eventHandlers = [];
       }
 
+      function initializeEditMode() {
+        editMode = false;
+      }
+
+      function syncEditModeUI() {
+        const body = document.body;
+        const toggle = document.getElementById('editModeToggle');
+
+        body.classList.toggle('editing', editMode);
+        if (toggle) {
+          toggle.checked = editMode;
+        }
+
+        if (!editMode) {
+          selectedPaths.clear();
+          hideContextMenu();
+          currentContextMenuFile = null;
+        }
+
+        updateSelectionToolbar();
+      }
+
+      function toggleEditMode(enabled) {
+        editMode = Boolean(enabled);
+        syncEditModeUI();
+        processAndRenderFiles();
+      }
+
       function handleFileGridClick(e) {
         const actionBtn = e.target.closest('[data-action]');
         if (actionBtn) {
@@ -866,6 +1047,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;
         }
@@ -940,6 +1130,8 @@
       }
 
       document.addEventListener('DOMContentLoaded', () => {
+        initializeEditMode();
+        syncEditModeUI();
         loadDirectory('/');
 
         const fileGrid = document.getElementById('fileGrid');
@@ -1007,6 +1199,12 @@
               downloadFile(path, path.split('/').pop());
             }
             break;
+          case 'rename':
+            renamePath(path, path.split('/').pop());
+            break;
+          case 'delete':
+            deletePath(path, path.split('/').pop());
+            break;
         }
 
         hideContextMenu();
@@ -1022,6 +1220,8 @@
         // 重置所有状态
         allFiles = [];
         currentFiles = [];
+        selectedPaths.clear();
+        updateSelectionToolbar();
 
         // 显示加载状态
         fileGrid.innerHTML = '<div class="loading"><div class="spinner"></div><p>加载中...</p></div>';
@@ -1209,6 +1409,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,6 +1490,85 @@
         document.body.removeChild(a);
       }
 
+      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 })
+          });
+
+          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, parentPath) {
         const breadcrumb = document.getElementById('breadcrumb');
         const parts = currentPath.split('/').filter(Boolean);
@@ -1266,14 +1616,26 @@
           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}`;
+          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>
@@ -1295,10 +1657,25 @@
                       }" 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>