合并结果总览详情外层卡片

docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-unified-shell-implementation.md

@@ -0,0 +1,35 @@
+# 结果总览查看详情弹窗统一外层卡片实施记录
+
+## 变更日期
+
+- 2026-03-25
+
+## 变更范围
+
+- 前端：`ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue`
+- 前端：`ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue`
+- 单测：`ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js`
+- 单测：`ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js`
+
+## 实施内容
+
+### 1. 左右区域合并到同一个外层卡片
+
+- 在项目分析弹窗中新增 `project-analysis-shell` 外层容器。
+- 外层容器统一承载边框、圆角、背景和裁切效果。
+- 左右分栏保持不变，但视觉上不再是两张独立卡片。
+
+### 2. 左侧独立卡片样式收口
+
+- 去掉左侧 `sidebar-card` 的独立边框。
+- 保留左侧信息分组与分隔线，维持内容层次。
+
+### 3. 右侧区域并入统一外壳
+
+- 右侧内容区保留原有独立滚动逻辑。
+- 通过左边距与分割线，保证左右两区在统一外壳内仍有清晰边界。
+
+## 结果
+
+- 左右内容已放进同一个外层卡片。
+- 左侧不再呈现独立卡片外观，弹窗整体视觉更加统一。

docs/tests/records/2026-03-25-results-overview-project-analysis-dialog-unified-shell-verification.md

@@ -0,0 +1,28 @@
+# 结果总览查看详情弹窗统一外层卡片验证记录
+
+## 验证日期
+
+- 2026-03-25
+
+## 验证命令
+
+```bash
+cd ruoyi-ui
+node tests/unit/project-analysis-dialog-layout.test.js
+node tests/unit/project-analysis-dialog-sidebar.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

@@ -8,49 +8,51 @@
     custom-class="project-analysis-dialog"
     @close="handleDialogClosed"
   >
-    <div class="project-analysis-layout">
+    <div class="project-analysis-shell">
-      <project-analysis-sidebar
+      <div class="project-analysis-layout">
-        class="project-analysis-layout__sidebar"
+        <project-analysis-sidebar
-        :sidebar-data="dialogData.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">
+        <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>
     </div>
@@ -205,13 +207,23 @@ export default {
   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 {

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

@@ -84,7 +84,7 @@ export default {
 
 .sidebar-card {
   padding: 0;
-  border: 1px solid #e2e8f0;
+  border: none;
   background: transparent;
   box-shadow: none;
 }

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

@@ -21,6 +21,7 @@ const mockSource = fs.readFileSync(
   'title="项目分析"',
   'width="80%"',
   'top="5vh"',
+  "project-analysis-shell",
   "<project-analysis-sidebar",
   '<el-tabs v-model="activeTab"',
   'name="abnormalDetail"',
@@ -36,6 +37,8 @@ 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));
 
 [

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

@@ -43,6 +43,7 @@ assert(!sidebar.includes("当前命中模型"), "命中模型摘要应移除当
 assert(!sidebar.includes("排查记录摘要"), "侧栏应移除排查记录摘要");
 assert(!sidebar.includes("sidebar-summary"), "侧栏不应再渲染排查记录摘要文案");
 assert(!sidebar.includes("position: sticky"), "左侧整卡不应保持固定");
+assert(!sidebar.includes("border: 1px solid #e2e8f0"), "左右区域合并后左侧不应保留独立卡片边框");
 
 assert(!sidebar.includes("关系人画像"), "侧栏不应扩展到额外区块");
 assert(!sidebar.includes("资产分布"), "侧栏不应扩展到额外区块");