From d2b5832df398c7449cfae36cc24c5be5fba0d3ce Mon Sep 17 00:00:00 2001
From: kevin <kevin@lmve.net>
Date: Fri, 7 Aug 2026 19:31:33 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=91=E9=81=93=E7=AD=9B=E9=80=89=E6=A1=86?=
 =?UTF-8?q?=E4=BB=8E=20topbar=20=E7=A7=BB=E8=87=B3=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=86=85=EF=BC=8CChatPanel=20v-model:channel?=
 =?UTF-8?q?Filter=20=E5=8F=8C=E5=90=91=E7=BB=91=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 meshmap_frontend/src/App.vue                  | 15 +-----
 meshmap_frontend/src/components/ChatPanel.vue | 18 +++++++
 meshmap_frontend/src/style.css                | 47 +++++++++++++++++++
 3 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/meshmap_frontend/src/App.vue b/meshmap_frontend/src/App.vue
index 533ea45..0ef26f8 100644
--- a/meshmap_frontend/src/App.vue
+++ b/meshmap_frontend/src/App.vue
@@ -757,20 +757,6 @@ onBeforeUnmount(() => {
               @click="nodeFilter = ''"
             >清除</button>
           </div>
-          <div class="topbar-filter">
-            <input
-              type="search"
-              class="topbar-filter-input"
-              v-model="channelFilter"
-              placeholder="筛选频道"
-            />
-            <button
-              v-if="normalizedChannelFilter"
-              type="button"
-              class="topbar-filter-clear"
-              @click="channelFilter = ''"
-            >清除</button>
-          </div>
           <a class="topbar-link" href="/signed">签到列表</a>
           <a class="topbar-link" href="/help">使用帮助</a>
           <a class="topbar-link" href="/admin">管理</a>
@@ -824,6 +810,7 @@ onBeforeUnmount(() => {
 
       <section class="workspace">
         <ChatPanel
+          v-model:channelFilter="channelFilter"
           :messages="filteredMessages"
           :nodes-by-id="nodesById"
           :selected-node-id="selectedNodeId"
diff --git a/meshmap_frontend/src/components/ChatPanel.vue b/meshmap_frontend/src/components/ChatPanel.vue
index 4db96d3..49ade6c 100644
--- a/meshmap_frontend/src/components/ChatPanel.vue
+++ b/meshmap_frontend/src/components/ChatPanel.vue
@@ -9,6 +9,7 @@ const props = defineProps<{
   loadingOlder: boolean
   hasMoreMessages: boolean
   isAdmin: boolean
+  channelFilter: string
 }>()
 
 type GroupedTextMessage = TextMessage & { mergedCount: number; mergedMessages: TextMessage[] }
@@ -18,6 +19,7 @@ const emit = defineEmits<{
   'load-older': []
   'delete-message': [message: GroupedTextMessage]
   'delete-and-block-node': [payload: { nodeId: string; nodeNum: number | null; message: GroupedTextMessage }]
+  'update:channelFilter': [value: string]
 }>()
 
 const panelRef = ref<HTMLElement | null>(null)
@@ -192,6 +194,22 @@ onUpdated(() => {
       <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>
+
     <div v-if="loadingOlder" class="chat-loading">正在加载更早消息...</div>
     <div v-else-if="!hasMoreMessages && messages.length > 0" class="chat-end">没有更多历史消息</div>
     <div v-if="messages.length === 0" class="empty">暂无聊天消息</div>
diff --git a/meshmap_frontend/src/style.css b/meshmap_frontend/src/style.css
index 66fc55c..bb495be 100644
--- a/meshmap_frontend/src/style.css
+++ b/meshmap_frontend/src/style.css
@@ -358,6 +358,53 @@ h3 {
   background: var(--color-primary-soft);
 }
 
+.chat-filter {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-surface-soft);
+  position: sticky;
+  z-index: 9;
+  top: 53px;
+}
+
+.chat-filter-input {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  padding: 6px 10px;
+  color: var(--color-heading);
+  background: var(--color-surface);
+  outline: none;
+  font-size: 13px;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.chat-filter-input:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
+}
+
+.chat-filter-clear {
+  flex-shrink: 0;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  padding: 5px 10px;
+  color: var(--color-heading);
+  background: var(--color-surface);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.chat-filter-clear:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary-hover);
+  background: var(--color-primary-soft);
+}
+
 .chat-item {
   display: grid;
   gap: 6px;