# 2026-03-24 专项核查页员工家庭资产负债专项核查前端实施记录

## 本次新增与修改文件

### API

- 新增 `ruoyi-ui/src/api/ccdi/projectSpecialCheck.js`

### 页面与组件

- 修改 `ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheck.vue`
- 新增 `ruoyi-ui/src/views/ccdiProject/components/detail/specialCheck.mock.js`
- 新增 `ruoyi-ui/src/views/ccdiProject/components/detail/FamilyAssetLiabilitySection.vue`
- 新增 `ruoyi-ui/src/views/ccdiProject/components/detail/FamilyAssetLiabilityDetail.vue`

### 测试

- 新增 `ruoyi-ui/tests/unit/special-check-family-asset-liability-api.test.js`
- 新增 `ruoyi-ui/tests/unit/special-check-layout.test.js`
- 新增 `ruoyi-ui/tests/unit/special-check-states.test.js`
- 新增 `ruoyi-ui/tests/unit/special-check-family-table.test.js`
- 新增 `ruoyi-ui/tests/unit/special-check-risk-tag.test.js`
- 新增 `ruoyi-ui/tests/unit/special-check-detail-expand.test.js`
- 新增 `ruoyi-ui/tests/unit/special-check-detail-layout.test.js`
- 新增 `ruoyi-ui/tests/unit/special-check-visual-alignment.test.js`

## 实现内容

### 1. 专项核查 API 封装

- 新增独立 API 文件 `projectSpecialCheck.js`
- 提供 `getFamilyAssetLiabilityList(projectId)` 与 `getFamilyAssetLiabilityDetail(projectId, staffIdCard)`
- 请求统一走 `@/utils/request`

### 2. 专项排查页主容器升级

- `SpecialCheck.vue` 从占位页改为真实三态容器
- 页面保留 `loading / empty / loaded` 三态
- 页面初始化与项目切换时都会重新触发专项核查列表加载
- `specialCheck.mock.js` 仅保留页面状态切换所需的最小结构

### 3. 员工家庭核查列表区块

- 新增 `FamilyAssetLiabilitySection.vue`
- 使用 `el-table` 展示姓名、身份证号、所属部门、家庭总年收入、家庭总资产、家庭总负债、风险情况、操作
- 风险标签统一使用 `el-tag`
- 风险码与标签类型映射：
  - `NORMAL -> success`
  - `RISK -> warning`
  - `HIGH -> danger`
- 金额统一格式化为元并保留两位小数

### 4. 行内展开详情

- 新增 `FamilyAssetLiabilityDetail.vue`
- 详情固定拆成收入、资产、负债三组
- 详情使用当前表格行内展开，不引入弹窗、抽屉和路由跳转
- 首次点击“查看详情”时按需请求详情接口
- 详情结果按员工身份证号缓存
- 项目切换时清空展开状态与详情缓存，避免串项目数据

### 5. 视觉对齐收口

- 列表区块沿用结果总览已有的 `section-card / block-header / block-title / block-subtitle` 结构
- 表格头背景与标题区留白延续结果总览节奏
- 详情区块的标题层级统一为 `block-title / block-subtitle`
- 页面彻底移除“功能开发中”占位文案与占位图标

## 增量调整

### 缺少信息展示

- 风险标签新增 `MISSING_INFO` 映射，展示为“缺少信息”
- 当后端返回本人缺少资产信息时：
  - 资产卡片隐藏小计区
- 当后端返回本人缺少负债信息时：
  - 负债卡片隐藏小计区

### 详情卡片布局

- 详情区三个卡片改为桌面端横向三列均分
- 中小屏保留响应式回落为单列，避免表格挤压