From a5089774727eab17e5073265900eab1d8e3a2dd9 Mon Sep 17 00:00:00 2001
From: wkc <978997012@qq.com>
Date: Thu, 19 Mar 2026 10:39:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=BB=93=E6=9E=9C=E6=80=BB?=
 =?UTF-8?q?=E8=A7=88=E9=A1=B5=E9=9D=A2=E5=89=8D=E7=AB=AF=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...esults-overview-frontend-implementation.md | 13 +++++++
 ...-results-overview-frontend-verification.md | 25 +++++++++++++
 .../components/detail/PreliminaryCheck.vue    | 36 +++++++++++++------
 .../components/detail/RiskDetailSection.vue   |  2 +-
 .../components/detail/RiskModelSection.vue    |  2 +-
 .../components/detail/RiskPeopleSection.vue   |  2 +-
 .../detail/preliminaryCheck.mock.js           | 27 ++++++++++++++
 .../unit/preliminary-check-states.test.js     | 17 +++++++++
 8 files changed, 111 insertions(+), 13 deletions(-)
 create mode 100644 docs/reports/implementation/2026-03-19-results-overview-frontend-implementation.md
 create mode 100644 docs/tests/records/2026-03-19-results-overview-frontend-verification.md
 create mode 100644 ruoyi-ui/tests/unit/preliminary-check-states.test.js

diff --git a/docs/reports/implementation/2026-03-19-results-overview-frontend-implementation.md b/docs/reports/implementation/2026-03-19-results-overview-frontend-implementation.md
new file mode 100644
index 00000000..582593dd
--- /dev/null
+++ b/docs/reports/implementation/2026-03-19-results-overview-frontend-implementation.md
@@ -0,0 +1,13 @@
+# 结果总览前端实施记录
+
+## 实施内容
+- 将 `PreliminaryCheck.vue` 从占位页升级为结果总览页面入口
+- 新增顶部总览、风险人员、风险模型、风险明细 4 个区块组件
+- 新增本地 mock 数据文件，覆盖主展示态、空数据态、加载态
+- 新增静态断言脚本，锁定页面分块结构和页面状态
+
+## 验证情况
+- 新增 4 个静态断言脚本，分别覆盖页面骨架、前两块区块、后两块区块和三种页面状态
+- 所有静态断言脚本已通过
+- `npm run build:prod` 已通过
+- 修复了 3 个新组件中深度选择器写法与当前构建链不兼容的问题
diff --git a/docs/tests/records/2026-03-19-results-overview-frontend-verification.md b/docs/tests/records/2026-03-19-results-overview-frontend-verification.md
new file mode 100644
index 00000000..391bafee
--- /dev/null
+++ b/docs/tests/records/2026-03-19-results-overview-frontend-verification.md
@@ -0,0 +1,25 @@
+# 结果总览前端验证记录
+
+## 验证范围
+- 结果总览主展示态
+- 空数据态
+- 加载态
+- 页面构建
+
+## 验证命令
+- `cd ruoyi-ui && node tests/unit/preliminary-check-layout.test.js`
+- `cd ruoyi-ui && node tests/unit/preliminary-check-summary-and-people.test.js`
+- `cd ruoyi-ui && node tests/unit/preliminary-check-model-and-detail.test.js`
+- `cd ruoyi-ui && node tests/unit/preliminary-check-states.test.js`
+- `cd ruoyi-ui && npm run build:prod`
+
+## 验证结果
+- `node tests/unit/preliminary-check-layout.test.js`：通过
+- `node tests/unit/preliminary-check-summary-and-people.test.js`：通过
+- `node tests/unit/preliminary-check-model-and-detail.test.js`：通过
+- `node tests/unit/preliminary-check-states.test.js`：通过
+- `npm run build:prod`：通过
+
+## 备注
+- 构建过程中存在既有 `asset size limit` 与 `entrypoint size limit` 警告
+- 本次结果总览页面改动未引入新的编译错误
diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue
index 7fbc3771..e0733706 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue
@@ -1,24 +1,28 @@
 <template>
   <div class="preliminary-check-container">
     <div v-if="pageState === 'loading'" class="preliminary-check-state">
-      <p>结果总览加载中...</p>
+      <div class="state-card">
+        <el-skeleton animated :rows="6" />
+      </div>
     </div>
 
     <div v-else-if="pageState === 'empty'" class="preliminary-check-state">
-      <p>暂无结果总览数据</p>
+      <div class="state-card">
+        <el-empty description="暂无结果总览数据" />
+      </div>
     </div>
 
     <div v-else class="preliminary-check-page">
-      <overview-stats :summary="mockData.summary" />
-      <risk-people-section :section-data="mockData.riskPeople" />
-      <risk-model-section :section-data="mockData.riskModels" />
-      <risk-detail-section :section-data="mockData.riskDetails" />
+      <overview-stats :summary="currentData.summary" />
+      <risk-people-section :section-data="currentData.riskPeople" />
+      <risk-model-section :section-data="currentData.riskModels" />
+      <risk-detail-section :section-data="currentData.riskDetails" />
     </div>
   </div>
 </template>
 
 <script>
-import { mockOverviewData } from "./preliminaryCheck.mock";
+import { mockOverviewData, mockOverviewStateData } from "./preliminaryCheck.mock";
 import OverviewStats from "./OverviewStats";
 import RiskPeopleSection from "./RiskPeopleSection";
 import RiskModelSection from "./RiskModelSection";
@@ -50,21 +54,33 @@ export default {
     return {
       pageState: "loaded",
       mockData: mockOverviewData,
+      stateDataMap: mockOverviewStateData,
     };
   },
+  computed: {
+    currentData() {
+      return this.stateDataMap[this.pageState] || this.mockData;
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .preliminary-check-container {
   min-height: 400px;
+  padding: 16px 0 24px;
+  background: #f3f6fb;
 }
 
 .preliminary-check-state {
-  padding: 40px 20px;
+  min-height: 400px;
+}
+
+.state-card {
+  padding: 32px 24px;
+  border-radius: 16px;
   background: #fff;
-  color: #909399;
-  text-align: center;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
 }
 
 .preliminary-check-page {
diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue
index d10d4590..17c60eb8 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue
@@ -120,7 +120,7 @@ export default {
   overflow: hidden;
 }
 
-.detail-table /deep/ th {
+:deep(.detail-table th) {
   background: #f8fafc;
   color: #64748b;
 }
diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue
index 934907ec..0b10a106 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue
@@ -197,7 +197,7 @@ export default {
   overflow: hidden;
 }
 
-.model-table /deep/ th {
+:deep(.model-table th) {
   background: #f8fafc;
   color: #64748b;
 }
diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue
index 1c5c4857..7ff6270e 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue
@@ -110,7 +110,7 @@ export default {
   overflow: hidden;
 }
 
-.people-table /deep/ th {
+:deep(.people-table th) {
   background: #f8fafc;
   color: #64748b;
 }
diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js b/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
index 374ee52e..595e5a1f 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
@@ -142,3 +142,30 @@ export const mockOverviewData = {
     ],
   },
 };
+
+export const mockOverviewStateData = {
+  loaded: mockOverviewData,
+  empty: {
+    summary: {
+      ...mockOverviewData.summary,
+      stats: mockOverviewData.summary.stats.map((item) => ({
+        ...item,
+        value: 0,
+      })),
+    },
+    riskPeople: {
+      overviewList: [],
+      topRiskList: [],
+    },
+    riskModels: {
+      ...mockOverviewData.riskModels,
+      cardList: [],
+      peopleList: [],
+    },
+    riskDetails: {
+      transactionList: [],
+      abnormalAccountList: [],
+    },
+  },
+  loading: mockOverviewData,
+};
diff --git a/ruoyi-ui/tests/unit/preliminary-check-states.test.js b/ruoyi-ui/tests/unit/preliminary-check-states.test.js
new file mode 100644
index 00000000..a131c870
--- /dev/null
+++ b/ruoyi-ui/tests/unit/preliminary-check-states.test.js
@@ -0,0 +1,17 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const source = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/PreliminaryCheck.vue"
+  ),
+  "utf8"
+);
+
+["pageState === 'loading'", "pageState === 'empty'", "el-skeleton", "el-empty"].forEach(
+  (token) => {
+    assert(source.includes(token), `缺少页面状态结构: ${token}`);
+  }
+);