From b237219c187659820afc11de06d7f981775440ae Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Thu, 25 Jun 2026 04:47:24 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=95=B0=E6=8D=AE=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=B9=B6=E6=8E=92=E5=B1=95=E7=A4=BA=E5=B9=B6?=
 =?UTF-8?q?=E8=A1=A5=E5=85=85=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md                  |   6 +
 frontend/src/components/FileWorkflow.vue | 264 ++++++++++++-----------
 frontend/src/styles.css                  |  11 +-
 3 files changed, 150 insertions(+), 131 deletions(-)

diff --git a/docs/project_context.md b/docs/project_context.md
index 44aefaf..36febc2 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -766,3 +766,9 @@
 - 数据处理页的容量数据卡片与 CellData 卡片左上角均显示数据类型，右上角均提供说明图标按钮，点击后以小弹窗展示所需文件格式和目录结构。
 - CellData 卡片改为点击/拖拽文件夹上传，不再提供单文件选择；直接拖入单个 ZIP 会提示选择包含 `Result_300` ZIP 的文件夹。
 - 验证：`frontend` `npm run build` 通过；构建产物已清理。
+
+## 2026-06-25：数据处理卡片并排展示
+
+- 数据处理页容量数据与 CellData 两个卡片在宽屏下左右并排展示，窄屏下自动回落单列，减少对日志区域的挤压。
+- 容量数据说明补充：启用 CellData 数据源时，处理容量数据前会先刷新 CellData；CellData 卡片按钮文案统一为「远程下载并处理」。
+- 验证：`frontend` `npm run build` 通过；构建产物已清理。
diff --git a/frontend/src/components/FileWorkflow.vue b/frontend/src/components/FileWorkflow.vue
index a8c90ad..9127bba 100644
--- a/frontend/src/components/FileWorkflow.vue
+++ b/frontend/src/components/FileWorkflow.vue
@@ -1,139 +1,139 @@
 <template>
   <div class="upload-page-body">
-    <section
-      v-if="!taskInProgress"
-      class="upload-zone"
-      :class="{ dragover: isDragging, disabled: working }"
-      role="button"
-      tabindex="0"
-      :aria-disabled="working"
-      @click="openFilePicker"
-      @keydown.enter.prevent="openFilePicker"
-      @keydown.space.prevent="openFilePicker"
-      @dragenter.prevent.stop="onDragEnter"
-      @dragover.prevent.stop="onDragOver"
-      @dragleave="onDragLeave"
-      @drop.prevent.stop="onDrop"
-    >
-      <span class="upload-card-label">容量数据</span>
-      <n-button
-        quaternary
-        circle
-        size="small"
-        class="upload-help-button"
-        aria-label="查看容量数据说明"
-        title="查看说明"
-        @click.stop="capacityHelpVisible = true"
+    <div v-if="!taskInProgress" class="upload-card-grid">
+      <section
+        class="upload-zone"
+        :class="{ dragover: isDragging, disabled: working }"
+        role="button"
+        tabindex="0"
+        :aria-disabled="working"
+        @click="openFilePicker"
+        @keydown.enter.prevent="openFilePicker"
+        @keydown.space.prevent="openFilePicker"
+        @dragenter.prevent.stop="onDragEnter"
+        @dragover.prevent.stop="onDragOver"
+        @dragleave="onDragLeave"
+        @drop.prevent.stop="onDrop"
       >
-        <template #icon>
-          <n-icon><InformationCircleOutline /></n-icon>
-        </template>
-      </n-button>
-      <div class="upload-icon">
-        <n-icon size="24"><FolderOpenOutline /></n-icon>
-      </div>
-      <h3>拖拽文件夹或文件到这里</h3>
-      <p>支持 .zip, .xlsx, .xls, .csv 格式</p>
-      <div class="upload-zone-actions">
-        <span class="upload-hint">或者点击选择文件</span>
-        <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>
+        <span class="upload-card-label">容量数据</span>
+        <n-button
+          quaternary
+          circle
+          size="small"
+          class="upload-help-button"
+          aria-label="查看容量数据说明"
+          title="查看说明"
+          @click.stop="capacityHelpVisible = true"
+        >
+          <template #icon>
+            <n-icon><InformationCircleOutline /></n-icon>
           </template>
-          从已配置的 FTP/SFTP 目录下载数据自动处理。
-        </n-tooltip>
-      </div>
-      <input
-        ref="fileInput"
-        class="hidden-input"
-        type="file"
-        multiple
-        accept=".zip,.xlsx,.xls,.csv"
-        @change="pickFiles"
-      />
-      <input
-        ref="folderInput"
-        class="hidden-input"
-        type="file"
-        multiple
-        webkitdirectory
-        directory
-        @change="pickFiles"
-      />
-    </section>
+        </n-button>
+        <div class="upload-icon">
+          <n-icon size="24"><FolderOpenOutline /></n-icon>
+        </div>
+        <h3>拖拽文件夹或文件到这里</h3>
+        <p>支持 .zip, .xlsx, .xls, .csv 格式</p>
+        <div class="upload-zone-actions">
+          <span class="upload-hint">或者点击选择文件</span>
+          <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"
+          type="file"
+          multiple
+          accept=".zip,.xlsx,.xls,.csv"
+          @change="pickFiles"
+        />
+        <input
+          ref="folderInput"
+          class="hidden-input"
+          type="file"
+          multiple
+          webkitdirectory
+          directory
+          @change="pickFiles"
+        />
+      </section>
 
-    <section
-      v-if="!taskInProgress"
-      class="cell-data-upload-zone"
-      :class="{ dragover: isCellDataDragging, disabled: cellDataStarting }"
-      role="button"
-      tabindex="0"
-      :aria-disabled="cellDataStarting"
-      @click="cellDataFolderInput?.click()"
-      @keydown.enter.prevent="cellDataFolderInput?.click()"
-      @keydown.space.prevent="cellDataFolderInput?.click()"
-      @dragenter.prevent.stop="onCellDataDragEnter"
-      @dragover.prevent.stop="onCellDataDragOver"
-      @dragleave="onCellDataDragLeave"
-      @drop.prevent.stop="onCellDataDrop"
-    >
-      <span class="upload-card-label">CellData</span>
-      <n-button
-        quaternary
-        circle
-        size="small"
-        class="upload-help-button"
-        aria-label="查看 CellData 文件说明"
-        title="查看说明"
-        @click.stop="cellDataHelpVisible = true"
+      <section
+        class="cell-data-upload-zone"
+        :class="{ dragover: isCellDataDragging, disabled: cellDataStarting }"
+        role="button"
+        tabindex="0"
+        :aria-disabled="cellDataStarting"
+        @click="cellDataFolderInput?.click()"
+        @keydown.enter.prevent="cellDataFolderInput?.click()"
+        @keydown.space.prevent="cellDataFolderInput?.click()"
+        @dragenter.prevent.stop="onCellDataDragEnter"
+        @dragover.prevent.stop="onCellDataDragOver"
+        @dragleave="onCellDataDragLeave"
+        @drop.prevent.stop="onCellDataDrop"
       >
-        <template #icon>
-          <n-icon><InformationCircleOutline /></n-icon>
-        </template>
-      </n-button>
-      <div class="upload-icon">
-        <n-icon size="24"><FolderOpenOutline /></n-icon>
-      </div>
-      <div class="cell-data-upload-text">
-        <h3>拖拽文件夹到这里</h3>
-        <p>包含 700M、2.6G 等目录</p>
-      </div>
-      <div class="upload-zone-actions">
-        <span class="upload-hint">或者点击选择文件夹</span>
-        <n-space size="small" @click.stop @keydown.stop>
-          <n-button
-            type="primary"
-            secondary
-            :loading="cellDataStarting"
-            :disabled="working || remoteStarting || cellDataStarting"
-            @click="startCellDataProcessing"
-          >
-            <template #icon><n-icon><CloudDownloadOutline /></n-icon></template>
-            远程刷新
-          </n-button>
-        </n-space>
-      </div>
-      <input
-        ref="cellDataFolderInput"
-        class="hidden-input"
-        type="file"
-        multiple
-        webkitdirectory
-        directory
-        @change="pickCellDataFiles"
-      />
-    </section>
+        <span class="upload-card-label">CellData</span>
+        <n-button
+          quaternary
+          circle
+          size="small"
+          class="upload-help-button"
+          aria-label="查看 CellData 文件说明"
+          title="查看说明"
+          @click.stop="cellDataHelpVisible = true"
+        >
+          <template #icon>
+            <n-icon><InformationCircleOutline /></n-icon>
+          </template>
+        </n-button>
+        <div class="upload-icon">
+          <n-icon size="24"><FolderOpenOutline /></n-icon>
+        </div>
+        <div class="cell-data-upload-text">
+          <h3>拖拽文件夹到这里</h3>
+          <p>包含 700M、2.6G 等目录</p>
+        </div>
+        <div class="upload-zone-actions">
+          <span class="upload-hint">或者点击选择文件夹</span>
+          <n-space size="small" @click.stop @keydown.stop>
+            <n-button
+              type="primary"
+              secondary
+              :loading="cellDataStarting"
+              :disabled="working || remoteStarting || cellDataStarting"
+              @click="startCellDataProcessing"
+            >
+              <template #icon><n-icon><CloudDownloadOutline /></n-icon></template>
+              远程下载并处理
+            </n-button>
+          </n-space>
+        </div>
+        <input
+          ref="cellDataFolderInput"
+          class="hidden-input"
+          type="file"
+          multiple
+          webkitdirectory
+          directory
+          @change="pickCellDataFiles"
+        />
+      </section>
+    </div>
 
     <div v-if="!taskInProgress && files.length > 0" class="file-list">
       <div class="file-list-header">
@@ -274,6 +274,10 @@
           <h4>远程处理</h4>
           <p>使用系统设置中的数据源配置下载并处理。</p>
         </section>
+        <section class="cell-data-help-section">
+          <h4>CellData</h4>
+          <p>启用 CellData 数据源时，处理容量数据前会先刷新 CellData。</p>
+        </section>
       </n-scrollbar>
     </n-modal>
 
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index bbb3874..9b7d9b5 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -570,6 +570,12 @@ select {
   margin-top: 12px;
 }
 
+.upload-card-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
 .remote-run-trigger {
   display: inline-flex;
 }
@@ -581,7 +587,6 @@ select {
   justify-content: center;
   flex-direction: column;
   gap: 10px;
-  margin-top: 16px;
   padding: 24px 18px;
   text-align: center;
   background: var(--td-bg-color-container);
@@ -2190,6 +2195,10 @@ select {
     padding: 16px;
   }
 
+  .upload-card-grid {
+    grid-template-columns: 1fr;
+  }
+
   .history-item {
     align-items: flex-start;
     flex-direction: column;