实现跨边界拖拽功能:支持从浏览器拖拽文件到系统

主要改进:
- 使用 File System Access API 实现真正的跨应用边界文件传输
- 支持拖拽到窗口外自动触发系统保存对话框
- 智能路径记忆功能,记住用户上次选择的保存位置
- 多文件自动打包为 ZIP 格式
- 现代浏览器优先使用新 API,旧浏览器降级到传统下载
- 完整的视觉反馈和进度显示

技术实现:
- 新增 useDragToSystemDesktop hook 处理系统级拖拽
- 扩展 Electron 主进程支持拖拽临时文件管理
- 集成 JSZip 库支持多文件打包
- 使用 IndexedDB 存储用户偏好的保存路径
- 优化文件管理器拖拽事件处理链

🤖 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:08:15 +08:00
parent 3f90faf1d0
commit d79d435594
11 changed files with 1206 additions and 10 deletions

View File

@@ -70,6 +70,8 @@ interface FileManagerGridProps {
onUndo?: () => void;
onFileDrop?: (draggedFiles: FileItem[], targetFile: FileItem) => void;
onFileDiff?: (file1: FileItem, file2: FileItem) => void;
onSystemDragStart?: (files: FileItem[]) => void;
onSystemDragEnd?: (e: DragEvent) => void;
}
const getFileIcon = (file: FileItem, viewMode: 'grid' | 'list' = 'grid') => {
@@ -165,7 +167,9 @@ export function FileManagerGrid({
onPaste,
onUndo,
onFileDrop,
onFileDiff
onFileDiff,
onSystemDragStart,
onSystemDragEnd
}: FileManagerGridProps) {
const { t } = useTranslation();
const gridRef = useRef<HTMLDivElement>(null);
@@ -227,6 +231,9 @@ export function FileManagerGrid({
files: filesToDrag.map(f => f.path)
};
e.dataTransfer.setData('text/plain', JSON.stringify(dragData));
// 触发系统级拖拽开始
onSystemDragStart?.(filesToDrag);
e.dataTransfer.effectAllowed = 'move';
};
@@ -280,9 +287,12 @@ export function FileManagerGrid({
setDraggedFiles([]);
};
const handleFileDragEnd = () => {
const handleFileDragEnd = (e: React.DragEvent) => {
setDraggedFiles([]);
setDragOverTarget(null);
// 触发系统级拖拽结束检测
onSystemDragEnd?.(e.nativeEvent);
};
const [isSelecting, setIsSelecting] = useState(false);