refactor(fixednav): support harmony #3095
Conversation
Walkthrough此次提交主要针对 FixedNav 组件及其相关示例、测试、样式文件和组件文件进行了多处更新。配置文件中将 Changes
Sequence Diagram(s)sequenceDiagram
participant Demo as FixedNavDemo
participant Harmony as harmony()
participant Comp as Demo5 Component
Demo->>Harmony: 调用 harmony()
alt harmony 返回 true
Harmony-->>Demo: 返回 true
Demo->>Demo: 不渲染 Demo5（返回 null）
else harmony 返回 false
Harmony-->>Demo: 返回 false
Demo->>Comp: 渲染 Demo5 组件
end
Possibly related PRs
Suggested reviewers
Poem
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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 (
|
github-actions
bot
added
3.x
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3095 +/- ##
==========================================
Coverage 86.48% 86.48%
==========================================
Files 280 280
Lines 18489 18489
Branches 2774 2774
==========================================
Hits 15991 15991
Misses 2493 2493
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![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)
src/packages/fixednav/demos/taro/demo2.tsx (1)
40-49: 使用 pxTransform 函数替代硬编码像素值并简化 JSX 结构将硬编码的像素值 '140px' 替换为
pxTransform(140)函数调用有助于组件在不同设备上的适配。此外，移除了不必要的 Fragment 包装，使代码结构更加简洁明了。建议：为了提高代码的可读性和一致性，可以考虑将类似的 pxTransform 转换应用到其他硬编码的像素值，如 Badge 组件的 top 和 right 属性等。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
src/config.json(1 hunks)src/packages/fixednav/__tests__/fixednav.spec.tsx(1 hunks)src/packages/fixednav/demo.taro.tsx(2 hunks)src/packages/fixednav/demos/h5/demo5.tsx(2 hunks)src/packages/fixednav/demos/taro/demo1.tsx(2 hunks)src/packages/fixednav/demos/taro/demo2.tsx(2 hunks)src/packages/fixednav/demos/taro/demo3.tsx(2 hunks)src/packages/fixednav/demos/taro/demo4.tsx(2 hunks)src/packages/fixednav/fixednav.scss(3 hunks)src/packages/fixednav/fixednav.taro.tsx(3 hunks)src/packages/fixednav/fixednav.tsx(2 hunks)
🧰 Additional context used
🧬 Code Definitions (3)
src/packages/fixednav/demos/taro/demo3.tsx (6)
src/packages/fixednav/fixednav.taro.tsx (1) (1)
FixedNav(27:128)src/packages/fixednav/fixednav.tsx (1) (1)
FixedNav(26:129)src/packages/fixednav/fixednav.taro.tsx (1) (1)
FixedNav(27:128)src/packages/fixednav/fixednav.tsx (1) (1)
FixedNav(26:129)src/packages/fixednav/fixednav.taro.tsx (1) (1)
FixedNav(27:128)src/packages/fixednav/fixednav.tsx (1) (1)
FixedNav(26:129)
src/packages/fixednav/demos/taro/demo2.tsx (2)
src/packages/fixednav/fixednav.taro.tsx (1) (1)
FixedNav(27:128)src/packages/fixednav/fixednav.tsx (1) (1)
FixedNav(26:129)
src/packages/fixednav/demos/taro/demo1.tsx (4)
src/packages/fixednav/fixednav.taro.tsx (1) (1)
FixedNav(27:128)src/packages/fixednav/fixednav.tsx (1) (1)
FixedNav(26:129)src/packages/fixednav/fixednav.taro.tsx (1) (1)
FixedNav(27:128)src/packages/fixednav/fixednav.tsx (1) (1)
FixedNav(26:129)
🔇 Additional comments (29)
src/config.json (1)
333-333: 配置更新符合组件系统化要求将 FixedNav 组件的 "dd" 属性从 false 更改为 true，这样可以确保组件遵循设计系统的一致性规范。这种变更对于保持组件库的整体一致性至关重要。
src/packages/fixednav/demos/h5/demo5.tsx (3)
2-2: 适当引入 useRtl 增强国际化支持从 @nutui/nutui-react 中导入 useRtl 钩子，为组件增加了从右到左（RTL）文本方向的支持，提升了组件的国际化能力。
5-5: 良好使用 useRtl 钩子通过调用 useRtl() 钩子获取当前文本方向，为后续样式条件渲染提供了基础。
41-47: 优雅处理 RTL 布局适配根据 rtl 值动态设置组件位置，如果是 RTL 模式则靠左显示，否则靠右显示，确保了在不同文本方向下的正确展示。这种条件渲染方式简洁高效。
src/packages/fixednav/demos/taro/demo1.tsx (2)
3-3: 引入像素转换工具提高适配性添加 pxTransform 工具函数的导入，为后续适配不同设备像素密度做准备。
40-48: 使用 pxTransform 优化位置适配将固定的像素值 '70px' 替换为 pxTransform(70)，使组件在不同设备像素密度下保持一致的视觉效果，增强了组件的跨设备适配能力。
src/packages/fixednav/demo.taro.tsx (2)
4-4: 引入平台检测工具增强兼容性从 @/utils/platform-taro 导入 harmony 函数，用于检测当前运行环境是否为鸿蒙系统，为后续的条件渲染提供支持。
21-22: 适当处理鸿蒙系统兼容性基于 harmony() 的检测结果进行条件渲染，在鸿蒙系统环境下不显示 Demo5 组件，有效避免了不支持的功能在特定环境中导致的问题。注释清晰地说明了原因：鸿蒙系统暂不支持拖拽功能。
src/packages/fixednav/fixednav.taro.tsx (3)
4-4: 导入 Taro 组件库中的 Image 组件以支持跨平台图片渲染引入
@tarojs/components中的Image组件是合理的改进，这将使组件在 Taro 环境中能够正确渲染图片元素，提高了组件在小程序平台的兼容性。
58-58: 优化了类名生成逻辑，增强了可维护性将类名从直接使用
type更改为使用模板字符串${classPrefix}-${type}是一个很好的改进。这种方式生成的类名更加规范和一致，有利于样式隔离和防止样式冲突。
72-72: 使用 Taro 专用 Image 组件替换 HTML img 标签将 HTML
img标签替换为 Taro 专用的Image组件是必要的更改，这确保了组件在小程序环境中能够正常工作，同时保持了与 React 版本相同的功能。src/packages/fixednav/__tests__/fixednav.spec.tsx (2)
33-35: 更新测试用例以匹配新的类名命名规则测试断言已正确更新，从检查
right类改为检查完整的类名nut-fixednav-right，这与组件代码中类名生成逻辑的变更保持一致。
40-42: 更新左侧导航测试断言以匹配新的类名命名规则测试断言已正确更新，从检查
left类改为检查完整的类名nut-fixednav-left，确保测试用例与更新后的组件行为一致。src/packages/fixednav/demos/taro/demo3.tsx (2)
3-3: 引入 pxTransform 工具函数优化像素单位转换添加
pxTransform工具函数的导入是一个很好的做法，它能帮助在不同屏幕密度的设备上实现一致的视觉效果，提高了组件在多平台环境下的适配能力。
40-47: 使用 pxTransform 函数替代硬编码像素值并简化 JSX 结构将硬编码的像素值 '210px' 替换为
pxTransform(210)函数调用是一个很好的改进，这样可以确保在不同设备上显示的一致性。同时，移除了不必要的 Fragment 包装，使代码更加简洁。src/packages/fixednav/demos/taro/demo2.tsx (1)
3-3: 引入 pxTransform 工具函数优化像素单位转换添加
pxTransform工具函数的导入是一个很好的做法，它能帮助在不同屏幕密度的设备上实现一致的视觉效果，提高了组件在多平台环境下的适配能力。src/packages/fixednav/fixednav.tsx (2)
58-58: 改进了类名生成逻辑使用模板字符串
${classPrefix}-${type}替代直接使用type更为规范，保证了类名的命名空间隔离，增强了样式选择器的特异性，避免与其他组件样式冲突。
72-72: 为图片添加了专用类名为图片元素添加
${classPrefix}-list-image类名是一个良好的实践，便于统一管理图片样式，提高了组件的可维护性和样式的可预测性。src/packages/fixednav/demos/taro/demo4.tsx (4)
4-5: 导入Taro组件和工具函数引入 Taro 的
View和Text组件以及pxTransform工具函数，有助于提升组件在 Taro 环境下的兼容性和一致性。
21-21: 使用 pxTransform 替换硬编码像素值使用
pxTransform(280)代替硬编码的像素值 '280px' 是一个很好的改进，这样可以确保组件在不同设备和分辨率下有一致的显示效果。
29-29: 使用 Taro 的 Text 组件代替 span将 HTML 的
span元素替换为 Taro 的Text组件，符合 Taro 跨平台开发的最佳实践，提高了组件的平台兼容性。
33-41: 优化列表渲染结构使用 Taro 的
View组件和map方法动态渲染列表项，增加了key属性以提高列表渲染性能，符合 React 的最佳实践。src/packages/fixednav/fixednav.scss (7)
21-25: 优化活动状态下左侧导航的样式为活动状态下的左侧导航添加了特定的类名和图标旋转样式，使得左右布局的样式结构更加统一和可预测。
81-85: 添加了图片专用样式类新增
&-list-image类，统一设置了图片的尺寸和边距，使样式结构更加清晰，便于维护。
88-107: 规范化右侧导航样式创建了完整的
&-right样式类，明确设置了右侧定位、边框半径和内边距，确保了样式的一致性和可预测性。
109-110: 规范化左侧导航样式使用
&-left样式类并明确设置left: 0，与右侧导航结构对称，提高了代码的可读性和一致性。
117-117: 调整图标旋转角度明确设置图标的旋转角度为 180 度，确保在不同导航状态下图标的显示效果一致。
135-147: 完善RTL布局支持优化了右到左(RTL)布局下的导航样式，包括位置调整和图标旋转逻辑，提高了组件的国际化支持能力。
181-208: 完善RTL布局下的左侧导航样式在RTL环境下调整了左侧导航的位置、边框和内边距，确保了组件在不同文字方向下的正确显示。
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
New Features
Refactor
Style