move file manager parent navigation

This commit is contained in:
ShukeBta
2026-06-26 23:28:04 +08:00
parent 2e660325d6
commit 8dff7f8a91
2 changed files with 23 additions and 28 deletions
+22 -13
View File
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useMemo, useState } from 'react' import { useCallback, useEffect, useMemo, useState } from 'react'
import { ChevronUp } from 'lucide-react' import { ChevronUp, Home } from 'lucide-react'
import { filesAPI, type FileEntry, type FileListing } from '../api/files' import { filesAPI, type FileEntry, type FileListing } from '../api/files'
import { libraryAPI } from '../api/library' import { libraryAPI } from '../api/library'
@@ -89,10 +89,7 @@ export function FileManagerPage() {
<FileManagerToolbar <FileManagerToolbar
currentPath={data?.path} currentPath={data?.path}
parentPath={data?.parent}
recursive={recursive} recursive={recursive}
onRoot={() => setPath('')}
onParent={setPath}
onRefresh={refresh} onRefresh={refresh}
onRecursiveChange={setRecursive} onRecursiveChange={setRecursive}
/> />
@@ -166,16 +163,28 @@ export function FileManagerPage() {
<FileBrowserRoots roots={data.roots} onOpen={setPath} /> <FileBrowserRoots roots={data.roots} onOpen={setPath} />
)} )}
{!loading && data?.path && data.parent && ( {!loading && data?.path && (
<div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-[var(--app-border)] bg-[var(--app-surface)] px-3 py-2 shadow-sm"> <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-[var(--app-border)] bg-[var(--app-surface)] px-3 py-2 shadow-sm">
<button <div className="flex flex-wrap items-center gap-2">
className="inline-flex h-9 items-center gap-2 rounded-lg border border-[var(--app-border)] bg-[var(--app-surface-strong)] px-3 text-sm font-medium text-[var(--app-text)] transition hover:border-primary-400/50 hover:text-primary-500" <button
onClick={() => setPath(data.parent || '')} className="inline-flex h-9 items-center gap-2 rounded-lg border border-[var(--app-border)] bg-[var(--app-surface-strong)] px-3 text-sm font-medium text-[var(--app-text)] transition hover:border-primary-400/50 hover:text-primary-500"
title="返回上级目录" onClick={() => setPath('')}
> title="返回根列表"
<ChevronUp size={16} /> >
上一级 <Home size={16} />
</button> 根
</button>
{data.parent && (
<button
className="inline-flex h-9 items-center gap-2 rounded-lg border border-[var(--app-border)] bg-[var(--app-surface-strong)] px-3 text-sm font-medium text-[var(--app-text)] transition hover:border-primary-400/50 hover:text-primary-500"
onClick={() => setPath(data.parent || '')}
title="返回上级目录"
>
<ChevronUp size={16} />
上一级
</button>
)}
</div>
<span className="min-w-0 flex-1 truncate text-right font-mono text-xs text-[var(--app-muted)]" title={data.path}> <span className="min-w-0 flex-1 truncate text-right font-mono text-xs text-[var(--app-muted)]" title={data.path}>
{data.path} {data.path}
</span> </span>
+1 -15
View File
@@ -1,34 +1,20 @@
import { ChevronUp, Home, RefreshCw } from 'lucide-react' import { RefreshCw } from 'lucide-react'
type FileManagerToolbarProps = { type FileManagerToolbarProps = {
currentPath?: string currentPath?: string
parentPath?: string
recursive: boolean recursive: boolean
onRoot: () => void
onParent: (path: string) => void
onRefresh: () => void onRefresh: () => void
onRecursiveChange: (value: boolean) => void onRecursiveChange: (value: boolean) => void
} }
export function FileManagerToolbar({ export function FileManagerToolbar({
currentPath, currentPath,
parentPath,
recursive, recursive,
onRoot,
onParent,
onRefresh, onRefresh,
onRecursiveChange, onRecursiveChange,
}: FileManagerToolbarProps) { }: FileManagerToolbarProps) {
return ( return (
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<button className="neon-button !px-3 !py-1 !text-xs" onClick={onRoot} title="返回根列表">
<Home size={14} /> 根
</button>
{parentPath && (
<button className="neon-button !px-3 !py-1 !text-xs" onClick={() => onParent(parentPath)}>
<ChevronUp size={14} /> 上一级
</button>
)}
<button className="neon-button !px-3 !py-1 !text-xs" onClick={onRefresh}> <button className="neon-button !px-3 !py-1 !text-xs" onClick={onRefresh}>
<RefreshCw size={14} /> 刷新 <RefreshCw size={14} /> 刷新
</button> </button>