feat(steps): 多端适配 #2547
feat(steps): 多端适配 #2547
Conversation
Walkthrough此次更改引入了对步骤组件的增强，主要包括在 Changes
Possibly related PRs
Suggested labels
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 (
|
![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
🧹 Outside diff range and nitpick comments (2)
src/config.json (2)
Line range hint
1059-1078: 建议更新文档和更新日志鉴于 Step 和 Steps 组件都进行了主要版本更新，建议更新相关文档并在更新日志中详细说明这些变更。
请确保：
- 更新组件文档，反映 3.0.0 版本的新特性和可能的破坏性更改。
- 在项目的 CHANGELOG.md 文件中添加这些更改的详细说明。
- 如果有 API 变更，请更新相关的类型定义文件。
这将帮助使用这些组件的开发者了解变更并进行必要的适配。
Line range hint
1059-1078: 版本更新可能影响项目稳定性Step 和 Steps 组件的版本更新反映了重要的改进，但也可能引入兼容性问题。
建议：
- 全面测试使用这些组件的所有功能，确保兼容性。
- 考虑提供迁移指南，帮助用户从 2.0.0 版本升级到 3.0.0 版本。
- 在发布新版本时，使用 semver 规范，确保版本号正确反映更改的性质。
- 考虑实施持续集成/持续部署（CI/CD）流程，自动化测试这些组件在不同场景下的表现。
这些措施将有助于确保版本更新的平稳过渡，并维护项目的整体稳定性。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- scripts/rn/copy-file.js (1 hunks)
- src/config.json (2 hunks)
🧰 Additional context used
🔇 Additional comments (3)
scripts/rn/copy-file.js (1)
35-35: 批准更改，但建议进一步验证这个更改看起来是正确的，将 'step' 添加到
childAdaptedArray中符合增强步骤组件以支持多平台的目标。然而，为了确保 'step' 组件的完全适配，建议运行以下脚本来验证：
请运行此脚本并检查输出，以确保 'step' 组件已完全适配多平台支持。
src/config.json (2)
Line range hint
1070-1078: Steps 组件版本更新至 3.0.0Steps 组件的版本也已从 2.0.0 更新到 3.0.0。这同样是一个主要版本更新，可能包含破坏性更改。
请运行以下脚本以验证 Steps 组件的使用是否与新版本兼容：
#!/bin/bash # 描述：检查 Steps 组件的使用情况，确保与 3.0.0 版本兼容 # 测试：搜索 Steps 组件的使用。预期：只有新版本的使用方式。 rg --type typescript --type javascript -e 'import.*Steps.*from' -e 'Steps.*=' -A 5
Line range hint
1059-1065: Step 组件版本更新至 3.0.0Step 组件的版本已从 2.0.0 更新到 3.0.0。这是一个主要版本更新，可能包含破坏性更改。
请运行以下脚本以验证 Step 组件的使用是否与新版本兼容：
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## V3.0 #2547 +/- ##
=======================================
Coverage 83.95% 83.95%
=======================================
Files 221 221
Lines 17849 17849
Branches 2679 2679
=======================================
Hits 14986 14986
Misses 2858 2858
Partials 5 5 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Outside diff range and nitpick comments (2)
src/packages/step/step.scss (2)
8-10: 布局结构优化建议建议考虑使用
align-items: flex-start替代align-items: center，这样可以在内容高度不一致时获得更好的对齐效果。flex-direction: row; justify-content: center; -align-items: center; +align-items: flex-start;
150-152: 条件编译注释建议
/* #ifndef harmony*/的条件编译注释建议添加相关说明，以便其他开发者理解这段代码的用途。-/* #ifndef harmony*/ +/* #ifndef harmony - 处理鸿蒙系统上的transform兼容性问题 */
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
src/config.json(2 hunks)src/packages/step/step.scss(3 hunks)src/packages/step/step.taro.tsx(4 hunks)src/packages/steps/steps.taro.tsx(2 hunks)
🔇 Additional comments (6)
src/packages/steps/steps.taro.tsx (3)
3-3: 新增的导入声明符合多端适配需求
新增的 View 组件和 harmonyAndRn 工具函数的导入，有效支持了组件的多端渲染需求。
Also applies to: 6-6
45-45: 类名条件判断得到优化
将 !!dot 简化为 dot 是个好的改进，因为 dot 本身就是 boolean 类型，无需双重否定。
69-69: 验证空标签包裹的必要性
使用空标签 <> 包裹 renderContent() 的调用可能是不必要的，因为 renderContent 已经返回了完整的 JSX 结构。
建议直接返回 renderContent():
- return <>{renderContent()}</>
+ return renderContent()src/packages/step/step.scss (1)
18-19: 线条定位计算可能存在问题
当前的线条定位计算 calc(100% - $steps-base-line-width / 2) 在某些边界情况下可能会导致对齐问题。建议使用更稳健的计算方式。
✅ Verification successful
Let me gather more context about the step component's styling to better understand the line positioning calculation.
Let me check the variables used in the line positioning calculation.
线条定位计算是合理的，无需修改
经过分析，当前的线条定位计算 calc(100% - $steps-base-line-width / 2) 是合理且稳健的：
$steps-base-line-width被定义为 70%，这是一个合适的默认值- 该计算方式确保了线条能够正确连接相邻步骤的中心点
- 在 RTL（从右到左）布局中也有对应的正确处理
- 组件中的垂直模式也采用了类似的居中计算方式，证明这种计算模式是可靠的
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否存在其他使用类似计算方式的样式
rg "calc\(100%.*\)" -g "*.scss"
Length of output: 700
Script:
#!/bin/bash
# Check the step component's SCSS file for context around the line positioning
cat src/packages/step/step.scss
Length of output: 4936
Script:
#!/bin/bash
# Search for the definition of steps-base-line-width variable
rg "steps-base-line-width" -g "*.scss"
Length of output: 579
src/config.json (1)
1059-1062: 请注意版本升级的兼容性影响
Step 和 Steps 组件从 2.0.0 升级到 3.0.0 版本，这是一个主版本升级，可能包含破坏性更改。建议：
- 确保更新相关文档以反映新版本的变化
- 在发布说明中明确记录任何破坏性更改
- 为使用这些组件的用户提供迁移指南
Also applies to: 1070-1077
src/packages/step/step.taro.tsx (1)
121-125: 验证 icon 和 dot 的逻辑处理
在渲染图标部分时，对 icon 和 dot 的判断影响渲染结果。请确保当 icon 和 dot 都不存在时，组件能够正确显示步骤编号或默认内容。
您可以运行以下脚本以查找代码库中 Step 组件的使用情况，确认渲染逻辑是否正确：
✅ Verification successful
Let me gather more information about the Step component's implementation to verify the icon and dot logic.
Let me try a different approach to check the Step component's implementation.
Let me try one more search with a different pattern to locate the Step component implementation.
icon 和 dot 的渲染逻辑已正确实现
经过代码验证，Step 组件对 icon 和 dot 的处理逻辑是完善的：
- 当存在
icon时，优先渲染icon - 当没有
icon且dot为 false 时，渲染步骤数字 - 当
dot为 true 时，渲染圆点样式
这个实现通过以下代码保证：
{icon || (!dot && (
<Text className={`${classPrefix}-${getCurrentStatus()}-inner`}>
{value}
</Text>
))}组件的渲染优先级和默认显示行为都符合预期，不需要额外修改。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：查找使用 `<Step>` 组件的文件并显示上下文
rg -A 5 '<Step' src/
Length of output: 21693
Script:
#!/bin/bash
# Check the Step component implementation for icon and dot rendering logic
ast-grep --pattern $'const Step = (props) => {
$$$
return (
$$$
)
}'
Length of output: 79
Script:
#!/bin/bash
# Check the Step component's source code
rg -A 30 "const Step = \(props\)" src/packages/step/
Length of output: 54
Script:
#!/bin/bash
# Search for the Step component implementation
cat src/packages/step/step.taro.tsx
Length of output: 4341
| const renderContent = () => { | ||
| if (harmonyAndRn()) { | ||
| return ( | ||
| <View> | ||
| <DataContext.Provider value={parentSteps}> | ||
| <View className={classes} {...(restProps as any)}> | ||
| {children} | ||
| </View> | ||
| </DataContext.Provider> | ||
| </View> | ||
| ) | ||
| } | ||
| return ( | ||
| <DataContext.Provider value={parentSteps}> | ||
| <View className={classes} {...(restProps as any)}> | ||
| {children} | ||
| </View> | ||
| </DataContext.Provider> | ||
| ) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议优化条件渲染逻辑以提高代码可维护性
当前实现中存在重复的 JSX 结构，建议提取共同部分以减少代码重复。
建议如下重构：
const renderContent = () => {
+ const content = (
+ <DataContext.Provider value={parentSteps}>
+ <View className={classes} {...(restProps as any)}>
+ {children}
+ </View>
+ </DataContext.Provider>
+ )
+
if (harmonyAndRn()) {
- return (
- <View>
- <DataContext.Provider value={parentSteps}>
- <View className={classes} {...(restProps as any)}>
- {children}
- </View>
- </DataContext.Provider>
- </View>
- )
+ return <View>{content}</View>
}
- return (
- <DataContext.Provider value={parentSteps}>
- <View className={classes} {...(restProps as any)}>
- {children}
- </View>
- </DataContext.Provider>
- )
+ return content
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const renderContent = () => { | |
| if (harmonyAndRn()) { | |
| return ( | |
| <View> | |
| <DataContext.Provider value={parentSteps}> | |
| <View className={classes} {...(restProps as any)}> | |
| {children} | |
| </View> | |
| </DataContext.Provider> | |
| </View> | |
| ) | |
| } | |
| return ( | |
| <DataContext.Provider value={parentSteps}> | |
| <View className={classes} {...(restProps as any)}> | |
| {children} | |
| </View> | |
| </DataContext.Provider> | |
| ) | |
| } | |
| const renderContent = () => { | |
| const content = ( | |
| <DataContext.Provider value={parentSteps}> | |
| <View className={classes} {...(restProps as any)}> | |
| {children} | |
| </View> | |
| </DataContext.Provider> | |
| ) | |
| if (harmonyAndRn()) { | |
| return <View>{content}</View> | |
| } | |
| return content | |
| } |
| display: flex; | ||
| flex-wrap: wrap; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
描述区域布局改进
将 description 改为 flex 布局是个好的改进，但建议添加 word-break: break-word 属性以更好地处理长文本。
display: flex;
flex-wrap: wrap;
+word-break: break-word;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| display: flex; | |
| flex-wrap: wrap; | |
| display: flex; | |
| flex-wrap: wrap; | |
| word-break: break-word; |
| // 3种状态 | ||
| &-process { | ||
| &-icon { | ||
| background-color: $steps-process-icon-bg-color; | ||
| border-color: $steps-process-icon-bg-color; | ||
| color: $steps-process-icon-color; | ||
| } | ||
|
|
||
| .nut-step-title { | ||
| &-title { | ||
| color: $steps-process-title-color; | ||
| font-size: $steps-process-title-font-size; | ||
| font-weight: $steps-process-title-font-weight; | ||
| } | ||
|
|
||
| .nut-step-description { | ||
| &-inner { | ||
| color: $steps-process-icon-color; | ||
| } | ||
| &-description { | ||
| color: $steps-process-description-color; | ||
| } | ||
| } | ||
|
|
||
| &.nut-step-wait { | ||
| .nut-step-title { | ||
| color: $steps-wait-title-color; | ||
| &-finish { | ||
| &-description { | ||
| color: $steps-process-description-color; | ||
| } | ||
|
|
||
| .nut-step-description { | ||
| color: $steps-wait-description-color; | ||
| &-description { | ||
| color: $steps-finish-description-color; | ||
| } | ||
| } | ||
|
|
||
| &.nut-step-finish { | ||
| .nut-step-icon { | ||
| &-title { | ||
| color: $steps-finish-icon-color; | ||
| } | ||
| &-icon { | ||
| border-width: 1px; | ||
| background-color: $steps-finish-icon-bg-color; | ||
| border-color: $steps-finish-icon-border-color; | ||
| color: $steps-finish-icon-color; | ||
| } | ||
|
|
||
| .nut-step-line { | ||
| background: $steps-finish-line-background; | ||
| } | ||
|
|
||
| .nut-step-title { | ||
| color: $steps-finish-title-color; | ||
| &-line { | ||
| background-color: $steps-finish-line-background; | ||
| } | ||
|
|
||
| .nut-step-description { | ||
| color: $steps-finish-description-color; | ||
| &-inner { | ||
| color: $steps-finish-icon-color; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .nut-steps-dot { | ||
| .nut-step-head { | ||
| margin: $steps-dot-head-margin; | ||
| } | ||
|
|
||
| .nut-step-line { | ||
| top: 7px; | ||
| } | ||
|
|
||
| .nut-step-icon { | ||
| width: $steps-dot-icon-width; | ||
| height: $steps-dot-icon-height; | ||
| border: $steps-dot-icon-border; | ||
| border-radius: 50%; | ||
| box-sizing: content-box; | ||
| &-wait { | ||
| &-inner { | ||
| color: $steps-wait-icon-color; | ||
| } | ||
| &-description { | ||
| color: $steps-wait-description-color; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
状态样式结构优化
状态相关的样式组织结构清晰，但建议将颜色值抽取为变量，便于主题定制。另外，建议添加状态切换动画以提升用户体验。
&-process {
&-icon {
background-color: $steps-process-icon-bg-color;
border-color: $steps-process-icon-bg-color;
color: $steps-process-icon-color;
+ transition: all 0.3s ease-in-out;
}Committable suggestion skipped: line range outside the PR's diff.
| // 垂直模式 | ||
| &-vertical { | ||
| display: flex; | ||
| height: 33.34%; | ||
| } | ||
|
|
||
| .nut-step-line { | ||
| position: absolute; | ||
| display: inline-block; | ||
| width: 1px; | ||
| height: $steps-base-line-width; | ||
| background: $steps-base-line-background; | ||
| top: calc( | ||
| $steps-base-icon-height + | ||
| (100% - $steps-base-line-width - $steps-base-icon-margin-bottom) / 2 | ||
| ); | ||
| left: calc(50% - 1px); | ||
| } | ||
|
|
||
| &.nut-steps-dot { | ||
| .nut-step-line { | ||
| top: calc($steps-dot-icon-height + (100% - $steps-base-line-width) / 2); | ||
| flex-direction: row; | ||
| align-items: start; | ||
| position: relative; | ||
| &-line { | ||
| position: absolute; | ||
| top: 150%; | ||
| width: 1px; | ||
| height: 50px; | ||
| background: $steps-base-line-background; | ||
| left: calc(50% - 1px); | ||
| } | ||
|
|
||
| &-main { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: start; | ||
| padding-left: 6%; | ||
| text-align: start; | ||
| position: relative; | ||
| bottom: 5px; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
垂直模式布局建议
垂直模式的实现存在以下问题：
bottom: 5px使用固定值可能导致不同尺寸下的对齐问题- 建议使用 CSS 变量来控制间距，便于响应式调整
&-vertical {
&-main {
display: flex;
flex-direction: column;
align-items: start;
- padding-left: 6%;
+ padding-left: var(--nut-step-vertical-padding, 6%);
text-align: start;
position: relative;
- bottom: 5px;
+ bottom: var(--nut-step-vertical-offset, 5px);
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // 垂直模式 | |
| &-vertical { | |
| display: flex; | |
| height: 33.34%; | |
| } | |
| .nut-step-line { | |
| position: absolute; | |
| display: inline-block; | |
| width: 1px; | |
| height: $steps-base-line-width; | |
| background: $steps-base-line-background; | |
| top: calc( | |
| $steps-base-icon-height + | |
| (100% - $steps-base-line-width - $steps-base-icon-margin-bottom) / 2 | |
| ); | |
| left: calc(50% - 1px); | |
| } | |
| &.nut-steps-dot { | |
| .nut-step-line { | |
| top: calc($steps-dot-icon-height + (100% - $steps-base-line-width) / 2); | |
| flex-direction: row; | |
| align-items: start; | |
| position: relative; | |
| &-line { | |
| position: absolute; | |
| top: 150%; | |
| width: 1px; | |
| height: 50px; | |
| background: $steps-base-line-background; | |
| left: calc(50% - 1px); | |
| } | |
| &-main { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: start; | |
| padding-left: 6%; | |
| text-align: start; | |
| position: relative; | |
| bottom: 5px; | |
| } | |
| // 垂直模式 | |
| &-vertical { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: start; | |
| position: relative; | |
| &-line { | |
| position: absolute; | |
| top: 150%; | |
| width: 1px; | |
| height: 50px; | |
| background: $steps-base-line-background; | |
| left: calc(50% - 1px); | |
| } | |
| &-main { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: start; | |
| padding-left: var(--nut-step-vertical-padding, 6%); | |
| text-align: start; | |
| position: relative; | |
| bottom: var(--nut-step-vertical-offset, 5px); | |
| } |
| const isLastItem = | ||
| parent.propSteps.children[parent.propSteps.children.length - 1].props | ||
| .value === value |
There was a problem hiding this comment.
注意添加空值检查以防止运行时错误
在确定 isLastItem 时，如果 parent.propSteps.children 未定义或为空数组，访问 parent.propSteps.children[parent.propSteps.children.length - 1] 可能会导致运行时错误。建议在访问前添加检查，确保 parent.propSteps.children 存在且长度大于 0。
| const renderLineStyle = () => { | ||
| const isLastItem = | ||
| parent.propSteps.children[parent.propSteps.children.length - 1].props | ||
| .value === value | ||
| const leftPosition = 100 - lineWidth / 2 | ||
| if (isLastItem) { | ||
| return { display: 'none' } | ||
| } | ||
| if (harmony()) { | ||
| if (direction === 'vertical') { | ||
| return dot | ||
| ? { | ||
| left: pxTransform(2), | ||
| } | ||
| : { | ||
| left: '50%', | ||
| } | ||
| } | ||
| return { | ||
| left: `${leftPosition}%`, | ||
| top: pxTransform(dot ? 3 : 12.5), | ||
| } | ||
| } | ||
| if (rn()) { | ||
| return direction === 'vertical' | ||
| ? { | ||
| left: '50%', | ||
| top: dot ? '30%' : '40%', | ||
| } | ||
| : { | ||
| left: `${leftPosition}%`, | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
简化 renderLineStyle 函数的嵌套条件
renderLineStyle 函数中包含较多嵌套的条件判断，可能影响代码的可读性和维护性。建议重构此函数，简化条件逻辑，例如合并相似的条件或使用策略模式，提高代码清晰度。
| const parent: any = useContext(DataContext) | ||
|
|
||
| const dot = parent.propSteps.dot | ||
| const { dot, direction } = parent.propSteps |
There was a problem hiding this comment.
确保从 parent.propSteps 获取的属性安全
在解构 parent.propSteps 时，直接获取了 dot 和 direction 属性。请确保 parent.propSteps 存在且包含这些属性，以避免出现 undefined 错误。
纯 H5 布局错误。
|
|
鸿蒙构建再检查一下 |
|
收到。 |
🤔 这个变动的性质是？
Summary by CodeRabbit
新功能
lineWidth属性以增强Step组件的灵活性。样式改进
.nut-step组件的样式进行全面优化，提高了响应式设计与视觉层次。文档更新
其他