调整结果总览页面样式与文案

docs/reports/implementation/2026-03-19-results-overview-frontend-implementation.md

@@ -5,6 +5,10 @@
 - 新增顶部总览、风险人员、风险模型、风险明细 4 个区块组件
 - 新增本地 mock 数据文件，覆盖主展示态、空数据态、加载态
 - 新增静态断言脚本，锁定页面分块结构和页面状态
+- 按最新页面反馈将卡片改为直角、移除内容区浅灰背景，并收紧结果总览标题与统计卡之间的间距
+- 对齐结果总览内容区与其他页签的顶部间距，去掉额外的 16px 顶部留白
+- 按最新页面反馈为风险总览统计卡补阴影，并将“风险交易”指标文案调整为“无风险人员”
+- 按最新页面反馈将页面主标题“风险总览”调整为“风险仪表盘”
 
 ## 验证情况
 - 新增 4 个静态断言脚本，分别覆盖页面骨架、前两块区块、后两块区块和三种页面状态

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 {

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);
 }

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);
 }

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%);
 }
 

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);
 }

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: {

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;"), "结果总览容器不应保留浅灰背景");

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}`);
+});

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");

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)
 );

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: "风险交易"'), "风险交易文案应被替换");

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;"), "结果总览顶部间距应与其他页签统一");