wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6385778e4c6b1dca8b96f8cc1fd246d505b4e20f
ccdi/docs/plans/frontend/2026-03-27-results-overview-card-merge-frontend-implementation.md

11 KiB
Raw Blame History

Results Overview Card Merge Frontend Implementation Plan

For agentic workers: REQUIRED: This repo forbids subagents, so use superpowers:executing-plans in the current session. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 将结果总览页顶部的 风险仪表盘 与 风险人员总览 合并为一个 风险总览 大卡片，并将后续两个主区块标题统一为 风险模型 与 风险明细，同时补齐统计卡片标题与小图标展示。

Architecture: 保持 PreliminaryCheck.vue 作为结果总览唯一入口，不新增接口、不重组数据装配。实现只收敛在 PreliminaryCheck.vue、OverviewStats.vue、RiskPeopleSection.vue、RiskModelSection.vue、RiskDetailSection.vue 五个前端组件与对应静态断言测试中，按“TDD 锁结构 -> 合并总览卡片 -> 统一区块标题 -> 聚焦回归与文档留痕”的顺序推进。

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

Task 1: 锁定结果总览卡片合并与标题统一契约

Files:

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

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

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

  • Modify: ruoyi-ui/tests/unit/preliminary-check-overview-spacing.test.js

  • Modify: ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js

  • Step 1: Write the failing test

更新现有静态断言，锁定以下契约：

  • PreliminaryCheck.vue 中存在统一的 风险总览 容器，例如 risk-overview-card
  • OverviewStats 与 RiskPeopleSection 继续存在，但被收进同一个总览容器
  • OverviewStats.vue 不再包含 风险仪表盘、风险总体数据概览 文案
  • RiskPeopleSection.vue 不再把 风险人员总览 作为独立大卡片标题
  • mock 数据中的最后一个统计卡片文案改为 无预警人数
  • RiskModelSection.vue 顶层标题改为 风险模型
  • RiskDetailSection.vue 顶层标题改为 风险明细

示例断言片段：

assert(entry.includes("risk-overview-card"), "结果总览页缺少统一风险总览容器");
assert(entry.includes("风险总览"), "结果总览页缺少风险总览标题");
assert(!stats.includes("风险仪表盘"), "统计区不应继续保留风险仪表盘标题");
assert(mockSource.includes('label: "无预警人数"'), "最后一个统计项应为无预警人数");
assert(model.includes("风险模型"), "第二张主卡片标题应为风险模型");
assert(detail.includes("风险明细"), "第三张主卡片标题应为风险明细");
  • Step 2: Run test to verify it fails

Run:

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

Expected:

  • FAIL

  • 原因是当前页面仍保留 风险仪表盘 独立壳层与旧区块标题

  • Step 3: Commit the contract update

git add ruoyi-ui/tests/unit/preliminary-check-layout.test.js ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js ruoyi-ui/tests/unit/preliminary-check-summary-visuals.test.js ruoyi-ui/tests/unit/preliminary-check-overview-spacing.test.js ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js
git commit -m "锁定结果总览卡片合并结构断言"

Task 2: 合并风险总览卡片并收掉重复壳层

Files:

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

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

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

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

  • Step 1: Implement the merged overview shell

在 PreliminaryCheck.vue 中：

  • 新增统一的 风险总览 外层卡片结构
  • 先渲染统计区，再渲染风险人员区
  • 保持 currentData.summary、currentData.riskPeople 的传参与现有事件绑定不变

在 OverviewStats.vue 中：

  • 去掉独立 section-card、旧标题组和旧副标题
  • 只保留统计卡片栅格内容
  • 保留每个统计项的 icon、label、value 与 tone 绑定

在 RiskPeopleSection.vue 中：

  • 去掉自身独立白卡壳层
  • 保留导出按钮、表格字段、查看详情事件与风险标签逻辑
  • 不重做现有表格列与数据语义

在 preliminaryCheck.mock.js 中：

  • 将最后一个统计项文案改为 无预警人数

  • 保持 5 个统计项顺序不变

  • Step 2: Run focused tests

Run:

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-states.test.js

Expected:

  • PASS

  • Step 3: If any test fails, fix only within the merged overview scope

修正原则：

  • 不新增接口或额外数据装配

  • 不把 OverviewStats 与 RiskPeopleSection 合并成单个大组件

  • 不引入设计文档之外的新区块或新交互

  • Step 4: Re-run the same focused tests

Run:

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-states.test.js

Expected:

  • PASS

  • Step 5: Commit

git add ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue ruoyi-ui/src/views/ccdiProject/components/detail/OverviewStats.vue ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
git commit -m "合并结果总览顶部风险总览卡片"

Task 3: 统一风险模型与风险明细主卡片标题

Files:

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

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

  • Modify: ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js

  • Step 1: Implement title normalization

在 RiskModelSection.vue 中：

  • 将第一块主标题改为 风险模型
  • 下面的子标题与内容区块保持现有语义，不扩功能

在 RiskDetailSection.vue 中：

  • 将第一块主标题改为 风险明细

  • 下面的两张子表格块保持现有语义、导出按钮和展示逻辑

  • Step 2: Run title-related tests

Run:

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

Expected:

  • PASS

  • Step 3: Verify no unintended model/detail behavior changed

额外人工核对以下内容仍成立：

  • 风险模型区的卡片筛选、任意触发 / 同时触发切换、分页与查看详情入口仍在

  • 风险明细区的两张表仍保留现有字段、金额格式与操作列

  • Step 4: Re-run model/detail regression

Run:

cd ruoyi-ui
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

Expected:

  • PASS

  • Step 5: Commit

git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js
git commit -m "统一结果总览模型与明细区块标题"

Task 4: 做前端回归并补充实施记录

Files:

  • Create: docs/reports/implementation/2026-03-27-results-overview-card-merge-frontend-record.md

  • Create: docs/tests/records/2026-03-27-results-overview-card-merge-frontend-verification.md

  • Verify: docs/design/2026-03-27-results-overview-card-merge-design.md

  • Step 1: Run the focused frontend regression suite

Run:

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

Expected:

  • 所有 node 静态断言 PASS

  • npm run build:prod 成功完成

  • Step 2: Optional manual page check

如需人工验证，再执行：

cd ruoyi-ui
npm run dev

人工检查：

  • 首屏顶部只保留一个 风险总览 大卡片
  • 统计小卡片显示图标、标题、数值
  • 第二张主卡片标题为 风险模型
  • 第三张主卡片标题为 风险明细

验证结束后必须主动停止前端进程，避免端口残留。

  • Step 3: Write the verification record

在 docs/tests/records/2026-03-27-results-overview-card-merge-frontend-verification.md 记录：

  • 执行命令

  • 执行日期

  • 是否进行了 npm run dev 人工检查

  • 如启动了前端进程，何时停止、如何停止

  • 最终验证结论

  • Step 4: Write the implementation record

在 docs/reports/implementation/2026-03-27-results-overview-card-merge-frontend-record.md 记录：

  • 合并 风险仪表盘 与 风险人员总览 的实现方式

  • 统计卡片标题与小图标补齐方式

  • 风险模型、风险明细 标题统一情况

  • 本轮未改动的边界说明

  • Step 5: Commit

git add docs/reports/implementation/2026-03-27-results-overview-card-merge-frontend-record.md docs/tests/records/2026-03-27-results-overview-card-merge-frontend-verification.md
git commit -m "补充结果总览卡片合并前端实施记录"

Done When

  • 顶部 风险仪表盘 与 风险人员总览 已合并为单个 风险总览 主卡片
  • 5 个统计卡片均显示标题与小图标，最后一个指标文案为 无预警人数
  • 第二个主卡片标题为 风险模型
  • 第三个主卡片标题为 风险明细
  • 现有数据装配、导出、查看详情、模型联动与风险明细展示行为未被破坏
  • 已留下前端实施记录与验证记录
Reference in New Issue View Git Blame Copy Permalink