调整上传数据页列表工具栏布局

docs/reports/implementation/2026-03-25-project-upload-page-light-redesign-frontend-record.md

@@ -2,13 +2,16 @@
 
 ## 本次改动
 - 移除上传数据页中的上传流水卡片
-- 将上传流水提升为右上角唯一主按钮
+- 移除上传数据页标题卡片，将操作入口收束到文件上传列表右上角
-- 统一头部、锁定提示和文件记录区视觉
+- 右上角按钮顺序调整为上传流水、拉取本行信息、征信导入、查看报告
+- 查看报告保留重要按钮样式，其余头部按钮改为默认样式
+- 文件上传列表表头移除自定义颜色，统一锁定提示和文件记录区视觉
 
 ## 影响文件
 - `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
 - `ruoyi-ui/tests/unit/upload-data-header-import-button.test.js`
 - `ruoyi-ui/tests/unit/upload-data-disabled-cards.test.js`
+- `ruoyi-ui/tests/unit/upload-data-file-list-table.test.js`
 
 ## 验证
 - `node ruoyi-ui/tests/unit/upload-data-header-import-button.test.js`

ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue

@@ -2,27 +2,23 @@
   <div class="upload-data-container">
     <!-- 主内容区 -->
     <div class="main-content">
-      <!-- 页面头部 -->
+      <div v-if="isProjectTagging || isProjectArchived" class="tagging-lock-tip">
-      <div class="content-header">
+        {{ isProjectArchived ? "项目已归档，暂不可上传或拉取数据。" : "项目正在进行银行流水打标，暂不可上传或拉取数据。" }}
-        <h2 class="content-title">{{ currentMenuTitle }}</h2>
+      </div>
-        <div class="header-actions">
+
+      <!-- 文件上传记录列表 -->
+      <div class="file-list-section">
+        <div class="list-toolbar">
+          <el-button icon="el-icon-refresh" @click="handleManualRefresh">刷新</el-button>
+          <div class="toolbar-actions">
             <el-button
               size="small"
-            type="primary"
               icon="el-icon-upload2"
               :disabled="isProjectTagging || isProjectArchived"
               @click="handleOpenBatchUploadDialog"
             >
               上传流水
             </el-button>
-          <el-button
-            size="small"
-            icon="el-icon-view"
-            :disabled="isReportDisabled"
-            @click="handleViewReport"
-          >
-            查看报告
-          </el-button>
             <el-button
               size="small"
               icon="el-icon-download"
@@ -39,19 +35,18 @@
             >
               征信导入
             </el-button>
+            <el-button
+              size="small"
+              type="primary"
+              icon="el-icon-view"
+              :disabled="isReportDisabled"
+              @click="handleViewReport"
+            >
+              查看报告
+            </el-button>
           </div>
         </div>
 
-      <div v-if="isProjectTagging || isProjectArchived" class="tagging-lock-tip">
-        {{ isProjectArchived ? "项目已归档，暂不可上传或拉取数据。" : "项目正在进行银行流水打标，暂不可上传或拉取数据。" }}
-      </div>
-
-      <!-- 文件上传记录列表 -->
-      <div class="file-list-section">
-        <div class="list-toolbar">
-          <el-button icon="el-icon-refresh" @click="handleManualRefresh">刷新</el-button>
-        </div>
-
         <el-table :data="fileUploadList" v-loading="listLoading">
           <el-table-column prop="fileName" label="文件名" min-width="200"></el-table-column>
           <el-table-column prop="fileSize" label="文件大小" width="120">
@@ -1022,38 +1017,6 @@ export default {
 
 // 主内容区
 .main-content {
-  .content-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 16px;
-    margin-bottom: 16px;
-    padding: 20px 24px;
-    border: 1px solid #ebeef5;
-    border-radius: 12px;
-    background: linear-gradient(135deg, #fffaf5 0%, #ffffff 58%, #fff4ec 100%);
-    box-shadow: 0 10px 24px rgba(140, 76, 38, 0.08);
-
-    .content-title {
-      margin: 0;
-      font-size: 20px;
-      font-weight: 600;
-      color: #303133;
-      line-height: 32px;
-    }
-
-    .header-actions {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      gap: 12px;
-
-      .el-button {
-        min-width: 104px;
-      }
-    }
-  }
-
   .tagging-lock-tip {
     margin-bottom: 16px;
     padding: 10px 14px;
@@ -1075,11 +1038,22 @@ export default {
 
   .list-toolbar {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
     align-items: center;
     margin-bottom: 16px;
     padding-bottom: 12px;
     border-bottom: 1px solid #f0f2f5;
+
+    .toolbar-actions {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      gap: 12px;
+
+      .el-button {
+        min-width: 104px;
+      }
+    }
   }
 
   ::v-deep .el-table {
@@ -1089,8 +1063,6 @@ export default {
   }
 
   ::v-deep .el-table th {
-    background: #faf6f2;
-    color: #5f4b3a;
     font-weight: 600;
   }
 }
@@ -1275,8 +1247,8 @@ export default {
 
 // 响应式
 @media (max-width: 1200px) {
-  .main-content .content-header {
+  .file-list-section .list-toolbar .toolbar-actions {
-    padding: 18px 20px;
+    gap: 10px;
   }
 }
 
@@ -1289,21 +1261,15 @@ export default {
     margin-bottom: 16px;
   }
 
-  .content-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 12px;
-
-    .header-actions {
-      width: 100%;
-      justify-content: flex-start;
-    }
-  }
-
   .file-list-section .list-toolbar {
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
+
+    .toolbar-actions {
+      width: 100%;
+      justify-content: flex-start;
+    }
   }
 
   .pull-bank-file-panel {

ruoyi-ui/tests/unit/upload-data-file-list-table.test.js

@@ -22,4 +22,16 @@ assert(
   "上传数据文件列表表格不应再启用斑马纹"
 );
 
+const tableHeaderStyleMatch = source.match(
+  /::v-deep \.el-table th\s*\{([^}]*)\}/
+);
+
+assert(tableHeaderStyleMatch, "未找到文件上传列表表头样式");
+assert(
+  /font-weight:\s*600;/.test(tableHeaderStyleMatch[1]) &&
+    !/background:/.test(tableHeaderStyleMatch[1]) &&
+    !/color:/.test(tableHeaderStyleMatch[1]),
+  "文件上传列表表头应移除自定义颜色，仅保留基础字重"
+);
+
 console.log("upload-data-file-list-table test passed");

ruoyi-ui/tests/unit/upload-data-header-import-button.test.js

@@ -9,17 +9,33 @@ const componentPath = path.resolve(
 const source = fs.readFileSync(componentPath, "utf8");
 
 assert(
-  /<div class="header-actions">[\s\S]*?@click="handleOpenBatchUploadDialog"[\s\S]*?>\s*上传流水\s*<\/el-button>[\s\S]*?@click="handleViewReport"[\s\S]*?>\s*查看报告\s*<\/el-button>[\s\S]*?@click="handleFetchBankInfo"[\s\S]*?>\s*拉取本行信息\s*<\/el-button>[\s\S]*?@click="handleGoCreditInfoPage"[\s\S]*?>\s*征信导入\s*<\/el-button>/.test(
+  /<div class="list-toolbar">[\s\S]*?<div class="toolbar-actions">[\s\S]*?@click="handleOpenBatchUploadDialog"[\s\S]*?>\s*上传流水\s*<\/el-button>[\s\S]*?@click="handleFetchBankInfo"[\s\S]*?>\s*拉取本行信息\s*<\/el-button>[\s\S]*?@click="handleGoCreditInfoPage"[\s\S]*?>\s*征信导入\s*<\/el-button>[\s\S]*?@click="handleViewReport"[\s\S]*?>\s*查看报告\s*<\/el-button>/.test(
     source
   ),
-  "页面右上角按钮顺序应为上传流水、查看报告、拉取本行信息、征信导入"
+  "文件上传列表右上角按钮顺序应为上传流水、拉取本行信息、征信导入、查看报告"
 );
 
 assert(
-  /<el-button[\s\S]*?type="primary"[\s\S]*?@click="handleOpenBatchUploadDialog"[\s\S]*?>\s*上传流水\s*<\/el-button>/.test(
+  /<el-button[\s\S]*?type="primary"[\s\S]*?@click="handleViewReport"[\s\S]*?>\s*查看报告\s*<\/el-button>/.test(
     source
   ),
-  "上传流水按钮应为头部唯一主按钮"
+  "查看报告按钮应为头部唯一重要按钮"
+);
+
+assert(
+  /<el-button[\s\S]*?@click="handleOpenBatchUploadDialog"[\s\S]*?>\s*上传流水\s*<\/el-button>/.test(
+    source
+  ) &&
+    !/<el-button[\s\S]*?type="primary"[\s\S]*?@click="handleOpenBatchUploadDialog"[\s\S]*?>\s*上传流水\s*<\/el-button>/.test(
+      source
+    ),
+  "上传流水按钮应为默认样式"
+);
+
+assert(
+  !/class="content-header"/.test(source) &&
+    !/\.content-header\s*\{/.test(source),
+  "页面标题卡片和相关样式应已移除"
 );
 
 assert(