fix(overlay): tour position offset in tour.taro #2631
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## next #2631 +/- ##
=======================================
Coverage 83.88% 83.88%
=======================================
Files 218 218
Lines 17888 17888
Branches 2609 2609
=======================================
Hits 15006 15006
Misses 2877 2877
Partials 5 5 ☔ View full report in Codecov by Sentry. |
Walkthrough此次更改主要涉及对 Changes
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
💤 Files with no reviewable changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- src/packages/overlay/overlay.scss (0 hunks)
- src/packages/tour/tour.taro.tsx (1 hunks)
💤 Files with no reviewable changes (1)
- src/packages/overlay/overlay.scss
🧰 Additional context used
src/packages/tour/tour.taro.tsx
Outdated
| if (visible) { | ||
| setTimeout(() => { | ||
| getRootPosition() | ||
| }) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
使用 setTimeout 可能会影响性能和用户体验
将 getRootPosition() 包装在 setTimeout 中可以确保在计算根位置之前组件的可见性状态更新已完全处理。然而，这种方法也有一些潜在的问题：
- 引入了不必要的延迟，可能会影响用户体验。
- 没有指定超时时间，可能导致不一致的行为。
- 缺少错误处理机制。
建议考虑以下改进：
- 使用
requestAnimationFrame代替setTimeout，以确保在下一次重绘之前执行。 - 添加错误处理和超时机制。
- 考虑使用 React 的
useLayoutEffect钩子，它会在所有 DOM 变化之后同步触发。
示例改进：
useEffect(() => {
setActive(0)
setShowTour(visible)
setShowPopup(visible)
if (visible) {
const rafId = requestAnimationFrame(() => {
try {
getRootPosition()
} catch (error) {
console.error('Failed to get root position:', error)
}
})
return () => cancelAnimationFrame(rafId)
}
}, [visible])这个方案可以在保持原有功能的同时，提高性能和可靠性。
* fix(overlay): move in taro * chore: save * chore: save * chore: save
官网Tour.taro的demo:
🤔 这个变动的性质是？
Summary by CodeRabbit
Summary by CodeRabbit
.nut-overlay和.nut-overflow-hidden类的样式规则，优化了溢出处理。Tour组件的可见性处理逻辑，提升了位置计算的准确性。