fix: 前后端时钟问题

frontend/src/components/VideoPanel.vue

@@ -76,6 +76,10 @@ function formatNumber(value: number | null | undefined, suffix = '') {
   return `${value.toFixed(1)}${suffix}`
 }
 
+function wallClockNowMs() {
+  return Date.now()
+}
+
 let frameTimer: number | null = null
 let statusTimer: number | null = null
 let probeTimer: number | null = null
@@ -151,7 +155,7 @@ async function runDisplayProbe() {
   }
 
   probeRequestPending = true
-  const requestStartedUnixMs = performance.timeOrigin + performance.now()
+  const requestStartedUnixMs = wallClockNowMs()
 
   try {
     probeKey += 1
@@ -167,7 +171,7 @@ async function runDisplayProbe() {
     const frameHashHeader = response.headers.get('X-Blitz-Frame-Hash') ?? ''
     const frameSeq = frameSeqHeader ? Number(frameSeqHeader) : null
     const backendReceivedUnixNs = backendReceivedHeader ? Number(backendReceivedHeader) : null
-    const responseReceivedUnixMs = performance.timeOrigin + performance.now()
+    const responseReceivedUnixMs = wallClockNowMs()
     const blob = await response.blob()
     const objectUrl = URL.createObjectURL(blob)
 
@@ -175,11 +179,11 @@ async function runDisplayProbe() {
       const probeImage = new Image()
       probeImage.src = objectUrl
       await probeImage.decode()
-      const decodedUnixMs = performance.timeOrigin + performance.now()
+      const decodedUnixMs = wallClockNowMs()
       await new Promise<void>((resolve) => {
         requestAnimationFrame(() => resolve())
       })
-      const paintUnixMs = performance.timeOrigin + performance.now()
+      const paintUnixMs = wallClockNowMs()
 
       let inputToNextFreshFrameMs: number | null = null
       let inputToNextChangedFrameMs: number | null = null
@@ -339,7 +343,7 @@ watch(
       </div>
       <div class="stat-card">
         <span>Paint Delay</span>
-        <strong>{{ formatNumber(displayVideo?.display_probe?.a_recv_to_paint_ms, ' ms') }}</strong>
+        <strong>{{ formatNumber(displayVideo?.display_probe?.request_to_paint_ms, ' ms') }}</strong>
       </div>
     </div>
 
@@ -367,7 +371,7 @@ watch(
         <p><strong>Input to next seq:</strong> {{ formatNumber(operatorMetrics.input_to_next_fresh_frame_ms, ' ms') }}</p>
         <p><strong>Input to changed frame:</strong> {{ formatNumber(operatorMetrics.input_to_next_changed_frame_ms, ' ms') }}</p>
         <p><strong>Input to paint:</strong> {{ formatNumber(operatorMetrics.input_to_next_paint_ms, ' ms') }}</p>
-        <p><strong>Display probe recv-to-paint:</strong> {{ formatNumber(displayVideo?.display_probe?.a_recv_to_paint_ms, ' ms') }}</p>
+        <p><strong>Display probe request-to-paint:</strong> {{ formatNumber(displayVideo?.display_probe?.request_to_paint_ms, ' ms') }}</p>
       </div>
     </div>
 

frontend/src/types.ts

@@ -271,7 +271,10 @@ export interface VideoStatus {
     input_to_next_fresh_frame_ms: number | null
     input_to_next_changed_frame_ms: number | null
     input_to_next_paint_ms: number | null
-    a_recv_to_paint_ms: number | null
+    request_to_paint_ms: number | null
+    response_to_paint_ms: number | null
+    backend_to_request_ms: number | null
+    backend_to_paint_ms_raw: number | null
   }
   receiver?: {
     backend_ready: boolean