feat(navbar): v15 #2881
feat(navbar): v15 #2881
Conversation
|
Caution Review failedThe pull request is closed. 概述演练这个拉取请求主要修改了 变更
可能相关的 PR
建议标签
建议审阅者
诗歌
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (9)
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: 2
🧹 Nitpick comments (9)
src/packages/navbar/demos/h5/demo2.tsx (2)
51-53: 标题与副标题布局
使用了两行文字并通过 style 控制。请注意单词拼写 "aliginItems" -> "alignItems"（见上方 styles.flexCenter）以提升可维护性。- aliginItems: 'center', + alignItems: 'center',
66-66: 可点击标题
在 NavBar 的标题区添加点击事件，符合交互预期，建议在更大范围使用可点击组件（如 Button、Link）以便后期扩展。src/packages/navbar/demos/h5/demo3.tsx (1)
14-14: 右侧点击事件使用 span
此处使用 span 并简化内联样式，便于后续替换成更具语义的组件，如 Button。src/packages/navbar/demos/h5/demo1.tsx (2)
26-35: 整合 title 属性与右侧图标点击
使用 title 代替子元素展示标题，简化了 NavBar 结构，逻辑上更清晰。
54-54: left + back 属性并存
同时提供 left 和 back，会优先显示 back 的点击操作。建议在文档中说明该用法的优先级，以免产生歧义。src/packages/navbar/navbar.tsx (2)
108-108: 右侧区块样式切换
添加了 -right-maxwidth 判断，避免与中间内容冲突。节省布局配置的成本。
133-135: classes 合并与 title-wrapper
根据是否存在 title 来添加额外的 class，合理且有助于后续样式配置。src/packages/navbar/doc.md (1)
46-46: 建议补充 title 属性的使用说明建议在文档中补充以下内容：
- title 属性的具体使用场景
- 说明 title 的默认对齐方式
- 添加示例代码说明如何实现居中对齐的效果
src/packages/navbar/navbar.scss (1)
75-78: 建议优化左侧区域的间距处理当前实现中左侧区域的间距处理较为复杂：
- 使用固定的 max-width 可能在某些场景下不够灵活
- padding 和 gap 的组合使用可能导致样式维护困难
建议考虑以下优化：
.nut-navbar-left { - padding-right: 16px; - gap: 16px; + margin-right: 16px; + > * + * { + margin-left: 16px; + }Also applies to: 82-84, 98-100
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/packages/navbar/demos/h5/demo1.tsx(2 hunks)src/packages/navbar/demos/h5/demo2.tsx(2 hunks)src/packages/navbar/demos/h5/demo3.tsx(3 hunks)src/packages/navbar/doc.md(1 hunks)src/packages/navbar/navbar.scss(3 hunks)src/packages/navbar/navbar.tsx(6 hunks)
🔇 Additional comments (20)
src/packages/navbar/demos/h5/demo2.tsx (4)
3-3: 导入图标顺序更改无功能影响
此处仅调整了图标导入顺序，对代码逻辑没有实质影响，可保持现状。
32-35: 简化右侧图标使用，增强可读性
将 onClick 直接写在 Share 图标上使代码更简洁，Toast 逻辑也更直观，可直接保留此实现。
38-41: 同样的右侧逻辑简化
与上一段相同，使用 Share 图标并简化写法可读性更好，无需进一步修改。
60-60: 右侧“编辑”操作
此处通过点击事件触发 Toast，功能简单明了，逻辑无误。
src/packages/navbar/demos/h5/demo3.tsx (2)
2-3: 导入顺序小幅优化
将组件和图标一起导入，保持可读性良好，逻辑正常。
40-40: 再次使用右侧点击事件
与前面逻辑相似，代码风格统一，无明显问题。可继续沿用。
src/packages/navbar/demos/h5/demo1.tsx (5)
3-3: 统一图标导入顺序
该修改与其它示例一致，不影响代码逻辑，可以保持。
37-40: 多处 NavBar 属性简化
同样将 title 改为字符串，right 属性减少 DOM 嵌套，减少不必要的包裹。
42-49: 复杂标题示例
采用多行标题与副标题，且可点击触发 Toast，示例完整性良好，展示了可扩展性。
57-60: 右侧“编辑”配合 More 图标
依旧采用 span + 图标写法，保持交互一致性；若有更多功能可进一步将“编辑”抽离为组件。
65-65: 点击标题触发 Toast
进一步说明了可点击标题的灵活性，符合整体交互需求。
src/packages/navbar/navbar.tsx (7)
1-1: 新增 React 导入位置
文件头部导入 React 及相关工具正常，无需改动。
34-34: title 属性使用
在结构上直接使用 title，取代过去的 children 处理，对代码可读性和逻辑而言是提升。
73-84: renderLeft 中 back 的点击回调
调用 onBackClick(e)，功能独立且易维护。若后期需添加其他返回逻辑，可在此处扩展。
87-87: 渲染左侧元素结束
此处返回 DOM 结构简单明了，无须额外修改。
95-98: renderContent 改用 title 数据
与新属性一致，根据是否有 title 决定如何显示，避免原先宽度计算等复杂操作。
119-119: 主要渲染容器
统一渲染 NavBar 的三部分：左、中、右，可确保结构一致性。
64-69: renderLeft 函数
对 left、back 同时存在的情况进行了逻辑判断，并使用了 classNames 实现条件性样式。整体合理，但需注意与文档中示例保持一致。
✅ Verification successful
Let me gather more information about the navbar component and its documentation to verify the consistency.
Let me search for more specific information about the navbar component implementation and documentation.
Let me try a different search pattern to find the navbar implementation and documentation.
Let me check the navbar documentation to verify the implementation against the examples.
Let me check the demo examples to verify the implementation.
renderLeft 函数实现与文档示例一致
根据代码审查，renderLeft 函数的实现完全符合文档示例的要求：
- left 和 back 的同时存在的逻辑处理正确，通过 classNames 实现了条件性样式
- 示例代码中展示的各种组合用法（只有back、只有left、back和left共存等）都能正确渲染
- className 的命名规范统一，包括
left、left-maxwidth、left-hidden等类名的使用 - 与文档中的示例代码完全匹配，支持所有展示的使用场景
🏁 Scripts executed
The following scripts were executed for the analysis:
Error: No shell scripts found
Script:
#!/bin/bash
# Search for navbar documentation and examples
fd "navbar" --type f
# Search for renderLeft function implementation
ast-grep --pattern 'renderLeft() {
$$$
}'
# Search for related test files
fd "navbar.*test" --type f
# Look for usage examples
rg -A 5 "renderLeft|left.*back"
Length of output: 66923
Script:
#!/bin/bash
# Search for navbar component implementation
ast-grep --pattern 'renderLeft() {
$$$
}'
# Search for navbar test cases
rg -A 5 "renderLeft.*test" src/packages/navbar/__test__/
# Look for navbar documentation
fd "navbar.*md" --type f
Length of output: 131
Script:
#!/bin/bash
# Search for navbar component files
cat src/packages/navbar/navbar.tsx
# Search for navbar test files
cat src/packages/navbar/__test__/navbar.spec.tsx
# Look for documentation files
fd -e md . | xargs rg -l "navbar"
Length of output: 5791
Script:
#!/bin/bash
# Get navbar documentation content
cat src/packages/navbar/doc.md
# Get changelog entries related to navbar
rg -A 3 "navbar" CHANGELOG.md
Length of output: 3799
Script:
#!/bin/bash
# Get navbar demo content
cat src/packages/navbar/demos/h5/demo1.tsx
cat src/packages/navbar/demos/h5/demo2.tsx
cat src/packages/navbar/demos/h5/demo3.tsx
Length of output: 5437
src/packages/navbar/navbar.scss (2)
6-13: 布局结构优化合理
使用 space-between 和适当的内边距能更好地控制导航栏各元素的间距，提升了整体布局的灵活性。
105-108: 右侧布局实现合理
使用 justify-content: flex-end 和 gap 间距控制的方式合理，能确保右侧元素的对齐和间距表现一致。
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (18)
src/packages/navbar/demos/taro/demo3.tsx (4)
4-4: 导入新组件时注意保持导入顺序一致。
可以在团队内约定统一的 import 排列方式，便于代码可读性和一致性。
13-13: 建议确认返回图标的可点区域是否符合交互需求。
可以适当增加点击热区，提升用户点击体验。
23-35: Tabs 使用和样式设置。
- 将部分内联样式可提取为公共样式或 .scss ，避免样式分散。
- Tabs 组件使用了自定义属性 --nutui-tabs-titles-gap: 0，若后续需要扩展建议拆分为常量保持可维护性。
49-60: 多个 TabPane 组件使用情况。
- 若后续需动态添加或删除 TabPane，可将标题及内容抽离为配置对象以便维护。
- 注意避免过多硬编码字符串。
src/packages/navbar/demos/taro/demo2.tsx (4)
14-16: 字体大小与行高写死为 '18px' 和 '26px'。
如需适配多端或响应式布局，可考虑将其转为可配置变量或使用相对单位。
19-22: 副标题的字体大小与行高固定值。
保持与主标题一致的思路，即可能需统一成可配置常量，方便后期维护。
34-34: 右侧 Share 图标使用简洁。
代码清爽易读，可适当在后续引入权限或队列处理。
47-59: 自定义标题区。
- 用户点击标题可触发 Toast，交互合理。
- 建议合并冗余包装的 View，进一步简化层级。
src/packages/navbar/demos/taro/demo1.tsx (3)
14-16: 标题文字配置改为固定像素值。
如需适配更多屏幕，考虑转换为可扩展变量或对接设计规范。
19-22: 副标题文字与颜色固定写法。
若要实现暗黑模式或其他皮肤切换，需要改造成可配置。
44-54: title 为复合结构，嵌入多层 View。
若仅作简单文字展示，建议直接使用字符串；若需动态内容则保持此结构也可以。src/packages/navbar/navbar.tsx (2)
34-34: 将 title 从 props 中解构。
可以减少冗余避免多次读取 props.title。
64-87: renderLeft 函数逻辑：
- 当 left 与 back 同时为空时，隐藏左侧容器，较为合理。
- 建议优化样式命名，使含义更清晰，如
*-maxwidth可改为更常见表达。src/packages/navbar/navbar.taro.tsx (5)
65-88: 左侧区域渲染逻辑改进通过新增的条件类名
nut-navbar-left-maxwidth和nut-navbar-left-hidden，更好地处理了左侧区域的宽度和可见性控制。建议补充以下几点：
- 为空值判断添加显式的类型检查
- 考虑为点击事件添加防抖处理
建议的改进：
- {back ? ( + {back && ( <View className={classNames({ [`${classPrefix}-left-back`]: true, [`${classPrefix}-left-back-children`]: left, [`${classPrefix}-left-back-children-rtl`]: left && rtl, })} - onClick={(e) => onBackClick(e)} + onClick={debounce((e) => onBackClick(e), 300)} > {back} </View> - ) : null} + )}
91-101: 标题渲染逻辑简化新的实现通过
title-center类名来控制居中显示，逻辑清晰。但建议添加空值处理：- {title || children} + {title ?? children}
Line range hint
103-115: 右侧区域渲染逻辑优化使用
right-maxwidth类名控制宽度，实现方式合理。建议添加右侧内容的可访问性支持：<View className={classNames({ [`${classPrefix}-right`]: true, [`${classPrefix}-right-maxwidth`]: title, [`${classPrefix}-right-rtl`]: rtl, })} + role="complementary" + aria-label="导航栏右侧操作区" >
134-136: 类名处理逻辑优化通过
title-wrapper类名统一控制标题模式下的样式，实现清晰。建议考虑添加主题相关的类名支持：const cls = classNames(classPrefix, classes, className, { [`${classPrefix}-title-wrapper`]: title, + [`${classPrefix}-theme-${theme}`]: theme, })
Line range hint
1-150: 整体架构评估组件重构后的整体设计符合直觉，代码结构清晰。以下几点建议可以进一步提升组件的健壮性：
- 考虑添加 PropTypes 运行时类型检查
- 添加更完善的单元测试覆盖新的标题处理逻辑
- 补充组件文档，特别是新的 title 属性的使用示例
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/packages/navbar/demos/taro/demo1.tsx(1 hunks)src/packages/navbar/demos/taro/demo2.tsx(2 hunks)src/packages/navbar/demos/taro/demo3.tsx(1 hunks)src/packages/navbar/navbar.taro.tsx(6 hunks)src/packages/navbar/navbar.tsx(6 hunks)
🔇 Additional comments (25)
src/packages/navbar/demos/taro/demo3.tsx (4)
3-3: 改动可接受：优化导入组件写法。
此处只是对组件引用顺序的微调，无明显问题。
16-17: 右侧按钮合并写法简洁明了。
编程风格一致，逻辑简单易读，无明显问题。
39-39: 再次使用返回图标，交互一致性良好。
保持统一的返回逻辑可减少用户困惑。
42-43: 右侧图标组合逻辑简单。
触发 Taro.showToast 行为清晰，无安全风险。
src/packages/navbar/demos/taro/demo2.tsx (6)
3-5: 图标与 NavBar 导入顺序无明显问题。
保持一致性即可，建议团队内有统一规范。
37-37: 标题由组件内容改为纯文本。
显示一致性更好，易于国际化或后续多语言扩展。
40-43: 另一组 NavBar 配置，逻辑与前者相同。
复用性高，使用同一写法可减少认知负担。
64-68: 再次使用拉左图标与自定义右侧“编辑”图标。
方便扩展与复用，与之前 NavBar 保持一致。
73-74: 标题点击行为。
符合需求，无安全风险。若需跳转或更复杂交互可封装函数。
30-31: 在返回图标后紧跟“返回”文字。
若要点击图标与文字分别触发不同事件，应分开处理；否则逻辑良好。
✅ Verification successful
Let me verify the context by checking the implementation details of the component.
Let me check the NavBar component's implementation to understand how the back prop and onBackClick are handled.
返回区域（图标和文字）已被正确实现为一个整体点击区域。
从代码分析可以看出：
- NavBar 组件的
back属性和onBackClick事件处理器是配套使用的 - 当前实现中，整个返回区域（包含图标和文字）共用同一个点击事件处理器
- 这种实现符合常见的移动端导航栏交互模式，返回按钮作为一个整体操作更符合用户体验
🏁 Scripts executed
The following scripts were executed for the analysis:
Error: No shell scripts found
Script:
#!/bin/bash
# Check the implementation of ArrowLeft component and its usage
ast-grep --pattern 'const ArrowLeft'
# Search for click handlers or event handlers near ArrowLeft usage
rg -B 2 -A 2 "ArrowLeft" src/packages/navbar/demos/taro/demo2.tsx
# Check if there are any onClick or similar event handlers
rg "onClick" src/packages/navbar/demos/taro/demo2.tsx
Length of output: 2030
Script:
#!/bin/bash
# Check NavBar component implementation
ast-grep --pattern 'interface NavBarProps'
# Search for back prop handling in NavBar
rg -B 2 -A 5 "back.*props" src/packages/navbar
# Look for onBackClick implementation
rg -B 2 -A 5 "onBackClick" src/packages/navbar
Length of output: 16207
src/packages/navbar/demos/taro/demo1.tsx (7)
3-5: 导入 NavBar 和图标组件顺序合规。
可与团队规范保持一致。
28-37: 使用 title prop + back + right 属性综合配置方式简洁。
整体结构清晰易懂，配合 onBackClick 逻辑可快速体验返回操作。
39-42: 另一组 NavBar，继续沿用相同配置模式。
代码风格统一，增强一致性。
63-68: 更多可点击标题示例。
与之前用法相同，充分演示多种组合方式，暂未发现明显问题。
71-72: “编辑”与“More” 图标组合与前文类似。
行为简单直接，保持一致即可。
76-76: NavBar 组件闭合标签。
写法规范放心。
56-61: 使用 left + back 双配置时需注意冲突。
如同时赋值两者，应注意是否引起布局相互覆盖。
src/packages/navbar/navbar.tsx (7)
1-1: 导入顺序无明显问题。
与项目整体风格保持一致，逻辑清晰。
5-5: 按需导入 SafeArea 组件。
这可有效避免界面被状态栏或底部安全区域遮挡。
11-11: 移除 titleAlign 并新增 title 属性。
此变更在之前的评论中已给出类似建议。
95-98: renderContent 函数逻辑：
- 若有 title 则使用 title，否则 fallback 到 children。
- 保持了可扩展性与兼容性。
108-108: 右侧与 title 的布局及样式
与左侧逻辑保持一致，对齐方式统一。
119-119: 将 NavBar 内部结构封装到 renderWrapper
结构清晰可分离逻辑，增强可维护性。
133-135: 固定定位与 safeAreaInsetTop 配合占位 Mock。
- 若 fixed 为 false，placeholder 无效，也符合预期。
- 在部分机型上需测试以确保渲染正确。
src/packages/navbar/navbar.taro.tsx (1)
8-12: 接口变更优化了标题处理逻辑
移除了 titleAlign 属性并新增 title 属性，这种改变简化了 API 设计，使组件的使用更加直观。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #2881 +/- ##
==========================================
Coverage 85.84% 85.84%
==========================================
Files 271 271
Lines 18427 18379 -48
Branches 2726 2714 -12
==========================================
- Hits 15818 15777 -41
+ Misses 2604 2597 -7
Partials 5 5 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/config.json (1)
Line range hint
1-1075: 建议更新组件文档由于多个组件升级到 v15 版本，建议：
- 在组件文档中添加版本变更说明
- 更新 CHANGELOG
- 确保新版本的使用示例已更新
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/packages/navbar/__test__/__snapshots__/navbar.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (3)
src/config.json(1 hunks)src/packages/navbar/demos/taro/demo1.tsx(2 hunks)src/packages/navbar/demos/taro/demo2.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/packages/navbar/demos/taro/demo2.tsx
- src/packages/navbar/demos/taro/demo1.tsx
🔇 Additional comments (2)
src/config.json (2)
334-334: 版本标记添加正确
NavBar 组件添加 v15 标记与 PR 目标保持一致，表明该组件已进行了标题类型导航栏的优化。
334-334: 建议验证其他组件的 v15 升级需求
除了 NavBar 之外，以下组件也被标记为 v15：
- Rate
- SearchBar
- Switch
- Empty
- ResultPage
- CountDown
- Pagination
- Segmented
- Toast
请确认这些组件是否也需要在此版本中进行相应的更新。
Also applies to: 673-673, 789-789, 834-834, 893-893, 921-921, 977-977, 1007-1007, 1019-1019, 1075-1075
# Conflicts: # src/packages/navbar/demos/taro/demo3.tsx
|
1、背景色 增加一下 样式变量 |
主要优化了标题类型导航条的实现逻辑。通过 title 属性设置居中的标题，children 默认居左展示。
Summary by CodeRabbit
新功能
bug修复
文档
样式
版本更新
v15，以便更好地跟踪组件版本。