实现跨边界拖拽功能:支持从浏览器拖拽文件到系统
主要改进: - 使用 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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user