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

主要改进:
- 使用 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

@@ -13,7 +13,8 @@ import {
RefreshCw,
Clipboard,
Eye,
Share
Share,
ExternalLink
} from "lucide-react";
import { useTranslation } from "react-i18next";
@@ -47,6 +48,7 @@ interface ContextMenuProps {
onPaste?: () => void;
onPreview?: (file: FileItem) => void;
hasClipboard?: boolean;
onDragToDesktop?: () => void;
}
interface MenuItem {
@@ -77,7 +79,8 @@ export function FileManagerContextMenu({
onRefresh,
onPaste,
onPreview,
hasClipboard = false
hasClipboard = false,
onDragToDesktop
}: ContextMenuProps) {
const { t } = useTranslation();
const [menuPosition, setMenuPosition] = useState({ x, y });
@@ -204,6 +207,19 @@ export function FileManagerContextMenu({
});
}
// 拖拽到桌面菜单项(支持浏览器和桌面应用)
if (hasFiles && onDragToDesktop) {
const isModernBrowser = 'showSaveFilePicker' in window;
menuItems.push({
icon: <ExternalLink className="w-4 h-4" />,
label: isMultipleFiles
? `保存 ${files.length} 个文件到系统`
: "保存到系统",
action: () => onDragToDesktop(),
shortcut: isModernBrowser ? "选择位置保存" : "下载到默认位置"
});
}
menuItems.push({ separator: true } as MenuItem);
if (isSingleFile && onRename) {