From 778068af4254b90f1536b45af0cdd73349d91d82 Mon Sep 17 00:00:00 2001
From: yunyaozhou <admin@shujk.top>
Date: Mon, 29 Jun 2026 04:49:15 +0800
Subject: [PATCH] style: color request timing pills

---
 ui-src/src/App.tsx    | 10 +++++-----
 ui-src/src/styles.css | 28 +++++++++++++++++++++++++++-
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/ui-src/src/App.tsx b/ui-src/src/App.tsx
index 94d892d..926dbba 100644
--- a/ui-src/src/App.tsx
+++ b/ui-src/src/App.tsx
@@ -872,23 +872,23 @@ export default function App() {
                                 <span className={`badge ${statusTone}`}>{entry.status_code ?? "-"}</span>
                                 <strong>{entry.profile_name || status?.config?.profile_name || "-"}</strong>
                                 <span className={`badge ${lifecycleTone(entry.lifecycle_state)}`}>{entry.lifecycle_state || "sent"}</span>
-                                <span className="meta-pill">
+                                <span className="meta-pill meta-sent">
                                   <span className="meta-key">发</span>
                                   {timestamp(entry.started_at)}
                                 </span>
-                                <span className="meta-pill">
+                                <span className="meta-pill meta-first">
                                   <span className="meta-key">首</span>
                                   {durationSeconds(entry.first_response_delay_ms)}
                                 </span>
-                                <span className="meta-pill">
+                                <span className="meta-pill meta-total">
                                   <span className="meta-key">总</span>
                                   {durationSeconds(entry.duration_ms)}
                                 </span>
-                                <span className="meta-pill">
+                                <span className="meta-pill meta-body">
                                   <span className="meta-key">体</span>
                                   {bytesFormat(entry.request_body_bytes)}
                                 </span>
-                                <span className="meta-pill">
+                                <span className="meta-pill meta-received">
                                   <span className="meta-key">收</span>
                                   {timestamp(entry.finished_at)}
                                 </span>
diff --git a/ui-src/src/styles.css b/ui-src/src/styles.css
index e07c4bd..9dec1b8 100644
--- a/ui-src/src/styles.css
+++ b/ui-src/src/styles.css
@@ -580,10 +580,36 @@ a {
 
 .meta-key {
   margin-right: 5px;
-  color: #66707c;
+  color: currentColor;
   font-size: 10px;
   font-weight: 820;
   letter-spacing: 0.04em;
+  opacity: 0.72;
+}
+
+.meta-sent {
+  color: #155f53;
+  background: #d9efe8;
+}
+
+.meta-first {
+  color: #315f80;
+  background: #dcecf7;
+}
+
+.meta-total {
+  color: #744d18;
+  background: #f6e3bd;
+}
+
+.meta-body {
+  color: #773f33;
+  background: #f8ddd5;
+}
+
+.meta-received {
+  color: #425268;
+  background: #e5eaef;
 }
 
 .request-grid {