fix: 调整上传页远程下载入口

This commit is contained in:
2026-05-19 11:48:22 +08:00
parent 1cd1410dee
commit f1075695a1
3 changed files with 37 additions and 42 deletions
+7
View File
@@ -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 过滤规则` 卡片不可达。
+20 -12
View File
@@ -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>
+10 -30
View File
@@ -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,