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

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

@@ -2,20 +2,36 @@
   <el-dialog
     title="项目分析"
     :visible.sync="visibleProxy"
-    width="80%"
+    width="92%"
-    top="5vh"
+    top="2vh"
     append-to-body
     custom-class="project-analysis-dialog"
     @close="handleDialogClosed"
   >
-    <div class="project-analysis-shell">
+    <div class="project-analysis-dialog__body">
-      <div class="project-analysis-layout">
+      <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">
-          <div class="project-analysis-layout__main-scroll">
           <el-alert
             v-if="detailError"
             :closable="false"
@@ -28,14 +44,7 @@
               <el-button type="text" size="mini" @click="handleRetryDetail">重试</el-button>
             </template>
           </el-alert>
-            <div
+          <el-tabs v-model="activeTab" class="project-analysis-tabs" stretch>
-              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>
@@ -55,7 +64,6 @@
         </div>
       </div>
     </div>
-    </div>
   </el-dialog>
 </template>
 
@@ -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;
-}
+  padding-left: 24px;
-
-.project-analysis-layout__main-scroll {
-  max-height: calc(90vh - 120px);
-  overflow-y: auto;
 }
 
 .project-analysis-layout__alert {
   margin-bottom: 16px;
 }
 
-.source-summary {
+.project-analysis-tabs {
-  display: flex;
+  margin-top: -4px;
-  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;
 }
 </style>

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));

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",
+].forEach((token) => assert(!dialog.includes(token), token));
-  "border-radius: 20px",
-].forEach((token) => assert(dialog.includes(token), token));
 
 [
   "projectAnalysisTabs",

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",