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

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,6 +14,7 @@
         :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"
@@ -52,6 +53,7 @@
           </el-tabs>
         </div>
       </div>
+    </div>
   </el-dialog>
 </template>
 
@@ -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,6 +1,7 @@
 <template>
   <aside class="project-analysis-sidebar">
     <section class="sidebar-card">
+      <div class="sidebar-section">
         <div class="sidebar-card__title">人员基础信息</div>
         <div class="sidebar-field">
           <span class="sidebar-field__label">姓名</span>
@@ -22,9 +23,8 @@
           <span class="sidebar-field__label">所属项目</span>
           <span class="sidebar-field__value">{{ sidebarData.basicInfo.projectName || "-" }}</span>
         </div>
-    </section>
+      </div>
-
+      <div class="sidebar-section sidebar-section--split">
-    <section class="sidebar-card">
         <div class="sidebar-card__title">命中模型摘要</div>
         <div class="sidebar-field">
           <span class="sidebar-field__label">命中模型数</span>
@@ -44,11 +44,7 @@
           </div>
           <span v-else class="sidebar-field__value">暂无异常标签</span>
         </div>
-    </section>
+      </div>
-
-    <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("资产分布"), "侧栏不应扩展到额外区块");