重构结果总览详情弹窗外层骨架

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

@@ -8,51 +8,76 @@
     custom-class="project-analysis-dialog"
     @close="handleDialogClosed"
   >
-    <div class="project-analysis-shell">
+    <div class="project-analysis-header">
-      <div class="project-analysis-layout">
+      <div class="project-analysis-header__main">
-        <project-analysis-sidebar
+        <div class="project-analysis-header__title-row">
-          class="project-analysis-layout__sidebar"
+          <div class="project-analysis-header__title">{{ dialogData.sidebar.basicInfo.name || "-" }}</div>
-          :sidebar-data="dialogData.sidebar"
+          <span class="project-analysis-header__risk">{{ dialogData.sidebar.basicInfo.riskLevel || "-" }}</span>
-        />
+        </div>
-        <div v-loading="detailLoading" class="project-analysis-layout__main">
+        <div class="project-analysis-header__meta">
-          <div class="project-analysis-layout__main-scroll">
+          <span>工号 {{ dialogData.sidebar.basicInfo.staffCode || "-" }}</span>
-            <el-alert
+          <span>部门 {{ dialogData.sidebar.basicInfo.department || "-" }}</span>
-              v-if="detailError"
+          <span>所属项目 {{ dialogData.sidebar.basicInfo.projectName || "-" }}</span>
-              :closable="false"
+        </div>
-              class="project-analysis-layout__alert"
+      </div>
-              type="error"
+      <div
-              show-icon
+        v-if='dialogData.sourceSummary.showCurrentModel && source === "riskModelPeople"'
-              :title="detailError"
+        class="project-analysis-header__context"
-            >
+      >
-              <template slot="default">
+        <span class="project-analysis-header__context-label">当前命中模型</span>
-                <el-button type="text" size="mini" @click="handleRetryDetail">重试</el-button>
+        <span class="project-analysis-header__context-value">{{ dialogData.sourceSummary.currentModelValue }}</span>
-              </template>
+      </div>
-            </el-alert>
+    </div>
-            <div
+    <div class="project-analysis-overview">
-              v-if='dialogData.sourceSummary.showCurrentModel && source === "riskModelPeople"'
+      <div class="project-analysis-overview__item">
-              class="source-summary"
+        <span class="project-analysis-overview__label">风险等级</span>
-            >
+        <strong class="project-analysis-overview__value">{{ dialogData.sidebar.basicInfo.riskLevel || "-" }}</strong>
-              <span class="source-summary__label">当前命中模型</span>
+      </div>
-              <span class="source-summary__value">{{ dialogData.sourceSummary.currentModelValue }}</span>
+      <div class="project-analysis-overview__item">
-            </div>
+        <span class="project-analysis-overview__label">命中模型数</span>
-            <el-tabs v-model="activeTab" stretch>
+        <strong class="project-analysis-overview__value">{{ dialogData.sidebar.modelSummary.modelCount || "-" }}</strong>
-              <el-tab-pane label="异常明细" name="abnormalDetail">
+      </div>
-                <project-analysis-abnormal-tab :detail-data="dialogData.abnormalDetail" />
+      <div class="project-analysis-overview__item">
-              </el-tab-pane>
+        <span class="project-analysis-overview__label">核心异常标签</span>
-              <el-tab-pane label="资产分析" name="assetAnalysis">
+        <strong class="project-analysis-overview__value">{{ dialogData.sidebar.modelSummary.riskTags.length || 0 }}</strong>
-                <project-analysis-placeholder-tab :tab-data="getTabData('assetAnalysis')" />
+      </div>
-              </el-tab-pane>
+    </div>
-              <el-tab-pane label="征信摘要" name="creditSummary">
+    <div class="project-analysis-layout">
-                <project-analysis-placeholder-tab :tab-data="getTabData('creditSummary')" />
+      <project-analysis-sidebar
-              </el-tab-pane>
+        class="project-analysis-layout__sidebar"
-              <el-tab-pane label="关系图谱" name="relationshipGraph">
+        :sidebar-data="dialogData.sidebar"
-                <project-analysis-placeholder-tab :tab-data="getTabData('relationshipGraph')" />
+      />
-              </el-tab-pane>
+      <div v-loading="detailLoading" class="project-analysis-layout__main">
-              <el-tab-pane label="资金流向" name="fundFlow">
+        <div class="project-analysis-layout__main-scroll">
-                <project-analysis-placeholder-tab :tab-data="getTabData('fundFlow')" />
+          <el-alert
-              </el-tab-pane>
+            v-if="detailError"
-            </el-tabs>
+            :closable="false"
-          </div>
+            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" 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,30 +225,121 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.project-analysis-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 24px;
+  border: 1px solid #e2e8f0;
+  border-radius: 20px;
+  background: linear-gradient(135deg, #fffdf7 0%, #ffffff 60%, #f8fafc 100%);
+}
+
+.project-analysis-header__main {
+  min-width: 0;
+  flex: 1;
+}
+
+.project-analysis-header__title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.project-analysis-header__title {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.2;
+  color: #0f172a;
+}
+
+.project-analysis-header__risk {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: #fee2e2;
+  font-size: 13px;
+  font-weight: 600;
+  color: #b91c1c;
+}
+
+.project-analysis-header__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 20px;
+  margin-top: 14px;
+  font-size: 13px;
+  color: #475569;
+}
+
+.project-analysis-header__context {
+  display: flex;
+  min-width: 220px;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 18px;
+  border-radius: 16px;
+  background: #fff7ed;
+}
+
+.project-analysis-header__context-label {
+  font-size: 12px;
+  color: #9a3412;
+}
+
+.project-analysis-header__context-value {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.6;
+  color: #7c2d12;
+}
+
+.project-analysis-overview {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.project-analysis-overview__item {
+  padding: 18px 20px;
+  border: 1px solid #e2e8f0;
+  border-radius: 18px;
+  background: #ffffff;
+}
+
+.project-analysis-overview__label {
+  display: block;
+  font-size: 12px;
+  color: #64748b;
+}
+
+.project-analysis-overview__value {
+  display: block;
+  margin-top: 8px;
+  font-size: 18px;
+  color: #0f172a;
+}
+
 .project-analysis-layout {
   display: flex;
   gap: 20px;
+  margin-top: 16px;
   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;
+  padding: 0;
 }
 
 .project-analysis-layout__main {
   flex: 1;
   min-width: 0;
-  padding: 20px 20px 20px 0;
+  padding: 0;
-  border-left: 1px solid #e2e8f0;
 }
 
 .project-analysis-layout__main-scroll {
@@ -234,25 +350,4 @@ export default {
 .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;
-}
 </style>

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

@@ -12,6 +12,8 @@ const dialog = fs.readFileSync(
 
 [
   'activeTab: "abnormalDetail"',
+  "project-analysis-header",
+  "project-analysis-overview",
   "if (value) {",
   "resetDialogState()",
   'this.activeTab = "abnormalDetail"',
@@ -19,3 +21,5 @@ const dialog = fs.readFileSync(
   "this.fetchDetailData()",
   "this.resetDialogState()",
 ].forEach((token) => assert(dialog.includes(token), token));
+
+assert(!dialog.includes("project-analysis-shell"), "关闭重开后默认页签保持，但内部套娃外壳应已移除");

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

@@ -21,7 +21,11 @@ const mockSource = fs.readFileSync(
   'title="项目分析"',
   'width="80%"',
   'top="5vh"',
-  "project-analysis-shell",
+  "project-analysis-header",
+  "project-analysis-overview",
+  "project-analysis-header__title",
+  "project-analysis-header__risk",
+  "project-analysis-header__meta",
   "<project-analysis-sidebar",
   '<el-tabs v-model="activeTab"',
   'name="abnormalDetail"',
@@ -37,10 +41,14 @@ const mockSource = fs.readFileSync(
   "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));
 
+assert(!dialog.includes("project-analysis-shell"), "不应继续保留内部大白卡外壳");
+assert(!dialog.includes('class="source-summary"'), "当前命中模型不应停留在主区顶部");
+
 [
   "projectAnalysisTabs",
   'key: "abnormalDetail"',

ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js

@@ -21,10 +21,13 @@ const mockSource = fs.readFileSync(
   'source === "riskModelPeople"',
   "当前命中模型",
   "dialogData.sourceSummary",
-  "source-summary__label",
+  "project-analysis-header__context",
-  "source-summary__value",
+  "project-analysis-header__context-label",
+  "project-analysis-header__context-value",
 ].forEach((token) => assert(dialog.includes(token), token));
 
+assert(!dialog.includes('class="source-summary"'), "当前命中模型应并入头带上下文区域");
+
 [
   "sourceSummary",
   "showCurrentModel: source === \"riskModelPeople\"",