收口项目分析弹窗右侧主区节奏

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

@@ -10,99 +10,101 @@
           <div class="abnormal-card__title">{{ group.groupName || "异常明细" }}</div>
         </div>
 
-        <el-table
-          v-if='group.groupType === "BANK_STATEMENT"'
-          :data="getStatementPageRecords(group)"
-          class="abnormal-table"
-        >
-          <el-table-column prop="trxDate" label="交易时间" min-width="160" />
-          <el-table-column label="本方账户" min-width="220">
-            <template slot-scope="scope">
-              <div class="multi-line-cell">
-                <div class="primary-text">{{ scope.row.leAccountNo || "-" }}</div>
-                <div class="secondary-text">{{ scope.row.leAccountName || "-" }}</div>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="对方账户" min-width="220">
-            <template slot-scope="scope">
-              <div class="multi-line-cell">
-                <div class="primary-text">{{ scope.row.customerAccountName || "-" }}</div>
-                <div class="secondary-text">{{ scope.row.customerAccountNo || "-" }}</div>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="摘要/交易类型" min-width="220">
-            <template slot-scope="scope">
-              <div class="multi-line-cell">
-                <div class="primary-text">{{ scope.row.userMemo || "-" }}</div>
-                <div class="secondary-text">{{ scope.row.cashType || "-" }}</div>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="异常标签" min-width="220">
-            <template slot-scope="scope">
-              <div v-if="scope.row.hitTags && scope.row.hitTags.length" class="tag-list">
+        <div class="abnormal-card__content">
+          <el-table
+            v-if='group.groupType === "BANK_STATEMENT"'
+            :data="getStatementPageRecords(group)"
+            class="abnormal-table"
+          >
+            <el-table-column prop="trxDate" label="交易时间" min-width="160" />
+            <el-table-column label="本方账户" min-width="220">
+              <template slot-scope="scope">
+                <div class="multi-line-cell">
+                  <div class="primary-text">{{ scope.row.leAccountNo || "-" }}</div>
+                  <div class="secondary-text">{{ scope.row.leAccountName || "-" }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="对方账户" min-width="220">
+              <template slot-scope="scope">
+                <div class="multi-line-cell">
+                  <div class="primary-text">{{ scope.row.customerAccountName || "-" }}</div>
+                  <div class="secondary-text">{{ scope.row.customerAccountNo || "-" }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="摘要/交易类型" min-width="220">
+              <template slot-scope="scope">
+                <div class="multi-line-cell">
+                  <div class="primary-text">{{ scope.row.userMemo || "-" }}</div>
+                  <div class="secondary-text">{{ scope.row.cashType || "-" }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="异常标签" min-width="220">
+              <template slot-scope="scope">
+                <div v-if="scope.row.hitTags && scope.row.hitTags.length" class="tag-list">
+                  <el-tag
+                    v-for="(tag, index) in scope.row.hitTags"
+                    :key="`${scope.row.bankStatementId || index}-tag-${index}`"
+                    size="mini"
+                    effect="plain"
+                  >
+                    {{ tag.ruleName }}
+                  </el-tag>
+                </div>
+                <span v-else class="summary-row__label">-</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="displayAmount" label="交易金额" min-width="140" />
+          </el-table>
+          <div
+            v-if='group.groupType === "BANK_STATEMENT" && getStatementTotal(group) > statementPageSize'
+            class="abnormal-pagination"
+          >
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :current-page="getStatementPage(group)"
+              :page-size="statementPageSize"
+              :total="getStatementTotal(group)"
+              @current-change="handleStatementPageChange(group, $event)"
+            />
+          </div>
+
+          <div v-else-if='group.groupType === "OBJECT"' class="object-card-grid">
+            <article
+              v-for="(item, index) in group.records || []"
+              :key="`${item.title || index}-object`"
+              class="object-card"
+            >
+              <div class="object-card__title">{{ item.title || "-" }}</div>
+              <div class="object-card__subtitle">{{ item.subtitle || "-" }}</div>
+              <div v-if="item.riskTags && item.riskTags.length" class="tag-list">
                 <el-tag
-                  v-for="(tag, index) in scope.row.hitTags"
-                  :key="`${scope.row.bankStatementId || index}-tag-${index}`"
+                  v-for="(tag, tagIndex) in item.riskTags"
+                  :key="`${item.title || index}-risk-${tagIndex}`"
                   size="mini"
                   effect="plain"
                 >
-                  {{ tag.ruleName }}
+                  {{ tag }}
                 </el-tag>
               </div>
-              <span v-else class="summary-row__label">-</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="displayAmount" label="交易金额" min-width="140" />
-        </el-table>
-        <div
-          v-if='group.groupType === "BANK_STATEMENT" && getStatementTotal(group) > statementPageSize'
-          class="abnormal-pagination"
-        >
-          <el-pagination
-            background
-            layout="prev, pager, next"
-            :current-page="getStatementPage(group)"
-            :page-size="statementPageSize"
-            :total="getStatementTotal(group)"
-            @current-change="handleStatementPageChange(group, $event)"
-          />
-        </div>
-
-        <div v-else-if='group.groupType === "OBJECT"' class="object-card-grid">
-          <article
-            v-for="(item, index) in group.records || []"
-            :key="`${item.title || index}-object`"
-            class="object-card"
-          >
-            <div class="object-card__title">{{ item.title || "-" }}</div>
-            <div class="object-card__subtitle">{{ item.subtitle || "-" }}</div>
-            <div v-if="item.riskTags && item.riskTags.length" class="tag-list">
-              <el-tag
-                v-for="(tag, tagIndex) in item.riskTags"
-                :key="`${item.title || index}-risk-${tagIndex}`"
-                size="mini"
-                effect="plain"
+              <div class="object-card__snapshot">
+                <div class="object-card__snapshot-label">异常原因快照</div>
+                <p class="object-card__snapshot-value">{{ item.reasonDetail || "-" }}</p>
+              </div>
+              <p class="object-card__summary">{{ item.summary || "-" }}</p>
+              <div
+                v-for="(field, fieldIndex) in item.extraFields || []"
+                :key="`${item.title || index}-field-${fieldIndex}`"
+                class="summary-row"
               >
-                {{ tag }}
-              </el-tag>
-            </div>
-            <div class="object-card__snapshot">
-              <div class="object-card__snapshot-label">异常原因快照</div>
-              <p class="object-card__snapshot-value">{{ item.reasonDetail || "-" }}</p>
-            </div>
-            <p class="object-card__summary">{{ item.summary || "-" }}</p>
-            <div
-              v-for="(field, fieldIndex) in item.extraFields || []"
-              :key="`${item.title || index}-field-${fieldIndex}`"
-              class="summary-row"
-            >
-              <span class="summary-row__label">{{ field.label }}</span>
-              <span class="summary-row__value">{{ field.value }}</span>
-            </div>
-          </article>
+                <span class="summary-row__label">{{ field.label }}</span>
+                <span class="summary-row__value">{{ field.value }}</span>
+              </div>
+            </article>
+          </div>
         </div>
       </section>
     </template>
@@ -186,7 +188,7 @@ export default {
 }
 
 .abnormal-card__header {
-  margin-bottom: 16px;
+  margin-bottom: 14px;
 }
 
 .abnormal-card__title {
@@ -195,6 +197,11 @@ export default {
   color: #0f172a;
 }
 
+.abnormal-card__content {
+  display: grid;
+  gap: 16px;
+}
+
 .abnormal-card__subtitle {
   font-size: 12px;
   color: #64748b;

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

@@ -302,6 +302,6 @@ export default {
 }
 
 .project-analysis-tabs {
-  margin-top: -4px;
+  margin-top: -8px;
 }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
-  <section class="project-analysis-placeholder-tab">
-    <div class="placeholder-title">{{ tabData.label }}</div>
-    <div class="placeholder-text">{{ tabData.description }}</div>
+  <section class="project-analysis-placeholder-tab placeholder-panel">
+    <div class="placeholder-title placeholder-panel__title">{{ tabData.label }}</div>
+    <div class="placeholder-text placeholder-panel__text">{{ tabData.description }}</div>
   </section>
 </template>
 
@@ -22,9 +22,10 @@ export default {
 
 <style lang="scss" scoped>
 .project-analysis-placeholder-tab {
-  min-height: 560px;
+  min-height: 0;
   padding: 24px;
   border: 1px solid #e2e8f0;
+  border-radius: 16px;
   background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
 }
 

ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js

@@ -16,18 +16,28 @@ const abnormalTab = fs.readFileSync(
   ),
   "utf8"
 );
+const placeholderTab = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.vue"
+  ),
+  "utf8"
+);
 
 [
   "<project-analysis-abnormal-tab",
   ':detail-data="dialogData.abnormalDetail"',
-  "source-summary",
+  'class="project-analysis-tabs"',
 ].forEach((token) => assert(dialog.includes(token), token));
 
+assert(!dialog.includes("project-analysis-layout__main-scroll"), "主区不应再有独立滚动容器");
+
 [
   "detailData.groups",
   'group.groupType === "BANK_STATEMENT"',
   'group.groupType === "OBJECT"',
   "group.groupName",
+  "abnormal-card__content",
   "statementPageSize: 5",
   "statementPageMap",
   "slice(startIndex, startIndex + this.statementPageSize)",
@@ -48,3 +58,9 @@ const abnormalTab = fs.readFileSync(
   "extraFields",
   "grid-template-columns: minmax(0, 1fr)",
 ].forEach((token) => assert(abnormalTab.includes(token), token));
+
+[
+  "placeholder-panel",
+  "placeholder-panel__title",
+  "placeholder-panel__text",
+].forEach((token) => assert(placeholderTab.includes(token), token));