303 lines
7.7 KiB
Markdown
303 lines
7.7 KiB
Markdown
# 专项核查员工家庭资产负债展开区改版设计
|
||
|
||
**日期**: 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`
|
||
|
||
必要时补充与该组件直接相关的单元测试与样式断言，但不扩大到列表层和后端实现。
|