feat: 智能滚动 - 流式回复时可向上查看历史,浮动按钮回到底部

- 流式输出时不再强制锁定底部,用户可自由滚动查看历史
- 滚动离开底部时显示「回到底部」浮动按钮(sticky 定位)
- 点击按钮平滑滚动并恢复自动跟踪
- 用户手动滚回底部时自动恢复跟踪
- 发送消息/新建会话时自动重置为跟踪状态
- 首次渲染(加载历史)强制滚到底部
This commit is contained in:
Metona
2026-04-04 21:41:26 +08:00
parent d61764a5e9
commit 12843f09a5
5 changed files with 105 additions and 4 deletions
+52
View File
@@ -498,6 +498,58 @@ body::before {
border-radius: 3px;
}
/* ── 回到底部浮动按钮 ── */
.scroll-to-bottom {
position: sticky;
bottom: 16px;
float: right;
margin-right: 4px;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: 1px solid rgba(0, 245, 212, 0.3);
background: rgba(10, 10, 26, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 24px;
color: var(--accent-cyan);
font-size: 12px;
font-weight: 600;
cursor: pointer;
z-index: 5;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 245, 212, 0.15);
transition: all 0.25s ease;
animation: scrollBtnIn 0.25s ease;
}
.scroll-to-bottom:hover {
background: rgba(0, 245, 212, 0.12);
border-color: var(--accent-cyan);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 245, 212, 0.25);
transform: translateY(-2px);
}
.scroll-to-bottom:active {
transform: translateY(0);
}
.scroll-to-bottom svg {
width: 16px;
height: 16px;
animation: bounceDown 1.5s ease-in-out infinite;
}
@keyframes scrollBtnIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bounceDown {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
/* ── 空状态 ── */
.empty-state {
display: flex;