优化文件管理器拖拽体验:实现智能跟随tooltip和统一状态管理

- 统一拖拽状态管理:将分散的draggedFiles、dragOverTarget、isDragging等状态合并为单一DragState
- 实现跟随鼠标的动态tooltip:实时显示拖拽操作提示,根据目标文件类型智能变化
- 支持三种拖拽模式:
  * 拖拽到文件夹显示"移动到xxx"
  * 拖拽到文件显示"与xxx进行diff对比"
  * 拖拽到空白区域显示"拖到窗口外下载"
- 修复边界情况:文件拖拽到自身时忽略操作,避免错误触发
- 使用shadcn设计token统一样式风格
- 移除冗余的DragIndicator组件,简化UI界面
- 添加全局鼠标移动监听,确保tooltip平滑跟随

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
ZacharyZcR
2025-09-17 00:53:15 +08:00
parent d79d435594
commit e0e4e69159
2 changed files with 173 additions and 84 deletions

View File

@@ -8,7 +8,6 @@ import { FileWindow } from "./components/FileWindow";
import { DiffWindow } from "./components/DiffWindow";
import { useDragToDesktop } from "../../../hooks/useDragToDesktop";
import { useDragToSystemDesktop } from "../../../hooks/useDragToSystemDesktop";
import { DragIndicator } from "../../../components/DragIndicator";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { toast } from "sonner";
@@ -1275,6 +1274,7 @@ function FileManagerContent({ initialHost, onClose }: FileManagerModernProps) {
onPathChange={setCurrentPath}
onRefresh={() => loadDirectory(currentPath)}
onUpload={handleFilesDropped}
onDownload={(files) => files.forEach(handleDownloadFile)}
onContextMenu={handleContextMenu}
viewMode={viewMode}
onRename={handleRenameConfirm}
@@ -1322,29 +1322,6 @@ function FileManagerContent({ initialHost, onClose }: FileManagerModernProps) {
onDragToDesktop={() => handleDragToDesktop(contextMenu.files)}
/>
{/* 拖拽到桌面指示器 */}
<DragIndicator
isVisible={
dragToDesktop.isDownloading ||
dragToDesktop.isDragging ||
systemDrag.isDownloading ||
systemDrag.isDragging
}
isDragging={
systemDrag.isDragging || dragToDesktop.isDragging
}
isDownloading={
systemDrag.isDownloading || dragToDesktop.isDownloading
}
progress={
systemDrag.isDownloading || systemDrag.isDragging
? systemDrag.progress
: dragToDesktop.progress
}
fileName={selectedFiles.length === 1 ? selectedFiles[0]?.name : undefined}
fileCount={selectedFiles.length}
error={systemDrag.error || dragToDesktop.error}
/>
</div>
</div>
);