# 资源链接 ## 任务链接 ## 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) ## **组件依赖关系** # 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. 适用场景 * **订单详情页：**展示订单金额构成与支付记录 * **销售记录详情：**查看销售金额及支付退款情况 * **购物车结算：**查看价格构成与折扣 * **收银系统：**查看当前订单资金情况 # 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（最终结算结果） 显示当前交易的最终应付金额。 * **第二层** 核心资金分类： • Total • Paid • 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. 初始状态与边界情况 * **无支付记录：**隐藏 Paid 区块。 * **无退款记录：**隐藏 Refund 区块。 * **Total 无子项：**不显示展开箭头。 * **金额为 0：**默认显示，但可配置隐藏。 * **数据缺失：**显示 “—”。 # 9. 配置项 * 是否显示 Total * 是否显示 Paid * 是否显示 Refund * 是否显示 N items * 是否显示提示 icon * 是否隐藏0金额行 * 标题文案可更改 # 10. 示例