feat: Tour support classnames and styles #70
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
概述遍历这个拉取请求引入了对导览（Tour）组件的增强功能，主要添加了对语义化样式和类名的支持。通过引入新的接口和属性，开发者现在可以更灵活地自定义导览组件的不同部分的样式和类名。这些更改涉及多个文件，包括接口定义、组件实现和测试用例。 变更
序列图sequenceDiagram
participant User
participant Tour
participant TourStep
participant DefaultPanel
participant Mask
User->>Tour: 配置自定义样式和类名
Tour->>TourStep: 传递样式和类名
TourStep->>DefaultPanel: 应用样式和类名
Tour->>Mask: 传递样式和类名
Mask->>Mask: 渲染带有自定义样式的遮罩层
诗歌
Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
tests/index.test.tsx (1)
1091-1091: Ensure negative or unexpected radius values are handled gracefully
此处对radius等于 0 的情况进行了准确测试，建议同时考虑负值或异常输入的情况，以确保组件在接收到无效或异常的radius值时也能稳定运行。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
tests/__snapshots__/index.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (6)
docs/examples/basic.less(1 hunks)src/Mask.tsx(5 hunks)src/Tour.tsx(4 hunks)src/TourStep/DefaultPanel.tsx(3 hunks)src/interface.ts(2 hunks)tests/index.test.tsx(3 hunks)
✅ Files skipped from review due to trivial changes (1)
- docs/examples/basic.less
🔇 Additional comments (23)
src/interface.ts (3)
7-15: 新增加的SemanticName联合类型提升了语义化和可扩展性
此类型能够更好地对应不同组件区域的语义，有助于后续的样式和类名管理。
46-47: 在TourStepProps中引入classNames和styles属性非常灵活
允许基于语义化名称进行局部样式和类名注入，为开发者提供更多自定义空间。
51-52: 在TourProps中添加统一的classNames和styles便于全局配置
通过与TourStepProps一致的属性结构，进一步增强了整体样式与类名管理的统一性。src/TourStep/DefaultPanel.tsx (11)
6-7: 在DefaultPanelProps中排除原始closable类型并重定义更为合理
这样可以更好地控制closable的具体结构，避免类型冲突。
23-24: 新增classNames（tourClassNames）属性，提升样式自定义能力
在不同语义区域可统一设置对应的自定义类名，利于统一化管理。
27-29: 动态渲染closeIcon，确保在无自定义图标时可回退至默认渲染
可读性高，逻辑简单明了，保持了灵活性与良好默认值。
33-40: 在容器外层添加可定制的类名与行内样式
通过classNames?.content和styles?.content，能以更细粒度来控制内容区域外观。
41-44: 对 body 区域提供单独的类名与样式扩展
满足复杂场景下的 UI 定制需求，值得肯定。
56-59: Header 区域同样支持自定义类名与样式
让标题区域与其它区域保持一致的可定制方案，利于维护与扩展。
60-65: Title 子元素可通过classNames?.title和styles?.title进行精确控制
提升了标题部分的灵活度，让组件适配不同主题更简单。
67-75: Description 区应保持与标题区一致的可定制性
此实现让描述区能很方便地应用独立的样式或类名。
76-79: Footer 的可定制能力在交互引导场景下相当实用
可灵活定制底部布局，为引导或操作面板增添样式。
83-89: 通过循环渲染 Slider 状态指示符，示例实现简洁易懂
此处逻辑无问题，且能够配合外部样式实现更复杂的展示效果。
92-98: Actions 区域显式支持自定义类名与样式，操作按钮风格可灵活变化
在多步引导中，不同操作场景的样式往往有差异，这里设计很实用。src/Mask.tsx (4)
6-6: 引用SemanticName类型，保证与其他组件的类型统一
实现可维护的语义化扩展，避免重复定义。
25-26: 在MaskProps中新增语义化的classNames和styles
能够更轻松地设置蒙层区域的自定义样式或类名。
40-42: 拆分传入的classNames并重命名为tourClassNames，保持上下文清晰
此更名无破坏性，但可读性更好，也方便在组件内区分全局与局部。
Line range hint
56-66: 利用tourClassNames?.mask和styles?.mask对蒙层进行灵活定制
实现了动态类名合并和行内样式拓展，适用于多主题或多风格场景。src/Tour.tsx (4)
54-55: 在Tour组件添加styles和classNames，提高全局定制能力
这样一来可以统一控制蒙层、内容以及面板的样式和类名。
71-71: 对mergedOpen进行后置状态处理，合理处理步骤越界场景
若当前步骤无效，自动设置为关闭态，避免组件渲染异常。
162-163: 将styles与classNames显式传递进TourStep
管理统一化，有助于保持各步骤 UI 风格一致并可动态调整。
199-200: 在渲染Mask时同样注入styles和classNames
结合上层prefixCls、zIndex等参数，让蒙层与内容层保持统一风格管理。tests/index.test.tsx (1)
Line range hint
1121-1203: Comprehensive test coverage for custom styles and class names
该测试用例充分验证了自定义样式与 className 在各个元素上的覆盖效果，覆盖范围完整且断言详实，能有效避免回归错误。若有额外的复合场景（例如冲突样式、动态切换 className 等），可考虑补充相关单测，以进一步提高健壮性。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/interface.ts (2)
46-47: 建议添加属性文档注释为了提高代码可维护性，建议为新增的
classNames和styles属性添加 JSDoc 文档注释，说明每个语义部分的用途。+ /** 用于定制各个语义部分的类名 */ classNames?: Partial<Record<SemanticName, string>>; + /** 用于定制各个语义部分的样式 */ styles?: Partial<Record<SemanticName, React.CSSProperties>>;
51-54: 建议复用类型定义建议将重复的样式类型定义提取为共享接口，以减少代码重复并确保类型一致性。
+interface StyleProps { + classNames?: Partial<Record<SemanticName, string>>; + styles?: Partial<Record<SemanticName, React.CSSProperties>>; +} -export interface TourStepProps extends TourStepInfo { +export interface TourStepProps extends TourStepInfo, StyleProps { // ... other properties - classNames?: Partial<Record<SemanticName, string>>; - styles?: Partial<Record<SemanticName, React.CSSProperties>>; } -export interface TourProps extends Pick<TriggerProps, 'onPopupAlign'> { +export interface TourProps extends Pick<TriggerProps, 'onPopupAlign'>, StyleProps { // ... other properties - classNames?: Partial<Record<SemanticName, string>>; - styles?: Partial<Record<SemanticName, React.CSSProperties>>; className?: string; style?: React.CSSProperties;src/Tour.tsx (2)
54-57: 建议调整属性顺序建议将样式相关的属性（
styles、classNames、className、style）分组放置，以提高代码可读性。const { prefixCls = 'rc-tour', + className, + style, + classNames: tourClassNames, + styles, steps = [], // ... other props - styles, - classNames: tourClassNames, - className, - style, ...restProps } = props;
73-73: 建议添加状态逻辑说明为了提高代码可维护性，建议添加注释说明
origin ?? true的逻辑用途。- : (origin ?? true), + // 当 origin 未定义时默认为打开状态 + : (origin ?? true),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/Tour.tsx(5 hunks)src/interface.ts(2 hunks)
🔇 Additional comments (3)
src/interface.ts (1)
7-15: 语义化命名类型定义完善！
SemanticName类型定义涵盖了所有主要的 UI 组件部分，命名语义化清晰，便于样式定制。src/Tour.tsx (2)
164-165: 样式属性传递正确！
styles和classNames属性正确传递给TourStep组件。
201-202: 样式处理实现完善！
- Mask 组件正确接收样式属性
- Portal div 中的样式合并逻辑正确，保持了原有样式的同时支持自定义样式
Also applies to: 233-241
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/TourStep/DefaultPanel.tsx (1)
Line range hint
33-98: 样式实现完善！代码变更要点：
- 使用 classNames 工具函数正确处理条件类名
- 统一为各个元素添加了样式自定义支持
- JSX 结构清晰，可读性好
建议：考虑抽取常用的样式类名前缀（如
${prefixCls}-section）到常量中以提高可维护性。tests/index.test.tsx (1)
Line range hint
1121-1203: 自定义样式测试覆盖全面！测试用例很好地覆盖了：
- 自定义类名的应用
- 内联样式的设置
- 所有可自定义的元素
建议：考虑添加以下场景的测试：
- 动态切换样式
- 样式覆盖优先级
- 无效样式属性的处理
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
tests/__snapshots__/index.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (3)
src/TourStep/DefaultPanel.tsx(3 hunks)src/interface.ts(2 hunks)tests/index.test.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/interface.ts
🔇 Additional comments (3)
src/TourStep/DefaultPanel.tsx (2)
6-7: 类型定义更新正确！类型定义的更改符合预期，新增的
classNames和styles属性有助于提高组件的样式自定义能力。
23-24: 属性解构合理！解构新增的
classNames和styles属性，并将classNames重命名为tourClassNames以避免命名冲突，处理得当。tests/index.test.tsx (1)
Line range hint
1091-1120: 间隙半径测试用例完善！测试用例很好地验证了当 gap.radius 为 0 时，rx 属性应该为 0 而不是默认值 2。这个边界情况的测试对于保证组件的正确性很重要。
src/TourStep/DefaultPanel.tsx
Outdated
| style={styles?.section} | ||
| > | ||
| <div | ||
| className={classNames(`${prefixCls}-body`, tourClassNames?.body)} |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
tests/index.test.tsx (1)
Line range hint
1121-1198: 测试用例实现完整，建议增加边界场景测试！当前测试很好地覆盖了自定义样式和类名的基本功能：
- ✓ 验证了所有主要组件的样式和类名
- ✓ 测试结构清晰，包含数据准备、渲染和断言
建议增加以下测试场景：
- 样式覆盖的情况（当组件和步骤都定义样式时）
- 动态更新样式的场景
- 无效样式值的处理
建议添加如下测试用例：
it('should handle style overrides', () => { const globalStyles = { mask: { color: 'white' } }; const stepStyles = { mask: { color: 'black' } }; render( <Tour styles={globalStyles} steps={[{ styles: stepStyles, title: '测试', description: '测试描述' }]} /> ); // 验证步骤样式覆盖全局样式 expect(document.querySelector('.rc-tour-mask')).toHaveStyle({ color: 'black' }); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
tests/__snapshots__/index.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (4)
docs/examples/basic.less(1 hunks)src/TourStep/DefaultPanel.tsx(3 hunks)src/interface.ts(2 hunks)tests/index.test.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- docs/examples/basic.less
- src/TourStep/DefaultPanel.tsx
- src/interface.ts
🔇 Additional comments (1)
tests/index.test.tsx (1)
Line range hint
1091-1120: 测试用例实现正确！该测试用例很好地验证了当
gap.radius设置为 0 时，rx属性确实渲染为 0 而不是默认值 2。测试结构清晰，断言准确。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #70 +/- ##
=======================================
Coverage 99.47% 99.47%
=======================================
Files 9 9
Lines 189 190 +1
Branches 85 87 +2
=======================================
+ Hits 188 189 +1
Misses 1 1 ☔ View full report in Codecov by Sentry. |
Summary by CodeRabbit
新功能
样式调整
测试更新