修复频道筛选框被遮挡：header+filter 包裹在 sticky 容器中一起固定

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 class="chat-panel-sticky">
-      <div>
+      <div class="panel-header">
-        <p class="eyebrow">Chat</p>
+        <div>
-        <h2>聊天信息</h2>
+          <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">
+      <div class="chat-filter">
-      <input
+        <input
-        type="search"
+          type="search"
-        class="chat-filter-input"
+          class="chat-filter-input"
-        :value="channelFilter"
+          :value="channelFilter"
-        placeholder="筛选频道"
+          placeholder="筛选频道"
-        @input="emit('update:channelFilter', ($event.target as HTMLInputElement).value)"
+          @input="emit('update:channelFilter', ($event.target as HTMLInputElement).value)"
-      />
+        />
-      <button
+        <button
-        v-if="channelFilter.trim()"
+          v-if="channelFilter.trim()"
-        type="button"
+          type="button"
-        class="chat-filter-clear"
+          class="chat-filter-clear"
-        @click="emit('update:channelFilter', '')"
+          @click="emit('update:channelFilter', '')"
-      >清除</button>
+        >清除</button>
+      </div>
     </div>
 
     <div v-if="loadingOlder" class="chat-loading">正在加载更早消息...</div>

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;