From f1075695a180ff180ee94c001a64a88558d82df3 Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Tue, 19 May 2026 11:48:22 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E9=A1=B5=E8=BF=9C=E7=A8=8B=E4=B8=8B=E8=BD=BD=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md                  |  7 +++++
 frontend/src/components/FileWorkflow.vue | 32 ++++++++++++-------
 frontend/src/styles.css                  | 40 ++++++------------------
 3 files changed, 37 insertions(+), 42 deletions(-)

diff --git a/docs/project_context.md b/docs/project_context.md
index b7d5713..4652485 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -1,5 +1,12 @@
 # 项目上下文记录
 
+## 2026-05-19：调整上传页远程下载入口
+
+- `frontend/src/components/FileWorkflow.vue` 将“远程下载并处理”按钮移动到拖拽上传框内部，删除独立的“远程自动化”卡片，上传页首屏只保留一个主要操作区域。
+- 远程入口说明“从已配置的 FTP/SFTP 目录递归下载数据，然后自动开始处理。”改为按钮 hover tooltip 展示；按钮点击使用事件阻止冒泡，避免触发拖拽框的本地文件选择逻辑。
+- `frontend/src/styles.css` 清理远程自动化卡片样式，新增拖拽框内操作区样式。
+- 已执行 `npm run build`；已通过本机 Chrome DevTools 验证 `/upload`：远程按钮位于拖拽框内，外部远程卡片 DOM 数量为 0，tooltip 文案正常显示。
+
 ## 2026-05-19：修复规则映射窄宽度滚动
 
 - `frontend/src/styles.css` 将系统设置的规则映射区域改为 tab 内部滚动容器，避免宽度或高度不足时被 `overflow: hidden` 裁切导致 `Sheet 过滤规则` 卡片不可达。
diff --git a/frontend/src/components/FileWorkflow.vue b/frontend/src/components/FileWorkflow.vue
index 1c80439..b21b178 100644
--- a/frontend/src/components/FileWorkflow.vue
+++ b/frontend/src/components/FileWorkflow.vue
@@ -20,7 +20,26 @@
       </div>
       <h3>拖拽文件夹或文件到这里</h3>
       <p>支持 .zip, .xlsx, .xls, .csv 格式</p>
-      <p class="upload-hint">或者点击选择文件</p>
+      <div class="upload-zone-actions">
+        <span class="upload-hint">或者点击选择文件</span><br>
+        <n-tooltip trigger="hover" placement="bottom">
+          <template #trigger>
+            <span class="remote-run-trigger" @click.stop @keydown.stop>
+              <n-button
+                type="primary"
+                secondary
+                :loading="remoteStarting"
+                :disabled="working || remoteStarting"
+                @click.stop="startRemoteProcessing"
+              >
+                <template #icon><n-icon><CloudDownloadOutline /></n-icon></template>
+                远程下载并处理
+              </n-button>
+            </span>
+          </template>
+          从已配置的 FTP/SFTP 目录递归下载数据，然后自动开始处理。
+        </n-tooltip>
+      </div>
       <input
         ref="fileInput"
         class="hidden-input"
@@ -40,17 +59,6 @@
       />
     </section>
 
-    <section v-if="!taskInProgress" class="remote-run-card">
-      <div class="remote-run-copy">
-        <h4>远程自动化</h4>
-        <p>从已配置的 FTP/SFTP 目录递归下载数据，然后自动开始处理。</p>
-      </div>
-      <n-button type="primary" secondary :loading="remoteStarting" :disabled="working" @click="startRemoteProcessing">
-        <template #icon><n-icon><CloudDownloadOutline /></n-icon></template>
-        远程下载并处理
-      </n-button>
-    </section>
-
     <div v-if="!taskInProgress && files.length > 0" class="file-list">
       <div class="file-list-header">
         <h4>已选择文件</h4>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 6ca8ed9..35e34eb 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -589,39 +589,24 @@ select {
 }
 
 .upload-hint {
-  margin-top: 12px !important;
+  display: inline-flex;
+  align-items: center;
+  margin-top: 0 !important;
   color: var(--td-brand-color) !important;
   font-size: 13px !important;
 }
 
-.remote-run-card {
+.upload-zone-actions {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin-top: 16px;
-  padding: 16px 20px;
-  background: var(--td-bg-color-container);
-  border: 1px solid var(--td-border-color-light);
-  border-radius: var(--td-radius-default);
+  justify-content: center;
+  gap: 12px;
+  margin-top: 12px;
+  flex-wrap: wrap;
 }
 
-.remote-run-copy {
-  min-width: 0;
-}
-
-.remote-run-copy h4 {
-  margin: 0 0 4px;
-  color: var(--td-text-color-primary);
-  font-size: 15px;
-  font-weight: 600;
-}
-
-.remote-run-copy p {
-  margin: 0;
-  color: var(--td-text-color-secondary);
-  font-size: 13px;
-  line-height: 20px;
+.remote-run-trigger {
+  display: inline-flex;
 }
 
 .file-list {
@@ -1700,11 +1685,6 @@ select {
     justify-content: flex-end;
   }
 
-  .remote-run-card {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
   .card-actions,
   .settings-card-header,
   .field-card-title-row,