wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
079b412d38e0e1014c6b136c294d5dd652a1256b
ccdi/docs/plans/frontend/2026-03-20-results-overview-risk-people-merge-frontend-implementation.md

7.0 KiB
Raw Blame History

Results Overview Risk People Merge Frontend Implementation Plan

For agentic workers: REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 移除结果总览页面中的中高风险人员 TOP10 区块，并在风险人员总览中新增风险等级与命中模型数展示。

Architecture: 继续沿用 PreliminaryCheck.vue 作为结果总览入口，不新增页面组件层级、不做前端字段拼装。前端只消费 dashboard + riskPeople 两类真实接口，删除页面对 topRiskPeople 的依赖，并将风险等级标签和命中模型数并入风险人员总览单表。

Tech Stack: Vue 2, Element UI, Node.js

Task 1: 先锁定前端接口依赖收口预期

Files:

  • Modify: ruoyi-ui/tests/unit/project-overview-api.test.js

  • Modify: ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js

  • Step 1: Write the failing test

更新 API 与页面集成断言：

  • project-overview-api.test.js 保留 getOverviewDashboard、getOverviewRiskPeople 断言，并移除 getOverviewTopRiskPeople 与 /top-risk-people 依赖

  • preliminary-check-api-integration.test.js 改为断言 PreliminaryCheck.vue 只引用 getOverviewDashboard、getOverviewRiskPeople 和 Promise.all

  • Step 2: Run test to verify it fails

Run:

cd ruoyi-ui
node tests/unit/project-overview-api.test.js
node tests/unit/preliminary-check-api-integration.test.js

Expected:

  • FAIL

  • 原因是当前 API 文件和入口页面仍保留 TOP10 请求

  • Step 3: Commit the test expectation update

git add ruoyi-ui/tests/unit/project-overview-api.test.js ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js
git commit -m "锁定结果总览页面接口收口预期"

Task 2: 移除页面对 TOP10 接口的依赖

Files:

  • Modify: ruoyi-ui/src/api/ccdi/projectOverview.js

  • Modify: ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue

  • Modify: ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js

  • Step 1: Update the API module

删除 getOverviewTopRiskPeople 导出，仅保留：

  • getOverviewDashboard
  • getOverviewRiskPeople

不要改动两个保留接口的 URL 和调用方式。

  • Step 2: Update page data loading

在 PreliminaryCheck.vue 中：

  • 删除 getOverviewTopRiskPeople 的 import

  • 将 Promise.all 从 3 个请求收口为 2 个请求

  • 移除 topRiskPeopleData 相关变量

  • hasOverviewData 仅依据 dashboardData.stats 与 riskPeopleData.overviewList

  • Step 3: Update mock and state data

在 preliminaryCheck.mock.js 中：

  • 为 overviewList 示例数据补齐 riskLevel、riskLevelType、modelCount

  • 删除页面展示层对 topRiskList 的依赖

  • 保持空态、加载态结构可直接复用

  • Step 4: Run focused frontend tests

Run:

cd ruoyi-ui
node tests/unit/project-overview-api.test.js
node tests/unit/preliminary-check-api-integration.test.js
node tests/unit/preliminary-check-states.test.js

Expected:

  • PASS

  • Step 5: Commit

git add ruoyi-ui/src/api/ccdi/projectOverview.js ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js ruoyi-ui/tests/unit/project-overview-api.test.js ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js
git commit -m "移除结果总览页面TOP10接口依赖"

Task 3: 将人员区块收口为单表并补充新增列

Files:

  • Modify: ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue

  • Modify: ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js

  • Modify: ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js

  • Step 1: Write/update the failing test

调整静态断言：

  • preliminary-check-summary-and-people.test.js 去掉对 中高风险人员TOP10 的文案断言，增加对 风险等级、命中模型数 的断言

  • preliminary-check-risk-people-binding.test.js 去掉 sectionData.topRiskList 依赖，改为断言 overviewList 同时绑定 riskCount、riskPoint、riskLevelType、modelCount

  • Step 2: Run test to verify it fails

Run:

cd ruoyi-ui
node tests/unit/preliminary-check-summary-and-people.test.js
node tests/unit/preliminary-check-risk-people-binding.test.js

Expected:

  • FAIL

  • 原因是当前组件仍包含第二个 TOP10 区块

  • Step 3: Implement the single-table UI

在 RiskPeopleSection.vue 中：

  • 删除第二个 block

  • 在风险人员总览表格中新增 风险等级 列，沿用 el-tag + scope.row.riskLevelType

  • 新增 命中模型数 列，直接绑定 modelCount

  • 保留 疑似违规数、核心异常点 和 查看详情 回退逻辑

  • 适度调整列宽与块间距，但不要重做整体视觉风格

  • Step 4: Run focused UI tests

Run:

cd ruoyi-ui
node tests/unit/preliminary-check-summary-and-people.test.js
node tests/unit/preliminary-check-risk-people-binding.test.js
node tests/unit/preliminary-check-layout.test.js

Expected:

  • PASS

  • Step 5: Commit

git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js
git commit -m "收口结果总览风险人员展示区块"

Task 4: 做结果总览前端回归并补文档

Files:

  • Create: docs/reports/implementation/2026-03-20-results-overview-risk-people-merge-frontend-implementation.md

  • Create: docs/tests/records/2026-03-20-results-overview-risk-people-merge-frontend-verification.md

  • Verify: docs/design/2026-03-20-results-overview-risk-people-merge-design.md

  • Step 1: Run final regression checks

Run:

cd ruoyi-ui
node tests/unit/project-overview-api.test.js
node tests/unit/preliminary-check-api-integration.test.js
node tests/unit/preliminary-check-summary-and-people.test.js
node tests/unit/preliminary-check-risk-people-binding.test.js
node tests/unit/preliminary-check-states.test.js
node tests/unit/preliminary-check-layout.test.js

Expected:

  • PASS

  • 页面已不再依赖 TOP10 接口和 TOP10 区块

  • Step 2: Write implementation record

记录本次前端改动内容：

  • 页面移除 TOP10 区块

  • 风险人员总览新增风险等级与命中模型数

  • 页面请求从三路接口收口为两路接口

  • Step 3: Write verification record

记录命令、执行时间、结果与结论，说明未启动额外前端长期进程；如临时启动调试服务，验证结束后需主动停止。

  • Step 4: Commit
git add docs/reports/implementation/2026-03-20-results-overview-risk-people-merge-frontend-implementation.md docs/tests/records/2026-03-20-results-overview-risk-people-merge-frontend-verification.md
git commit -m "补充风险人员总览收口前端实施记录"
Reference in New Issue View Git Blame Copy Permalink