# 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: ```bash 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: ```bash 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** ```bash 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: ```bash 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: ```bash 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** ```bash 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: ```bash 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: ```bash 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** ```bash 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 "补充专项核查展开区前端验证记录" ```