调整结果总览详情侧栏固定布局

docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-sidebar-fixed-layout-implementation.md

@@ -0,0 +1,37 @@
+# 结果总览查看详情弹窗左侧固定卡片布局实施记录
+
+## 变更日期
+
+- 2026-03-25
+
+## 变更范围
+
+- 前端：`ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue`
+- 前端：`ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue`
+- 单测：`ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js`
+- 单测：`ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js`
+
+## 实施内容
+
+### 1. 左侧内容改为一张固定卡片
+
+- 移除“排查记录摘要”区块。
+- 将“人员基础信息”和“命中模型摘要”合并到一张侧栏卡片中。
+- 两个区块之间增加分隔线，保留分组标题。
+
+### 2. 移除左侧背景色与阴影
+
+- 左侧卡片背景改为透明。
+- 去除卡片阴影，仅保留边框和分组结构。
+
+### 3. 右侧内容改为独立滚动
+
+- 在项目分析弹窗中新增 `project-analysis-layout__main-scroll` 容器。
+- 右侧主内容改为内部纵向滚动。
+- 左侧侧栏设置为固定区，不随右侧内容滚动。
+
+## 结果
+
+- 弹窗左侧已改为一张固定信息卡片。
+- 右侧内容向下滚动时，左侧人员基础信息和命中模型摘要保持固定。
+- 排查记录摘要已从弹窗左侧移除。

docs/tests/records/2026-03-25-results-overview-project-analysis-dialog-sidebar-fixed-layout-verification.md

@@ -0,0 +1,28 @@
+# 结果总览查看详情弹窗左侧固定卡片布局验证记录
+
+## 验证日期
+
+- 2026-03-25
+
+## 验证命令
+
+```bash
+cd ruoyi-ui
+node tests/unit/project-analysis-dialog-sidebar.test.js
+node tests/unit/project-analysis-dialog-layout.test.js
+node tests/unit/project-analysis-dialog-abnormal-tab.test.js
+node tests/unit/project-analysis-dialog-source-highlight.test.js
+npm run build:prod
+```
+
+## 验证结果
+
+- 侧栏结构相关单测通过。
+- 弹窗布局相关单测通过。
+- 异常明细与来源提示相关单测通过。
+- 前端生产构建成功。
+- 构建过程中仅有项目既有的静态资源体积告警，无新增错误。
+
+## 结论
+
+- 左侧固定卡片、右侧独立滚动、移除排查记录摘要等调整已完成，相关前端回归通过。

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

@@ -14,42 +14,44 @@
         :sidebar-data="dialogData.sidebar"
       />
       <div v-loading="detailLoading" class="project-analysis-layout__main">
-        <el-alert
+        <div class="project-analysis-layout__main-scroll">
-          v-if="detailError"
+          <el-alert
-          :closable="false"
+            v-if="detailError"
-          class="project-analysis-layout__alert"
+            :closable="false"
-          type="error"
+            class="project-analysis-layout__alert"
-          show-icon
+            type="error"
-          :title="detailError"
+            show-icon
-        >
+            :title="detailError"
-          <template slot="default">
+          >
-            <el-button type="text" size="mini" @click="handleRetryDetail">重试</el-button>
+            <template slot="default">
-          </template>
+              <el-button type="text" size="mini" @click="handleRetryDetail">重试</el-button>
-        </el-alert>
+            </template>
-        <div
+          </el-alert>
-          v-if='dialogData.sourceSummary.showCurrentModel && source === "riskModelPeople"'
+          <div
-          class="source-summary"
+            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>
+            <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>
-        <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>
   </el-dialog>
@@ -200,6 +202,7 @@ export default {
   display: flex;
   gap: 20px;
   min-height: 640px;
+  max-height: calc(90vh - 120px);
 }
 
 .project-analysis-layout__sidebar {
@@ -211,6 +214,11 @@ export default {
   min-width: 0;
 }
 
+.project-analysis-layout__main-scroll {
+  max-height: calc(90vh - 120px);
+  overflow-y: auto;
+}
+
 .project-analysis-layout__alert {
   margin-bottom: 16px;
 }

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

@@ -1,54 +1,50 @@
 <template>
   <aside class="project-analysis-sidebar">
     <section class="sidebar-card">
-      <div class="sidebar-card__title">人员基础信息</div>
+      <div class="sidebar-section">
-      <div class="sidebar-field">
+        <div class="sidebar-card__title">人员基础信息</div>
-        <span class="sidebar-field__label">姓名</span>
+        <div class="sidebar-field">
-        <span class="sidebar-field__value">{{ sidebarData.basicInfo.name || "-" }}</span>
+          <span class="sidebar-field__label">姓名</span>
-      </div>
+          <span class="sidebar-field__value">{{ sidebarData.basicInfo.name || "-" }}</span>
-      <div class="sidebar-field">
+        </div>
-        <span class="sidebar-field__label">工号</span>
+        <div class="sidebar-field">
-        <span class="sidebar-field__value">{{ sidebarData.basicInfo.staffCode || "-" }}</span>
+          <span class="sidebar-field__label">工号</span>
-      </div>
+          <span class="sidebar-field__value">{{ sidebarData.basicInfo.staffCode || "-" }}</span>
-      <div class="sidebar-field">
+        </div>
-        <span class="sidebar-field__label">部门</span>
+        <div class="sidebar-field">
-        <span class="sidebar-field__value">{{ sidebarData.basicInfo.department || "-" }}</span>
+          <span class="sidebar-field__label">部门</span>
-      </div>
+          <span class="sidebar-field__value">{{ sidebarData.basicInfo.department || "-" }}</span>
-      <div class="sidebar-field">
+        </div>
-        <span class="sidebar-field__label">风险等级</span>
+        <div class="sidebar-field">
-        <span class="sidebar-field__value">{{ sidebarData.basicInfo.riskLevel || "-" }}</span>
+          <span class="sidebar-field__label">风险等级</span>
-      </div>
+          <span class="sidebar-field__value">{{ sidebarData.basicInfo.riskLevel || "-" }}</span>
-      <div class="sidebar-field">
+        </div>
-        <span class="sidebar-field__label">所属项目</span>
+        <div class="sidebar-field">
-        <span class="sidebar-field__value">{{ sidebarData.basicInfo.projectName || "-" }}</span>
+          <span class="sidebar-field__label">所属项目</span>
-      </div>
+          <span class="sidebar-field__value">{{ sidebarData.basicInfo.projectName || "-" }}</span>
-    </section>
+        </div>
-
+      </div>
-    <section class="sidebar-card">
+      <div class="sidebar-section sidebar-section--split">
-      <div class="sidebar-card__title">命中模型摘要</div>
+        <div class="sidebar-card__title">命中模型摘要</div>
-      <div class="sidebar-field">
+        <div class="sidebar-field">
-        <span class="sidebar-field__label">命中模型数</span>
+          <span class="sidebar-field__label">命中模型数</span>
-        <span class="sidebar-field__value">{{ sidebarData.modelSummary.modelCount || "-" }}</span>
+          <span class="sidebar-field__value">{{ sidebarData.modelSummary.modelCount || "-" }}</span>
-      </div>
+        </div>
-      <div class="sidebar-field sidebar-field--column">
+        <div class="sidebar-field sidebar-field--column">
-        <span class="sidebar-field__label">核心异常标签</span>
+          <span class="sidebar-field__label">核心异常标签</span>
-        <div v-if="sidebarData.modelSummary.riskTags.length" class="tag-list">
+          <div v-if="sidebarData.modelSummary.riskTags.length" class="tag-list">
-          <el-tag
+            <el-tag
-            v-for="(tag, index) in sidebarData.modelSummary.riskTags"
+              v-for="(tag, index) in sidebarData.modelSummary.riskTags"
-            :key="`${formatRiskTag(tag)}-${index}`"
+              :key="`${formatRiskTag(tag)}-${index}`"
-            size="mini"
+              size="mini"
-            effect="plain"
+              effect="plain"
-          >
+            >
-            {{ formatRiskTag(tag) }}
+              {{ formatRiskTag(tag) }}
-          </el-tag>
+            </el-tag>
+          </div>
+          <span v-else class="sidebar-field__value">暂无异常标签</span>
         </div>
-        <span v-else class="sidebar-field__value">暂无异常标签</span>
       </div>
-    </section>
-
-    <section class="sidebar-card">
-      <div class="sidebar-card__title">排查记录摘要</div>
-      <p class="sidebar-summary">{{ sidebarData.recordSummary }}</p>
     </section>
   </aside>
 </template>
@@ -64,7 +60,6 @@ export default {
         modelSummary: {
           riskTags: [],
         },
-        recordSummary: "",
       }),
     },
   },
@@ -84,16 +79,23 @@ export default {
 
 <style lang="scss" scoped>
 .project-analysis-sidebar {
-  display: flex;
+  position: sticky;
-  flex-direction: column;
+  top: 0;
-  gap: 16px;
 }
 
 .sidebar-card {
-  padding: 18px 16px;
+  padding: 0;
   border: 1px solid #e2e8f0;
-  background: #fff;
+  background: transparent;
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
+  box-shadow: none;
+}
+
+.sidebar-section {
+  padding: 18px 16px;
+}
+
+.sidebar-section--split {
+  border-top: 1px solid #e2e8f0;
 }
 
 .sidebar-card__title {
@@ -141,11 +143,4 @@ export default {
   gap: 8px;
   margin-top: 8px;
 }
-
-.sidebar-summary {
-  margin: 0;
-  font-size: 13px;
-  line-height: 1.8;
-  color: #475569;
-}
 </style>

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

@@ -33,6 +33,9 @@ const mockSource = fs.readFileSync(
   "detailLoading",
   "detailError",
   "handleRetryDetail()",
+  "project-analysis-layout__main-scroll",
+  "overflow-y: auto",
+  "max-height: calc(90vh - 120px)",
 ].forEach((token) => assert(dialog.includes(token), token));
 
 [

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

@@ -27,7 +27,6 @@ const entry = fs.readFileSync(
 [
   "人员基础信息",
   "命中模型摘要",
-  "排查记录摘要",
   "姓名",
   "工号",
   "部门",
@@ -41,6 +40,8 @@ const entry = fs.readFileSync(
 ].forEach((token) => assert(sidebar.includes(token), token));
 
 assert(!sidebar.includes("当前命中模型"), "命中模型摘要应移除当前命中模型字段");
+assert(!sidebar.includes("排查记录摘要"), "侧栏应移除排查记录摘要");
+assert(!sidebar.includes("sidebar-summary"), "侧栏不应再渲染排查记录摘要文案");
 
 assert(!sidebar.includes("关系人画像"), "侧栏不应扩展到额外区块");
 assert(!sidebar.includes("资产分布"), "侧栏不应扩展到额外区块");