Skip to content

时间戳

@astryxdesign/core v0.7.1 · Timestamp

使用方法 ​

Timestamp 用 <time> 画出一个时刻。value 是 ISO 字符串,或按秒计的 unix 时间。默认格式是 auto:在 autoThreshold(七天)以内用相对时间,更早的用 date_time。

hasTooltip 默认打开,悬停卡片里的时间可以复制。tooltipEntries 把同一个时刻列成几种时区或格式。isTimezoneShown 在 date_time 和 time 后面加上短时区名。isLive 按较短的间隔刷新相对时间。

相对格式会把带长时区名的说法放进 aria-label,不依赖提示卡片也能读出绝对时间。

vue
<script setup lang="ts">
import { Timestamp } from '@astryx-vue/core/Timestamp'
</script>

<template>
  <Timestamp value="2026-03-25T12:00:00Z" color="primary" />
</template>

建议 ​

建议做法
推荐动态和评论用 auto。近的显示相对时间,远的变成完整日期。
推荐日志用 system_date、system_date_time、system_time,并配 type="code"。
推荐读者需要对照本地时区和事件发生时区时,传入 tooltipEntries。
避免相对格式关掉提示,除非旁边已经写了绝对时间。
避免给系统格式再追加时区。那些字符串要保持机器可读。

解剖

部分说明
格式化文字渲染出的日期、时间或相对标签,比如「2 小时前」或「2025年3月21日」。
悬停卡片显示为相对时间时,这张可复制的悬停卡片给出完整的绝对日期和时间;也可以用 tooltipEntries 配置各行。默认的单行带着完整的绝对时间。
悬停卡片行卡片的一行:可选标签,旁边是按一个时区和一种格式渲染的时刻。一行要不要复制按钮,由 isCopyable 决定。
复制按钮悬停卡片里每一行的复制按钮,复制的是该行格式化后的值。

示例 ​

Timestamp — 自动

Recent — renders as relative
Older than 7 days — renders as date_time

较近的时间显示成相对时间,更早的切换成完整日期。大多数场景用这个默认值。

Timestamp — 颜色

Primary
Secondary
Disabled
Accent

主色、次要色、禁用色和强调色。

Timestamp — 格式

User-facing formats
System formats (logs and dev tools)

日期、日期时间、时间,以及对应的系统格式。面向读者用前者,日志和开发工具用系统格式。

Timestamp — 相对时间

Relative timestamps (hover for full date)

从几秒前到几个月前。悬停可以看到完整日期,适合动态、评论和活动记录。

Timestamp — 时区

User-facing with timezone
System formats stay machine-readable — never suffixed with a zone

在时间后面加上时区缩写。跨时区的审计日志或团队日历打开 isTimezoneShown。

Timestamp — 提示中的时区

Local + UTC — hover to compare
Incident origin zone alongside the reader’s
Friendly line plus a machine-precise line

悬停提示把同一个时刻列成几种时区或格式,方便对照读者所在时区和事件发生时区。