perf(frontend): 优化图表更新链路与缓存监控倒计时开销

- 收敛 LineChart 的配置构建逻辑，复用 options 生成函数
- 将 LineChart 的 data/options 监听从深监听改为引用监听
- 统一使用 chart.update('none')，减少不必要的动画与重绘

- 为 ScatterChart 新增 prepareRenderData 流程，合并间隙压缩与点位转换
- 消除 createChart/updateChart 中重复的数据预处理逻辑
- 将散点图更新改为监听 data、compressGaps、gapThreshold、compressedGapSize
- 移除 compressGaps 切换时的 destroy + recreate 路径，改为原图更新
- 将散点图 options 更新改为无动画刷新，降低全量重算成本

- 为缓存监控页新增 nextExpireAt 状态，跟踪最近过期时间
- 在拉取 affinity 列表后立即按当前时间裁剪已过期数据
- 将每秒全表 filter 改为按最近过期时间触发清理
- 页面恢复可见时先补执行过期清理，再恢复倒计时
- 保留每秒 currentTime 更新，仅用于倒计时显示，降低常驻扫描开销

frontend/src/views/admin/CacheMonitoring.vue

@@ -49,6 +49,7 @@ const currentPage = ref(1)
 const pageSize = ref(20)
 const currentTime = ref(Math.floor(Date.now() / 1000))
 const isPageVisible = ref(typeof document === 'undefined' ? true : !document.hidden)
+const nextExpireAt = ref<number | null>(null)
 
 // ==================== 模型映射缓存 ====================
 
@@ -121,6 +122,8 @@ async function fetchAffinityList(keyword?: string) {
     const response = await cacheApi.listAffinities(keyword)
     affinityList.value = response.items
     matchedUserId.value = response.matched_user_id ?? null
+    currentTime.value = Math.floor(Date.now() / 1000)
+    pruneExpiredAffinities(currentTime.value, true)
 
     if (keyword && response.total === 0) {
       showInfo('未找到匹配的缓存记录')
@@ -238,6 +241,38 @@ function handlePageChange() {
   window.scrollTo({ top: 0, behavior: 'smooth' })
 }
 
+function recalculateNextExpireAt(now: number = currentTime.value) {
+  let nearestExpireAt: number | null = null
+
+  for (const item of affinityList.value) {
+    if (!item.expire_at || item.expire_at <= now) continue
+    if (nearestExpireAt === null || item.expire_at < nearestExpireAt) {
+      nearestExpireAt = item.expire_at
+    }
+  }
+
+  nextExpireAt.value = nearestExpireAt
+}
+
+function pruneExpiredAffinities(now: number, silent = false) {
+  const beforeCount = affinityList.value.length
+  const activeItems = affinityList.value.filter(
+    item => item.expire_at && item.expire_at > now
+  )
+
+  if (activeItems.length === beforeCount) {
+    recalculateNextExpireAt(now)
+    return
+  }
+
+  affinityList.value = activeItems
+  recalculateNextExpireAt(now)
+
+  if (!silent) {
+    showInfo(`${beforeCount - activeItems.length} 个缓存已自动过期移除`)
+  }
+}
+
 // ==================== 定时器管理 ====================
 
 function startCountdown() {
@@ -247,14 +282,8 @@ function startCountdown() {
   countdownTimer = setInterval(() => {
     currentTime.value = Math.floor(Date.now() / 1000)
 
-    const beforeCount = affinityList.value.length
-    affinityList.value = affinityList.value.filter(
-      item => item.expire_at && item.expire_at > currentTime.value
-    )
-
-    if (beforeCount > affinityList.value.length) {
-      const removedCount = beforeCount - affinityList.value.length
-      showInfo(`${removedCount} 个缓存已自动过期移除`)
+    if (nextExpireAt.value !== null && currentTime.value >= nextExpireAt.value) {
+      pruneExpiredAffinities(currentTime.value)
     }
   }, 1000)
 }
@@ -273,6 +302,9 @@ function handleVisibilityChange() {
     return
   }
   currentTime.value = Math.floor(Date.now() / 1000)
+  if (nextExpireAt.value !== null && currentTime.value >= nextExpireAt.value) {
+    pruneExpiredAffinities(currentTime.value)
+  }
   startCountdown()
 }