diff --git a/client/src/components/FileContextMenu.tsx b/client/src/components/FileContextMenu.tsx index bced67f..07e87bf 100644 --- a/client/src/components/FileContextMenu.tsx +++ b/client/src/components/FileContextMenu.tsx @@ -24,6 +24,11 @@ interface FileContextMenuProps { items: string[] operation: 'copy' | 'cut' | null } + // 菜单全局状态props + globalContextMenuInfo: { + file: FileItem | null + position: { x: number; y: number } + } | null onOpen: (file: FileItem) => void onRename: (file: FileItem) => void onDelete: (files: FileItem[]) => void @@ -36,6 +41,11 @@ interface FileContextMenuProps { onExtract: (file: FileItem) => void onOpenTerminal: (file: FileItem) => void onAddToPlaylist?: (files: FileItem[]) => void + // 菜单全局状态props + setGlobalContextMenuInfo: React.Dispatch> } export const FileContextMenu: React.FC = ({ @@ -43,6 +53,7 @@ export const FileContextMenu: React.FC = ({ file, selectedFiles, clipboard, + globalContextMenuInfo, onOpen, onRename, onDelete, @@ -54,13 +65,14 @@ export const FileContextMenu: React.FC = ({ onCompress, onExtract, onOpenTerminal, - onAddToPlaylist + onAddToPlaylist, + setGlobalContextMenuInfo }) => { const isSelected = selectedFiles.has(file.path) const selectedCount = selectedFiles.size const isMultipleSelected = selectedCount > 1 - const [contextMenuVisible, setContextMenuVisible] = React.useState(false) - const [contextMenuPosition, setContextMenuPosition] = React.useState({ x: 0, y: 0 }) + const contextMenuVisible = globalContextMenuInfo?.file?.path === file.path; + const contextMenuPosition = globalContextMenuInfo?.position || { x: 0, y: 0 }; const getSelectedFiles = (): FileItem[] => { if (isSelected && isMultipleSelected) { @@ -87,26 +99,23 @@ export const FileContextMenu: React.FC = ({ } const handleContextMenu = (event: React.MouseEvent) => { - event.preventDefault() - setContextMenuPosition({ x: event.clientX, y: event.clientY }) - setContextMenuVisible(true) - console.log('显示右键菜单:', file.name) - } + event.preventDefault(); + setGlobalContextMenuInfo({file, position: { x: event.clientX, y: event.clientY }}); + //日志 + console.log('显示右键菜单:', file.name); + }; const handleMenuClick = () => { - setContextMenuVisible(false) - } + setGlobalContextMenuInfo(null); + }; React.useEffect(() => { - const handleClickOutside = () => { - setContextMenuVisible(false) - } - if (contextMenuVisible) { - document.addEventListener('click', handleClickOutside) - return () => document.removeEventListener('click', handleClickOutside) + const handleClickOutside = () => setGlobalContextMenuInfo(null); + document.addEventListener('click', handleClickOutside); + return () => document.removeEventListener('click', handleClickOutside); } - }, [contextMenuVisible]) + }, [contextMenuVisible, setGlobalContextMenuInfo]); return ( <> diff --git a/client/src/pages/FileManagerPage.tsx b/client/src/pages/FileManagerPage.tsx index c77caff..351cd93 100644 --- a/client/src/pages/FileManagerPage.tsx +++ b/client/src/pages/FileManagerPage.tsx @@ -162,6 +162,12 @@ const FileManagerPage: React.FC = () => { setViewMode(mode) localStorage.setItem('fileManager_viewMode', mode) } + + // 右键菜单状态 + const [contextMenuInfo, setContextMenuInfo] = useState<{ + file: FileItem | null + position: { x: number; y: number } + } | null>(null); // 初始化 useEffect(() => { @@ -903,8 +909,11 @@ const FileManagerPage: React.FC = () => { onView={handleContextMenuView} onCompress={handleContextMenuCompress} onExtract={handleContextMenuExtract} - onOpenTerminal={handleContextMenuOpenTerminal} - onAddToPlaylist={handleAddToPlaylist} + onOpenTerminal={handleContextMenuOpenTerminal} + onAddToPlaylist={handleAddToPlaylist} + // 全局菜单控制 + globalContextMenuInfo={contextMenuInfo} + setGlobalContextMenuInfo={setContextMenuInfo} > { onView={handleContextMenuView} onCompress={handleContextMenuCompress} onExtract={handleContextMenuExtract} - onOpenTerminal={handleContextMenuOpenTerminal} - onAddToPlaylist={handleAddToPlaylist} + onOpenTerminal={handleContextMenuOpenTerminal} + onAddToPlaylist={handleAddToPlaylist} + // 全局菜单控制 + globalContextMenuInfo={contextMenuInfo} + setGlobalContextMenuInfo={setContextMenuInfo} >