From 8ee50a4aa2d28825576e349a763f77b5c0aa7aa3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=96=87=E5=B3=B0?= <kevin@lmve.net>
Date: Wed, 3 Jun 2026 20:11:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E8=81=8A=E5=A4=A9=E7=AA=97?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 meshmap_frontend/src/App.vue                  | 36 ++++++++++++++-----
 meshmap_frontend/src/components/ChatPanel.vue |  1 -
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/meshmap_frontend/src/App.vue b/meshmap_frontend/src/App.vue
index 3cdcd6b..7e3b228 100644
--- a/meshmap_frontend/src/App.vue
+++ b/meshmap_frontend/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { getHealth, getNodes, getPositions, getTextMessages } from './api'
 import ChatPanel from './components/ChatPanel.vue'
 import MeshMap from './components/MeshMap.vue'
@@ -18,6 +18,7 @@ const nodePageSize = 25
 const nodeTotal = ref(0)
 const messages = ref<TextMessage[]>([])
 const positions = ref<PositionRecord[]>([])
+let refreshTimer: number | undefined
 
 const nodesById = computed<NodeInfoById>(() => {
   const map = new Map<string, NodeInfoMap>()
@@ -46,8 +47,10 @@ const mapNodes = computed<MapNode[]>(() => {
     }))
 })
 
-async function loadNodePage(page: number) {
-  nodePageLoading.value = true
+async function loadNodePage(page: number, showLoading = true) {
+  if (showLoading) {
+    nodePageLoading.value = true
+  }
   try {
     const safePage = Math.max(1, page)
     const response = await getNodes(nodePageSize, (safePage - 1) * nodePageSize)
@@ -57,12 +60,16 @@ async function loadNodePage(page: number) {
   } catch (err) {
     error.value = err instanceof Error ? err.message : String(err)
   } finally {
-    nodePageLoading.value = false
+    if (showLoading) {
+      nodePageLoading.value = false
+    }
   }
 }
 
-async function refresh() {
-  loading.value = true
+async function refresh(showLoading = true) {
+  if (showLoading) {
+    loading.value = true
+  }
   error.value = ''
   try {
     const [healthData, mapNodeData, messageData, positionData] = await Promise.all([
@@ -75,15 +82,26 @@ async function refresh() {
     mapNodeSource.value = mapNodeData.items
     messages.value = messageData.items
     positions.value = positionData.items
-    await loadNodePage(nodePage.value)
+    await loadNodePage(nodePage.value, showLoading)
   } catch (err) {
     error.value = err instanceof Error ? err.message : String(err)
   } finally {
-    loading.value = false
+    if (showLoading) {
+      loading.value = false
+    }
   }
 }
 
-onMounted(refresh)
+onMounted(() => {
+  refresh()
+  refreshTimer = window.setInterval(() => refresh(false), 5000)
+})
+
+onBeforeUnmount(() => {
+  if (refreshTimer !== undefined) {
+    window.clearInterval(refreshTimer)
+  }
+})
 </script>
 
 <template>
diff --git a/meshmap_frontend/src/components/ChatPanel.vue b/meshmap_frontend/src/components/ChatPanel.vue
index 5a67ea1..c62b500 100644
--- a/meshmap_frontend/src/components/ChatPanel.vue
+++ b/meshmap_frontend/src/components/ChatPanel.vue
@@ -45,7 +45,6 @@ function formatTime(value: string): string {
         <small>{{ formatTime(message.created_at) }}</small>
       </span>
       <span class="chat-text">{{ message.text || '[binary]' }}</span>
-      <span class="chat-host">{{ message.mqtt_remote_host || message.topic }}</span>
     </button>
   </aside>
 </template>