wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ca591ebd3c29c5fa1e4e928972822fb74452e48b
ccdi/docs/plans/frontend/2026-03-20-results-overview-employee-result-table-frontend-implementation.md

7.0 KiB
Raw Blame History

Results Overview Employee Result Table 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: 在后端切换到结果总览员工结果表出数后，保持结果总览页现有交互、文案和接口消费方式不变，并补充前端回归保护，确保风险仪表盘、风险人员总览、模型区展示持续稳定。

Architecture: 前端不新增路由、不新增页面、不调整结果总览现有组件拆分。保持 PreliminaryCheck.vue、RiskPeopleSection.vue、RiskModelSection.vue 继续消费当前接口返回结构，前端工作的重点放在 API/组件契约回归测试与最小必要的归一化兼容，而不是重做 UI 交互。

Tech Stack: Vue 2, Element UI, Axios (@/utils/request), Node.js

Task 1: 锁定结果总览前端 API 契约不变

Files:

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

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

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

  • Step 1: Write the failing test

补充 API 静态断言，锁定以下约束：

  • 仍使用现有接口路径：

    • /ccdi/project/overview/dashboard
    • /ccdi/project/overview/risk-people
    • /ccdi/project/overview/risk-models/cards
    • /ccdi/project/overview/risk-models/people

  • 结果总览前端不感知后端底层是否改为结果表

  • 模型人员接口仍透传：

    • projectId
    • modelCodes
    • matchMode
    • keyword
    • deptId
    • pageNum
    • pageSize

  • 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 契约不变”的预期

  • Step 3: Write minimal implementation

如现有 API 封装已经满足约束，则只补测试，不修改源码。

如果测试暴露出接口参数或路径未被稳定消费，再做最小调整，要求：

  • 不新增新 API 方法

  • 不改变接口名称

  • 不改变组件调用方式

  • Step 4: Run test to verify it passes

Run:

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

Expected:

  • PASS

  • Step 5: Commit

git add ruoyi-ui/tests/unit/project-overview-api.test.js ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js ruoyi-ui/src/api/ccdi/projectOverview.js
git commit -m "锁定结果总览前端接口契约"

Task 2: 锁定结果总览页面展示契约与回归边界

Files:

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

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

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

  • Modify: ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js

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

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

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

  • Step 1: Write the failing test

补充组件回归断言，锁定以下边界：

  • 风险仪表盘仍展示：

    • 总人数
    • 高风险
    • 中风险
    • 低风险
    • 无风险人员

  • 风险人员总览仍展示：

    • 姓名
    • 身份证号
    • 所属部门
    • 风险等级
    • 命中模型数
    • 核心异常点

  • 模型区仍支持：

    • 模型卡片统计
    • ANY / ALL
    • 关键字筛选
    • 部门筛选
    • 异常标签展示

  • 页面不重新引入已移除的 TOP10 区块

  • 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-model-and-detail.test.js
node tests/unit/preliminary-check-risk-people-binding.test.js
node tests/unit/preliminary-check-model-linkage-flow.test.js

Expected:

  • FAIL

  • 原因是测试尚未完整覆盖“后端改为结果表出数后前端展示不变”的场景

  • Step 3: Write minimal implementation

优先只改测试。

如果测试发现组件对空数组、字段顺序或字段缺省值存在脆弱依赖，再在以下文件中做最小兼容处理：

  • PreliminaryCheck.vue
  • RiskPeopleSection.vue
  • RiskModelSection.vue

兼容处理原则：

  • 只做空值归一化

  • 只做字段缺省保护

  • 不改变现有交互、布局、文案和样式

  • Step 4: Run test to verify it passes

Run:

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

Expected:

  • PASS

  • Step 5: Commit

git add ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue
git commit -m "补充结果总览前端展示回归保护"

Task 3: 执行结果总览前端专项回归验证

Files:

  • Create: docs/reports/implementation/2026-03-20-results-overview-employee-result-table-frontend-implementation.md

  • Create: docs/tests/records/2026-03-20-results-overview-employee-result-table-frontend-verification.md

  • Verify: docs/design/2026-03-20-results-overview-employee-result-table-design.md

  • Step 1: Run focused frontend regression 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-summary-and-people.test.js
node tests/unit/preliminary-check-model-and-detail.test.js
node tests/unit/preliminary-check-risk-people-binding.test.js
node tests/unit/preliminary-check-model-linkage-flow.test.js

Expected:

  • PASS

  • 证明结果总览页前端契约与交互边界在后端数据源改造后保持稳定

  • Step 2: Write implementation and verification records

实施记录需说明：

  • 前端未新增页面和交互
  • 前端重点是锁定 API 与展示契约
  • 若有源码调整，仅为最小兼容处理

验证记录需写明：

  • 执行日期

  • 执行命令

  • 每条命令结果

  • 最终结论

  • Step 3: Commit

git add docs/reports/implementation/2026-03-20-results-overview-employee-result-table-frontend-implementation.md docs/tests/records/2026-03-20-results-overview-employee-result-table-frontend-verification.md
git commit -m "补充结果总览员工结果表前端验证记录"
Reference in New Issue View Git Blame Copy Permalink