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

# 专项核查员工家庭资产负债展开区改版设计

**日期**: 2026-03-25  
**模块**: 项目详情 - 专项核查 - 员工家庭资产负债专项核查  
**作者**: Codex  
**状态**: 已确认

## 1. 概述

当前专项核查页中的“员工家庭资产负债专项核查”已经具备列表与展开详情能力，但展开区仍沿用“三列卡片 + 表格明细”的结构，与最新原型存在明显差异：

- 信息层级偏散，展开后阅读路径不稳定
- 逐条明细表过重，不符合当前原型的“汇总式详查”表达
- 资产、负债、指标和风险结论没有形成清晰的纵向阅读节奏

本次设计只改造展开后的详情展示效果，不调整列表层字段、列顺序、查看详情交互、接口契约和页面路由。

## 2. 设计目标

### 2.1 包含内容

- 仅改造 `FamilyAssetLiabilityDetail.vue` 的展开区展示结构
- 展开区改为自上而下 5 张纵向汇总卡片
- 每张卡片标题直接展示该模块汇总数字
- 卡片内部简洁展示汇总数据的来源项
- 资产与负债来源项改为按现有类型聚合后全部展示
- 风险结论按真实风险等级切换样式与文案

### 2.2 不包含内容

- 不调整列表层列顺序、列文案和操作按钮
- 不改造 `查看详情` 的交互入口和按需加载机制
- 不新增后端字段、后端接口或路由
- 不保留现有逐条表格明细展示
- 不增加兼容分支、降级分支、二级折叠或 tooltip 解释

## 3. 当前上下文

当前前端相关文件：

- `ruoyi-ui/src/views/ccdiProject/components/detail/FamilyAssetLiabilitySection.vue`
- `ruoyi-ui/src/views/ccdiProject/components/detail/FamilyAssetLiabilityDetail.vue`
- `ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheck.vue`
- `ruoyi-ui/src/api/ccdi/projectSpecialCheck.js`

当前详情接口已返回以下结构：

- `incomeDetail`
- `assetDetail`
- `debtDetail`
- `summary`

其中 `summary` 已包含：

- `totalIncome`
- `totalDebt`
- `totalAsset`
- `comparisonAmount`
- `riskLevelCode`
- `riskLevelName`

这意味着本次改版无需调整接口，即可直接支撑总额、净资产、关键指标和风险结果展示。

## 4. 视觉方向

### 4.1 Visual Thesis

展开区改为“工作台式纵向汇总带”，每段只承载一个核心结论，用浅灰标题条、白底内容区和简洁来源项建立稳定层级。

### 4.2 Content Plan

1. 总收入
2. 总负债
3. 总资产
4. 关键指标
5. 详查结果

### 4.3 Interaction Thesis

- 保留现有“点击列表行内展开”的唯一交互，不额外增加二级折叠
- 通过模块顺序和标题汇总值强化信息导向，不靠复杂动效制造层级
- 风险结果卡通过颜色和结论文案形成唯一视觉落点

## 5. 方案比较

### 5.1 方案 A：完全沿用现有三列卡片，仅替换表格样式

做法：

- 保留 `收入 / 负债 / 资产` 三列结构
- 仅把内部表格改成更轻的列表展示

优点：

- 改动最少

缺点：

- 与原型的纵向分段结构不一致
- 无法形成“总额 -> 指标 -> 结论”的阅读链路

### 5.2 方案 B：双列摘要面板

做法：

- 左侧聚合资产和负债
- 右侧聚合指标和结果

优点：

- 信息比较紧凑

缺点：

- 更像通用后台摘要区，不够贴近原型
- 用户新确认的顺序无法自然落地

### 5.3 方案 C：纵向 5 段汇总卡片

做法：

- 展开区改为 5 张单列卡片，顺序固定为：
  - 总收入
  - 总负债
  - 总资产
  - 关键指标
  - 详查结果
- 每张卡片标题右侧直接展示汇总值
- 资产、负债卡片内部仅展示聚合后的来源项

优点：

- 最贴近当前确认原型和用户确认顺序
- 只动详情组件，改动边界最清晰
- 能自然去掉逐条表格，收拢成简洁汇总式详查

缺点：

- 放弃现有逐条明细表阅读方式

### 5.4 结论

采用 **方案 C：纵向 5 段汇总卡片**。

原因：

1. 完整匹配用户最终确认顺序
2. 不改接口即可实现
3. 视觉层级清晰，符合原型的“汇总式展开详情”目标

## 6. 总体设计

### 6.1 展开区结构

展开区固定改为以下顺序：

1. `总收入`
2. `总负债`
3. `总资产`
4. `关键指标`
5. `详查结果`

每个模块都采用统一结构：

- 标题左侧：模块名称
- 标题右侧：该模块汇总数字
- 内容区：来源项或指标项

### 6.2 模块规则

#### 6.2.1 总收入

标题右侧展示 `家庭总年收入`。

内容区固定展示两条来源项：

- 本人收入
- 配偶收入

不新增额外说明文字。

#### 6.2.2 总负债

标题右侧展示 `家庭总负债`。

内容区展示“按现有负债类型聚合后的来源项”，每条结构统一为：

- 负债类型名
- 聚合金额
- 占总负债比例

所有聚合项全部展示，不截断、不合并为“其他”。

#### 6.2.3 总资产

标题右侧展示 `家庭总资产`。

内容区展示“按现有资产类型聚合后的来源项”，每条结构统一为：

- 资产类型名
- 聚合金额
- 占总资产比例

所有聚合项全部展示，不截断、不合并为“其他”。

#### 6.2.4 关键指标

标题右侧固定展示指标数 `3`。

内容区固定展示以下 3 项：

- 资产负债率 = 总负债 / 总资产
- 资产/收入比 = 总资产 / 总收入
- 负债/收入比 = 总负债 / 总收入

展示格式：

- 百分比项使用 `%`
- 倍数项使用 `倍`
- 分母为 `0` 时显示 `-`

#### 6.2.5 详查结果

标题右侧展示 `riskLevelName`。

内容区展示单条结论文案，按真实风险等级切换样式和文案：

- `NORMAL`：结构基本合理
- `RISK`：负债与收入压力偏高
- `HIGH`：资产负债结构明显异常
- `MISSING_INFO`：当前信息不完整

不新增二级解释区。

## 7. 数据映射与计算规则

### 7.1 直接取值

- 总收入：`incomeDetail.totalIncome` 或 `summary.totalIncome`
- 总负债：`debtDetail.totalDebt` 或 `summary.totalDebt`
- 总资产：`assetDetail.totalAsset` 或 `summary.totalAsset`
- 风险等级：`summary.riskLevelCode`、`summary.riskLevelName`

### 7.2 前端计算

- 净资产 = 总资产 - 总负债
- 资产负债率 = 总负债 / 总资产
- 资产/收入比 = 总资产 / 总收入
- 负债/收入比 = 总负债 / 总收入

### 7.3 聚合规则

资产来源项：

- 基于 `assetDetail.items`
- 按现有类型字段聚合
- 保留全部聚合项

负债来源项：

- 基于 `debtDetail.items`
- 按现有类型字段聚合
- 保留全部聚合项

本次不要求后端新增分类字段，统一由前端基于现有字段归并。

## 8. 样式约束

- 取消现有逐条明细表和表头
- 资产、负债来源项改为紧凑摘要条目
- 桌面端可使用两列或三列流式排布承载来源项
- 窄屏回落为单列
- 金额统一使用 `¥` + 千分位格式
- 标题区与内容区仍延续专项核查现有白底大区块语义，不引入新主题色体系

## 9. 验证要点

### 9.1 结构验证

- 展开区顺序必须为：总收入 -> 总负债 -> 总资产 -> 关键指标 -> 详查结果
- 每张卡片标题中必须出现对应汇总数字
- 资产与负债来源项不再使用表格

### 9.2 计算验证

- 关键指标基于当前总额值计算，不重复请求接口
- 分母为 `0` 时显示 `-`
- 风险结果卡的标题和结论文案与真实风险等级一致

### 9.3 范围验证

- 列表层结构、列顺序和交互不变
- 接口路径与返回结构不变
- 项目切换、展开缓存和首次展开按需加载机制不变

## 10. 实施边界

本次前端实施默认只涉及：

- `ruoyi-ui/src/views/ccdiProject/components/detail/FamilyAssetLiabilityDetail.vue`

必要时补充与该组件直接相关的单元测试与样式断言，但不扩大到列表层和后端实现。