mirror of
https://github.com/truewhile/MeBox.git
synced 2026-10-02 20:26:36 +08:00
move file manager parent navigation
This commit is contained in:
@@ -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,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>
|
||||||
|
|||||||
Reference in New Issue
Block a user