# 资源链接

## 任务链接

&#x20;

## Figma链接

Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=14169-13540&m=dev
Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=14256-4201&m=dev

## 产品文档

[ Sale Detail 2.0-Template 1](https://m1ed09stz4r.feishu.cn/wiki/Xpz7wPW6aiHu67keq6uccNmLnub)

## **<span style="color: rgb(216,57,49); background-color: rgb(255,233,40)">组件依赖关系</span>**

# 1. 组件概述

| **组件名称（英文）** | Financial Summary                                                                                                                                                      |
|--------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **组件编号**     | pcl\_FinancialSummary\_V1.0                                                                                                                                            |
| **组件类型**     | Plus Components                                                                                                                                                        |
| **组件分类**     | Plus Components                                                                                                                                                        |
| **简介**       | Financial Summary 是用于展示交易或订单相关资金信息的聚合组件。该组件基于 **Hierarchical Summary List（Pro）** 构建，通过层级结构展示金额汇总、支付记录、退款记录等信息，并提供最终结算结果（Balance Due）。组件通过统一的层级结构和展开逻辑，使复杂的资金信息能够被清晰理解。 |

# 2. 版本

| **版本**   | 1.0  |
|----------|------|
| **更新简介** | 首次发布 |

# 3. 需求来源

在订单、销售记录或交易详情页面中，需要清晰展示：

* 总金额构成

* 已支付记录

* 已退款记录

* 最终应付余额

这些信息往往包含多层级结构（例如折扣明细、支付渠道明细等），如果没有统一组件，容易导致不同页面实现方式不一致，因此需要抽象为统一的
Financial Summary 组件。

# 4. 组件设计目标

1. **统一资金信息展示结构**

通过层级汇总结构统一展示 Total、Paid、Refund 等资金信息。

* **提升资金信息的可解释性**

支持逐层展开查看明细，帮助用户理解金额来源。

* **支持复杂交易场景复用**

可用于订单详情、销售记录、购物车结算等场景。

* **与结构 Pro 组件解耦**

复用 Hierarchical Summary List，实现业务语义与结构组件的分离。

# 5. 适用场景

* **订单详情页：**&#x5C55;示订单金额构成与支付记录

* **销售记录详情：**&#x67E5;看销售金额及支付退款情况

* **购物车结算：**&#x67E5;看价格构成与折扣

* **收银系统：**&#x67E5;看当前订单资金情况

# 6. UI 设计

## 6.1 组件结构

Financial Summary 采用 **层级汇总结构**：

**Balance due**

* Total

  * Subtotal

  * Tax

  * Fee

  * Surcharge

    * Holiday surcharge

    * Custom fee

    * ...

  * Discount

    * Points

    * Member discount

    * Campaign

    * ...

* Paid

  * Payment #1

    * Payment method detail

  * Payment #2

    * Payment method detail

* Refund

#### **组件职责说明**

* **第一层**

  Balance Due（最终结算结果）

  显示当前交易的最终应付金额。

* **第二层**

  核心资金分类：

&#x20; • Total

&#x20; • Paid

&#x20; • Refund

* **第三层**

每个分类的明细。

## 6.2 展示样式

* 默认布局

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=MTJmYTJmYjIzMWJjY2I4YzZjN2MyNjZkYTM0Yzc1YjNfY2pOTnlOTTlpbGUxUmVFcUhhbXh2SDRXUml6MkQ1RWRfVG9rZW46TUpSc2JvWjVmb2NIdzB4SHFMeGNKQmNxbjFlXzE3NzMzMDIzNjE6MTc3MzMwNTk2MV9WNA)

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=NTZmNzVjOWE3NGFmODg3YmUzNjdiOTA5OWZlMTg0ZmVfeFlEazIzV01oUTdmNlpSajdZM0JjV1BYOUt6cThWczFfVG9rZW46RVM0OGJiTkZVb21udGx4QjM2aGM4YnJ3bkNiXzE3NzMzMDIzNjE6MTc3MzMwNTk2MV9WNA)

## 6.3 **视觉设计规范（需要主题模块完成）**

### 6.3.1 颜色规范

### 6.3.2 尺寸规范

### 6.3.3 间距规范

# 7. 交互准则

# 8. 初始状态与边界情况

* **无支付记录：**&#x9690;藏 Paid 区块。

* **无退款记录：**&#x9690;藏 Refund 区块。

* **Total 无子项：**&#x4E0D;显示展开箭头。

* **金额为 0：**&#x9ED8;认显示，但可配置隐藏。

* **数据缺失：**&#x663E;示 “—”。

# 9. 配置项

* 是否显示 Total

* 是否显示 Paid

* 是否显示 Refund

* 是否显示 N items

* 是否显示提示 icon

* 是否隐藏0金额行

* 标题文案可更改

# 10. 示例

