From d9f3165872126cad58ef9474eb7e43e6d2ba517f Mon Sep 17 00:00:00 2001
From: wkc <978997012@qq.com>
Date: Wed, 11 Mar 2026 15:08:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E9=80=A0=E6=B5=81=E6=B0=B4=E6=98=8E?=
 =?UTF-8?q?=E7=BB=86=E8=AF=A6=E6=83=85=E5=BC=B9=E7=AA=97=E5=B9=B6=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E5=88=97=E8=A1=A8=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../domain/vo/CcdiBankStatementDetailVO.java  |   6 +
 .../ccdi/project/CcdiBankStatementMapper.xml  |   7 +-
 .../CcdiBankStatementMapperXmlTest.java       |  14 +
 .../ccdiProject/components/ProjectTable.vue   | 237 +++++-------
 .../components/detail/DetailQuery.vue         | 358 ++++++++++++------
 .../components/detail/UploadData.vue          |   2 +-
 .../unit/detail-query-detail-dialog.test.js   |  46 +++
 .../unit/detail-query-filter-layout.test.js   |   4 +-
 .../tests/unit/project-table-style.test.js    |  27 ++
 .../unit/upload-data-file-list-table.test.js  |  25 ++
 10 files changed, 472 insertions(+), 254 deletions(-)
 create mode 100644 ruoyi-ui/tests/unit/detail-query-detail-dialog.test.js
 create mode 100644 ruoyi-ui/tests/unit/project-table-style.test.js
 create mode 100644 ruoyi-ui/tests/unit/upload-data-file-list-table.test.js

diff --git a/ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/vo/CcdiBankStatementDetailVO.java b/ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/vo/CcdiBankStatementDetailVO.java
index 838202f..0bbcd44 100644
--- a/ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/vo/CcdiBankStatementDetailVO.java
+++ b/ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/vo/CcdiBankStatementDetailVO.java
@@ -90,4 +90,10 @@ public class CcdiBankStatementDetailVO {
 
     /** 创建时间 */
     private Date createDate;
+
+    /** 原始文件名 */
+    private String originalFileName;
+
+    /** 原始文件上传时间 */
+    private Date uploadTime;
 }
diff --git a/ccdi-project/src/main/resources/mapper/ccdi/project/CcdiBankStatementMapper.xml b/ccdi-project/src/main/resources/mapper/ccdi/project/CcdiBankStatementMapper.xml
index 1c08370..cc7ae5f 100644
--- a/ccdi-project/src/main/resources/mapper/ccdi/project/CcdiBankStatementMapper.xml
+++ b/ccdi-project/src/main/resources/mapper/ccdi/project/CcdiBankStatementMapper.xml
@@ -98,6 +98,8 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <result property="paymentMethod" column="paymentMethod"/>
         <result property="cretNo" column="cretNo"/>
         <result property="createDate" column="createDate"/>
+        <result property="originalFileName" column="originalFileName"/>
+        <result property="uploadTime" column="uploadTime"/>
     </resultMap>
 
     <resultMap id="CcdiBankStatementFilterOptionsVOResultMap"
@@ -313,8 +315,11 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             bs.internal_flag AS internalFlag,
             bs.payment_method AS paymentMethod,
             bs.cret_no AS cretNo,
-            bs.CREATE_DATE AS createDate
+            bs.CREATE_DATE AS createDate,
+            fur.file_name AS originalFileName,
+            fur.upload_time AS uploadTime
         FROM ccdi_bank_statement bs
+        LEFT JOIN ccdi_file_upload_record fur ON fur.log_id = bs.batch_id AND fur.project_id = bs.project_id
         WHERE bs.bank_statement_id = #{bankStatementId}
     </select>
 
diff --git a/ccdi-project/src/test/java/com/ruoyi/ccdi/project/mapper/CcdiBankStatementMapperXmlTest.java b/ccdi-project/src/test/java/com/ruoyi/ccdi/project/mapper/CcdiBankStatementMapperXmlTest.java
index dca1f23..f1ba30e 100644
--- a/ccdi-project/src/test/java/com/ruoyi/ccdi/project/mapper/CcdiBankStatementMapperXmlTest.java
+++ b/ccdi-project/src/test/java/com/ruoyi/ccdi/project/mapper/CcdiBankStatementMapperXmlTest.java
@@ -115,6 +115,20 @@ class CcdiBankStatementMapperXmlTest {
         assertTrue(sql.contains("END ) <= ?"), sql);
     }
 
+    @Test
+    void selectStatementDetailById_shouldJoinUploadRecordForOriginalFileMetadata() throws Exception {
+        try (InputStream inputStream = getClass().getClassLoader().getResourceAsStream(RESOURCE)) {
+            String xml = new String(inputStream.readAllBytes(), StandardCharsets.UTF_8);
+
+            assertTrue(
+                    xml.contains("LEFT JOIN ccdi_file_upload_record fur ON fur.log_id = bs.batch_id AND fur.project_id = bs.project_id"),
+                    xml
+            );
+            assertTrue(xml.contains("fur.file_name AS originalFileName"), xml);
+            assertTrue(xml.contains("fur.upload_time AS uploadTime"), xml);
+        }
+    }
+
     private MappedStatement loadMappedStatement(String statementId) throws Exception {
         Configuration configuration = new Configuration();
         configuration.setEnvironment(new Environment("test", new JdbcTransactionFactory(), new NoOpDataSource()));
diff --git a/ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue b/ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
index ac682e2..e8fe268 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
@@ -5,7 +5,6 @@
       :data="dataList"
       style="width: 100%"
     >
-      <!-- 项目名称（含描述） -->
       <el-table-column
         label="项目名称"
         min-width="180"
@@ -14,12 +13,11 @@
         <template slot-scope="scope">
           <div class="project-info-cell">
             <div class="project-name">{{ scope.row.projectName }}</div>
-            <div class="project-desc">{{ scope.row.description || '暂无描述' }}</div>
+            <div class="project-desc">{{ scope.row.description || "暂无描述" }}</div>
           </div>
         </template>
       </el-table-column>
 
-      <!-- 更新/创建时间 -->
       <el-table-column
         prop="updateTime"
         label="更新/创建时间"
@@ -31,7 +29,6 @@
         </template>
       </el-table-column>
 
-      <!-- 创建人 -->
       <el-table-column
         prop="createByName"
         label="创建人"
@@ -39,7 +36,6 @@
         align="center"
       />
 
-      <!-- 状态 -->
       <el-table-column
         prop="status"
         label="状态"
@@ -49,12 +45,11 @@
         <template slot-scope="scope">
           <div class="status-tag">
             <span class="status-dot" :style="{ color: getStatusColor(scope.row.status) }">●</span>
-            <dict-tag :options="dict.type.ccdi_project_status" :value="scope.row.status"/>
+            <dict-tag :options="dict.type.ccdi_project_status" :value="scope.row.status" />
           </div>
         </template>
       </el-table-column>
 
-      <!-- 目标人数 -->
       <el-table-column
         prop="targetCount"
         label="目标人数"
@@ -62,7 +57,6 @@
         align="center"
       />
 
-      <!-- 预警人数（带悬停详情） -->
       <el-table-column
         label="预警人数"
         width="120"
@@ -71,26 +65,24 @@
         <template slot-scope="scope">
           <el-tooltip placement="top" effect="light">
             <div slot="content">
-              <div style="padding: 8px;">
-                <div style="margin-bottom: 8px; font-weight: bold; color: #303133;">
-                  风险人数统计
+              <div class="risk-tooltip">
+                <div class="risk-tooltip-title">风险人数统计</div>
+                <div class="risk-tooltip-item risk-tooltip-item--high">
+                  <span>● 高风险：</span>
+                  <span class="risk-tooltip-count">{{ scope.row.highRiskCount }} 人</span>
                 </div>
-                <div style="margin-bottom: 6px;">
-                  <span style="color: #f56c6c;">● 高风险：</span>
-                  <span style="font-weight: bold;">{{ scope.row.highRiskCount }} 人</span>
+                <div class="risk-tooltip-item risk-tooltip-item--medium">
+                  <span>● 中风险：</span>
+                  <span class="risk-tooltip-count">{{ scope.row.mediumRiskCount }} 人</span>
                 </div>
-                <div style="margin-bottom: 6px;">
-                  <span style="color: #e6a23c;">● 中风险：</span>
-                  <span style="font-weight: bold;">{{ scope.row.mediumRiskCount }} 人</span>
-                </div>
-                <div>
-                  <span style="color: #909399;">● 低风险：</span>
-                  <span style="font-weight: bold;">{{ scope.row.lowRiskCount }} 人</span>
+                <div class="risk-tooltip-item risk-tooltip-item--low">
+                  <span>● 低风险：</span>
+                  <span class="risk-tooltip-count">{{ scope.row.lowRiskCount }} 人</span>
                 </div>
               </div>
             </div>
             <div class="warning-count-wrapper">
-              <span :class="getWarningClass(scope.row)" style="cursor: pointer;">
+              <span :class="getWarningClass(scope.row)" class="warning-count">
                 {{ scope.row.highRiskCount + scope.row.mediumRiskCount + scope.row.lowRiskCount }}
               </span>
             </div>
@@ -98,7 +90,6 @@
         </template>
       </el-table-column>
 
-      <!-- 操作列 -->
       <el-table-column
         label="操作"
         width="350"
@@ -106,50 +97,56 @@
         fixed="right"
       >
         <template slot-scope="scope">
-          <!-- 进行中状态 (status = '0') -->
           <el-button
             v-if="scope.row.status === '0'"
             size="mini"
             type="text"
             icon="el-icon-right"
             @click="handleEnter(scope.row)"
-          >进入项目</el-button>
+          >
+            进入项目
+          </el-button>
 
-          <!-- 已完成状态 (status = '1') -->
           <template v-if="scope.row.status === '1'">
             <el-button
               size="mini"
               type="text"
               icon="el-icon-view"
               @click="handleViewResult(scope.row)"
-            >查看结果</el-button>
+            >
+              查看结果
+            </el-button>
             <el-button
               size="mini"
               type="text"
               icon="el-icon-refresh"
               @click="handleReAnalyze(scope.row)"
-            >重新分析</el-button>
+            >
+              重新分析
+            </el-button>
             <el-button
               size="mini"
               type="text"
               icon="el-icon-folder"
               @click="handleArchive(scope.row)"
-            >归档</el-button>
+            >
+              归档
+            </el-button>
           </template>
 
-          <!-- 已归档状态 (status = '2') -->
           <el-button
             v-if="scope.row.status === '2'"
             size="mini"
             type="text"
             icon="el-icon-view"
             @click="handleViewResult(scope.row)"
-          >查看结果</el-button>
+          >
+            查看结果
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <!-- 分页 -->
     <el-pagination
       v-show="total > 0"
       :current-page="pageParams.pageNum"
@@ -159,147 +156,89 @@
       layout="total, sizes, prev, pager, next, jumper"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      style="margin-top: 16px; text-align: right;"
+      style="margin-top: 16px; text-align: right"
     />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'ProjectTable',
-  dicts: ['ccdi_project_status', 'ccdi_config_type'],
+  name: "ProjectTable",
+  dicts: ["ccdi_project_status", "ccdi_config_type"],
   props: {
     dataList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     loading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     total: {
       type: Number,
-      default: 0
+      default: 0,
     },
     pageParams: {
       type: Object,
       default: () => ({
         pageNum: 1,
-        pageSize: 10
-      })
-    }
+        pageSize: 10,
+      }),
+    },
   },
   methods: {
     getStatusColor(status) {
       const colorMap = {
-        '0': '#1890ff',  // 进行中 - 蓝色
-        '1': '#52c41a',  // 已完成 - 绿色
-        '2': '#8c8c8c'   // 已归档 - 灰色
-      }
-      return colorMap[status] || '#8c8c8c'
+        0: "#1890ff",
+        1: "#52c41a",
+        2: "#8c8c8c",
+      };
+      return colorMap[status] || "#8c8c8c";
     },
-
     getWarningClass(row) {
-      const total = row.highRiskCount + row.mediumRiskCount + row.lowRiskCount
+      const total = row.highRiskCount + row.mediumRiskCount + row.lowRiskCount;
       if (row.highRiskCount > 0) {
-        return 'text-danger text-bold'
-      } else if (row.mediumRiskCount > 0) {
-        return 'text-warning text-bold'
-      } else if (total > 0) {
-        return 'text-info'
+        return "text-danger text-bold";
       }
-      return ''
+      if (row.mediumRiskCount > 0) {
+        return "text-warning text-bold";
+      }
+      if (total > 0) {
+        return "text-info";
+      }
+      return "";
     },
-
     handleEnter(row) {
-      this.$emit('enter', row)
+      this.$emit("enter", row);
     },
-
     handleViewResult(row) {
-      this.$emit('view-result', row)
+      this.$emit("view-result", row);
     },
-
     handleReAnalyze(row) {
-      this.$emit('re-analyze', row)
+      this.$emit("re-analyze", row);
     },
-
     handleArchive(row) {
-      this.$emit('archive', row)
+      this.$emit("archive", row);
     },
-
     handleSizeChange(val) {
-      this.$emit('pagination', { pageNum: this.pageParams.pageNum, pageSize: val })
+      this.$emit("pagination", {
+        pageNum: this.pageParams.pageNum,
+        pageSize: val,
+      });
     },
-
     handleCurrentChange(val) {
-      this.$emit('pagination', { pageNum: val, pageSize: this.pageParams.pageSize })
-    }
-  }
-}
+      this.$emit("pagination", {
+        pageNum: val,
+        pageSize: this.pageParams.pageSize,
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .project-table-container {
   margin-top: 16px;
-
-  // 表格整体样式 - 扁平化设计
-  ::v-deep .el-table {
-    // 移除边框和卡片效果，设置透明背景
-    border: none !important;
-    background-color: transparent !important;
-    overflow: hidden;
-
-    // 表头样式 - 扁平化，无背景色
-    th.el-table__cell {
-      background-color: transparent !important;
-      color: #333;
-      font-weight: 600;
-      font-size: 14px;
-      height: 44px;
-      padding: 12px 10px;
-
-      // 只保留底部一条分隔线
-      border-bottom: 2px solid #e0e0e0 !important;
-      border-right: none !important;
-    }
-
-    // 数据行样式 - 增加留白，移除分隔线
-    td.el-table__cell {
-      color: #333;
-      font-size: 14px;
-      height: 48px;
-      padding: 12px 10px;
-      border-bottom: none !important;
-      border-right: none !important;
-    }
-
-    // 移除列分隔线
-    .el-table__body-wrapper {
-      .cell {
-        border-right: none;
-      }
-    }
-
-    // 悬停效果
-    .el-table__row {
-      transition: background-color 0.2s ease;
-
-      &:hover > td.el-table__cell {
-        background-color: #fafafa !important;
-      }
-    }
-
-    // 移除额外边框
-    &::before,
-    &::after {
-      display: none !important;
-    }
-
-    // 移除 inner border
-    .el-table__inner-wrapper::before {
-      display: none !important;
-    }
-  }
 }
 
 .status-tag {
@@ -336,10 +275,44 @@ export default {
   }
 }
 
+.risk-tooltip {
+  padding: 8px;
+}
+
+.risk-tooltip-title {
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.risk-tooltip-item {
+  margin-bottom: 6px;
+}
+
+.risk-tooltip-item--high {
+  color: #f56c6c;
+}
+
+.risk-tooltip-item--medium {
+  color: #e6a23c;
+}
+
+.risk-tooltip-item--low {
+  color: #909399;
+}
+
+.risk-tooltip-count {
+  font-weight: 600;
+}
+
 .warning-count-wrapper {
   display: inline-block;
 }
 
+.warning-count {
+  cursor: pointer;
+}
+
 .text-danger {
   color: #f56c6c;
 }
@@ -353,10 +326,9 @@ export default {
 }
 
 .text-bold {
-  font-weight: bold;
+  font-weight: 700;
 }
 
-// 操作按钮样式 - Material Design 风格
 ::v-deep .el-button--text {
   color: #1890ff;
   padding: 8px 12px;
@@ -373,18 +345,15 @@ export default {
     padding-left: 0;
   }
 
-  // 按钮间距
   & + .el-button--text {
     margin-left: 4px;
   }
 }
 
-// 分页样式优化 - Material Design 风格
 ::v-deep .el-pagination {
   margin-top: 24px;
   text-align: right;
 
-  // 扁平化按钮
   .btn-prev,
   .btn-next,
   .el-pager li {
@@ -398,7 +367,7 @@ export default {
 
   .el-pager li.active {
     background-color: #1890ff;
-    color: white;
+    color: #fff;
     border-radius: 4px;
   }
 
diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue
index 4b061b1..4ea4cc5 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue
@@ -136,7 +136,7 @@
             </div>
             <el-input
               v-model="queryParams.userMemo"
-              placeholder="请输入摘要关键字"
+              placeholder="请输入摘要关键词"
               clearable
             />
           </el-form-item>
@@ -184,8 +184,6 @@
           <el-table
             v-loading="loading"
             :data="list"
-            border
-            stripe
             class="result-table"
             @sort-change="handleSortChange"
           >
@@ -265,103 +263,89 @@
       </div>
     </div>
 
-    <el-drawer
+    <el-dialog
       :visible.sync="detailVisible"
       append-to-body
-      custom-class="detail-drawer"
-      size="520px"
+      custom-class="detail-dialog"
       title="流水详情"
+      width="980px"
       @close="closeDetailDialog"
     >
-      <div v-loading="detailLoading" class="detail-drawer-body">
-        <div class="detail-section">
-          <div class="detail-section-title">基础信息</div>
-          <div class="detail-grid">
-            <div class="detail-item">
-              <span class="detail-label">流水ID</span>
-              <span class="detail-value">{{ formatField(detailData.bankStatementId) }}</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">交易时间</span>
-              <span class="detail-value">{{ formatField(detailData.trxDate) }}</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">币种</span>
-              <span class="detail-value">{{ formatField(detailData.currency) }}</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">交易类型</span>
-              <span class="detail-value">{{ formatField(detailData.cashType) }}</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">显示金额</span>
-              <span class="detail-value">{{ formatAmount(detailData.displayAmount) }}</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">余额</span>
-              <span class="detail-value">{{ formatAmount(detailData.amountBalance) }}</span>
+      <div v-loading="detailLoading" class="detail-dialog-body">
+        <div class="detail-overview-grid">
+          <div class="detail-field">
+            <div class="detail-label">交易时间</div>
+            <div class="detail-value">{{ formatField(detailData.trxDate) }}</div>
+          </div>
+          <div class="detail-field">
+            <div class="detail-label">交易金额</div>
+            <div class="detail-value amount-text" :class="getAmountClass(detailData.displayAmount)">
+              {{ formatSignedAmount(detailData.displayAmount) }}
             </div>
           </div>
-        </div>
-
-        <div class="detail-section">
-          <div class="detail-section-title">账户信息</div>
-          <div class="detail-grid">
-            <div class="detail-item detail-item-full">
-              <span class="detail-label">本方账户</span>
-              <span class="detail-value">
-                {{ formatField(detailData.leAccountName) }} / {{ formatField(detailData.leAccountNo) }}
-              </span>
-            </div>
-            <div class="detail-item detail-item-full">
-              <span class="detail-label">对方账户</span>
-              <span class="detail-value">
-                {{ formatField(detailData.customerAccountName) }} /
-                {{ formatField(detailData.customerAccountNo) }}
-              </span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">本方银行</span>
-              <span class="detail-value">{{ formatField(detailData.bank) }}</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">对方银行</span>
-              <span class="detail-value">{{ formatField(detailData.customerBank) }}</span>
-            </div>
+          <div class="detail-field">
+            <div class="detail-label">交易后余额</div>
+            <div class="detail-value">{{ formatAmount(detailData.amountBalance) }}</div>
           </div>
-        </div>
 
-        <div class="detail-section">
-          <div class="detail-section-title">补充信息</div>
-          <div class="detail-grid">
-            <div class="detail-item detail-item-full">
-              <span class="detail-label">摘要</span>
-              <span class="detail-value">{{ formatField(detailData.userMemo) }}</span>
-            </div>
-            <div class="detail-item detail-item-full">
-              <span class="detail-label">银行摘要</span>
-              <span class="detail-value">{{ formatField(detailData.bankComments) }}</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">银行交易号</span>
-              <span class="detail-value">{{ formatField(detailData.bankTrxNumber) }}</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">交易方式</span>
-              <span class="detail-value">{{ formatField(detailData.paymentMethod) }}</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">异常类型</span>
-              <span class="detail-value">{{ formatField(detailData.exceptionType) }}</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">创建时间</span>
-              <span class="detail-value">{{ formatDate(detailData.createDate) }}</span>
+          <div class="detail-field">
+            <div class="detail-label">本方主体</div>
+            <div class="detail-value">{{ formatField(detailData.leAccountName) }}</div>
+          </div>
+          <div class="detail-field">
+            <div class="detail-label">本方账号</div>
+            <div class="detail-value">{{ formatField(detailData.leAccountNo) }}</div>
+          </div>
+          <div class="detail-field">
+            <div class="detail-label">本方银行</div>
+            <div class="detail-value">{{ formatField(detailData.bank) }}</div>
+          </div>
+
+          <div class="detail-field">
+            <div class="detail-label">对方名称</div>
+            <div class="detail-value">{{ formatCounterpartyName(detailData) }}</div>
+          </div>
+          <div class="detail-field">
+            <div class="detail-label">对方账户</div>
+            <div class="detail-value">{{ formatField(detailData.customerAccountNo) }}</div>
+          </div>
+          <div class="detail-field">
+            <div class="detail-label">对方银行</div>
+            <div class="detail-value">{{ formatField(detailData.customerBank) }}</div>
+          </div>
+
+          <div class="detail-field">
+            <div class="detail-label">摘要</div>
+            <div class="detail-value">{{ formatField(detailData.userMemo) }}</div>
+          </div>
+          <div class="detail-field">
+            <div class="detail-label">交易类型</div>
+            <div class="detail-value">{{ formatField(detailData.cashType) }}</div>
+          </div>
+          <div class="detail-field">
+            <div class="detail-label">银行摘要</div>
+            <div class="detail-value">{{ formatField(detailData.bankComments) }}</div>
+          </div>
+
+          <div class="detail-field detail-field--full">
+            <div class="detail-label">原始文件</div>
+            <div class="detail-file-block">
+              <i class="el-icon-document detail-file-icon"></i>
+              <div class="detail-file-meta">
+                <div class="detail-file-name">{{ formatOriginalFileName(detailData) }}</div>
+                <div class="detail-file-time">
+                  上传时间：{{ formatOriginalFileUploadTime(detailData) }}
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </el-drawer>
+      <div slot="footer" class="detail-dialog-footer">
+        <el-button @click="closeDetailDialog">取消</el-button>
+        <el-button type="primary" @click="closeDetailDialog">确定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -414,6 +398,7 @@ const createEmptyOptionData = () => ({
 
 const createEmptyDetailData = () => ({
   bankStatementId: "",
+  projectId: "",
   trxDate: "",
   currency: "",
   leAccountNo: "",
@@ -421,16 +406,27 @@ const createEmptyDetailData = () => ({
   customerAccountName: "",
   customerAccountNo: "",
   customerBank: "",
+  customerReference: "",
   userMemo: "",
   bankComments: "",
   bankTrxNumber: "",
   bank: "",
   cashType: "",
+  amountDr: "",
+  amountCr: "",
   amountBalance: "",
   displayAmount: "",
-  paymentMethod: "",
+  trxFlag: "",
+  trxType: "",
   exceptionType: "",
+  internalFlag: "",
+  paymentMethod: "",
+  cretNo: "",
   createDate: "",
+  originalFileName: "",
+  uploadTime: "",
+  sourceFileName: "",
+  fileName: "",
 });
 
 export default {
@@ -593,6 +589,7 @@ export default {
     },
     closeDetailDialog() {
       this.detailVisible = false;
+      this.detailLoading = false;
       this.detailData = createEmptyDetailData();
     },
     handleExport() {
@@ -607,7 +604,10 @@ export default {
       );
     },
     formatField(value) {
-      return value || "-";
+      if (value === null || value === undefined || value === "") {
+        return "-";
+      }
+      return String(value);
     },
     formatDate(value) {
       return value ? parseTime(value, "{y}-{m}-{d} {h}:{i}:{s}") : "-";
@@ -616,11 +616,55 @@ export default {
       if (value === null || value === undefined || value === "") {
         return "-";
       }
-      return Number(value).toLocaleString("zh-CN", {
+      const amount = Number(value);
+      if (Number.isNaN(amount)) {
+        return "-";
+      }
+      return amount.toLocaleString("zh-CN", {
         minimumFractionDigits: 2,
         maximumFractionDigits: 2,
       });
     },
+    formatSignedAmount(value) {
+      if (value === null || value === undefined || value === "") {
+        return "-";
+      }
+      const amount = Number(value);
+      if (Number.isNaN(amount)) {
+        return "-";
+      }
+      const text = this.formatAmount(amount);
+      return amount > 0 ? `+${text}` : text;
+    },
+    getAmountClass(value) {
+      if (value === null || value === undefined || value === "") {
+        return "";
+      }
+      return Number(value) >= 0 ? "amount-in" : "amount-out";
+    },
+    formatCounterpartyName(detail) {
+      if (!detail) {
+        return "-";
+      }
+      return this.formatField(detail.customerAccountName);
+    },
+    formatOriginalFileName(detail) {
+      if (!detail) {
+        return "暂无原始文件";
+      }
+      return (
+        detail.originalFileName ||
+        detail.sourceFileName ||
+        detail.fileName ||
+        "暂无原始文件"
+      );
+    },
+    formatOriginalFileUploadTime(detail) {
+      if (!detail) {
+        return "-";
+      }
+      return this.formatDate(detail.uploadTime);
+    },
   },
 };
 </script>
@@ -747,7 +791,7 @@ export default {
 }
 
 .result-card {
-  border: 1px solid #ebeef5;
+  border: none;
   border-radius: 4px;
   overflow: hidden;
 }
@@ -789,51 +833,106 @@ export default {
   color: #f56c6c;
 }
 
-.detail-drawer-body {
-  padding: 0 4px 24px;
+.detail-dialog-body {
+  min-height: 280px;
 }
 
-.detail-section {
-  margin-bottom: 20px;
-  padding: 16px;
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
-}
-
-.detail-section-title {
-  margin-bottom: 14px;
-  font-size: 15px;
-  font-weight: 600;
-  color: #303133;
-}
-
-.detail-grid {
+.detail-overview-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px 16px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 24px 32px;
 }
 
-.detail-item {
+.detail-field {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 10px;
+  min-width: 0;
 }
 
-.detail-item-full {
+.detail-field--full {
   grid-column: 1 / -1;
 }
 
 .detail-label {
-  font-size: 12px;
+  font-size: 14px;
+  line-height: 20px;
   color: #909399;
 }
 
 .detail-value {
   color: #303133;
-  line-height: 20px;
+  line-height: 22px;
+  font-size: 16px;
+  font-weight: 500;
   word-break: break-all;
 }
 
+.detail-file-block {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 2px 0;
+}
+
+.detail-file-icon {
+  margin-top: 2px;
+  font-size: 20px;
+  color: #f59a23;
+}
+
+.detail-file-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.detail-file-name {
+  color: #303133;
+  line-height: 22px;
+  word-break: break-all;
+}
+
+.detail-file-time {
+  color: #909399;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.detail-dialog-footer {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+
+:deep(.detail-dialog) {
+  border-radius: 8px;
+
+  .el-dialog__header {
+    padding: 20px 24px;
+    border-bottom: 1px solid #ebeef5;
+  }
+
+  .el-dialog__title {
+    font-size: 20px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .el-dialog__body {
+    padding: 24px;
+  }
+
+  .el-dialog__footer {
+    padding: 8px 24px 24px;
+  }
+
+  .el-button {
+    min-width: 180px;
+  }
+}
+
 @media (max-width: 992px) {
   .query-page-shell {
     grid-template-columns: 1fr;
@@ -842,6 +941,11 @@ export default {
   .filter-actions {
     flex-direction: column;
   }
+
+  .detail-overview-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 20px 24px;
+  }
 }
 
 @media (max-width: 768px) {
@@ -862,8 +966,30 @@ export default {
     margin: 12px 12px 0;
   }
 
-  .detail-grid {
+  .detail-overview-grid {
     grid-template-columns: 1fr;
+    gap: 18px;
+  }
+
+  .detail-dialog-footer {
+    flex-direction: column;
+  }
+
+  :deep(.detail-dialog) {
+    width: calc(100vw - 24px) !important;
+    margin-top: 8vh !important;
+
+    .el-dialog__header,
+    .el-dialog__body,
+    .el-dialog__footer {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+
+    .el-button {
+      width: 100%;
+      min-width: 0;
+    }
   }
 }
 </style>
diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue
index e954dec..fa0b791 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue
@@ -58,7 +58,7 @@
           <el-button icon="el-icon-refresh" @click="handleManualRefresh">刷新</el-button>
         </div>
 
-        <el-table :data="fileUploadList" v-loading="listLoading" stripe border>
+        <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">
             <template slot-scope="scope">
diff --git a/ruoyi-ui/tests/unit/detail-query-detail-dialog.test.js b/ruoyi-ui/tests/unit/detail-query-detail-dialog.test.js
new file mode 100644
index 0000000..9efd09e
--- /dev/null
+++ b/ruoyi-ui/tests/unit/detail-query-detail-dialog.test.js
@@ -0,0 +1,46 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const componentPath = path.resolve(
+  __dirname,
+  "../../src/views/ccdiProject/components/detail/DetailQuery.vue"
+);
+const source = fs.readFileSync(componentPath, "utf8");
+
+assert(
+  source.includes("<el-dialog"),
+  "详情应改为 el-dialog 弹窗展示"
+);
+
+assert(
+  !source.includes("<el-drawer"),
+  "详情不应再使用抽屉展示"
+);
+
+[
+  'class="detail-dialog"',
+  'class="detail-overview-grid"',
+  'class="detail-dialog-footer"',
+  "formatCounterpartyName(detailData)",
+  "formatOriginalFileName(detailData)",
+  'width="980px"',
+].forEach((token) => {
+  assert(
+    source.includes(token),
+    `详情弹窗缺少关键结构或方法: ${token}`
+  );
+});
+
+const tableBlockMatch = source.match(/<el-table[\s\S]*?class="result-table"[\s\S]*?>/m);
+assert(tableBlockMatch, "未找到流水明细列表表格");
+assert(
+  !/\sborder(\s|>)/.test(tableBlockMatch[0]),
+  "流水明细列表不应再启用表格边框"
+);
+assert(
+  !/\sstripe(\s|>)/.test(tableBlockMatch[0]),
+  "流水明细列表不应再启用斑马纹"
+);
+
+console.log("detail-query-detail-dialog test passed");
diff --git a/ruoyi-ui/tests/unit/detail-query-filter-layout.test.js b/ruoyi-ui/tests/unit/detail-query-filter-layout.test.js
index 1e7761c..7ef3756 100644
--- a/ruoyi-ui/tests/unit/detail-query-filter-layout.test.js
+++ b/ruoyi-ui/tests/unit/detail-query-filter-layout.test.js
@@ -53,12 +53,12 @@ assert(
 
 assert(
   !source.includes("queryParams.transactionType"),
-  "筛选逻辑不应再保留交易类型参数"
+  "筛选逻辑中不应再保留交易类型参数"
 );
 
 assert(
   !source.includes("queryParams.transactionTypeEmpty"),
-  "筛选逻辑不应再保留交易类型空值匹配参数"
+  "筛选逻辑中不应再保留交易类型空值匹配参数"
 );
 
 assert(
diff --git a/ruoyi-ui/tests/unit/project-table-style.test.js b/ruoyi-ui/tests/unit/project-table-style.test.js
new file mode 100644
index 0000000..8e9b6d0
--- /dev/null
+++ b/ruoyi-ui/tests/unit/project-table-style.test.js
@@ -0,0 +1,27 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const componentPath = path.resolve(
+  __dirname,
+  "../../src/views/ccdiProject/components/ProjectTable.vue"
+);
+const source = fs.readFileSync(componentPath, "utf8");
+
+const tableBlockMatch = source.match(/<el-table[\s\S]*?style="width: 100%"[\s\S]*?>/m);
+
+assert(tableBlockMatch, "未找到项目列表表格");
+assert(
+  !/\sborder(\s|>)/.test(tableBlockMatch[0]),
+  "项目列表表格不应启用边框"
+);
+assert(
+  !/\sstripe(\s|>)/.test(tableBlockMatch[0]),
+  "项目列表表格不应启用斑马纹"
+);
+assert(
+  !source.includes("::v-deep .el-table"),
+  "项目列表不应继续保留自定义深度表格皮肤"
+);
+
+console.log("project-table-style test passed");
diff --git a/ruoyi-ui/tests/unit/upload-data-file-list-table.test.js b/ruoyi-ui/tests/unit/upload-data-file-list-table.test.js
new file mode 100644
index 0000000..37cb3ec
--- /dev/null
+++ b/ruoyi-ui/tests/unit/upload-data-file-list-table.test.js
@@ -0,0 +1,25 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const componentPath = path.resolve(
+  __dirname,
+  "../../src/views/ccdiProject/components/detail/UploadData.vue"
+);
+const source = fs.readFileSync(componentPath, "utf8");
+
+const tableBlockMatch = source.match(
+  /<el-table[\s\S]*?:data="fileUploadList"[\s\S]*?>/m
+);
+
+assert(tableBlockMatch, "未找到上传数据文件列表表格");
+assert(
+  !/\sborder(\s|>)/.test(tableBlockMatch[0]),
+  "上传数据文件列表表格不应再启用边框"
+);
+assert(
+  !/\sstripe(\s|>)/.test(tableBlockMatch[0]),
+  "上传数据文件列表表格不应再启用斑马纹"
+);
+
+console.log("upload-data-file-list-table test passed");