diff --git a/src/ui/Desktop/Apps/File Manager/FileManagerGrid.tsx b/src/ui/Desktop/Apps/File Manager/FileManagerGrid.tsx index 364f61c5..4f79fc30 100644 --- a/src/ui/Desktop/Apps/File Manager/FileManagerGrid.tsx +++ b/src/ui/Desktop/Apps/File Manager/FileManagerGrid.tsx @@ -19,7 +19,8 @@ import { ArrowUp, FileSymlink, Move, - GitCompare + GitCompare, + Edit } from "lucide-react"; import { useTranslation } from "react-i18next"; import type { FileItem } from "../../../types/index.js"; @@ -350,6 +351,10 @@ export function FileManagerGrid({ const [navigationHistory, setNavigationHistory] = useState([currentPath]); const [historyIndex, setHistoryIndex] = useState(0); + // 路径编辑状态 + const [isEditingPath, setIsEditingPath] = useState(false); + const [editPathValue, setEditPathValue] = useState(currentPath); + // 更新导航历史 useEffect(() => { const lastPath = navigationHistory[historyIndex]; @@ -400,6 +405,44 @@ export function FileManagerGrid({ } }; + // 路径编辑功能 + const startEditingPath = () => { + setEditPathValue(currentPath); + setIsEditingPath(true); + }; + + const cancelEditingPath = () => { + setIsEditingPath(false); + setEditPathValue(currentPath); + }; + + const confirmEditingPath = () => { + const trimmedPath = editPathValue.trim(); + if (trimmedPath) { + // 确保路径以 / 开头 + const normalizedPath = trimmedPath.startsWith('/') ? trimmedPath : '/' + trimmedPath; + onPathChange(normalizedPath); + } + setIsEditingPath(false); + }; + + const handlePathInputKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + e.preventDefault(); + confirmEditingPath(); + } else if (e.key === 'Escape') { + e.preventDefault(); + cancelEditingPath(); + } + }; + + // 同步editPathValue与currentPath + useEffect(() => { + if (!isEditingPath) { + setEditPathValue(currentPath); + } + }, [currentPath, isEditingPath]); + // 拖放处理 - 区分内部文件拖拽和外部文件上传 const handleDragEnter = useCallback((e: React.DragEvent) => { e.preventDefault(); @@ -846,25 +889,68 @@ export function FileManagerGrid({ {/* 面包屑导航 */}
- - {pathParts.map((part, index) => ( - + {isEditingPath ? ( + // 编辑模式:路径输入框 +
+ setEditPathValue(e.target.value)} + onKeyDown={(e) => { + if (e.key === 'Enter') { + confirmEditingPath(); + } else if (e.key === 'Escape') { + cancelEditingPath(); + } + }} + className="flex-1 px-2 py-1 bg-dark-hover border border-dark-border rounded text-sm focus:outline-none focus:ring-1 focus:ring-primary" + placeholder="输入路径..." + autoFocus + /> - {index < pathParts.length - 1 && ( - / - )} - - ))} + +
+ ) : ( + // 查看模式:面包屑导航 + <> + + {pathParts.map((part, index) => ( + + + {index < pathParts.length - 1 && ( + / + )} + + ))} + + + )}