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,139 +1,139 @@
 <template>
   <div class="upload-page-body">
-    <section
+    <div v-if="!taskInProgress" class="upload-card-grid">
-      v-if="!taskInProgress"
+      <section
-      class="upload-zone"
+        class="upload-zone"
-      :class="{ dragover: isDragging, disabled: working }"
+        :class="{ dragover: isDragging, disabled: working }"
-      role="button"
+        role="button"
-      tabindex="0"
+        tabindex="0"
-      :aria-disabled="working"
+        :aria-disabled="working"
-      @click="openFilePicker"
+        @click="openFilePicker"
-      @keydown.enter.prevent="openFilePicker"
+        @keydown.enter.prevent="openFilePicker"
-      @keydown.space.prevent="openFilePicker"
+        @keydown.space.prevent="openFilePicker"
-      @dragenter.prevent.stop="onDragEnter"
+        @dragenter.prevent.stop="onDragEnter"
-      @dragover.prevent.stop="onDragOver"
+        @dragover.prevent.stop="onDragOver"
-      @dragleave="onDragLeave"
+        @dragleave="onDragLeave"
-      @drop.prevent.stop="onDrop"
+        @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"
       >
-        <template #icon>
+        <span class="upload-card-label">容量数据</span>
-          <n-icon><InformationCircleOutline /></n-icon>
+        <n-button
-        </template>
+          quaternary
-      </n-button>
+          circle
-      <div class="upload-icon">
+          size="small"
-        <n-icon size="24"><FolderOpenOutline /></n-icon>
+          class="upload-help-button"
-      </div>
+          aria-label="查看容量数据说明"
-      <h3>拖拽文件夹或文件到这里</h3>
+          title="查看说明"
-      <p>支持 .zip, .xlsx, .xls, .csv 格式</p>
+          @click.stop="capacityHelpVisible = true"
-      <div class="upload-zone-actions">
+        >
-        <span class="upload-hint">或者点击选择文件</span>
+          <template #icon>
-        <n-tooltip trigger="hover" placement="bottom">
+            <n-icon><InformationCircleOutline /></n-icon>
-          <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-button>
-        </n-tooltip>
+        <div class="upload-icon">
-      </div>
+          <n-icon size="24"><FolderOpenOutline /></n-icon>
-      <input
+        </div>
-        ref="fileInput"
+        <h3>拖拽文件夹或文件到这里</h3>
-        class="hidden-input"
+        <p>支持 .zip, .xlsx, .xls, .csv 格式</p>
-        type="file"
+        <div class="upload-zone-actions">
-        multiple
+          <span class="upload-hint">或者点击选择文件</span>
-        accept=".zip,.xlsx,.xls,.csv"
+          <n-tooltip trigger="hover" placement="bottom">
-        @change="pickFiles"
+            <template #trigger>
-      />
+              <span class="remote-run-trigger" @click.stop @keydown.stop>
-      <input
+                <n-button
-        ref="folderInput"
+                  type="primary"
-        class="hidden-input"
+                  secondary
-        type="file"
+                  :loading="remoteStarting"
-        multiple
+                  :disabled="working || remoteStarting"
-        webkitdirectory
+                  @click.stop="startRemoteProcessing"
-        directory
+                >
-        @change="pickFiles"
+                  <template #icon><n-icon><CloudDownloadOutline /></n-icon></template>
-      />
+                  远程下载并处理
-    </section>
+                </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
+      <section
-      v-if="!taskInProgress"
+        class="cell-data-upload-zone"
-      class="cell-data-upload-zone"
+        :class="{ dragover: isCellDataDragging, disabled: cellDataStarting }"
-      :class="{ dragover: isCellDataDragging, disabled: cellDataStarting }"
+        role="button"
-      role="button"
+        tabindex="0"
-      tabindex="0"
+        :aria-disabled="cellDataStarting"
-      :aria-disabled="cellDataStarting"
+        @click="cellDataFolderInput?.click()"
-      @click="cellDataFolderInput?.click()"
+        @keydown.enter.prevent="cellDataFolderInput?.click()"
-      @keydown.enter.prevent="cellDataFolderInput?.click()"
+        @keydown.space.prevent="cellDataFolderInput?.click()"
-      @keydown.space.prevent="cellDataFolderInput?.click()"
+        @dragenter.prevent.stop="onCellDataDragEnter"
-      @dragenter.prevent.stop="onCellDataDragEnter"
+        @dragover.prevent.stop="onCellDataDragOver"
-      @dragover.prevent.stop="onCellDataDragOver"
+        @dragleave="onCellDataDragLeave"
-      @dragleave="onCellDataDragLeave"
+        @drop.prevent.stop="onCellDataDrop"
-      @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"
       >
-        <template #icon>
+        <span class="upload-card-label">CellData</span>
-          <n-icon><InformationCircleOutline /></n-icon>
+        <n-button
-        </template>
+          quaternary
-      </n-button>
+          circle
-      <div class="upload-icon">
+          size="small"
-        <n-icon size="24"><FolderOpenOutline /></n-icon>
+          class="upload-help-button"
-      </div>
+          aria-label="查看 CellData 文件说明"
-      <div class="cell-data-upload-text">
+          title="查看说明"
-        <h3>拖拽文件夹到这里</h3>
+          @click.stop="cellDataHelpVisible = true"
-        <p>包含 700M、2.6G 等目录</p>
+        >
-      </div>
+          <template #icon>
-      <div class="upload-zone-actions">
+            <n-icon><InformationCircleOutline /></n-icon>
-        <span class="upload-hint">或者点击选择文件夹</span>
+          </template>
-        <n-space size="small" @click.stop @keydown.stop>
+        </n-button>
-          <n-button
+        <div class="upload-icon">
-            type="primary"
+          <n-icon size="24"><FolderOpenOutline /></n-icon>
-            secondary
+        </div>
-            :loading="cellDataStarting"
+        <div class="cell-data-upload-text">
-            :disabled="working || remoteStarting || cellDataStarting"
+          <h3>拖拽文件夹到这里</h3>
-            @click="startCellDataProcessing"
+          <p>包含 700M、2.6G 等目录</p>
-          >
+        </div>
-            <template #icon><n-icon><CloudDownloadOutline /></n-icon></template>
+        <div class="upload-zone-actions">
-            远程刷新
+          <span class="upload-hint">或者点击选择文件夹</span>
-          </n-button>
+          <n-space size="small" @click.stop @keydown.stop>
-        </n-space>
+            <n-button
-      </div>
+              type="primary"
-      <input
+              secondary
-        ref="cellDataFolderInput"
+              :loading="cellDataStarting"
-        class="hidden-input"
+              :disabled="working || remoteStarting || cellDataStarting"
-        type="file"
+              @click="startCellDataProcessing"
-        multiple
+            >
-        webkitdirectory
+              <template #icon><n-icon><CloudDownloadOutline /></n-icon></template>
-        directory
+              远程下载并处理
-        @change="pickCellDataFiles"
+            </n-button>
-      />
+          </n-space>
-    </section>
+        </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>
 

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;