ccdi/docs/plans/frontend/2026-03-25-special-check-family-asset-liability-detail-redesign-frontend-implementation.md

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