From 93eeedfcfa1147da8879a71618ac25ec0e362da1 Mon Sep 17 00:00:00 2001
From: fawney19 <elky0401@gmail.com>
Date: Thu, 11 Dec 2025 21:36:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=99=90=E5=88=B6=E6=95=A3=E7=82=B9?=
 =?UTF-8?q?=E5=9B=BE=E5=9B=BE=E4=BE=8B=E6=98=BE=E7=A4=BA=E6=95=B0=E9=87=8F?=
 =?UTF-8?q?=EF=BC=8C=E9=98=B2=E6=AD=A2=E6=BA=A2=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../usage/components/IntervalTimelineCard.vue | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/usage/components/IntervalTimelineCard.vue b/frontend/src/features/usage/components/IntervalTimelineCard.vue
index 938331a..357dcc0 100644
--- a/frontend/src/features/usage/components/IntervalTimelineCard.vue
+++ b/frontend/src/features/usage/components/IntervalTimelineCard.vue
@@ -2,9 +2,9 @@
   <Card class="p-4">
     <div class="flex items-center justify-between mb-3">
       <p class="text-sm font-semibold">{{ title }}</p>
-      <div v-if="legendItems.length > 0" class="flex items-center gap-2 flex-wrap justify-end text-[11px]">
+      <div v-if="displayLegendItems.length > 0" class="flex items-center gap-2 flex-wrap justify-end text-[11px]">
         <div
-          v-for="item in legendItems"
+          v-for="item in displayLegendItems"
           :key="item.id"
           class="flex items-center gap-1"
         >
@@ -14,6 +14,9 @@
           />
           <span class="text-muted-foreground">{{ item.name }}</span>
         </div>
+        <span v-if="hiddenLegendCount > 0" class="text-muted-foreground">
+          +{{ hiddenLegendCount }} 更多
+        </span>
       </div>
     </div>
     <div v-if="loading" class="h-[160px] flex items-center justify-center">
@@ -92,6 +95,9 @@ const hasMultipleGroups = computed(() => {
   }
 })
 
+// 图例最多显示数量
+const MAX_LEGEND_ITEMS = 6
+
 // 图例项（管理员显示用户，普通用户显示模型）
 const legendItems = computed(() => {
   if (props.isAdmin && timelineData.value?.users) {
@@ -114,6 +120,16 @@ const legendItems = computed(() => {
   return []
 })
 
+// 显示的图例项（限制数量）
+const displayLegendItems = computed(() => {
+  return legendItems.value.slice(0, MAX_LEGEND_ITEMS)
+})
+
+// 隐藏的图例数量
+const hiddenLegendCount = computed(() => {
+  return Math.max(0, legendItems.value.length - MAX_LEGEND_ITEMS)
+})
+
 // 格式化模型名称，使其更简洁
 function formatModelName(model: string): string {
   // 常见的简化规则