From 25cfe2ae0b0ab1220aef33e7fd57952e035b3219 Mon Sep 17 00:00:00 2001
From: liumangmang <a362165265@qq.com>
Date: Thu, 7 May 2026 14:33:39 +0800
Subject: [PATCH] Please provide the file changes or a description of the
 modifications so I can generate the appropriate commit message for you.

---
 .../src/components/TransferCenterModal.tsx    | 148 +++++++++++-------
 1 file changed, 95 insertions(+), 53 deletions(-)

diff --git a/frontend/src/components/TransferCenterModal.tsx b/frontend/src/components/TransferCenterModal.tsx
index 712b534..60c84b3 100644
--- a/frontend/src/components/TransferCenterModal.tsx
+++ b/frontend/src/components/TransferCenterModal.tsx
@@ -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">