实现桌面图标拖动和文件拖入文件夹功能

Author: caoergou

src/components/Desktop.jsx

@@ -60,16 +60,30 @@ const DesktopIcon = styled.div`
   }
 `;
 
+const DragOverlay = styled.div`
+  position: fixed;
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0.8;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: white;
+  text-shadow: 1px 1px 2px black;
+`;
+
 const Desktop = () => {
   const { t } = useTranslation();
-  const { fs } = useFileSystem();
+  const { fs, moveFile } = useFileSystem();
   const { windows, openWindow, focusWindow } = useWindowManager();
   const { showModal } = useModal();
 
   const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 });
   const [refreshKey, setRefreshKey] = useState(0);
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [pasteDisabled, setPasteDisabled] = useState(true);
+  const [draggedItem, setDraggedItem] = useState(null);
+  const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
 
   const handleIconDoubleClick = (key, item) => {
     const resolved = resolveFileOpen(key, item);
@@ -80,6 +94,27 @@ const Desktop = () => {
     openWindow(resolved.appId, item.name, resolved.component, resolved.icon, resolved.windowProps);
   };
 
+  const handleDragStart = (e, key, item) => {
+    setDraggedItem({ key, item });
+    setDragPosition({ x: e.clientX, y: e.clientY });
+  };
+
+  const handleDrag = (e) => {
+    setDragPosition({ x: e.clientX, y: e.clientY });
+  };
+
+  const handleDragEnd = (e, targetKey) => {
+    // 如果拖拽到了另一个文件夹上
+    if (targetKey && targetKey !== draggedItem?.key) {
+      const targetItem = fs.root.children[targetKey];
+      if (targetItem && targetItem.type === 'folder') {
+        // 将文件移动到目标文件夹
+        moveFile([], draggedItem.key, [targetKey]);
+      }
+    }
+    setDraggedItem(null);
+  };
+
   const handleContextMenu = async (e) => {
     e.preventDefault();
     try {
@@ -134,7 +169,17 @@ const Desktop = () => {
             ? 'recycle_bin_full'
             : item.icon;
           return (
-            <DesktopIcon key={key} data-testid={`desktop-icon-${key}`} onDoubleClick={() => handleIconDoubleClick(key, item)}>
+            <DesktopIcon
+              key={key}
+              data-testid={`desktop-icon-${key}`}
+              onDoubleClick={() => handleIconDoubleClick(key, item)}
+              draggable
+              onDragStart={(e) => handleDragStart(e, key, item)}
+              onDrag={(e) => handleDrag(e)}
+              onDragEnd={(e) => handleDragEnd(e, null)}
+              onDragOver={(e) => e.preventDefault()} // 允许放置
+              onDrop={(e) => handleDragEnd(e, key)}
+            >
               <div className="icon-wrapper">
                 <XPIcon name={iconName} size={32} />
               </div>

src/context/FileSystemContext.jsx

@@ -142,6 +142,45 @@ export const FileSystemProvider = ({ children }) => {
     });
   };
 
+  const moveFile = (sourcePath, fileName, destinationPath, newName = fileName) => {
+    setFs(prevFs => {
+      const newFs = JSON.parse(JSON.stringify(prevFs));
+
+      let sourceParent = newFs.root;
+      for (let part of sourcePath) {
+        if (sourceParent.children && sourceParent.children[part]) {
+          sourceParent = sourceParent.children[part];
+        } else {
+          return prevFs;
+        }
+      }
+
+      if (!sourceParent.children || !sourceParent.children[fileName]) {
+        return prevFs;
+      }
+
+      let destinationParent = newFs.root;
+      for (let part of destinationPath) {
+        if (destinationParent.children && destinationParent.children[part]) {
+          destinationParent = destinationParent.children[part];
+        } else {
+          return prevFs;
+        }
+      }
+
+      if (!destinationParent.children) {
+        destinationParent.children = {};
+      }
+
+      // 移动文件
+      destinationParent.children[newName] = JSON.parse(JSON.stringify(sourceParent.children[fileName]));
+      destinationParent.children[newName].name = newName;
+      delete sourceParent.children[fileName];
+
+      return newFs;
+    });
+  };
+
   const copyFile = (sourcePath, fileName, destinationPath, newName = fileName) => {
     setFs(prevFs => {
       const newFs = JSON.parse(JSON.stringify(prevFs));
@@ -300,7 +339,8 @@ export const FileSystemProvider = ({ children }) => {
         pasteFile,
         searchFiles,
         getFileProperties,
-        clipboard
+        clipboard,
+        moveFile
       }}
     >
       {children}