From 95b518a1392b46e85bc658ef5fad476af40797b8 Mon Sep 17 00:00:00 2001
From: shirainbown <shirainbown@gmail.com>
Date: Fri, 19 Jun 2026 18:27:00 +0800
Subject: [PATCH] feat: add SSH sync expiration indicator (30min threshold)

- Add isSSHExpired() function to detect stale SSH sync data (>30min)
- Show red warning icon next to sync time when data is expired
- Expired sync time text turns red for visibility
- Only applies to machines with ssh_synced_at data
---
 web/src/views/MachineList.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/web/src/views/MachineList.vue b/web/src/views/MachineList.vue
index e9926a6..cb6a11e 100644
--- a/web/src/views/MachineList.vue
+++ b/web/src/views/MachineList.vue
@@ -155,9 +155,10 @@
               </el-tag>
               <span v-if="m.listen_ports.split(',').length > 4" class="more-ports">+{{ m.listen_ports.split(',').length - 4 }}</span>
             </div>
-            <div v-if="m.ssh_synced_at" class="sync-time">
+            <div v-if="m.ssh_synced_at" class="sync-time" :class="{ expired: isSSHExpired(m.ssh_synced_at) }">
               <el-icon :size="10"><Clock /></el-icon>
               同步于 {{ formatTime(m.ssh_synced_at) }}
+              <el-icon v-if="isSSHExpired(m.ssh_synced_at)" :size="10" class="expired-icon"><Warning /></el-icon>
             </div>
           </div>
         </div>
@@ -555,6 +556,13 @@ function formatTime(t) {
   return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
 }
 
+function isSSHExpired(t) {
+  if (!t) return true
+  const d = new Date(t)
+  if (isNaN(d.getTime())) return true
+  return (Date.now() - d.getTime()) > 30 * 60 * 1000
+}
+
 async function handleStartVM(m, event) {
   event.stopPropagation()
   try {
@@ -1012,4 +1020,11 @@ async function handleStopVM(m, event) {
   align-items: center;
   gap: 4px;
 }
+.sync-time.expired {
+  color: var(--danger-color, #f56c6c);
+}
+.expired-icon {
+  color: var(--danger-color, #f56c6c);
+  margin-left: 2px;
+}
 </style>