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 { ChevronUp } from 'lucide-react'
import { ChevronUp, Home } from 'lucide-react'
import { filesAPI, type FileEntry, type FileListing } from '../api/files'
import { libraryAPI } from '../api/library'
@@ -89,10 +89,7 @@ export function FileManagerPage() {
<FileManagerToolbar
currentPath={data?.path}
parentPath={data?.parent}
recursive={recursive}
onRoot={() => setPath('')}
onParent={setPath}
onRefresh={refresh}
onRecursiveChange={setRecursive}
/>
@@ -166,16 +163,28 @@ export function FileManagerPage() {
<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">
<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 className="flex flex-wrap items-center gap-2">
<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('')}
title="返回根列表"
>
<Home size={16} />
根
</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}>
{data.path}
</span>
+1 -15
View File
@@ -1,34 +1,20 @@
import { ChevronUp, Home, RefreshCw } from 'lucide-react'
import { RefreshCw } from 'lucide-react'
type FileManagerToolbarProps = {
currentPath?: string
parentPath?: string
recursive: boolean
onRoot: () => void
onParent: (path: string) => void
onRefresh: () => void
onRecursiveChange: (value: boolean) => void
}
export function FileManagerToolbar({
currentPath,
parentPath,
recursive,
onRoot,
onParent,
onRefresh,
onRecursiveChange,
}: FileManagerToolbarProps) {
return (
<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}>
<RefreshCw size={14} /> 刷新
</button>