---
title: 设计文档
order: 2
category: pro
---

# 资源链接

## Figma链接

- https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=13713-2958&m=dev
- https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=13713-3014&m=dev
- https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=13713-3120&m=dev

# 1. 组件概述

| **组件名称（英文）** | Time Range Display                                                                                                |
|--------------|-------------------------------------------------------------------------------------------------------------------|
| **组件编号**     | pcp\_ge\_timeRangeDisplay\_V1.0                                                                                   |
| **组件类型**     | Pro Components                                                                                                    |
| **组件分类**     | General                                                                                                           |
| **依赖组件**     | [ DateTime Display](https://m1ed09stz4r.feishu.cn/wiki/RK8QwHcpfihvZxkJuMYcr9rtnOc)                               |
| **简介**       | Time Range Display 是一个 **纯展示型 Pro 组件**，用于在不同语言、时区与信息密度场景下，将开始时间（startAt）与结束时间（endAt）格式化为 **“时间区间 + 持续时间”** 的紧凑表达。 |

# 2. 版本

| **版本**   | 1.0                 |
|----------|---------------------|
| **更新简介** | 首次发布，初始版本，仅支持当前时间展示 |

# 3. 组件设计目的

1. 统一产品内所有时间区间的展示规则

2. 降低用户对“开始 / 结束 / 持续多久”的理解成本

3. 在列表、卡片、详情等不同密度场景下保持一致语义

4. 为 Booking / Event / Order 等 Plus 组件提供稳定展示能力

# 4. 适用场景

# 5. UI 设计

## 5.1 同一天（Same-day，默认压缩）

* 默认结构：HH:mm-HH:mm

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

* 持续时间在前

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

* 显示具体日期

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

* 换行展示

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

## 5.2 跨天（Cross-day，自动展开）

* 默认展示

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

* 跨年展示

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

## 5.3 Duration（持续时间）展示规则

* 单位：d h m s

* 365d2h30m23s

## 5.4 自适应规则

* 一行展示时，同一天显示时，当宽度减小时，默认首先实行换行策略，先是持续时间单独一行，后是时间和星期单独一行，然后是星期单独一行，然后实行省略年，再然后时间的起止折行

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

* 一行展示时，跨天天显示时，当宽度减小时，默认首先实行换行策略，先是持续时间单独一行，后是时间的起止折行，然后是时间和星期单独一行，然后是星期单独一行

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

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

### 5.5.1 颜色规范

### 5.5.2 尺寸规范

### 5.5.3 间距规范

# 6. 配置项

## 6.1 样式自定义

* 可以切换选择Horizontal和Vertical

* 整体区域的背景、圆角、边框、阴影、padding、gap都可以在默认的基础上去的自定义

* 时间、日期、星期、持续时长的文本，可以自定义大小、粗细、颜色、显示行数、宽度

* 可以控制对齐方式，左对齐、居中对齐、右对齐，默认为居中对齐

## 6.2 持续时长格式自定义

* 是否显示秒，默认否

## 6.3 功能配置

* 可以排序时间、日期、星期、持续时长字段

* 可开启插槽

