From 0e622329a78f95f051137617d3e519273b436996 Mon Sep 17 00:00:00 2001
From: kevin <kevin@lmve.net>
Date: Fri, 7 Aug 2026 19:38:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=A2=91=E9=81=93=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E6=A1=86=E8=A2=AB=E9=81=AE=E6=8C=A1=EF=BC=9Aheader+fi?=
 =?UTF-8?q?lter=20=E5=8C=85=E8=A3=B9=E5=9C=A8=20sticky=20=E5=AE=B9?=
 =?UTF-8?q?=E5=99=A8=E4=B8=AD=E4=B8=80=E8=B5=B7=E5=9B=BA=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 meshmap_frontend/src/components/ChatPanel.vue | 42 ++++++++++---------
 meshmap_frontend/src/style.css                |  2 +-
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/meshmap_frontend/src/components/ChatPanel.vue b/meshmap_frontend/src/components/ChatPanel.vue
index 49ade6c..580d65c 100644
--- a/meshmap_frontend/src/components/ChatPanel.vue
+++ b/meshmap_frontend/src/components/ChatPanel.vue
@@ -186,28 +186,30 @@ onUpdated(() => {
 
 <template>
   <aside ref="panelRef" class="chat-panel panel" @scroll.passive="handleScroll">
-    <div class="panel-header">
-      <div>
-        <p class="eyebrow">Chat</p>
-        <h2>聊天信息</h2>
+    <div class="chat-panel-sticky">
+      <div class="panel-header">
+        <div>
+          <p class="eyebrow">Chat</p>
+          <h2>聊天信息</h2>
+        </div>
+        <span class="badge">{{ groupedMessages.length }}</span>
       </div>
-      <span class="badge">{{ groupedMessages.length }}</span>
-    </div>
 
-    <div class="chat-filter">
-      <input
-        type="search"
-        class="chat-filter-input"
-        :value="channelFilter"
-        placeholder="筛选频道"
-        @input="emit('update:channelFilter', ($event.target as HTMLInputElement).value)"
-      />
-      <button
-        v-if="channelFilter.trim()"
-        type="button"
-        class="chat-filter-clear"
-        @click="emit('update:channelFilter', '')"
-      >清除</button>
+      <div class="chat-filter">
+        <input
+          type="search"
+          class="chat-filter-input"
+          :value="channelFilter"
+          placeholder="筛选频道"
+          @input="emit('update:channelFilter', ($event.target as HTMLInputElement).value)"
+        />
+        <button
+          v-if="channelFilter.trim()"
+          type="button"
+          class="chat-filter-clear"
+          @click="emit('update:channelFilter', '')"
+        >清除</button>
+      </div>
     </div>
 
     <div v-if="loadingOlder" class="chat-loading">正在加载更早消息...</div>
diff --git a/meshmap_frontend/src/style.css b/meshmap_frontend/src/style.css
index 89d98fe..547f446 100644
--- a/meshmap_frontend/src/style.css
+++ b/meshmap_frontend/src/style.css
@@ -299,7 +299,7 @@ h3 {
   overflow-y: auto;
 }
 
-.chat-panel .panel-header {
+.chat-panel-sticky {
   position: sticky;
   z-index: 10;
   top: 0;