fix: remove 无意义的样式变量 #2827
fix: remove 无意义的样式变量 #2827
Conversation
Walkthrough本次更改主要涉及多个组件的样式调整和SCSS变量的更新。具体而言， Changes
Possibly related PRs
Suggested labels
Suggested reviewers
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (4)
src/packages/layout/demos/h5/demo2.tsx (1)
7-11: 样式变量替换为固定值的修改已确认这些改动移除了不必要的样式变量，使用固定值替代，简化了代码结构。不过建议考虑将这些常用的颜色值和尺寸提取到一个集中的主题配置中，以便将来统一管理和修改。
当前修改：
- 行高固定为 40px
- 边框圆角改为 2px
- 背景色使用固定的十六进制值
建议将这些值统一到一个主题配置文件中：
// theme.ts export const theme = { colors: { primary: '#ff8881', primaryLight: '#ffc7c4', }, radius: { small: '2px', }, lineHeight: { default: '40px', }, }Also applies to: 16-16
src/packages/layout/demos/taro/demo1.tsx (1)
Line range hint
1-1: 建议优化样式管理架构当前的改动移除了样式变量，使用固定值替代，这确实简化了代码。但从长远来看，建议考虑以下架构优化：
- 建立统一的设计令牌（Design Tokens）系统
- 实现主题配置机制
- 确保 H5 和 Taro 版本共享相同的设计变量
这样可以：
- 提高样式的可维护性
- 确保跨平台的一致性
- 简化未来的主题定制需求
src/packages/layout/demos/h5/demo1.tsx (1)
7-11: 建议使用主题变量而不是硬编码值虽然移除了无用的样式变量，但建议将颜色值（如
#ff8881、#ffc7c4）和其他可能需要主题定制的值（如border-radius）改为使用主题变量。这样可以：
- 保持样式的一致性
- 便于主题定制
- 简化后续的样式维护
建议参考以下修改方案：
.layout-flex-content { line-height: 40px; color: #fff; text-align: center; - border-radius: 2px; - background: #ff8881; + border-radius: var(--nutui-radius-sm, 2px); + background: var(--nutui-brand-color, #ff8881); font-size: 14px; } .layout-flex-content-light { - background: #ffc7c4; + background: var(--nutui-brand-color-light, #ffc7c4); }Also applies to: 16-16
src/packages/layout/demos/taro/demo3.tsx (1)
15-15: 建议使用主题变量定义圆角值虽然此更改保持了与 H5 版本的一致性，但建议使用主题变量来定义圆角值，以便于统一管理和维护。
建议参考以下修改方案：
- borderRadius: pxTransform(2), + borderRadius: pxTransform(theme.radiusSm || 2),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
src/packages/col/col.scss(0 hunks)src/packages/layout/demos/h5/demo1.tsx(1 hunks)src/packages/layout/demos/h5/demo2.tsx(1 hunks)src/packages/layout/demos/h5/demo3.tsx(1 hunks)src/packages/layout/demos/taro/demo1.tsx(1 hunks)src/packages/layout/demos/taro/demo2.tsx(1 hunks)src/packages/layout/demos/taro/demo3.tsx(1 hunks)src/styles/variables.scss(1 hunks)
💤 Files with no reviewable changes (1)
- src/packages/col/col.scss
🔇 Additional comments (3)
src/packages/layout/demos/taro/demo2.tsx (1)
15-15: 边框圆角数值调整已确认
将 borderRadius 从 pxTransform(6) 调整为 pxTransform(2)，保持了与 H5 版本的视觉一致性，同时正确使用了 pxTransform 确保跨平台兼容性。
src/packages/layout/demos/taro/demo1.tsx (1)
16-16: 保持示例代码一致性的修改已确认
将 borderRadius 值统一调整为 pxTransform(2)，与其他示例保持一致，有助于维护代码的统一性和可预测性。
src/styles/variables.scss (1)
2401-2401: 请验证此间距调整的影响范围
将列组件的默认下边距从 15px 减少到 10px 可能会影响现有布局。建议：
- 检查此变更是否符合设计规范
- 验证对现有页面布局的影响
- 确认是否需要在文档中说明此变更
✅ Verification successful
Based on the search results, I can now provide a final verification response:
此变更影响范围可控且合理
-
col-default-margin-bottom变量仅在以下文件中使用：src/packages/col/col.scss: 用于设置列组件的下边距- 在主题变量文件中定义:
src/styles/variables.scss,variables-jrkf.scss,variables-jmapp.scss - 在组件文档中记录:
src/packages/layout/doc.md及其多语言版本
-
此调整是合理的，因为：
- 变更是全局一致的，所有使用此变量的地方都会同步更新
- 从15px减少到10px的调整幅度适中，不会导致布局剧烈变化
- 变更已在文档中明确记录
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索使用了 col-default-margin-bottom 变量的文件
rg --type scss "col-default-margin-bottom"
# 搜索可能受影响的 Col 组件使用处
rg --type tsx "Col"
Length of output: 119
Script:
#!/bin/bash
# Search for col-default-margin-bottom variable usage
rg "col-default-margin-bottom"
# Search for Col component references
rg "Col"
# Search for SCSS files that might contain the variable
fd -e scss
# Search for component files that might use Col
fd -e tsx -e jsx
Length of output: 75270
| line-height: 40px; | ||
| color: #fff; | ||
| text-align: center; | ||
| border-radius: var(--nutui-row-content-border-radius, 6px); | ||
| background: var( | ||
| --nutui-row-content-background-color, | ||
| var(--row-content-bg-color, #ff8881) | ||
| ); | ||
| border-radius: 2px; | ||
| background: #ff8881; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议合并重复的样式定义
当前的样式定义与 demo1.tsx 完全相同。建议将这些共用样式提取到一个共享的样式文件中，以减少代码重复并简化维护。
建议创建一个共享的样式文件（例如 layout-demo.scss），然后在各个 demo 组件中引用：
+ // src/packages/layout/demos/h5/layout-demo.scss
+ .layout-flex-content {
+ line-height: 40px;
+ color: #fff;
+ text-align: center;
+ border-radius: var(--nutui-radius-sm, 2px);
+ background: var(--nutui-brand-color, #ff8881);
+ font-size: 14px;
+ }
+
+ .layout-flex-content-light {
+ background: var(--nutui-brand-color-light, #ffc7c4);
+ }
// demo1.tsx 和 demo3.tsx
- const style = `
- .layout-flex-content { ... }
- .layout-flex-content-light { ... }
- `
+ import './layout-demo.scss'Also applies to: 16-16
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #2827 +/- ##
==========================================
Coverage 84.00% 84.00%
==========================================
Files 220 220
Lines 17901 17901
Branches 2678 2678
==========================================
Hits 15038 15038
Misses 2858 2858
Partials 5 5 ☔ View full report in Codecov by Sentry. |
| @@ -4,16 +4,16 @@ import { Row, Col } from '@nutui/nutui-react' | |||
| const Demo1 = () => { | |||
| const style = ` | |||
| .layout-flex-content { | |||
| line-height: var(--nutui-row-content-line-height, 40px); | |||
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
.nut-col类的样式，移除了未使用的浮动属性。