style: 数据处理卡片并排展示并补充说明

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` 通过；构建产物已清理。

frontend/src/components/FileWorkflow.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="upload-page-body">
+    <div v-if="!taskInProgress" class="upload-card-grid">
       <section
-      v-if="!taskInProgress"
         class="upload-zone"
         :class="{ dragover: isDragging, disabled: working }"
         role="button"
@@ -74,7 +74,6 @@
       </section>
 
       <section
-      v-if="!taskInProgress"
         class="cell-data-upload-zone"
         :class="{ dragover: isCellDataDragging, disabled: cellDataStarting }"
         role="button"
@@ -120,7 +119,7 @@
               @click="startCellDataProcessing"
             >
               <template #icon><n-icon><CloudDownloadOutline /></n-icon></template>
-            远程刷新
+              远程下载并处理
             </n-button>
           </n-space>
         </div>
@@ -134,6 +133,7 @@
           @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>
 

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;