统一结果总览详情弹窗主区视觉

2026-03-25 19:12:30 +08:00
parent 3fb02f1391
commit 1e3ea8d4c9
5 changed files with 73 additions and 15 deletions
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue
@@ -4,10 +4,11 @@
      <section
        v-for="(group, groupIndex) in detailGroups"
        :key="`${group.groupCode || group.groupType || groupIndex}-group`"
-        class="abnormal-card"
+        class="abnormal-card analysis-panel"
      >
        <div class="abnormal-card__header">
          <div class="abnormal-card__title">{{ group.groupName || "异常明细" }}</div>
+          <div class="abnormal-card__summary">{{ getGroupSummary(group) }}</div>
        </div>

        <el-table
@@ -151,6 +152,16 @@ export default {
    resolveGroupKey(group, index = 0) {
      return group.groupCode || group.groupName || `BANK_STATEMENT_${index}`;
    },
+    getGroupSummary(group) {
+      const recordTotal = Array.isArray(group && group.records) ? group.records.length : 0;
+      if (group && group.groupType === "BANK_STATEMENT") {
+        return `共 ${recordTotal} 条交易记录，按时间顺序查看重点流水。`;
+      }
+      if (group && group.groupType === "OBJECT") {
+        return `共 ${recordTotal} 个异常对象，结合快照与摘要连续阅读。`;
+      }
+      return "按统一工作台区块承载当前异常分组内容。";
+    },
    getStatementPage(group) {
      const groupKey = this.resolveGroupKey(group);
      return this.statementPageMap[groupKey] || 1;
@@ -179,10 +190,14 @@ export default {
  gap: 16px;
 }

+.analysis-panel {
+  border: 1px solid #e2e8f0;
+  border-radius: 20px;
+  background: #ffffff;
+}
+
 .abnormal-card {
  padding: 20px;
-  border: 1px solid #e2e8f0;
-  background: #fff;
 }

 .abnormal-card__header {
@@ -195,8 +210,10 @@ export default {
  color: #0f172a;
 }

-.abnormal-card__subtitle {
-  font-size: 12px;
+.abnormal-card__summary {
+  margin-top: 8px;
+  font-size: 13px;
+  line-height: 1.7;
  color: #64748b;
 }

@@ -242,7 +259,8 @@ export default {
 .object-card {
  padding: 16px;
  border: 1px solid #e2e8f0;
-  background: #f8fafc;
+  border-radius: 16px;
+  background: #ffffff;
 }

 .object-card__title {
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
@@ -63,19 +63,19 @@
          </el-alert>
          <el-tabs v-model="activeTab" stretch>
            <el-tab-pane label="异常明细" name="abnormalDetail">
-              <project-analysis-abnormal-tab :detail-data="dialogData.abnormalDetail" />
+              <project-analysis-abnormal-tab class="analysis-panel" :detail-data="dialogData.abnormalDetail" />
            </el-tab-pane>
            <el-tab-pane label="资产分析" name="assetAnalysis">
-              <project-analysis-placeholder-tab :tab-data="getTabData('assetAnalysis')" />
+              <project-analysis-placeholder-tab class="analysis-panel" :tab-data="getTabData('assetAnalysis')" />
            </el-tab-pane>
            <el-tab-pane label="征信摘要" name="creditSummary">
-              <project-analysis-placeholder-tab :tab-data="getTabData('creditSummary')" />
+              <project-analysis-placeholder-tab class="analysis-panel" :tab-data="getTabData('creditSummary')" />
            </el-tab-pane>
            <el-tab-pane label="关系图谱" name="relationshipGraph">
-              <project-analysis-placeholder-tab :tab-data="getTabData('relationshipGraph')" />
+              <project-analysis-placeholder-tab class="analysis-panel" :tab-data="getTabData('relationshipGraph')" />
            </el-tab-pane>
            <el-tab-pane label="资金流向" name="fundFlow">
-              <project-analysis-placeholder-tab :tab-data="getTabData('fundFlow')" />
+              <project-analysis-placeholder-tab class="analysis-panel" :tab-data="getTabData('fundFlow')" />
            </el-tab-pane>
          </el-tabs>
        </div>
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="project-analysis-placeholder-tab">
+  <section class="project-analysis-placeholder-tab analysis-panel analysis-panel--placeholder">
    <div class="placeholder-title">{{ tabData.label }}</div>
    <div class="placeholder-text">{{ tabData.description }}</div>
  </section>
@@ -21,11 +21,19 @@ export default {
 </script>

 <style lang="scss" scoped>
+.analysis-panel {
+  border: 1px solid #e2e8f0;
+  border-radius: 20px;
+  background: #ffffff;
+}
+
 .project-analysis-placeholder-tab {
  min-height: 560px;
  padding: 24px;
-  border: 1px solid #e2e8f0;
-  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+}
+
+.analysis-panel--placeholder {
+  background: #ffffff;
 }

 .placeholder-title {
--- a/ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js
+++ b/ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js
@@ -16,18 +16,27 @@ 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",
+  "project-analysis-overview",
 ].forEach((token) => assert(dialog.includes(token), token));

 [
+  "analysis-panel",
  "detailData.groups",
  'group.groupType === "BANK_STATEMENT"',
  'group.groupType === "OBJECT"',
  "group.groupName",
+  "abnormal-card__summary",
  "statementPageSize: 5",
  "statementPageMap",
  "slice(startIndex, startIndex + this.statementPageSize)",
@@ -48,3 +57,13 @@ const abnormalTab = fs.readFileSync(
  "extraFields",
  "grid-template-columns: minmax(0, 1fr)",
 ].forEach((token) => assert(abnormalTab.includes(token), token));
+
+[
+  "analysis-panel",
+  "analysis-panel--placeholder",
+].forEach((token) => assert(placeholderTab.includes(token), token));
+
+assert(
+  !placeholderTab.includes("background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)"),
+  "占位页签不应继续单独使用旧渐变底"
+);
--- a/ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js
+++ b/ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js
@@ -16,6 +16,13 @@ const mockSource = fs.readFileSync(
  ),
  "utf8"
 );
+const placeholderTab = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.vue"
+  ),
+  "utf8"
+);

 [
  'title="项目分析"',
@@ -23,6 +30,7 @@ const mockSource = fs.readFileSync(
  'top="5vh"',
  "project-analysis-header",
  "project-analysis-overview",
+  "analysis-panel",
  "project-analysis-header__title",
  "project-analysis-header__risk",
  "project-analysis-header__meta",
@@ -48,6 +56,11 @@ const mockSource = fs.readFileSync(

 assert(!dialog.includes("project-analysis-shell"), "不应继续保留内部大白卡外壳");
 assert(!dialog.includes('class="source-summary"'), "当前命中模型不应停留在主区顶部");
+assert(placeholderTab.includes("analysis-panel--placeholder"), "占位页签应与主区面板统一样式基线");
+assert(
+  !placeholderTab.includes("background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)"),
+  "占位页签不应继续保留旧渐变底"
+);

 [
  "projectAnalysisTabs",