收紧项目分析弹窗头带与滚动布局

2026-03-26 09:12:07 +08:00
parent 2b701602ff
commit 21b8b7bf41
4 changed files with 155 additions and 84 deletions
--- 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>
--- 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));
--- 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",
--- 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",