From 3a34fbdfd814e0902ae199c0236c99fd4971695b Mon Sep 17 00:00:00 2001
From: Fam Zheng <fam@euphon.net>
Date: Sun, 17 May 2026 22:08:42 +0100
Subject: [PATCH] =?UTF-8?q?notes(ui):=20polling=20=E9=9D=99=E9=BB=98=20ref?=
 =?UTF-8?q?resh=20+=20=E5=A2=9E=E9=87=8F=E6=9B=B4=E6=96=B0=20list/selected?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=8D=E5=86=8D=E9=97=AA=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/notes/frontend/src/App.vue | 35 +++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/apps/notes/frontend/src/App.vue b/apps/notes/frontend/src/App.vue
index aa46993..7859c95 100644
--- a/apps/notes/frontend/src/App.vue
+++ b/apps/notes/frontend/src/App.vue
@@ -235,16 +235,39 @@ function logout() {
   stopPoll()
 }
 
-async function refresh() {
-  loading.value = true
-  try { list.value = await listRecordings() }
+async function refresh(silent = false) {
+  if (!silent) loading.value = true
+  try {
+    const fresh = await listRecordings()
+    // 增量更新：尽量复用已有 ref，避免整 array 替换导致闪动
+    if (!list.value.length) {
+      list.value = fresh
+    } else {
+      const byId = new Map(list.value.map(r => [r.id, r]))
+      list.value = fresh.map(r => {
+        const old = byId.get(r.id)
+        if (old) {
+          Object.assign(old, r)
+          return old
+        }
+        return r
+      })
+    }
+  }
   catch (e) {
     if (e.unauthorized) { logout(); return }
   }
-  finally { loading.value = false }
+  finally { if (!silent) loading.value = false }
   // 同步当前选中
   if (selectedId.value) {
-    try { selected.value = await getRecording(selectedId.value) } catch {}
+    try {
+      const fresh = await getRecording(selectedId.value)
+      if (selected.value) {
+        Object.assign(selected.value, fresh)
+      } else {
+        selected.value = fresh
+      }
+    } catch {}
   }
 }
 
@@ -336,7 +359,7 @@ function mdLite(s) {
 
 function startPoll() {
   stopPoll()
-  pollTimer = setInterval(refresh, 5000)
+  pollTimer = setInterval(() => refresh(true), 5000)
 }
 function stopPoll() {
   if (pollTimer) { clearInterval(pollTimer); pollTimer = null }