新手引导进行到"更新设置"这一步时,目标按钮位于设置页左侧导航列表的 滚动区域内,可能在视口之外。此前引导只读取目标位置、不会滚动过去, 气泡指向屏幕外,玩家看不到"更新"按钮,容易反复点击版本号。 新增 ensureTargetVisible():步骤切换后若目标不在视口内,就平滑滚动 到视口中央,滚动后刷新目标位置让气泡跟随。
This commit is contained in:
1 parent
0f35a5f707
commit
d3a510eee6
1 file changed
+22
@@ -197,6 +197,27 @@ export function useOnboardingTour(
|
|||||||
requestAnimationFrame(updateRect)
|
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) {
|
function goTo(destination: StepDestination) {
|
||||||
if (destination === 'complete') {
|
if (destination === 'complete') {
|
||||||
events.complete()
|
events.complete()
|
||||||
@@ -343,6 +364,7 @@ export function useOnboardingTour(
|
|||||||
await nextTick()
|
await nextTick()
|
||||||
updateBubbleSize()
|
updateBubbleSize()
|
||||||
updateTarget()
|
updateTarget()
|
||||||
|
ensureTargetVisible()
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(mode, () => {
|
watch(mode, () => {
|
||||||
|
|||||||
Reference in new issue
Block a user