style(usage): center the latency column

src/i18n/locales/zh-CN.ts

@@ -801,7 +801,7 @@ export const zhCN = {
   'usage.column.source': '来源',
   'usage.column.key': '鉴权密钥',
   'usage.column.result': '结果',
-  'usage.column.latency': '总耗时',
+  'usage.column.latency': '耗时',
   'usage.column.ttft': '首字延迟',
   'usage.latency.ttft': '首字',
   'usage.latency.elapsed': '耗时',

src/pages/UsageEventsView.css

@@ -198,21 +198,25 @@
 }
 
 
-.usage-request-log .usage-td-latency {
-  font-weight: 600;
+.usage-request-log .usage-events-table th.usage-th-latency .usage-th-content,
+.usage-request-log .usage-events-table td.usage-td-latency {
+  text-align: center;
+  justify-content: center;
 }
 
-.usage-request-log .usage-latency-line {
-  display: grid;
+.usage-request-log .usage-latency-cell {
+  display: inline-grid;
   grid-template-columns: max-content max-content;
   column-gap: 6px;
-  align-items: baseline;
+  row-gap: 2px;
+  justify-items: start;
+  vertical-align: middle;
   line-height: 1.35;
   white-space: nowrap;
 }
 
-.usage-request-log .usage-latency-line + .usage-latency-line {
-  margin-top: 2px;
+.usage-request-log .usage-latency-line {
+  display: contents;
 }
 
 .usage-request-log .usage-latency-label {
@@ -238,7 +242,6 @@
   color: var(--usage-log-duration-bad);
 }
 
-
 .usage-request-log .usage-events-table .usage-td-key > strong {
   font-family: var(--font-family-mono);
   font-size: var(--font-size-caption);

src/pages/UsageEventsView.tsx

@@ -99,7 +99,7 @@ const EVENT_COLUMNS: readonly EventColumnDef[] = [
   { key: 'result', labelKey: 'usage.column.result', defaultWidth: 78, minWidth: 68, align: 'left' },
   { key: 'total', labelKey: 'usage.column.tokens', defaultWidth: 112, minWidth: 100, align: 'left' },
   { key: 'cache', labelKey: 'usage.column.cache', defaultWidth: 94, minWidth: 84, align: 'left' },
-  { key: 'latency', labelKey: 'usage.column.latency', defaultWidth: 112, minWidth: 100, align: 'left' },
+  { key: 'latency', labelKey: 'usage.column.latency', defaultWidth: 112, minWidth: 100, align: 'center' },
   { key: 'speed', labelKey: 'usage.column.speed', defaultWidth: 82, minWidth: 72, align: 'left' },
   { key: 'cost', labelKey: 'usage.column.cost', defaultWidth: 96, minWidth: 86, align: 'left' },
   { key: 'key', labelKey: 'usage.column.key', defaultWidth: 112, minWidth: 96, align: 'left' },
@@ -469,7 +469,8 @@ function UsageEventCell({
         `${t('usage.latency.elapsed')}: ${record.latency_ms} ms`,
       ].join('\n');
       return (
-        <td className="usage-td-latency align-left" title={latencyTitle}>
+        <td className="usage-td-latency align-center" title={latencyTitle}>
+          <span className="usage-latency-cell">
           <span className="usage-latency-line">
             <span className="usage-latency-label">{t('usage.latency.ttft')}</span>
             <span className={ttftTone ? `usage-latency-value ${ttftTone}` : 'usage-latency-value'}>{record.ttft_ms == null ? '—' : compactDuration(record.ttft_ms)}</span>
@@ -478,6 +479,7 @@ function UsageEventCell({
             <span className="usage-latency-label">{t('usage.latency.elapsed')}</span>
             <span className={`usage-latency-value ${latencyTone}`}>{compactDuration(record.latency_ms)}</span>
           </span>
+          </span>
         </td>
       );
     }