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

# 资源链接

## 任务链接

&#x20;

## Figma链接

https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=13508-7380&m=dev
https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=13514-7762&m=dev

# 1. 组件概述

| **组件名称（英文）** | DateTime Display                                                                                                      |
|--------------|-----------------------------------------------------------------------------------------------------------------------|
| **组件编号**     | pcp\_dd\_dateTimeDisplay\_V1.0                                                                                        |
| **组件类型**     | Pro Components                                                                                                        |
| **组件分类**     | Data Display                                                                                                          |
| **简介**       | DateTime Display 是一个专注于 **“当前时间（Now / Today）”语义** 的时间展示组件，用于在不同终端（PC / Mobile / Kiosk）和不同语言环境下，统一展示 **当前日期、时间与星期信息**。 |

# 2. 版本

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

# 3. 组件设计目的

1. 统一产品内所有「当前时间」的展示规范

2. 避免业务自行拼接日期 / 星期字符串

3. 天然支持多语言、12 / 24 小时制

4. 作为 Time 类 Plus 组件的稳定基础能力

# 4. 适用场景

* 后台首页当前时间

* 门店当前时间

* 欢迎页/状态页

* 大屏实时显示时间

* 当前系统时间提示

# 5. 能力边界（V1.0）

### **支持**

* 当前日期（Date）

* 当前时间（Time）

* 当前星期（Weekday）

* 自动随系统时间刷新

### **不支持**

* 时间范围 / 日期范围

* 相对时间（x 分钟前）

* 业务语义时间（开始 / 结束）

# 6. UI 设计

## 6.1 组件结构

* Date Text（日期）

* Weekday Text（星期）

* Time Text（时间）

* Optional Icon（可选）

## 6.2 展示样式

* 默认展示样式

* 单行展示样式

* 竖向展示样式

### 6.2.1 时间显示格式

* 默认

* 12小时制

* 显示秒

* 只显示小时

### 6.2.2 日期显示格式

* 默认展示

* Y-M-D

* M-D-Y

* D-M-Y

* 完整展示

### 6.2.3 星期显示格式

* 默认展示

* 完整展示

* 单字母展示

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

### 6.3.1 颜色规范

### 6.3.2 尺寸规范

### 6.3.3 间距规范

# 7. 交互准则

* 默认刷新：60 秒

* 显示秒：1 秒刷新

* 时间来源：客户端系统时间

* 跟随语言切换后显示对应的显示

# 8. 配置项

## 8.1 样式自定义

* 可以切换选择Horizontal和Vertical

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

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

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

## 8.2 时间格式自定义

* 是否开启12小时制，默认否

* 是否展示分钟和秒，默认展示分钟不展示秒

* 小时是否补零，默认否

## 8.3 日期格式自定义

* 英文月份是否简写，默认是，例如：Mar

* 英文月份数字展示，默认否，例如：Mar展示成03

* 中文显示“年、月、日”汉字，默认否

* 分隔符自定义，例如“-”、“/”

* 是否显示年、月、日字段，默认不展示年字段

* 可以选择年月日的顺序，Y-M-D，M-D-Y，D-M-Y

## 8.4 星期格式自定义

* 是否完整展示，默认否

* 是否单字母展示，默认否

## 8.5 功能配置

* 可以显隐时间、日期、星期字段

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

* 可开启插槽

