Initial commit
This commit is contained in:
@@ -0,0 +1,169 @@
|
||||
import React from 'react'
|
||||
import { X } from 'lucide-react'
|
||||
import { LocalFilePanel } from './LocalFilePanel'
|
||||
import { RemoteFilePanel } from './RemoteFilePanel'
|
||||
import { TransferQueue } from './TransferQueue'
|
||||
import type { FileItem } from '@/lib/api'
|
||||
import { type RemoteFileItem, uploadFileToRemote, downloadFileFromRemote } from '../../api'
|
||||
import type { TransferItem } from '../../types'
|
||||
|
||||
interface FileTransferPanelProps {
|
||||
serverHost: string
|
||||
port: number
|
||||
password?: string
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export const FileTransferPanel: React.FC<FileTransferPanelProps> = ({
|
||||
serverHost,
|
||||
port,
|
||||
password,
|
||||
onClose,
|
||||
}) => {
|
||||
const [localSelected, setLocalSelected] = React.useState<FileItem | null>(null)
|
||||
const [remoteSelected, setRemoteSelected] = React.useState<RemoteFileItem | null>(null)
|
||||
const [transfers, setTransfers] = React.useState<TransferItem[]>([])
|
||||
const [transferring, setTransferring] = React.useState(false)
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (!localSelected || !localSelected.path) return
|
||||
|
||||
setTransferring(true)
|
||||
const transferId = Date.now().toString()
|
||||
const newTransfer: TransferItem = {
|
||||
id: transferId,
|
||||
name: localSelected.name,
|
||||
type: 'upload',
|
||||
size: localSelected.size,
|
||||
progress: 0,
|
||||
status: 'transferring',
|
||||
}
|
||||
setTransfers((prev) => [...prev, newTransfer])
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/files/content?path=${encodeURIComponent(localSelected.path)}`)
|
||||
const blob = await response.blob()
|
||||
const file = new File([blob], localSelected.name, { type: blob.type })
|
||||
|
||||
await uploadFileToRemote(serverHost, port, file, '', password, (progress) => {
|
||||
setTransfers((prev) =>
|
||||
prev.map((t) => (t.id === transferId ? { ...t, progress } : t))
|
||||
)
|
||||
})
|
||||
|
||||
setTransfers((prev) =>
|
||||
prev.map((t) =>
|
||||
t.id === transferId ? { ...t, progress: 100, status: 'completed' } : t
|
||||
)
|
||||
)
|
||||
setLocalSelected(null)
|
||||
} catch (err) {
|
||||
console.error('Upload failed:', err)
|
||||
setTransfers((prev) =>
|
||||
prev.map((t) =>
|
||||
t.id === transferId
|
||||
? { ...t, status: 'error', error: err instanceof Error ? err.message : '上传失败' }
|
||||
: t
|
||||
)
|
||||
)
|
||||
} finally {
|
||||
setTransferring(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDownload = async () => {
|
||||
if (!remoteSelected) return
|
||||
|
||||
setTransferring(true)
|
||||
const transferId = Date.now().toString()
|
||||
const newTransfer: TransferItem = {
|
||||
id: transferId,
|
||||
name: remoteSelected.name,
|
||||
type: 'download',
|
||||
size: remoteSelected.size,
|
||||
progress: 0,
|
||||
status: 'transferring',
|
||||
}
|
||||
setTransfers((prev) => [...prev, newTransfer])
|
||||
|
||||
try {
|
||||
await downloadFileFromRemote(serverHost, port, remoteSelected.name, '', password, (progress) => {
|
||||
setTransfers((prev) =>
|
||||
prev.map((t) => (t.id === transferId ? { ...t, progress } : t))
|
||||
)
|
||||
})
|
||||
|
||||
setTransfers((prev) =>
|
||||
prev.map((t) =>
|
||||
t.id === transferId ? { ...t, progress: 100, status: 'completed' } : t
|
||||
)
|
||||
)
|
||||
setRemoteSelected(null)
|
||||
} catch (err) {
|
||||
console.error('Download failed:', err)
|
||||
setTransfers((prev) =>
|
||||
prev.map((t) =>
|
||||
t.id === transferId
|
||||
? { ...t, status: 'error', error: err instanceof Error ? err.message : '下载失败' }
|
||||
: t
|
||||
)
|
||||
)
|
||||
} finally {
|
||||
setTransferring(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleClearTransfers = () => {
|
||||
setTransfers((prev) => prev.filter((t) => t.status === 'transferring'))
|
||||
}
|
||||
|
||||
const handleRemoveTransfer = (id: string) => {
|
||||
setTransfers((prev) => prev.filter((t) => t.id !== id))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="w-[900px] h-[600px] max-w-[95vw] max-h-[90vh] bg-white dark:bg-gray-900 rounded-xl shadow-2xl flex flex-col overflow-hidden">
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-lg font-semibold text-gray-800 dark:text-gray-200">
|
||||
文件传输
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex gap-4 p-4 overflow-hidden">
|
||||
<div className="flex-1 min-w-0">
|
||||
<LocalFilePanel
|
||||
selectedFile={localSelected}
|
||||
onSelect={setLocalSelected}
|
||||
onUpload={handleUpload}
|
||||
disabled={transferring}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<RemoteFilePanel
|
||||
serverHost={serverHost}
|
||||
port={port}
|
||||
password={password}
|
||||
selectedFile={remoteSelected}
|
||||
onSelect={setRemoteSelected}
|
||||
onDownload={handleDownload}
|
||||
disabled={transferring}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TransferQueue
|
||||
transfers={transfers}
|
||||
onClear={handleClearTransfers}
|
||||
onRemove={handleRemoveTransfer}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
154
src/modules/remote/components/file-transfer/LocalFilePanel.tsx
Normal file
154
src/modules/remote/components/file-transfer/LocalFilePanel.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
import React from 'react'
|
||||
import { Folder, FileText, ArrowUp, ChevronRight, ChevronLeft, RefreshCw, HardDrive } from 'lucide-react'
|
||||
import { clsx } from 'clsx'
|
||||
import type { FileItem } from '@/lib/api'
|
||||
import { fetchSystemFiles } from '@/lib/api'
|
||||
|
||||
interface LocalFilePanelProps {
|
||||
selectedFile: FileItem | null
|
||||
onSelect: (file: FileItem | null) => void
|
||||
onUpload: () => void
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export const LocalFilePanel: React.FC<LocalFilePanelProps> = ({
|
||||
selectedFile,
|
||||
onSelect,
|
||||
onUpload,
|
||||
disabled,
|
||||
}) => {
|
||||
const [currentPath, setCurrentPath] = React.useState('')
|
||||
const [files, setFiles] = React.useState<FileItem[]>([])
|
||||
const [loading, setLoading] = React.useState(false)
|
||||
const [pathHistory, setPathHistory] = React.useState<string[]>([''])
|
||||
|
||||
const loadFiles = React.useCallback(async (systemPath: string) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const items = await fetchSystemFiles(systemPath)
|
||||
setFiles(items)
|
||||
} catch (err) {
|
||||
console.error('Failed to load local files:', err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
React.useEffect(() => {
|
||||
loadFiles(currentPath)
|
||||
}, [currentPath, loadFiles])
|
||||
|
||||
const handleGoBack = () => {
|
||||
if (pathHistory.length > 1) {
|
||||
const newHistory = [...pathHistory]
|
||||
newHistory.pop()
|
||||
const prevPath = newHistory[newHistory.length - 1]
|
||||
setPathHistory(newHistory)
|
||||
setCurrentPath(prevPath)
|
||||
onSelect(null)
|
||||
}
|
||||
}
|
||||
|
||||
const handleGoInto = (folder: FileItem) => {
|
||||
setPathHistory([...pathHistory, folder.path])
|
||||
setCurrentPath(folder.path)
|
||||
onSelect(null)
|
||||
}
|
||||
|
||||
const handleRefresh = () => {
|
||||
loadFiles(currentPath)
|
||||
}
|
||||
|
||||
const getDisplayPath = () => {
|
||||
if (!currentPath) return '本地文件'
|
||||
if (currentPath === '' || currentPath === '/') return '根目录'
|
||||
const parts = currentPath.split(/[/\\]/)
|
||||
return parts[parts.length - 1] || currentPath
|
||||
}
|
||||
|
||||
const getFullPathDisplay = () => {
|
||||
if (!currentPath) return ''
|
||||
return currentPath
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
|
||||
<div className="flex items-center justify-between px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleGoBack}
|
||||
disabled={pathHistory.length <= 1}
|
||||
className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
title="返回上级"
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
</button>
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300 truncate max-w-[120px]">
|
||||
{getDisplayPath()}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={loading}
|
||||
className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
|
||||
title="刷新"
|
||||
>
|
||||
<RefreshCw size={14} className={clsx(loading && 'animate-spin')} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-2">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-full text-gray-400">
|
||||
加载中...
|
||||
</div>
|
||||
) : files.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-full text-gray-400">
|
||||
空文件夹
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{files.map((file) => (
|
||||
<div
|
||||
key={file.path}
|
||||
onClick={() => onSelect(file.type === 'dir' ? null : file)}
|
||||
onDoubleClick={() => file.type === 'dir' && handleGoInto(file)}
|
||||
className={clsx(
|
||||
'flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer transition-colors',
|
||||
selectedFile?.path === file.path
|
||||
? 'bg-blue-100 dark:bg-blue-900/30'
|
||||
: 'hover:bg-gray-100 dark:hover:bg-gray-700/50'
|
||||
)}
|
||||
>
|
||||
{file.type === 'dir' ? (
|
||||
<Folder size={16} className="text-yellow-500 flex-shrink-0" />
|
||||
) : (
|
||||
<FileText size={16} className="text-gray-400 flex-shrink-0" />
|
||||
)}
|
||||
<span className="flex-1 truncate text-sm text-gray-700 dark:text-gray-300">
|
||||
{file.name}
|
||||
</span>
|
||||
{selectedFile?.path === file.path && (
|
||||
<div className="w-4 h-4 rounded-full bg-blue-500 flex items-center justify-center">
|
||||
<span className="text-white text-xs">✓</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
|
||||
<button
|
||||
onClick={onUpload}
|
||||
disabled={!selectedFile || disabled}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 dark:disabled:bg-gray-600 text-white rounded-lg transition-colors"
|
||||
>
|
||||
<ArrowUp size={16} />
|
||||
上传
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
155
src/modules/remote/components/file-transfer/RemoteFilePanel.tsx
Normal file
155
src/modules/remote/components/file-transfer/RemoteFilePanel.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
import React from 'react'
|
||||
import { Folder, FileText, ArrowDown, ChevronRight, ChevronLeft, RefreshCw } from 'lucide-react'
|
||||
import { clsx } from 'clsx'
|
||||
import { fetchRemoteFiles, type RemoteFileItem } from '../../api'
|
||||
|
||||
interface RemoteFilePanelProps {
|
||||
serverHost: string
|
||||
port: number
|
||||
password?: string
|
||||
selectedFile: RemoteFileItem | null
|
||||
onSelect: (file: RemoteFileItem | null) => void
|
||||
onDownload: () => void
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export const RemoteFilePanel: React.FC<RemoteFilePanelProps> = ({
|
||||
serverHost,
|
||||
port,
|
||||
password,
|
||||
selectedFile,
|
||||
onSelect,
|
||||
onDownload,
|
||||
disabled,
|
||||
}) => {
|
||||
const [currentPath, setCurrentPath] = React.useState('')
|
||||
const [files, setFiles] = React.useState<RemoteFileItem[]>([])
|
||||
const [loading, setLoading] = React.useState(false)
|
||||
const [pathHistory, setPathHistory] = React.useState<string[]>([''])
|
||||
|
||||
const loadFiles = React.useCallback(async (path: string) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const items = await fetchRemoteFiles(serverHost, port, path, password)
|
||||
setFiles(items)
|
||||
} catch (err) {
|
||||
console.error('Failed to load remote files:', err)
|
||||
setFiles([])
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [serverHost, port, password])
|
||||
|
||||
React.useEffect(() => {
|
||||
loadFiles(currentPath)
|
||||
}, [currentPath, loadFiles])
|
||||
|
||||
const handleGoBack = () => {
|
||||
if (pathHistory.length > 1) {
|
||||
const newHistory = [...pathHistory]
|
||||
newHistory.pop()
|
||||
const prevPath = newHistory[newHistory.length - 1]
|
||||
setPathHistory(newHistory)
|
||||
setCurrentPath(prevPath)
|
||||
onSelect(null)
|
||||
}
|
||||
}
|
||||
|
||||
const handleGoInto = (folder: RemoteFileItem) => {
|
||||
const newPath = currentPath ? `${currentPath}/${folder.name}` : folder.name
|
||||
setPathHistory([...pathHistory, newPath])
|
||||
setCurrentPath(newPath)
|
||||
onSelect(null)
|
||||
}
|
||||
|
||||
const handleRefresh = () => {
|
||||
loadFiles(currentPath)
|
||||
}
|
||||
|
||||
const getDisplayPath = () => {
|
||||
if (!currentPath) return '远程文件'
|
||||
const parts = currentPath.split('/')
|
||||
return parts[parts.length - 1] || currentPath
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
|
||||
<div className="flex items-center justify-between px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleGoBack}
|
||||
disabled={pathHistory.length <= 1}
|
||||
className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
title="返回上级"
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
</button>
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300 truncate max-w-[120px]">
|
||||
{getDisplayPath()}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={loading}
|
||||
className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
|
||||
title="刷新"
|
||||
>
|
||||
<RefreshCw size={14} className={clsx(loading && 'animate-spin')} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-2">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-full text-gray-400">
|
||||
加载中...
|
||||
</div>
|
||||
) : files.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-full text-gray-400">
|
||||
空文件夹
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{files.map((file) => (
|
||||
<div
|
||||
key={file.path}
|
||||
onClick={() => onSelect(file.type === 'dir' ? null : file)}
|
||||
onDoubleClick={() => file.type === 'dir' && handleGoInto(file)}
|
||||
className={clsx(
|
||||
'flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer transition-colors',
|
||||
selectedFile?.path === file.path
|
||||
? 'bg-blue-100 dark:bg-blue-900/30'
|
||||
: 'hover:bg-gray-100 dark:hover:bg-gray-700/50'
|
||||
)}
|
||||
>
|
||||
{file.type === 'dir' ? (
|
||||
<Folder size={16} className="text-yellow-500 flex-shrink-0" />
|
||||
) : (
|
||||
<FileText size={16} className="text-gray-400 flex-shrink-0" />
|
||||
)}
|
||||
<span className="flex-1 truncate text-sm text-gray-700 dark:text-gray-300">
|
||||
{file.name}
|
||||
</span>
|
||||
{selectedFile?.path === file.path && (
|
||||
<div className="w-4 h-4 rounded-full bg-blue-500 flex items-center justify-center">
|
||||
<span className="text-white text-xs">✓</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
|
||||
<button
|
||||
onClick={onDownload}
|
||||
disabled={!selectedFile || disabled}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-green-500 hover:bg-green-600 disabled:bg-gray-300 dark:disabled:bg-gray-600 text-white rounded-lg transition-colors"
|
||||
>
|
||||
<ArrowDown size={16} />
|
||||
下载
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import React from 'react'
|
||||
import { X, ArrowUp, ArrowDown, CheckCircle, XCircle, Loader } from 'lucide-react'
|
||||
import type { TransferItem } from '../../types'
|
||||
|
||||
interface TransferQueueProps {
|
||||
transfers: TransferItem[]
|
||||
onClear: () => void
|
||||
onRemove: (id: string) => void
|
||||
}
|
||||
|
||||
export const TransferQueue: React.FC<TransferQueueProps> = ({ transfers, onClear, onRemove }) => {
|
||||
if (transfers.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 p-3 bg-gray-50 dark:bg-gray-800/50">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
传输队列 ({transfers.length})
|
||||
</span>
|
||||
<button
|
||||
onClick={onClear}
|
||||
className="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
>
|
||||
清空
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-2 max-h-32 overflow-y-auto">
|
||||
{transfers.map((transfer) => (
|
||||
<div
|
||||
key={transfer.id}
|
||||
className="flex items-center gap-2 text-sm bg-white dark:bg-gray-700 rounded px-2 py-1"
|
||||
>
|
||||
{transfer.type === 'upload' ? (
|
||||
<ArrowUp size={14} className="text-blue-500" />
|
||||
) : (
|
||||
<ArrowDown size={14} className="text-green-500" />
|
||||
)}
|
||||
<span className="flex-1 truncate max-w-[120px]">{transfer.name}</span>
|
||||
<div className="flex-1 h-2 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all ${
|
||||
transfer.status === 'error'
|
||||
? 'bg-red-500'
|
||||
: transfer.status === 'completed'
|
||||
? 'bg-green-500'
|
||||
: 'bg-blue-500'
|
||||
}`}
|
||||
style={{ width: `${transfer.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500 w-12">
|
||||
{transfer.status === 'completed'
|
||||
? '完成'
|
||||
: transfer.status === 'error'
|
||||
? '失败'
|
||||
: `${transfer.progress}%`}
|
||||
</span>
|
||||
{transfer.status === 'transferring' && <Loader size={14} className="animate-spin text-blue-500" />}
|
||||
{transfer.status === 'completed' && <CheckCircle size={14} className="text-green-500" />}
|
||||
{transfer.status === 'error' && <XCircle size={14} className="text-red-500" />}
|
||||
<button
|
||||
onClick={() => onRemove(transfer.id)}
|
||||
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user