wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6385778e4c6b1dca8b96f8cc1fd246d505b4e20f
ccdi/docs/plans/frontend/2026-03-25-special-check-family-asset-liability-detail-redesign-frontend-implementation.md

8.2 KiB
Raw Blame History

Special Check Family Asset Liability Detail Redesign 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: 将专项核查“员工家庭资产负债专项核查”展开区改造成 5 段纵向汇总卡片，标题直接展示汇总数字，卡片内部只展示简洁来源项。

Architecture: 保持 FamilyAssetLiabilitySection.vue 的列表层、展开状态、详情缓存和按需请求逻辑不变，只重构 FamilyAssetLiabilityDetail.vue。前端基于现有 incomeDetail / assetDetail / debtDetail / summary 就地计算关键指标，并将资产与负债明细按现有类型字段聚合为来源项展示，不新增后端字段或额外交互容器。

Tech Stack: Vue 2, Element UI, SCSS, Node.js 静态单测

File Map

  • Modify: ruoyi-ui/src/views/ccdiProject/components/detail/FamilyAssetLiabilityDetail.vue
    • 专项核查展开区主组件，负责 5 段纵向卡片、类型聚合、指标计算和风险结果展示
  • Modify: ruoyi-ui/tests/unit/special-check-detail-layout.test.js
    • 锁定详情区结构、模块顺序、标题汇总值和“去表格化”约束
  • Create: ruoyi-ui/tests/unit/special-check-detail-summary-groups.test.js
    • 锁定资产/负债聚合来源项、关键指标和风险结果文案映射
  • Modify: ruoyi-ui/tests/unit/special-check-visual-alignment.test.js
    • 锁定详情区仍沿用专项核查现有标题层级，并新增纵向汇总卡片样式约束
  • Create: docs/reports/implementation/2026-03-25-special-check-family-asset-liability-detail-redesign-frontend-record.md
    • 记录前端实施内容与边界
  • Create: docs/tests/records/2026-03-25-special-check-family-asset-liability-detail-redesign-frontend-verification.md
    • 记录前端验证命令与结果

Task 1: 重写展开区结构断言

Files:

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

  • Create: ruoyi-ui/tests/unit/special-check-detail-summary-groups.test.js

  • Modify: ruoyi-ui/tests/unit/special-check-visual-alignment.test.js

  • Step 1: Write the failing test

调整现有静态断言并新增分组断言，锁定以下内容：

  • 详情区顺序固定为 总收入 -> 总负债 -> 总资产 -> 关键指标 -> 详查结果

  • 每个模块标题都带汇总数字或计数

  • 资产与负债不再出现 el-table

  • 资产与负债都保留“类型名 + 金额 + 占比”来源项语义

  • 关键指标固定为 资产负债率 / 资产/收入比 / 负债/收入比

  • 详查结果按 NORMAL / RISK / HIGH / MISSING_INFO 切换文案和样式

  • Step 2: Run test to verify it fails

Run:

cd ruoyi-ui
node tests/unit/special-check-detail-layout.test.js
node tests/unit/special-check-detail-summary-groups.test.js
node tests/unit/special-check-visual-alignment.test.js

Expected:

  • FAIL

  • 原因是旧组件仍为“收入/负债/资产三列 + 表格明细”

  • Step 3: Write minimal implementation

先只修改测试文件，不动生产代码，确保断言与最新设计一致：

  • 删除旧的“三列卡片”“资产明细/负债明细表格”断言

  • 新增 5 段纵向结构断言

  • 新增来源项聚合与风险结果态断言

  • Step 4: Run test to verify it passes

Run:

cd ruoyi-ui
node tests/unit/special-check-detail-layout.test.js
node tests/unit/special-check-detail-summary-groups.test.js
node tests/unit/special-check-visual-alignment.test.js

Expected:

  • PASS

  • Step 5: Commit

git add ruoyi-ui/tests/unit/special-check-detail-layout.test.js ruoyi-ui/tests/unit/special-check-detail-summary-groups.test.js ruoyi-ui/tests/unit/special-check-visual-alignment.test.js
git commit -m "更新专项核查展开区改版前端测试"

Task 2: 重构展开详情组件

Files:

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

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

  • Modify: ruoyi-ui/tests/unit/special-check-detail-summary-groups.test.js

  • Step 1: Write the failing test

在现有断言基础上补足以下失败场景：

  • 组件包含汇总标题值格式化逻辑

  • 组件包含资产/负债按类型聚合的方法或计算属性

  • 组件包含净资产、资产负债率、资产/收入比、负债/收入比计算

  • 组件不再包含旧的 detail-grid 三列样式和 detail-table 表格样式

  • Step 2: Run test to verify it fails

Run:

cd ruoyi-ui
node tests/unit/special-check-detail-layout.test.js
node tests/unit/special-check-detail-summary-groups.test.js

Expected:

  • FAIL

  • Step 3: Write minimal implementation

在 FamilyAssetLiabilityDetail.vue 中完成以下改造：

  • 将模板重构为 5 个纵向汇总模块：

    • 总收入
    • 总负债
    • 总资产
    • 关键指标
    • 详查结果

  • 标题区统一为“标题 + 汇总值”

  • 收入模块固定展示本人收入、配偶收入

  • 资产模块基于 assetDetail.items 按现有类型字段聚合后全部展示

  • 负债模块基于 debtDetail.items 按现有类型字段聚合后全部展示

  • 指标模块前端计算：

    • 净资产
    • 资产负债率
    • 资产/收入比
    • 负债/收入比

  • 详查结果模块按 summary.riskLevelCode 映射展示样式和文案

  • 删除旧的表格结构、三列网格结构与表头依赖

  • 保留 loading、空明细保护和既有金额/日期工具函数风格

  • Step 4: Run test to verify it passes

Run:

cd ruoyi-ui
node tests/unit/special-check-detail-layout.test.js
node tests/unit/special-check-detail-summary-groups.test.js
node tests/unit/special-check-visual-alignment.test.js
node tests/unit/special-check-detail-expand.test.js

Expected:

  • PASS

  • special-check-detail-expand.test.js 继续通过，证明展开入口和缓存逻辑未被破坏

  • Step 5: Commit

git add ruoyi-ui/src/views/ccdiProject/components/detail/FamilyAssetLiabilityDetail.vue ruoyi-ui/tests/unit/special-check-detail-layout.test.js ruoyi-ui/tests/unit/special-check-detail-summary-groups.test.js ruoyi-ui/tests/unit/special-check-visual-alignment.test.js
git commit -m "重构专项核查展开区前端展示"

Task 3: 完成前端验证与实施记录

Files:

  • Create: docs/reports/implementation/2026-03-25-special-check-family-asset-liability-detail-redesign-frontend-record.md

  • Create: docs/tests/records/2026-03-25-special-check-family-asset-liability-detail-redesign-frontend-verification.md

  • Step 1: Write the failing test

这里不新增代码断言，先整理需要落文档的验证范围：

  • 聚焦展开区组件，不涉及列表列顺序和接口契约

  • 静态单测通过

  • 前端生产构建可完成

  • Step 2: Run test to verify it fails

Run:

cd ruoyi-ui
node tests/unit/special-check-detail-layout.test.js
node tests/unit/special-check-detail-summary-groups.test.js
node tests/unit/special-check-visual-alignment.test.js
npm run build:prod

Expected:

  • 在代码与文档未完全落地前，至少一项为 FAIL 或文档缺失

  • Step 3: Write minimal implementation

补齐两份文档：

  • 前端实施记录写清：

    • 只改 FamilyAssetLiabilityDetail.vue
    • 旧表格明细改为汇总来源项
    • 关键指标与风险结论的前端计算方式

  • 前端验证记录写清：

    • 运行命令
    • 实际结果
    • 已知告警是否与本次改动无关

  • Step 4: Run test to verify it passes

Run:

cd ruoyi-ui
node tests/unit/special-check-detail-layout.test.js
node tests/unit/special-check-detail-summary-groups.test.js
node tests/unit/special-check-visual-alignment.test.js
node tests/unit/special-check-detail-expand.test.js
npm run build:prod

Expected:

  • 静态单测全部 PASS

  • 生产构建完成

  • Step 5: Commit

git add docs/reports/implementation/2026-03-25-special-check-family-asset-liability-detail-redesign-frontend-record.md docs/tests/records/2026-03-25-special-check-family-asset-liability-detail-redesign-frontend-verification.md
git commit -m "补充专项核查展开区前端验证记录"
Reference in New Issue View Git Blame Copy Permalink