refactor(steps): 拆分横向和纵向 #2734
refactor(steps): 拆分横向和纵向 #2734
Conversation
Walkthrough此次更改主要涉及对 Changes
Suggested labels
Suggested reviewers
Warning There were issues while running the following tools: 🔧 eslintpackages/nutui-taro-demo/src/app.config.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "taro/react" to extend from. Please check that the name of the config is correct. The config "taro/react" was referenced from the config file in "/packages/nutui-taro-demo/.eslintrc". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. 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 @@
## V3.0 #2734 +/- ##
=======================================
Coverage 83.98% 83.98%
=======================================
Files 221 221
Lines 17867 17867
Branches 2676 2676
=======================================
Hits 15005 15005
Misses 2857 2857
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: 13
🧹 Outside diff range and nitpick comments (32)
src/packages/verticalsteps/demos/h5/demo1.tsx (1)
Line range hint
7-19: 建议添加类型定义和状态管理当前实现功能正确，但可以通过以下方式增强代码：
- 为value添加类型定义
- 考虑使用状态管理来控制步骤值
建议按照以下方式重构：
-const Demo1 = () => { +const Demo1: React.FC = () => { + const [activeStep, setActiveStep] = React.useState<number>(2); return ( <div style={{ height: '300px', padding: '15px 30px 0' }}> - <VerticalSteps value={2}> + <VerticalSteps value={activeStep}>src/packages/verticalsteps/demos/taro/demo1.tsx (1)
Line range hint
7-20: 建议优化样式以提高响应性当前的固定高度和内边距可能在不同屏幕尺寸下表现不一致。建议考虑使用相对单位或响应式布局。
建议修改如下：
- <View style={{ height: '300px', padding: '15px 30px 0' }}> + <View style={{ minHeight: '300px', padding: '15px 4% 0' }}>src/packages/verticalsteps/demo.tsx (1)
25-37: 建议增强组件的可访问性为了提升可访问性，建议添加适当的 ARIA 属性和语义化结构。
建议按如下方式优化代码：
- <div className="demo full bg-w"> + <div className="demo full bg-w" role="region" aria-label={translated.basic}> - <h2>{translated.basic}</h2> + <h2 id="basic-usage">{translated.basic}</h2> - <Demo1 /> + <Demo1 aria-labelledby="basic-usage" /> // 对其他部分进行类似处理 </div>src/packages/steps/steps.scss (2)
3-27: 建议为复杂的样式计算添加更详细的注释样式结构清晰，使用 flex 布局合理。但是对于步骤条连接线（line）的定位计算较为复杂，建议添加更详细的注释说明计算原理和各个变量的作用。
建议添加如下注释：
// 计算方法：left = calc(50% + (100% - $steps-base-line-width) / 2) // 如 width=70%时，left=65%; width=100%,left=50%; +// 说明： +// 1. 50%：将线条起点定位到步骤中心 +// 2. (100% - $steps-base-line-width) / 2：补偿线条宽度，确保线条在步骤之间均匀分布 +// 3. 变量说明： +// - $steps-base-line-width: 线条宽度 +// - $steps-base-line-height: 线条高度 +// - $steps-base-icon-height: 图标高度
28-36: 建议优化点状步骤条的样式性能当前实现正确，但可以通过使用 transform 来优化性能。
建议修改如下：
.nut-step-line { - top: 50%; - bottom: -50%; + top: 50%; + transform: translateY(-50%); }src/packages/steps/steps.taro.tsx (1)
33-34: 建议提取类名常量硬编码的类名可以提取为常量，以提高可维护性。
建议应用以下更改：
const classPrefix = `nut-steps` +const HORIZONTAL_CLASS = `${classPrefix}-horizontal` +const HORIZONTAL_DOT_CLASS = `${classPrefix}-horizontal-dot` +const DOT_CLASS = `${classPrefix}-dot` const classes = classNames( classPrefix, { - [`${classPrefix}-horizontal`]: true, - [`${classPrefix}-horizontal-dot`]: !!dot, - [`${classPrefix}-dot`]: !!dot, + [HORIZONTAL_CLASS]: true, + [HORIZONTAL_DOT_CLASS]: !!dot, + [DOT_CLASS]: !!dot, }, className )src/packages/steps/steps.tsx (1)
6-10: 建议完善类型定义为了提高代码的可维护性，建议：
- 为
value和onStepClick添加详细的 JSDoc 注释- 考虑为
onStepClick的返回值添加类型定义export interface StepsProps extends BasicComponent { + /** 当前步骤索引值 */ value: number + /** 是否显示点状步骤条 */ dot: boolean + /** 点击步骤时触发的回调函数 + * @param index 步骤索引 + */ onStepClick: (index: number) => void }src/packages/verticalsteps/demo.taro.tsx (3)
1-8: 建议优化导入语句的组织结构建议将导入语句按以下顺序分组：
- 外部依赖（React, Taro）
- 框架组件（@tarojs/components）
- 内部工具和组件（locale, header）
- 本地组件（demos）
每组之间添加一个空行以提高可读性。
import React from 'react' import Taro from '@tarojs/taro' + import { ScrollView, View } from '@tarojs/components' + import { useTranslate } from '@/sites/assets/locale/taro' import Header from '@/sites/components/header' + import Demo1 from './demos/taro/demo1' import Demo2 from './demos/taro/demo2' import Demo3 from './demos/taro/demo3'
11-27: 建议添加类型定义以增强类型安全性为翻译对象添加接口定义，可以在编译时捕获潜在的翻译键错误。
+interface Translations { + basic: string + dot: string + customIcon: string +} + const [translated] = useTranslate({ 'zh-CN': { basic: '基础用法', dot: '基础用法：点状', customIcon: '自定义图标', - }, + } as Translations, 'zh-TW': { basic: '基础用法', dot: '基础用法：点状', customIcon: '自定義圖標', - }, + } as Translations, 'en-US': { basic: 'Basic usage', dot: 'Basic usage: Dot', customIcon: 'custom Icon', - }, + } as Translations, })
31-33: 建议优化环境检查和类名处理当前的环境检查和类名拼接可以更加优雅。
+const isWeb = Taro.getEnv() === 'WEB' +const scrollViewClass = ['demo', 'bg-w', isWeb && 'web'].filter(Boolean).join(' ') + <ScrollView - className={`demo bg-w ${Taro.getEnv() === 'WEB' ? 'web' : ''}`} + className={scrollViewClass} >src/packages/verticalsteps/verticalsteps.taro.tsx (2)
12-17: 建议添加属性注释为了提高代码可维护性，建议为 defaultProps 添加 JSDoc 注释，说明每个属性的用途和可选值。
+/** + * @property {number} value - 当前步骤的索引值 + * @property {boolean} dot - 是否显示点状步骤条 + */ const defaultProps = { ...ComponentDefaults, value: 0, dot: false, } as VerticalStepsProps
18-46: 建议优化性能组件实现逻辑清晰，但建议添加以下优化：
- 使用 useMemo 缓存 parentSteps 对象
- 使用 useCallback 包装 onStepClick 回调
export const VerticalSteps: FunctionComponent< Partial<VerticalStepsProps> & React.HTMLAttributes<HTMLDivElement> > = (props) => { const propSteps = { ...defaultProps, ...props } const { children, value, className, dot, onStepClick, ...restProps } = propSteps - const parentSteps = { + const parentSteps = useMemo(() => ({ propSteps, - } + }), [propSteps])src/packages/verticalsteps/verticalsteps.tsx (1)
6-10: 建议增加属性文档和类型约束为了提高代码的可维护性和类型安全性，建议：
- 为接口和每个属性添加 JSDoc 注释
- 为
value添加范围约束建议按如下方式修改：
+/** + * VerticalSteps 组件的属性接口 + */ export interface VerticalStepsProps extends BasicComponent { + /** 当前步骤，从0开始计数 */ value: number + /** 是否显示点状步骤条 */ dot: boolean + /** 点击步骤时的回调函数 */ onStepClick: (index: number) => void }src/packages/steps/demo.taro.tsx (1)
Line range hint
1-48: 代码结构调整符合重构目标移除垂直步骤条相关的演示和翻译内容，使组件职责更加清晰。这种拆分有助于提高代码的可维护性和复用性。
建议在文档中添加一个跳转链接，指向新的 VerticalSteps 组件，方便用户查找垂直布局的实现方式。
src/packages/step/step.tsx (1)
Line range hint
1-89: 建议添加组件关系说明考虑在组件文档中添加与 Steps 和 VerticalSteps 的关系说明，以便开发者更好地理解组件的使用场景。
建议在组件顶部添加以下注释：
import React, { FunctionComponent, ReactNode, useContext } from 'react' +/** + * Step 组件 + * + * 作为 Steps 或 VerticalSteps 的子组件使用，用于展示单个步骤项 + * @example + * <Steps> + * <Step title="步骤1" /> + * </Steps> + * + * <VerticalSteps> + * <Step title="步骤1" /> + * </VerticalSteps> + */src/packages/step/step.taro.tsx (1)
Line range hint
31-36: 建议增强类型安全性以下几处代码可以通过 TypeScript 类型定义来增强类型安全性：
- getCurrentStatus 函数的返回值类型
- handleClickStep 函数的类型定义
- 步骤状态的字符串字面量类型
建议应用以下改进：
+type StepStatus = 'finish' | 'process' | 'wait' -const getCurrentStatus = () => { +const getCurrentStatus = (): StepStatus => { const index = value if (index < +parent.propSteps.value) return 'finish' return index === +parent.propSteps.value ? 'process' : 'wait' } -const handleClickStep = () => { +const handleClickStep = (): void => { parent.propSteps?.onStepClick && parent.propSteps?.onStepClick(value) }Also applies to: 38-40
src/packages/step/step.harmony.css (2)
16-17: 建议统一使用CSS变量来管理主题颜色建议将颜色值抽取为CSS变量，这样可以更好地管理主题，提高代码的可维护性和复用性。
+:root { + --nut-step-default-color: #888b94; +} .nut-step-icon { - background-color: #888b94; - border-color: #888b94; + background-color: var(--nut-step-default-color); + border-color: var(--nut-step-default-color); }
94-94: 点状步骤条样式优化建议点状步骤条的样式实现较为复杂，建议考虑使用伪元素简化实现。同时，透明度值0.23看起来比较特殊，建议考虑使用更常见的值如0.2或0.25。
.nut-steps-dot .nut-step-process .nut-step-icon:before { background-color: var(--nut-brand-color); - opacity: 0.23; + opacity: 0.25; }Also applies to: 98-98, 113-113
src/packages/verticalsteps/doc.taro.md (2)
1-4: 建议补充组件使用场景说明建议在组件介绍部分补充具体的使用场景说明，例如订单流程、任务进度等，以帮助开发者更好地理解组件的应用场景。
21-35: 建议为示例添加更详细的说明每个示例代码块前建议添加简要说明，描述该示例的具体用途和特点，以便开发者快速理解不同场景下的使用方法。
src/packages/verticalsteps/doc.md (1)
63-63: 修复 ConfigProvider 组件链接链接片段
#/zh-CN/component/configprovider格式不正确。建议更新为正确的相对路径。-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。 +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](../configprovider/doc.md)。🧰 Tools
🪛 Markdownlint
63-63: null
Link fragments should be valid(MD051, link-fragments)
src/packages/verticalsteps/verticalsteps.harmony.css (3)
1-45: 建议使用 CSS 自定义属性（CSS Variables）提高可维护性建议将颜色值、尺寸等常用样式值抽取为 CSS 自定义属性，这样可以：
- 统一管理主题相关的样式值
- 方便后续的样式调整和主题定制
- 提高代码的可维护性
+ :root { + --nut-step-primary-color: #ff0f23; + --nut-step-wait-color: #888b94; + --nut-step-title-color: #1a1a1a; + --nut-step-desc-color: #505259; + --nut-step-icon-size: 25px; + --nut-step-title-font-size: 14px; + --nut-step-desc-font-size: 12px; + } .nut-step-icon { - width: 25px; - height: 25px; + width: var(--nut-step-icon-size); + height: var(--nut-step-icon-size); - background-color: #888b94; - border-color: #888b94; + background-color: var(--nut-step-wait-color); + border-color: var(--nut-step-wait-color); /* ... */ }
83-116: 建议优化圆点样式的实现方式当前圆点样式实现较为复杂，存在以下问题：
- 使用固定像素值可能影响响应式设计
- 伪元素的定位逻辑复杂
- 样式计算和维护成本高
建议：
- 使用 CSS transform 代替 margin 进行居中定位
- 使用相对单位（如 em）替代固定像素值
- 简化伪元素的样式结构
.nut-steps-dot .nut-step-process .nut-step-icon:before { content: ""; display: inline-block; position: absolute; - left: 50%; - top: 50%; - margin-left: -7px; - margin-top: -7px; + left: 0; + top: 0; + transform: scale(2.3); width: 14px; height: 14px; background-color: #ff0f23; border-radius: 50%; opacity: 0.23; }
149-158: 建议使用 CSS 逻辑属性优化 RTL 支持当前 RTL 支持的实现可以通过使用 CSS 逻辑属性进行优化，这样可以：
- 减少重复代码
- 提高可维护性
- 更好地支持不同书写模式
建议使用 CSS 逻辑属性替代物理属性：
.nut-steps-vertical .nut-step-line { - left: calc(50% - 1px); + inset-inline-start: calc(50% - 1px); } .nut-steps-vertical .nut-step-main { - padding: 0 0 0 6%; + padding-inline-start: 6%; text-align: start; } - [dir=rtl] .nut-steps-vertical .nut-step-line, - .nut-rtl .nut-steps-vertical .nut-step-line { - left: auto; - right: calc(50% - 1px); - } - [dir=rtl] .nut-steps-vertical .nut-step-main, - .nut-rtl .nut-steps-vertical .nut-step-main { - padding-left: 0; - padding-right: 6%; - }src/packages/verticalsteps/doc.en-US.md (2)
1-4: 建议补充垂直步骤条的使用场景说明为了帮助用户更好地选择合适的步骤条组件，建议在介绍部分补充垂直步骤条相比水平步骤条更适合的具体场景说明。
56-56: 建议完善 onStepClick 属性的说明建议补充 index 参数的取值范围说明，以及点击事件在不同步骤状态下的触发行为说明。
src/packages/verticalsteps/__tests__/steps.spec.tsx (5)
9-14: 重复的测试用例标题需要修改两个测试用例使用了相同的描述 "should render horizontal class when props direction is to be horizontal"，这会降低测试报告的可读性。建议修改第二个测试用例的描述以反映其实际测试内容（测试 step-process 类的渲染）。
-test('should render horizontal class when props direction is to be horizontal', () => { +test('should render process class for current step', () => {Also applies to: 16-33
35-38: 建议增加更多的 dot 模式测试用例当前仅测试了 dot 属性的类名渲染，建议添加更多测试用例来验证 dot 模式下的具体展示效果和交互行为。
80-126: 建议优化状态更新测试当前的状态更新测试可以更加完整：
- 建议测试循环到最大值后重置到初始值的场景
- 建议验证每个步骤的状态（完成、进行中、未开始）
建议添加以下测试场景：
// 测试完整循环 fireEvent.click(getByText('下一步')) expect(container.querySelectorAll('.nut-step')[0]).toHaveClass('nut-step-finish') expect(container.querySelectorAll('.nut-step')[1]).toHaveClass('nut-step-process') expect(container.querySelectorAll('.nut-step')[2]).toHaveClass('nut-step-wait') // 测试重置 fireEvent.click(getByText('下一步')) fireEvent.click(getByText('下一步')) expect(container.querySelectorAll('.nut-step')[0]).toHaveClass('nut-step-process')
128-153: 建议增强点击事件测试当前的点击事件测试可以更加完善：
- 建议验证回调函数的参数值
- 建议测试禁用状态下的点击事件
建议修改测试用例如下：
test('should handle step click correctly', () => { const handleClickStep = vi.fn() const { getByText } = render( <VerticalSteps value={1} onStepClick={handleClickStep}> <Step value={1} title="已完成">1</Step> <Step value={2} title="进行中">2</Step> <Step value={3} title="未开始" disabled>3</Step> </VerticalSteps> ) // 测试正常点击 fireEvent.click(getByText('2')) expect(handleClickStep).toHaveBeenCalledWith(2) // 测试禁用状态 fireEvent.click(getByText('3')) expect(handleClickStep).toHaveBeenCalledTimes(1) })
155-186: 建议增加更多的插槽测试场景当前的插槽测试仅覆盖了 description 的自定义渲染，建议添加其他插槽的测试，如 title 和 icon 的自定义渲染。
建议添加以下测试场景：
test('render custom slots', () => { const { container } = render( <VerticalSteps value={1}> <Step value={1} title={<span className="custom-title">自定义标题</span>} icon={<span className="custom-icon">图标</span>} /> </VerticalSteps> ) expect(container.querySelector('.custom-title')).toBeTruthy() expect(container.querySelector('.custom-icon')).toBeTruthy() })src/styles/variables.scss (1)
1311-1314: 新增垂直步骤条点状头部外边距变量变量定义正确且符合命名规范。建议添加注释说明该变量的用途。
添加如下注释以提高代码可维护性：
+// 垂直步骤条点状头部外边距 $verticalsteps-dot-head-margin: var( --nutui-verticalsteps-dot-head-margin, 5px 0 ) !default;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (38)
packages/nutui-taro-demo/src/app.config.ts(2 hunks)src/config.json(1 hunks)src/packages/step/step.harmony.css(5 hunks)src/packages/step/step.scss(0 hunks)src/packages/step/step.taro.tsx(1 hunks)src/packages/step/step.tsx(1 hunks)src/packages/steps/demo.taro.tsx(1 hunks)src/packages/steps/demo.tsx(0 hunks)src/packages/steps/demos/h5/demo9.tsx(0 hunks)src/packages/steps/demos/taro/demo9.tsx(0 hunks)src/packages/steps/doc.en-US.md(0 hunks)src/packages/steps/doc.md(0 hunks)src/packages/steps/doc.taro.md(1 hunks)src/packages/steps/doc.zh-TW.md(0 hunks)src/packages/steps/steps.harmony.css(1 hunks)src/packages/steps/steps.scss(1 hunks)src/packages/steps/steps.taro.tsx(2 hunks)src/packages/steps/steps.tsx(2 hunks)src/packages/verticalsteps/__tests__/steps.spec.tsx(1 hunks)src/packages/verticalsteps/demo.taro.tsx(1 hunks)src/packages/verticalsteps/demo.tsx(1 hunks)src/packages/verticalsteps/demos/h5/demo1.tsx(2 hunks)src/packages/verticalsteps/demos/h5/demo2.tsx(1 hunks)src/packages/verticalsteps/demos/h5/demo3.tsx(1 hunks)src/packages/verticalsteps/demos/taro/demo1.tsx(2 hunks)src/packages/verticalsteps/demos/taro/demo2.tsx(1 hunks)src/packages/verticalsteps/demos/taro/demo3.tsx(1 hunks)src/packages/verticalsteps/doc.en-US.md(1 hunks)src/packages/verticalsteps/doc.md(1 hunks)src/packages/verticalsteps/doc.taro.md(1 hunks)src/packages/verticalsteps/doc.zh-TW.md(1 hunks)src/packages/verticalsteps/index.taro.ts(1 hunks)src/packages/verticalsteps/index.ts(1 hunks)src/packages/verticalsteps/verticalsteps.harmony.css(1 hunks)src/packages/verticalsteps/verticalsteps.scss(1 hunks)src/packages/verticalsteps/verticalsteps.taro.tsx(1 hunks)src/packages/verticalsteps/verticalsteps.tsx(1 hunks)src/styles/variables.scss(1 hunks)
💤 Files with no reviewable changes (7)
- src/packages/step/step.scss
- src/packages/steps/demo.tsx
- src/packages/steps/demos/h5/demo9.tsx
- src/packages/steps/demos/taro/demo9.tsx
- src/packages/steps/doc.en-US.md
- src/packages/steps/doc.md
- src/packages/steps/doc.zh-TW.md
✅ Files skipped from review due to trivial changes (8)
- packages/nutui-taro-demo/src/app.config.ts
- src/packages/verticalsteps/demos/h5/demo2.tsx
- src/packages/verticalsteps/demos/h5/demo3.tsx
- src/packages/verticalsteps/demos/taro/demo2.tsx
- src/packages/verticalsteps/demos/taro/demo3.tsx
- src/packages/verticalsteps/index.taro.ts
- src/packages/verticalsteps/index.ts
- src/packages/verticalsteps/verticalsteps.scss
🧰 Additional context used
🪛 Markdownlint
src/packages/steps/doc.taro.md
95-95: null
Link fragments should be valid
(MD051, link-fragments)
src/packages/verticalsteps/doc.en-US.md
62-62: null
Link fragments should be valid
(MD051, link-fragments)
src/packages/verticalsteps/doc.md
63-63: null
Link fragments should be valid
(MD051, link-fragments)
src/packages/verticalsteps/doc.taro.md
63-63: null
Link fragments should be valid
(MD051, link-fragments)
src/packages/verticalsteps/doc.zh-TW.md
63-63: null
Link fragments should be valid
(MD051, link-fragments)
🪛 Biome
src/packages/steps/steps.harmony.css
[error] 124-124: Unexpected shorthand property flex after flex-grow
(lint/suspicious/noShorthandPropertyOverrides)
[error] 124-124: Unexpected shorthand property flex after flex-shrink
(lint/suspicious/noShorthandPropertyOverrides)
🔇 Additional comments (27)
src/packages/verticalsteps/demos/h5/demo1.tsx (2)
1-4: 导入声明和组件重命名看起来不错！
组件重命名和导入更改符合将步骤组件拆分为横向和纵向的重构目标。
6-6: 建议验证样式更改的影响
移除了底部内边距可能会影响组件在某些场景下的显示效果，建议确认以下几点：
- 内容是否会过于贴近容器底部
- 是否会影响最后一个步骤的显示
✅ Verification successful
样式设置符合组件规范
经过验证，所有demo文件（H5和Taro版本）都采用了相同的padding设置 15px 30px 0，这表明这是一个经过设计和测试的标准样式。移除底部内边距是有意为之的统一设计决策，不会对组件显示造成负面影响。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他demo文件中是否有类似的样式设置
rg -g '*.tsx' -g '*.jsx' "padding: '15px 30px 0'"
Length of output: 714
Script:
#!/bin/bash
# 检查组件的其他版本中是否有不同的padding设置
rg -g '*.tsx' -g '*.jsx' "padding: '.+'" src/packages/verticalsteps/
# 检查组件的内容结构
ast-grep --pattern $'<$_>
<Steps $$$>
$$$
</Steps>
</($_)>'
Length of output: 802
src/packages/verticalsteps/demos/taro/demo1.tsx (2)
3-5: 导入声明和组件重命名看起来不错！
组件的重命名和导入更改符合重构目标，使代码结构更清晰。
24-24: 导出语句修改正确！
组件导出名称的更新与组件重命名保持一致。
src/packages/verticalsteps/demo.tsx (3)
1-5: 导入语句结构清晰！
导入模块的组织结构合理，将演示组件分离到单独的文件中是个好的实践。
7-24: 国际化实现完整规范！
翻译配置完整覆盖了简体中文、繁体中文和英文，键值对应合理。
39-39: 导出语句正确！
组件导出方式符合规范。
src/packages/steps/steps.scss (1)
39-44: RTL 支持实现完善
对右到左布局的支持考虑周全，同时支持 dir 属性和 class 选择器，符合最佳实践。
src/packages/steps/steps.taro.tsx (3)
22-23: 属性解构更新符合重构目标
从属性解构中移除 direction 属性符合将步骤组件拆分为横向和纵向的重构目标。代码更简洁明了。
6-10: 接口定义清晰明确
StepsProps 接口定义简洁且职责单一，移除 direction 属性后更符合单一职责原则。
3-3: 导入路径变更需要验证
DataContext 的导入路径已从相对路径更改。需要确保此更改在所有环境中都能正常工作。
✅ Verification successful
导入路径正确且一致
经验证，DataContext 确实定义在 src/packages/step/context.ts 中，且其他使用此上下文的组件（包括 Steps 和 VerticalSteps）都使用了相同的相对路径导入方式。导入路径的变更是安全的。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证 DataContext 的导入是否在其他文件中也进行了相应更新
rg -l "from '\.\./step/context'"
Length of output: 198
Script:
#!/bin/bash
# 检查 DataContext 的实际定义位置
rg -l "export.*DataContext"
# 检查 context.ts 文件的位置
fd "context.ts"
Length of output: 546
Script:
#!/bin/bash
# 检查 step/context.ts 中 DataContext 的具体定义
cat src/packages/step/context.ts
Length of output: 118
src/packages/steps/steps.tsx (3)
22-23:
移除 direction 属性是否会影响现有用户？
从 Props 中移除了 direction 属性，这可能是一个破坏性更改。建议：
- 在更新日志中说明此变更
- 考虑在下一个主版本发布此更改
#!/bin/bash
# 检查是否有其他组件或测试用例依赖 direction 属性
rg "direction.*?['\"]horizontal['\"]|direction.*?['\"]vertical['\"]" "src/packages/"33-34: 验证新增的 CSS 类名是否已定义
新增了 nut-steps-horizontal 和 nut-steps-horizontal-dot 类名，请确保：
- 相应的 CSS 样式已经定义
- 样式符合设计规范
#!/bin/bash
# 检查 CSS 文件中是否定义了新的类名
rg "nut-steps-horizontal|nut-steps-horizontal-dot" "src/packages/steps/*.scss"3-3: 请验证 DataContext 的导入路径
确保从 '../step/context' 导入 DataContext 的新路径是正确的，并且在所有构建环境中都能正常工作。
✅ Verification successful
DataContext 导入路径验证完成
从验证结果来看：
- DataContext 确实在
src/packages/step/context.ts中正确导出 - 在
steps.tsx中正确使用了 DataContext.Provider - 新的导入路径 '../step/context' 是有效且正确的
因此导入路径的变更是安全的。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证 DataContext 导出是否存在
rg -l "export.*DataContext" "src/packages/step/"
Length of output: 240
Script:
#!/bin/bash
# 使用 fd 查找 DataContext 相关文件
fd -t f "context.ts" "src/packages/step"
# 查找 DataContext 的导出
rg -l "export.*DataContext" "src/packages"
# 查找 DataContext 的使用
rg -l "DataContext" "src/packages"
Length of output: 646
Script:
#!/bin/bash
# 检查 step/context.ts 中的 DataContext 定义
rg -A 5 "export.*DataContext" "src/packages/step/context.ts"
# 检查 steps.tsx 中 DataContext 的使用
rg -A 5 "DataContext" "src/packages/steps/steps.tsx"
Length of output: 550
src/packages/verticalsteps/demo.taro.tsx (1)
45-45: 导出语句正确且符合规范
组件的默认导出符合 React 组件的常见实践。
src/packages/verticalsteps/verticalsteps.taro.tsx (2)
1-10: 类型定义设计合理！
接口设计简洁明确，类型定义完整，继承了 BasicComponent 基础组件接口。
48-48: 设置 displayName 有助于调试！
为组件设置 displayName 是一个很好的实践，有助于在开发工具中识别组件。
src/packages/verticalsteps/verticalsteps.tsx (3)
1-5: 导入声明看起来很完整！
导入声明包含了所有必要的依赖，并且遵循了最佳实践。
12-17: 默认属性设置合理！
默认值的设置符合组件的预期使用场景。
48-48: displayName 设置正确！
组件名称设置符合 React 最佳实践。
src/packages/steps/demo.taro.tsx (1)
49-49: 验证布局样式变更的影响
移除了 ScrollView 的 full 类名，这可能会影响组件的布局表现。
src/packages/step/step.tsx (1)
3-3: 验证 context 文件的新路径
导入路径的更改符合重构目标。但是需要确保 context 文件在新位置正确存在。
运行以下脚本验证新的 context 文件位置：
✅ Verification successful
导入路径更改已正确实施
导入路径的更改是安全的，因为：
- context 文件已存在于新位置
src/packages/step/context.ts - 其他组件（steps 和 verticalsteps）已经在使用正确的相对路径
../step/context - 没有发现任何组件仍在使用旧的导入路径
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证 context 文件是否存在于新路径，以及是否有其他组件仍在使用旧路径
# 测试：检查新的 context 文件是否存在
fd --type f "context.ts" "src/packages/step"
# 测试：检查是否有其他文件仍在使用旧的导入路径
rg "@/packages/steps/context" "src/packages"
Length of output: 114
Script:
#!/bin/bash
# 检查 context 文件的内容和其他可能的引用
cat src/packages/step/context.ts
# 检查是否有其他文件引用了 context
rg -l "DataContext" "src/packages"
# 检查是否有使用旧的 steps 目录的文件
fd --type f . "src/packages/steps"
Length of output: 1564
Script:
#!/bin/bash
# 检查 steps.tsx 和 steps.taro.tsx 中的 context 引用
rg -A 2 -B 2 "import.*context" "src/packages/steps/steps.tsx" "src/packages/steps/steps.taro.tsx"
# 检查 verticalsteps 中的 context 引用
rg -A 2 -B 2 "import.*context" "src/packages/verticalsteps/verticalsteps.tsx" "src/packages/verticalsteps/verticalsteps.taro.tsx"
Length of output: 1819
src/packages/step/step.taro.tsx (1)
4-4: 导入路径更改需要验证
导入路径从 '@/packages/steps/context' 更改为 '@/packages/step/context'，这个改动与重构目标一致。但需要确保新路径下的 context 模块存在并包含所需的 DataContext。
执行以下脚本验证新的 context 模块：
✅ Verification successful
导入路径变更已验证通过
新的导入路径 '@/packages/step/context' 已确认有效，且正确导出了 DataContext 组件。此变更符合代码重构的目标，不会影响组件的功能。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证新的 context 模块是否存在并导出了 DataContext
# 测试：检查新的 context 文件是否存在
fd --type f "context.ts" src/packages/step/
# 测试：验证 DataContext 的导出
rg -l "export.*DataContext" src/packages/step/
Length of output: 150
Script:
#!/bin/bash
# 验证 DataContext 的具体实现和导出方式
rg -A 5 "export.*DataContext" src/packages/step/context.ts
Length of output: 105
src/packages/step/step.harmony.css (1)
Line range hint 1-116: 验证样式变更的影响范围
根据PR描述，这是一个拆分横向和纵向步骤条的重构。需要确认样式变更是否会影响现有的布局。
✅ Verification successful
Let me generate additional scripts to verify the impact of the style changes.
样式重构已正确拆分，无需担心影响
通过分析发现：
- 样式已经正确拆分到对应的组件目录中：
- 横向步骤条样式在
src/packages/steps - 纵向步骤条样式在
src/packages/verticalsteps - 基础样式在
src/packages/step
- 横向步骤条样式在
- 各组件中的样式类名定义完整且一致，没有遗漏或冲突
- 所有步骤条相关的样式类（如
nut-step-line、nut-step-icon等）都已在各自的组件中正确定义
这次重构对现有布局没有负面影响，样式拆分合理且完整。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否有其他文件依赖被移除的类名
rg "nut-step-line" --type css
Length of output: 1849
Script:
#!/bin/bash
# 检查step.harmony.css中的样式类是否在其他文件中有重复或冲突定义
rg "\.nut-step-(head|icon|title|description|process|wait|finish)" --type css
# 检查steps和verticalsteps组件的目录结构
fd -t f -e css -e scss . src/packages/steps src/packages/verticalsteps
# 查看steps相关组件的package.json以了解组件依赖关系
fd package.json src/packages/step src/packages/steps src/packages/verticalsteps --exec cat {}
Length of output: 6651
src/packages/verticalsteps/doc.zh-TW.md (1)
17-17: 验证示例代码文件引用
文档中引用了以下示例代码文件：
- h5/demo1.tsx
- h5/demo2.tsx
- h5/demo3.tsx
请确保这些文件已经创建并包含相应的示例代码。
Also applies to: 25-25, 33-33
✅ Verification successful
Let me verify the actual paths referenced in the documentation to ensure they match the existing files.
Let me check the actual content of the demo files to ensure they contain proper example code.
示例代码文件验证通过
文档中引用的所有示例代码文件均已存在且包含正确的示例实现：
h5/demo1.tsx- 基础用法示例h5/demo2.tsx- 点状步骤条示例h5/demo3.tsx- 自定义图标示例
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证示例代码文件是否存在
fd -t f "demo[1-3].tsx$" "src/packages/verticalsteps"
Length of output: 335
Script:
#!/bin/bash
# Check the actual path references in the documentation
cat src/packages/verticalsteps/doc.zh-TW.md
Length of output: 3264
Script:
#!/bin/bash
# Check content of demo files
echo "=== h5/demo1.tsx ==="
cat src/packages/verticalsteps/demos/h5/demo1.tsx
echo -e "\n=== h5/demo2.tsx ==="
cat src/packages/verticalsteps/demos/h5/demo2.tsx
echo -e "\n=== h5/demo3.tsx ==="
cat src/packages/verticalsteps/demos/h5/demo3.tsx
Length of output: 2278
src/packages/verticalsteps/doc.md (1)
15-19: 验证示例代码文件路径
请确认以下示例代码文件是否存在：
h5/demo1.tsxh5/demo2.tsxh5/demo3.tsx
Also applies to: 23-27, 31-35
✅ Verification successful
示例代码文件已验证存在
所有引用的示例代码文件都已找到:
h5/demo1.tsxh5/demo2.tsxh5/demo3.tsx
这些文件都位于 src/packages/verticalsteps/demos/h5/ 目录下。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证示例代码文件是否存在
for demo in demo{1,2,3}.tsx; do
fd --type f "$demo" -p "h5/"
done
Length of output: 455
Script:
#!/bin/bash
# 搜索所有demo文件
fd --type f "demo.*\.tsx"
Length of output: 53121
Script:
#!/bin/bash
# 搜索文档中引用的demo路径
rg -g "*.md" "CodeBlock.*demo.*\.tsx"
Length of output: 168516
Script:
#!/bin/bash
# 查看文档内容以了解完整上下文
cat src/packages/verticalsteps/doc.md
Length of output: 3340
Script:
#!/bin/bash
# 查找 verticalsteps 组件下的 demo 文件
fd --type f "demo.*\.tsx" -p "src/packages/verticalsteps/demos"
Length of output: 345
src/packages/verticalsteps/doc.en-US.md (1)
15-19: 请确认示例代码文件的完整性
需要验证以下示例代码文件是否已经完整提供：
- h5/demo1.tsx
- h5/demo2.tsx
- h5/demo3.tsx
Also applies to: 23-27, 31-35
✅ Verification successful
示例代码文件已完整提供
所有引用的示例代码文件均已存在于正确的目录位置：
- src/packages/verticalsteps/demos/h5/demo1.tsx
- src/packages/verticalsteps/demos/h5/demo2.tsx
- src/packages/verticalsteps/demos/h5/demo3.tsx
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证示例代码文件是否存在
fd -t f "demo[1-3].tsx" "src/packages/verticalsteps/demos/h5"
Length of output: 199
| export const VerticalSteps: FunctionComponent< | ||
| Partial<VerticalStepsProps> & React.HTMLAttributes<HTMLDivElement> | ||
| > = (props) => { | ||
| const propSteps = { ...defaultProps, ...props } | ||
| const { children, value, className, dot, onStepClick, ...restProps } = | ||
| propSteps | ||
|
|
||
| const parentSteps = { | ||
| propSteps, | ||
| } | ||
|
|
||
| const classPrefix = `nut-steps` | ||
| const classes = classNames( | ||
| classPrefix, | ||
| { | ||
| [`${classPrefix}-vertical`]: true, | ||
| [`${classPrefix}-vertical-dot`]: !!dot, | ||
| [`${classPrefix}-dot`]: !!dot, | ||
| }, | ||
| className | ||
| ) | ||
| return ( | ||
| <DataContext.Provider value={parentSteps}> | ||
| <div className={classes} {...restProps}> | ||
| {children} | ||
| </div> | ||
| </DataContext.Provider> | ||
| ) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议优化组件性能和简化代码
当前实现可以通过以下方式改进：
- 使用
useMemo优化 classes 的计算 - 简化类名生成逻辑
建议按如下方式修改：
export const VerticalSteps: FunctionComponent<
Partial<VerticalStepsProps> & React.HTMLAttributes<HTMLDivElement>
> = (props) => {
const propSteps = { ...defaultProps, ...props }
const { children, value, className, dot, onStepClick, ...restProps } =
propSteps
const parentSteps = {
propSteps,
}
const classPrefix = `nut-steps`
- const classes = classNames(
+ const classes = useMemo(() => classNames(
classPrefix,
{
[`${classPrefix}-vertical`]: true,
- [`${classPrefix}-vertical-dot`]: !!dot,
- [`${classPrefix}-dot`]: !!dot,
+ [`${classPrefix}-vertical-dot ${classPrefix}-dot`]: dot,
},
className
- )
+ ), [dot, className])
return (
<DataContext.Provider value={parentSteps}>
<div className={classes} {...restProps}>
{children}
</div>
</DataContext.Provider>
)
}📝 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.
| export const VerticalSteps: FunctionComponent< | |
| Partial<VerticalStepsProps> & React.HTMLAttributes<HTMLDivElement> | |
| > = (props) => { | |
| const propSteps = { ...defaultProps, ...props } | |
| const { children, value, className, dot, onStepClick, ...restProps } = | |
| propSteps | |
| const parentSteps = { | |
| propSteps, | |
| } | |
| const classPrefix = `nut-steps` | |
| const classes = classNames( | |
| classPrefix, | |
| { | |
| [`${classPrefix}-vertical`]: true, | |
| [`${classPrefix}-vertical-dot`]: !!dot, | |
| [`${classPrefix}-dot`]: !!dot, | |
| }, | |
| className | |
| ) | |
| return ( | |
| <DataContext.Provider value={parentSteps}> | |
| <div className={classes} {...restProps}> | |
| {children} | |
| </div> | |
| </DataContext.Provider> | |
| ) | |
| } | |
| export const VerticalSteps: FunctionComponent< | |
| Partial<VerticalStepsProps> & React.HTMLAttributes<HTMLDivElement> | |
| > = (props) => { | |
| const propSteps = { ...defaultProps, ...props } | |
| const { children, value, className, dot, onStepClick, ...restProps } = | |
| propSteps | |
| const parentSteps = { | |
| propSteps, | |
| } | |
| const classPrefix = `nut-steps` | |
| const classes = useMemo(() => classNames( | |
| classPrefix, | |
| { | |
| [`${classPrefix}-vertical`]: true, | |
| [`${classPrefix}-vertical-dot ${classPrefix}-dot`]: dot, | |
| }, | |
| className | |
| ), [dot, className]) | |
| return ( | |
| <DataContext.Provider value={parentSteps}> | |
| <div className={classes} {...restProps}> | |
| {children} | |
| </div> | |
| </DataContext.Provider> | |
| ) | |
| } |
| background-color: #ff0f23; | ||
| border-color: #ff0f23; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议统一处理品牌主色
多处使用 #ff0f23 作为品牌主色，建议将其统一管理。同时注意到字重从500改为600，这可能影响文字的视觉表现。
+:root {
+ --nut-brand-color: #ff0f23;
+}
.nut-step.nut-step-process .nut-step-icon {
- background-color: #ff0f23;
- border-color: #ff0f23;
+ background-color: var(--nut-brand-color);
+ border-color: var(--nut-brand-color);
}
.nut-step.nut-step-process .nut-step-title {
- color: #ff0f23;
+ color: var(--nut-brand-color);
}Also applies to: 55-55, 57-57, 70-71, 74-74, 77-77
|
|
||
| ### 樣式變量 | ||
|
|
||
| 組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。 |
There was a problem hiding this comment.
ConfigProvider 组件链接无效
文档中引用的 ConfigProvider 组件链接 #/zh-CN/component/configprovider 格式不正确。
建议修改为正确的相对路径链接格式。例如：
-请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)
+请参考 [ConfigProvider 组件](/zh-CN/component/configprovider)📝 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.
| 組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。 | |
| 組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 [ConfigProvider 組件](/zh-CN/component/configprovider)。 |
🧰 Tools
🪛 Markdownlint
63-63: null
Link fragments should be valid
(MD051, link-fragments)
| | title | 流程步驟的標題 | `string` | `-` | | ||
| | description | 流程步驟的描述性文字 | `string` | `-` | | ||
| | icon | 圖標(來自Icon組件的name屬性) | `ReactNode` | `-` | | ||
| | value | 流程步驟的索引 | `number` | `0` | | ||
| | description | 流程步驟的描述性文字的html結構 | `React.ReactNode` | `-` | | ||
| | onStepClick | 點擊步驟的標題或圖標時觸發 | `(index: number) => void` | `-` | |
There was a problem hiding this comment.
属性定义重复且类型不一致
description 属性在文档中重复定义了两次，且类型定义不一致：
- 第一次定义类型为
string - 第二次定义类型为
React.ReactNode
建议合并为一个定义并使用更通用的类型。
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 流程步驟的標題 | `string` | `-` |
-| description | 流程步驟的描述性文字 | `string` | `-` |
| icon | 圖標(來自Icon組件的name屬性) | `ReactNode` | `-` |
| value | 流程步驟的索引 | `number` | `0` |
-| description | 流程步驟的描述性文字的html結構 | `React.ReactNode` | `-` |
+| description | 流程步驟的描述性文字 | `React.ReactNode` | `-` |
| onStepClick | 點擊步驟的標題或圖標時觸發 | `(index: number) => void` | `-` |📝 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.
| | title | 流程步驟的標題 | `string` | `-` | | |
| | description | 流程步驟的描述性文字 | `string` | `-` | | |
| | icon | 圖標(來自Icon組件的name屬性) | `ReactNode` | `-` | | |
| | value | 流程步驟的索引 | `number` | `0` | | |
| | description | 流程步驟的描述性文字的html結構 | `React.ReactNode` | `-` | | |
| | onStepClick | 點擊步驟的標題或圖標時觸發 | `(index: number) => void` | `-` | | |
| | title | 流程步驟的標題 | `string` | `-` | | |
| | icon | 圖標(來自Icon組件的name屬性) | `ReactNode` | `-` | | |
| | value | 流程步驟的索引 | `number` | `0` | | |
| | description | 流程步驟的描述性文字 | `React.ReactNode` | `-` | | |
| | onStepClick | 點擊步驟的標題或圖標時觸發 | `(index: number) => void` | `-` | |
| 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。 | ||
|
|
There was a problem hiding this comment.
修复 ConfigProvider 组件链接
链接片段 #/zh-CN/component/configprovider 格式不正确，需要更新为正确的文档链接格式。
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/zh-CN/component/configprovider)。📝 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.
| 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。 | |
| 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/zh-CN/component/configprovider)。 |
🧰 Tools
🪛 Markdownlint
63-63: null
Link fragments should be valid
(MD051, link-fragments)
| .nut-steps-vertical { | ||
| height: 100%; | ||
| } | ||
| .nut-steps-vertical .nut-step { | ||
| display: flex; | ||
| height: 33.34%; | ||
| } | ||
| .nut-steps-vertical .nut-step:last-child { | ||
| height: auto; | ||
| } | ||
| .nut-steps-vertical .nut-step-line { | ||
| position: absolute; | ||
| display: inline-block; | ||
| width: 1px; | ||
| height: 70%; | ||
| background: #888b94; | ||
| top: calc(25px + (100% - 70% - 12px) / 2); | ||
| left: calc(50% - 1px); | ||
| } | ||
| .nut-steps-vertical .nut-step-main { | ||
| display: inline-block; | ||
| padding: 0 0 0 6%; | ||
| text-align: start; | ||
| } | ||
| .nut-steps-vertical.nut-steps-dot .nut-step-head { | ||
| margin: 5px 0; | ||
| } | ||
| .nut-steps-vertical.nut-steps-dot .nut-step-line { | ||
| top: calc(6px + (100% - 70%) / 2); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议改进垂直布局的响应式设计
垂直布局的实现存在以下问题：
- 固定的百分比高度可能不适用于所有场景
- 线条定位的计算公式复杂
- 固定的内边距值限制了布局的灵活性
建议：
- 使用 CSS Grid 或更灵活的布局方案
- 简化线条定位的计算逻辑
- 使用相对单位设置间距
.nut-steps-vertical {
- height: 100%;
+ display: grid;
+ grid-auto-rows: 1fr;
+ gap: 1rem;
}
.nut-steps-vertical .nut-step {
display: flex;
- height: 33.34%;
+ min-height: 0;
}
.nut-steps-vertical .nut-step-line {
position: absolute;
width: 1px;
- height: 70%;
+ height: calc(100% - 2rem);
background: #888b94;
- top: calc(25px + (100% - 70% - 12px) / 2);
+ top: 2rem;
left: 50%;
transform: translateX(-50%);
}📝 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.
| .nut-steps-vertical { | |
| height: 100%; | |
| } | |
| .nut-steps-vertical .nut-step { | |
| display: flex; | |
| height: 33.34%; | |
| } | |
| .nut-steps-vertical .nut-step:last-child { | |
| height: auto; | |
| } | |
| .nut-steps-vertical .nut-step-line { | |
| position: absolute; | |
| display: inline-block; | |
| width: 1px; | |
| height: 70%; | |
| background: #888b94; | |
| top: calc(25px + (100% - 70% - 12px) / 2); | |
| left: calc(50% - 1px); | |
| } | |
| .nut-steps-vertical .nut-step-main { | |
| display: inline-block; | |
| padding: 0 0 0 6%; | |
| text-align: start; | |
| } | |
| .nut-steps-vertical.nut-steps-dot .nut-step-head { | |
| margin: 5px 0; | |
| } | |
| .nut-steps-vertical.nut-steps-dot .nut-step-line { | |
| top: calc(6px + (100% - 70%) / 2); | |
| } | |
| .nut-steps-vertical { | |
| display: grid; | |
| grid-auto-rows: 1fr; | |
| gap: 1rem; | |
| } | |
| .nut-steps-vertical .nut-step { | |
| display: flex; | |
| min-height: 0; | |
| } | |
| .nut-steps-vertical .nut-step:last-child { | |
| height: auto; | |
| } | |
| .nut-steps-vertical .nut-step-line { | |
| position: absolute; | |
| width: 1px; | |
| height: calc(100% - 2rem); | |
| background: #888b94; | |
| top: 2rem; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .nut-steps-vertical .nut-step-main { | |
| display: inline-block; | |
| padding: 0 0 0 6%; | |
| text-align: start; | |
| } | |
| .nut-steps-vertical.nut-steps-dot .nut-step-head { | |
| margin: 5px 0; | |
| } | |
| .nut-steps-vertical.nut-steps-dot .nut-step-line { | |
| top: calc(6px + (100% - 70%) / 2); | |
| } |
| The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider). | ||
|
|
There was a problem hiding this comment.
修复 ConfigProvider 组件的链接
ConfigProvider 组件的链接 #/en-US/component/configprovider 无效，请更新为正确的文档链接。
🧰 Tools
🪛 Markdownlint
62-62: null
Link fragments should be valid
(MD051, link-fragments)
| | \--nutui-steps-base-icon-font-size | The font size of the icon container | `$font-size-s` | | ||
| | \--nutui-steps-base-line-width | The width of the dividing line | `100%` | | ||
| | \--nutui-steps-base-line-background | The background color of the dividing line | `$color-text-help` | | ||
| | \--nutui-steps-base-title-font-size | The font size of the title | `$font-size-base` | | ||
| | \--nutui-steps-base-title-color | Title color | `$color-title` | | ||
| | \--nutui-steps-base-title-margin-bottom | Title bottom margin | `10px` | | ||
| | \--nutui-steps-base-description-font-size | The font size of the description text | `$font-size-s` | | ||
| | \--nutui-steps-base-description-color | The font color of description text | `$color-text` | | ||
| | \--nutui-steps-wait-icon-bg-color | Background color of icon container in waiting state | `$color-text-help` | |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议补充基础样式变量的说明
文档中使用了多个基础样式变量（如 $font-size-s、$color-text 等），建议：
- 补充这些基础变量的默认值说明
- 添加对 Design Token 系统的引用说明
| { | ||
| "version": "2.0.0", | ||
| "name": "VerticalSteps", | ||
| "type": "component", | ||
| "cName": "步骤条", | ||
| "desc": "拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。", | ||
| "sort": 7, | ||
| "show": true, | ||
| "taro": true, | ||
| "author": "swag~jun" | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议区分 Steps 和 VerticalSteps 的描述和排序
目前存在以下问题：
- VerticalSteps 与 Steps 组件的描述完全相同，建议在描述中突出垂直布局的特点
- 两个组件使用了相同的排序值 (sort: 7)，可能会导致展示顺序不确定
建议按照以下方式修改：
{
"version": "2.0.0",
"name": "VerticalSteps",
"type": "component",
"cName": "步骤条",
- "desc": "拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。",
+ "desc": "以垂直方向拆分展示某项流程的步骤，用于空间受限的场景，或流程步骤数较多的场景。",
- "sort": 7,
+ "sort": 8,
"show": true,
"taro": true,
"author": "swag~jun"
},📝 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.
| { | |
| "version": "2.0.0", | |
| "name": "VerticalSteps", | |
| "type": "component", | |
| "cName": "步骤条", | |
| "desc": "拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。", | |
| "sort": 7, | |
| "show": true, | |
| "taro": true, | |
| "author": "swag~jun" | |
| }, | |
| { | |
| "version": "2.0.0", | |
| "name": "VerticalSteps", | |
| "type": "component", | |
| "cName": "步骤条", | |
| "desc": "以垂直方向拆分展示某项流程的步骤，用于空间受限的场景，或流程步骤数较多的场景。", | |
| "sort": 8, | |
| "show": true, | |
| "taro": true, | |
| "author": "swag~jun" | |
| }, |
| .nut-steps-horizontal .nut-step { | ||
| flex-grow: 0; | ||
| flex-shrink: 0; | ||
| flex: 1; |
There was a problem hiding this comment.
修复 flex 属性的重写问题
在已经定义了 flex-grow 和 flex-shrink 后，再使用 flex 的简写属性会覆盖之前的属性定义，导致布局可能出现异常。
建议重构代码，避免属性被覆盖：
方案一：移除多余的 flex-grow 和 flex-shrink 属性
如果希望使用 flex: 1;，可以移除单独的 flex-grow 和 flex-shrink 定义，因为 flex: 1; 本身已经包含了 flex-grow: 1; flex-shrink: 1; flex-basis: 0%;。
.nut-steps-horizontal .nut-step {
- flex-grow: 0;
- flex-shrink: 0;
flex: 1;
text-align: center;
font-size: 0;
}方案二：避免使用 flex 简写属性
如果要保持 flex-grow 和 flex-shrink 的值为 0，可以去除 flex 简写属性，并显式设置 flex-basis：
.nut-steps-horizontal .nut-step {
flex-grow: 0;
flex-shrink: 0;
- flex: 1;
+ flex-basis: auto; /* 或根据需要设定具体的 flex-basis 值 */
text-align: center;
font-size: 0;
}📝 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.
| flex: 1; | |
| .nut-steps-horizontal .nut-step { | |
| flex: 1; | |
| text-align: center; | |
| font-size: 0; | |
| } | |
| ``` | |
| Solution 2: | |
| ```suggestion | |
| .nut-steps-horizontal .nut-step { | |
| flex-grow: 0; | |
| flex-shrink: 0; | |
| flex-basis: auto; | |
| text-align: center; | |
| font-size: 0; | |
| } |
🧰 Tools
🪛 Biome
[error] 124-124: Unexpected shorthand property flex after flex-grow
(lint/suspicious/noShorthandPropertyOverrides)
[error] 124-124: Unexpected shorthand property flex after flex-shrink
(lint/suspicious/noShorthandPropertyOverrides)
There was a problem hiding this comment.
Actionable comments posted: 20
🧹 Outside diff range and nitpick comments (34)
src/packages/verticalsteps/demos/h5/demo1.tsx (2)
6-6: 建议优化样式设置当前使用固定高度（300px）和不对称的内边距（上下内边距不一致）可能会导致：
- 在不同内容长度下的展示问题
- 在移动端适配时的局限性
建议考虑：
- 使用最小高度（min-height）代替固定高度
- 使用对称的内边距以提升视觉体验
- <div style={{ height: '300px', padding: '15px 30px 0' }}> + <div style={{ minHeight: '300px', padding: '15px 30px' }}>
Line range hint
8-19: 建议添加国际化支持当前步骤标题和描述文本都是硬编码的中文，建议：
- 使用国际化配置
- 将文本内容提取到语言配置文件中
这样可以：
- 支持多语言
- 便于文本维护
- 提高代码复用性
建议使用类似以下结构：
// i18n/zh-CN.ts export default { steps: { completed: '已完成', inProgress: '进行中', notStarted: '未开始', orderPacked: '您的订单已经打包完成，商品已发出', orderDelivering: '您的订单正在配送途中', deliveryAddress: '收货地址为：北京市经济技术开发区科创十一街18号院京东大厦' } }src/packages/verticalsteps/demos/taro/demo1.tsx (1)
Line range hint
8-20: 建议为演示用例添加注释说明为了提高代码的可维护性和文档价值，建议添加注释来说明这个演示用例展示的是步骤组件的不同状态（已完成、进行中、未开始）。
+ // 演示垂直步骤条的三种状态：已完成、进行中、未开始 <VerticalSteps value={2}>src/packages/verticalsteps/demo.tsx (2)
8-24: 建议修正繁体中文翻译zh-TW 的翻译中使用了简体中文字符，建议修改为相应的繁体中文：
'zh-TW': { - basic: '基础用法', - dot: '基础用法：点状', + basic: '基礎用法', + dot: '基礎用法：點狀', customIcon: '自定義圖標', },
26-36: 建议优化 CSS 类名当前使用的类名
demo full bg-w过于通用，建议使用更具体的命名以提高可维护性：-<div className="demo full bg-w"> +<div className="vertical-steps-demo full bg-white">src/packages/steps/steps.taro.tsx (1)
33-34: 优化类名逻辑以支持水平布局类名修改合理：
- 移除了动态方向类，改为固定的水平布局类
- 新增
horizontal-dot类提供了更细粒度的样式控制建议：
- 考虑添加相关的样式文档，说明
horizontal-dot类的具体用途和效果src/packages/steps/steps.tsx (1)
33-34: 建议优化类名生成逻辑当前实现中硬编码了
horizontal类名。建议：
- 考虑将类名前缀抽取为常量
- 使用对象解构来简化条件类名的生成
- [`${classPrefix}-horizontal`]: true, - [`${classPrefix}-horizontal-dot`]: !!dot, - [`${classPrefix}-dot`]: !!dot, + [`${classPrefix}-horizontal`]: true, + ...dot && { + [`${classPrefix}-horizontal-dot`]: true, + [`${classPrefix}-dot`]: true, + },src/packages/verticalsteps/verticalsteps.scss (2)
4-27: 建议优化步骤项高度的计算方式当前实现存在以下问题：
- 固定的33.34%高度可能在步骤数量不是3个时造成布局问题
- 最后一个步骤使用auto高度可能导致不一致的视觉效果
建议采用以下方案：
.nut-step { display: flex; - height: 33.34%; + flex: 1; &:last-child { - height: auto; + flex: 1; }这样可以根据步骤数量自动均分高度，提供更好的布局适应性。
39-50: RTL支持实现完善正确处理了从右到左布局的样式适配，包括线条位置和内容间距的调整。建议添加相关文档说明RTL支持。
建议在组件文档中添加RTL支持的使用说明。
src/packages/verticalsteps/demo.taro.tsx (1)
28-43: 建议优化代码结构，提高可维护性可以通过将演示组件配置抽取为常量数组来减少重复代码，使结构更清晰。
建议重构如下：
+ const demos = [ + { component: Demo1, title: translated.basic }, + { component: Demo2, title: translated.dot }, + { component: Demo3, title: translated.customIcon }, + ] + return ( <> <Header /> <ScrollView className={`demo bg-w ${Taro.getEnv() === 'WEB' ? 'web' : ''}`} > - <View className="h2">{translated.basic}</View> - <Demo1 /> - <View className="h2">{translated.dot}</View> - <Demo2 /> - <View className="h2">{translated.customIcon}</View> - <Demo3 /> + {demos.map(({ component: Demo, title }) => ( + <React.Fragment key={title}> + <View className="h2">{title}</View> + <Demo /> + </React.Fragment> + ))} </ScrollView> </> )src/packages/verticalsteps/verticalsteps.taro.tsx (2)
6-10: 建议将 onStepClick 设置为可选属性考虑到并非所有场景都需要点击处理，建议将
onStepClick设置为可选属性。export interface VerticalStepsProps extends BasicComponent { value: number dot: boolean - onStepClick: (index: number) => void + onStepClick?: (index: number) => void }
25-28: 建议简化 parentSteps 对象结构当前的
parentSteps对象结构存在不必要的嵌套。考虑直接传递所需的属性。const parentSteps = { - propSteps, + value, + dot, + onStepClick, }src/packages/verticalsteps/verticalsteps.tsx (2)
1-4: 建议优化导入语句的组织方式建议按照以下顺序组织导入语句：
- 外部依赖（React, classNames）
- 内部组件和上下文
- 工具类和类型定义
import React, { FunctionComponent } from 'react' import classNames from 'classnames' +import { BasicComponent, ComponentDefaults } from '@/utils/typings' import { DataContext } from '../step/context' -import { BasicComponent, ComponentDefaults } from '@/utils/typings'
12-17: 建议优化默认值的类型定义当前的类型断言可以通过使用
const断言来改进，这样可以获得更好的类型推断。-const defaultProps = { +const defaultProps = { ...ComponentDefaults, value: 0, dot: false, -} as VerticalStepsProps +} as constsrc/packages/steps/demo.taro.tsx (1)
Line range hint
1-71: 代码结构优化建议根据PR的目标，移除垂直步骤条相关的演示和翻译是合理的，这有助于代码结构的清晰性。建议考虑以下几点：
- 为新的垂直步骤条组件创建独立的演示文件
- 确保文档中清楚说明了组件的拆分逻辑
- 考虑添加组件迁移指南，帮助用户从旧版本升级
src/packages/step/step.tsx (1)
Line range hint
6-73: 建议进一步重构以支持横向和纵向布局的分离当前的实现中，Step 组件没有明确区分横向和纵向布局的逻辑。考虑到 PR 的目标是拆分这两种布局，建议：
- 在
StepProps接口中添加direction属性- 根据
direction属性应用不同的样式和布局逻辑- 考虑将共享逻辑抽取到独立的 hooks 中
建议重构示例：
export interface StepProps extends BasicComponent { title: ReactNode description: ReactNode value: number icon: ReactNode + direction?: 'horizontal' | 'vertical' } const defaultProps = { ...ComponentDefaults, title: '', description: '', value: 0, icon: null, + direction: 'horizontal', } as StepPropssrc/packages/step/step.harmony.css (3)
16-17: 建议使用CSS变量来管理颜色值建议将颜色值抽取为CSS变量，以便于主题定制和统一管理。这样可以更容易地维护和更新颜色方案。
+:root { + --nut-step-default-color: #888b94; +} .nut-step-icon { position: relative; - background-color: #888b94; - border-color: #888b94; + background-color: var(--nut-step-default-color); + border-color: var(--nut-step-default-color);
94-94: 优化点状步骤器的样式实现当前的点状步骤器样式使用了伪元素来实现外圈效果，建议考虑使用更简洁的
box-shadow实现，可以减少代码量并提高性能。.nut-steps-dot .nut-step-process .nut-step-icon { position: relative; + box-shadow: 0 0 0 7px rgba(255, 15, 35, 0.23); } -.nut-steps-dot .nut-step-process .nut-step-icon:before { - content: ""; - display: inline-block; - position: absolute; - left: 50%; - top: 50%; - margin-left: -7px; - margin-top: -7px; - width: 14px; - height: 14px; - background-color: #ff0f23; - border-radius: 50%; - opacity: 0.23; -}Also applies to: 98-98, 113-113
Line range hint
1-113: 建议添加响应式设计支持考虑到移动端和桌面端的不同使用场景，建议添加媒体查询来优化不同设备下的显示效果。
建议添加以下媒体查询来优化移动端显示：
@media screen and (max-width: 768px) { .nut-step-title { font-size: 12px; } .nut-step-description { font-size: 10px; } .nut-step-icon { width: 20px; height: 20px; } }src/packages/verticalsteps/doc.md (1)
1-10: 建议补充组件使用场景说明建议在组件介绍部分增加具体的使用场景说明，例如：
- 适用于需要展示时间线的场景
- 适用于需要展示进度的场景
- 适用于需要展示操作步骤的场景
packages/nutui-taro-demo/src/app.config.ts (1)
136-143: 建议使用 flatMap 优化数组处理逻辑当前的数组处理逻辑使用了 map 和 flat 的组合，可以使用 flatMap 来简化代码。
建议按如下方式重构：
components: [ 'pages/index/index', - ...subPackages - .map((subPackage) => { - return subPackage.pages.map((page) => `${subPackage.root}/${page}`) - }) - .flat(), + ...subPackages.flatMap((subPackage) => + subPackage.pages.map((page) => `${subPackage.root}/${page}`) + ), ],src/packages/verticalsteps/verticalsteps.harmony.css (3)
1-45: 建议使用 CSS 变量来提高样式的可维护性和灵活性建议将颜色值和关键尺寸提取为 CSS 变量，这样可以：
- 统一管理主题颜色
- 方便适配不同的设计规范
- 提升代码的可维护性
建议按照以下方式重构：
+ :root { + --nut-step-primary-color: #ff0f23; + --nut-step-text-color: #1a1a1a; + --nut-step-desc-color: #505259; + --nut-step-wait-color: #888b94; + --nut-step-icon-size: 25px; + --nut-step-title-size: 14px; + --nut-step-desc-size: 12px; + } .nut-step-icon { - width: 25px; - height: 25px; - line-height: 25px; - font-size: 12px; - background-color: #888b94; + width: var(--nut-step-icon-size); + height: var(--nut-step-icon-size); + line-height: var(--nut-step-icon-size); + font-size: var(--nut-step-desc-size); + background-color: var(--nut-step-wait-color); }
83-116: 建议优化点状步骤的样式实现当前实现使用了绝对定位和伪元素，建议：
- 使用 CSS 变量定义关键尺寸
- 简化定位计算
- 添加必要的样式注释
建议添加以下注释和变量：
+ /* 点状步骤样式变量 */ + :root { + --nut-step-dot-size: 6px; + --nut-step-dot-active-size: 14px; + --nut-step-dot-border-width: 2px; + } .nut-steps-dot .nut-step-icon { - width: 6px; - height: 6px; - border: 2px solid #ffffff; + width: var(--nut-step-dot-size); + height: var(--nut-step-dot-size); + border: var(--nut-step-dot-border-width) solid #ffffff; } + /* 活动状态下的扩展效果 */ .nut-steps-dot .nut-step-process .nut-step-icon:before { - width: 14px; - height: 14px; + width: var(--nut-step-dot-active-size); + height: var(--nut-step-dot-active-size); }
149-158: RTL 支持实现规范RTL 支持实现完整，建议：
- 使用 CSS 变量统一管理方向相关的值
- 考虑使用 logical properties
建议使用以下方式优化：
+ :root { + --nut-step-main-spacing: 6%; + } .nut-steps-vertical .nut-step-main { - padding: 0 0 0 6%; + padding-inline-start: var(--nut-step-main-spacing); } [dir=rtl] .nut-steps-vertical .nut-step-main, .nut-rtl .nut-steps-vertical .nut-step-main { - padding-left: 0; - padding-right: 6%; + /* 使用 padding-inline-start 后可以删除这些覆盖样式 */ }src/packages/steps/doc.taro.md (1)
73-77: 建议添加组件使用说明的补充说明由于组件进行了横向和纵向的拆分重构，建议在文档开头添加说明，以帮助用户理解这个改动。
建议在组件描述下方添加：
拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。 +> 注意：此组件仅支持横向步骤条展示。如需使用纵向步骤条，请使用 `VerticalSteps` 组件。 +src/packages/verticalsteps/doc.en-US.md (4)
1-4: 建议补充垂直步骤组件的使用场景说明为了帮助开发者更好地理解何时使用垂直步骤组件而不是水平步骤组件，建议在介绍部分补充使用场景说明。例如，垂直步骤组件适用于移动端长流程展示、时间轴展示等场景。
11-36: 建议为演示部分添加效果预览图为了让开发者能够直观地了解组件的视觉效果，建议在每个演示示例前添加对应的效果预览图。这将帮助开发者快速理解组件的外观和交互方式。
37-56: 建议为属性添加使用示例为了提升文档的实用性，建议为每个重要属性添加简单的代码示例。特别是：
current属性的不同值效果icon属性的自定义图标示例onStepClick事件处理示例
64-98: 建议为主题定制添加视觉参考建议添加：
- 不同主题配置的效果对比图
- 常见的自定义主题示例代码
- 主题变量之间的依赖关系说明
这将帮助开发者更好地理解和使用主题定制功能。
src/packages/verticalsteps/__tests__/steps.spec.tsx (3)
80-126: 建议增强状态转换测试的完整性当前测试验证了状态的前进逻辑，但建议添加以下测试场景：
- 验证当达到最大步骤时重置到第一步的逻辑
- 添加对前一个步骤状态变化的断言（是否正确变为已完成状态）
建议在现有测试后添加：
// 验证循环到第一步 fireEvent.click(getByText('下一步')) expect(container.querySelectorAll('.nut-step')[0]).toHaveClass('nut-step-process') // 验证前一步骤状态 expect(container.querySelectorAll('.nut-step')[2]).toHaveClass('nut-step-finish')
128-153: 建议增强点击事件测试的验证当前测试仅验证了回调函数被调用，建议添加对回调函数参数的验证。
建议修改如下：
test('should emited click when step trigger', () => { const handleClickStep = vi.fn() const { getByText } = render( <VerticalSteps value={1} onStepClick={handleClickStep}> {/* ... existing steps ... */} </VerticalSteps> ) fireEvent.click(getByText('2')) expect(handleClickStep).toHaveBeenCalledWith(2) // 验证回调参数 expect(handleClickStep).toHaveBeenCalledTimes(1) // 验证调用次数 })
155-186: 插槽渲染测试实现完整！测试很好地验证了复杂HTML内容的渲染。建议可以添加对段落标签数量的验证，以确保结构完整性。
可以添加：
expect(container.querySelectorAll('p')).toHaveLength(2)src/config.json (1)
1080-1090: 建议优化组件元数据
组件名称
cName与已有的Steps组件重复，建议修改为更具描述性的名称，如 "纵向步骤条"，以便更好地区分。版本号应与原有
Steps组件保持一致性，建议更新为3.0.0，因为这是对原有功能的扩展。{ "version": "2.0.0", "name": "VerticalSteps", "type": "component", - "cName": "步骤条", + "cName": "纵向步骤条", "desc": "拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。", "sort": 7, "show": true, "taro": true, "author": "swag~jun" }src/packages/steps/steps.scss (1)
6-8: 建议优化flex属性的定义在
.nut-step的样式中，同时定义了flex-grow: 0;、flex-shrink: 0;和flex: 1;。由于flex是flex-grow、flex-shrink和flex-basis的简写，flex: 1;会覆盖之前的flex-grow和flex-shrink设置。建议简化代码，避免属性冗余：
- flex-grow: 0; - flex-shrink: 0; - flex: 1; + flex: 1;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (38)
packages/nutui-taro-demo/src/app.config.ts(2 hunks)src/config.json(1 hunks)src/packages/step/step.harmony.css(5 hunks)src/packages/step/step.scss(0 hunks)src/packages/step/step.taro.tsx(1 hunks)src/packages/step/step.tsx(1 hunks)src/packages/steps/demo.taro.tsx(1 hunks)src/packages/steps/demo.tsx(0 hunks)src/packages/steps/demos/h5/demo9.tsx(0 hunks)src/packages/steps/demos/taro/demo9.tsx(0 hunks)src/packages/steps/doc.en-US.md(0 hunks)src/packages/steps/doc.md(0 hunks)src/packages/steps/doc.taro.md(1 hunks)src/packages/steps/doc.zh-TW.md(0 hunks)src/packages/steps/steps.harmony.css(1 hunks)src/packages/steps/steps.scss(1 hunks)src/packages/steps/steps.taro.tsx(2 hunks)src/packages/steps/steps.tsx(2 hunks)src/packages/verticalsteps/__tests__/steps.spec.tsx(1 hunks)src/packages/verticalsteps/demo.taro.tsx(1 hunks)src/packages/verticalsteps/demo.tsx(1 hunks)src/packages/verticalsteps/demos/h5/demo1.tsx(2 hunks)src/packages/verticalsteps/demos/h5/demo2.tsx(1 hunks)src/packages/verticalsteps/demos/h5/demo3.tsx(1 hunks)src/packages/verticalsteps/demos/taro/demo1.tsx(2 hunks)src/packages/verticalsteps/demos/taro/demo2.tsx(1 hunks)src/packages/verticalsteps/demos/taro/demo3.tsx(1 hunks)src/packages/verticalsteps/doc.en-US.md(1 hunks)src/packages/verticalsteps/doc.md(1 hunks)src/packages/verticalsteps/doc.taro.md(1 hunks)src/packages/verticalsteps/doc.zh-TW.md(1 hunks)src/packages/verticalsteps/index.taro.ts(1 hunks)src/packages/verticalsteps/index.ts(1 hunks)src/packages/verticalsteps/verticalsteps.harmony.css(1 hunks)src/packages/verticalsteps/verticalsteps.scss(1 hunks)src/packages/verticalsteps/verticalsteps.taro.tsx(1 hunks)src/packages/verticalsteps/verticalsteps.tsx(1 hunks)src/styles/variables.scss(1 hunks)
💤 Files with no reviewable changes (7)
- src/packages/step/step.scss
- src/packages/steps/demo.tsx
- src/packages/steps/demos/h5/demo9.tsx
- src/packages/steps/demos/taro/demo9.tsx
- src/packages/steps/doc.en-US.md
- src/packages/steps/doc.md
- src/packages/steps/doc.zh-TW.md
✅ Files skipped from review due to trivial changes (7)
- src/packages/step/step.taro.tsx
- src/packages/verticalsteps/demos/h5/demo2.tsx
- src/packages/verticalsteps/demos/h5/demo3.tsx
- src/packages/verticalsteps/demos/taro/demo2.tsx
- src/packages/verticalsteps/demos/taro/demo3.tsx
- src/packages/verticalsteps/index.taro.ts
- src/packages/verticalsteps/index.ts
🧰 Additional context used
🪛 Markdownlint
src/packages/steps/doc.taro.md
95-95: null
Link fragments should be valid
(MD051, link-fragments)
src/packages/verticalsteps/doc.en-US.md
62-62: null
Link fragments should be valid
(MD051, link-fragments)
src/packages/verticalsteps/doc.md
63-63: null
Link fragments should be valid
(MD051, link-fragments)
src/packages/verticalsteps/doc.taro.md
63-63: null
Link fragments should be valid
(MD051, link-fragments)
src/packages/verticalsteps/doc.zh-TW.md
63-63: null
Link fragments should be valid
(MD051, link-fragments)
🪛 Biome
src/packages/steps/steps.harmony.css
[error] 124-124: Unexpected shorthand property flex after flex-grow
(lint/suspicious/noShorthandPropertyOverrides)
[error] 124-124: Unexpected shorthand property flex after flex-shrink
(lint/suspicious/noShorthandPropertyOverrides)
🔇 Additional comments (24)
src/packages/verticalsteps/demos/h5/demo1.tsx (1)
Line range hint 4-22: 组件结构清晰，实现合理！
组件结构层次分明，步骤值的设置符合逻辑，描述文本清晰明了。
src/packages/verticalsteps/demos/taro/demo1.tsx (2)
1-3: 导入声明看起来没有问题！
导入语句结构清晰，且符合组件拆分的重构目标。
7-7: 建议验证内边距的变更影响
移除了底部内边距（padding-bottom）可能会影响组件的整体布局和显示效果。请确认这个改动是否符合预期。
✅ Verification successful
内边距设置符合组件规范
经验证，所有垂直步骤条demo（包括H5和Taro版本）都采用相同的内边距设置 padding: '15px 30px 0'，这是一个统一且一致的样式规范。移除底部内边距是有意为之的设计决定，不会对组件布局产生负面影响。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他demo文件中的padding设置是否一致
rg -l 'padding:.*30px' src/packages/verticalsteps/demos/
Length of output: 340
Script:
#!/bin/bash
# 检查所有demo文件中的具体padding值
rg 'padding:.*30px' src/packages/verticalsteps/demos/
Length of output: 712
src/packages/verticalsteps/demo.tsx (2)
1-6: 导入语句结构清晰合理！
导入声明遵循了 React 最佳实践，组件结构层次分明。
39-39: 导出语句正确！
组件导出方式符合 React 组件最佳实践。
src/packages/steps/steps.taro.tsx (2)
22-23: 确认移除 direction 属性的影响范围
从组件中移除 direction 属性是拆分横向和纵向步骤组件的重要一步。这种架构调整有助于简化组件职责，提高代码可维护性。
#!/bin/bash
# 检查是否还有其他文件在使用 direction 属性
rg "direction.*?(?:prop|Steps)" --type ts --type tsx3-3: 验证 DataContext 导入路径的变更
需要确保从 ../step/context 导入 DataContext 的路径正确，且该模块确实存在。
✅ Verification successful
导入路径变更验证完成
根据代码库搜索结果，DataContext 确实在 src/packages/step/context.ts 中定义和导出。新的导入路径 ../step/context 是正确的，且被其他组件（如 verticalsteps 和 step 组件）也以相同或类似的方式引用。这个导入路径的变更是合理且一致的。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证新的导入路径是否存在
fd --type f "context.(ts|tsx)" src/packages/step/
Length of output: 82
Script:
#!/bin/bash
# 使用 rg 搜索 DataContext 的定义和使用
rg -g '*.{ts,tsx}' "DataContext" src/packages/
# 使用 ast-grep 搜索 DataContext 的导出
ast-grep --pattern 'export $_ DataContext'
Length of output: 2301
src/packages/steps/steps.tsx (1)
3-3: 验证 DataContext 导入路径的正确性
需要确保 ../step/context 路径下的 DataContext 导出与之前的实现保持一致。
✅ Verification successful
Let me analyze the results to verify if the DataContext implementation is consistent between the old and new locations.
Let me analyze the complete implementation to ensure the context is properly moved and all dependencies are updated.
DataContext 导入路径变更已验证
DataContext 已成功移动到 src/packages/step/context.ts，实现保持简单且一致。原路径 src/packages/steps/context.ts 已不存在，这符合代码重构的预期。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证 DataContext 在新路径中的实现
rg -A 5 "export.*DataContext" "src/packages/step/"
Length of output: 124
Script:
#!/bin/bash
# 检查原始文件中的 DataContext 实现
rg -A 5 "export.*DataContext" "src/packages/steps/"
# 对比两个文件的内容
rg -l "DataContext" "src/packages/step/context.ts" "src/packages/steps/context.ts" || true
Length of output: 236
Script:
#!/bin/bash
# 检查 DataContext 的完整实现和使用情况
cat src/packages/step/context.ts
# 检查是否有其他文件依赖原始路径
rg -l "from './context'" "src/packages/steps/"
Length of output: 171
src/packages/verticalsteps/verticalsteps.scss (2)
1-4: 基础结构设计合理！
通过继承基础步骤组件样式并设置垂直布局的高度，保证了组件的可扩展性和复用性。
29-37: 圆点样式变体实现正确
圆点样式的特殊处理符合设计需求，通过CSS变量控制间距和位置，便于主题定制。
src/packages/verticalsteps/demo.taro.tsx (1)
1-8: 导入语句结构清晰，符合规范！
导入语句按照框架、组件、工具、本地模块的顺序排列，结构合理。
src/packages/verticalsteps/verticalsteps.taro.tsx (2)
12-17: 默认属性设置合理
默认值的设置符合组件的预期使用场景，类型断言的使用也很恰当。
48-48: displayName 设置正确
组件名称设置符合 React 组件命名规范，有助于调试。
src/packages/verticalsteps/verticalsteps.tsx (1)
48-48: 组件显示名称设置正确
displayName 的设置有助于调试，实现正确。
src/packages/steps/demo.taro.tsx (1)
49-49: 建议确认样式变更的影响
移除 full 类名可能会影响组件的布局表现。请确认此更改不会对组件的展示效果产生负面影响。
src/packages/step/step.tsx (1)
3-3: 导入路径修改看起来合理，但需要进一步验证
这个改动符合将相关文件放在同一目录下的最佳实践。不过，考虑到此 PR 的目标是拆分横向和纵向步骤组件，建议：
- 确保新的 context 文件已经正确放置在新位置
- 考虑是否需要为横向和纵向步骤组件创建独立的 context
运行以下脚本验证新的 context 文件位置：
✅ Verification successful
导入路径修改已确认正确且安全
验证结果显示：
- context.ts 文件已正确存在于新路径
src/packages/step/目录下 - 新的导入路径
@/packages/step/context已在相关文件中正确使用 - 没有发现其他组件仍在使用旧的导入路径
- 目录结构显示已经完成了步骤组件的拆分（存在 step、steps 和 verticalsteps 目录）
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证新的 context 文件是否存在
fd -t f "context.ts" -p "packages/step/"
# 检查是否有其他组件仍在使用旧的导入路径
rg -l "@/packages/steps/context"
Length of output: 173
Script:
#!/bin/bash
# 使用更通用的搜索方式查找 context 文件
fd "context" src/
# 检查是否存在 steps 或 step 目录
fd "step" src/ -t d
# 检查导入语句的使用情况
rg "@/packages/steps/context|@/packages/step/context" -A 2
Length of output: 1004
packages/nutui-taro-demo/src/app.config.ts (2)
3-124: 代码结构清晰，符合规范！
子包的组织结构合理，按功能模块进行分类，便于维护和管理。
109-109: 请确认垂直步骤组件的相关配置
新增的垂直步骤组件页面已添加到展示组件分包中。建议验证以下几点：
- 组件的路由配置是否正确
- 相关的文档和示例是否完备
✅ Verification successful
垂直步骤组件配置已完整验证
根据验证结果，垂直步骤组件的配置非常完善：
- 组件代码结构完整，包含了必要的样式文件和组件实现
- 文档齐全，包括中文、英文和繁体中文版本
- 示例代码完备，包含多个演示用例
- 路由配置正确添加到展示组件分包中
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查垂直步骤组件的配置和文档是否完整
# 检查组件文档
rg -l "VerticalSteps" "packages/nutui-react/src/packages"
# 检查示例代码
rg -l "verticalsteps" "packages/nutui-taro-demo/src/pages"
Length of output: 186
Script:
#!/bin/bash
# 检查垂直步骤组件的配置和文档
# 检查组件相关文件
fd -t f "steps|Steps" -E "*.test.*" -E "*.spec.*"
# 检查垂直步骤组件的示例代码
fd "verticalsteps" -t f
# 检查Steps组件的引用
rg -l "Steps" -g "!*.test.*" -g "!*.spec.*"
Length of output: 2600
src/packages/steps/doc.taro.md (1)
91-130: 主题定制部分文档完善
主题定制部分的 CSS 变量定义清晰完整，包含了所有必要的样式自定义选项。
🧰 Tools
🪛 Markdownlint
95-95: null
Link fragments should be valid
(MD051, link-fragments)
src/packages/verticalsteps/__tests__/steps.spec.tsx (1)
1-8: 导入语句结构清晰完整！
包含了所有必要的测试库和组件依赖。
src/styles/variables.scss (1)
1311-1314: 新增垂直步骤条的点状头部边距变量
变量命名规范，值设置合理，并且与现有的步骤条样式变量放置在一起，便于维护。这个变量的添加有助于实现水平和垂直步骤条的分离。
src/packages/steps/steps.scss (3)
10-10: 确认 font-size: 0; 的用途
在 .nut-step 中设置了 font-size: 0;，这可能导致子元素的文本无法正常显示。请确认此设置是否符合预期。
如果目的是消除内联元素之间的间隙，建议使用 display: flex; 或调整布局方式来实现。
33-34: 检查 bottom: -50%; 的使用
在 .nut-step-line 的样式中，设置了 bottom: -50%;。使用负百分比可能会引发布局问题，尤其是在响应式设计中。请确认此设置是否满足设计要求。
建议在不同的屏幕尺寸和浏览器中测试，确保显示效果符合预期。
39-44: 验证 RTL 布局的样式效果
针对 RTL（从右到左）布局的样式定义，请确保在实际应用中显示正确。特别是 .nut-step-line 的 left 和 right 属性需要仔细检查。
建议在支持 RTL 的环境中进行测试，确保组件在 RTL 模式下正常工作。
| const { children, value, className, dot, onStepClick, ...restProps } = | ||
| propSteps |
There was a problem hiding this comment.
移除 direction 属性是一个破坏性更改，可能会影响现有的使用场景。建议：
- 在更新日志中明确记录此变更
- 在迁移指南中提供升级建议
- 考虑增加废弃警告，帮助用户识别需要更新的代码
| &-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); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
线条定位计算复杂，建议简化
当前的线条位置计算使用了复杂的calc表达式，可能难以维护和调试。
建议简化定位逻辑：
&-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
- );
+ top: $steps-base-icon-height;
left: calc(50% - 1px);
}同时建议添加一个SCSS变量来控制线条的位置偏移：
$steps-line-top-offset: $steps-base-icon-height !default;| const [translated] = useTranslate({ | ||
| 'zh-CN': { | ||
| basic: '基础用法', | ||
| dot: '基础用法：点状', | ||
| customIcon: '自定义图标', | ||
| }, | ||
| 'zh-TW': { | ||
| basic: '基础用法', | ||
| dot: '基础用法：点状', | ||
| customIcon: '自定義圖標', | ||
| }, | ||
| 'en-US': { | ||
| basic: 'Basic usage', | ||
| dot: 'Basic usage: Dot', | ||
| customIcon: 'custom Icon', | ||
| }, | ||
| }) |
There was a problem hiding this comment.
💡 Codebase verification
建议修改繁体中文翻译以保持一致性
根据代码库中其他组件的翻译模式，建议将以下翻译修改为：
基础用法->基礎用法点状->點狀
这样可以与代码库中其他组件的繁体中文翻译保持一致，如 circleprogress、checkbox、watermark 等组件都采用了 基礎用法 的翻译。
🔗 Analysis chain
请确认繁体中文翻译是否正确
'basic' 和 'dot' 的繁体中文翻译与简体中文完全相同，建议复查以下翻译：
基础用法是否应该翻译为基礎用法点状是否应该翻译为點狀
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他文件中的繁体中文翻译模式
rg -g '*.{tsx,ts}' '"zh-TW":\s*{' -A 5
Length of output: 128
Script:
#!/bin/bash
# 检查其他文件中的繁体中文翻译模式，修正正则表达式
rg '"zh-TW"' -g '*.{tsx,ts}' -B 2 -A 5
Length of output: 40
Script:
#!/bin/bash
# 搜索所有包含繁体中文翻译的文件
fd -e tsx -e ts -x grep -l "zh-TW"
# 检查是否有其他文件包含"基础用法"或"点状"的繁体中文翻译
rg "基[础礎]用法|[点點]狀" -g '*.{tsx,ts}'
Length of output: 20830
| const propSteps = { ...defaultProps, ...props } | ||
| const { children, value, className, dot, onStepClick, ...restProps } = | ||
| propSteps | ||
|
|
There was a problem hiding this comment.
💡 Codebase verification
建议添加 value 属性的类型和范围验证
从代码分析来看，value 属性在接口定义中是必需的数字类型，但缺乏范围验证。建议：
- 在
VerticalStepsProps接口中添加value属性的类型注释，明确其为非负整数 - 在组件内部添加运行时验证，确保
value为非负数 - 在组件文档中明确说明
value属性的有效值范围
示例代码中的 value 取值都是 1、2、3 等正整数，这表明该属性应该有明确的范围限制。
🔗 Analysis chain
建议添加 value 属性的验证
为了确保组件的稳定性，建议添加对 value 属性的验证，确保其为非负数。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否有其他地方对 value 进行了验证
rg -A 2 "value.*validator" src/packages/
Length of output: 42
Script:
#!/bin/bash
# 检查 verticalsteps 组件的属性定义和验证
ast-grep --pattern 'interface $_ {
$$$
value?: $_
$$$
}'
# 检查是否有其他验证相关的代码
rg -A 3 "validator|validate|isValid" src/packages/verticalsteps/
Length of output: 11623
Script:
#!/bin/bash
# 检查 verticalsteps 组件的属性定义
ast-grep --pattern 'interface $_ {
$$$
value: $_
$$$
}'
# 检查 verticalsteps 组件的实现和使用
rg -A 5 "value.*=.*props" src/packages/verticalsteps/
Length of output: 12720
Script:
#!/bin/bash
# 检查 verticalsteps 组件的接口定义
cat src/packages/verticalsteps/verticalsteps.taro.tsx
# 检查组件的使用示例
fd -e tsx -e ts "demo.*" src/packages/verticalsteps/ -x cat {}
Length of output: 7346
| export interface VerticalStepsProps extends BasicComponent { | ||
| value: number | ||
| dot: boolean | ||
| onStepClick: (index: number) => void | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议添加属性文档注释并优化类型定义
为了提高代码的可维护性和可读性，建议：
- 为接口和每个属性添加 JSDoc 注释
- 考虑将
value设为可选属性，因为它有默认值
建议修改如下：
+/**
+ * VerticalSteps 组件的属性接口
+ */
export interface VerticalStepsProps extends BasicComponent {
+ /** 当前步骤的索引值，默认为 0 */
- value: number
+ value?: number
+ /** 是否显示点状步骤条，默认为 false */
dot: boolean
+ /** 点击步骤时的回调函数 */
onStepClick: (index: number) => void
}📝 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.
| export interface VerticalStepsProps extends BasicComponent { | |
| value: number | |
| dot: boolean | |
| onStepClick: (index: number) => void | |
| } | |
| /** | |
| * VerticalSteps 组件的属性接口 | |
| */ | |
| export interface VerticalStepsProps extends BasicComponent { | |
| /** 当前步骤的索引值，默认为 0 */ | |
| value?: number | |
| /** 是否显示点状步骤条，默认为 false */ | |
| dot: boolean | |
| /** 点击步骤时的回调函数 */ | |
| onStepClick: (index: number) => void | |
| } |
| The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider). | ||
|
|
There was a problem hiding this comment.
修复无效的链接引用
ConfigProvider 组件的链接引用 #/en-US/component/configprovider 无效，需要更新为正确的文档链接。
🧰 Tools
🪛 Markdownlint
62-62: null
Link fragments should be valid
(MD051, link-fragments)
| # VerticalSteps | ||
|
|
||
| Split and display the steps of a process, guide users to complete tasks according to the process, or show users the current status. | ||
|
|
||
| ## Import | ||
|
|
||
| ```tsx | ||
| import { VerticalSteps } from '@nutui/nutui-react' | ||
| ``` | ||
|
|
||
| ## Demo | ||
|
|
||
| ### Basic Usage | ||
|
|
||
| :::demo | ||
|
|
||
| <CodeBlock src='h5/demo1.tsx'></CodeBlock> | ||
|
|
||
| ::: | ||
|
|
||
| ### Basic Usage: Dot | ||
|
|
||
| :::demo | ||
|
|
||
| <CodeBlock src='h5/demo2.tsx'></CodeBlock> | ||
|
|
||
| ::: | ||
|
|
||
| ### Custom icon | ||
|
|
||
| :::demo | ||
|
|
||
| <CodeBlock src='h5/demo3.tsx'></CodeBlock> | ||
|
|
||
| ::: | ||
|
|
||
| ## VerticalSteps | ||
|
|
||
| ### Props | ||
|
|
||
| | Property | Description | Type | Default | | ||
| | --- | --- | --- | --- | | ||
| | current | Current step | `number` | `0` | | ||
| | dot | Dot step bar | `boolean` | `false` | | ||
|
|
||
| ## Step | ||
|
|
||
| ### Props | ||
|
|
||
| | Property | Description | Type | Default | | ||
| | --- | --- | --- | --- | | ||
| | title | Title of the process step | `string` | `-` | | ||
| | description | Descriptive text of process steps (supporting HTML structure) | `string` | `-` | | ||
| | icon | Icon | `ReactNode` | `-` | | ||
| | value | Index of process steps | `number` | `0` | | ||
| | onStepClick | Fired when the title or icon of a step is clicked | `(index: number) => void` | `-` | | ||
|
|
||
| ## Theming | ||
|
|
||
| ### CSS Variables | ||
|
|
||
| The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider). | ||
|
|
||
| | Name | Description | Default | | ||
| | --- | --- | --- | | ||
| | \--nutui-steps-base-icon-width | width of icon container | `25px` | | ||
| | \--nutui-steps-base-icon-height | height of icon container | `25px` | | ||
| | \--nutui-steps-base-icon-line-height | The line height of the icon container | `25px` | | ||
| | \--nutui-steps-base-icon-margin-bottom | The bottom margin of the icon container | `12px` | | ||
| | \--nutui-steps-base-icon-font-size | The font size of the icon container | `$font-size-s` | | ||
| | \--nutui-steps-base-line-width | The width of the dividing line | `100%` | | ||
| | \--nutui-steps-base-line-background | The background color of the dividing line | `$color-text-help` | | ||
| | \--nutui-steps-base-title-font-size | The font size of the title | `$font-size-base` | | ||
| | \--nutui-steps-base-title-color | Title color | `$color-title` | | ||
| | \--nutui-steps-base-title-margin-bottom | Title bottom margin | `10px` | | ||
| | \--nutui-steps-base-description-font-size | The font size of the description text | `$font-size-s` | | ||
| | \--nutui-steps-base-description-color | The font color of description text | `$color-text` | | ||
| | \--nutui-steps-wait-icon-bg-color | Background color of icon container in waiting state | `$color-text-help` | | ||
| | \--nutui-steps-wait-icon-color | font color of icon container in waiting state | `$white` | | ||
| | \--nutui-steps-wait-title-color | wait state title font color | `$color-title` | | ||
| | \--nutui-steps-wait-description-color | wait state description font color | `$color-text` | | ||
| | \--nutui-steps-process-icon-bg-color | Process icon container background color | `$color-primary` | | ||
| | \--nutui-steps-process-icon-color | Process icon container font color | `$white` | | ||
| | \--nutui-steps-process-icon-before-bg-color | Process icon color | `$color-primary-stop-2` | | ||
| | \--nutui-steps-process-title-color | Process title font color | `$color-primary` | | ||
| | \--nutui-steps-process-title-font-size | Process title font size | `$font-size-base` | | ||
| | \--nutui-steps-process-title-font-weight | Process title font weight | `$font-weight-bold` | | ||
| | \--nutui-steps-process-description-color | Process description font color | `$color-text` | | ||
| | \--nutui-steps-finish-icon-bg-color | background color of finish status icon container | `$color-primary-text` | | ||
| | \--nutui-steps-finish-icon-color | font color of finish status icon container | `$color-primary` | | ||
| | \--nutui-steps-finish-title-color | Font color of finish status title | `$color-primary` | | ||
| | \--nutui-steps-finish-description-color | Font color of finish state description | `$color-text` | | ||
| | \--nutui-steps-finish-line-background | The color of the finishing line | `$color-primary` | | ||
| | \--nutui-steps-dot-icon-width | Width of dot progress bar dots | `6px` | | ||
| | \--nutui-steps-dot-icon-height | Height of dot icon progress bar | `6px` | | ||
| | \--nutui-steps-dot-icon-border | Dot progress bar dot border | `2px solid $color-primary-text` | | ||
| | \--nutui-steps-vertical-dot-head-margin | Dot progress bar dot margin | `5px 0 0 0` | | ||
| | \--nutui-steps-process-icon-before-bg-color | The color of the outer border of the dot progress bar in progress | `$color-primary-stop-2` | |
There was a problem hiding this comment.
💡 Codebase verification
需要添加中文（简体）文档
发现以下问题：
- 目前只有英文（en-US）和繁体中文（zh-TW）文档
- 缺少简体中文（zh-CN）文档
- 考虑到项目主要面向中国大陆用户，简体中文文档是必需的
建议：
- 基于现有的繁体中文文档创建简体中文版本
- 确保专业术语的准确性和一致性
- 将文档保存为
src/packages/verticalsteps/doc.zh-CN.md
🔗 Analysis chain
建议确保文档语言的一致性
考虑到项目中存在中文内容（如PR标题："拆分横向和纵向"），建议确认：
- 是否需要优先完善中文文档
- 是否需要同步更新其他语言版本的文档
- 确保所有文档的翻译准确性和专业性
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否存在对应的中文文档
fd -e md -e mdx "doc.(zh-CN|zh-TW).md$" src/packages/verticalsteps/
Length of output: 109
Script:
#!/bin/bash
# Check content of zh-TW doc and look for zh-CN doc
cat src/packages/verticalsteps/doc.zh-TW.md
echo "---"
fd -e md "doc.zh-CN.md$" src/
Length of output: 3311
🧰 Tools
🪛 Markdownlint
62-62: null
Link fragments should be valid
(MD051, link-fragments)
| test('should render horizontal class when props direction is to be horizontal', () => { | ||
| const { getByTestId } = render( | ||
| <VerticalSteps data-testid="steps-horizontal" /> | ||
| ) | ||
| expect(getByTestId('steps-horizontal')).toHaveClass('nut-steps-horizontal') | ||
| }) | ||
|
|
||
| test('should render horizontal class when props direction is to be horizontal', () => { | ||
| const { container } = render( | ||
| <VerticalSteps value={1}> | ||
| <Step value={1} title="步骤一"> | ||
| 1 | ||
| </Step> | ||
| <Step value={2} title="步骤二"> | ||
| 2 | ||
| </Step> | ||
| <Step value={3} title="步骤三"> | ||
| 3 | ||
| </Step> | ||
| </VerticalSteps> | ||
| ) | ||
| expect(container.querySelectorAll('.nut-step')[0]).toHaveClass( | ||
| 'nut-step-process' | ||
| ) | ||
| }) | ||
|
|
||
| test('should render dot class when props dot is to be true', async () => { | ||
| const { getByTestId } = render(<VerticalSteps data-testid="steps-dot" dot />) | ||
| expect(getByTestId('steps-dot')).toHaveClass('nut-steps-dot') | ||
| }) |
There was a problem hiding this comment.
测试描述重复需要修正
在第9行和第16行的测试用例描述完全相同：'should render horizontal class when props direction is to be horizontal'。建议修改第16行的测试描述以更准确地反映其测试内容（验证步骤状态）。
建议修改如下：
-test('should render horizontal class when props direction is to be horizontal', () => {
+test('should render process class for first step when value is set', () => {📝 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.
| test('should render horizontal class when props direction is to be horizontal', () => { | |
| const { getByTestId } = render( | |
| <VerticalSteps data-testid="steps-horizontal" /> | |
| ) | |
| expect(getByTestId('steps-horizontal')).toHaveClass('nut-steps-horizontal') | |
| }) | |
| test('should render horizontal class when props direction is to be horizontal', () => { | |
| const { container } = render( | |
| <VerticalSteps value={1}> | |
| <Step value={1} title="步骤一"> | |
| 1 | |
| </Step> | |
| <Step value={2} title="步骤二"> | |
| 2 | |
| </Step> | |
| <Step value={3} title="步骤三"> | |
| 3 | |
| </Step> | |
| </VerticalSteps> | |
| ) | |
| expect(container.querySelectorAll('.nut-step')[0]).toHaveClass( | |
| 'nut-step-process' | |
| ) | |
| }) | |
| test('should render dot class when props dot is to be true', async () => { | |
| const { getByTestId } = render(<VerticalSteps data-testid="steps-dot" dot />) | |
| expect(getByTestId('steps-dot')).toHaveClass('nut-steps-dot') | |
| }) | |
| test('should render horizontal class when props direction is to be horizontal', () => { | |
| const { getByTestId } = render( | |
| <VerticalSteps data-testid="steps-horizontal" /> | |
| ) | |
| expect(getByTestId('steps-horizontal')).toHaveClass('nut-steps-horizontal') | |
| }) | |
| test('should render process class for first step when value is set', () => { | |
| const { container } = render( | |
| <VerticalSteps value={1}> | |
| <Step value={1} title="步骤一"> | |
| 1 | |
| </Step> | |
| <Step value={2} title="步骤二"> | |
| 2 | |
| </Step> | |
| <Step value={3} title="步骤三"> | |
| 3 | |
| </Step> | |
| </VerticalSteps> | |
| ) | |
| expect(container.querySelectorAll('.nut-step')[0]).toHaveClass( | |
| 'nut-step-process' | |
| ) | |
| }) | |
| test('should render dot class when props dot is to be true', async () => { | |
| const { getByTestId } = render(<VerticalSteps data-testid="steps-dot" dot />) | |
| expect(getByTestId('steps-dot')).toHaveClass('nut-steps-dot') | |
| }) |
| test('should render horizontal class when props direction is to be horizontal', () => { | ||
| const { container } = render( | ||
| <VerticalSteps> | ||
| <Step | ||
| value={1} | ||
| title="已完成" | ||
| description="您的订单已经打包完成，商品已发出" | ||
| icon={<Service />} | ||
| > | ||
| 1 | ||
| </Step> | ||
| <Step | ||
| value={2} | ||
| title="进行中" | ||
| description="您的订单正在配送途中" | ||
| icon={<People />} | ||
| > | ||
| 2 | ||
| </Step> | ||
| <Step | ||
| value={3} | ||
| title="未开始" | ||
| description="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦" | ||
| icon={<Checklist />} | ||
| > | ||
| 3 | ||
| </Step> | ||
| </VerticalSteps> | ||
| ) | ||
| expect(container.querySelectorAll('.nut-step-title')[0].innerHTML).toBe( | ||
| '已完成' | ||
| ) | ||
| expect(container.querySelectorAll('.nut-step-description')[1].innerHTML).toBe( | ||
| '您的订单正在配送途中' | ||
| ) | ||
| expect(container.querySelectorAll('.nut-icon')[2]).toHaveClass( | ||
| 'nut-icon-Checklist' | ||
| ) | ||
| }) |
There was a problem hiding this comment.
测试描述与实际测试内容不符
当前测试实际上是验证步骤组件的标题、描述和图标是否正确渲染，但测试描述却是关于水平方向类名的检查。
建议修改如下：
-test('should render horizontal class when props direction is to be horizontal', () => {
+test('should render step title, description and icon correctly', () => {📝 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.
| test('should render horizontal class when props direction is to be horizontal', () => { | |
| const { container } = render( | |
| <VerticalSteps> | |
| <Step | |
| value={1} | |
| title="已完成" | |
| description="您的订单已经打包完成，商品已发出" | |
| icon={<Service />} | |
| > | |
| 1 | |
| </Step> | |
| <Step | |
| value={2} | |
| title="进行中" | |
| description="您的订单正在配送途中" | |
| icon={<People />} | |
| > | |
| 2 | |
| </Step> | |
| <Step | |
| value={3} | |
| title="未开始" | |
| description="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦" | |
| icon={<Checklist />} | |
| > | |
| 3 | |
| </Step> | |
| </VerticalSteps> | |
| ) | |
| expect(container.querySelectorAll('.nut-step-title')[0].innerHTML).toBe( | |
| '已完成' | |
| ) | |
| expect(container.querySelectorAll('.nut-step-description')[1].innerHTML).toBe( | |
| '您的订单正在配送途中' | |
| ) | |
| expect(container.querySelectorAll('.nut-icon')[2]).toHaveClass( | |
| 'nut-icon-Checklist' | |
| ) | |
| }) | |
| test('should render step title, description and icon correctly', () => { | |
| const { container } = render( | |
| <VerticalSteps> | |
| <Step | |
| value={1} | |
| title="已完成" | |
| description="您的订单已经打包完成，商品已发出" | |
| icon={<Service />} | |
| > | |
| 1 | |
| </Step> | |
| <Step | |
| value={2} | |
| title="进行中" | |
| description="您的订单正在配送途中" | |
| icon={<People />} | |
| > | |
| 2 | |
| </Step> | |
| <Step | |
| value={3} | |
| title="未开始" | |
| description="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦" | |
| icon={<Checklist />} | |
| > | |
| 3 | |
| </Step> | |
| </VerticalSteps> | |
| ) | |
| expect(container.querySelectorAll('.nut-step-title')[0].innerHTML).toBe( | |
| '已完成' | |
| ) | |
| expect(container.querySelectorAll('.nut-step-description')[1].innerHTML).toBe( | |
| '您的订单正在配送途中' | |
| ) | |
| expect(container.querySelectorAll('.nut-icon')[2]).toHaveClass( | |
| 'nut-icon-Checklist' | |
| ) | |
| }) |
| flex-grow: 0; | ||
| flex-shrink: 0; | ||
| flex: 1; |
There was a problem hiding this comment.
修复 'flex' 属性覆盖导致的属性无效问题
在第122行和第123行中，分别定义了 flex-grow: 0; 和 flex-shrink: 0;，但在第124行紧接着使用了简写属性 flex: 1;。CSS 中，使用简写属性会覆盖之前单独设置的相关属性，导致先前的 flex-grow 和 flex-shrink 设置被覆盖。
建议移除冗余的属性，确保属性设置的有效性。您可以应用以下修改：
.nut-steps-horizontal .nut-step {
- flex-grow: 0;
- flex-shrink: 0;
flex: 1;
text-align: center;
font-size: 0;
}这样，使用 flex: 1; 即可同时设置 flex-grow: 1;、flex-shrink: 1; 和 flex-basis: 0%;，实现预期效果。
📝 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.
| flex-grow: 0; | |
| flex-shrink: 0; | |
| flex: 1; | |
| flex: 1; |
🧰 Tools
🪛 Biome
[error] 124-124: Unexpected shorthand property flex after flex-grow
(lint/suspicious/noShorthandPropertyOverrides)
[error] 124-124: Unexpected shorthand property flex after flex-shrink
(lint/suspicious/noShorthandPropertyOverrides)
There was a problem hiding this comment.
Actionable comments posted: 18
🧹 Outside diff range and nitpick comments (29)
src/packages/verticalsteps/demos/h5/demo1.tsx (1)
Line range hint
7-19: 建议考虑文本国际化当前硬编码的中文文本可以考虑使用国际化方案处理，以支持多语言。
建议参考以下方式重构：
+import { useTranslate } from '@/sites/assets/locale' const Demo1 = () => { + const [translated] = useTranslate({ + 'zh-CN': { + completed: '已完成', + inProgress: '进行中', + notStarted: '未开始', + packaged: '您的订单已经打包完成，商品已发出', + delivering: '您的订单正在配送途中', + address: '收货地址为：北京市经济技术开发区科创十一街18号院京东大厦' + } + }) return ( <div style={{ height: '300px', padding: '15px 30px 0' }}> <VerticalSteps value={2}> <Step value={1} - title="已完成" - description="您的订单已经打包完成，商品已发出" + title={translated.completed} + description={translated.packaged} /> <Step value={2} - title="进行中" - description="您的订单正在配送途中" + title={translated.inProgress} + description={translated.delivering} /> <Step value={3} - title="未开始" - description="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦" + title={translated.notStarted} + description={translated.address} /> </VerticalSteps> </div> ) }src/packages/verticalsteps/demos/taro/demo1.tsx (2)
7-8: 建议优化容器样式设置当前的样式设置使用了固定高度和内边距。建议考虑使用更灵活的布局方案。
建议如下修改：
- <View style={{ height: '300px', padding: '15px 30px 0' }}> + <View style={{ minHeight: '300px', padding: '15px 30px 0', boxSizing: 'border-box' }}>
Line range hint
8-20: 步骤展示的实现清晰且结构合理垂直步骤条的实现采用了清晰的结构，每个步骤都包含了标题和描述信息，便于用户理解当前进度。建议考虑添加以下增强功能：
- 为每个步骤添加时间戳
- 考虑添加步骤状态的图标定制
示例改进：
<VerticalSteps value={2}> <Step value={1} title="已完成" + time="2024-01-01 12:00" + icon={<CustomIcon type="success" />} description="您的订单已经打包完成，商品已发出" />src/packages/steps/steps.taro.tsx (2)
33-34: 建议优化类名生成逻辑当前实现将
horizontal类名硬编码为始终存在，建议通过常量或配置来管理这些类名，以提高可维护性。+const STEPS_VARIANTS = { + HORIZONTAL: 'horizontal', + DOT: 'dot', +} as const; const classes = classNames( classPrefix, { - [`${classPrefix}-horizontal`]: true, - [`${classPrefix}-horizontal-dot`]: !!dot, - [`${classPrefix}-dot`]: !!dot, + [`${classPrefix}-${STEPS_VARIANTS.HORIZONTAL}`]: true, + [`${classPrefix}-${STEPS_VARIANTS.HORIZONTAL}-${STEPS_VARIANTS.DOT}`]: !!dot, + [`${classPrefix}-${STEPS_VARIANTS.DOT}`]: !!dot, }, className )
6-10: 类型定义需要补充文档注释建议为
StepsProps接口添加 TSDoc 注释，说明各个属性的用途和可选值，这样可以提升代码的可维护性。+/** + * Steps 组件的属性定义 + * @property {number} value - 当前步骤的索引值 + * @property {boolean} dot - 是否显示点状步骤条 + * @property {Function} onStepClick - 点击步骤时的回调函数 + */ export interface StepsProps extends BasicComponent { value: number dot: boolean onStepClick: (index: number) => void }src/packages/steps/steps.tsx (1)
22-23: Props 解构语法可以优化建议使用对象解构的重命名语法来提高代码可读性。
-const { children, value, className, dot, onStepClick, ...restProps } = - propSteps +const { + children, + value, + className, + dot, + onStepClick, + ...restProps +} = propStepssrc/packages/verticalsteps/verticalsteps.scss (2)
4-27: 建议优化步骤项高度计算方式当前使用固定百分比（33.34%）可能导致在步骤数量不是3个时出现显示问题。
建议改为更灵活的计算方式：
.nut-step { - height: 33.34%; + flex: 1; &:last-child { height: auto; }另外，线条位置计算复杂度较高，建议简化：
&-line { top: calc( - $steps-base-icon-height + - (100% - $steps-base-line-width - $steps-base-icon-margin-bottom) / 2 + $steps-base-icon-height + 50% ); }
39-50: RTL支持完善已正确处理了从右到左布局的情况，包括线条位置和内容间距的调整。
不过建议添加注释说明RTL的用途：
+// 支持从右到左的布局方向 [dir='rtl'] .nut-steps-vertical, .nut-rtl .nut-steps-vertical {src/packages/verticalsteps/demo.taro.tsx (3)
1-9: 建议对导入语句进行分组整理建议将导入语句按以下顺序分组：
- 外部依赖（React, Taro）
- 框架组件（@tarojs/components）
- 工具函数（useTranslate）
- 内部组件（Header, Demo*）
import React from 'react' import Taro from '@tarojs/taro' + import { ScrollView, View } from '@tarojs/components' + import { useTranslate } from '@/sites/assets/locale/taro' import Header from '@/sites/components/header' + import Demo1 from './demos/taro/demo1' import Demo2 from './demos/taro/demo2' import Demo3 from './demos/taro/demo3'
11-27: 建议统一翻译文案的大小写规范英文翻译中存在大小写不一致的情况：
- "Basic usage" 和 "custom Icon" 的首字母大小写不统一
- 建议统一采用首字母大写的形式
'en-US': { basic: 'Basic usage', dot: 'Basic usage: Dot', - customIcon: 'custom Icon', + customIcon: 'Custom Icon', },
28-43: 建议优化性能和可维护性
- 建议将环境判断逻辑提取到组件外部或使用 useMemo：
const isWeb = Taro.getEnv() === 'WEB' const scrollViewClass = `demo bg-w ${isWeb ? 'web' : ''}`
- 考虑将演示用例数据抽象为配置对象，以提高可维护性：
const demos = [ { title: translated.basic, component: Demo1 }, { title: translated.dot, component: Demo2 }, { title: translated.customIcon, component: Demo3 }, ]src/packages/verticalsteps/verticalsteps.taro.tsx (2)
6-10: 建议完善接口文档和类型定义建议添加以下改进：
- 为接口添加 JSDoc 文档，说明组件的用途和使用场景
- 将
onStepClick回调函数设置为可选属性，因为并非所有场景都需要点击事件处理+/** + * VerticalSteps 组件的属性接口 + * @property value - 当前步骤的索引值 + * @property dot - 是否显示点状步骤条 + * @property onStepClick - 点击步骤时的回调函数 + */ export interface VerticalStepsProps extends BasicComponent { value: number dot: boolean - onStepClick: (index: number) => void + onStepClick?: (index: number) => void }
29-45: 建议优化性能和代码结构建议进行以下优化：
- 将
classPrefix提取为常量- 使用
useMemo缓存classes的计算结果- 使用
useMemo缓存parentSteps对象+const CLASS_PREFIX = 'nut-steps' + export const VerticalSteps: FunctionComponent< Partial<VerticalStepsProps> & React.HTMLAttributes<HTMLDivElement> > = (props) => { const propSteps = { ...defaultProps, ...props } const { children, value, className, dot, onStepClick, ...restProps } = propSteps - const parentSteps = { + const parentSteps = useMemo(() => ({ propSteps, - } + }), [propSteps]) - const classPrefix = `nut-steps` - const classes = classNames( - classPrefix, + const classes = useMemo(() => classNames( + CLASS_PREFIX, { - [`${classPrefix}-vertical`]: true, - [`${classPrefix}-vertical-dot`]: !!dot, - [`${classPrefix}-dot`]: !!dot, + [`${CLASS_PREFIX}-vertical`]: true, + [`${CLASS_PREFIX}-vertical-dot`]: !!dot, + [`${CLASS_PREFIX}-dot`]: !!dot, }, className - ) + ), [dot, className])src/packages/verticalsteps/verticalsteps.tsx (1)
6-10: 建议完善接口定义和类型安全性
- 建议为接口添加 JSDoc 文档注释，说明组件的用途和使用场景
onStepClick回调函数应该是可选的- 建议为
value添加类型约束，限制其为非负整数+/** + * VerticalSteps 组件的属性接口 + * @description 用于展示垂直方向的步骤导航 + */ export interface VerticalStepsProps extends BasicComponent { - value: number + value: number & { valueOf(): number } // 确保为数字类型 dot: boolean - onStepClick: (index: number) => void + onStepClick?: (index: number) => void }src/packages/step/step.taro.tsx (1)
Line range hint
1-85: 建议考虑降低与Steps的耦合度目前Step组件通过Context与Steps紧密耦合。虽然这次重构主要关注横向和纵向的拆分，但建议在未来的迭代中考虑：
- 使用更明确的契约来定义Step和Steps之间的关系
- 考虑将共享的类型和接口抽离到单独的类型定义文件中
- 可以考虑使用组合模式来提高组件的灵活性
这些改进可以让组件更容易维护和扩展。
src/packages/step/step.harmony.css (2)
16-17: 建议：考虑使用CSS变量来管理颜色值建议将重复使用的颜色值（如
#888b94）定义为CSS变量，这样可以更容易地维护和统一管理主题颜色。+:root { + --nut-step-default-color: #888b94; +} .nut-step-icon { - background-color: #888b94; - border-color: #888b94; + background-color: var(--nut-step-default-color); + border-color: var(--nut-step-default-color); }
50-51: 建议：检查颜色对比度以确保可访问性使用
#ff0f23作为主要强调色，需要确保：
- 与背景色的对比度符合WCAG标准
- 在不同状态下的文本可读性
- 色盲用户的可访问性
建议：
- 使用颜色对比度检查工具验证所有颜色组合
- 考虑添加额外的视觉提示（如图标或模式）
- 在暗色主题下测试这些颜色
Also applies to: 70-71, 74-74, 77-77
src/packages/verticalsteps/doc.taro.md (1)
13-20: 建议补充基础用法的说明文字在基础用法示例之前，建议添加简要说明，描述该用法的具体场景和实现效果，以帮助用户更好地理解组件的使用方式。
### 基础用法 +纵向步骤条组件支持设置当前步骤，通过 value 属性可以控制当前处于哪一步。 + :::demo <CodeBlock src='taro/demo1.tsx'></CodeBlock>src/packages/verticalsteps/doc.md (3)
1-10: 建议补充组件使用场景说明为了帮助开发者更好地理解和选择组件，建议在介绍部分补充以下内容：
- 适用场景
- 与横向步骤条的区别
- 功能特点
11-36: 建议添加内联代码示例目前的示例仅包含了对外部文件的引用，建议为每个用法添加简单的内联代码示例，方便开发者快速理解和复制使用。例如：
// 基础用法示例 <VerticalSteps value={1}> <VerticalSteps.Step title="标题1" description="描述1" /> <VerticalSteps.Step title="标题2" description="描述2" /> </VerticalSteps>
65-99: 建议完善主题定制文档建议为主题定制部分添加：
- 常见的自定义场景示例
- 各个CSS变量的效果预览图
- 不同主题预设方案
src/packages/verticalsteps/verticalsteps.harmony.css (2)
49-81: 建议统一处理状态样式当前不同状态下的样式使用了重复的颜色值，建议统一使用 CSS 变量并考虑使用 CSS 自定义属性来简化状态样式的管理：
.nut-step { + --step-color: var(--nut-steps-wait-color); + --step-bg-color: #ffffff; } .nut-step.nut-step-process { + --step-color: var(--nut-steps-primary-color); } .nut-step.nut-step-finish { + --step-color: var(--nut-steps-primary-color); + --step-bg-color: #ffffff; } .nut-step-icon { - background-color: #ff0f23; + background-color: var(--step-color); }
83-116: 优化点状步骤器的样式计算当前点状变体中存在多个固定的数值计算，建议：
- 使用 CSS 变量管理关键尺寸
- 简化伪元素的定位计算
.nut-steps-dot { + --dot-size: 6px; + --dot-border: 2px; + --dot-process-size: 14px; } .nut-steps-dot .nut-step-icon { - width: 6px; - height: 6px; + width: var(--dot-size); + height: var(--dot-size); - border: 2px solid #ffffff; + border: var(--dot-border) solid #ffffff; } .nut-steps-dot .nut-step-process .nut-step-icon:before { + --offset: calc((var(--dot-process-size) - var(--dot-size)) / -2); - margin-left: -7px; - margin-top: -7px; + margin-left: var(--offset); + margin-top: var(--offset); }src/packages/verticalsteps/doc.en-US.md (2)
11-36: 建议为每个示例添加功能说明为了帮助用户更好地理解每个示例的用途，建议在每个示例前添加简短的功能说明。例如：
- 基础用法：说明组件的基本使用方式
- 圆点样式：展示使用圆点风格的效果
- 自定义图标：说明如何自定义步骤图标
37-56: 建议补充属性类型的详细说明为了提高文档的可用性，建议：
- 对于
icon属性，说明支持的具体图标类型- 对于
onStepClick回调函数，补充返回参数的具体含义src/packages/verticalsteps/__tests__/steps.spec.tsx (4)
9-14: 测试用例标题需要修正这两个测试用例的标题完全相同（"should render horizontal class when props direction is to be horizontal"），但实际测试的功能不同：
- 第一个测试水平类的渲染
- 第二个测试当前步骤的样式类
建议修改为更准确的描述：
-test('should render horizontal class when props direction is to be horizontal', () => { +test('should render horizontal class by default', () => { -test('should render horizontal class when props direction is to be horizontal', () => { +test('should render process class for current step', () => {Also applies to: 16-33
35-38: 建议增加负向测试用例当前只测试了
dot属性为true的情况，建议也测试false的情况。test('should not render dot class when props dot is false', () => { const { getByTestId } = render(<VerticalSteps data-testid="steps-dot" />) expect(getByTestId('steps-dot')).not.toHaveClass('nut-steps-dot') })
80-126: 建议优化状态更新测试当前测试用例中的状态更新逻辑可以更完整：
- 缺少对重置到步骤1的测试
- 建议使用
beforeEach重置状态建议添加：
test('should reset to step 1 when reaching the last step', () => { const { container, getByText } = render(<App />) // 点击到最后一步 fireEvent.click(getByText('下一步')) fireEvent.click(getByText('下一步')) // 再次点击应该重置到第一步 fireEvent.click(getByText('下一步')) expect(container.querySelectorAll('.nut-step')[0]).toHaveClass( 'nut-step-process' ) })
155-186: 建议增加更多插槽渲染场景当前只测试了 description 插槽的 HTML 内容渲染，建议增加其他插槽的测试。
建议添加：
- 测试标题插槽
- 测试图标插槽
- 测试自定义内容插槽
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (38)
packages/nutui-taro-demo/src/app.config.ts(2 hunks)src/config.json(1 hunks)src/packages/step/step.harmony.css(5 hunks)src/packages/step/step.scss(0 hunks)src/packages/step/step.taro.tsx(1 hunks)src/packages/step/step.tsx(1 hunks)src/packages/steps/demo.taro.tsx(1 hunks)src/packages/steps/demo.tsx(0 hunks)src/packages/steps/demos/h5/demo9.tsx(0 hunks)src/packages/steps/demos/taro/demo9.tsx(0 hunks)src/packages/steps/doc.en-US.md(0 hunks)src/packages/steps/doc.md(0 hunks)src/packages/steps/doc.taro.md(1 hunks)src/packages/steps/doc.zh-TW.md(0 hunks)src/packages/steps/steps.harmony.css(1 hunks)src/packages/steps/steps.scss(1 hunks)src/packages/steps/steps.taro.tsx(2 hunks)src/packages/steps/steps.tsx(2 hunks)src/packages/verticalsteps/__tests__/steps.spec.tsx(1 hunks)src/packages/verticalsteps/demo.taro.tsx(1 hunks)src/packages/verticalsteps/demo.tsx(1 hunks)src/packages/verticalsteps/demos/h5/demo1.tsx(2 hunks)src/packages/verticalsteps/demos/h5/demo2.tsx(1 hunks)src/packages/verticalsteps/demos/h5/demo3.tsx(1 hunks)src/packages/verticalsteps/demos/taro/demo1.tsx(2 hunks)src/packages/verticalsteps/demos/taro/demo2.tsx(1 hunks)src/packages/verticalsteps/demos/taro/demo3.tsx(1 hunks)src/packages/verticalsteps/doc.en-US.md(1 hunks)src/packages/verticalsteps/doc.md(1 hunks)src/packages/verticalsteps/doc.taro.md(1 hunks)src/packages/verticalsteps/doc.zh-TW.md(1 hunks)src/packages/verticalsteps/index.taro.ts(1 hunks)src/packages/verticalsteps/index.ts(1 hunks)src/packages/verticalsteps/verticalsteps.harmony.css(1 hunks)src/packages/verticalsteps/verticalsteps.scss(1 hunks)src/packages/verticalsteps/verticalsteps.taro.tsx(1 hunks)src/packages/verticalsteps/verticalsteps.tsx(1 hunks)src/styles/variables.scss(1 hunks)
💤 Files with no reviewable changes (7)
- src/packages/step/step.scss
- src/packages/steps/demo.tsx
- src/packages/steps/demos/h5/demo9.tsx
- src/packages/steps/demos/taro/demo9.tsx
- src/packages/steps/doc.en-US.md
- src/packages/steps/doc.md
- src/packages/steps/doc.zh-TW.md
✅ Files skipped from review due to trivial changes (7)
- packages/nutui-taro-demo/src/app.config.ts
- src/packages/verticalsteps/demos/h5/demo2.tsx
- src/packages/verticalsteps/demos/h5/demo3.tsx
- src/packages/verticalsteps/demos/taro/demo2.tsx
- src/packages/verticalsteps/demos/taro/demo3.tsx
- src/packages/verticalsteps/index.taro.ts
- src/packages/verticalsteps/index.ts
🧰 Additional context used
🪛 Markdownlint
src/packages/steps/doc.taro.md
95-95: null
Link fragments should be valid
(MD051, link-fragments)
src/packages/verticalsteps/doc.en-US.md
62-62: null
Link fragments should be valid
(MD051, link-fragments)
src/packages/verticalsteps/doc.md
63-63: null
Link fragments should be valid
(MD051, link-fragments)
src/packages/verticalsteps/doc.taro.md
63-63: null
Link fragments should be valid
(MD051, link-fragments)
src/packages/verticalsteps/doc.zh-TW.md
63-63: null
Link fragments should be valid
(MD051, link-fragments)
🪛 Biome
src/packages/steps/steps.harmony.css
[error] 124-124: Unexpected shorthand property flex after flex-grow
(lint/suspicious/noShorthandPropertyOverrides)
[error] 124-124: Unexpected shorthand property flex after flex-shrink
(lint/suspicious/noShorthandPropertyOverrides)
🔇 Additional comments (27)
src/packages/verticalsteps/demos/h5/demo1.tsx (2)
1-4: 导入声明和组件重命名看起来不错！
组件重命名为 Demo1 更符合作为垂直步骤示例的第一个演示，导入声明的修改也正确反映了新的组件结构。
6-6: 建议验证样式在不同设备上的展示效果
固定高度和填充的设置可能需要在不同尺寸的设备上进行验证，以确保良好的展示效果。
✅ Verification successful
样式设置符合组件设计规范
经过验证，height: '300px' 和 padding: '15px 30px 0' 的样式设置在所有垂直步骤条的演示用例中都保持一致，包括H5和Taro版本。这表明这是组件的标准展示样式，已经过充分测试和验证。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他演示文件中是否使用了类似的样式设置
rg -l "height: '300px'" src/packages/verticalsteps/demos/
Length of output: 347
Script:
#!/bin/bash
# 检查这些文件中的具体样式设置
rg "height: '300px'" src/packages/verticalsteps/demos/ -A 2 -B 2
Length of output: 2354
src/packages/verticalsteps/demos/taro/demo1.tsx (2)
3-3: 导入声明和组件重命名符合预期！
组件从 Demo8 重命名为 Demo1，同时更新了相应的导入声明，使用新的 VerticalSteps 组件替代原来的 Steps 组件，这些更改保持了一致性。
Also applies to: 5-5
24-24: 导出声明正确
组件导出声明符合规范。
src/packages/verticalsteps/demo.tsx (3)
1-6: 导入语句结构清晰合理！
导入声明遵循了良好的代码组织结构，将相关组件和钩子函数分组导入。
25-37: 组件结构清晰，渲染逻辑合理！
组件采用了良好的分层结构，每个演示用例都有清晰的标题说明，便于用户理解不同功能。
39-39: 导出语句符合规范！
组件导出方式符合 React 组件的标准实践。
src/packages/steps/steps.taro.tsx (2)
22-23: Props 解构简化符合重构目标
移除了 direction 属性的解构，这与将步骤组件拆分为横向和纵向的重构目标相符。
3-3: 导入路径变更需要验证
导入路径从相对路径 ./context 更改为 ../step/context，需要确保此更改与模块重组保持一致。
✅ Verification successful
导入路径变更正确且安全
导入路径 ../step/context 是正确的，因为：
DataContext确实定义在src/packages/step/context.ts文件中- 在 Steps 组件中正确使用了
DataContext.Provider - 新的导入路径与组件的实际位置相对应
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证 context 文件的位置和引用
rg -l "DataContext" src/
Length of output: 439
Script:
#!/bin/bash
# 检查 DataContext 的定义和导出位置
ast-grep --pattern 'export const DataContext = $_'
# 检查 DataContext 的具体使用方式
rg "DataContext" -A 2 src/packages/step/context.ts
rg "DataContext" -A 2 src/packages/steps/steps.taro.tsx
Length of output: 701
src/packages/steps/steps.tsx (2)
3-3: 导入路径变更需要验证其影响范围
DataContext 的导入路径从 ./context 更改为 ../step/context，这表明进行了模块重组。
✅ Verification successful
Let me generate additional scripts to verify the import path changes.
导入路径变更是合理的重构
导入路径从 ./context 更改为 ../step/context 是正确的重构：
- DataContext 已被移动到
step包中作为独立模块 - 这符合将 Steps 组件拆分为水平和垂直两个独立组件的重构目标
- 其他组件（如 swiper、row）都在各自的包中维护自己的 context
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否有其他文件仍在使用旧的导入路径
rg -l "from './context'" src/packages/steps/
Length of output: 27055
Script:
#!/bin/bash
# 检查 DataContext 的导入和使用情况
rg -l "DataContext" src/packages/
Length of output: 448
Script:
#!/bin/bash
# 检查 DataContext 的具体定义和导入情况
rg -A 3 "export.*?DataContext" src/packages/
Length of output: 275
33-34: 类名逻辑简化需要确认兼容性
移除了 direction 属性后，Steps 组件将只支持水平方向。这是一个重大改变，需要：
- 确保这符合产品需求
- 验证是否会影响现有使用场景
- 在更新日志中标注这是一个 breaking change
src/packages/verticalsteps/verticalsteps.scss (2)
1-4: 基础结构设计合理
导入基础样式并设置垂直步骤条的高度是合适的做法。
29-37: 圆点样式变体实现正确
圆点样式的特殊处理符合设计需求，计算方式合理。
src/packages/verticalsteps/demo.taro.tsx (1)
45-45: 导出语句正确且符合规范
src/packages/steps/demo.taro.tsx (2)
49-49: 请确认 ScrollView 样式修改的影响
移除 'full' 类名可能会影响滚动视图的布局表现。建议验证在各种屏幕尺寸下的显示效果。
Line range hint 1-71: 重构方案建议
横向步骤条与纵向步骤条的拆分是一个好的重构方向，提高了代码的模块化程度。建议：
- 确保在文档中清晰说明这个变更
- 更新组件使用指南，标注推荐使用场景
src/packages/step/step.tsx (2)
Line range hint 1-83: 代码实现规范，结构清晰
组件实现符合以下最佳实践：
- 使用 TypeScript 确保类型安全
- 属性定义完整，包含默认值
- 状态管理清晰，使用 Context 进行父子组件通信
- 渲染逻辑结构合理
3-3: 导入路径变更需要验证
导入路径从 steps 改为 step 文件夹，需要确保相关依赖都已正确更新。
运行以下脚本验证上下文导入的一致性：
✅ Verification successful
导入路径已正确更新，无需进一步修改
搜索结果显示所有使用 DataContext 的组件都已经正确引用 @/packages/step/context：
steps和verticalsteps组件使用相对路径../step/contextstep组件使用绝对路径@/packages/step/context
这些引用路径都是一致且正确的，不存在仍在使用旧路径 @/packages/steps/context 的情况。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证所有使用 DataContext 的文件是否都已更新导入路径
# 测试：搜索所有导入 DataContext 的位置
rg "import.*DataContext.*from.*@/packages/(step|steps)/context"
Length of output: 232
Script:
#!/bin/bash
# 验证是否存在其他可能使用 DataContext 的文件
rg "DataContext" -A 2 -B 2
# 检查 context.ts 文件的位置
fd "context.ts" --type f
Length of output: 8905
src/packages/step/step.taro.tsx (1)
4-4: 导入路径修改看起来符合重构目标
这个修改符合将横向和纵向步骤组件拆分的重构方向。
让我们验证新的上下文文件位置和一致性：
✅ Verification successful
导入路径修改已验证正确
验证结果显示：
- DataContext 已正确定义在新路径
src/packages/step/context.ts中 - 所有相关组件（steps、verticalsteps、step）都已统一使用新的导入路径
- 导入路径的修改与代码重构方向保持一致
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证新的context文件是否存在
fd "context.ts" src/packages/step/
# 检查是否还有其他地方使用旧的导入路径
rg "@/packages/steps/context" --type ts
Length of output: 103
Script:
#!/bin/bash
# 检查context.ts的内容，确认它包含DataContext
cat src/packages/step/context.ts
# 检查是否有其他文件引用了这个context
rg "DataContext" --type ts -A 2
Length of output: 5461
src/packages/step/step.harmony.css (1)
39-39: 建议：检查字重增加是否影响可读性
将标题字重从500增加到600可能会影响某些字体的显示效果。建议：
- 确保在不同操作系统下测试字体渲染效果
- 考虑是否需要针对不同设备进行字重调整
Also applies to: 55-57
✅ Verification successful
Let me analyze the results. I can see that font-weight:600 is consistently used across multiple components in the harmony design system, including button, resultpage, verticalsteps, steps, popup, and navbar components. This indicates a deliberate design choice for emphasis in the UI system. The change from 500 to 600 in step.harmony.css aligns with this pattern.
Let me generate the final response in Chinese:
字重设置符合设计规范，无需调整
经过验证，font-weight:600 的设置在多个 Harmony 设计组件中被一致使用，包括 Button、ResultPage、Steps 等关键组件。这表明这是设计系统中的标准规范，不会影响可读性。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否有其他组件使用了相同的字重设置
rg "font-weight:\s*[456]00" --type css
Length of output: 3926
src/packages/verticalsteps/doc.taro.md (1)
54-57:
Props 表格中存在重复的 description 属性
Props 表格中 description 属性出现了两次，且类型定义不同，这可能会造成使用混淆。建议保留 ReactNode 类型的定义，删除重复的条目。
| description | 流程步骤的描述性文字 | `string` | `-` |
| icon | 图标(来自Icon组件的name属性) | `ReactNode` | `-` |
| value | 流程步骤的索引 | `number` | `0` |
-| description | 流程步骤的描述性文字的html结构 | `React.ReactNode` | `-` |Likely invalid or redundant comment.
src/packages/verticalsteps/verticalsteps.harmony.css (1)
149-158: RTL 支持实现完善
当前 RTL 支持的实现考虑周全，同时支持 dir 属性和类选择器，符合最佳实践。
src/packages/verticalsteps/doc.en-US.md (2)
1-10: 代码结构清晰，描述准确！
组件的介绍和导入部分结构合理，提供了必要的信息。
64-98: 主题变量文档完整且详细！
CSS 变量的文档结构清晰，包含了所有必要的样式自定义选项，对于开发者进行主题定制很有帮助。
src/packages/verticalsteps/__tests__/steps.spec.tsx (1)
1-8: 导入语句看起来不错！
导入了必要的测试工具和组件，结构清晰。
src/styles/variables.scss (1)
1311-1314: 变量定义正确且符合规范
新增的 $verticalsteps-dot-head-margin 变量定义合理：
- 命名遵循现有的命名规范
- 使用
!default标志允许覆盖 - 值设置为
5px 0适合垂直步骤的间距需求
src/packages/steps/steps.scss (1)
39-44: RTL 支持实现正确
RTL（从右到左）布局的支持通过调整 .nut-step-line 的 left 和 right 属性，实现了在 RTL 环境下线条位置的正确显示，代码逻辑清晰，符合预期。
| const [translated] = useTranslate({ | ||
| 'zh-CN': { | ||
| basic: '基础用法', | ||
| dot: '基础用法：点状', | ||
| customIcon: '自定义图标', | ||
| }, | ||
| 'zh-TW': { | ||
| basic: '基础用法', | ||
| dot: '基础用法：点状', | ||
| customIcon: '自定義圖標', | ||
| }, | ||
| 'en-US': { | ||
| basic: 'Basic usage', | ||
| dot: 'Basic usage: Dot', | ||
| customIcon: 'custom Icon', | ||
| }, | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议修正繁体中文翻译
zh-TW（繁体中文）的翻译中，'basic' 和 'dot' 使用了简体中文文案。建议修改为相应的繁体中文：
'zh-TW': {
- basic: '基础用法',
- dot: '基础用法：点状',
+ basic: '基礎用法',
+ dot: '基礎用法：點狀',
customIcon: '自定義圖標',
},📝 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 [translated] = useTranslate({ | |
| 'zh-CN': { | |
| basic: '基础用法', | |
| dot: '基础用法：点状', | |
| customIcon: '自定义图标', | |
| }, | |
| 'zh-TW': { | |
| basic: '基础用法', | |
| dot: '基础用法：点状', | |
| customIcon: '自定義圖標', | |
| }, | |
| 'en-US': { | |
| basic: 'Basic usage', | |
| dot: 'Basic usage: Dot', | |
| customIcon: 'custom Icon', | |
| }, | |
| }) | |
| const [translated] = useTranslate({ | |
| 'zh-CN': { | |
| basic: '基础用法', | |
| dot: '基础用法：点状', | |
| customIcon: '自定义图标', | |
| }, | |
| 'zh-TW': { | |
| basic: '基礎用法', | |
| dot: '基礎用法：點狀', | |
| customIcon: '自定義圖標', | |
| }, | |
| 'en-US': { | |
| basic: 'Basic usage', | |
| dot: 'Basic usage: Dot', | |
| customIcon: 'custom Icon', | |
| }, | |
| }) |
| export interface StepsProps extends BasicComponent { | ||
| value: number | ||
| direction: string | ||
| dot: boolean | ||
| onStepClick: (index: number) => void | ||
| } | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议完善类型定义和默认值处理
StepsProps接口中的onStepClick回调是必选的，建议改为可选- 默认值中没有为
onStepClick提供空函数，可能导致运行时错误
export interface StepsProps extends BasicComponent {
value: number
dot: boolean
- onStepClick: (index: number) => void
+ onStepClick?: (index: number) => void
}
const defaultProps = {
...ComponentDefaults,
value: 0,
dot: false,
+ onStepClick: (index: number) => {},
} as StepsPropsAlso applies to: 13-17
| export const VerticalSteps: FunctionComponent< | ||
| Partial<VerticalStepsProps> & React.HTMLAttributes<HTMLDivElement> | ||
| > = (props) => { | ||
| const propSteps = { ...defaultProps, ...props } | ||
| const { children, value, className, dot, onStepClick, ...restProps } = | ||
| propSteps | ||
|
|
||
| const parentSteps = { | ||
| propSteps, | ||
| } | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议增加属性验证和优化类型定义
当前实现有以下可以改进的地方：
- 缺少对
value属性的有效性验证 parentSteps的类型定义可以更严格
建议添加以下改进：
+interface ParentStepsContext {
+ propSteps: VerticalStepsProps
+}
export const VerticalSteps: FunctionComponent<
Partial<VerticalStepsProps> & React.HTMLAttributes<HTMLDivElement>
> = (props) => {
const propSteps = { ...defaultProps, ...props }
const { children, value, className, dot, onStepClick, ...restProps } =
propSteps
+ if (value < 0) {
+ console.warn('VerticalSteps: value 不能为负数')
+ }
- const parentSteps = {
+ const parentSteps: ParentStepsContext = {
propSteps,
}📝 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.
| export const VerticalSteps: FunctionComponent< | |
| Partial<VerticalStepsProps> & React.HTMLAttributes<HTMLDivElement> | |
| > = (props) => { | |
| const propSteps = { ...defaultProps, ...props } | |
| const { children, value, className, dot, onStepClick, ...restProps } = | |
| propSteps | |
| const parentSteps = { | |
| propSteps, | |
| } | |
| interface ParentStepsContext { | |
| propSteps: VerticalStepsProps | |
| } | |
| export const VerticalSteps: FunctionComponent< | |
| Partial<VerticalStepsProps> & React.HTMLAttributes<HTMLDivElement> | |
| > = (props) => { | |
| const propSteps = { ...defaultProps, ...props } | |
| const { children, value, className, dot, onStepClick, ...restProps } = | |
| propSteps | |
| if (value < 0) { | |
| console.warn('VerticalSteps: value 不能为负数') | |
| } | |
| const parentSteps: ParentStepsContext = { | |
| propSteps, | |
| } |
| export const VerticalSteps: FunctionComponent< | ||
| Partial<VerticalStepsProps> & React.HTMLAttributes<HTMLDivElement> | ||
| > = (props) => { | ||
| const propSteps = { ...defaultProps, ...props } | ||
| const { children, value, className, dot, onStepClick, ...restProps } = | ||
| propSteps | ||
|
|
||
| const parentSteps = { | ||
| propSteps, | ||
| } | ||
|
|
There was a problem hiding this comment.
建议增加输入验证并优化上下文结构
- 需要添加对
value属性的验证，确保其为非负数 - 建议优化
parentSteps的结构，直接传递必要的属性而不是整个propSteps对象
export const VerticalSteps: FunctionComponent<
Partial<VerticalStepsProps> & React.HTMLAttributes<HTMLDivElement>
> = (props) => {
const propSteps = { ...defaultProps, ...props }
const { children, value, className, dot, onStepClick, ...restProps } =
propSteps
+ if (value < 0) {
+ console.warn('VerticalSteps: value should not be negative')
+ }
+
const parentSteps = {
- propSteps,
+ value,
+ dot,
+ onStepClick,
}📝 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.
| export const VerticalSteps: FunctionComponent< | |
| Partial<VerticalStepsProps> & React.HTMLAttributes<HTMLDivElement> | |
| > = (props) => { | |
| const propSteps = { ...defaultProps, ...props } | |
| const { children, value, className, dot, onStepClick, ...restProps } = | |
| propSteps | |
| const parentSteps = { | |
| propSteps, | |
| } | |
| export const VerticalSteps: FunctionComponent< | |
| Partial<VerticalStepsProps> & React.HTMLAttributes<HTMLDivElement> | |
| > = (props) => { | |
| const propSteps = { ...defaultProps, ...props } | |
| const { children, value, className, dot, onStepClick, ...restProps } = | |
| propSteps | |
| if (value < 0) { | |
| console.warn('VerticalSteps: value should not be negative') | |
| } | |
| const parentSteps = { | |
| value, | |
| dot, | |
| onStepClick, | |
| } |
| const classPrefix = `nut-steps` | ||
| const classes = classNames( | ||
| classPrefix, | ||
| { | ||
| [`${classPrefix}-vertical`]: true, | ||
| [`${classPrefix}-vertical-dot`]: !!dot, | ||
| [`${classPrefix}-dot`]: !!dot, | ||
| }, | ||
| className | ||
| ) | ||
| return ( | ||
| <DataContext.Provider value={parentSteps}> | ||
| <div className={classes} {...restProps}> | ||
| {children} | ||
| </div> | ||
| </DataContext.Provider> | ||
| ) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议增强组件的可访问性
- 建议添加 ARIA 属性以提升可访问性
- 建议为步骤容器添加语义化的角色属性
- 建议添加键盘导航支持
return (
<DataContext.Provider value={parentSteps}>
- <div className={classes} {...restProps}>
+ <div
+ className={classes}
+ role="navigation"
+ aria-label="垂直步骤导航"
+ {...restProps}
+ >
{children}
</div>
</DataContext.Provider>
)📝 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 classPrefix = `nut-steps` | |
| const classes = classNames( | |
| classPrefix, | |
| { | |
| [`${classPrefix}-vertical`]: true, | |
| [`${classPrefix}-vertical-dot`]: !!dot, | |
| [`${classPrefix}-dot`]: !!dot, | |
| }, | |
| className | |
| ) | |
| return ( | |
| <DataContext.Provider value={parentSteps}> | |
| <div className={classes} {...restProps}> | |
| {children} | |
| </div> | |
| </DataContext.Provider> | |
| ) | |
| const classPrefix = `nut-steps` | |
| const classes = classNames( | |
| classPrefix, | |
| { | |
| [`${classPrefix}-vertical`]: true, | |
| [`${classPrefix}-vertical-dot`]: !!dot, | |
| [`${classPrefix}-dot`]: !!dot, | |
| }, | |
| className | |
| ) | |
| return ( | |
| <DataContext.Provider value={parentSteps}> | |
| <div | |
| className={classes} | |
| role="navigation" | |
| aria-label="垂直步骤导航" | |
| {...restProps} | |
| > | |
| {children} | |
| </div> | |
| </DataContext.Provider> | |
| ) |
| test('should render horizontal class when props direction is to be horizontal', () => { | ||
| const { container } = render( | ||
| <VerticalSteps> | ||
| <Step | ||
| value={1} | ||
| title="已完成" | ||
| description="您的订单已经打包完成，商品已发出" | ||
| icon={<Service />} | ||
| > | ||
| 1 | ||
| </Step> | ||
| <Step | ||
| value={2} | ||
| title="进行中" | ||
| description="您的订单正在配送途中" | ||
| icon={<People />} | ||
| > | ||
| 2 | ||
| </Step> | ||
| <Step | ||
| value={3} | ||
| title="未开始" | ||
| description="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦" | ||
| icon={<Checklist />} | ||
| > | ||
| 3 | ||
| </Step> | ||
| </VerticalSteps> | ||
| ) | ||
| expect(container.querySelectorAll('.nut-step-title')[0].innerHTML).toBe( | ||
| '已完成' | ||
| ) | ||
| expect(container.querySelectorAll('.nut-step-description')[1].innerHTML).toBe( | ||
| '您的订单正在配送途中' | ||
| ) | ||
| expect(container.querySelectorAll('.nut-icon')[2]).toHaveClass( | ||
| 'nut-icon-Checklist' | ||
| ) | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议拆分测试用例
当前测试用例同时验证了多个功能点（标题、描述、图标），建议拆分为独立的测试用例以提高可维护性。
建议拆分为：
- 测试标题渲染
- 测试描述渲染
- 测试图标渲染
示例结构：
describe('VerticalSteps content rendering', () => {
test('should render step titles correctly', () => {
// 测试标题
})
test('should render step descriptions correctly', () => {
// 测试描述
})
test('should render step icons correctly', () => {
// 测试图标
})
})| test('should emited click when step trigger', () => { | ||
| const handleClickStep = vi.fn() | ||
| const { getByText } = render( | ||
| <VerticalSteps value={1} onStepClick={handleClickStep}> | ||
| <Step | ||
| value={1} | ||
| title="已完成" | ||
| description="您的订单已经打包完成，商品已发出" | ||
| > | ||
| 1 | ||
| </Step> | ||
| <Step value={2} title="进行中" description="您的订单正在配送途中"> | ||
| 2 | ||
| </Step> | ||
| <Step | ||
| value={3} | ||
| title="未开始" | ||
| description="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦" | ||
| > | ||
| 3 | ||
| </Step> | ||
| </VerticalSteps> | ||
| ) | ||
| fireEvent.click(getByText('2')) | ||
| expect(handleClickStep).toBeCalled() | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议增加事件参数验证
当前只验证了事件被触发，但没有验证传递给事件处理函数的参数。
test('should emit click event with correct step value', () => {
const handleClickStep = vi.fn()
const { getByText } = render(
<VerticalSteps value={1} onStepClick={handleClickStep}>
{/* ... */}
</VerticalSteps>
)
fireEvent.click(getByText('2'))
expect(handleClickStep).toHaveBeenCalledWith(2)
})| { | ||
| "version": "2.0.0", | ||
| "name": "VerticalSteps", | ||
| "type": "component", | ||
| "cName": "步骤条", | ||
| "desc": "拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。", | ||
| "sort": 7, | ||
| "show": true, | ||
| "taro": true, | ||
| "author": "swag~jun" | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议优化组件配置以区分水平和垂直步骤条
sort值与水平步骤条组件重复，建议调整以避免冲突- 建议更新描述和中文名称以突出垂直特性
建议应用以下修改：
{
"version": "2.0.0",
"name": "VerticalSteps",
"type": "component",
- "cName": "步骤条",
- "desc": "拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。",
- "sort": 7,
+ "cName": "垂直步骤条",
+ "desc": "以垂直方向拆分展示某项流程的步骤，适用于需要垂直展示步骤流程的场景。",
+ "sort": 8,
"show": true,
"taro": true,
"author": "swag~jun"
},📝 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.
| { | |
| "version": "2.0.0", | |
| "name": "VerticalSteps", | |
| "type": "component", | |
| "cName": "步骤条", | |
| "desc": "拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。", | |
| "sort": 7, | |
| "show": true, | |
| "taro": true, | |
| "author": "swag~jun" | |
| }, | |
| { | |
| "version": "2.0.0", | |
| "name": "VerticalSteps", | |
| "type": "component", | |
| "cName": "垂直步骤条", | |
| "desc": "以垂直方向拆分展示某项流程的步骤，适用于需要垂直展示步骤流程的场景。", | |
| "sort": 8, | |
| "show": true, | |
| "taro": true, | |
| "author": "swag~jun" | |
| }, |
| flex-grow: 0; | ||
| flex-shrink: 0; | ||
| flex: 1; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议修正 flex 属性的定义
在 .nut-step 中，您同时定义了 flex-grow: 0;、flex-shrink: 0; 和 flex: 1;。需要注意的是，flex: 1; 是 flex: 1 1 0%; 的简写，会覆盖之前的 flex-grow 和 flex-shrink 设置，这可能导致样式与预期不符。建议根据需求调整这些属性，以避免冲突。
建议修改如下：
- flex-grow: 0;
- flex-shrink: 0;
flex: 1;如果希望 flex-grow 和 flex-shrink 都为 1，则保留 flex: 1; 即可。如果需要其他值，请明确指定。
📝 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.
| flex-grow: 0; | |
| flex-shrink: 0; | |
| flex: 1; | |
| flex: 1; |
| flex-grow: 0; | ||
| flex-shrink: 0; | ||
| flex: 1; |
There was a problem hiding this comment.
避免使用 flex 简写属性覆盖之前的 flex-grow 和 flex-shrink 设置
在第122行和第123行，您分别设置了 flex-grow: 0; 和 flex-shrink: 0;，但在第124行又使用了 flex: 1; 简写属性。flex 的简写会重置之前的 flex-grow 和 flex-shrink，导致前面的设置被覆盖。建议修改以避免属性冲突。
建议的修改方案：
方案一：移除重复的属性
flex-grow: 0;
flex-shrink: 0;
- flex: 1;
+ flex: 1;方案二：重新设置 flex 属性
如果希望保持原有的 flex-grow 和 flex-shrink 值，可以修改 flex 属性，使其不覆盖之前的设置。
flex-grow: 0;
flex-shrink: 0;
- flex: 1;
+ flex-basis: 0%;Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 Biome
[error] 124-124: Unexpected shorthand property flex after flex-grow
(lint/suspicious/noShorthandPropertyOverrides)
[error] 124-124: Unexpected shorthand property flex after flex-shrink
(lint/suspicious/noShorthandPropertyOverrides)
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
发布说明
新功能
VerticalSteps组件，支持垂直步骤指示，帮助用户引导流程或显示当前状态。Demo1,Demo2,Demo3）展示VerticalSteps的用法。文档
VerticalSteps组件的文档，包含使用示例和属性说明。样式