feat: ✨ 新增 FloatingPanel 浮动面板组件#616
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough该拉取请求引入了一个新的“FloatingPanel”组件，更新了文档配置以包含该组件的链接和文本。新文件 Changes
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!Built without sensitive environment variables
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: 7
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (10)
- docs/.vitepress/config.mts (1 hunks)
- docs/component/floating-panel.md (1 hunks)
- src/pages.json (1 hunks)
- src/pages/floatingPanel/Index.vue (1 hunks)
- src/pages/index/Index.vue (1 hunks)
- src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (1 hunks)
- src/uni_modules/wot-design-uni/components/common/util.ts (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-floating-panel/index.scss (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-floating-panel/type.ts (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-floating-panel/wd-floating-panel.vue (1 hunks)
Additional comments not posted (26)
src/uni_modules/wot-design-uni/components/wd-floating-panel/type.ts (1)
4-30: props 设计合理，涵盖了常见需求
floatingPanelProps对象定义了 FloatingPanel 组件的所有 prop，包括：
height：用于设置面板高度anchors：自定义面板的锚点位置safeAreaInsetBottom：是否开启底部安全区域showScrollbar：是否显示滚动条duration：自定义动画时长contentDraggable：内容区域是否可拖拽这些 prop 涵盖了 FloatingPanel 组件的常见需求，并提供了一定的灵活性，可以满足不同场景下的使用要求。
同时，通过使用
makeXXXProp等工具函数定义 prop，可以确保其类型的正确性。总的来说，这部分的 props 设计是合理的。
src/uni_modules/wot-design-uni/components/wd-floating-panel/index.scss (4)
1-3: 代码看起来不错!从
common/abstracts目录导入 SCSS 变量和 mixins 是一个很好的做法,可以提高代码的复用性和可维护性。
4-12: 暗黑模式下的样式定义正确代码片段正确地为暗黑模式下的浮动面板组件定义了样式:
- 使用
.wot-theme-dark类选择器包裹样式,表明这些样式特定于暗黑主题。- 将浮动面板及其内容的背景色设置为
$-dark-background2变量。- 使用
@include b(floating-panel)mixin 生成组件的基类。- 使用
@include e(content)mixin 生成组件内容元素的类。
14-65: 浮动面板组件的主要样式定义正确代码片段正确地定义了浮动面板组件的主要样式:
- 使用
@include b(floating-panel)mixin 生成组件的基类。- 设置了浮动面板的定位、尺寸、背景色、圆角等属性。
- 使用
@include when(safe)mixin 在面板底部添加安全区域的内边距。- 使用
&::after伪元素创建了一个超出面板高度的背景色。- 使用
@include e(header)mixin 设置了面板头部的样式,包括头部栏。- 使用
@include e(content)mixin 设置了面板内容区域的样式。
62-63: 请确认是否需要设置面板内容的字体颜色代码中注释掉的第 62 行表明开发者可能打算设置面板内容的字体颜色,但后来决定不这样做。请确认是否需要设置面板内容的字体颜色,如果不需要,可以删除注释掉的代码以保持代码的整洁。
src/pages/floatingPanel/Index.vue (3)
1-26: 模板部分看起来不错！FloatingPanel 组件在不同的选项卡中以不同的配置进行了演示，覆盖了各种使用场景。组件的使用方式看起来是正确的。
28-52: 脚本部分实现得很好！脚本部分导入了必要的依赖项，并定义了组件中使用的数据和方法。
handleHeightChange方法处理面板高度变化时的逻辑，onLoad生命周期钩子用于初始化数据。代码逻辑和语法都没有明显的问题。
54-61: 样式部分没有问题！样式部分为 FloatingPanel 的内容区定义了样式，包括内边距、文本对齐、字体大小和字重。样式很简单，没有明显的问题。
docs/component/floating-panel.md (5)
1-6: 介绍部分看起来不错！介绍部分对 FloatingPanel 组件的用途和使用场景进行了清晰简洁的概述。内容没有明显问题。
7-22: 基本用法部分没有问题！基本用法部分对组件的默认行为以及用户如何与之交互进行了清晰的说明。代码示例有助于理解组件的使用方法。内容没有明显问题。
23-58: 自定义锚点部分说明清晰！自定义锚点部分对如何自定义锚点位置以及控制面板高度提供了清晰的说明。代码示例全面，包含了所有必要的部分。内容没有明显问题。
60-77: 仅头部拖拽部分说明清楚！仅头部拖拽部分对如何禁用内容区域拖拽提供了清晰的说明。代码示例简单明了，包含了必要的部分。内容没有明显问题。
79-107: API 部分列举全面！API 部分全面列出了组件的属性、插槽、事件和外部样式类。表格格式清晰易读。描述简洁且信息丰富。内容没有明显问题。
docs/.vitepress/config.mts (1)
329-331: 变更符合预期，没有问题！新增的 FloatingPanel 组件条目的格式和位置都是正确的，与现有的组件条目保持一致。这个变更扩展了文档的覆盖范围，将 FloatingPanel 组件纳入其中。
src/uni_modules/wot-design-uni/components/common/util.ts (1)
731-733: 代码看起来不错！该函数使用
reduce方法遍历数组，并比较每个元素与目标值之间的绝对差值，以找到最接近目标值的元素。逻辑正确，实现简洁。JSDoc 注释也提供了清晰的函数说明。src/pages.json (1)
825-833: LGTM!新增的 "floatingPanel" 页面配置看起来不错:
- 页面路径和名称一致，符合其他页面的命名约定。
- 针对 "mp-alipay" 平台禁用垂直反弹与其他页面的配置一致。
- 导航栏标题设置得当。
src/pages/index/Index.vue (1)
237-240: 改动没问题，不过请注意确保FloatingPanel组件的实现和文档都已就绪。在
list数组中添加这个新的对象用于表示FloatingPanel组件本身是没有问题的。不过要注意确保该组件的实现代码、文档等其他相关改动也都完成并提交了。可以运行下面的命令来检查
FloatingPanel组件的实现和文档是否已经提交：Verification successful
FloatingPanel组件已实现并有相应文档，但位置可能与预期不同。
经过验证，我们发现：
- FloatingPanel组件的实现文件位于
src/uni_modules/wot-design-uni/components/wd-floating-panel/type.ts- 组件的文档存在于
docs/component/floating-panel.mdsrc/pages/index/Index.vue文件中也包含了对FloatingPanel的引用建议：
- 检查
src/uni_modules/wot-design-uni/components/wd-floating-panel/目录下是否有完整的组件实现（如 .vue 文件）- 确保组件的实现与文档内容一致
- 验证 Index.vue 中对FloatingPanel的使用是否正确
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 检查FloatingPanel组件的实现文件 fd -e vue -e js FloatingPanel src/components # 检查FloatingPanel组件的文档 fd -e md FloatingPanel docsLength of output: 76
Script:
#!/bin/bash # 在整个src目录中搜索包含"FloatingPanel"的文件 echo "Searching for FloatingPanel in src directory:" rg -l "FloatingPanel" src # 在整个docs目录中搜索包含"FloatingPanel"的文件 echo "Searching for FloatingPanel in docs directory:" rg -l "FloatingPanel" docs # 列出src/components目录下的所有.vue和.js文件 echo "Listing all .vue and .js files in src/components:" fd -e vue -e js . src/components # 列出docs目录下的所有.md文件 echo "Listing all .md files in docs:" fd -e md . docsLength of output: 3024
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (9)
948-948: 变量定义正确
$-floating-panel-bg变量用于设置浮动面板的背景色，默认值$-color-white是一个合适的选择。
949-949: 变量定义正确
$-floating-panel-radius变量用于设置浮动面板的圆角大小，默认值16px可以让面板呈现较为圆润的形状。
950-950: 变量定义正确
$-floating-panel-z-index变量用于设置浮动面板的层级，默认值99可以让面板悬浮于其他内容之上。
951-951: 变量定义正确
$-floating-panel-header-height变量用于设置浮动面板头部的高度，默认值30px是一个合理的高度。
952-952: 变量定义正确
$-floating-panel-bar-width变量用于设置浮动面板 bar 的宽度，默认值20px可以让 bar 呈现合适的宽度。
953-953: 变量定义正确
$-floating-panel-bar-height变量用于设置浮动面板 bar 的高度，默认值3px可以让 bar 呈现合适的高度。
954-954: 变量定义正确
$-floating-panel-bar-bg变量用于设置浮动面板 bar 的背景色，默认值$-color-gray-5可以让 bar 呈现出灰色的外观。
955-955: 变量定义正确
$-floating-panel-bar-radius变量用于设置浮动面板 bar 的圆角大小，默认值4px可以让 bar 呈现较为圆润的形状。
956-956: 变量定义正确
$-floating-panel-content-bg变量用于设置浮动面板内容区的背景色，默认值$-color-white是一个合适的选择。
2 participants
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
可以添加一个FloatingPanel 浮动面板
Discussions
💡 需求背景和解决方案
1、新增 FloatingPanel 浮动面板组件。
2、API实现和用法可参见对应文档。
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
文档
样式