新手引导进行到"更新设置"这一步时,目标按钮位于设置页左侧导航列表的 滚动区域内,可能在视口之外。此前引导只读取目标位置、不会滚动过去, 气泡指向屏幕外,玩家看不到"更新"按钮,容易反复点击版本号。 新增 ensureTargetVisible():步骤切换后若目标不在视口内,就平滑滚动 到视口中央,滚动后刷新目标位置让气泡跟随。
This commit is contained in:
1 parent
0f35a5f707
commit
d3a510eee6
1 file changed
+22
@@ -197,6 +197,27 @@ export function useOnboardingTour(
|
||||
requestAnimationFrame(updateRect)
|
||||
}
|
||||
|
||||
// Bring the current step target into view when the tour jumps to a step
|
||||
// whose target lives inside a scrollable container (e.g. the settings
|
||||
// sidebar). Without this the bubble can point at an off-screen element.
|
||||
function ensureTargetVisible() {
|
||||
const target = targetElement.value
|
||||
if (!target) return
|
||||
const rect = target.getBoundingClientRect()
|
||||
const outOfView =
|
||||
rect.top < 0 ||
|
||||
rect.left < 0 ||
|
||||
rect.bottom > window.innerHeight ||
|
||||
rect.right > window.innerWidth
|
||||
if (!outOfView) return
|
||||
target.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' })
|
||||
requestAnimationFrame(() => {
|
||||
if (targetElement.value === target) {
|
||||
targetRect.value = target.getBoundingClientRect()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function goTo(destination: StepDestination) {
|
||||
if (destination === 'complete') {
|
||||
events.complete()
|
||||
@@ -343,6 +364,7 @@ export function useOnboardingTour(
|
||||
await nextTick()
|
||||
updateBubbleSize()
|
||||
updateTarget()
|
||||
ensureTargetVisible()
|
||||
})
|
||||
|
||||
watch(mode, () => {
|
||||
|
||||
Reference in new issue
Block a user