update

2025-04-21 20:22:26 +08:00
parent f49b735290
commit 1864c87b78
3 changed files with 384 additions and 363 deletions
@@ -0,0 +1,340 @@
+import { ref, type Ref } from 'vue';
+import type { FileListItem } from '../../types/sftp.types'; // 确保路径正确
+
+// 定义 Composable 的输入参数类型
+export interface UseFileManagerDragAndDropOptions {
+  // 响应式引用
+  isConnected: Ref<boolean>;
+  currentPath: Ref<string>;
+  fileListContainerRef: Ref<HTMLDivElement | null>; // 文件列表容器的引用
+  selectedItems: Ref<Set<string>>; // 当前选中的项目集合
+  fileList: Ref<Readonly<FileListItem[]>>; // 完整的文件列表 (用于查找选中项的对象)
+
+  // 函数依赖
+  joinPath: (base: string, target: string) => string; // 路径拼接函数
+  onFileUpload: (file: File) => void; // 触发文件上传的回调
+  onItemMove: (sourceItem: FileListItem, newFullPath: string) => void; // 触发文件/文件夹移动的回调
+}
+
+export function useFileManagerDragAndDrop(options: UseFileManagerDragAndDropOptions) {
+  const {
+    isConnected,
+    currentPath,
+    fileListContainerRef,
+    joinPath,
+    onFileUpload,
+    onItemMove,
+    selectedItems, // 获取传入的 selectedItems
+    fileList,      // 获取传入的 fileList
+  } = options;
+
+  // --- 拖放状态 Refs ---
+  const isDraggingOver = ref(false); // 是否有文件拖拽悬停在容器上 (用于外部文件)
+  const draggedItem = ref<FileListItem | null>(null); // 内部拖拽时，被拖拽的项
+  const dragOverTarget = ref<string | null>(null); // 内部/外部拖拽时，悬停的目标文件夹名称 (用于行高亮)
+  const scrollIntervalId = ref<number | null>(null); // 自动滚动计时器 ID
+
+  // --- 自动滚动常量 ---
+  const SCROLL_ZONE_HEIGHT = 50; // px
+  const SCROLL_SPEED = 10; // px per interval
+
+  // --- 辅助函数：停止自动滚动 ---
+  const stopAutoScroll = () => {
+    if (scrollIntervalId.value !== null) {
+      clearInterval(scrollIntervalId.value);
+      scrollIntervalId.value = null;
+    }
+  };
+
+  // --- 事件处理函数 ---
+  const handleDragEnter = (event: DragEvent) => {
+     if (isConnected.value && event.dataTransfer?.types.includes('Files')) {
+        isDraggingOver.value = true;
+    }
+  };
+
+  const handleDragOver = (event: DragEvent) => {
+    event.preventDefault(); // 必须阻止默认行为以允许 drop
+    const isExternalFileDrag = event.dataTransfer?.types.includes('Files') ?? false;
+    const isInternalDrag = !!draggedItem.value;
+
+    let effect: 'copy' | 'move' | 'none' = 'none';
+    let currentTargetFilename: string | null = null;
+    let highlightContainer = false;
+
+    const targetElement = event.target as HTMLElement;
+    const targetRow = targetElement.closest('tr.file-row');
+    const targetFilename = (targetRow instanceof HTMLElement) ? targetRow.dataset.filename : undefined;
+    const targetIsFolder = targetRow?.classList.contains('folder-row');
+
+    if (isConnected.value) {
+        if (isExternalFileDrag) {
+            effect = 'copy';
+            highlightContainer = true;
+            if (targetIsFolder && targetFilename && targetFilename !== '..') {
+                currentTargetFilename = targetFilename;
+            } else {
+                currentTargetFilename = null;
+            }
+        } else if (isInternalDrag && draggedItem.value) {
+            highlightContainer = false;
+            if (targetIsFolder && targetFilename && targetFilename !== draggedItem.value.filename) {
+                effect = 'move';
+                currentTargetFilename = targetFilename;
+            } else {
+                effect = 'none';
+                currentTargetFilename = null;
+            }
+        } else {
+            effect = 'none';
+            currentTargetFilename = null;
+            highlightContainer = false;
+        }
+    } else {
+        effect = 'none';
+        currentTargetFilename = null;
+        highlightContainer = false;
+    }
+
+    if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = effect;
+    }
+    isDraggingOver.value = highlightContainer;
+    dragOverTarget.value = currentTargetFilename;
+
+    // --- 处理自动滚动 ---
+    const container = fileListContainerRef.value;
+    if (container && (isExternalFileDrag || isInternalDrag) && effect !== 'none') {
+        const rect = container.getBoundingClientRect();
+        const mouseY = event.clientY - rect.top;
+
+        if (mouseY < SCROLL_ZONE_HEIGHT) {
+            if (scrollIntervalId.value === null) {
+                scrollIntervalId.value = window.setInterval(() => {
+                    if (container.scrollTop > 0) {
+                        container.scrollTop -= SCROLL_SPEED;
+                    } else {
+                        stopAutoScroll();
+                    }
+                }, 30);
+            }
+        } else if (mouseY > container.clientHeight - SCROLL_ZONE_HEIGHT) {
+            if (scrollIntervalId.value === null) {
+                scrollIntervalId.value = window.setInterval(() => {
+                    if (container.scrollTop < container.scrollHeight - container.clientHeight) {
+                        container.scrollTop += SCROLL_SPEED;
+                    } else {
+                        stopAutoScroll();
+                    }
+                }, 30);
+            }
+        } else {
+            stopAutoScroll();
+        }
+    } else {
+         stopAutoScroll();
+    }
+  };
+
+  const handleDragLeave = (event: DragEvent) => {
+     const target = event.relatedTarget as Node | null;
+    const container = (event.currentTarget as HTMLElement);
+    if (!target || !container.contains(target)) {
+       isDraggingOver.value = false;
+       dragOverTarget.value = null;
+       stopAutoScroll();
+    }
+  };
+
+  const handleDrop = (event: DragEvent) => {
+    const wasDraggingOver = isDraggingOver.value;
+    const currentDragTarget = dragOverTarget.value;
+    isDraggingOver.value = false;
+    dragOverTarget.value = null;
+    stopAutoScroll();
+
+    const files = event.dataTransfer?.files;
+    if (!files || files.length === 0 || !isConnected.value) {
+        if (draggedItem.value) draggedItem.value = null; // 清理内部拖拽状态
+        return;
+    }
+    // 检查放置目标是否有效 (由 handleDragOver 决定)
+    // 对于外部文件，要么容器高亮 (wasDraggingOver)，要么行高亮 (currentDragTarget)
+    if (!wasDraggingOver && !currentDragTarget) {
+         console.log(`[DragDrop] Drop ignored: Drop target was not valid according to handleDragOver.`);
+         return;
+    }
+
+
+    const fileListArray = Array.from(files);
+    let targetFolderPath = currentPath.value; // 默认上传到当前目录
+
+    // 如果是放置在特定子文件夹行上
+    if (currentDragTarget && currentDragTarget !== '..') {
+        targetFolderPath = joinPath(currentPath.value, currentDragTarget);
+        console.log(`[DragDrop] Dropped ${fileListArray.length} external files onto folder '${currentDragTarget}'. Uploading to: ${targetFolderPath}`);
+    } else {
+        console.log(`[DragDrop] Dropped ${fileListArray.length} external files onto current path '${currentPath.value}'.`);
+    }
+
+    // 注意：原始代码中 startFileUpload 没有使用 targetFolderPath，这里暂时保持一致
+    // 如果需要上传到子目录，需要修改 useFileUploader 或此处的调用方式
+    fileListArray.forEach(onFileUpload);
+    draggedItem.value = null; // 确保清理内部拖拽状态
+  };
+
+  const handleDragStart = (item: FileListItem) => {
+    if (item.filename === '..') return;
+    // console.log(`[DragDrop] Drag Start: ${item.filename}`);
+    draggedItem.value = item;
+  };
+
+  const handleDragEnd = () => {
+    // console.log(`[DragDrop] Drag End`);
+    draggedItem.value = null;
+    dragOverTarget.value = null;
+    stopAutoScroll();
+    // 最好由 CSS :active 或其他状态处理，但作为后备
+    document.querySelectorAll('.file-row.drop-target').forEach(el => el.classList.remove('drop-target'));
+  };
+
+  const handleDragOverRow = (targetItem: FileListItem, event: DragEvent) => {
+     event.preventDefault(); // 允许 drop
+    // 内部拖拽逻辑: 只能拖拽非 '..' 项，目标必须是文件夹或 '..'，且不能是自身
+    if (!draggedItem.value || draggedItem.value.filename === '..' || (targetItem.filename !== '..' && (!targetItem.attrs.isDirectory || draggedItem.value.filename === targetItem.filename))) {
+        if (event.dataTransfer) event.dataTransfer.dropEffect = 'none';
+        dragOverTarget.value = null; // 清除可能存在的旧目标
+        return;
+    }
+    // 设置放置效果为 'move' 并记录目标
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
+    dragOverTarget.value = targetItem.filename;
+  };
+
+  const handleDragLeaveRow = (targetItem: FileListItem) => {
+    // 只有当鼠标离开当前高亮的目标行时才清除高亮状态
+    if (dragOverTarget.value === targetItem.filename) {
+       dragOverTarget.value = null;
+   }
+  };
+
+  const handleDropOnRow = (targetItem: FileListItem, event: DragEvent) => {
+    event.preventDefault();
+    // 检查是否是外部文件拖拽 (dataTransfer.files 存在)
+    const files = event.dataTransfer?.files;
+    if (files && files.length > 0) {
+        // 如果是外部文件拖拽，不阻止冒泡，让父容器的 handleDrop 处理上传
+        // console.log(`[DragDrop] External file drop detected on row, letting parent handle.`);
+        // 不需要清除 draggedItem.value，因为外部拖拽时它应该为 null
+        // dragOverTarget.value = null; // 清除悬停状态 (父容器 handleDrop 会处理)
+        return; // 让事件冒泡到父 div 的 handleDrop
+    }
+
+    // --- 以下是处理内部文件移动的逻辑 ---
+    event.stopPropagation(); // 仅在处理内部移动时阻止冒泡
+    const sourceItem = draggedItem.value;
+    const currentDragOverTarget = dragOverTarget.value; // 保存当前目标，然后清除
+    dragOverTarget.value = null; // 清除悬停状态
+
+    // 验证内部拖放操作的有效性
+    if (!sourceItem || sourceItem.filename === '..' || (targetItem.filename !== '..' && !targetItem.attrs.isDirectory) || sourceItem.filename === targetItem.filename || targetItem.filename !== currentDragOverTarget) {
+        // console.log(`[DragDrop] Internal drop on row ignored: Invalid target, source, or drop occurred outside the intended target row. Source: ${sourceItem?.filename}, Target: ${targetItem.filename}, Drop Target: ${currentDragOverTarget}`);
+        if (sourceItem) draggedItem.value = null; // 清理拖拽状态
+        return;
+    }
+
+    // --- 计算路径 ---
+    const sourceFullPath = joinPath(currentPath.value, sourceItem.filename);
+    let targetDirectoryFullPath: string;
+
+    if (targetItem.filename === '..') {
+        const current = currentPath.value;
+        if (current === '/') { // 不能从根目录移动到父目录
+             // console.warn(`[DragDrop] Cannot move item from root to its parent.`);
+             draggedItem.value = null;
+             return;
+        }
+        const lastSlashIndex = current.lastIndexOf('/');
+        targetDirectoryFullPath = lastSlashIndex <= 0 ? '/' : current.substring(0, lastSlashIndex);
+        if (!targetDirectoryFullPath) targetDirectoryFullPath = '/'; // 处理根目录下的文件/文件夹
+    } else {
+        // 移动到子目录
+        targetDirectoryFullPath = joinPath(currentPath.value, targetItem.filename);
+    }
+
+    const newFullPath = joinPath(targetDirectoryFullPath, sourceItem.filename);
+
+    // 检查源路径和计算出的目标路径是否相同
+    if (sourceFullPath === newFullPath) {
+        // console.warn(`[DragDrop] Source and destination paths are the same.`);
+        draggedItem.value = null;
+        return;
+    }
+
+    // --- 调用 SFTP 操作 (处理单选/多选) ---
+    const itemsToMove: FileListItem[] = [];
+    // 检查被拖拽的项是否在选区内
+    if (selectedItems.value.has(sourceItem.filename)) {
+        // 多选拖拽：移动所有选中的项
+        console.log(`[DragDrop] Multi-item drop detected. Moving ${selectedItems.value.size} selected items.`);
+        selectedItems.value.forEach(filename => {
+            // 从完整文件列表中查找对应的 FileListItem 对象
+            const itemToMove = fileList.value.find(f => f.filename === filename);
+            if (itemToMove && itemToMove.filename !== '..') { // 确保找到且不是 '..'
+                 // 检查目标路径是否与源路径相同 (对于每个项目)
+                 const currentItemSourcePath = joinPath(currentPath.value, itemToMove.filename);
+                 const currentItemNewPath = joinPath(targetDirectoryFullPath, itemToMove.filename);
+                 if (currentItemSourcePath !== currentItemNewPath) {
+                     itemsToMove.push(itemToMove);
+                 } else {
+                     console.warn(`[DragDrop] Skipping move for ${itemToMove.filename}: Source and destination paths are the same.`);
+                 }
+            }
+        });
+        // 清空选择是一个好习惯，可以在移动成功后进行，但这里为简化暂时不清空
+        // clearSelection(); // 需要从 useFileManagerSelection 引入或作为参数传入
+    } else {
+        // 单选拖拽 (拖拽了一个未选中的项)
+        console.log(`[DragDrop] Single unselected item drop detected. Moving ${sourceItem.filename}.`);
+        // 检查目标路径是否与源路径相同
+        if (sourceFullPath !== newFullPath) {
+            itemsToMove.push(sourceItem);
+        } else {
+             console.warn(`[DragDrop] Skipping move for ${sourceItem.filename}: Source and destination paths are the same.`);
+        }
+    }
+
+    // 统一执行移动操作
+    if (itemsToMove.length > 0) {
+        console.log(`[DragDrop] Executing move for ${itemsToMove.length} items to target directory: ${targetDirectoryFullPath}`);
+        itemsToMove.forEach(item => {
+            const itemNewFullPath = joinPath(targetDirectoryFullPath, item.filename);
+            console.log(`[DragDrop]   - Moving '${item.filename}' to '${itemNewFullPath}'`);
+            onItemMove(item, itemNewFullPath); // 调用移动回调
+        });
+    } else {
+        console.log("[DragDrop] No valid items to move.");
+    }
+
+    // 清理拖拽状态
+    draggedItem.value = null;
+  };
+
+
+  // --- 返回状态和处理函数 ---
+  return {
+    isDraggingOver,
+    dragOverTarget,
+    draggedItem, // 需要暴露以供 handleDragOverRow 等函数内部判断
+    // --- 事件处理器 ---
+    handleDragEnter,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    handleDragStart,
+    handleDragEnd,
+    handleDragOverRow,
+    handleDragLeaveRow,
+    handleDropOnRow,
+  };
+}
@@ -17,15 +17,12 @@ export function useFileManagerSelection(options: UseFileManagerSelectionOptions)
  const lastClickedIndex = ref(-1); // 索引相对于 displayedFileList

  const handleItemClick = (event: MouseEvent, item: FileListItem) => {
-    console.log(`[Selection] handleItemClick called for item: ${item.filename}`, { event, item });
    let shouldPerformAction = false; // 初始化标志
    const ctrlOrMeta = event.ctrlKey || event.metaKey;
    const shift = event.shiftKey;
-    console.log(`[Selection] Modifiers: Ctrl/Meta=${ctrlOrMeta}, Shift=${shift}`);

    // 查找点击项在当前显示列表中的索引
    const itemIndex = displayedFileList.value.findIndex((f) => f.filename === item.filename);
-    console.log(`[Selection] Item index in displayed list: ${itemIndex}`);

    // 如果找不到项（理论上不应发生），或者点击的是 '..'
    // (注意: '..' 通常是单独处理或在列表开头，这里假设它不在 displayedFileList 中，或者其点击事件由外部单独处理)
@@ -34,17 +31,13 @@ export function useFileManagerSelection(options: UseFileManagerSelectionOptions)
        // 如果点击的是 '..'
        // 如果点击的是 '..'
        if (item.filename === '..') {
-            console.log("[Selection] Clicked on '..'");
            // 只有在没有修饰键时才执行 '..' 的动作
            if (!ctrlOrMeta && !shift) {
-                console.log("[Selection] '..' clicked without modifiers. Clearing selection and marking for action.");
-                console.log('[Selection] Before clear:', new Set(selectedItems.value), 'Last index:', lastClickedIndex.value);
                selectedItems.value.clear();
                lastClickedIndex.value = -1;
                shouldPerformAction = true; // 标记执行动作
-                console.log('[Selection] After clear:', new Set(selectedItems.value), 'Last index:', lastClickedIndex.value);
            } else {
-                 console.log("[Selection] '..' clicked with modifiers. Ignoring action.");
+                 // 如果有修饰键，则不执行动作
            }
            // 如果有修饰键，则不执行动作，直接返回 (修改：移到下面统一处理)
            // (不需要修改 selectedItems 或 lastClickedIndex)
@@ -57,12 +50,10 @@ export function useFileManagerSelection(options: UseFileManagerSelectionOptions)
        // 如果是 '..' 且有修饰键，则在此处返回 (因为上面没有 return) -> 不对，应该在上面 if block 里 return
        // 统一处理 '..' 的返回逻辑：如果有修饰键，则不继续执行后续的选择/动作逻辑
        if (item.filename === '..' && (ctrlOrMeta || shift)) {
-             console.log("[Selection] Returning early for '..' click with modifiers.");
             return;
        }
        // 如果不是 '..' 且找不到索引，也返回
        if (item.filename !== '..' && itemIndex === -1) {
-             console.log("[Selection] Item not found in displayed list (and not '..'). Returning.");
             return;
        }

@@ -70,69 +61,50 @@ export function useFileManagerSelection(options: UseFileManagerSelectionOptions)


    // --- 主要选择逻辑 ---
-    console.log('[Selection] Before selection logic:', new Set(selectedItems.value), 'Last index:', lastClickedIndex.value);
-
    // --- 调整后的主要选择逻辑 ---
    if (ctrlOrMeta) { // 1. 检查 Ctrl/Meta
-      console.log('[Selection] Branch: Ctrl/Meta Click');
      event.preventDefault();
      event.stopPropagation(); // <-- 阻止冒泡
      // Ctrl/Cmd + Click: Toggle selection
      // '..' 不应参与多选 (已在前面处理)
      // if (item.filename === '..') return; // '..' 已在前面处理
      if (selectedItems.value.has(item.filename)) {
-        console.log(`[Selection] Ctrl/Meta: Removing ${item.filename}`);
        selectedItems.value.delete(item.filename);
      } else {
-        console.log(`[Selection] Ctrl/Meta: Adding ${item.filename}`);
        selectedItems.value.add(item.filename); // Keep the add operation
      }
      // Removed the extra else block here
      lastClickedIndex.value = itemIndex; // 更新最后点击的索引
-      console.log('[Selection] After Ctrl/Meta:', new Set(selectedItems.value), 'Last index:', lastClickedIndex.value);
-      console.log('[Selection] After Ctrl/Meta:', new Set(selectedItems.value), 'Last index:', lastClickedIndex.value);
    } else if (shift) { // 2. 检查 Shift (移除 lastClickedIndex !== -1 条件)
-      console.log('[Selection] Branch: Shift Click');
      event.preventDefault();
      event.stopPropagation(); // <-- 阻止冒泡
      // Shift + Click: Range selection
      // '..' 不应参与范围选择 (已在前面处理)
      // if (item.filename === '..') return; // '..' 已在前面处理
-      console.log('[Selection] Shift: Clearing previous selection.');
      selectedItems.value.clear();
      // 如果 lastClickedIndex 是 -1 (例如第一次 Shift 点击)，则只选中当前项
      const start = lastClickedIndex.value === -1 ? itemIndex : Math.min(lastClickedIndex.value, itemIndex);
      const end = lastClickedIndex.value === -1 ? itemIndex : Math.max(lastClickedIndex.value, itemIndex);
-      console.log(`[Selection] Shift: Range from ${start} to ${end}`);
      for (let i = start; i <= end; i++) {
        // 确保索引有效且不是 '..'
        const fileToAdd = displayedFileList.value[i];
        if (fileToAdd && fileToAdd.filename !== '..') {
-          console.log(`[Selection] Shift: Adding ${fileToAdd.filename}`);
          selectedItems.value.add(fileToAdd.filename);
        }
      }
      // Shift-click 也更新 lastClickedIndex 为当前点击项
      lastClickedIndex.value = itemIndex;
-      console.log('[Selection] After Shift:', new Set(selectedItems.value), 'Last index:', lastClickedIndex.value);
-      console.log('[Selection] After Shift:', new Set(selectedItems.value), 'Last index:', lastClickedIndex.value);
    } else { // 3. 处理普通单击 (没有修饰键)
-      console.log('[Selection] Branch: Single Click');
      // Single Click: Select only the clicked item and perform action
-      console.log('[Selection] Single Click: Clearing previous selection.');
      selectedItems.value.clear();
       // '..' 不应被加入 selectedItems (已在前面处理 shouldPerformAction)
      if (item.filename !== '..') {
-          console.log(`[Selection] Single Click: Adding ${item.filename}`);
          selectedItems.value.add(item.filename);
          lastClickedIndex.value = itemIndex; // 更新最后点击的索引
      } else {
           // 点击 '..' 的 lastClickedIndex 已在前面处理
          // lastClickedIndex.value = -1;
      }
-      console.log('[Selection] After Single Click selection update:', new Set(selectedItems.value), 'Last index:', lastClickedIndex.value);
-
-
      // --- 调用外部传入的动作回调 ---
      // 只有单击时才执行导航或打开文件
      // 标记执行动作 (只在普通单击时)
@@ -140,12 +112,8 @@ export function useFileManagerSelection(options: UseFileManagerSelectionOptions)
    }

    // 在函数末尾根据标志决定是否执行动作
-    console.log(`[Selection] Final check: shouldPerformAction = ${shouldPerformAction}`);
    if (shouldPerformAction) {
-        console.log(`[Selection] Calling onItemAction for ${item.filename}`);
        onItemAction(item);
-    } else {
-        console.log(`[Selection] Skipping onItemAction for ${item.filename}`);
    }
  };