Bytebase 时间戳显示设计工作队列 vs 历史视图的展示规范【免费下载链接】bytebaseDatabase governance built for humans and agents — controlling changes and access across every major database.项目地址: https://gitcode.com/GitHub_Trending/by/bytebase本文系统梳理 Bytebase 前端的时间戳显示设计文档docs/design/timestamp-display.md——该文档定义了一条贯穿全产品的核心原则一个界面要么是工作队列Work Queue要么是历史视图History View这一分类直接决定它的时间展示方式。工作队列采用 GitHub 风格的相对时间30 天上限历史视图始终显示绝对日期时间而面向未来的“操作时间”计划发布、到期时间则强制显示带显式时区的绝对时间。读完本文你将理解这一设计决策的完整推演过程、全站调用点分类清单、各模式的渲染规范与实现形态并能直接对照 HumanizeTs.tsx 等源码继续深入。背景与问题HumanizeTs的“永久相对化”Bytebase 产品中规范的时间戳组件是HumanizeTsfrontend/src/components/HumanizeTs.tsx它支撑着 issue 列表、plan 列表以及十余个其他界面。当前实现是相对时间永无止境从45 seconds ago一路走到12 minutes ago→7 hours ago→N days ago没有任何上限。一份一年前的 issue 会显示为365 days ago——对审计阅读而言这个字符串携带的有效信息量几乎为零无法与事件时间窗、changelog 条目或外部审计请求做关联。绝对时间只存在于 hover 提示tooltip中且只能逐行恢复。而产品其余部分并非一个统一的反例模型而是“大杂烩”审计日志和少数详情视图渲染完整的绝对日期时间若干界面手工拼接固定、非 locale 感知的字符串下文“现状清点”给出全部调用点。该设计文档由两个真实用户反馈驱动BYT-10140相对时间戳x days ago恰恰隐藏了审计阅读所需的精确性BYT-10023一位客户为当晚的生产发布排期时无人能从产品上判断排期使用的是哪个时区——两个猜测UTC0 与服务器时区都是错的实际是操作者浏览器时区若按 UTC0 执行将提前 7 小时触发发布。核心原则工作队列 vs 历史视图文档落地的原则是一句话A surface is either a work queue or a history view, and that classification decides its time display.界面类型阅读目的首要时间问题显示方式工作队列Work queue决定现在需要处理什么新鲜度freshnessGitHub 风格相对时间 30 天上限之后切换为绝对日期历史视图History view作为已经发生的事件的记录精确时间exactly when始终显示绝对日期时间既不是队列也不是记录的界面活动流、created N ago元信息、同步新鲜度、Agent 聊天属于新鲜度优先阅读沿用工作队列的渲染方式。在“队列/历史”二分法之外还存在第三类时间操作时间Operational time——计划发布scheduled rollout或到期时间expiration阅读目的是采取行动这到底会在何时触发或失效。显示方式带显式时区的绝对日期时间绝不只显示相对时间。相对措辞in 7 hours会隐藏时区问题的存在——这正是 BYT-10023 事故的证据。范围界定本文只讨论显示frontend display不涉及后端、API 或存储偏好时间输入排期与到期 picker明确不在当前范围内。竞品研究成熟产品按“阅读模式”而非全局约定选择显示方式文档对主流产品的默认显示、切换机制、逃生通道escape hatch和用户设置做了横向对比✔ 表示 2026-08-26 已对一手来源核实产品/界面界面类型默认显示切换机制逃生通道用户设置GitHubissues/PRs/commits ✔工作队列/流相对3 days ago30 天后→绝对仅日期同一年省略年份Tooltip完整日期时间无GitLab✔工作队列/流处处相对无Tooltip按用户的Use relative times开关 12/24 小时制Linearissue 列表工作队列紧凑相对3d无Tooltip无Jiraissue 视图工作队列近期相对旧条目绝对Tooltip无Slack消息流情境式Today at 2:31 PM更早的日期显示日期Hover12/24 小时制Sentryissue 流队列/流相对年龄流内无详情页为绝对详情页无Stripe Dashboard支付历史/审计表绝对Jul 3, 2:35 PM——无AWS CloudTrail审计日志绝对、统一列——UTC/localDatadog日志记录/可观测绝对毫秒精度——时区规律成熟产品不选择单一全局约定而是按阅读模式分别选择。队列和流用相对时间GitHub 额外加了 30 天年龄上限记录与审计表用绝对、统一、可整列扫描的时间。GitLab 是用“用户偏好”解决的特例——且其默认仍是相对时间审计读者必须自己发现那个开关。Bytebase 的原则与行业二分一致但默认就把两边都做对而不引入设置项。注意原始诉求绝对、始终、带秒比 GitHub 的模式更强。下述决议D1–D7在历史视图上完全满足它在工作队列上则有意识地为了队列可扫描性D1做了取舍。设计决议 D1–D7D1 — 机制队列采用 GitHub 风格的年龄切换而非绝对始终、也非偏好设置。issue 列表是工作队列plan 列表也正在成为队列。新鲜度是主导问题因此上限内的相对时间是正确的。被否决的选项队列上绝对始终扼杀新鲜度阅读GitLab 式用户偏好设置机制复杂且未切换者的默认值就是错的什么都不做365 days ago的抱怨是真实存在的。D2 — 切换后的绝对形式仅日期GitHub 对齐。Jul 12, 2026同年行省略年份Jul 12。时间保留在 tooltip 中。优先保证队列密度接受在队列界面“精确到秒”的诉求只能通过 hover 满足在历史视图上则完全满足——那个阅读场景才真正需要它。D3 — 阈值30 天GitHub 对齐。与 GitHub 完全一致并且匹配现有常量RELATIVE_THRESHOLD_MS 30d源码见 frontend/src/utils/datetime.ts。接受后果年龄 1–29 天的队列行仍显示x days ago。否决了 24 小时与 7 天阈值能更早消除被抱怨的字符串但偏离用户熟悉的 GitHub 行为。D4 — 范围全站切换 历史视图豁免。HumanizeTs自身获得 30 天切换因此每个新鲜度优先界面都呈现 GitHub 风格。历史视图——数据库 changelog、revision 表、task-run 历史——切换为始终绝对日期时间与审计日志保持一致它们是执行的记录不是队列。D5提案— 操作时间绝对 显式时区分钟精度。计划发布与到期时间的墙钟渲染显示带短时区名的绝对日期时间Sep 15, 2026, 9:00 AM GMT8。评审后的两个细化(a) 预设写出的到期时间now() N days带有真实的亚分钟尾巴分钟显示会将强制截止时间向下取整 ≤59 秒——处于安全方向精确值在 D6 tooltip 中备选方案是为到期保留秒或归一化预设写入写路径改动超出范围。(b) 规则只针对墙钟字符串——纯倒计时expires in 3h20m跨时区不会被误读仍允许保留配合 D6 tooltip。由 BYT-10023 驱动处于提案待确认状态写入这些值的 picker 被推迟。D6 — 每个缩减显示的完整日期时间 tooltip。任何未显示完整形式的时间戳——相对时间、切换后的仅日期、或紧凑历史层级——都在 tooltip 中携带带秒和时区的完整绝对日期时间。这是通用的逃生通道保证每个缩减单元格都可恢复。推论无法承载 tooltip 的上下文——i18n 插值字符串、导出、标题——本身必须携带完整精度字符串。D7提案— 历史视图携带两个精度层级。历史行用于定位历史记录用于见证。当时间本身就是证据时用完整精度秒 时区formatAbsoluteDateTime审计日志可导出且导出必须在不低于屏幕的精度下保留同一时刻——导出写 RFC 3339 UTC 而屏幕显示浏览器本地时间等价性指时刻 精度而非字符串同一性与单条记录详情视图。当行被扫描以在某个资源的历史中定位记录时用紧凑精度日期 hh:mm无秒、无时区嵌入式列表——宽度被争用D6 保证完整精度一次 hover 即可获得。客观划分线可作为证据导出或详情视图 → 完整可扫描的嵌入式列表 → 紧凑。全站界面分类清单文档将当前每一个HumanizeTs调用点按上述原则分类以下文件均可在仓库中直接核对界面文件分类新显示Issue 列表components/IssueTable.tsx工作队列30d 切换Plan 列表routes/project/ProjectPlanDashboardPage.tsx工作队列30d 切换Release 列表/详情元信息routes/project/ProjectReleaseDashboardPage.tsx、ProjectReleaseDetailPage.tsx、components/release/ReleaseInfoCard.tsx今日为固定字符串——改用HumanizeTs工作队列/元信息30d 切换Issue 评论与活动components/issue-activity/IssueCommentActivity.tsx、routes/project/issue-detail/components/IssueDetailCommentList.tsx流30d 切换评审时间线/拒绝横幅routes/project/plan-detail/components/review/ReviewActivityTimeline.tsx、ReviewRejectionBanner.tsx流30d 切换Plan 详情createdroutes/project/plan-detail/components/PlanDetailMeta.tsx元信息30d 切换Deploy 当前状态最近运行时间routes/project/plan-detail/components/deploy/DeployTaskHeader.tsx、DeployLatestTaskRunInfo.tsx新鲜度30d 切换计划发布 pillDeployTaskHeader.tsx任务钉住运行时间操作时间绝对 时区Schema 同步状态modules/sql-editor/components/SchemaPane/SyncSchemaButton.tsx、routes/project/ProjectSyncSchemaPage.tsx、components/database/DatabaseOverviewInfo.tsx新鲜度30d 切换Agent 聊天modules/agent/components/AgentWindow.tsx流30d 切换Plan-check 运行时间components/plan-check/PlanCheckSection.tsx今日为裸toLocaleString()——改用HumanizeTs新鲜度30d 切换Access-grant 创建时间routes/project/ProjectAccessGrantsPage.tsxAccessGrantRow今日为完整绝对——改用HumanizeTs。管理花名册上的创建元信息该 grant 的操作性事实是它的到期后者保持操作模式工作队列/元信息30d 切换数据库 changelogroutes/project/database-detail/changelog/DatabaseChangelogTable.tsx历史视图始终绝对——紧凑层级D7数据库 revisionsroutes/project/database-detail/revision/DatabaseRevisionTable.tsx历史视图始终绝对——紧凑层级D7Task-run 历史routes/project/plan-detail/components/deploy/DeployTaskRunHistorySheet.tsx、routes/project/issue-detail/components/IssueDetailTaskRunTable.tsx历史视图始终绝对——紧凑层级D7审计日志components/AuditLogTable.tsx历史视图已是绝对——不变操作时间现状BYT-10023与修复触发第三类时间的事故前文已述产品行为正确缺陷在于没有任何可见表面说明适用哪个时区。文档侧已在 bytebase.com#125 修复本文档覆盖显示侧picker输入侧有意不在本文档设计。当前操作时间的展示位置与差距界面文件今日差距计划发布 pillroutes/project/plan-detail/components/deploy/DeployTaskHeader.tsx任务钉住运行时间HumanizeTs——相对in 7 hours时区仅在 tooltipBYT-10023 显示缺口唯一显示发布何时触发的界面却完全隐藏了时区问题Task-run 等待消息frontend/src/lib/taskRun.tsenqueued, will run at …i18n 字符串中的formatAbsoluteDateTime无——纯字符串上下文保持完整精度D6 推论SQL 编辑器 access grant 项24h 剩余modules/sql-editor/components/AccessGrantItem.tsx仅时长expires in 3h20m无 tooltip倒计时保留D5 范围注增加 D6 tooltipAccess-grant 到期issue 详情routes/project/issue-detail/components/IssueDetailAccessGrantDetails.tsx经getAccessGrantExpirationText的formatAbsoluteDateTime位于 JSX今日无D5 下采用操作模式Masking 豁免到期routes/project/ProjectMaskingExemptionPage.tsxdayjsYYYY-MM-DD HH:mm无时区、无秒、非 locale 感知角色授权到期详情routes/project/issue-detail/components/IssueDetailRoleGrantDetails.tsxdayjsLLL无时区成员到期预览routes/workspace/MembersPage.tsxformatExpirationDatei18n 字符串中的toLocaleDateString 时/分无时区/秒纯字符串上下文 → 完整精度字符串D6 推论成员到期表、access grants、IAM 提醒对话框、示例到期、订阅到期MembersPage.tsx、ProjectAccessGrantsPage.tsx、utils/accessGrant.ts、IAMRemindDialog.tsx、SampleExpirationAlert.tsx、stores/app/workspace.tsformatAbsoluteDateTime今日无D5 下 JSX 位置采用操作模式字符串插值位置横幅、示例提醒保持完整精度D6 推论D5 下的修复计划发布 pill、masking 豁免到期、角色授权到期统一收敛到操作格式——绝对日期时间 时区分钟精度Sep 15, 2026, 9:00 AM GMT8相对年龄可移入 tooltip。成员到期预览是 i18n 插值字符串按纯字符串推论保持完整精度字符串。当前绝对时间显示现状清点文档还清点了产品中已存在的三族不一致的绝对时间显示作为参考基线formatAbsoluteDateTime—— locale 感知秒 短时区名GMT8。主导族审计日志、changelog 详情页、revision 详情面板、access grants、成员到期表、IAM 提醒对话框、示例到期提醒、订阅到期、task-run 排期时间消息、SQL 编辑器结果面板、Monaco 心跳、Agent 聊天 tooltip。固定的 dayjs 字符串—— 有时间无时区、非 locale 感知masking 豁免YYYY-MM-DD HH:mm、角色授权详情LLL、SQL 编辑器查询历史行与标签页标题YYYY-MM-DD HH:mm:ss——HistoryPane.tsx 中的titleOfQueryHistory加上 SQLEditorRouteShell.tsx 中独立构建的深链标签页标题、以及嵌入式 release 元信息components/release/ReleaseInfoCard.tsxYYYY-MM-DD HH:mm:ss。临时toLocale*—— 成员页到期预览toLocaleDateString 时/分无秒无时区与 plan-check 运行时间PlanCheckSection.tsx 中的裸toLocaleString()locale 默认、无 tooltip。该设计还有两个已存在的半成品死代码utils/util.ts中未被使用的humanizeTs()30 天切换frontend/src/utils/util.ts以及IssueDetailTaskRunTable.tsx中从未传过的formatabsolute分支frontend/src/routes/project/issue-detail/components/IssueDetailTaskRunTable.tsx。两者都证明这个需求早已被感知两者都将被新设计吸收。值得注意产品当前的模式是列表相对、详情绝对——changelog 详情页与 revision 详情面板已渲染formatAbsoluteDateTime而其列表视图渲染相对时间。D4 让每个列表与它自己的详情视图一致。渲染规范工作队列/新鲜度界面经HumanizeTs组件将获得切换行年龄渲染示例en示例zh 10 snownow现在 1 min相对秒45 seconds ago45秒钟前 1 h相对分钟12 minutes ago12分钟前 24 h相对小时7 hours ago7小时前 30 d相对天数6 days ago6天前≥ 30 d同年绝对日期无年Jul 127月12日≥ 30 d其他年份绝对日期带年Jul 12, 20252025年7月12日Tooltip两种形式契约不变带秒和时区的完整绝对日期时间——Aug 26, 2026, 2:03:22 PM GMT8 / zh 2026年8月26日 14:03:22 GMT8。未来时间戳按 |age| 镜像处理Intl.RelativeTimeFormat已正确带符号≥30d 分支显示日期。所有字符串经Intl使用活动 i18n locale——无硬编码格式无需新增 locale key。历史视图始终绝对精度在 D7 下分两个层级分配为提案历史视图出现位置空间层级审计日志工作区 项目页专用页面可导出完整——保持现状Changelog 详情页详情视图完整——保持现状Revision 详情面板详情视图完整——保持现状数据库 changelog 列表全宽表格紧凑数据库 revision 列表全宽表格紧凑Task-run 历史 sheet704px sheet——空间受限情形紧凑Issue 详情 task-run 表嵌入式表格紧凑SQL 编辑器查询历史行HistoryPane.tsx窄侧栏列表今日为固定非 localeYYYY-MM-DD HH:mm:ss紧凑完整formatAbsoluteDateTimeAug 26, 2026, 2:03:22 PM GMT8 / zh 2026年8月26日 14:03:22 GMT8约 30 字符。紧凑 日期 hh:mmlocale 感知Aug 26, 2026, 2:03 PM / zh 2026年8月26日 14:03约 21 字符。秒和时区按 D6 一次 hover 即可获得。Task-run 日志条目task-run-log/model.ts::formatTimeHH:mm:ss.SSS保留高密度纯时间格式——父级运行头携带日期——并加上携带完整日期时间的 D6 tooltip同时覆盖跨午夜运行。操作时间计划发布、到期时间formatOperationalDateTime——日期 hh:mm 短时区名locale 感知Sep 15, 2026, 9:00 AM GMT8 / zh 2026年9月15日 09:00 GMT8。时区位于可见字符串中因为读者即将基于该值采取行动按 D5 无秒。相对年龄可随附在 tooltip 中。实现形态与源码佐证实现要点HumanizeTs获得 30 天切换逻辑已作为死代码存在——utils/util.ts 中的humanizeTs()utils/datetime.ts 中的RELATIVE_THRESHOLD_MS/formatAbsoluteDate在此处合并并删除这对死代码外加三个绝对模式每个都内置 D6 tooltipcompact新增formatCompactDateTime、datetime现有formatAbsoluteDateTime、operational新增formatOperationalDateTime。逐站点的工作就是上文的清点表每个列出的调用点采用其所属类的模式纯字符串上下文按 D6 推论保持完整精度字符串。同时喂养 JSX 与字符串上下文的辅助函数保持为完整精度字符串构建器——其 JSX 消费者改为渲染组件。陈旧性staleness任何随时间变化的显示相对桶、倒计时、isExpired派生在挂载期间不得过期从不随时间变化的显示零成本。机制——共享时钟、节奏、订阅者整合今日各组件临时的 per-component 定时器——是实现 PR 的设计空间由渲染期Date.now()扫描与 fake-timer 测试守护。GitHub 的relative-time元素在下一个边界调度更新是参考行为。测试阈值边界29d/31d、年份处理、zh locale、三个模式、亚分钟尾到期时的操作标签/tooltip 契约、24h 倒计时豁免、fake-timer 陈旧性更新现有断言相对字符串的*.test.tsx文件。源码佐证当前仓库现状frontend/src/components/HumanizeTs.tsx 今日契约formatRelativeTime渲染相对标签formatAbsoluteDateTime在 tooltip 中展示完整日期时间——与文档描述的“相对永远、绝对只存在于 hover”一致。frontend/src/utils/datetime.ts 已定义RELATIVE_THRESHOLD_MS 30 * 24 * 60 * 60 * 100030 天与DEFAULT_NOW_THRESHOLD_MS 10_000formatRelativeTime的桶结构与渲染规范中的表格10s / 1min / 1h / 24h / ≥1d逐项对应formatAbsoluteDate已实现同年省略年份的逻辑。frontend/src/utils/util.ts#L29-L36 中的humanizeTs()是文档所称的“死代码 30 天切换”——判断diff RELATIVE_THRESHOLD_MS后转formatAbsoluteDate。frontend/src/routes/project/issue-detail/components/IssueDetailTaskRunTable.tsx#L188-L198 存在从未被调用的format?: absolute | humanized分支。frontend/src/components/HumanizeTs.test.tsx 与 frontend/src/utils/datetime.test.ts 验证了相对/绝对契约与阈值行为后者含 31 天前的用例frontend/src/routes/project/plan-detail/components/deploy/DeployTaskHeader.tsx 展示了“计划发布 pill”当前以HumanizeTs渲染scheduledTimeTs的调用点。哪些不变审计日志已正确。时长显示humanizeDurationV14.2s时长是已流逝的量不涉日历或时区问题。30 天以内的相对措辞。无用户或工作区偏好GitLab 的模式是若客户将来要求时的已知形态。无后端或 proto 改动。时间pickerBYT-10023 的输入侧推迟到其自己的设计文档侧修复已在 bytebase.com#125。按类型排除范围——有了这些frontend/src下每一个dayjs/Intl/toLocale*调用点在本文档中都有处置SQL 结果单元格值utils/v1/sql.ts 中的数据本身、嵌入生成内容中的时间issue 标题、CEL 描述——重排格式属于数据变更、导出/下载文件名、以及 picker 值回显/API 线上字符串。客户成果检查历史工单 30 天issue 列表显示真实日期——对真正久远的历史投诉已解决。Changelog / revisions / task-run 历史默认绝对日期时间到分钟紧凑层级D7秒与时区一次 hover 即得D6。完整秒仍作为证据界面的默认——审计日志与 changelog/revision 详情视图——因此“年月日时分秒”诉求在记录列表上满足到分钟、在记录详情上完全满足。若客户特别坚持可见秒升级路径是把这些列表切换到完整层级——一行 D7 分配变更无需模型改动。1–29 天队列行仍显示x days agoD1/D3 取舍作为队列阅读被接受。风险若被报告的工单历史阅读包含近期的 issue 列表行则部分投诉依然存在。缓解tooltip若复发升级路径是降低阈值D3或引入 GitLab 式偏好D1 暂被否决。待裁决的开放事项自初稿以来已确认release 列表 工作队列评论/活动时间线 流D6每个缩减显示上的完整日期时间 tooltip。仍开放D7 层级分配/格式——嵌入式历史列表用紧凑日期 hh:mm还是完整。changelog 表与 704px task-run sheet 已有两种选项的 mockup按 orient/testify 原则推荐紧凑。D5 精度细化——操作时间用分钟精度无秒。Picker 写入分钟但天/秒计数预设写入now() offset且带亚分钟尾巴因此分钟显示将强制截止时间向下取整 ≤59 秒安全方向完整值在 tooltip 中。备选到期值保留完整秒或将预设写入归一化到分钟写路径变更超出本范围。计划发布 pill 内联显示操作格式Sep 15, 2026, 9:00 AM GMT8相对年龄移入 tooltip。裸格式的到期显示在本工作中修复而非作为后续清理单masking 豁免与角色授权详情采用操作模式成员预览——i18n 插值字符串——按推论获得完整精度字符串若此处偏好分钟显示则做Trans-slot 重构。完整单元格上的 tooltip 可以显示相对年龄反向 tooltip。备选重复完整字符串GitHub 对齐。总结Bytebase 的时间戳显示设计以一个二元分类工作队列/历史视图 一个操作时间类别为骨架通过 D1–D7 七项决议把 GitHub 式 30 天切换、历史视图绝对显示、操作时间显式时区落实为可执行的渲染规范与逐站点改造清单。实现上以HumanizeTs组件与 utils/datetime.ts 工具函数为汇聚点最终达到“队列可扫描、记录可审计、操作不歧义”的产品目标。【免费下载链接】bytebaseDatabase governance built for humans and agents — controlling changes and access across every major database.项目地址: https://gitcode.com/GitHub_Trending/by/bytebase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考