# 资源链接

## 任务链接

&#x20;

## Figma链接

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

# 1. 组件概述

| **组件名称（英文）** | Hierarchical Summary List              |
|--------------|----------------------------------------|
| **组件编号**     | pcp\_dd\_hierarchicalSummaryList\_V1.0 |
| **组件类型**     | Pro Components                         |
| **组件分类**     | Data Display                           |

# 2. 版本

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

# 3. 简介

一个“层级汇总列表”结构组件：每一行由「左侧标题 + 右侧数值 + 展开/收起」构成；父级数值可由子级聚合而来；支持多层级无限嵌套；每一行/每一层级可独立控制展示元信息（N
items、提示 icon、tooltip）与基础样式（背景/边框/padding 等）。该组件不内置金额、订单、支付等业务语义，只提供结构与交互能力。

# 4. 设计目标

1. **抽象通用层级汇总结构**

提供一个可无限嵌套的层级行结构组件，统一“父级汇总 + 子级明细”的信息表达模式。

* **解耦结构与业务语义**

仅提供层级结构、展开交互与聚合展示能力，不绑定金额、订单、支付等具体业务语义。

* **支持高复用与跨领域扩展**

可应用于费用构成、资金流转、统计汇总、规则说明等多种结构化信息展示场景。

* **保证可读性与可解释性**

通过统一的数值对齐、缩进规则与展开逻辑，提升复杂结构信息的可扫读性与理解效率。

# 5. 适用场景

1. **费用/统计类汇总展示**：父级显示总计，展开查看构成项（如费用拆分、统计拆分）。

2. **可解释性明细**：在“结果值”下展开查看规则/来源（如折扣构成、调账来源）。

3. **分组信息与聚合**：分组标题行展示聚合值，组内条目展示明细值。

4. **多端详情页信息块**：PC 展开更充分，移动端默认折叠，保证信息密度与可读性。

# 6. UI 设计

## 6.1 组件结构

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

### 6.1.1 **基础行结构（Row）**

* **左侧（Left）**：标题文本（可带可选元信息）

  * 标题（Title）

  * 可选：N items（数量/条目提示）

  * 可选：Info/Help icon（提示更多信息，可挂 tooltip）

* **右侧（Right）**：数值 + 展开/收起箭头

  * 数值（Value）

  * 可选：单位/后缀（例如 pt、%）

  * 展开/收起箭头（仅当存在子级时显示）

### 6.1.2 **层级展示（Level）**

* **L1（一级）**：通常用于“汇总/分组”，字号/粗细更强调，可配置默认背景或卡片感

* **L2（二级）**：明细列表，行高更紧凑，可配置缩进（indent）

* **L3+（三级及以上）**：默认继续缩进与弱化（可配置最大层级样式策略）

## 6.2 展示样式

* 注意：**value 不是必须 number**

  * value 可能是 number（$40)

  * 可能是 string（例如 “—”, “Included”, “Pending”）

  * 可能是组合（“(500pt) -$50”）

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

* 行/层级可独立配置样式（背景、边框、padding…）

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

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

### 6.3.1 颜色规范

### 6.3.2 尺寸规范

### 6.3.3 间距规范

# 7. 交互准则

* 默认展示更完整（可配置默认展开层级）

* 默认仅展示 L1 与关键行；其余通过展开查看

* 右侧数值列固定右对齐，保证纵向对齐可扫读

* 支持 hover：提示 icon、tooltip 更易触达

* **标题过长：**&#x5DE6;侧允许换行；右侧 value 不换行保持对齐

* 点击箭头仅触发展开/收起并且与点击整行一致，避免两套逻辑

# 8. 配置项

## 8.1 样式自定义

* 每一层级的样式都可以自定义，背景、边框、圆角、阴影、padding、gap

* 每一层级的文本字号大小、颜色、字重都可以自定义

* 每一层级的icon以及展开收起的箭头icon大小都可以自定义大小颜色

* 层级内每项显示分割线，默认不展示，分割线样式可自定义

* 默认右侧右对齐，左侧左对齐，可以自定义

## 8.2 功能配置

* 每个单独层级是否缩进，缩进的值可以自定义

* 每个单独层级是否显示“·”间隔符

* 每个层级都可以单独显示和隐藏

* 每个层级内的每一项都可以进行单独的显示和隐藏

* 每个层级以及层级内的每一项都可以进行自定义排序

* 可控制最大渲染层级/最大展开层级的配置

* 手风琴模式（可选）

* 支持在右侧 value 后附加轻量操作（例如 tag、状态 pill、按钮）

* 是否显示 N items，以及N items 的文案格式（“N items”/“N 条”）可以自定义

* 是否显示 info icon，以及tooltip 内容来源（静态文案/字段绑定）自定义

* 默认是一行一列，可开启栅格一行多列

* 可开启额外插槽

