feat: ✨ 使用Transition重构Popup为center类型的Popup添加zoom-in动画 #699
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Caution Review failedThe pull request is closed. Walkthrough本次变更主要涉及对 Changes
Assessment against linked issues
Possibly related PRs
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. |
Deploying wot-design-uni with
|
| Latest commit: |
4382f2c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://7fec6b0d.wot-design-uni.pages.dev |
| Branch Preview URL: | https://feature-popup-center-transit.wot-design-uni.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Outside diff range and nitpick comments (13)
src/App.vue (1)
1-9: 文件头注释需要完善文件头注释缺少具体的描述信息，建议添加组件的用途、功能说明等内容。另外，文件路径使用了硬编码的 Windows 格式（使用反斜杠），建议使用正斜杠以保持跨平台兼容性。
建议修改如下：
<!-- * @Author: weisheng * @Date: 2024-10-12 13:07:08 * @LastEditTime: 2024-11-08 13:14:48 * @LastEditors: weisheng - * @Description: - * @FilePath: \wot-design-uni\src\App.vue + * @Description: 应用入口文件，负责初始化主题、监听系统主题变化等全局配置 + * @FilePath: /wot-design-uni/src/App.vue * 记得注释 -->src/uni_modules/wot-design-uni/components/wd-transition/index.scss (1)
59-69: 新增的缩放动画实现完善新增的缩放动画很好地结合了 scale 和 opacity 属性，能够实现平滑的缩放效果。这完全符合 PR 中要求的中心弹出动画需求。
建议考虑添加以下优化：
.wd-zoom-in-enter, .wd-zoom-in-leave-to { opacity: 0; - transform: scale(0.8); + transform: scale(0.8) translate3d(0, 0, 0); // 添加 translate3d 来触发 GPU 加速，提升动画性能 }src/uni_modules/wot-design-uni/components/wd-popup/types.ts (2)
18-23: 建议补充过渡动画的使用示例虽然文档注释详细列出了支持的动画类型，但建议添加具体的使用示例，以帮助开发者更好地理解如何实现不同的动画效果。
建议在注释中添加示例代码：
/** * 动画类型，参见 wd-transition 组件的name * @example * // 淡入效果 * <wd-popup transition="fade" /> * // 缩放效果 * <wd-popup transition="zoom-in" /> */
Line range hint
17-98: 建议对属性进行分组组织当前的属性定义结构清晰，但建议将相关的属性进行分组，以提高代码的可维护性。
建议按以下方式组织属性：
export const popupProps = { // 基础属性 ...baseProps, modelValue: makeBooleanProp(false), // 展示相关 position: makeStringProp<PopupType>('center'), zIndex: makeNumberProp(10), hideWhenClose: makeBooleanProp(true), // 动画相关 transition: String as PropType<TransitionName>, duration: { type: [Number, Boolean], default: 300 }, // 交互相关 closable: makeBooleanProp(false), closeOnClickModal: makeBooleanProp(true), lockScroll: makeBooleanProp(true), // 样式相关 modal: makeBooleanProp(true), modalStyle: makeStringProp(''), safeAreaInsetBottom: makeBooleanProp(false), // 性能相关 lazyRender: makeBooleanProp(true), }src/pages/transition/Index.vue (2)
78-80: 建议重构动画处理函数以减少代码重复当前的实现虽然正确，但存在大量相似的动画处理函数。建议将这些函数重构为更简洁的形式。
-function zoomIn() { - transition('zoom-in') -} -function zoomOut() { - transition('zoom-out') -} +const handleTransition = (type: TransitionName) => () => transition(type) + +const zoomIn = handleTransition('zoom-in') +const zoomOut = handleTransition('zoom-out')
Line range hint
87-93: 转场函数的类型定义优化得当！使用
TransitionName类型替代string类型，确保了动画名称的类型安全性。不过建议考虑以下几点改进：
- 考虑将 timeout 时间抽取为配置常量
- 可以使用
nextTick来确保状态更新后再开始动画+const ANIMATION_DURATION = 500 + -function transition(transition: TransitionName) { +async function transition(transition: TransitionName) { name.value = transition show.value = true + await nextTick() setTimeout(() => { show.value = false - }, 500) + }, ANIMATION_DURATION) }docs/component/popup.md (1)
11-25: 示例更新清晰且实用！示例代码展示了组件的基本用法，样式设置合理。建议考虑以下优化：
- 可以添加更多常见使用场景的示例
- 考虑在CSS类名中使用更具描述性的命名，如
popup-content替代custom-txtsrc/pages/popup/Index.vue (1)
173-179: 建议优化样式实现当前样式实现有以下几点建议：
- 建议考虑使用相对单位或响应式布局，避免固定的
width和height值可能在不同设备上显示不一致- 可以考虑添加媒体查询来适配不同屏幕尺寸
建议参考以下优化方案：
.custom-txt { color: black; - width: 400rpx; - height: 400rpx; + min-width: 300rpx; + max-width: 80vw; + min-height: 300rpx; + max-height: 80vh; display: flex; justify-content: center; align-items: center; font-size: 40rpx; border-radius: 32rpx; + padding: 20rpx; }src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue (1)
24-47: 建议优化类名生成逻辑当前实现使用字符串拼接来处理类名，建议使用数组方法来提高性能和可读性。
建议如下重构：
const getClassNames = (name?: TransitionName | TransitionName[]) => { - let enter: string = `${props.enterClass} ${props.enterActiveClass}` - let enterTo: string = `${props.enterToClass} ${props.enterActiveClass}` - let leave: string = `${props.leaveClass} ${props.leaveActiveClass}` - let leaveTo: string = `${props.leaveToClass} ${props.leaveActiveClass}` + const baseClasses = { + enter: [props.enterClass, props.enterActiveClass], + enterTo: [props.enterToClass, props.enterActiveClass], + leave: [props.leaveClass, props.leaveActiveClass], + leaveTo: [props.leaveToClass, props.leaveActiveClass] + } if (Array.isArray(name)) { - for (let index = 0; index < name.length; index++) { - enter = `wd-${name[index]}-enter wd-${name[index]}-enter-active ${enter}` - enterTo = `wd-${name[index]}-enter-to wd-${name[index]}-enter-active ${enterTo}` - leave = `wd-${name[index]}-leave wd-${name[index]}-leave-active ${leave}` - leaveTo = `wd-${name[index]}-leave-to wd-${name[index]}-leave-active ${leaveTo}` - } + name.forEach(n => { + baseClasses.enter.push(`wd-${n}-enter`, `wd-${n}-enter-active`) + baseClasses.enterTo.push(`wd-${n}-enter-to`, `wd-${n}-enter-active`) + baseClasses.leave.push(`wd-${n}-leave`, `wd-${n}-leave-active`) + baseClasses.leaveTo.push(`wd-${n}-leave-to`, `wd-${n}-leave-active`) + }) } else if (name) { - enter = `wd-${name}-enter wd-${name}-enter-active ${enter}` - enterTo = `wd-${name}-enter-to wd-${name}-enter-active ${enterTo}` - leave = `wd-${name}-leave wd-${name}-leave-active ${leave}` - leaveTo = `wd-${name}-leave-to wd-${name}-leave-active ${leaveTo}` + baseClasses.enter.push(`wd-${name}-enter`, `wd-${name}-enter-active`) + baseClasses.enterTo.push(`wd-${name}-enter-to`, `wd-${name}-enter-active`) + baseClasses.leave.push(`wd-${name}-leave`, `wd-${name}-leave-active`) + baseClasses.leaveTo.push(`wd-${name}-leave-to`, `wd-${name}-leave-active`) } return { - enter: enter, - 'enter-to': enterTo, - leave: leave, - 'leave-to': leaveTo + enter: baseClasses.enter.join(' '), + 'enter-to': baseClasses.enterTo.join(' '), + leave: baseClasses.leave.join(' '), + 'leave-to': baseClasses.leaveTo.join(' ') } }src/uni_modules/wot-design-uni/components/common/abstracts/_mixin.scss (1)
106-121: 新增的 mdeep mixin 实现合理，建议补充文档说明mixin 的实现逻辑正确，能够生成被
:deep()包装的修饰符选择器。这对于需要在 scoped styles 中深度选择的场景很有帮助。建议在代码注释中补充以下信息：
- 使用场景说明
- 参数说明
- 使用示例
建议添加如下注释：
+/** + * 定义状态（m），并用 :deep() 包装选择器 + * 用于在 Vue scoped styles 中深度选择修饰符元素 + * @param {string} modifier - 修饰符名称，可传入多个 + * @example + * @include mdeep(center) { + * // 样式定义 + * } + */ @mixin mdeep($modifier...) {src/uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue (3)
93-93: 检查样式字符串的拼接格式在计算属性
style中，样式字符串的拼接可能缺少空格，导致样式无法正确解析。确保各样式属性之间有空格或分号分隔。建议修改为：
-return `z-index:${props.zIndex}; padding-bottom: ${safeBottom.value}px;${props.customStyle}` +return `z-index:${props.zIndex}; padding-bottom: ${safeBottom.value}px; ${props.customStyle}`
97-97: 在模板字符串中添加括号以明确逻辑在计算属性
rootClass中，复杂的三元运算符可能导致逻辑混淆。建议添加括号以提高代码可读性和维护性。建议修改为：
-return `wd-popup wd-popup--${props.position} ${!props.transition && props.position === 'center' ? 'is-deep' : ''} ${props.customClass || ''}` +return `wd-popup wd-popup--${props.position} ${(!props.transition && props.position === 'center') ? 'is-deep' : ''} ${props.customClass || ''}`
11-11: 使用.prevent修饰符替代空函数阻止滚动在
@touchmove事件中使用空函数noop来阻止默认行为，不是最佳实践。建议使用.prevent修饰符更简洁地实现。建议修改为：
-@touchmove="noop" +@touchmove.prevent并移除不再需要的
noop函数：-function noop() {}Also applies to: 158-158
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (11)
docs/component/popup.md(2 hunks)src/App.vue(2 hunks)src/pages/popup/Index.vue(2 hunks)src/pages/transition/Index.vue(3 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/_mixin.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-popup/index.scss(2 hunks)src/uni_modules/wot-design-uni/components/wd-popup/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue(3 hunks)src/uni_modules/wot-design-uni/components/wd-transition/index.scss(2 hunks)src/uni_modules/wot-design-uni/components/wd-transition/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue(3 hunks)
🔇 Additional comments (16)
src/App.vue (1)
Line range hint 25-31: 建议增加事件数据类型验证
移除了对非布尔类型事件数据的处理逻辑，这可能导致主题切换功能在接收到非预期数据时的行为不可预测。建议添加适当的类型验证和错误处理。
建议修改如下：
window.addEventListener('message', function (event) {
if (event.source !== parent) return
// 处理收到的消息
+ if (event.data === undefined || event.data === null) return
if (typeof event.data === 'boolean') {
darkMode.setDark(event.data)
+ } else {
+ console.warn('收到非预期的主题切换数据类型：', typeof event.data)
}
})另外，建议验证这个改动是否会影响到主题切换的功能。
src/uni_modules/wot-design-uni/components/wd-transition/index.scss (1)
10-12: 优化了淡入淡出过渡效果的属性设置
通过将过渡属性限定为仅包含 opacity，使淡入淡出动画更加清晰和专注。这是一个很好的改进。
src/uni_modules/wot-design-uni/components/wd-transition/types.ts (1)
57-57: 支持过渡动画数组是个很好的改进
将 name 属性的类型从单一字符串扩展为支持字符串数组，提高了组件的灵活性。这样可以实现更复杂的动画效果。
#!/bin/bash
# 验证新的数组类型用法
ast-grep --pattern 'name={[$_]}'src/uni_modules/wot-design-uni/components/wd-popup/types.ts (2)
10-12: 导入声明合理且完整
类型导入和基础属性的引用符合最佳实践，特别是 TransitionName 类型的引入增强了过渡动画的类型安全性。
93-98: 验证 lockScroll 属性的实际效果
lockScroll 属性的类型定义正确，但需要确保在组件中正确实现了滚动锁定的功能。
✅ Verification successful
lockScroll 属性实现已完整验证
lockScroll 属性在组件中实现正确且完整：
- 在 Popup 组件中正确传递给 Overlay 组件
- Overlay 组件通过 touchmove 事件阻止滚动
- H5 环境下使用 useLockScroll 组合式函数实现 body 滚动锁定
- 小程序环境下通过事件阻止实现滚动锁定
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查组件中是否正确使用了 lockScroll 属性
ast-grep --pattern 'lockScroll' src/uni_modules/wot-design-uni/components/wd-popup/
Length of output: 83
Script:
#!/bin/bash
# 搜索 wd-popup 组件中的 lockScroll 相关实现
rg -A 5 "lockScroll" src/uni_modules/wot-design-uni/components/wd-popup/
# 查找组件的主要实现文件
fd "index" src/uni_modules/wot-design-uni/components/wd-popup/
Length of output: 897
Script:
#!/bin/bash
# 检查 wd-popup 组件中的 wd-overlay 组件实现
cat src/uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue
# 检查 wd-overlay 组件的实现
fd "wd-overlay" src/uni_modules/wot-design-uni/components/ -t f
Length of output: 3276
Script:
#!/bin/bash
# 检查 wd-overlay 组件中的 lockScroll 实现
cat src/uni_modules/wot-design-uni/components/wd-overlay/wd-overlay.vue
Length of output: 1031
Script:
#!/bin/bash
# 检查 useLockScroll composable 的实现
cat src/uni_modules/wot-design-uni/components/composables/useLockScroll.ts
Length of output: 873
src/pages/transition/Index.vue (2)
19-19: 新增的 zoom-out 按钮布局合理！
按钮的添加位置恰当，与其他动画按钮保持了一致的布局风格。
42-42: 类型定义的改进提升了代码质量！
将 any 类型替换为具体的 TransitionName 类型，显著提高了类型安全性和代码可维护性。
Also applies to: 46-46
docs/component/popup.md (1)
106-107: 属性文档完善且符合需求！
新增的属性文档与PR目标完全吻合：
transition属性提供了丰富的动画选项lockScroll属性的版本要求明确标注
建议验证文档中列出的所有动画类型是否都已实现。
✅ Verification successful
文档中的动画类型已完全实现，无需担心！
通过代码验证：
wd-transition组件完整支持文档中列出的所有动画类型：fade、fade-up、fade-down、fade-left、fade-right、slide-up、slide-down、slide-left、slide-right、zoom-inwd-popup组件正确集成了这些动画，并根据 position 属性智能选择合适的过渡效果
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证所有列出的动画类型是否在代码中实现
# 搜索transition相关实现
rg -t vue "name.*=.*(fade|slide|zoom)"
Length of output: 68
Script:
#!/bin/bash
# 搜索所有可能包含动画类型定义的文件
rg -l "(fade|slide|zoom)"
# 查找可能的transition组件定义
fd -e js -e jsx -e ts -e tsx -e vue . | xargs rg "transition.*name.*=.*"
Length of output: 2774
Script:
#!/bin/bash
# 检查 wd-transition 组件中支持的动画类型
cat src/uni_modules/wot-design-uni/components/wd-transition/types.ts
# 检查 wd-popup 组件中的动画实现
cat src/uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue
Length of output: 5160
src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue (2)
2-2: 渲染条件优化得当！
使用 lazyRender 和 inited 的组合条件来控制渲染，可以有效优化性能，避免不必要的渲染。
76-78: 样式控制逻辑合理！
通过 destroy 属性来控制元素的显示状态，配合 display 状态，实现了更灵活的过渡效果控制。这个改动很好地支持了 PR 中提到的动画需求。
src/uni_modules/wot-design-uni/components/common/abstracts/_mixin.scss (1)
106-121: 验证 mdeep mixin 在 Popup 组件中的使用
新增的 mixin 主要用于支持 Popup 组件的动画效果。让我们确认它的使用方式是否正确。
✅ Verification successful
mdeep mixin 在 Popup 组件中使用正确且合理
mdeep mixin 在 wd-popup/index.scss 中被正确使用，用于定义弹出层的不同位置样式（center、left、right、top、bottom）。每个位置都通过 :deep() 选择器正确处理了样式穿透问题，完全符合预期用途。
- 中心弹出：处理了位置和缩放动画
- 左侧弹出：固定在左侧边缘
- 右侧弹出：固定在右侧边缘
- 顶部弹出：固定在顶部边缘
- 底部弹出：固定在底部边缘
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查 mdeep mixin 在 Popup 组件中的使用情况
# 预期：在 Popup 相关的 SCSS 文件中找到 mdeep 的使用
# 搜索包含 @include mdeep 的文件
echo "检查 mdeep mixin 的使用位置："
rg "@include mdeep" --type scss
Length of output: 115
Script:
#!/bin/bash
# 使用 fd 查找所有 scss 文件，然后用 grep 搜索
echo "检查 mdeep mixin 的使用位置："
fd -e scss | xargs grep -l "@include mdeep"
# 查看 popup 相关的 scss 文件内容
echo -e "\n查看 Popup 相关的 SCSS 文件内容："
fd -e scss popup
Length of output: 242
Script:
#!/bin/bash
# 查看 wd-popup/index.scss 文件中 mdeep mixin 的具体使用情况
echo "wd-popup/index.scss 中 mdeep 的使用上下文："
rg -B 3 -A 3 "@include mdeep" src/uni_modules/wot-design-uni/components/wd-popup/index.scss
# 检查文件的完整内容以了解动画相关代码
echo -e "\n完整的 popup scss 文件内容："
cat src/uni_modules/wot-design-uni/components/wd-popup/index.scss
Length of output: 2101
src/uni_modules/wot-design-uni/components/wd-popup/index.scss (4)
5-16: 为暗黑主题添加 popup-wrapper 样式
您在暗黑主题下为 popup-wrapper 添加了样式，这将确保弹出层在暗黑模式下的视觉一致性，提升用户体验。
44-44: 确认 transform-origin 的值是否符合预期
第 44 行中，您将 transform-origin 设置为 0% 0%。请确认这是否符合预期的动画效果。如果希望从元素中心进行缩放，可能需要将其设置为 50% 50%。
46-56: 检查缩放动画的比例差异
在第 46-56 行中，针对 .wd-zoom-in-enter 和 .wd-zoom-in-leave-to 类，定义了不同的 transform 缩放比例：
- 默认情况下使用
scale(0.8) - 在
@include when(deep)中使用scale(0.1)
请确认这种差异是有意的，并确保在不同情况下的动画效果符合预期。
67-71: 确保 .mdeep(right) 混入的样式正确应用
第 67-71 行中，为右侧弹出层定义了样式。请检查这些样式是否在组件中正确地被应用和渲染，以确保右侧弹出层显示正常。
src/uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue (1)
68-88: 验证 transitionName 是否支持返回数组
在计算属性 transitionName 中，对于 props.position === 'center'，返回了数组 ['zoom-in', 'fade']。需要确认 wd-transition 组件的 name 属性是否支持接收数组类型。
如果 wd-transition 的 name 属性不支持数组，可能会导致过渡动画无法正常执行。请确认组件支持并根据需要调整代码。
src/uni_modules/wot-design-uni/components/wd-transition/index.scss
Outdated
Show resolved
Hide resolved
src/uni_modules/wot-design-uni/components/wd-transition/index.scss
Outdated
Show resolved
Hide resolved
✅ Closes: #687
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
使用Transition重构Popup为center类型的Popup添加zoom-in动画
☑️ 请求合并前的自查清单
Summary by CodeRabbit
wd-popup组件文档，增加了transition和lockScroll属性。wd-popup组件的使用和样式文档。wd-popup和wd-transition组件的样式，增强了动画效果。