feat: 智能滚动 - 流式回复时可向上查看历史,浮动按钮回到底部
- 流式输出时不再强制锁定底部,用户可自由滚动查看历史 - 滚动离开底部时显示「回到底部」浮动按钮(sticky 定位) - 点击按钮平滑滚动并恢复自动跟踪 - 用户手动滚回底部时自动恢复跟踪 - 发送消息/新建会话时自动重置为跟踪状态 - 首次渲染(加载历史)强制滚到底部
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user