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

This commit is contained in:
2026-08-07 19:38:00 +08:00
parent c107f6d6af
commit 0e622329a7
2 changed files with 23 additions and 21 deletions
+22 -20
View File
@@ -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>
+1 -1
View File
@@ -299,7 +299,7 @@ h3 {
overflow-y: auto;
}
.chat-panel .panel-header {
.chat-panel-sticky {
position: sticky;
z-index: 10;
top: 0;