Please provide the file changes or a description of the modifications so I can generate the appropriate commit message for you.
This commit is contained in:
liumangmang
@@ -213,67 +213,109 @@ export default function TransferCenterModal({
|
||||
{/* Left panel */}
|
||||
<div className="flex flex-1 overflow-hidden border-r border-slate-800 bg-slate-900/70 p-6">
|
||||
{tab === 'local' ? (
|
||||
<div className="flex flex-1 flex-col space-y-6">
|
||||
<label className="space-y-2">
|
||||
<span className="text-sm text-slate-300">1. 选择本地文件</span>
|
||||
<div className="rounded-2xl border-2 border-dashed border-slate-600 bg-slate-800/40 p-6 text-center">
|
||||
<input type="file" onChange={(event) => setLocalFiles(event.target.files)} className="mx-auto block text-sm text-slate-300" />
|
||||
<div className="mt-2 text-xs text-slate-500">{localFiles?.[0]?.name || '支持多选文件/文件夹'}</div>
|
||||
<div className="flex h-full flex-1 gap-6 overflow-hidden">
|
||||
{/* Source config */}
|
||||
<div className="flex w-1/2 shrink-0 flex-col gap-4 overflow-y-auto border-r border-slate-800 pr-6">
|
||||
<h3 className="flex items-center gap-2 text-sm font-bold text-blue-400">
|
||||
<Monitor size={16} />
|
||||
源配置
|
||||
</h3>
|
||||
|
||||
<div className="space-y-2">
|
||||
<span className="text-sm text-slate-300">选择本地文件</span>
|
||||
<label className="group flex cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-700 bg-slate-800/30 px-6 py-8 transition-all hover:border-blue-500 hover:bg-blue-500/5">
|
||||
<div className="mb-3 rounded-full bg-slate-800 p-3 shadow-sm transition-colors group-hover:bg-blue-600">
|
||||
<FileUp size={24} className="text-slate-400 transition-colors group-hover:text-white" />
|
||||
</div>
|
||||
<span className="text-sm font-medium text-slate-200 transition-colors group-hover:text-blue-400">
|
||||
{localFiles && localFiles.length > 0 ? '重新选择文件' : '点击选择本地文件'}
|
||||
</span>
|
||||
<span className="mt-1 max-w-full truncate text-xs text-slate-500">
|
||||
{localFiles && localFiles.length > 0 ? (
|
||||
<span className="text-emerald-400">{localFiles.length === 1 ? localFiles[0].name : `已选择 ${localFiles.length} 个文件`}</span>
|
||||
) : (
|
||||
'支持多选文件/文件夹'
|
||||
)}
|
||||
</span>
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={(event) => setLocalFiles(event.target.files)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</label>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
|
||||
<label className="space-y-2">
|
||||
<span className="text-sm text-slate-300">2. 目标路径</span>
|
||||
<span className="text-sm text-slate-300">目标路径</span>
|
||||
<input className="w-full rounded-xl border border-slate-700 bg-black px-4 py-3 text-sm text-white" value={localTargetPath} onChange={(event) => setLocalTargetPath(event.target.value)} />
|
||||
</label>
|
||||
<div className="space-y-2">
|
||||
<span className="text-sm text-slate-300">并发数</span>
|
||||
<div className="rounded-xl border border-slate-700 bg-black px-4 py-3 text-sm text-slate-400">按浏览器任务并行执行</div>
|
||||
|
||||
<div className="mt-auto rounded-xl border border-slate-800 bg-slate-950/50 px-4 py-3 text-xs text-slate-500">
|
||||
<p className="font-medium text-slate-400">⚡ 并发执行</p>
|
||||
<p className="mt-1">分发任务将按浏览器任务并行执行。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex min-h-0 flex-1 flex-col space-y-2">
|
||||
<span className="shrink-0 text-sm text-slate-300">3. 目标服务器</span>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto rounded-2xl border border-slate-700 bg-black p-2">
|
||||
{connections.map((server) => {
|
||||
const st = connectionStatuses[server.id]
|
||||
const isOnline = st === 'online'
|
||||
return (
|
||||
<label
|
||||
key={server.id}
|
||||
className={`flex items-center gap-2 rounded-xl px-3 py-2 ${
|
||||
isOnline ? 'cursor-pointer hover:bg-slate-800' : 'cursor-not-allowed opacity-40'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
disabled={!isOnline}
|
||||
checked={targetIds.includes(server.id)}
|
||||
onChange={() =>
|
||||
setTargetIds((prev) =>
|
||||
prev.includes(server.id) ? prev.filter((item) => item !== server.id) : [...prev, server.id],
|
||||
)
|
||||
}
|
||||
/>
|
||||
<StatusDot status={st} />
|
||||
<Server size={14} className={isOnline ? 'text-emerald-500' : 'text-slate-600'} />
|
||||
<span className="text-sm text-slate-300">{server.name}</span>
|
||||
</label>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Target config */}
|
||||
<div className="flex min-w-0 flex-1 flex-col gap-4 overflow-hidden">
|
||||
<h3 className="flex items-center gap-2 text-sm font-bold text-blue-400">
|
||||
<Target size={16} />
|
||||
目标配置
|
||||
</h3>
|
||||
|
||||
<div className="flex min-h-0 flex-1 flex-col space-y-2">
|
||||
<div className="flex shrink-0 items-center justify-between">
|
||||
<span className="text-sm text-slate-300">目标服务器</span>
|
||||
<button
|
||||
className="text-xs text-blue-400"
|
||||
onClick={() => setTargetIds(connections.filter((c) => connectionStatuses[c.id] === 'online').map((c) => c.id))}
|
||||
>
|
||||
全选在线
|
||||
</button>
|
||||
</div>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto rounded-2xl border border-slate-700 bg-black p-2">
|
||||
{connections.map((server) => {
|
||||
const st = connectionStatuses[server.id]
|
||||
const isOnline = st === 'online'
|
||||
return (
|
||||
<label
|
||||
key={server.id}
|
||||
className={`flex items-center gap-2 rounded-xl px-3 py-2 ${
|
||||
isOnline ? 'cursor-pointer hover:bg-slate-800' : 'cursor-not-allowed opacity-40'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
disabled={!isOnline}
|
||||
checked={targetIds.includes(server.id)}
|
||||
onChange={() =>
|
||||
setTargetIds((prev) =>
|
||||
prev.includes(server.id) ? prev.filter((item) => item !== server.id) : [...prev, server.id],
|
||||
)
|
||||
}
|
||||
/>
|
||||
<StatusDot status={st} />
|
||||
<span className="text-sm text-slate-300">{server.name}</span>
|
||||
</label>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className={`flex w-full items-center justify-center gap-2 rounded-xl py-3 font-medium transition ${
|
||||
!localFiles?.length || targetIds.length === 0
|
||||
? 'cursor-not-allowed bg-slate-800 text-slate-500'
|
||||
: 'bg-blue-600 text-white hover:bg-blue-500'
|
||||
}`}
|
||||
disabled={!localFiles?.length || targetIds.length === 0}
|
||||
onClick={() => void handleStartLocal()}
|
||||
>
|
||||
<Upload size={18} />
|
||||
{!localFiles?.length ? '请选择本地文件' : targetIds.length === 0 ? '请选择目标服务器' : '开始分发'}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className={`flex w-full items-center justify-center gap-2 rounded-xl py-3 font-medium transition ${
|
||||
!localFiles?.length || targetIds.length === 0
|
||||
? 'cursor-not-allowed bg-slate-800 text-slate-500'
|
||||
: 'bg-blue-600 text-white hover:bg-blue-500'
|
||||
}`}
|
||||
disabled={!localFiles?.length || targetIds.length === 0}
|
||||
onClick={() => void handleStartLocal()}
|
||||
>
|
||||
<Upload size={18} />
|
||||
{!localFiles?.length ? '请选择本地文件' : targetIds.length === 0 ? '请选择目标服务器' : '开始分发'}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-full flex-1 gap-6 overflow-hidden">
|
||||
|
||||
Reference in New Issue
Block a user