From d488f809d5047fcdaa4f4261164641771b458c2d Mon Sep 17 00:00:00 2001
From: AAEE86 <ppk0227@hotmail.com>
Date: Sun, 11 Jan 2026 19:26:50 +0800
Subject: [PATCH] feat(ui): add horizontal scrolling to request timeline

---
 .../components/HorizontalRequestTimeline.vue  | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/usage/components/HorizontalRequestTimeline.vue b/frontend/src/features/usage/components/HorizontalRequestTimeline.vue
index cd77a76..1ce7324 100644
--- a/frontend/src/features/usage/components/HorizontalRequestTimeline.vue
+++ b/frontend/src/features/usage/components/HorizontalRequestTimeline.vue
@@ -749,9 +749,33 @@ const getStatusColorClass = (status: string) => {
 .minimal-track {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 0;
-  padding: 2rem 0 2rem;
+  justify-content: flex-start;
+  gap: 64px;
+  padding: 2rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  /* 优化滚动体验 */
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: hsl(var(--border)) transparent;
+}
+
+/* Webkit 滚动条样式 */
+.minimal-track::-webkit-scrollbar {
+  height: 6px;
+}
+
+.minimal-track::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.minimal-track::-webkit-scrollbar-thumb {
+  background: hsl(var(--border));
+  border-radius: 3px;
+}
+
+.minimal-track::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
 }
 
 .minimal-node-group {
@@ -931,6 +955,7 @@ const getStatusColorClass = (status: string) => {
 .node-dot.status-available { color: #d1d5db; }
 
 .node-line {
+  position: absolute;
   width: 64px;
   height: 2px;
   background: hsl(var(--border));