时间戳
@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
悬停提示把同一个时刻列成几种时区或格式,方便对照读者所在时区和事件发生时区。