Aether/frontend/src/features/usage/components/ElapsedTimeText.vue

<template>
  <span class="tabular-nums">{{ displayText }}</span>
</template>

<script setup lang="ts">
import { computed, onUnmounted, ref, watch } from 'vue'

const props = withDefaults(defineProps<{
  createdAt?: string | null
  status?: string | null
  responseTimeMs?: number | null
  precision?: number
}>(), {
  createdAt: null,
  status: null,
  responseTimeMs: null,
  precision: 2,
})

const now = ref(Date.now())
const precision = computed(() => Math.max(0, props.precision))
const isActive = computed(() => props.status === 'pending' || props.status === 'streaming')

let rafId: number | null = null

function parseCreatedAtMs(value: string | null | undefined): number {
  if (!value) return Number.NaN
  // 后端有时返回无时区时间，按 UTC 解析，和列表时间显示逻辑保持一致
  const normalized = /(?:Z|[+-]\d{2}:\d{2})$/i.test(value) ? value : `${value}Z`
  return new Date(normalized).getTime()
}

function stopRaf() {
  if (rafId == null) return
  cancelAnimationFrame(rafId)
  rafId = null
}

function tick() {
  now.value = Date.now()
  rafId = requestAnimationFrame(tick)
}

function startRaf() {
  stopRaf()
  now.value = Date.now()
  rafId = requestAnimationFrame(tick)
}

watch(isActive, (active) => {
  if (active) {
    startRaf()
  } else {
    stopRaf()
  }
}, { immediate: true })

onUnmounted(() => {
  stopRaf()
})

const displayText = computed(() => {
  if (!isActive.value) {
    if (props.responseTimeMs == null) return '-'
    return `${(props.responseTimeMs / 1000).toFixed(precision.value)}s`
  }

  if (!props.createdAt) return '-'

  const createdAtMs = parseCreatedAtMs(props.createdAt)
  if (Number.isNaN(createdAtMs)) return '-'

  const elapsedMs = Math.max(0, now.value - createdAtMs)
  return `${(elapsedMs / 1000).toFixed(precision.value)}s`
})
</script>