fix: 修改小程序下自动吸边计算逻辑&&解决部分小程序写法不支持问题 #2855
Conversation
Walkthrough本次更改涉及三个文件的修改。首先，在 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## next #2855 +/- ##
=======================================
Coverage 84.02% 84.02%
=======================================
Files 220 220
Lines 17907 17907
Branches 2625 2625
=======================================
Hits 15046 15046
Misses 2856 2856
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
src/packages/drag/demos/taro/demo4.tsx (1)
14-14: 建议对魔法数字进行说明
559这个魔法数字的计算来源不够清晰，建议：
- 添加注释说明这个数值的计算方式
- 考虑将其抽取为一个具有描述性名称的常量
- 或者保留原始计算逻辑，使其更容易理解和维护
+ // 559 = 501(内容高度) + 57(底部间距) + 1(边框) return windowHeight - 559src/packages/drag/drag.taro.tsx (2)
69-74: 优化：使用解构赋值提高代码可读性解构赋值的使用使代码更加清晰，但建议：
- 考虑将类型定义提取出来
- 添加空值检查以提高代码健壮性
const { width, height, top: dragTop, left: dragLeft, - } = await getRectByTaro(dragRef.current) + } = await getRectByTaro(dragRef.current) || {} + + if (!width || !height) { + return + }
83-84: 建议：添加中线计算的注释说明
middleLine的计算逻辑较为复杂，建议：
- 添加注释说明计算公式的含义
- 考虑将计算逻辑抽取为独立函数
+ // 计算屏幕中线位置，用于吸附效果 + const calculateMiddleLine = (screenWidth: number, width: number, dragLeft: number) => { + return screenWidth - width - dragLeft - (screenWidth - width) / 2 + } - middleLine.current = - screenWidth - width - dragLeft - (screenWidth - width) / 2 + middleLine.current = calculateMiddleLine(screenWidth, width, dragLeft)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
src/packages/drag/demos/taro/demo4.tsx(1 hunks)src/packages/drag/drag.scss(1 hunks)src/packages/drag/drag.taro.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/packages/drag/drag.scss
🔇 Additional comments (1)
src/packages/drag/drag.taro.tsx (1)
76-81: 检查：边界计算逻辑的准确性
新的边界计算逻辑看起来更加直观，但需要注意：
- 确保
Math.ceil的使用不会导致边界计算误差 - 验证在不同屏幕尺寸下的表现
✅ Verification successful
边界计算逻辑验证完成，使用 Math.ceil 是合理的
根据代码分析，当前的边界计算逻辑是安全的：
- 使用
Math.ceil向上取整可以确保不会出现小数像素，避免渲染问题 - 边界计算考虑了屏幕尺寸、拖拽元素尺寸和偏移量，逻辑完整
- 测试用例验证了拖拽功能的基本行为
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否有其他组件使用类似的边界计算逻辑
rg -l "Math\.ceil.*width|height" --type tsx
Length of output: 73
Script:
#!/bin/bash
# 检查是否有其他组件使用类似的边界计算逻辑，使用正确的文件扩展名
rg -l "Math\.ceil.*width|height" --type ts --type tsx --type jsx --type js
Length of output: 104
Script:
#!/bin/bash
# 查看当前文件的完整实现以了解边界计算的上下文
cat src/packages/drag/drag.taro.tsx
Length of output: 4814
Script:
#!/bin/bash
# 搜索其他可能的边界计算相关代码
rg "setBoundaryState|boundaryState" --type ts --type tsx --type jsx --type js -A 3
Length of output: 112
Script:
#!/bin/bash
# 使用更通用的文件搜索方式
fd -e tsx -e ts -e jsx -e js -x rg "Math\.ceil.*width|height" {}
Length of output: 33643
Script:
#!/bin/bash
# 使用更通用的方式搜索边界计算
fd -e tsx -e ts -e jsx -e js -x rg "setBoundaryState|boundaryState" -A 3 {}
Length of output: 1746
Script:
#!/bin/bash
# 查找可能的测试文件
fd -e test.tsx -e test.ts -e spec.tsx -e spec.ts
Length of output: 4350
Script:
#!/bin/bash
# 检查拖拽组件的测试文件
cat src/packages/drag/__test__/drag.spec.tsx
Length of output: 1794
Script:
#!/bin/bash
# 检查是否有其他使用 Math.ceil 进行边界计算的文件
fd . -t f -e tsx -e ts -e jsx -e js -x rg "Math\.ceil.*\s*-\s*\w+\s*[+-]" {}
Length of output: 80
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
src/packages/drag/demos/taro/demo4.tsx (1)
14-14: 建议使用命名常量来提高代码可维护性当前的计算方式使用了魔法数字 559，这降低了代码的可读性和可维护性。建议将这个值拆分为有意义的命名常量。
+const HEADER_HEIGHT = 501; +const FOOTER_HEIGHT = 58; const bottom = () => { - return windowHeight - 559 + return windowHeight - (HEADER_HEIGHT + FOOTER_HEIGHT) }src/packages/drag/drag.taro.tsx (2)
83-84: 优化 middleLine 计算逻辑中线计算逻辑已经简化，但仍然可能需要考虑设备适配问题。建议添加注释说明计算原理，并考虑在不同设备上的兼容性。
middleLine.current = - screenWidth - width - dragLeft - (screenWidth - width) / 2 + // 计算中线位置：考虑元素宽度和屏幕宽度，确保在不同设备上的自动吸边效果一致 + screenWidth - width - dragLeft - (screenWidth - width) / 2
Line range hint
1-84: 建议优化性能和代码结构
性能优化建议：
- 考虑使用
useMemo缓存计算结果- 可以将边界计算逻辑抽离为独立的 hook
代码结构建议：
- 将类型定义移至单独的类型文件
- 考虑将边界计算逻辑抽象为可复用的工具函数
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
src/packages/drag/demos/taro/demo4.tsx(1 hunks)src/packages/drag/drag.scss(1 hunks)src/packages/drag/drag.taro.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/packages/drag/drag.scss
🔇 Additional comments (2)
src/packages/drag/drag.taro.tsx (2)
69-74: 使用 getRectByTaro 简化了元素尺寸获取逻辑
代码改进通过使用 getRectByTaro 替代了 createSelectorQuery，使得获取元素尺寸的逻辑更加直接和清晰。
76-81: 建议验证边界计算的准确性
新的边界计算逻辑涉及多个数学运算和屏幕尺寸参数，建议添加单元测试以确保计算的准确性。特别是在不同屏幕尺寸和设备像素比的设备上进行验证。
#1945 #2548
fix: 修改小程序下自动吸边计算逻辑
fix: 解决部分小程序写法不支持问题
fix: 优化限制拖拽demo异常显示问题
Summary by CodeRabbit
新功能
样式
.nut-drag-inner类中添加了touch-action: none;属性，以防止触摸手势触发默认行为。改进
Drag组件中获取元素尺寸的逻辑，简化了状态更新方法。