feat(hoverbutton): v14 #2810
feat(hoverbutton): v14 #2810
Conversation
Walkthrough本次变更主要集中在 Changes
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #2810 +/- ##
=============================================
+ Coverage 83.98% 84.02% +0.04%
=============================================
Files 220 222 +2
Lines 17882 17927 +45
Branches 2676 2682 +6
=============================================
+ Hits 15019 15064 +45
Misses 2858 2858
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: 3
🧹 Outside diff range and nitpick comments (8)
src/packages/hoverbutton/__test__/hoverbutton.spec.tsx (1)
Line range hint
8-13: 修复测试断言语法错误
expect(handleClick).toBeCalled断言缺少括号，这会导致测试无法正确验证点击事件。请修改为：
- expect(handleClick).toBeCalled + expect(handleClick).toBeCalled()src/packages/hoverbutton/doc.md (2)
23-30: 新增的"按钮和文字"部分文档结构清晰文档结构合理，示例代码引用正确。建议补充以下内容：
- 为该功能添加简短说明文字
- 在示例代码之前添加效果说明
55-62: 新增的"自定义间距"部分需要补充说明建议添加以下内容：
- 说明自定义间距的使用场景
- 补充间距的取值范围建议
src/packages/hoverbutton/doc.zh-TW.md (1)
55-62: 自訂間距部分的翻譯準確建議與簡體中文版本同步：
- 補充使用場景說明
- 添加間距取值範圍建議
src/packages/hoverbutton/demos/h5/demo6.tsx (2)
12-49: 建议将内联样式迁移到 CSS 文件中当前实现中大量使用内联样式会导致代码难以维护和复用。建议：
- 将样式抽取到单独的 CSS/SCSS 文件
- 使用 CSS 类名替代内联样式
- 考虑使用 CSS Modules 避免样式冲突
示例重构：
+ // styles.scss + .container { + display: flex; + flex-direction: column; + align-items: center; + } + + .number { + font-size: 12px; + font-weight: 700; + line-height: 1; + margin-top: 5px; + font-family: var(--nutui-font-family); + }
29-29: 建议使用国际化支持当前的数字和文本都是硬编码的，建议：
- 使用 i18n 系统管理文本
- 将数值改为可配置的属性
- 3 + {t('demo.number')} - 238 + {props.value} - 购物 + {t('demo.shopping')}Also applies to: 47-47, 60-60
src/packages/hoverbutton/demos/taro/demo6.tsx (1)
15-15: 建议优化类名使用多处重复使用
nut-hoverbutton-item-container类名，建议：
- 创建一个统一的样式类
- 使用 CSS Modules 管理样式
+ // styles.module.scss + .itemContainer { + composes: nut-hoverbutton-item-container; + display: flex; + flex-direction: column; + align-items: center; + }Also applies to: 55-55
src/packages/hoverbutton/doc.en-US.md (1)
23-30: 建议完善文档结构新增的 "Icon And Text" 部分需要：
- 补充更详细的使用说明
- 添加示例代码的具体说明
- 说明自定义内容的注意事项
建议在示例前添加说明文本：
### Icon And Text HoverButton 组件支持自定义内容，可以通过子元素方式添加图标和文本。在使用自定义内容时，需要注意： - 建议保持内容简洁，避免内容过多影响视觉效果 - 确保文本大小适中，保持清晰可读 - 图标尺寸建议保持一致，提供统一的视觉体验 :::demo
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (12)
src/packages/hoverbutton/__test__/hoverbutton.spec.tsx(1 hunks)src/packages/hoverbutton/demo.taro.tsx(6 hunks)src/packages/hoverbutton/demo.tsx(4 hunks)src/packages/hoverbutton/demos/h5/demo6.tsx(1 hunks)src/packages/hoverbutton/demos/taro/demo6.tsx(1 hunks)src/packages/hoverbutton/doc.en-US.md(2 hunks)src/packages/hoverbutton/doc.md(3 hunks)src/packages/hoverbutton/doc.taro.md(2 hunks)src/packages/hoverbutton/doc.zh-TW.md(3 hunks)src/packages/hoverbutton/hoverbutton.taro.tsx(1 hunks)src/packages/hoverbutton/hoverbutton.tsx(1 hunks)src/styles/variables.scss(1 hunks)
🔇 Additional comments (14)
src/packages/hoverbutton/__test__/hoverbutton.spec.tsx (1)
37-37: 样式更新已正确反映在测试中
测试用例已正确更新以匹配组件中的底部间距变化。
src/packages/hoverbutton/hoverbutton.tsx (1)
37-39: 建议验证底部间距增加的影响
底部间距从 16px 增加到 60px 是一个显著的变化，这可能会影响：
- 移动端的整体布局
- 与底部导航栏的视觉协调性
- 用户的触摸操作体验
运行以下脚本来检查是否有其他组件依赖这个间距：
✅ Verification successful
底部间距调整的影响范围已确认
根据代码分析，此更改是安全的，原因如下：
- 该间距变更仅影响 HoverButton 组件本身
- 组件提供了
tabbarHeight属性用于自定义底部间距 - 在示例代码中已验证新的间距设置（如 demo3.tsx 中使用
tabbarHeight={48}） - 没有其他组件直接依赖这个间距值
建议：
- 在组件文档中说明此间距调整
- 提醒使用者可通过
tabbarHeight属性自定义调整
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索可能受影响的样式引用
rg "bottom.*(?:16|60)px" --type css
rg "tabbarHeight.*(?:16|60)" --type tsx
Length of output: 219
Script:
#!/bin/bash
# 搜索所有涉及 bottom 和 tabbarHeight 的相关代码
rg "bottom.*(?:16|60)px" --type-add 'tsx:*.tsx' --type tsx
rg "tabbarHeight.*(?:16|60)" --type-add 'tsx:*.tsx' --type tsx
# 查找所有使用 HoverButton 组件的地方
rg "<HoverButton" --type-add 'tsx:*.tsx' --type tsx -A 2
# 查找 tabbarHeight 的定义和使用
ast-grep --pattern 'const tabbarHeight'
Length of output: 6594
src/packages/hoverbutton/doc.taro.md (2)
23-30: 文档结构清晰，示例补充合理
新增的"按钮和文字"部分有助于用户理解组件的更多使用场景。
90-90: CSS 变量文档格式正确
样式变量文档格式规范，便于用户进行主题定制。
src/packages/hoverbutton/doc.md (1)
98-98: 新增的图标激活态颜色变量定义合理
--nutui-hoverbutton-item-icon-color-active 变量的默认值 #595959 与设计规范保持一致。
src/packages/hoverbutton/doc.zh-TW.md (2)
23-30: 繁體中文文檔與簡體中文版本保持一致
新增的"按鈕和文字"部分翻譯準確，結構完整。建議：
- 與簡體中文版本同步補充說明文字
- 確保示例代碼的效果說明同步更新
98-98: 圖標點擊態顏色變數的翻譯準確
--nutui-hoverbutton-item-icon-color-active 變數說明翻譯準確，與設計規範一致。
src/packages/hoverbutton/hoverbutton.taro.tsx (1)
40-40: 底部间距调整需要验证兼容性
将 tabbarHeight 的偏移量从 16 增加到 60 是一个较大的改动：
- 这可能会影响现有页面的布局
- 需要确保在不同机型上的显示效果
建议：
- 添加注释说明调整原因
- 验证在不同设备上的适配效果
考虑将偏移量设置为可配置项，方便业务方根据实际场景调整。
src/packages/hoverbutton/demo.tsx (2)
9-9: 多语言翻译键值设置合理
新增的 customNode 翻译键已正确添加到所有支持的语言中。
Also applies to: 16-16, 25-25, 34-34
55-62: 新增的 customNode demo 结构合理
新增的 demo 部分遵循了现有的代码结构和样式规范。
src/packages/hoverbutton/demo.taro.tsx (2)
11-11: Taro 平台 Demo6 导入路径正确
从 './demos/taro/demo6' 导入确保了在 Taro 环境下的正确运行。
64-70: Taro 端 customNode demo 实现完整
新增的 demo 部分与 H5 版本保持一致，确保了跨平台的统一体验。
src/styles/variables.scss (2)
1001-1004: 悬浮按钮位置调整合理
将底部位置从 48px 调整为 60px，提供了更好的视觉间距。
1012-1028: 样式变量优化合理
- 边框颜色使用 rgba 值提升了视觉效果
- 背景色和激活态配色符合设计规范
- 图标颜色统一使用
$color-title
鸿蒙下字体没有生效。
|
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (6)
src/packages/hoverbuttonitem/hoverbuttonitem.scss (2)
22-26: 布局结构合理，建议优化命名
icontext类名可以更具描述性，建议改为content-wrapper或vertical-layout，以更好地表达其布局功能。
48-51: 建议统一间距单位目前使用了像素（px）作为单位，建议：
- 考虑使用相对单位（如 rem）以提高适配性
- 将关键尺寸提取为 CSS 变量，方便统一管理和主题定制
&-text-icon { - width: 14px; - height: 5px; + width: var(--nutui-hoverbutton-text-icon-width, 0.875rem); + height: var(--nutui-hoverbutton-text-icon-height, 0.3125rem); } &-text { - font-size: 10px; - margin-top: 5px; - line-height: 9px; + font-size: var(--nutui-hoverbutton-text-size, 0.625rem); + margin-top: var(--nutui-hoverbutton-text-margin, 0.3125rem); + line-height: var(--nutui-hoverbutton-text-line-height, 0.5625rem); }Also applies to: 53-57
src/packages/hoverbutton/doc.zh-TW.md (1)
47-62: 文档结构完善，建议补充示例说明新增的"自訂間距"和"自定義內容"部分结构清晰，但建议：
- 为每个示例添加简短说明，解释用例的具体场景
- 补充示例代码的预期效果说明
src/packages/hoverbuttonitem/hoverbuttonitem.tsx (1)
32-68: 建议优化渲染逻辑结构
renderBody函数的条件渲染逻辑可以更简洁。建议：
- 使用 early return 模式
- 提取重复的 icon 渲染逻辑到独立函数
const renderIcon = (size: number) => ( React.isValidElement(icon) ? React.cloneElement(icon, { size: typeof icon === 'object' && 'size' in icon ? size : undefined, }) : icon ) const renderBody = () => { if (!icon) return null if (!children) { return ( <div className={`${classPrefix}-icon`}> {renderIcon(20)} </div> ) } return ( <> <div className={`${classPrefix}-text-icon`} /> {renderIcon(14)} <div className={`${classPrefix}-text`}> {children} </div> </> ) }src/packages/hoverbutton/demo.tsx (1)
91-99: 建议调整 demo 展示顺序当前 customNode demo 部分被放置在最后，与其他 demo 的组织结构不一致。建议将其移动到 basic demo 之后，保持文档结构的一致性。
</div> - - <h2>{translated.customNode}</h2> - <Cell - title={`${translated.show}${translated.customNode}`} - onClick={() => { - setCurDemo('customNode') - }} - /> - {curDemo === 'customNode' && <Demo6 />} + <div className="demo"> + <h2>{translated.customNode}</h2> + <Cell + title={`${translated.show}${translated.customNode}`} + onClick={() => { + setCurDemo('customNode') + }} + /> + {curDemo === 'customNode' && <Demo6 />} + </div> </>src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx (1)
93-93: 建议优化类名判断逻辑当前的类名判断逻辑可以更简洁。建议使用对象解构来提高代码可读性。
- [`${classPrefix}-container-icontext`]: icon && children, + [`${classPrefix}-container-icontext`]: Boolean(icon && children),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (15)
src/packages/hoverbutton/demo.taro.tsx(5 hunks)src/packages/hoverbutton/demo.tsx(4 hunks)src/packages/hoverbutton/demos/h5/demo2.tsx(1 hunks)src/packages/hoverbutton/demos/h5/demo6.tsx(1 hunks)src/packages/hoverbutton/demos/taro/demo2.tsx(1 hunks)src/packages/hoverbutton/demos/taro/demo6.tsx(1 hunks)src/packages/hoverbutton/doc.en-US.md(2 hunks)src/packages/hoverbutton/doc.md(2 hunks)src/packages/hoverbutton/doc.taro.md(2 hunks)src/packages/hoverbutton/doc.zh-TW.md(2 hunks)src/packages/hoverbutton/hoverbutton.taro.tsx(1 hunks)src/packages/hoverbutton/hoverbutton.tsx(1 hunks)src/packages/hoverbuttonitem/hoverbuttonitem.scss(2 hunks)src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx(3 hunks)src/packages/hoverbuttonitem/hoverbuttonitem.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (8)
- src/packages/hoverbutton/hoverbutton.taro.tsx
- src/packages/hoverbutton/demos/h5/demo6.tsx
- src/packages/hoverbutton/doc.taro.md
- src/packages/hoverbutton/hoverbutton.tsx
- src/packages/hoverbutton/demos/taro/demo6.tsx
- src/packages/hoverbutton/demo.taro.tsx
- src/packages/hoverbutton/doc.en-US.md
- src/packages/hoverbutton/doc.md
🔇 Additional comments (3)
src/packages/hoverbutton/doc.zh-TW.md (1)
98-98: CSS变量文档更新完整
新增的图标点击态颜色变量文档完善，符合规范。
src/packages/hoverbuttonitem/hoverbuttonitem.tsx (1)
72-74: 类名条件判断逻辑合理
使用 classNames 进行条件类名判断的实现清晰合理。
src/packages/hoverbutton/demo.tsx (1)
41-41: 需要保持默认 demo 的一致性
建议将默认值改回 'basic'，以保持与 demo.taro.tsx 的一致性，避免跨平台展示不一致的问题。
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
src/packages/hoverbuttonitem/utils.ts (1)
3-10: 建议增强函数的类型安全性当前实现可以进一步增强类型安全性和可维护性。
建议通过以下方式改进：
-export const getIcon = (icon: React.ReactNode) => { +export const getIcon = (icon: React.ReactNode): React.ReactNode => { return React.isValidElement(icon) ? React.cloneElement(icon, { - // @ts-ignore - className: 'nut-icon', + className: `${(icon as React.ReactElement).props.className || ''} nut-icon`.trim(), }) : icon }另外，建议添加函数的 JSDoc 文档说明其用途和参数要求。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
src/packages/hoverbuttonitem/hoverbuttonitem.scss(2 hunks)src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx(3 hunks)src/packages/hoverbuttonitem/hoverbuttonitem.tsx(3 hunks)src/packages/hoverbuttonitem/utils.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/packages/hoverbuttonitem/hoverbuttonitem.tsx
- src/packages/hoverbuttonitem/hoverbuttonitem.scss
- src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx
🔇 Additional comments (1)
src/packages/hoverbuttonitem/utils.ts (1)
3-10: 验证函数使用情况
需要确认该函数在各个组件中的使用方式是否一致。
✅ Verification successful
Let me gather more information about the icon class usage pattern.
Based on the search results, I can now provide a final response about the usage of the getIcon utility function.
getIcon 函数使用模式已验证
该函数仅在 hoverbuttonitem 组件中使用，使用方式一致且合理。具体表现为:
- 仅在 hoverbuttonitem.tsx 和 hoverbuttonitem.taro.tsx 中引用
- 使用场景统一，都是用于处理图标渲染
- 类名添加模式一致，统一使用 'nut-icon' 类名
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查 getIcon 函数的使用模式
# 搜索所有使用 getIcon 的地方
rg "getIcon" -A 3 -B 3
# 检查是否有直接操作 className 的其他代码
ast-grep --pattern 'className: "nut-icon"'
Length of output: 7510
Script:
#!/bin/bash
# 搜索所有包含 nut-icon 类名的文件
rg "nut-icon" -A 2 -B 2
# 搜索其他可能的图标相关类名模式
rg "icon.*className" -A 2 -B 2
Length of output: 65799
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
src/packages/configprovider/types.ts (1)
813-814: 新增的颜色变量需要补充文档说明新增的
nutuiBlack1和nutuiBlack3变量遵循了现有的命名规范，这很好。建议在组件文档中补充这些新颜色变量的具体用途和色值说明。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (1)
src/packages/configprovider/types.ts(1 hunks)
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (3)
src/packages/hoverbutton/demo.taro.tsx (3)
11-11: 导入语句顺序需要调整建议将相关的导入语句放在一起，把 Demo5 和 Demo6 的导入语句相邻放置，以提高代码的可读性。
import Demo4 from './demos/taro/demo4' -import Demo6 from './demos/taro/demo6' import { harmonyAndRn } from '@/utils/platform-taro' -import Demo5 from './demos/taro/demo5' +import Demo5 from './demos/taro/demo5' +import Demo6 from './demos/taro/demo6'Also applies to: 13-13
22-22: 翻译文案需要保持一致性中文简体和繁体版本的
customNode翻译内容相同（"自定义内容"），建议区分使用不同的用词以符合当地语言习惯。'zh-CN': { customNode: '自定义内容', }, 'zh-TW': { - customNode: '自定义内容', + customNode: '自訂內容', },Also applies to: 31-31, 40-40
111-111: 条件渲染逻辑可以优化建议使用对象映射来替代多个条件判断，可以提高代码的可维护性。
- {curDemo === 'customSpacing' && <Demo5 />} + const DEMO_COMPONENTS = { + basic: Demo1, + customNode: Demo6, + multiButtons: Demo2, + hasTabbar: Demo3, + customZIndex: Demo4, + customSpacing: Demo5, + } + {DEMO_COMPONENTS[curDemo] && React.createElement(DEMO_COMPONENTS[curDemo])}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (8)
src/packages/hoverbutton/__test__/hoverbutton.spec.tsx(2 hunks)src/packages/hoverbutton/demo.taro.tsx(5 hunks)src/packages/hoverbutton/demo.tsx(4 hunks)src/packages/hoverbutton/demos/h5/demo2.tsx(1 hunks)src/packages/hoverbutton/demos/taro/demo2.tsx(1 hunks)src/packages/hoverbutton/hoverbutton.taro.tsx(2 hunks)src/packages/hoverbutton/hoverbutton.tsx(2 hunks)src/packages/hoverbutton/utils.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/packages/hoverbutton/utils.ts
🚧 Files skipped from review as they are similar to previous changes (6)
- src/packages/hoverbutton/demos/taro/demo2.tsx
- src/packages/hoverbutton/hoverbutton.taro.tsx
- src/packages/hoverbutton/demos/h5/demo2.tsx
- src/packages/hoverbutton/hoverbutton.tsx
- src/packages/hoverbutton/test/hoverbutton.spec.tsx
- src/packages/hoverbutton/demo.tsx
🔇 Additional comments (1)
src/packages/hoverbutton/demo.taro.tsx (1)
97-103: 新功能缺少适配性验证
新增的 customNode 功能需要验证在鸿蒙环境下的兼容性，特别是考虑到 PR 评论中提到的字体问题。
Also applies to: 107-107
| <View className="h2">{translated.customSpacing}</View> | ||
| <Cell | ||
| title={`${translated.show}${translated.customSpacing}`} | ||
| onClick={() => { | ||
| setCurDemo('customSpacing') | ||
| }} | ||
| /> |
There was a problem hiding this comment.
代码注释与实现不一致
上方的注释表明 RN 和鸿蒙端暂不支持 ConfigProvider，但是这里直接启用了 customSpacing 的功能。建议添加平台检测逻辑。
+ {!isNative && (
<>
<View className="h2">{translated.customSpacing}</View>
<Cell
title={`${translated.show}${translated.customSpacing}`}
onClick={() => {
setCurDemo('customSpacing')
}}
/>
</>
+ )}📝 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.
| <View className="h2">{translated.customSpacing}</View> | |
| <Cell | |
| title={`${translated.show}${translated.customSpacing}`} | |
| onClick={() => { | |
| setCurDemo('customSpacing') | |
| }} | |
| /> | |
| {!isNative && ( | |
| <> | |
| <View className="h2">{translated.customSpacing}</View> | |
| <Cell | |
| title={`${translated.show}${translated.customSpacing}`} | |
| onClick={() => { | |
| setCurDemo('customSpacing') | |
| }} | |
| /> | |
| </> | |
| )} |
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
发布说明
新功能
Demo6，支持自定义内容和间距的展示。HoverButton中添加了新的翻译键customNode，支持多语言展示。文档更新
HoverButton的文档，增加了关于自定义内容和间距的新章节，提供了更多示例代码。样式改进
HoverButtonItem的样式，改善了图标和文本的布局。