feat: tabbar v15 适配 #2903
Merged
feat: tabbar v15 适配 #2903
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
概述演练此次拉取请求主要涉及 Tabbar 组件的演示文件和样式文件的修改。在 H5 和 Taro 的多个演示文件中，移除了图标的尺寸和宽高属性，使图标默认渲染。同时， 变更
可能相关的 PR
建议标签
建议审阅者
诗歌
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 @@
## feat_v3.x #2903 +/- ##
===========================================
Coverage 85.97% 85.97%
===========================================
Files 273 277 +4
Lines 18492 18692 +200
Branches 2736 2769 +33
===========================================
+ Hits 15898 16070 +172
- Misses 2589 2617 +28
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
🧹 Nitpick comments (1)
src/packages/tabbaritem/tabbaritem.scss (1)
29-31: 建议优化文本间距和可点击区域当前实现有以下建议：
- 考虑增加行高，建议设置为1.2-1.5倍字体大小，提升可读性
- 建议添加最小高度确保足够的可点击区域，提升用户体验
建议按如下方式修改：
.nut-tabbar-item-icon-box { &-nav { color: $color-text; font-size: $tabbar-text-font-size; - line-height: $tabbar-text-font-size; + line-height: calc($tabbar-text-font-size * 1.2); + min-height: 44px; margin-top: $tabbar-text-margin-top; } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (17)
src/packages/tabbar/demos/h5/demo1.tsx(1 hunks)src/packages/tabbar/demos/h5/demo2.tsx(1 hunks)src/packages/tabbar/demos/h5/demo4.tsx(1 hunks)src/packages/tabbar/demos/h5/demo5.tsx(1 hunks)src/packages/tabbar/demos/h5/demo6.tsx(1 hunks)src/packages/tabbar/demos/h5/demo7.tsx(1 hunks)src/packages/tabbar/demos/h5/demo8.tsx(1 hunks)src/packages/tabbar/demos/h5/demo9.tsx(1 hunks)src/packages/tabbar/demos/taro/demo1.tsx(1 hunks)src/packages/tabbar/demos/taro/demo2.tsx(1 hunks)src/packages/tabbar/demos/taro/demo4.tsx(1 hunks)src/packages/tabbar/demos/taro/demo6.tsx(1 hunks)src/packages/tabbar/demos/taro/demo7.tsx(1 hunks)src/packages/tabbar/demos/taro/demo9.tsx(1 hunks)src/packages/tabbaritem/tabbaritem.scss(1 hunks)src/packages/tabbaritem/tabbaritem.taro.tsx(1 hunks)src/packages/tabbaritem/tabbaritem.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (10)
- src/packages/tabbar/demos/h5/demo9.tsx
- src/packages/tabbar/demos/h5/demo1.tsx
- src/packages/tabbar/demos/h5/demo7.tsx
- src/packages/tabbar/demos/h5/demo8.tsx
- src/packages/tabbar/demos/h5/demo6.tsx
- src/packages/tabbar/demos/taro/demo1.tsx
- src/packages/tabbar/demos/taro/demo6.tsx
- src/packages/tabbar/demos/taro/demo2.tsx
- src/packages/tabbar/demos/h5/demo2.tsx
- src/packages/tabbar/demos/taro/demo9.tsx
🔇 Additional comments (7)
src/packages/tabbaritem/tabbaritem.scss (1)
22-24: 图标尺寸优化符合移动端设计规范！
统一将图标尺寸从24px调整为22px的修改合理，既保持了良好的可见性，又能带来更精致的视觉效果。
src/packages/tabbar/demos/h5/demo5.tsx (1)
11-11: 移除自定义图标尺寸后改用默认大小，可能影响整体UI一致性
建议在各版本设备上验证图标显示效果，以确保与设计稿和其他Tabbar.Item保持风格统一。
src/packages/tabbar/demos/taro/demo7.tsx (1)
7-11: 移除 icon 的 size 属性后需确认实际视觉效果是否符合设计规范
本次改动让 icon 使用其默认尺寸，建议在常见屏幕下检查各个组件的实际渲染效果，确保与设计稿保持一致。
src/packages/tabbaritem/tabbaritem.tsx (1)
25-25: 调整默认 right 值对布局的影响需要关注
将 right 从 '5' 改为 '0' 可能会改变徽章或图标的定位效果，建议在应用场景中确认视觉与交互逻辑是否和设计预期一致。
src/packages/tabbaritem/tabbaritem.taro.tsx (1)
27-27: Taro 端与 H5 端保持一致的默认值
此处同样将 right 设置为 '0'，使 Taro 端与 H5 端保持一致，有助于减少两端差异。但仍需验证在各终端设备上的实际效果。
src/packages/tabbar/demos/h5/demo4.tsx (1)
11-11: 确认是否符合设计规范
移除了“分类”标签的 dot 属性后，用户将无法在该标签上看到任何未读或提醒提示。请确认产品或设计需求，确保此更改与整体设计一致并满足用户预期。
src/packages/tabbar/demos/taro/demo4.tsx (1)
11-11: 与 H5 版本保持一致
此处同样移除了“分类”标签的 dot 属性，建议确保与 H5 版本的设计和交互逻辑保持一致，并核对是否有其他使用场景需要同步更新。
Alex-huxiyang
approved these changes
Dec 30, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
样式调整
功能变更
兼容性