diff --git a/frontend/src/components/FileManager/FileManagerWindowManager.tsx b/frontend/src/components/FileManager/FileManagerWindowManager.tsx new file mode 100644 index 00000000..8ea4da49 --- /dev/null +++ b/frontend/src/components/FileManager/FileManagerWindowManager.tsx @@ -0,0 +1,133 @@ +/** + * 文件管理器窗口管理器 + * 独立管理文件管理器窗口的打开、最小化等状态 + */ +import React, { useState, useCallback, useEffect } from 'react'; +import { FolderOpen } from 'lucide-react'; +import { FileManager } from './FileManager'; + +export interface FileManagerWindow { + id: string; + serverId: number; + serverName: string; + isMinimized: boolean; +} + +export const FileManagerWindowManager: React.FC = () => { + const [windows, setWindows] = useState([]); + const [activeWindowId, setActiveWindowId] = useState(null); + + // 打开文件管理器窗口 + const openWindow = useCallback((serverId: number, serverName: string) => { + const windowId = `file-manager-${serverId}-${Date.now()}`; + + // 检查是否已存在该服务器的窗口 + const existingWindow = windows.find(w => w.serverId === serverId && !w.isMinimized); + if (existingWindow) { + // 如果已存在且未最小化,聚焦它 + setActiveWindowId(existingWindow.id); + return; + } + + const newWindow: FileManagerWindow = { + id: windowId, + serverId, + serverName, + isMinimized: false, + }; + + setWindows(prev => [...prev, newWindow]); + setActiveWindowId(windowId); + + console.log(`✅ 打开文件管理器: ${serverName} (${windowId})`); + }, [windows]); + + // 关闭窗口 + const closeWindow = useCallback((windowId: string) => { + setWindows(prev => prev.filter(w => w.id !== windowId)); + if (activeWindowId === windowId) { + setActiveWindowId(null); + } + console.log(`❌ 关闭文件管理器: ${windowId}`); + }, [activeWindowId]); + + // 最小化窗口 + const minimizeWindow = useCallback((windowId: string) => { + setWindows(prev => prev.map(w => + w.id === windowId ? { ...w, isMinimized: true } : w + )); + if (activeWindowId === windowId) { + setActiveWindowId(null); + } + console.log(`➖ 最小化文件管理器: ${windowId}`); + }, [activeWindowId]); + + // 恢复窗口 + const restoreWindow = useCallback((windowId: string) => { + setWindows(prev => prev.map(w => + w.id === windowId ? { ...w, isMinimized: false } : w + )); + setActiveWindowId(windowId); + console.log(`➕ 恢复文件管理器: ${windowId}`); + }, []); + + // 聚焦窗口 + const focusWindow = useCallback((windowId: string) => { + setActiveWindowId(windowId); + }, []); + + // 注册全局打开方法 + useEffect(() => { + const globalKey = 'openFileManager'; + (window as any)[globalKey] = openWindow; + console.log('📁 文件管理器窗口管理器已就绪'); + + return () => { + delete (window as any)[globalKey]; + }; + }, [openWindow]); + + return ( + <> + {/* 渲染所有文件管理器窗口 */} + {windows.map(win => !win.isMinimized && ( + closeWindow(win.id)} + onMinimize={() => minimizeWindow(win.id)} + isActive={activeWindowId === win.id} + onFocus={() => focusWindow(win.id)} + /> + ))} + + {/* 最小化的窗口悬浮按钮 */} + {windows.filter(w => w.isMinimized).length > 0 && ( +
+ {windows + .filter(w => w.isMinimized) + .map((win) => ( + + ))} +
+ )} + + ); +};