2 Commits
Author SHA1 Message Date
WorkBuddy 77ecb078a3 fix(admin): 日志页改为保持倒序,打开自动定位到顶部(最新)
按用户预期调整方案:列表保持最新在最上面(后端倒序),打开页面/
自动刷新时 scrollTop=0 定位顶部;向下滚动回看历史时暂停定位,
拉回顶部即恢复。替代上一版的时间正序+贴底方案。
2026-09-22 15:39:19 +08:00
WorkBuddy 51fbc1828e fix(admin): 日志页默认定位到最新而非最早
渲染顺序(最新在前)与滚动逻辑假设(正序+贴底=最新)相互矛盾:
自动刷新(默认开启)每 10s 强制贴底,而底部恰好是最早的日志,
用户打开页面被钉在最旧的一条上。

改为渲染时间正序(旧→新),与贴底滚动/上滚暂停跟随的 tail -f
行为一致:打开页面即定位最新。
2026-09-22 15:35:59 +08:00
+8 -7
View File
@@ -53,20 +53,21 @@ export default function LogsPage() {
}, [load]) }, [load])
const scrollRef = useRef<HTMLDivElement>(null) const scrollRef = useRef<HTMLDivElement>(null)
const userScrolledUp = useRef(false) const userScrolledDown = useRef(false)
// 检测用户是否向滚动 // 检测用户是否向滚动回看历史(旧日志在下方)
const handleScroll = () => { const handleScroll = () => {
const el = scrollRef.current const el = scrollRef.current
if (!el) return if (!el) return
const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 50 const atTop = el.scrollTop < 50
userScrolledUp.current = !atBottom userScrolledDown.current = !atTop
} }
// 加载后自动滚动到底部(仅当用户未向上滚动时) // 列表最新在最上面(后端倒序返回);打开页面/自动刷新时定位到顶部=最新。
// 用户向下滚动回看历史时暂停定位,拉回顶部即恢复。
useEffect(() => { useEffect(() => {
if (autoRefresh && !userScrolledUp.current && scrollRef.current) { if (autoRefresh && !userScrolledDown.current && scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight scrollRef.current.scrollTop = 0
} }
}, [entries, autoRefresh]) }, [entries, autoRefresh])