fix: button v15 调整 #2893
fix: button v15 调整 #2893
Conversation
概述遍历此次更改主要涉及按钮组件的样式和演示文件的重构。在 变更
可能相关的 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 #2893 +/- ##
==========================================
Coverage 85.88% 85.88%
==========================================
Files 271 271
Lines 18429 18429
Branches 2728 2728
==========================================
Hits 15827 15827
Misses 2597 2597
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 (3)
src/packages/button/demos/taro/demo6.tsx (1)
6-9: 样式简化逻辑可行，建议检查 UI 兼容性
将宽度和边距统一设置简化了代码，但请确保在不同平台或屏幕尺寸下的布局效果满足设计需求，尤其是宽度设为120时。src/packages/button/demos/taro/demo5.tsx (1)
95-98: 采用对象字面量简化 style 定义（行95-98）
将 marginStyle 的写法直接复制到此处，可读性依然不错，但若后续需要统一更新样式，建议依旧使用同一个 marginStyle 对象，以减少多处修改。src/packages/button/demos/taro/demo4.tsx (1)
45-45: 为特定按钮场景直接指定背景色
通过style对象给出特定颜色，可快速测试与展示不同效果，但可考虑后续抽离至公共样式文件以便全局管理。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
src/packages/button/button.scss(6 hunks)src/packages/button/demos/h5/demo8.tsx(1 hunks)src/packages/button/demos/taro/demo10.tsx(1 hunks)src/packages/button/demos/taro/demo2.tsx(1 hunks)src/packages/button/demos/taro/demo3.tsx(1 hunks)src/packages/button/demos/taro/demo4.tsx(5 hunks)src/packages/button/demos/taro/demo5.tsx(5 hunks)src/packages/button/demos/taro/demo6.tsx(1 hunks)src/packages/button/demos/taro/demo7.tsx(1 hunks)src/packages/button/demos/taro/demo8.tsx(2 hunks)src/styles/variables.scss(5 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/packages/button/demos/h5/demo8.tsx
🔇 Additional comments (29)
src/packages/button/demos/taro/demo6.tsx (1)
3-3: 引入路径检查
请确认 @/utils/platform-taro 中是否正确导出 harmony，避免因命名或文件位置不一致导致编译错误。
src/packages/button/demos/taro/demo3.tsx (1)
6-6: 统一边距的选择
将所有边距合并为单个 margin: 8 使样式更简洁，通常可提高可维护性，但请同时确认是否影响原有排版需求。
src/packages/button/demos/taro/demo2.tsx (1)
5-7: 简化样式配置
将边距统一为 8 提升了可读性，建议在后续如需细化不同方向边距时再拆分。
src/packages/button/demos/taro/demo7.tsx (2)
3-3: 命名与导入一致性
已从其他文件看到相似改动：引入 harmony 替代 rn。请再次确认与业务逻辑的对应关系无误。
8-9: 宽度与边距简化
使用 harmony() 判断来定义固定宽度或自适应宽度，并统一边距，能避免重复判断，提高可读性。
src/packages/button/demos/taro/demo10.tsx (2)
3-3: 导入 harmony 工具函数的操作看起来合理
导入 harmony 有助于在 Taro 环境下实现平台判断逻辑，精简了依赖关系。
6-9: 简化 marginStyle，提升按钮样式可维护性
从代码上看，通过 harmony() 判断来设置宽度，并统一使用 8 的 margin，能确保按钮在多平台下的布局一致。这样减少了条件分支，也更便于日后调整。
src/packages/button/demos/taro/demo8.tsx (3)
3-3: 替换到 harmony 函数的引入逻辑
此更改使得组件能够统一使用 harmony() 进行平台兼容判断，移除了复杂的多方法判断，有助于维持整体代码一致性。
6-9: 统一使用 marginStyle 简化布局
同样地，将 width 使用 harmony() 判断、margin 固定为 8 可以保证按钮在多端表现一致，逻辑更简单明了。
26-26: 保留 xlarge 按钮布局逻辑
对 xlarge 尺寸按钮也使用相同的 marginStyle 有助于减少重复样式设置，增强组件可维护性。
src/packages/button/demos/taro/demo5.tsx (7)
4-4: 改用 harmony 函数统一平台宽度判断
使用 harmony() 代替其他工具函数使得多端适配更加简洁，可降低维护成本。
8-9: 采用统一宽度与边距，减少条件判断
通过 harmony() 来决定是否固定宽度，并统一使用 margin: 8，能让按钮在各平台保持一致的布局样式。
60-60: 改用相同逻辑的 margin 与 width 设置
此处与前面保持一致的做法，让视觉与交互更统一。
75-75: 统一使用 harmony 来判断宽度
为不同按钮统一宽度定义时，保持了与上方相同的逻辑，减少配置差异。
86-86: 保证禁用按钮的布局与其他按钮保持一致
禁用状态下依旧复用同样的 marginStyle，维护性更好。
103-106: 小图标尺寸设置 (lines 103-106)
使用 <Plus size={10} /> 统一图标大小，方便后续设计规范统一。
112-115: 对 dashed 样式按钮也统一采用相同的 margin 设置
确保禁用状态各类按钮保持风格一致。
src/packages/button/demos/taro/demo4.tsx (8)
4-4: 改用 harmony 函数，统一平台逻辑
此更改与其他 demo 文件的处理方式保持一致，便于复用与维护。
8-9: 统一宽度与边距设置
将宽度由 harmony() 判断，以及固定 margin 为 8，有助于减少样式分支。
60-60: 保持“none”填充的按钮与整体风格统一
使用相同的方式动态计算宽度可确保不同按钮大小适配。
74-74: 使用 var(--nutui-gray-1) 等预定义变量
统一使用全局颜色变量，可与其他地方保持风格一致，减少维护困难。
85-85: 继续沿用 marginStyle 保持可读性
这样做使得所有按钮的外部间距保持统一，避免散落多处的样式差异。
93-96: Square 按钮的图标采用更小 size 更易调试
<Plus size={10} /> 在方形按钮上更符合空间限制，也能看出更精简的视觉效果。
101-104: 使 outline 类型按钮保持统一 margin
和其他按钮一样使用对象字面量方式声明 margin，可以进一步明确布局意图。
109-112: dashed 类型同样适用相同 margin
在保持视觉一致性的同时，也便于日后进行整体调整。
src/packages/button/button.scss (3)
105-107: 新增 xlarge 尺寸按钮的圆角样式
新增的样式定义合理，与变量文件中的定义保持一致。
252-256: 优化主要按钮的字重样式
为主要按钮添加粗体样式，同时针对小尺寸按钮保持常规字重，这样的视觉层次更加合理。
294-296: 补充普通尺寸主要按钮的字重定义
与之前的字重样式变更相呼应，确保了普通尺寸按钮的样式一致性。
src/styles/variables.scss (1)
175-175: 完善按钮相关的样式变量定义
变量的调整合理，主要包括：
- 更新了默认字号为 base size
- 新增了 xlarge 尺寸的文本间距和圆角定义
- 统一了各尺寸按钮的圆角半径
这些改动使按钮组件的样式系统更加完整和一致。
Also applies to: 199-199, 212-219, 225-225, 233-233, 244-244, 255-255
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
样式
文档