75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
|
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>
|
||
|
|
)
|
||
|
|
}
|