wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化结果总览标题层级与人员区标题

Browse Source
This commit is contained in:
wkc
2026-03-27 15:05:59 +08:00
parent 966754e8c6
commit e7ad46edaf
9 changed files with 163 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/reports/implementation/2026-03-27-results-overview-title-hierarchy-frontend-record.md Normal file
View File

@@ -0,0 +1,22 @@
# 结果总览标题层级优化前端实施记录
**日期**: 2026-03-27
## 本次调整内容
- 在顶部 `风险总览` 卡片内，为风险人员表格补充 `风险人员总览` 小节标题。
- 保留风险人员区原有导出按钮位置，调整为与小节标题同一行展示。
- 增强 `风险总览`、`风险模型`、`风险明细` 三个主卡片标题的视觉层级。
- 下调卡片内表格区块标题的视觉权重，使其与主卡片标题形成明确区分。
## 实现方式
- `PreliminaryCheck.vue` 中的主卡片标题统一调整为更大的字号、加粗字重，并补充左侧强调色条。
- `RiskPeopleSection.vue` 在表格上方新增小节标题与副标题，作为风险人员区域的表格级标题。
- `RiskModelSection.vue`、`RiskDetailSection.vue` 的主标题样式同步提升，同时将内部 `block-title` 调整为次级字号，并增加弱化的左侧标识。
## 边界说明
- 未新增接口、字段或状态。
- 未调整模型联动、导出、查看详情、分页等既有行为。
- 未引入新的页面区块，仅优化已存在标题与层级展示。

36
docs/tests/records/2026-03-27-results-overview-title-hierarchy-frontend-verification.md Normal file
View File

@@ -0,0 +1,36 @@
# 结果总览标题层级优化前端验证记录
**日期**: 2026-03-27
## 执行命令
```bash
cd ruoyi-ui
node tests/unit/preliminary-check-layout.test.js
node tests/unit/preliminary-check-summary-and-people.test.js
node tests/unit/preliminary-check-summary-visuals.test.js
node tests/unit/preliminary-check-overview-spacing.test.js
node tests/unit/preliminary-check-model-and-detail.test.js
node tests/unit/preliminary-check-model-card-grid.test.js
node tests/unit/preliminary-check-model-filters.test.js
node tests/unit/preliminary-check-model-linkage-flow.test.js
node tests/unit/preliminary-check-project-analysis-entry.test.js
node tests/unit/preliminary-check-states.test.js
npm run build:prod
```
## 验证结果
- 10 个结果总览相关静态断言全部通过。
- `npm run build:prod` 执行成功。
- 构建输出仍包含仓库既有的产物体积告警，本轮未引入新的构建错误。
## 人工检查
- 是否执行 `npm run dev`: 否。
- 未启动前端开发进程，因此无需执行进程停止操作。
## 结论
- 风险人员表格上方已具备独立的 `风险人员总览` 小节标题约束。
- 主卡片标题与内部表格标题的层级差异已通过静态断言与构建验证确认。

16
ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue
View File

@@ -262,21 +262,25 @@ export default {
.risk-overview-card {
margin-bottom: 16px;
padding: 24px 20px 20px;
}
.section-header {
margin-bottom: 16px;
margin-bottom: 18px;
padding-left: 12px;
border-left: 4px solid #2563eb;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: #1f2937;
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #0f172a;
}
.section-subtitle {
margin-top: 4px;
margin-top: 6px;
font-size: 12px;
color: #94a3b8;
color: #64748b;
}
</style>

34
ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue
View File

@@ -100,19 +100,22 @@ export default {
}
.section-header {
margin-bottom: 16px;
margin-bottom: 18px;
padding-left: 12px;
border-left: 4px solid #2563eb;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: #1f2937;
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #0f172a;
}
.section-subtitle {
margin-top: 4px;
margin-top: 6px;
font-size: 12px;
color: #94a3b8;
color: #64748b;
}
.block + .block {
@@ -127,13 +130,28 @@ export default {
}
.block-title {
font-size: 16px;
position: relative;
padding-left: 10px;
font-size: 15px;
font-weight: 600;
color: #1f2937;
color: #334155;
}
.block-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 14px;
border-radius: 999px;
background: #94a3b8;
transform: translateY(-50%);
}
.block-subtitle {
margin-top: 4px;
padding-left: 10px;
font-size: 12px;
color: #94a3b8;
}

34
ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue
View File

@@ -370,19 +370,22 @@ export default {
}
.section-header {
margin-bottom: 16px;
margin-bottom: 18px;
padding-left: 12px;
border-left: 4px solid #2563eb;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: #1f2937;
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #0f172a;
}
.section-subtitle {
margin-top: 4px;
margin-top: 6px;
font-size: 12px;
color: #94a3b8;
color: #64748b;
}
.block + .block {
@@ -397,13 +400,28 @@ export default {
}
.block-title {
font-size: 16px;
position: relative;
padding-left: 10px;
font-size: 15px;
font-weight: 600;
color: #1f2937;
color: #334155;
}
.block-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 14px;
border-radius: 999px;
background: #94a3b8;
transform: translateY(-50%);
}
.block-subtitle {
margin-top: 4px;
padding-left: 10px;
font-size: 12px;
color: #94a3b8;
}

33
ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue
View File

@@ -1,6 +1,10 @@
<template>
<section class="risk-people-section">
<div class="section-toolbar">
<div>
<div class="section-title">风险人员总览</div>
<div class="section-subtitle">展示命中风险规则的重点人员</div>
</div>
<el-button size="mini" type="text">导出</el-button>
</div>
@@ -183,11 +187,38 @@ export default {
.section-toolbar {
display: flex;
justify-content: flex-end;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.section-title {
position: relative;
padding-left: 10px;
font-size: 15px;
font-weight: 600;
color: #334155;
}
.section-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 14px;
border-radius: 999px;
background: #94a3b8;
transform: translateY(-50%);
}
.section-subtitle {
margin-top: 4px;
padding-left: 10px;
font-size: 12px;
color: #94a3b8;
}
.people-table {
border-radius: 12px;
overflow: hidden;

2
ruoyi-ui/tests/unit/preliminary-check-layout.test.js
View File

@@ -21,3 +21,5 @@ const source = fs.readFileSync(componentPath, "utf8");
assert(source.includes("risk-overview-card"), "结果总览页缺少统一风险总览容器");
assert(source.includes("风险总览"), "结果总览页缺少风险总览标题");
assert(source.includes("border-left: 4px solid #2563eb;"), "主卡片标题应有更强的左侧强调样式");
assert(source.includes("font-size: 20px;"), "主卡片标题字号应提升到 20px");

6
ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js
View File

@@ -29,3 +29,9 @@ const detail = fs.readFileSync(
["风险明细", "涉险交易明细", "异常账户人员信息", "查看详情"].forEach((token) =>
assert(detail.includes(token), token)
);
assert(model.includes("border-left: 4px solid #2563eb;"), "风险模型主标题应有更强的左侧强调样式");
assert(detail.includes("border-left: 4px solid #2563eb;"), "风险明细主标题应有更强的左侧强调样式");
assert(model.includes("font-size: 20px;"), "风险模型主标题字号应提升到 20px");
assert(detail.includes("font-size: 20px;"), "风险明细主标题字号应提升到 20px");
assert(model.includes("font-size: 15px;"), "风险模型内部区块标题应保持次级字号");
assert(detail.includes("font-size: 15px;"), "风险明细内部区块标题应保持次级字号");

4
ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js
View File

@@ -54,4 +54,6 @@ assert(entry.includes("risk-people-section"), "入口应挂载风险人员区");
assert(entry.includes("risk-overview-card"), "统计区与风险人员区应位于统一总览卡片中");
assert(!stats.includes("风险仪表盘"), "统计区不应继续保留风险仪表盘标题");
assert(!stats.includes("风险总体数据概览"), "统计区不应继续保留旧副标题");
assert(!people.includes("风险人员总览"), "风险人员区不应继续保留独立大卡片标题");
assert(people.includes("风险人员总览"), "风险人员区应补充风险人员总览标题");
assert(people.includes("section-title"), "风险人员区应提供独立的小节标题样式");
assert(people.includes("font-size: 15px;"), "风险人员区内部标题应维持次级字号层级");