From 42847ffdbaae8a80cbfac47abcd817e769210ba8 Mon Sep 17 00:00:00 2001
From: wkc <978997012@qq.com>
Date: Thu, 19 Mar 2026 11:02:16 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=BB=93=E6=9E=9C=E6=80=BB?=
 =?UTF-8?q?=E8=A7=88=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E4=B8=8E=E6=96=87?=
 =?UTF-8?q?=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...esults-overview-frontend-implementation.md |  4 +++
 .../components/detail/OverviewStats.vue       |  9 +++---
 .../components/detail/PreliminaryCheck.vue    |  5 ++-
 .../components/detail/RiskDetailSection.vue   |  2 +-
 .../components/detail/RiskModelSection.vue    |  4 +--
 .../components/detail/RiskPeopleSection.vue   |  2 +-
 .../detail/preliminaryCheck.mock.js           |  6 ++--
 .../unit/preliminary-check-background.test.js | 14 ++++++++
 .../preliminary-check-card-corners.test.js    | 32 +++++++++++++++++++
 ...preliminary-check-overview-spacing.test.js | 14 ++++++++
 ...eliminary-check-summary-and-people.test.js |  2 +-
 .../preliminary-check-summary-visuals.test.js | 23 +++++++++++++
 .../preliminary-check-top-spacing.test.js     | 14 ++++++++
 13 files changed, 116 insertions(+), 15 deletions(-)
 create mode 100644 ruoyi-ui/tests/unit/preliminary-check-background.test.js
 create mode 100644 ruoyi-ui/tests/unit/preliminary-check-card-corners.test.js
 create mode 100644 ruoyi-ui/tests/unit/preliminary-check-overview-spacing.test.js
 create mode 100644 ruoyi-ui/tests/unit/preliminary-check-summary-visuals.test.js
 create mode 100644 ruoyi-ui/tests/unit/preliminary-check-top-spacing.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
index 582593dd..452710b0 100644
--- a/docs/reports/implementation/2026-03-19-results-overview-frontend-implementation.md
+++ b/docs/reports/implementation/2026-03-19-results-overview-frontend-implementation.md
@@ -5,6 +5,10 @@
 - 新增顶部总览、风险人员、风险模型、风险明细 4 个区块组件
 - 新增本地 mock 数据文件，覆盖主展示态、空数据态、加载态
 - 新增静态断言脚本，锁定页面分块结构和页面状态
+- 按最新页面反馈将卡片改为直角、移除内容区浅灰背景，并收紧结果总览标题与统计卡之间的间距
+- 对齐结果总览内容区与其他页签的顶部间距，去掉额外的 16px 顶部留白
+- 按最新页面反馈为风险总览统计卡补阴影，并将“风险交易”指标文案调整为“无风险人员”
+- 按最新页面反馈将页面主标题“风险总览”调整为“风险仪表盘”
 
 ## 验证情况
 - 新增 4 个静态断言脚本，分别覆盖页面骨架、前两块区块、后两块区块和三种页面状态
diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/OverviewStats.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/OverviewStats.vue
index 412e9083..467dc6bb 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/OverviewStats.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/OverviewStats.vue
@@ -3,7 +3,7 @@
     <div class="section-card">
       <div class="section-header">
         <div class="section-title-group">
-          <div class="section-title">{{ summary.title || "风险总览" }}</div>
+          <div class="section-title">{{ summary.title || "风险仪表盘" }}</div>
           <div class="section-subtitle">{{ summary.subtitle || "风险总体数据概览" }}</div>
         </div>
         <div class="section-actions">
@@ -57,7 +57,7 @@ export default {
 
 .section-card {
   padding: 20px;
-  border-radius: 16px;
+  border-radius: 0;
   background: #fff;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
 }
@@ -66,7 +66,7 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 18px;
+  margin-bottom: 10px;
   gap: 16px;
 }
 
@@ -99,8 +99,9 @@ export default {
   gap: 14px;
   padding: 18px 16px;
   border: 1px solid #eef2ff;
-  border-radius: 14px;
+  border-radius: 0;
   background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
 }
 
 .stats-icon {
diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue
index e0733706..db7bdfab 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue
@@ -68,8 +68,7 @@ export default {
 <style lang="scss" scoped>
 .preliminary-check-container {
   min-height: 400px;
-  padding: 16px 0 24px;
-  background: #f3f6fb;
+  padding: 0 0 24px;
 }
 
 .preliminary-check-state {
@@ -78,7 +77,7 @@ export default {
 
 .state-card {
   padding: 32px 24px;
-  border-radius: 16px;
+  border-radius: 0;
   background: #fff;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
 }
diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue
index 17c60eb8..04ab3634 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue
@@ -87,7 +87,7 @@ export default {
 
 .section-card {
   padding: 20px;
-  border-radius: 16px;
+  border-radius: 0;
   background: #fff;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
 }
diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue
index 0b10a106..638a0fef 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue
@@ -112,7 +112,7 @@ export default {
 
 .section-card {
   padding: 20px;
-  border-radius: 16px;
+  border-radius: 0;
   background: #fff;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
 }
@@ -149,7 +149,7 @@ export default {
 .model-card {
   padding: 18px;
   border: 1px solid #e2e8f0;
-  border-radius: 14px;
+  border-radius: 0;
   background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
 }
 
diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue
index 7ff6270e..47d31bb6 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue
@@ -77,7 +77,7 @@ export default {
 
 .section-card {
   padding: 20px;
-  border-radius: 16px;
+  border-radius: 0;
   background: #fff;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
 }
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 595e5a1f..77d0abce 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
@@ -1,7 +1,7 @@
 export const mockOverviewData = {
   summary: {
-    title: "风险总览",
-    subtitle: "风险总览数据概览",
+    title: "风险仪表盘",
+    subtitle: "风险仪表盘数据概览",
     actions: [
       { key: "download", label: "批量导出", type: "primary", plain: false },
       { key: "state", label: "切换视图", type: "primary", plain: true },
@@ -11,7 +11,7 @@ export const mockOverviewData = {
       { key: "riskPeople", label: "风险人数", value: 10, icon: "el-icon-warning-outline", tone: "red" },
       { key: "medium", label: "中风险", value: 20, icon: "el-icon-s-opportunity", tone: "amber" },
       { key: "low", label: "低风险", value: 38, icon: "el-icon-data-line", tone: "green" },
-      { key: "count", label: "风险交易", value: 432, icon: "el-icon-document", tone: "blue" },
+      { key: "count", label: "无风险人员", value: 432, icon: "el-icon-document", tone: "blue" },
     ],
   },
   riskPeople: {
diff --git a/ruoyi-ui/tests/unit/preliminary-check-background.test.js b/ruoyi-ui/tests/unit/preliminary-check-background.test.js
new file mode 100644
index 00000000..7f085161
--- /dev/null
+++ b/ruoyi-ui/tests/unit/preliminary-check-background.test.js
@@ -0,0 +1,14 @@
+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"
+);
+
+assert(source.includes(".preliminary-check-container"), "缺少结果总览容器样式");
+assert(!source.includes("background: #f3f6fb;"), "结果总览容器不应保留浅灰背景");
diff --git a/ruoyi-ui/tests/unit/preliminary-check-card-corners.test.js b/ruoyi-ui/tests/unit/preliminary-check-card-corners.test.js
new file mode 100644
index 00000000..a9d3df14
--- /dev/null
+++ b/ruoyi-ui/tests/unit/preliminary-check-card-corners.test.js
@@ -0,0 +1,32 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+function read(file) {
+  return fs.readFileSync(
+    path.resolve(
+      __dirname,
+      `../../src/views/ccdiProject/components/detail/${file}`
+    ),
+    "utf8"
+  );
+}
+
+const overview = read("OverviewStats.vue");
+const people = read("RiskPeopleSection.vue");
+const model = read("RiskModelSection.vue");
+const detail = read("RiskDetailSection.vue");
+const entry = read("PreliminaryCheck.vue");
+
+[
+  [overview, ".section-card", "border-radius: 0;"],
+  [overview, ".stats-card", "border-radius: 0;"],
+  [people, ".section-card", "border-radius: 0;"],
+  [model, ".section-card", "border-radius: 0;"],
+  [model, ".model-card", "border-radius: 0;"],
+  [detail, ".section-card", "border-radius: 0;"],
+  [entry, ".state-card", "border-radius: 0;"],
+].forEach(([source, selector, token]) => {
+  assert(source.includes(selector), `缺少选择器: ${selector}`);
+  assert(source.includes(token), `卡片应使用直角: ${selector}`);
+});
diff --git a/ruoyi-ui/tests/unit/preliminary-check-overview-spacing.test.js b/ruoyi-ui/tests/unit/preliminary-check-overview-spacing.test.js
new file mode 100644
index 00000000..bee5a4fa
--- /dev/null
+++ b/ruoyi-ui/tests/unit/preliminary-check-overview-spacing.test.js
@@ -0,0 +1,14 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const source = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/OverviewStats.vue"
+  ),
+  "utf8"
+);
+
+assert(source.includes(".section-header"), "缺少结果总览标题区样式");
+assert(source.includes("margin-bottom: 10px;"), "标题区与统计卡片间距应收紧到 10px");
diff --git a/ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js b/ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js
index 4754cbd6..7d79a545 100644
--- a/ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js
+++ b/ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js
@@ -24,7 +24,7 @@ const people = fs.readFileSync(
   "utf8"
 );
 
-["风险总览", "overview-stats"].forEach((token) => assert(stats.includes(token), token));
+["风险仪表盘", "overview-stats"].forEach((token) => assert(stats.includes(token), token));
 ["风险人员总览", "中高风险人员TOP10", "查看详情"].forEach((token) =>
   assert(people.includes(token), token)
 );
diff --git a/ruoyi-ui/tests/unit/preliminary-check-summary-visuals.test.js b/ruoyi-ui/tests/unit/preliminary-check-summary-visuals.test.js
new file mode 100644
index 00000000..93fe79ea
--- /dev/null
+++ b/ruoyi-ui/tests/unit/preliminary-check-summary-visuals.test.js
@@ -0,0 +1,23 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const overviewSource = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/OverviewStats.vue"
+  ),
+  "utf8"
+);
+const mockSource = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/preliminaryCheck.mock.js"
+  ),
+  "utf8"
+);
+
+assert(overviewSource.includes(".stats-card"), "缺少风险总览统计卡样式");
+assert(overviewSource.includes("box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);"), "风险总览统计卡应添加阴影");
+assert(mockSource.includes('label: "无风险人员"'), "风险总览最后一个指标应改为无风险人员");
+assert(!mockSource.includes('label: "风险交易"'), "风险交易文案应被替换");
diff --git a/ruoyi-ui/tests/unit/preliminary-check-top-spacing.test.js b/ruoyi-ui/tests/unit/preliminary-check-top-spacing.test.js
new file mode 100644
index 00000000..4804f0c2
--- /dev/null
+++ b/ruoyi-ui/tests/unit/preliminary-check-top-spacing.test.js
@@ -0,0 +1,14 @@
+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"
+);
+
+assert(source.includes(".preliminary-check-container"), "缺少结果总览容器样式");
+assert(source.includes("padding: 0 0 24px;"), "结果总览顶部间距应与其他页签统一");