From abdc4f39cb6c5a0b614f7cb0bf1012d3ae46e6b7 Mon Sep 17 00:00:00 2001
From: IanShaw027 <131567472+IanShaw027@users.noreply.github.com>
Date: Sun, 11 Jan 2026 15:30:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(ops):=20=E6=81=A2=E5=A4=8D=E4=BB=AA?=
 =?UTF-8?q?=E8=A1=A8=E7=9B=98=E8=84=89=E6=90=8F=E5=8A=A8=E7=94=BB=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将静态QPS历史折线图替换为动画脉搏线
- 使用SVG animate元素实现心跳效果（2秒循环动画）
- 增强流量可视化：通过脉冲跳动直观展示流量"活跃"状态
- 恢复重构前的视觉效果与用户体验
---
 .../ops/components/OpsDashboardHeader.vue     | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue b/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
index 35eeb59c..05b711d4 100644
--- a/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
+++ b/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
@@ -228,12 +228,14 @@ const durationP95Ms = computed(() => overview.value?.duration?.p95_ms ?? null)
 const durationP90Ms = computed(() => overview.value?.duration?.p90_ms ?? null)
 const durationP50Ms = computed(() => overview.value?.duration?.p50_ms ?? null)
 const durationAvgMs = computed(() => overview.value?.duration?.avg_ms ?? null)
+const durationMaxMs = computed(() => overview.value?.duration?.max_ms ?? null)
 
 const ttftP99Ms = computed(() => overview.value?.ttft?.p99_ms ?? null)
 const ttftP95Ms = computed(() => overview.value?.ttft?.p95_ms ?? null)
 const ttftP90Ms = computed(() => overview.value?.ttft?.p90_ms ?? null)
 const ttftP50Ms = computed(() => overview.value?.ttft?.p50_ms ?? null)
 const ttftAvgMs = computed(() => overview.value?.ttft?.avg_ms ?? null)
+const ttftMaxMs = computed(() => overview.value?.ttft?.max_ms ?? null)
 
 // --- WebSocket status ---
 
@@ -883,24 +885,37 @@ function openJobsDetails() {
                 </div>
               </div>
 
-              <!-- Average QPS/TPS -->
+              <!-- Average QPS/TPS with Animated Pulse Line -->
               <div class="col-span-2">
-                <!-- Sparkline -->
-                <svg v-if="qpsHistory.length > 1" class="mb-2 h-8 w-full" viewBox="0 0 200 32" preserveAspectRatio="none">
-                  <polyline
-                    :points="qpsHistory.map((v, i) => `${(i / (qpsHistory.length - 1)) * 200},${32 - (v / Math.max(...qpsHistory, 1)) * 28}`).join(' ')"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    class="text-blue-500"
-                  />
-                </svg>
                 <div class="text-[10px] font-bold uppercase text-gray-400">{{ t('admin.ops.average') }}</div>
                 <div class="mt-1 flex items-center gap-4 text-sm font-medium text-gray-600 dark:text-gray-400">
                   <span>QPS: <span class="font-bold">{{ qpsAvgLabel }}</span></span>
                   <span class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-600"></span>
                   <span>TPS: <span class="font-bold">{{ tpsAvgLabel }}</span></span>
                 </div>
+
+                <!-- Animated Pulse Line (Heart Beat Animation) -->
+                <div class="mt-2 h-8 w-full overflow-hidden opacity-50">
+                  <svg class="h-full w-full" viewBox="0 0 280 32" preserveAspectRatio="none">
+                    <path
+                      d="M0 16 Q 20 16, 40 16 T 80 16 T 120 10 T 160 22 T 200 16 T 240 16 T 280 16"
+                      fill="none"
+                      stroke="#3b82f6"
+                      stroke-width="2"
+                      vector-effect="non-scaling-stroke"
+                    >
+                      <animate
+                        attributeName="d"
+                        dur="2s"
+                        repeatCount="indefinite"
+                        values="M0 16 Q 20 16, 40 16 T 80 16 T 120 10 T 160 22 T 200 16 T 240 16 T 280 16;
+                                M0 16 Q 20 16, 40 16 T 80 16 T 120 16 T 160 16 T 200 10 T 240 22 T 280 16;
+                                M0 16 Q 20 16, 40 16 T 80 16 T 120 16 T 160 16 T 200 16 T 240 16 T 280 16"
+                        keyTimes="0;0.5;1"
+                      />
+                    </path>
+                  </svg>
+                </div>
               </div>
             </div>
           </div>