From 21b8b7bf412d9151f4c9222c299b0b662649e462 Mon Sep 17 00:00:00 2001
From: wkc <978997012@qq.com>
Date: Thu, 26 Mar 2026 09:12:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B6=E7=B4=A7=E9=A1=B9=E7=9B=AE=E5=88=86?=
 =?UTF-8?q?=E6=9E=90=E5=BC=B9=E7=AA=97=E5=A4=B4=E5=B8=A6=E4=B8=8E=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProjectAnalysisDialog.vue          | 203 +++++++++++-------
 ...roject-analysis-dialog-default-tab.test.js |   2 +
 .../project-analysis-dialog-layout.test.js    |  25 ++-
 ...t-analysis-dialog-source-highlight.test.js |   9 +-
 4 files changed, 155 insertions(+), 84 deletions(-)

diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
index 28da7349..e685f56d 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
@@ -2,57 +2,65 @@
   <el-dialog
     title="项目分析"
     :visible.sync="visibleProxy"
-    width="80%"
-    top="5vh"
+    width="92%"
+    top="2vh"
     append-to-body
     custom-class="project-analysis-dialog"
     @close="handleDialogClosed"
   >
-    <div class="project-analysis-shell">
-      <div class="project-analysis-layout">
+    <div class="project-analysis-dialog__body">
+      <div class="project-analysis-header">
+        <div class="project-analysis-header__main">
+          <div class="project-analysis-header__title-group">
+            <div class="project-analysis-header__eyebrow">结果总览</div>
+            <div class="project-analysis-header__title">项目分析详情</div>
+          </div>
+          <div
+            v-if='dialogData.sourceSummary.showCurrentModel && source === "riskModelPeople"'
+            class="project-analysis-header__meta"
+          >
+            <span class="project-analysis-header__meta-label">当前命中模型</span>
+            <span class="project-analysis-header__meta-value">
+              {{ dialogData.sourceSummary.currentModelValue }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div v-loading="detailLoading" class="project-analysis-workspace">
         <project-analysis-sidebar
           class="project-analysis-layout__sidebar"
           :sidebar-data="dialogData.sidebar"
         />
-        <div v-loading="detailLoading" class="project-analysis-layout__main">
-          <div class="project-analysis-layout__main-scroll">
-            <el-alert
-              v-if="detailError"
-              :closable="false"
-              class="project-analysis-layout__alert"
-              type="error"
-              show-icon
-              :title="detailError"
-            >
-              <template slot="default">
-                <el-button type="text" size="mini" @click="handleRetryDetail">重试</el-button>
-              </template>
-            </el-alert>
-            <div
-              v-if='dialogData.sourceSummary.showCurrentModel && source === "riskModelPeople"'
-              class="source-summary"
-            >
-              <span class="source-summary__label">当前命中模型</span>
-              <span class="source-summary__value">{{ dialogData.sourceSummary.currentModelValue }}</span>
-            </div>
-            <el-tabs v-model="activeTab" stretch>
-              <el-tab-pane label="异常明细" name="abnormalDetail">
-                <project-analysis-abnormal-tab :detail-data="dialogData.abnormalDetail" />
-              </el-tab-pane>
-              <el-tab-pane label="资产分析" name="assetAnalysis">
-                <project-analysis-placeholder-tab :tab-data="getTabData('assetAnalysis')" />
-              </el-tab-pane>
-              <el-tab-pane label="征信摘要" name="creditSummary">
-                <project-analysis-placeholder-tab :tab-data="getTabData('creditSummary')" />
-              </el-tab-pane>
-              <el-tab-pane label="关系图谱" name="relationshipGraph">
-                <project-analysis-placeholder-tab :tab-data="getTabData('relationshipGraph')" />
-              </el-tab-pane>
-              <el-tab-pane label="资金流向" name="fundFlow">
-                <project-analysis-placeholder-tab :tab-data="getTabData('fundFlow')" />
-              </el-tab-pane>
-            </el-tabs>
-          </div>
+        <div class="project-analysis-layout__main">
+          <el-alert
+            v-if="detailError"
+            :closable="false"
+            class="project-analysis-layout__alert"
+            type="error"
+            show-icon
+            :title="detailError"
+          >
+            <template slot="default">
+              <el-button type="text" size="mini" @click="handleRetryDetail">重试</el-button>
+            </template>
+          </el-alert>
+          <el-tabs v-model="activeTab" class="project-analysis-tabs" stretch>
+            <el-tab-pane label="异常明细" name="abnormalDetail">
+              <project-analysis-abnormal-tab :detail-data="dialogData.abnormalDetail" />
+            </el-tab-pane>
+            <el-tab-pane label="资产分析" name="assetAnalysis">
+              <project-analysis-placeholder-tab :tab-data="getTabData('assetAnalysis')" />
+            </el-tab-pane>
+            <el-tab-pane label="征信摘要" name="creditSummary">
+              <project-analysis-placeholder-tab :tab-data="getTabData('creditSummary')" />
+            </el-tab-pane>
+            <el-tab-pane label="关系图谱" name="relationshipGraph">
+              <project-analysis-placeholder-tab :tab-data="getTabData('relationshipGraph')" />
+            </el-tab-pane>
+            <el-tab-pane label="资金流向" name="fundFlow">
+              <project-analysis-placeholder-tab :tab-data="getTabData('fundFlow')" />
+            </el-tab-pane>
+          </el-tabs>
         </div>
       </div>
     </div>
@@ -200,59 +208,100 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.project-analysis-dialog__body {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e2e8f0;
+  border-radius: 24px;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+  overflow: hidden;
+}
+
+.project-analysis-header {
+  padding: 24px 28px 18px;
+  border-bottom: 1px solid #e2e8f0;
+  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 65%);
+}
+
+.project-analysis-header__main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.project-analysis-header__title-group {
+  min-width: 0;
+}
+
+.project-analysis-header__eyebrow {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: #64748b;
+}
+
+.project-analysis-header__title {
+  margin-top: 8px;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.2;
+  color: #0f172a;
+}
+
+.project-analysis-header__meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid #fde68a;
+  border-radius: 999px;
+  background: #fffbeb;
+}
+
+.project-analysis-header__meta-label {
+  font-size: 12px;
+  color: #92400e;
+}
+
+.project-analysis-header__meta-value {
+  font-size: 13px;
+  font-weight: 600;
+  color: #b45309;
+}
+
+.project-analysis-workspace {
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+  min-height: 700px;
+  max-height: calc(96vh - 170px);
+  padding: 24px 28px 28px;
+  overflow: auto;
+}
+
 .project-analysis-layout {
   display: flex;
   gap: 20px;
   min-height: 640px;
-  max-height: calc(90vh - 120px);
-}
-
-.project-analysis-shell {
-  border: 1px solid #e2e8f0;
-  border-radius: 20px;
-  background: #fff;
-  overflow: hidden;
 }
 
 .project-analysis-layout__sidebar {
   flex: 0 0 340px;
-  padding: 20px 0 20px 20px;
 }
 
 .project-analysis-layout__main {
   flex: 1;
   min-width: 0;
-  padding: 20px 20px 20px 0;
   border-left: 1px solid #e2e8f0;
-}
-
-.project-analysis-layout__main-scroll {
-  max-height: calc(90vh - 120px);
-  overflow-y: auto;
+  padding-left: 24px;
 }
 
 .project-analysis-layout__alert {
   margin-bottom: 16px;
 }
 
-.source-summary {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 16px;
-  padding: 14px 16px;
-  border: 1px solid #fde68a;
-  background: #fffbeb;
-}
-
-.source-summary__label {
-  font-size: 12px;
-  color: #92400e;
-}
-
-.source-summary__value {
-  font-size: 13px;
-  font-weight: 600;
-  color: #b45309;
+.project-analysis-tabs {
+  margin-top: -4px;
 }
 </style>
diff --git a/ruoyi-ui/tests/unit/project-analysis-dialog-default-tab.test.js b/ruoyi-ui/tests/unit/project-analysis-dialog-default-tab.test.js
index b7c28553..307c8e00 100644
--- a/ruoyi-ui/tests/unit/project-analysis-dialog-default-tab.test.js
+++ b/ruoyi-ui/tests/unit/project-analysis-dialog-default-tab.test.js
@@ -18,4 +18,6 @@ const dialog = fs.readFileSync(
   "handleDialogClosed()",
   "this.fetchDetailData()",
   "this.resetDialogState()",
+  "project-analysis-header",
+  'class="project-analysis-tabs"',
 ].forEach((token) => assert(dialog.includes(token), token));
diff --git a/ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js b/ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js
index 84b41633..32ee81a0 100644
--- a/ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js
+++ b/ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js
@@ -19,10 +19,10 @@ const mockSource = fs.readFileSync(
 
 [
   'title="项目分析"',
-  'width="80%"',
-  'top="5vh"',
-  "project-analysis-shell",
   "<project-analysis-sidebar",
+  "project-analysis-header",
+  "project-analysis-workspace",
+  'class="project-analysis-tabs"',
   '<el-tabs v-model="activeTab"',
   'name="abnormalDetail"',
   'label="异常明细"',
@@ -34,12 +34,25 @@ const mockSource = fs.readFileSync(
   "detailLoading",
   "detailError",
   "handleRetryDetail()",
+  "border: 1px solid #e2e8f0",
+  "border-radius: 24px",
+].forEach((token) => assert(dialog.includes(token), token));
+
+[
+  'width="92%"',
+  'top="2vh"',
+  "project-analysis-header__main",
+  "project-analysis-header__meta",
+].forEach((token) => assert(dialog.includes(token), token));
+
+[
+  'width="80%"',
+  'top="5vh"',
+  "project-analysis-shell",
   "project-analysis-layout__main-scroll",
   "overflow-y: auto",
   "max-height: calc(90vh - 120px)",
-  "border: 1px solid #e2e8f0",
-  "border-radius: 20px",
-].forEach((token) => assert(dialog.includes(token), token));
+].forEach((token) => assert(!dialog.includes(token), token));
 
 [
   "projectAnalysisTabs",
diff --git a/ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js b/ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js
index be42ceef..2764aee7 100644
--- a/ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js
+++ b/ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js
@@ -21,9 +21,16 @@ const mockSource = fs.readFileSync(
   'source === "riskModelPeople"',
   "当前命中模型",
   "dialogData.sourceSummary",
+  "project-analysis-header__meta",
+  "project-analysis-header__meta-label",
+  "project-analysis-header__meta-value",
+].forEach((token) => assert(dialog.includes(token), token));
+
+[
+  'class="source-summary"',
   "source-summary__label",
   "source-summary__value",
-].forEach((token) => assert(dialog.includes(token), token));
+].forEach((token) => assert(!dialog.includes(token), token));
 
 [
   "sourceSummary",