fix: 🐛 修复 FloadingPanel 设置 height 不生效的问题 #725
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough该拉取请求对 Changes
Assessment against linked issues
Possibly related PRs
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 (
|
✅ Deploy Preview for wot-design-uni ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![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 (2)
src/uni_modules/wot-design-uni/components/wd-floating-panel/wd-floating-panel.vue (2)
80-80: 建议优化滚动区域的触摸处理！触摸事件的处理逻辑已经改进，但建议考虑以下优化：
- 在滚动区域内容较长时，可能需要更精确地区分拖动面板和滚动内容的手势。
- 考虑添加一个小的阈值来避免意外的高度变化事件触发。
建议添加以下优化：
const handleTouchMove = (event: TouchEvent) => { const target = event.currentTarget as any if (target.dataset.id == 'content') { - if (!props.contentDraggable) return + if (!props.contentDraggable || Math.abs(touch.deltaY.value) < 10) return } touch.touchMove(event) const moveY = touch.deltaY.value + startY updateHeight(-ease(moveY)) }Also applies to: 90-90, 95-98
118-121: 注意观察器的执行顺序！监听逻辑的改进很好，但需要注意以下几点：
props.height的变化会触发heightValue的更新boundary的变化会触发就近锚点的重新计算建议添加适当的条件检查以避免不必要的更新：
watch( () => props.height, (value) => { + if (value === heightValue.value) return heightValue.value = value } )Also applies to: 127-127
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/uni_modules/wot-design-uni/components/wd-floating-panel/wd-floating-panel.vue(4 hunks)src/uni_modules/wot-design-uni/global.d.ts(1 hunks)
🔇 Additional comments (4)
src/uni_modules/wot-design-uni/components/wd-floating-panel/wd-floating-panel.vue (3)
48-49: 代码重构改进了高度值的管理！
新增的 heightValue ref 和 updateHeight 函数很好地解决了高度设置不生效的问题。这种集中式的状态管理方式使代码更加清晰和可维护。
Also applies to: 72-76
65-65: 转换样式现在正确响应高度变化！
在 rootStyle 中使用 heightValue 确保了面板位置能够正确响应高度的更新。
Line range hint 48-127: 验证修复方案的完整性
整体实现很好地解决了 FloatingPanel 高度设置不生效的问题。建议进行以下验证：
- 在不同尺寸的屏幕上测试面板的行为
- 验证多个锚点之间的切换是否平滑
- 确认在快速拖动时不会出现异常
✅ Verification successful
浮动面板组件实现验证完成
根据代码分析结果：
wd-floating-panel组件的实现是独立的，没有其他组件依赖它的高度计算逻辑- 高度计算和过渡动画的实现方式是合理的，使用了
transform: translateY配合cubic-bezier实现平滑过渡 - 组件具有完整的边界处理和阻尼效果，可以很好地处理快速拖动的情况
建议：
- 在
docs/component/floating-panel.md中补充不同尺寸屏幕的适配说明 - 添加多个锚点切换的示例代码
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索其他可能受影响的组件
rg -l "wd-floating-panel" --type vue
# 检查是否有其他组件使用了类似的高度计算逻辑
ast-grep --pattern 'transform: `translateY(calc($$$))`'
Length of output: 122
Script:
#!/bin/bash
# 搜索包含 wd-floating-panel 的文件
rg -l "wd-floating-panel"
# 搜索使用 translateY 的相关代码
rg "transform.*translateY"
# 搜索其他可能使用类似高度计算逻辑的文件
rg "height.*value"
Length of output: 16450
src/uni_modules/wot-design-uni/global.d.ts (1)
94-94: 类型声明添加正确！
WdFloatingPanel 组件的类型声明遵循了以下规范：
- 保持了与其他组件一致的命名规范
- 正确引用了组件的默认导出
- 符合全局组件注册的要求
这个改动将确保 FloatingPanel 组件在 TypeScript 环境下能够被正确识别和使用。
Deploying wot-design-uni with
|
| Latest commit: |
7955045
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://9abcb548.wot-design-uni.pages.dev |
| Branch Preview URL: | https://fix-floating-panel-height.wot-design-uni.pages.dev |
|
什么时候更新到线上用，1.3.14还是不生效 |
✅ Closes: #703
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#703
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
WdFloatingPanel组件，允许在 Vue 应用中全局使用，无需逐个导入。heightValue以改善高度更新的逻辑。改进
updateHeight方法进行一致的管理。