feat: 优化消息列表样式,增加内容存在时的底部填充,改善滚动体验

This commit is contained in:
jxxghp
2026-06-17 08:31:23 +08:00
parent ce12d04648
commit 0c56cf0be7
+18 -2
View File
@@ -992,6 +992,7 @@ onScopeDispose(() => {
ref="messageListRef" ref="messageListRef"
tag="main" tag="main"
class="agent-assistant-messages" class="agent-assistant-messages"
:class="{ 'agent-assistant-messages--has-content': hasMessages }"
:options="{ wheelPropagation: false }" :options="{ wheelPropagation: false }"
> >
<div v-if="!hasMessages" class="agent-assistant-empty"> <div v-if="!hasMessages" class="agent-assistant-empty">
@@ -1428,14 +1429,25 @@ onScopeDispose(() => {
} }
.agent-assistant-messages { .agent-assistant-messages {
box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-block-size: 0; min-block-size: 0;
overflow-y: auto; overflow-y: auto;
overscroll-behavior: contain; overscroll-behavior: contain;
padding-block: 1rem calc(env(safe-area-inset-bottom, 0px) + 6rem); padding-block: 1rem;
padding-inline: 1rem; padding-inline: 1rem;
scrollbar-width: thin; scrollbar-width: thin;
:deep(.ps__rail-x),
:deep(.ps__rail-y) {
display: none !important;
}
}
/* 只有消息态预留输入框空间,避免 iOS 空态被 padding 撑出不可滚动的滚动条。 */
.agent-assistant-messages--has-content {
padding-block-end: calc(env(safe-area-inset-bottom, 0px) + 6rem);
} }
.agent-assistant-empty { .agent-assistant-empty {
@@ -1977,10 +1989,14 @@ onScopeDispose(() => {
} }
.agent-assistant-messages { .agent-assistant-messages {
padding-block: 0.85rem calc(env(safe-area-inset-bottom, 0px) + 11.8rem); padding-block: 0.85rem;
padding-inline: 0.85rem; padding-inline: 0.85rem;
} }
.agent-assistant-messages--has-content {
padding-block-end: calc(env(safe-area-inset-bottom, 0px) + 11.8rem);
}
.agent-assistant-composer { .agent-assistant-composer {
inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 0.7rem); inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 0.7rem);
inset-inline: 0.85rem; inset-inline: 0.85rem;