feat(Tabbar): v15 样式适配；增加 icon/value/title 的function类型，支持根据active状态渲染不同数据；增加 onDoubleClick 事件 #3110
Conversation
Walkthrough此次修改主要针对 Tabbar 组件的文档进行了更新，重点在于重命名部分章节标题和更新属性类型。文档中新增了 Changes
Sequence Diagram(s)sequenceDiagram
participant TI as TabbarItem 组件
participant CL as 类名分配逻辑
participant BD as Badge 组件
TI->>CL: 检查是否存在 icon 和 title
alt 缺失 icon 或 title
CL-->>TI: 应用 "-large" 类
else
CL-->>TI: 使用默认类名
end
TI->>BD: 直接传递 icon 作为子节点
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
🪧 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
![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 (4)
src/styles/variables.scss (3)
1138-1140: 更新 Tabbar 高度变量
$tabbar-height已调整为46px，使 Tabbar 高度更紧凑。请确认文档和其他相关组件都已同步更新这一默认值。
1151-1153: 更新 Tabbar 文本字体大小变量
将$tabbar-text-font-size从$font-size-xs修改为$font-size-xxs，字体尺寸变小，可使文本显示更精致。建议检查所有使用此变量的组件，确保视觉效果符合预期。
1163-1164: 更新 Tabbar 文本上边距变量
将$tabbar-text-margin-top从3px调整为4px，这可提升文本与图标之间的间距。请验证该改动不会破坏整体布局的居中效果。src/packages/tabbaritem/tabbaritem.scss (1)
34-49: 优化大型 TabBar 项样式
在&-large类中，针对大型 TabBar 项新增对.nut-icon的样式设置（图标尺寸调整为 38px）以及对.nut-tabbar-item-text的文本样式设置（包括字体大小、行高及字体加粗）。这使得大型项的图标及文字显示更加协调。建议在多种屏幕分辨率下进行测试，以确保效果一致。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/packages/tabbar/doc.en-US.md(1 hunks)src/packages/tabbar/doc.md(1 hunks)src/packages/tabbar/doc.taro.md(1 hunks)src/packages/tabbar/doc.zh-TW.md(1 hunks)src/packages/tabbaritem/tabbaritem.scss(1 hunks)src/packages/tabbaritem/tabbaritem.tsx(3 hunks)src/styles/variables.scss(3 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
src/packages/tabbaritem/tabbaritem.tsx (2)
src/packages/badge/badge.tsx (1) (1)
Badge(18-93)src/packages/badge/badge.taro.tsx (1) (1)
Badge(26-115)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (17)
src/packages/tabbar/doc.en-US.md (3)
121-121: 样式变量值更新符合新的设计规范更新后的Tabbar高度为46px，较之前的50px更为紧凑，符合v15的设计规范。
127-127: 字体大小调整符合移动端优化需求将标题字体大小从
$font-size-xs调整为$font-size-xxs，使界面更为轻量化，提升了移动端的用户体验。
131-131: 边距调整优化了视觉层次将标题上边距从3px增加到4px，使图标与文字之间的间距更为合理，视觉层次更加清晰。
src/packages/tabbar/doc.md (3)
121-121: 高度调整符合最新移动端设计趋势将Tabbar高度从50px减少至46px，更加符合当前移动端的设计趋势，并使组件整体更为紧凑。
127-127: 字体大小调整提升了可读性将标题字体大小改为
$font-size-xxs，与图标比例更加协调，提升了整体界面的可读性和美观度。
131-131: 间距优化提升了用户体验将标题上边距调整为4px，使图标与文字的间距更加合理，提高了组件的视觉舒适度。
src/packages/tabbar/doc.taro.md (1)
121-121: 样式变量统一更新，保持跨平台一致性Taro文档中的样式变量更新与H5版本保持一致，高度、字体大小和边距的调整确保了在小程序环境下也能呈现一致的视觉效果，符合跨平台设计的最佳实践。
Also applies to: 127-127, 131-131
src/packages/tabbar/doc.zh-TW.md (1)
121-121: 繁體中文文檔樣式變量同步更新繁體中文文檔中的樣式變量更新與其他語言版本保持一致，確保了在不同語言環境下組件的樣式表現一致，提高了用戶體驗的連貫性。
Also applies to: 127-127, 131-131
src/packages/tabbaritem/tabbaritem.tsx (5)
43-45: 代码注释详细说明了组件设计考量这些注释清晰地说明了组件需要考虑的三种情况：
- 默认同时有图标和文本
- 只有图标时的样式处理
- 只有文本时的样式处理
这对于维护者理解组件逻辑非常有帮助。
50-50: 优化条件判断逻辑，提升组件灵活性将判断条件改为
!icon || !title，这样当只有图标或只有文本时，都会应用large样式，使组件在各种使用场景下都能有最佳的视觉表现。
65-65: 简化文本渲染逻辑使用更简洁的方式渲染标题文本，并应用新的类名
${classPrefix}-text，降低了DOM嵌套层级，同时保持了样式的一致性。
80-80: Badge组件使用方式优化直接将icon作为Badge的子元素，移除了之前的额外包装层，使DOM结构更加简洁，同时减少了不必要的渲染消耗。
78-85: 渲染逻辑清晰，处理边界情况组件通过条件渲染合理处理了有图标和无图标的两种情况，确保在各种配置下都能正确显示Badge，符合组件的设计预期。
src/packages/tabbaritem/tabbaritem.scss (4)
8-8: 新增内边距调整
在.nut-tabbar-item中新增padding: 6px 0 2px;，用于调整组件的垂直内边距，改善触控体验和视觉对齐。该改动符合新版设计要求。
14-24: 新增 .nut-icon 类
新增.nut-icon类明确设置了图标的宽度、高度和字体大小，同时针对 Harmony 与非 Harmony 环境分别定义颜色。这样不仅使样式更模块化，也便于后续维护和扩展。
26-32: 新增 &-text 类
通过新增&-text类，将 TabBar 项中文本的显示属性（如颜色、字体大小、行高及上边距）独立出来，使图标与文本的样式得到更清晰的划分，提升了代码的维护性。
51-63: 更新激活状态样式
在&-active部分，对.nut-tabbar-item-text与.nut-icon的颜色做了条件适配（Harmony 环境下使用$tabbar-active-color，否则使用继承色），确保激活状态下的视觉提示一致。请测试不同平台下的颜色切换效果是否符合设计要求。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/packages/tabbar/demos/h5/demo1.tsx (1)
29-41: 提供额外的使用场景示例通过注释的方式保留了另一种使用 activeIcon 的场景，为开发者提供了更多参考。建议考虑是否应该取消注释以展示这种使用方式，或者添加注释说明保留此代码的原因。
src/packages/tabbaritem/tabbaritem.tsx (1)
8-8: 请澄清注释的目的"是否支持双击事件？"的注释看起来像是一个待办事项或疑问。建议移除或转化为 TODO 注释，明确说明未来的改进计划。
-// 是否支持双击事件？ +// TODO: 考虑添加对双击事件的支持
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (5)
src/packages/tabbar/__tests__/tabbar.spec.tsx(1 hunks)src/packages/tabbar/demos/h5/demo1.tsx(1 hunks)src/packages/tabbaritem/tabbaritem.scss(1 hunks)src/packages/tabbaritem/tabbaritem.tsx(5 hunks)src/types/spec/tabbar/base.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/tabbaritem/tabbaritem.scss
🧰 Additional context used
🧬 Code Definitions (1)
src/packages/tabbaritem/tabbaritem.tsx (2)
src/packages/badge/badge.tsx (1)
Badge(18-93)src/packages/badge/badge.taro.tsx (1)
Badge(26-115)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (12)
src/types/spec/tabbar/base.ts (1)
17-17: 新增 activeIcon 属性增强视觉交互新增的 activeIcon 属性可以让 TabbarItem 在激活状态下显示不同的图标，增强了用户界面的视觉反馈，是一个很好的功能增强。
src/packages/tabbar/__tests__/tabbar.spec.tsx (1)
24-25: 测试断言更新符合组件结构变化将选择器从
.nut-tabbar-item-icon-box更改为.nut-tabbar-item .nut-icon与组件实现的变更保持一致。这个更新确保测试能够正确验证新的 DOM 结构。src/packages/tabbar/demos/h5/demo1.tsx (3)
2-2: 导入必要的组件导入 Space 和 Image 组件以支持新的演示结构和功能，很好。
6-14: 结构化演示布局使用 Space 组件垂直布局多个 Tabbar 示例，使演示更加清晰和有条理。第一个示例展示了基本的 Tabbar 使用方式。
15-27: 展示 activeIcon 功能的示例这个示例很好地展示了新增的 activeIcon 功能，特别是使用 Image 组件作为常规图标和 Hi 图标作为激活状态图标的组合方式，对用户理解这个新功能很有帮助。
src/packages/tabbaritem/tabbaritem.tsx (7)
13-13: 增加 activeIcon 默认值为 activeIcon 设置 null 的默认值是适当的，与 icon 属性的默认值保持一致。
30-30: 在组件参数中添加 activeIcon从上下文中正确地解构 activeIcon 属性，这样就可以在组件内部使用它。
46-53: 详细的注释说明各种场景这些注释很好地解释了不同的图标和激活图标组合场景，以及它们的预期行为。这对于维护和未来开发人员理解代码非常有帮助。
57-57: 修改 large 类的应用条件将条件从
!icon修改为!icon || !title扩展了大尺寸类的应用场景，现在在没有图标或没有标题时都会应用大尺寸样式。这使得组件在各种配置下都能保持良好的视觉平衡。
71-73: 重构标题渲染逻辑将标题类名从旧的实现更改为
${classPrefix}-text，保持了命名的一致性和语义清晰。
75-95: 引入模块化渲染函数将不同的渲染逻辑拆分成独立的函数（renderTitle, renderIconAndTitle, renderIconAndActiveIcon）是一个很好的重构。这提高了代码的可读性和可维护性，每个函数都有明确的单一职责。
107-109: 条件渲染逻辑优化基于 icon 和 activeIcon 的存在与否进行条件渲染，逻辑清晰并涵盖了所有可能的组合场景。这个实现确保了组件在不同配置下都能正确渲染，提供了良好的用户体验。
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3110 +/- ##
=============================================
+ Coverage 86.49% 87.00% +0.51%
=============================================
Files 280 280
Lines 18492 18534 +42
Branches 2774 2808 +34
=============================================
+ Hits 15994 16126 +132
+ Misses 2493 2403 -90
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
src/sites/sites-react/doc/docs/react/migrate-from-v2.md (1)
142-144: 增加Tabbar功能说明在迁移文档中添加了关于Tabbar新功能的说明，包括首坑为logo的处理方式以及支持营销态的处理方式。这些信息对用户从v2升级到v3版本很有帮助。
建议为这些新增的功能提供简短的代码示例或链接到相关文档，以便用户更容易理解和实现这些功能。
src/packages/tabbar/demos/h5/demo8.tsx (1)
13-17: 实现双击回调功能新增了支持双击回调的 Tabbar.Item，通过 onDoubleClick 属性实现。这为组件增加了新的交互方式，提升了用户体验。
然而，控制台日志信息使用了中文，建议使用英文或者常量来提高代码的国际化兼容性。
- onDoubleClick={() => console.log('可以在这里写想要的事件')} + onDoubleClick={() => console.log('Double click event triggered')}src/packages/tabbar/demo.tsx (1)
39-46: 英文翻译中存在拼写错误英文翻译中有一个拼写错误：
'With Controled'应该是'With Controlled'（第45行）。- c9e6df49: 'With Controled', + c9e6df49: 'With Controlled',src/packages/tabbar/demo.taro.tsx (1)
42-49: Taro 英文翻译中存在相同的拼写错误与标准 React 版本一样，Taro 版本的英文翻译中也有相同的拼写错误：
'With Controled'应该是'With Controlled'（第48行）。- c9e6df49: 'With Controled', + c9e6df49: 'With Controlled',src/packages/tabbar/doc.en-US.md (2)
107-107: 英文描述中存在拼写和格式问题在
value属性的描述中，有几处问题需要修正：
- "eg" 应当写为 "e.g."（包含句点）
- "charctor" 拼写错误，应为 "character"
- | value | value to show in Badge, eg number、charctor and custom content | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | + | value | value to show in Badge, e.g. number, character and custom content | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` |🧰 Tools
🪛 LanguageTool
[uncategorized] ~107-~107: The abbreviation “e.g.” (= for example) requires two periods.
Context: ...-| | value | value to show in Badge, eg number、charctor and custom content | `R...(E_G)
110-111: 英文文档中的标点使用不当在
top和right属性的描述中，"can be set to: 5, etc." 中的冒号使用不当。根据英文语法规则，当介词"to"引导一个系列时，不应使用冒号。- | top | Up and down offset of Badge, support unit setting, can be set to: 5, etc. | `number` | `0` | - | right | Left and right offset of Badge, support unit setting, can be set to: 5, etc. | `number` | `0` | + | top | Up and down offset of Badge, support unit setting, can be set to 5, etc. | `number` | `0` | + | right | Left and right offset of Badge, support unit setting, can be set to 5, etc. | `number` | `0` |🧰 Tools
🪛 LanguageTool
[typographical] ~110-~110: Do not use a colon (:) before a series that is introduced by a preposition (‘to’). Remove the colon or add a noun or a noun phrase after the preposition.
Context: ...Badge, support unit setting, can be set to: 5, etc. |number|0| | right | Le...(RP_COLON)
[typographical] ~111-~111: Do not use a colon (:) before a series that is introduced by a preposition (‘to’). Remove the colon or add a noun or a noun phrase after the preposition.
Context: ...Badge, support unit setting, can be set to: 5, etc. |number|0| | onDoubleCl...(RP_COLON)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (29)
src/packages/tabbar/demo.taro.tsx(2 hunks)src/packages/tabbar/demo.tsx(2 hunks)src/packages/tabbar/demos/h5/demo1.tsx(1 hunks)src/packages/tabbar/demos/h5/demo2.tsx(1 hunks)src/packages/tabbar/demos/h5/demo3.tsx(1 hunks)src/packages/tabbar/demos/h5/demo4.tsx(1 hunks)src/packages/tabbar/demos/h5/demo5.tsx(1 hunks)src/packages/tabbar/demos/h5/demo6.tsx(1 hunks)src/packages/tabbar/demos/h5/demo7.tsx(1 hunks)src/packages/tabbar/demos/h5/demo8.tsx(1 hunks)src/packages/tabbar/demos/h5/demo9.tsx(1 hunks)src/packages/tabbar/demos/taro/demo1.tsx(1 hunks)src/packages/tabbar/demos/taro/demo2.tsx(1 hunks)src/packages/tabbar/demos/taro/demo3.tsx(1 hunks)src/packages/tabbar/demos/taro/demo4.tsx(1 hunks)src/packages/tabbar/demos/taro/demo5.tsx(1 hunks)src/packages/tabbar/demos/taro/demo6.tsx(1 hunks)src/packages/tabbar/demos/taro/demo7.tsx(1 hunks)src/packages/tabbar/demos/taro/demo8.tsx(1 hunks)src/packages/tabbar/demos/taro/demo9.tsx(1 hunks)src/packages/tabbar/doc.en-US.md(4 hunks)src/packages/tabbar/doc.md(4 hunks)src/packages/tabbar/doc.taro.md(4 hunks)src/packages/tabbar/doc.zh-TW.md(3 hunks)src/packages/tabbaritem/tabbaritem.scss(1 hunks)src/packages/tabbaritem/tabbaritem.taro.tsx(3 hunks)src/packages/tabbaritem/tabbaritem.tsx(4 hunks)src/sites/sites-react/doc/docs/react/migrate-from-v2.md(1 hunks)src/types/spec/tabbar/base.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
- src/packages/tabbaritem/tabbaritem.tsx
- src/types/spec/tabbar/base.ts
- src/packages/tabbar/doc.zh-TW.md
- src/packages/tabbaritem/tabbaritem.scss
- src/packages/tabbar/doc.taro.md
🧰 Additional context used
🪛 LanguageTool
src/packages/tabbar/doc.en-US.md
[uncategorized] ~107-~107: The abbreviation “e.g.” (= for example) requires two periods.
Context: ...- | | value | value to show in Badge, eg number、charctor and custom content | `R...
(E_G)
[typographical] ~110-~110: Do not use a colon (:) before a series that is introduced by a preposition (‘to’). Remove the colon or add a noun or a noun phrase after the preposition.
Context: ...Badge, support unit setting, can be set to: 5, etc. | number | 0 | | right | Le...
(RP_COLON)
[typographical] ~111-~111: Do not use a colon (:) before a series that is introduced by a preposition (‘to’). Remove the colon or add a noun or a noun phrase after the preposition.
Context: ...Badge, support unit setting, can be set to: 5, etc. | number | 0 | | onDoubleCl...
(RP_COLON)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (99)
src/packages/tabbar/demos/taro/demo4.tsx (2)
5-5: 移除了 onSwitch 回调属性之前的代码包含
onSwitch回调函数，现在已移除。这使示例代码更简洁，符合 v15 的设计风格。
8-8: 标签项从"分类"更改为"消息"将 Tabbar.Item 的标题从"分类"更改为"消息"，与其他示例保持一致性，改善了用户体验。
src/packages/tabbar/demos/taro/demo3.tsx (3)
3-3: 更新图标导入更新了图标导入，增加了 Message 图标，使组件示例更加完整。
6-6: 移除了 onSwitch 回调属性之前的代码包含
onSwitch回调函数，现在已移除，保持了示例的简洁性。
9-9: 替换了图标组件将 Category 图标替换为 Message 图标，与其他示例保持一致性。
src/packages/tabbar/demos/taro/demo6.tsx (6)
3-3: 更新图标导入更新了图标导入，移除了未使用的图标，使代码更加简洁。
5-5: 组件重命名将组件从
Demo6重命名为Demo7，请确认这是否与预期一致。根据 PR 描述，这可能应该是Demo而不是Demo7。
6-6: 添加颜色自定义属性新增
inactiveColor和activeColor属性，增强了组件的自定义样式能力，符合 v15 的样式适配需求。
7-7: 添加图标属性为 Tabbar.Item 添加了 icon 属性，使示例更加完整。
9-9: 修改 TabbarItem 配置移除了购物车项的 dot 指示器，并调整了标题和图标，使组件更加简洁，符合 v15 的设计风格。
14-14: 更新导出语句更新导出语句以匹配新的组件名称
Demo7，保持一致性。src/packages/tabbar/demos/taro/demo9.tsx (2)
3-3: 更新图标导入导入语句中增加了 Message 图标，支持新增的消息标签项。
9-9: 替换标签项为"消息"将原有的标签项替换为带有 Message 图标的"消息"标签项，保持与其他示例的一致性。
注意：根据 AI 摘要，该组件名称应从
Demo9更改为Demo，但实际代码中未进行此更改。请确认是否需要更新组件名称以保持一致性。src/packages/tabbar/demos/h5/demo4.tsx (1)
4-13: 组件重命名和内容更新这个更改将
Demo4重命名为Demo，并将 Tabbar 内的一个选项从"分类"改为"消息"。这样的重命名和内容调整使得示例更简洁和有通用性。建议确认这个改动是否与其他示例文件保持一致的命名规范。
src/packages/tabbar/demos/taro/demo1.tsx (3)
3-3: 图标导入优化导入了新增的图标组件
HeartFill和Heart，用于实现后续的条件渲染功能。
6-7: 简化Tabbar.Item属性移除了
onSwitch属性和首页项的value={9}属性，使代码更简洁。
9-12: 添加条件渲染功能这里展示了一个很好的增强功能 - 根据激活状态动态切换图标。通过传递函数给
icon属性，实现了在激活状态显示HeartFill图标，非激活状态显示Heart图标的效果。这种模式提高了组件的灵活性，使UI交互更加丰富。
src/packages/tabbar/demos/h5/demo9.tsx (4)
3-3: 图标导入更新更新了图标导入，添加了
Message图标组件以支持新的标签页。
5-5: 组件重命名将
Demo9重命名为更通用的Demo，保持了命名的一致性。
9-9: 内容更新将"分类"标签页替换为"消息"标签页，并使用了
Message图标。这个变更与其他演示文件的调整保持一致。
15-15: 导出更新更新了导出的组件名称，与重命名保持一致。
src/sites/sites-react/doc/docs/react/migrate-from-v2.md (1)
147-149: TabbarItem功能增强说明文档清晰地说明了TabbarItem组件的新功能：
icon、title和value属性现在支持函数形式，可以根据active状态展示不同内容- 新增了
onDoubleClick事件处理器，增强了交互能力这些改进显著提升了组件的灵活性和用户体验。文档说明简洁明了，帮助用户理解新特性。
src/packages/tabbar/demos/h5/demo3.tsx (4)
3-3: 已将 Category 图标替换为 Message 图标导入语句已更新，引入 Message 图标替代之前的图标。
5-6: 组件名称简化组件已从 Demo3 重命名为 Demo，并移除了 onSwitch 回调属性，使示例更加简洁明了。
9-9: 使用 Message 图标替换了之前的图标此更改与导入语句的修改保持一致，使用 Message 图标替代了之前可能使用的 Category 图标。
14-14: 导出语句更新导出语句已更新，匹配组件的新名称 Demo。
src/packages/tabbar/demos/h5/demo1.tsx (4)
3-3: 图标导入更新导入语句已更新，增加了 Heart 和 HeartFill 图标，用于实现收藏功能的激活状态切换。
5-7: 组件重构组件已从 Demo1 重命名为 Demo，并移除了 Tabbar 的 defaultValue 属性。首页 Tabbar.Item 也移除了 value 属性，使组件结构更加简洁。
9-12: 添加了带条件渲染的收藏项新增的收藏 Tabbar.Item 实现了基于激活状态的图标切换功能，当激活时显示 HeartFill 图标，未激活时显示 Heart 图标。这展示了 icon 属性的新功能，它现在可以接受一个返回 ReactNode 的函数。
18-18: 导出语句更新导出语句已更新，匹配组件的新名称 Demo。
src/packages/tabbar/demos/h5/demo6.tsx (4)
3-3: 图标导入更新导入语句已更新，可能移除了之前使用的 Category 图标，使导入更加精简。
5-6: 组件重构并添加颜色自定义组件已从 Demo6 重命名为 Demo，并新增了 inactiveColor 和 activeColor 属性，使开发者可以自定义 Tabbar 的激活和非激活状态颜色。
7-9: 简化 Tabbar 项移除了原先的"分类"项，并且从"购物车"项中移除了 dot 属性，使 Tabbar 结构更加简洁。
14-14: 导出语句更新导出语句已更新，匹配组件的新名称 Demo。
src/packages/tabbar/demos/taro/demo2.tsx (4)
3-3: 图标导入更新导入语句已更新，增加了 Message 图标，以支持新增的消息选项卡。
5-6: 组件重命名及配置更新组件已从 Demo2 重命名为 Demo5，并移除了 Tabbar 的 defaultValue 属性，使组件配置更加灵活。
7-11: Tabbar 项功能增强对 Tabbar 项进行了多处功能增强：
- 首页项添加了小红点（dot）
- "逛"项添加了文本类型的 value 值
- 新增"消息"项，设置数字类型的 value 值
- "购物车"和"我的"项也添加了数字类型的 value 值
这些更改展示了 Tabbar.Item 的 value 属性如何支持不同类型的值，以及如何使用 dot 属性显示提示标记。
15-15: 导出语句更新导出语句已更新，匹配组件的新名称 Demo5。
src/packages/tabbar/demos/taro/demo8.tsx (5)
3-3: 更新了引入的图标组件新增了
Heart和HeartFill图标组件的引入，用于实现条件渲染图标的示例。
5-6: 组件名称更新并移除了颜色属性将
Demo8重命名为Demo，并且移除了Tabbar组件的inactiveColor和activeColor属性，使用默认的主题颜色。
9-12: 新增了使用函数型图标属性的 TabbarItem这个 TabbarItem 使用了基于激活状态动态切换图标的功能，当激活时显示
HeartFill，未激活时显示Heart。这很好地展示了新增的函数型icon属性的用法。
13-17: 添加了新的双击回调功能示例新增了一个具有
onDoubleClick回调的 TabbarItem 示例，很好地展示了新功能的使用方法。当用户双击该选项卡时，会在控制台打印信息。
22-22: 更新了导出的组件名称将导出的组件名从
Demo8更新为Demo，与组件声明保持一致。src/packages/tabbar/demos/h5/demo7.tsx (5)
1-1: 添加了 useState 的引入为了实现状态管理，添加了对 React 的
useState钩子的引入。
3-3: 更新了图标导入更新了导入的图标组件，删除了未使用的图标，保留了需要的图标组件。
5-7: 重构为使用 useState 的函数组件将组件重命名为
Demo并实现了状态管理，通过useState钩子跟踪当前选中的标签索引，初始值设为 3（对应"我的"选项卡）。
8-17: 使用受控组件模式重构 Tabbar重构后的 Tabbar 使用了受控组件模式，通过
value属性接收当前选中的索引，并通过onSwitch回调更新状态。组件结构更加清晰，并且去掉了原先的inactiveColor和activeColor属性，使用默认的主题颜色。
20-20: 更新了导出的组件名称将导出的组件名从
Demo7更新为Demo，与组件声明保持一致。src/packages/tabbar/demos/h5/demo5.tsx (7)
2-3: 更新了组件导入新增了
Image组件的导入，并更新了图标导入列表，添加了Message图标组件。
5-7: 重构组件结构将组件重命名为
Demo并添加了显式的 return 语句，使代码结构更清晰。
8-17: 实现了基于激活状态的动态内容使用函数型
title和icon属性，根据激活状态动态切换显示内容。当激活时，隐藏标题并显示图片；未激活时，显示"首页"文本和Home图标。这很好地展示了条件渲染的功能。
19-29: 实现了另一种动态内容切换方式这个 TabbarItem 也使用了函数型属性，但实现了与第一个项目相反的逻辑：激活时显示文本"逛"和
Hi图标；未激活时显示图片并隐藏文本。同时添加了自定义value值 "AI"。
30-30: 添加了带数字提示的消息选项卡新增了"消息"选项卡，使用
Message图标和数字 100 作为提示标记。
31-33: 保留了购物车和个人中心的选项卡保留了"购物车"和"我的"选项卡，使用简单的静态内容。
37-37: 更新了导出的组件名称将导出的组件名从
Demo5更新为Demo，与组件声明保持一致。src/packages/tabbar/demos/h5/demo2.tsx (5)
1-1: 简化了 React 导入移除了不必要的
useState导入，因为重构后的组件不再使用状态管理。
3-3: 更新了图标导入导入了
Message图标组件，用于新增的"消息"选项卡。
5-6: 简化了组件结构将组件重命名为
Demo并简化为无状态的函数组件，直接返回 JSX。移除了defaultValue和value属性，使 Tabbar 以非受控方式工作。
7-12: 更新了选项卡内容和布局
- 为"首页"选项卡添加了
dot属性，显示小红点提示- 为"逛"选项卡设置了文本类型的
value属性- 新增了带数字提示的"消息"选项卡
- 为"购物车"和"我的"选项卡设置了数字提示
这个示例很好地展示了 Tabbar 的各种提示类型（小红点、文本、数字）。
15-15: 更新了导出的组件名称将导出的组件名从
Demo2更新为Demo，与组件声明保持一致。src/packages/tabbar/demos/h5/demo8.tsx (4)
3-3: 新增 Heart 和 HeartFill 图标导入这里添加了两个新图标的导入，用于在后续的 Tabbar.Item 中实现动态图标渲染功能。
5-6: 组件名称从 Demo8 改为 Demo将组件名从 Demo8 改为 Demo，使命名更加简洁。同时移除了 Tabbar 组件的 inactiveColor 和 activeColor 属性，采用默认样式。
9-12: 添加动态图标渲染的 Tabbar.Item新增了带有动态图标渲染功能的收藏选项，根据激活状态显示不同的图标。这是一个很好的增强，可以提供更直观的用户反馈。
22-22: 更新导出语句将导出语句更新为
export default Demo，与组件名称保持一致。src/packages/tabbar/demos/taro/demo7.tsx (5)
1-1: 引入 useState 钩子添加了 useState 钩子的导入，用于管理 Tabbar 的选中状态，这是一个很好的改进，使组件更具交互性。
3-3: 更新图标导入移除了不再需要的图标导入，简化了代码。
5-6: 将 Demo7 重命名为 Demo 并添加状态管理将组件重命名为 Demo，并添加了 index 状态变量来跟踪当前选中的标签页，初始值为 3（对应"我的"选项）。
8-17: 重构组件返回结构并实现状态控制将组件返回结构更改为使用 React Fragment，并为 Tabbar 添加了 value 和 onSwitch 属性以实现状态控制。这使得组件更具交互性和可维护性。
同时简化了 Tabbar.Item 的结构，移除了"分类"选项，整体结构更加清晰。
20-20: 更新导出语句将导出语句更新为
export default Demo，与组件名称保持一致。src/packages/tabbaritem/tabbaritem.taro.tsx (9)
36-36: 添加 onDoubleClick 属性为 TabbarItem 组件添加了 onDoubleClick 属性，增强了组件的交互能力。这与之前的 demo 文件中展示的双击回调功能相对应。
48-48: 优化大尺寸判断逻辑简化了判断 TabbarItem 是否应用大尺寸样式的逻辑，使用
!icon || !title更加直观且清晰。
53-54: 支持函数类型的 value 属性添加了对函数类型 value 属性的支持，使 Badge 的显示值可以根据激活状态动态变化。这增强了组件的灵活性。
57-57: 更新 badgeProps 中的 value将 badgeProps 中的 value 更改为动态计算的 badgeValue，确保函数类型的值能正确传递给 Badge 组件。
69-69: 简化类名将 title 元素的类名简化为
${classPrefix}-text，使类名更加一致和可维护。
74-74: 支持函数类型的 title 属性添加了对函数类型 title 属性的支持，使标题文本可以根据激活状态动态变化。这增强了组件的灵活性。
80-93: 重构渲染逻辑将渲染逻辑拆分为
renderTitle和renderIconAndTitle两个函数，使代码结构更加清晰。这种模块化的方法提高了代码的可维护性和可读性。
105-106: 简化条件渲染逻辑使用新的渲染函数简化了条件渲染逻辑，使代码更加简洁和可读。这种改进有助于维护和理解组件的渲染流程。
102-102:❓ Verification inconclusive
实现双击功能逻辑
更新了点击事件处理逻辑，当项目处于激活状态时执行
onDoubleClick回调，否则执行常规的handleClick。这种方式有点特殊，因为它不是真正的双击检测，而是基于激活状态的不同行为。注意：这种实现方式可能会导致用户混淆，因为只有当项目已经激活时才会触发 "双击" 行为，而不是检测实际的双击操作。考虑使用真正的双击检测逻辑。
🏁 Script executed:
#!/bin/bash # 查找是否有其他组件使用了类似的双击实现方式 rg -A 3 "onClick\s*=\s*\(\s*\)\s*=>\s*\(\s*active" --type typescriptLength of output: 105
下面提供一个新的 shell 脚本，请运行此脚本以在所有 .tsx 文件中搜寻是否存在类似的双击处理（即在 active 状态下调用 onDoubleClick）的实现：
请根据输出结果确认是否仅在该组件中存在这种实现逻辑，或是否有其他类似的情况。
🏁 Script executed:
#!/bin/bash # 搜索代码库中是否有其他组件使用了类似的双击逻辑 rg -A 3 "onClick\s*=\s*\(\s*\)\s*=>\s*\(\s*active" --type tsx .Length of output: 93
请运行下面的 shell 脚本，以便在所有 .tsx 文件中搜索是否还存在基于
active状态调用onDoubleClick的类似实现，从而帮助确认这种处理逻辑是否仅在当前组件中存在：请运行并检查输出结果，以便确认是否有其他组件也在使用这种实现方式，以及后续是否需要调整为真正的双击检测逻辑。
🏁 Script executed:
#!/bin/bash # 使用 --type-add 选项，让 ripgrep 识别 .tsx 文件，并搜索双击处理逻辑 rg --type-add 'tsx:*.tsx' -t tsx -A 3 "onClick\s*=\s*\(\s*\)\s*=>\s*\(\s*active" .Length of output: 84
双击逻辑实现注意事项
- 在文件
src/packages/tabbaritem/tabbaritem.taro.tsx第102行更新了点击事件处理逻辑：当组件处于激活状态 (active为 true) 时，会调用onDoubleClick回调，否则触发常规的ctx.handleClick(index)。- 请注意，这种实现方式并非基于真实的双击操作检测，而是依赖激活状态，因此可能会导致用户混淆：只有当组件已经激活时才会执行被称为 "双击" 的行为。
- 虽然尝试搜索其他组件中是否存在类似实现，但未获得明确输出，建议开发者手动复核代码库中是否还有类似的双击逻辑，并考虑是否采用更为直观的双击检测方案以提升用户体验。
src/packages/tabbar/demos/taro/demo5.tsx (7)
2-3: 更新导入语句添加了
Image组件的导入，并更新了图标导入，增加了Message图标。这些变更支持新的动态渲染功能。
5-5: 将 Demo5 重命名为 Demo2将组件重命名为 Demo2，使命名更加简洁。
8-17: 实现基于激活状态的动态渲染为首页选项实现了基于激活状态的动态渲染，当激活时显示图片，未激活时显示 Home 图标并显示"首页"文本。这种实现展示了组件的新功能，提供了更丰富的用户界面。
19-29: 实现反向的动态渲染逻辑为"逛"选项实现了反向的动态渲染逻辑，激活时显示 Hi 图标和"逛"文本，未激活时显示图片而不显示文本。这种多样的实现展示了组件的灵活性。
30-30: 添加带有徽章值的消息选项新增了一个消息选项，带有徽章值 100。这展示了 Tabbar.Item 的徽章功能。
31-35: 简化购物车和我的选项保留了简单的购物车和我的选项，展示了基本用法与高级用法的对比。整体结构更加清晰和有组织。
37-37: 更新导出语句将导出语句更新为
export default Demo2，与组件名称保持一致。src/packages/tabbar/doc.md (4)
21-21: 标题更新更准确地反映了每个示例的内容章节标题的更新使得每个示例的描述更加准确和具体，与实际展示的功能更加匹配。这种改进有助于开发者更快地找到所需功能示例。
Also applies to: 37-37, 45-45, 53-53, 61-61, 69-69
105-107: 改进的属性类型支持基于激活状态的动态内容将
title、icon和value的类型从简单的ReactNode扩展为包含函数类型((active: boolean) => ReactNode)的联合类型，增强了组件的灵活性，允许根据标签栏项目的激活状态动态渲染内容。这是一个很好的改进。
112-112: 新增的 onDoubleClick 事件处理增强了交互能力添加的
onDoubleClick属性为 Tabbar.Item 提供了处理双击事件的能力，这扩展了组件的交互可能性，使其能够支持更复杂的用户交互场景。
122-122: CSS 变量默认值的调整优化了组件视觉效果高度从
50px减少到46px，文本字体大小从$font-size-xs变更为$font-size-xxs，文本上外边距从3px增加到4px，这些调整优化了组件的视觉比例和整体外观。Also applies to: 128-128, 132-132
src/packages/tabbar/demo.tsx (3)
17-24: zh-CN 翻译字符串更新与文档变更保持一致翻译字符串的更新与文档中的章节标题变更保持一致，这确保了界面展示的连贯性。新增的
c9e6df48键为"模拟双击支持回调"，对应新增的功能。
28-35: zh-TW 翻译字符串更新繁体中文翻译的更新与简体中文保持一致，确保了多语言支持的完整性。
55-68: 组件展示顺序调整演示组件的顺序已调整，以匹配更新后的文档结构和标题顺序，这提高了文档与实际代码之间的一致性。
src/packages/tabbar/demo.taro.tsx (3)
17-28: Taro 版本的 zh-CN 翻译更新Taro 版本的简体中文翻译更新与标准 React 版本保持一致，确保了跨平台实现的一致性。
31-39: Taro 版本的 zh-TW 翻译更新Taro 版本的繁体中文翻译也已同步更新，维持了不同语言版本间的一致性。
58-70: 视图展示顺序调整Taro 版本的视图组件顺序调整与标准 React 版本保持一致，确保了不同平台实现的统一性。
src/packages/tabbar/doc.en-US.md (4)
21-21: 英文文档的章节标题已更新英文文档中的章节标题已更新，使其与中文文档保持一致，并更准确地反映了各个示例的功能。
Also applies to: 37-37, 45-45, 53-53, 61-61, 69-69
105-107: 属性类型更新支持动态内容渲染与中文文档一致，英文文档中的
title、icon和value属性类型也已更新为支持函数返回类型，增强了组件的灵活性。🧰 Tools
🪛 LanguageTool
[uncategorized] ~107-~107: The abbreviation “e.g.” (= for example) requires two periods.
Context: ...-| | value | value to show in Badge, eg number、charctor and custom content | `R...(E_G)
112-112: 新增 onDoubleClick 事件属性添加的
onDoubleClick属性描述清晰，与中文文档保持一致，增强了组件的交互能力。
122-122: CSS 变量默认值调整CSS 变量的默认值调整与中文文档一致，确保了样式设置的一致性。
Also applies to: 128-128, 132-132
xiaoyatong
changed the title
xiaoyatong
changed the title
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/packages/tabbar/tabbar.taro.tsx (1)
78-86: 更新子元素映射逻辑更新了子元素映射逻辑，仅当子元素数量为2时才将direction属性传递给子元素。这种选择性传递props的方式可能导致困惑。
考虑简化逻辑，无条件传递direction属性，让子组件自行决定如何使用：
- direction: React.Children.count(children) === 2 && direction, + direction,
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
src/packages/tabbar/demos/h5/demo6.tsx(1 hunks)src/packages/tabbar/demos/taro/demo6.tsx(1 hunks)src/packages/tabbar/tabbar.scss(1 hunks)src/packages/tabbar/tabbar.taro.tsx(5 hunks)src/packages/tabbar/tabbar.tsx(4 hunks)src/packages/tabbaritem/tabbaritem.scss(1 hunks)src/packages/tabbaritem/tabbaritem.taro.tsx(4 hunks)src/packages/tabbaritem/tabbaritem.tsx(5 hunks)src/types/spec/tabbar/base.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/packages/tabbaritem/tabbaritem.scss
- src/types/spec/tabbar/base.ts
🧰 Additional context used
🧬 Code Definitions (3)
src/packages/tabbar/demos/taro/demo6.tsx (2)
src/packages/tabbar/tabbar.taro.tsx (1)
Tabbar(22-92)src/packages/tabbar/tabbar.tsx (1)
Tabbar(21-90)
src/packages/tabbaritem/tabbaritem.tsx (2)
src/packages/badge/badge.taro.tsx (1)
Badge(26-115)src/packages/badge/badge.tsx (1)
Badge(18-93)
src/packages/tabbar/demos/h5/demo6.tsx (2)
src/packages/tabbar/tabbar.taro.tsx (1)
Tabbar(22-92)src/packages/tabbar/tabbar.tsx (1)
Tabbar(21-90)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (34)
src/packages/tabbar/demos/taro/demo6.tsx (1)
1-29: 组件重构展示了新的功能特性此修改完全重构了组件，从 Demo6 改为 Demo7，并展示了多种 Tabbar 使用场景：
- 使用 Space 组件垂直排列多个 Tabbar 实例
- 为每个 Tabbar 设置了 inactiveColor 和 activeColor 属性
- 展示了两项和三项的不同布局
- 最后一个示例使用了新增的 direction="horizontal" 属性展示水平布局
- 展示了 dot 和 value 属性的使用
代码实现清晰直观，能够有效地展示组件的各种配置选项。
src/packages/tabbar/tabbar.scss (1)
23-46: 新增的样式类支持不同布局模式这些样式类的添加很好地支持了 Tabbar 组件的新功能：
.nut-tabbar-wrap-3和.nut-tabbar-wrap-2为不同数量的 item 提供了适当的内边距.nut-tabbar-wrap-horizontal实现了水平布局模式：
- 设置了上下内边距
- 调整了子元素为行布局
- 固定了图标尺寸为 20px × 20px
- 优化了文本间距和字体大小
这些样式变更确保了组件在不同布局模式下的视觉一致性和用户体验。
src/packages/tabbar/tabbar.tsx (7)
8-8: 使用 SafeArea 组件替代原来的实现导入了 SafeArea 组件，用于替代之前的安全区域实现，这样可以复用已有的功能组件，提高代码的可维护性。
16-18: 优化组件默认属性设置
- 添加了 direction 属性默认值为 'vertical'
- 简化了 onSwitch 回调函数的实现，移除了不必要的参数
这些更改使组件配置更加清晰，同时保持了向后兼容性。
31-36: 添加 direction 属性支持水平布局解构属性时添加了 direction，确保从 props 中获取该属性，为后续水平布局模式的实现做好准备。
47-56: 添加 sizeCls 函数根据子元素数量和方向动态计算类名新增的 sizeCls 函数根据以下因素动态计算并返回适当的类名：
- 子元素数量（大于3、等于3、等于2）
- 布局方向（仅当子元素数量为2时考虑方向属性）
这种实现方式优雅地处理了不同布局情况下的样式需求。
67-67: 应用动态计算的类名使用新增的 sizeCls 函数返回的类名，确保根据子元素数量和布局方向应用正确的样式类。
76-84: 向子组件传递 direction 属性当子元素数量为2时，将 direction 属性传递给每个子组件，使子组件能够根据布局方向调整自身样式。这种设计使得整个组件系统在不同布局模式下保持一致性。
87-87: 使用 SafeArea 组件替代原始的 div 元素当 fixed 或 safeArea 为 true 时，使用 SafeArea 组件替代原来的 div 元素，这样可以更好地处理不同设备上的安全区域问题，提高用户体验。
src/packages/tabbar/demos/h5/demo6.tsx (1)
1-29: H5 示例重构展示了新的功能特性此修改完全重构了组件，从 Demo6 改为 Demo，并提供了与 Taro 版本一致的功能展示：
- 使用 Space 组件垂直排列多个 Tabbar 实例
- 展示了两项和三项的不同布局
- 应用了 inactiveColor 和 activeColor 属性自定义颜色
- 最后一个示例使用 direction="horizontal" 属性展示水平布局
- 展示了 dot 和 value 属性的使用
这种实现确保了 H5 和 Taro 平台上的一致性，同时提供了清晰的使用示例。
src/packages/tabbaritem/tabbaritem.tsx (8)
17-17: 为TabbarItem添加了direction属性新增的
direction属性默认值为'vertical'，这将影响TabbarItem的布局方向。这个变更与PR目标一致，增强了组件的样式适配能力。
36-37: 新增direction和onDoubleClick属性在组件的props中新增了
direction和onDoubleClick属性，与defaultProps中的定义保持一致。这两个属性的添加增强了组件的布局控制和交互能力。
49-49: 修改了large类应用条件将条件从
!icon && !title改为!icon || !title，这意味着当icon或title任一缺失时都会应用large类，而不是两者都缺失的情况。这扩大了large类的应用范围。
54-55: 增加动态badge值支持新增了对
value作为函数的支持，允许根据active状态动态计算badge值。这增强了组件的灵活性。
58-58: 更新badgeProps使用计算后的badgeValue使用计算后的
badgeValue更新badge属性，与前面的逻辑变更保持一致。
66-93: 重构渲染逻辑为独立函数将渲染逻辑重构为多个独立函数：
renderTitleText()- 渲染标题文本renderTitle()- 将标题包装在Badge组件中renderIconAndTitle()- 渲染图标和标题renderDualItem()- 处理水平方向的渲染这种重构提高了代码的模块化和可维护性，同时支持了根据active状态动态渲染内容的功能。
112-112: 更新点击处理逻辑当项目已激活时使用
onDoubleClick处理程序，否则使用上下文的handleClick函数。这允许对已激活的项目进行双击操作，增强了交互能力。
115-121: 基于direction属性更新渲染逻辑根据
direction属性和dot状态决定渲染方式：
- 当direction为"horizontal"且无dot时，使用
renderDualItem()- 其他情况下，根据是否有icon使用不同的渲染函数
这增强了组件的布局灵活性，完善了对不同方向的支持。
src/packages/tabbar/tabbar.taro.tsx (6)
9-9: 导入SafeArea组件从
@/packages/safearea/index.taro导入SafeArea组件，用于替换原来的安全区域处理方式，提高了代码的复用性。
17-17: 添加direction默认属性为Tabbar组件添加了
direction: 'vertical'默认属性，与TabbarItem保持一致，确保了组件间的属性统一性。
32-32: 添加direction到解构的props正确地从props对象中提取了新增的direction属性，与前面的defaultProps定义保持一致。
47-56: 添加sizeCls函数新增
sizeCls函数，根据子元素数量动态计算类名：
- 当有3个子元素时添加
${classPrefix}-wrap-3类- 当有2个子元素时添加
${classPrefix}-wrap-2类- 当有2个子元素且设置了direction时，添加
${classPrefix}-wrap-${direction}类这增强了组件的自适应能力，使其在不同数量的子元素时有不同的样式表现。
69-69: 更新包装元素类名在包装元素的类名中添加了
sizeCls()的结果，使类名能够根据子元素数量动态变化。
89-89: 更新安全区域渲染使用
SafeArea组件替代原来的View，并设置position="bottom"属性，提高了代码的复用性和可维护性。src/packages/tabbaritem/tabbaritem.taro.tsx (10)
18-18: 为TabbarItem添加了direction属性新增的
direction属性默认值为'vertical'，这将影响TabbarItem的布局方向。这个变更与PR目标一致，增强了组件的样式适配能力。
37-38: 新增direction和onDoubleClick属性在组件的props中新增了
direction和onDoubleClick属性，与defaultProps中的定义保持一致。这两个属性的添加增强了组件的布局控制和交互能力。
50-50: 修改了large类应用条件将条件从
!icon && !title改为!icon || !title，这意味着当icon或title任一缺失时都会应用large类，而不是两者都缺失的情况。这扩大了large类的应用范围。
55-56: 增加动态badge值支持新增了对
value作为函数的支持，允许根据active状态动态计算badge值。这增强了组件的灵活性。
59-59: 更新badgeProps使用计算后的badgeValue使用计算后的
badgeValue更新badge属性，与前面的逻辑变更保持一致。
71-71: 简化标题元素类名将标题元素的类名简化为
${classPrefix}-text，提高了代码的一致性。
76-76: 添加对函数类型title的支持增加了对title作为函数的处理，允许根据active状态动态渲染不同的标题内容。这增强了组件的灵活性。
82-109: 重构渲染逻辑为独立函数将渲染逻辑重构为多个独立函数：
renderTitle()- 将标题包装在Badge组件中renderIconAndTitle()- 渲染图标和标题renderDualItem()- 处理水平方向的渲染这种重构提高了代码的模块化和可维护性，同时支持了根据active状态动态渲染内容的功能。
118-118: 更新点击处理逻辑当项目已激活时使用
onDoubleClick处理程序，否则使用上下文的handleClick函数。这允许对已激活的项目进行双击操作，增强了交互能力。
121-127: 基于direction属性更新渲染逻辑根据
direction属性和dot状态决定渲染方式：
- 当direction为"horizontal"且无dot时，使用
renderDualItem()- 其他情况下，根据是否有icon使用不同的渲染函数
这增强了组件的布局灵活性，完善了对不同方向的支持。
| direction: 'vertical', | ||
| safeArea: false, | ||
| onSwitch: (value) => {}, | ||
| onSwitch: () => {}, |
There was a problem hiding this comment.
简化onSwitch回调函数
将onSwitch从(value) => {}简化为() => {}，移除了参数。这可能会破坏依赖于该参数的现有代码。
建议保留原有的参数，确保向后兼容性：
- onSwitch: () => {},
+ onSwitch: (value) => {},📝 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.
| onSwitch: () => {}, | |
| onSwitch: (value) => {}, |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/packages/tabbar/__tests__/tabbar.spec.tsx (1)
109-130: 添加了双击事件测试新增了对
onDoubleClick事件的测试，验证了当项目被快速点击两次时，回调函数被正确调用。这是一个很好的测试覆盖。但是，这里有一个潜在的问题：测试中使用了两次独立的
fireEvent.click()，这并不完全等同于用户的双击行为。考虑使用fireEvent.doubleClick()或确保当前实现符合预期。- fireEvent.click(tabbarItem[1]) - fireEvent.click(tabbarItem[1]) + fireEvent.doubleClick(tabbarItem[1])🧰 Tools
🪛 Biome (1.9.4)
[error] 114-126: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment(lint/complexity/noUselessFragments)
src/packages/tabbaritem/tabbaritem.tsx (1)
119-119: 更新点击处理逻辑修改了点击事件处理逻辑，当项目已激活时触发
onDoubleClick回调，否则调用上下文的handleClick函数。这实现了双击功能，但实现方式可能有潜在问题。当前实现依赖于点击已激活项目来触发
onDoubleClick，而不是真正检测双击事件。这可能导致用户体验不一致，因为：
- 用户可能不理解需要点击已激活的项目
- 如果用户快速点击未激活的项目，不会触发双击事件
建议改进此实现，使用真正的双击事件检测或添加明确的文档说明此行为。
考虑使用
useRef和计时器来实现真正的双击检测，或者明确在文档中说明此行为特性。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (7)
src/packages/tabbar/__tests__/tabbar.spec.tsx(4 hunks)src/packages/tabbar/demos/taro/demo5.tsx(1 hunks)src/packages/tabbar/tabbar.scss(1 hunks)src/packages/tabbar/tabbar.taro.tsx(5 hunks)src/packages/tabbar/tabbar.tsx(4 hunks)src/packages/tabbaritem/tabbaritem.taro.tsx(5 hunks)src/packages/tabbaritem/tabbaritem.tsx(6 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/tabbar/tabbar.taro.tsx
🧰 Additional context used
🧬 Code Definitions (2)
src/packages/tabbaritem/tabbaritem.tsx (2)
src/packages/badge/badge.tsx (1)
Badge(18-93)src/packages/badge/badge.taro.tsx (1)
Badge(26-115)
src/packages/tabbar/__tests__/tabbar.spec.tsx (2)
src/packages/tabbar/tabbar.tsx (1)
Tabbar(21-96)src/packages/tabbar/tabbar.taro.tsx (1)
Tabbar(22-98)
🪛 GitHub Check: codecov/patch
src/packages/tabbar/tabbar.tsx
[warning] 89-89: src/packages/tabbar/tabbar.tsx#L89
Added line #L89 was not covered by tests
🪛 Biome (1.9.4)
src/packages/tabbar/__tests__/tabbar.spec.tsx
[error] 18-29: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment
(lint/complexity/noUselessFragments)
[error] 114-126: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment
(lint/complexity/noUselessFragments)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (48)
src/packages/tabbar/tabbar.scss (3)
24-26: 新增的 &-3 类的 padding 样式这个新增的类为 Tabbar 提供了适当的水平内边距，改善了 3 个子项的布局。确保这个 padding 值（16px）与设计规范一致。
28-30: 新增的 &-2 类的 padding 样式为 2 个子项的情况提供了更宽的水平内边距（32px），这有助于在内容较少时提供更好的视觉平衡。与 &-3 类一起，构成了一个完整的内边距系统。
32-45: 新增的水平布局样式很好地实现了水平布局模式，包括：
- 行方向排列
- 居中对齐
- 固定图标尺寸 (20px × 20px)
- 合理的文本边距和字体大小
这个变更使 Tabbar 组件更加灵活，能够适应不同的布局需求。
src/packages/tabbar/__tests__/tabbar.spec.tsx (7)
2-2: 引入 waitFor 测试工具添加了
waitFor函数导入，这对于测试异步状态变化是必要的。确保在后续的测试中正确使用这个函数。
5-13: 扩展了图标导入增加了
Heart和HeartFill图标的导入，这些图标用于测试基于激活状态的动态图标切换功能。图标导入采用了结构化的方式，提高了代码可读性。
20-24: 简化了图标属性移除了图标的宽高属性，使用了更简洁的图标引用方式。这与组件的最新实现保持一致，图标尺寸现在由 CSS 控制。
32-33: 更新了元素选择器将选择器从
.nut-tabbar-item-icon-box更改为.nut-tabbar-item .nut-icon，这反映了组件结构的变化。确保此选择器与当前的 DOM 结构匹配。
71-73: 添加了基于激活状态的动态内容实现了 title、icon 和 value 属性基于激活状态动态渲染的功能，这增强了组件的灵活性和交互性。这是一个很好的功能增强。
84-105: 扩展了激活状态测试断言为动态内容添加了更全面的测试断言，检查：
- 文本内容变化
- 图标组件的切换
- 徽章值的变化
这些测试确保了基于激活状态的动态内容功能正常工作。
164-174: 添加了水平方向布局测试新增了对双项目水平布局的测试，这验证了新添加的水平布局功能。测试使用快照比较，确保了渲染输出的稳定性。
src/packages/tabbar/tabbar.tsx (9)
1-1: 引入 useMemo 优化性能添加了
useMemo导入，用于优化类名计算，减少不必要的重新渲染。这是一个好的性能优化。
8-8: 引入 SafeArea 组件从本地包导入了
SafeArea组件，用于替代之前的占位 div，更好地处理底部安全区域。这提高了代码的可维护性和功能性。
16-16: 添加方向默认属性为 Tabbar 组件添加了
direction默认属性，设置为 'vertical'，这符合组件的原始设计，同时为新的水平布局提供了支持。
47-57: 使用 useMemo 优化类名计算使用
useMemo缓存类名计算结果，这是一个很好的性能优化。该函数根据子元素数量和方向属性计算合适的类名，支持新的水平布局功能。计算逻辑清晰，考虑了不同的子元素数量和方向组合。
59-62: 计算 itemDirection 属性添加了
itemDirection计算，用于确定项目方向，特别是当只有两个子元素且方向不是垂直方向时。这与新增的水平布局功能配合良好。
73-73: 应用动态类名到包装元素将计算得到的
sizeCls应用到.nut-tabbar-wrap元素，实现了基于子元素数量和方向的样式调整。这是对原有代码的改进。
82-90: 更新子元素渲染逻辑改进了子元素的渲染逻辑，现在会将
direction属性传递给有效的子元素。代码更加清晰且功能更完善。注意：第89行没有被测试覆盖。虽然这行代码是处理无效子元素的防御性代码，但最好还是添加一个测试用例来覆盖这种情况。
根据静态分析工具提示，第89行代码没有被测试覆盖。建议添加一个包含无效子元素的测试用例。
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 89-89: src/packages/tabbar/tabbar.tsx#L89
Added line #L89 was not covered by tests
93-93: 使用 SafeArea 组件替代占位元素用
SafeArea组件替换了之前的占位 div，更优雅地处理底部安全区域。这是一个好的重构，提高了代码的可维护性和语义化。
18-18:❓ Verification inconclusive
简化 onSwitch 回调函数签名
将
onSwitch函数从(value) => {}简化为() => {}。这可能会影响依赖此参数的代码。请确认此更改不会破坏现有功能，并考虑更新相关文档。
🏁 Script executed:
#!/bin/bash # 检查是否有代码依赖 onSwitch 函数的参数 rg "onSwitch\s*=\s*\([^)]*\)\s*=>\s*{[^}]*\$\d+[^}]*}" --no-ignoreLength of output: 231
请仔细确认 onSwitch 回调函数签名简化后的影响
原建议将
onSwitch从(value) => {}简化为() => {}，以移除不必要的参数。然而，由于之前执行的正则搜索命令因语法错误未能提供有效输出，请进一步验证是否有任何代码依赖onSwitch的这个参数。如果确实存在依赖，可能会造成功能破坏；否则，该修改可以被接受。同时，请确保相关文档得到同步更新。为帮助进一步验证，请运行下面的新脚本，检查代码库中是否存在使用
onSwitch时依赖非空参数的情况：#!/bin/bash # 搜索代码库中对 onSwitch 回调函数采用非空参数的使用情况 rg -n "onSwitch\s*=\s*\(\s*[^)\s]" --no-ignore如有输出，请仔细检查相关调用位置，确认是否需要进一步调整。
src/packages/tabbaritem/tabbaritem.tsx (9)
17-17: 添加方向默认属性为 TabbarItem 组件添加
direction默认属性，设置为 'vertical'，与 Tabbar 组件保持一致。这支持了新的水平布局功能。
37-37: 添加双击事件属性引入了
onDoubleClick属性，增强了组件的交互能力，允许用户定义双击行为。这是一个有用的功能增强。
49-49: 修改大尺寸类的应用条件将
${classPrefix}-large类的应用条件从!icon && !title改为!icon || !title，这意味着当图标或标题任一缺失时都会应用大尺寸样式。请确认这是符合设计要求的更改，因为这可能会影响现有使用了单图标或单文本的 TabbarItem 的样式。
请验证这个条件变更是否符合设计需求，以及是否会对现有使用场景产生不良影响。
54-58: 添加动态节点渲染函数新增了
renderNodeWithActive辅助函数，用于处理基于激活状态的动态内容渲染。这个函数很好地封装了判断逻辑，提高了代码的可读性和可维护性。
61-61: 使用动态渲染函数处理 value 属性应用
renderNodeWithActive函数处理 value 属性，支持基于激活状态的动态徽章值。这与 PR 的目标一致，增强了组件的功能性。
69-77: 重构标题文本渲染函数重构了
renderTitleText函数，使用renderNodeWithActive处理动态标题内容。代码结构更清晰，功能更完善。
79-100: 重构渲染逻辑为多个函数将渲染逻辑拆分为多个专用函数：
renderTitle: 渲染带徽章的标题renderIcon: 渲染图标renderIconAndTitle: 渲染图标和标题组合这种重构提高了代码的可读性和可维护性，遵循了单一职责原则。
102-110: 添加水平布局渲染函数新增了
renderDualItem函数，专门处理水平布局模式下的渲染逻辑。这个函数处理了图标、文本和徽章的排列，使组件支持新的布局方式。
122-129: 条件渲染基于方向和点标记添加了基于
direction属性和dot值的条件渲染逻辑，使组件能够在不同布局模式下呈现适当的 UI。这增强了组件的灵活性。代码结构清晰，逻辑简单明了，容易理解和维护。
src/packages/tabbar/demos/taro/demo5.tsx (6)
2-3: 导入适当组件以支持新功能导入了必需的组件和图标，以支持新的动态渲染功能。
Image组件用于展示不同状态下的图像，新增的图标如Message也支持了更多的展示选项。
7-7: 组件名称变更为Demo2将组件名称从Demo5更改为Demo2，保持导出文件名与组件名一致可以提高代码可读性。
10-23: 实现了基于激活状态的动态渲染这段代码展示了如何使用函数式属性根据激活状态动态渲染内容。当Tabbar.Item处于激活状态时显示图片，非激活状态时显示Home图标和"首页"文本。这很好地演示了新功能的使用方法。
25-39: 反向实现激活状态逻辑这个示例展示了与第一个项相反的逻辑：激活状态显示Hi图标和"逛"文本，非激活状态显示图片。同时还演示了value属性的使用。这种多样化的示例有助于用户理解组件的灵活性。
40-42: 展示常规Tabbar.Item用法这些项目展示了标准的Tabbar.Item实现，为用户提供了基础使用参考。第一个项还展示了带数字标记的用法，这对需要显示通知数量的场景很有用。
47-47: 更新导出名称将导出名称更新为Demo2，与组件声明保持一致。
src/packages/tabbaritem/tabbaritem.taro.tsx (14)
1-1: 导入类型更新从React中导入了额外的类型，包括ReactNode，以支持组件的新功能和类型检查。
18-18: 添加新的direction属性为TabbarItem添加了direction属性，默认值为'vertical'，增强了布局控制能力。这允许开发者根据需求选择垂直或水平排列图标和文本。
37-38: 新增direction和onDoubleClick属性在props解构中添加了direction和onDoubleClick，使这些属性可以在组件内部使用。onDoubleClick事件处理程序允许在项目已激活时处理二次点击事件，这为用户交互提供了更多可能性。
50-50: 简化大尺寸样式条件将大尺寸样式条件简化为
!icon || !title，使逻辑更清晰。当图标或标题任一不存在时，应用大尺寸样式类。
55-59: 添加renderNodeWithActive辅助函数添加了一个辅助函数来处理可能是函数的节点属性。这个函数检查节点是否为函数，如果是则调用它并传入active状态，否则直接返回节点。这种抽象简化了代码并提高了可维护性。
61-61: 更新badgeProps中的value处理使用新的renderNodeWithActive辅助函数处理value属性，允许value是一个基于激活状态动态计算的函数。这与组件的其他部分保持一致，增强了功能的统一性。
73-73: 简化类名将标题的类名简化为
${classPrefix}-text，移除了额外的条件，使代码更简洁。
78-78: 在标题文本中应用renderNodeWithActive应用renderNodeWithActive函数处理title属性，实现基于激活状态的动态标题渲染。这与icon和value属性的处理保持一致，提供了统一的交互体验。
84-90: 添加renderTitle函数新增renderTitle函数，将标题文本包装在Badge组件中进行渲染。这种结构化的方法使代码更加模块化，便于维护和理解。
92-101: 添加renderIcon函数新增renderIcon函数，处理图标的渲染逻辑，包括基于激活状态设置颜色。注释表明此处有针对鸿蒙系统的特殊处理，这有助于跨平台兼容性。
103-112: 添加renderIconAndTitle函数新增renderIconAndTitle函数，将图标和标题的渲染逻辑组合在一起。这种结构化的方法使代码更加模块化，便于维护和理解。
114-122: 添加renderDualItem函数新增renderDualItem函数，为水平方向布局提供特殊的渲染逻辑。这增强了组件的灵活性，允许不同的布局选项。
131-131: 更新点击处理逻辑更新了点击处理逻辑，当项目处于激活状态时调用onDoubleClick，否则调用ctx?.handleClick(index)。这使得组件能够根据状态响应不同的点击行为，增强了交互能力。
134-141: 实现条件渲染逻辑实现了基于direction属性和dot状态的条件渲染逻辑。当direction为'horizontal'且没有dot时，使用renderDualItem函数；否则根据icon的存在与否，分别使用renderIconAndTitle或renderTitle函数。这增强了组件的灵活性，支持多种布局场景。
不过，有一点需要注意：horizontal模式下如果同时设置了dot，可能会导致Badge组件的行为不符合预期。建议在文档中明确说明这种组合的行为。
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
src/packages/tabbar/tabbar.scss (1)
23-42: 新增了水平布局支持，使 Tabbar 更加灵活新增的 &-horizontal 类为 Tabbar 组件添加了水平布局支持，包括以下改进：
- 设置了水平对齐方式为居中
- 调整了 nut-tabbar-item 为行方向布局
- 为图标设置了固定尺寸（20x20px）
- 为文本内容设置了适当的间距和字体大小
- 移除了徽标的边框，使其更加美观
这些样式变更很好地支持了新增的水平布局功能。
建议考虑为边距和尺寸使用 CSS 变量，以便更容易进行全局主题定制：
- width: 20px; - height: 20px; + width: $tabbar-icon-size; + height: $tabbar-icon-size; - margin: 0 4px 0 6px; - font-size: 14px; + margin: 0 $tabbar-text-side-margin 0 $tabbar-icon-text-margin; + font-size: $tabbar-text-font-size;src/packages/tabbar/demo.taro.tsx (1)
19-28: 翻译字符串已更新，建议调整命名方式当前翻译字符串使用的键名如
c38a08ef、ce5c5440等较为晦涩且难以维护。建议将这些键名调整为更具语义化的名称，如customBrand、onlyText等，以提高代码可读性和可维护性。此外，新增了"模拟双击支持回调"功能，确保组件内部已实现此功能。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/packages/tabbar/demo.taro.tsx(1 hunks)src/packages/tabbar/demo.tsx(1 hunks)src/packages/tabbar/demos/h5/demo5.tsx(1 hunks)src/packages/tabbar/tabbar.scss(1 hunks)src/packages/tabbaritem/tabbaritem.scss(1 hunks)src/packages/tabbaritem/tabbaritem.taro.tsx(5 hunks)src/packages/tabbaritem/tabbaritem.tsx(6 hunks)src/styles/variables.scss(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/packages/tabbaritem/tabbaritem.scss
- src/packages/tabbar/demo.tsx
- src/styles/variables.scss
🧰 Additional context used
🧬 Code Definitions (1)
src/packages/tabbaritem/tabbaritem.tsx (2)
src/packages/badge/badge.taro.tsx (1)
Badge(26-115)src/packages/badge/badge.tsx (1)
Badge(18-93)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (20)
src/packages/tabbar/tabbar.scss (2)
15-17: 新增了 Tabbar-3 类，使用了 16px 的左右内边距新添加的 Tabbar-3 类提供了更紧凑的水平内边距设置，适合空间较小的场景。
19-21: 新增了 Tabbar-2 类，使用了 32px 的左右内边距新添加的 Tabbar-2 类提供了更宽松的水平内边距设置，适合空间充足的场景。
src/packages/tabbar/demos/h5/demo5.tsx (2)
2-3: 更新了导入语句，添加了所需组件和图标导入语句已更新，新增了 Image 组件和所需的图标组件。
5-37:❓ Verification inconclusive
Demo 组件展示了 Tabbar 的新功能
该 Demo 组件很好地展示了 Tabbar 的新功能：
- 使用函数形式的 title 和 icon 属性，根据激活状态条件渲染不同内容
- 第一个标签项在激活时显示图片，非激活时显示 Home 图标
- 第二个标签项在激活时显示 Hi 图标，非激活时显示图片
- 添加了带有数字标记的"消息"标签项
这个示例清晰地展示了如何使用条件渲染功能。
注意：组件名从 Demo5 改为 Demo，如果有其他地方引用了 Demo5，可能需要相应更新。
🏁 Script executed:
#!/bin/bash # 检查是否有其他文件引用了 Demo5 rg -l "Demo5" --type ts --type tsxLength of output: 62
#!/bin/bash # 重新检查是否有其他文件引用了 Demo5（包含所有 .ts 和 .tsx 文件） rg -l "Demo5" -g "*.tsx" -g "*.ts"组件命名调整确认，请手动验证引用
Demo 组件成功展示了 Tabbar 的新功能，通过条件渲染有效地切换了图标和标题内容。同时请注意，组件名由 Demo5 修改为 Demo。如果有其他文件仍引用 Demo5，请及时更新它们。建议您运行上述脚本或手动搜索项目中的 .ts 和 .tsx 文件以确认这一改动不会影响其它模块。
src/packages/tabbaritem/tabbaritem.tsx (6)
1-1: 添加了新的属性定义和导入新增了对 ReactNode 的导入以及两个新属性：
- direction: 控制布局方向，默认为 'vertical'
- onDoubleClick: 支持双击事件处理
这些添加有助于增强组件的灵活性和交互能力。
Also applies to: 17-17, 36-37
49-49: 更新了 large 类名的判断条件将 large 类名的添加条件从
!icon && !title修改为!icon || !title，这意味着只要图标或文本中任一为空，就会应用 large 类。这个变更使组件在只有图标或只有文本时能够有更合适的样式展示。
54-58: 添加了条件渲染辅助函数新增的 renderNodeWithActive 函数优雅地处理了基于激活状态的条件渲染逻辑：
- 检查节点是否为函数
- 如果是函数，则传入当前激活状态并调用
- 如果不是函数，则直接返回节点
这是一个很好的封装，使条件渲染代码更加简洁和可维护。
61-61: 更新了 badgeProps 的 value 处理使用新的 renderNodeWithActive 函数处理 value 属性，支持根据激活状态动态显示不同的徽标值。
69-110: 重构了渲染逻辑，提高了代码组织性将渲染逻辑拆分为多个函数，包括：
- renderTitleText: 渲染标题文本
- renderTitle: 渲染带徽标的标题
- renderIcon: 渲染图标
- renderIconAndTitle: 渲染图标和标题组合
- renderDualItem: 为水平布局渲染的内容
这种结构化的重构使代码更加清晰、可读，且易于维护。每个函数都有明确的职责，遵循了单一职责原则。
122-129: 基于方向属性的条件渲染根据 direction 属性和 dot 属性的值，有条件地渲染不同的内容结构：
- 当 direction 为 'horizontal' 且没有 dot 时，使用 renderDualItem
- 其他情况下，根据是否有图标分别渲染不同的内容
这种灵活的渲染逻辑很好地支持了水平和垂直两种布局模式。
src/packages/tabbaritem/tabbaritem.taro.tsx (7)
1-1: 添加了新的属性定义和导入新增了对 ReactNode 的导入以及两个新属性：
- direction: 控制布局方向，默认为 'vertical'
- onDoubleClick: 支持双击事件处理
这些添加与 Web 版本保持一致，确保了跨平台的功能一致性。
Also applies to: 18-18, 37-38
50-50: 更新了 large 类名的判断条件将 large 类名的添加条件从
!icon && !title修改为!icon || !title，与 Web 版本保持一致。
55-59: 添加了条件渲染辅助函数新增的 renderNodeWithActive 函数处理基于激活状态的条件渲染，与 Web 版本功能一致。
61-61: 更新了 badgeProps 的 value 处理使用新的 renderNodeWithActive 函数处理 value 属性，支持动态显示不同的徽标值。
73-73: 简化了标题类名并更新了内容渲染
- 将标题元素的类名简化为
${classPrefix}-text- 使用 renderNodeWithActive 函数处理标题内容
这些更改使代码更加简洁，同时支持条件渲染功能。
Also applies to: 78-78
84-122: 重构了渲染逻辑，提高了代码组织性将渲染逻辑拆分为多个函数，包括：
- renderTitle: 渲染带徽标的标题
- renderIcon: 渲染图标，并包含鸿蒙系统的特殊处理
- renderIconAndTitle: 渲染图标和标题组合
- renderDualItem: 为水平布局渲染的内容
这种结构化的重构与 Web 版本保持一致，同时针对 Taro 环境做了适配。特别是对鸿蒙系统的处理，确保了图标颜色能够正确应用。
134-141: 基于方向属性的条件渲染根据 direction 属性和 dot 属性的值，有条件地渲染不同的内容结构，与 Web 版本保持一致。
src/packages/tabbar/demo.taro.tsx (3)
29-39: 台湾繁体中文翻译已更新，保持一致性确保台湾繁体中文翻译与简体中文翻译在语义上保持一致。当前的调整反映了组件功能的变更，如添加了双击支持等，建议在文档中也相应更新这些功能说明。
55-57: ScrollView 格式调整，符合规范代码格式调整符合项目规范，提高了可读性。
60-73: 调整了示例展示顺序，确保逻辑性展示组件的顺序已调整，将相关功能的示例放在了一起，如将"受控"示例移至Demo6之后，并新增了"模拟双击支持回调"示例。
建议考虑是否需要按照功能的复杂性或使用频率来组织这些示例，以便用户更容易理解和使用组件。
| ...style, | ||
| }} | ||
| onClick={() => ctx?.handleClick(index)} | ||
| onClick={() => (active ? onDoubleClick?.() : ctx?.handleClick(index))} |
There was a problem hiding this comment.
更新了点击事件处理逻辑
点击事件处理逻辑已更新：
- 当项目处于激活状态时，触发 onDoubleClick 回调
- 当项目处于非激活状态时，调用上下文中的 handleClick 方法
这个逻辑有点特殊，因为它没有真正实现双击检测，而是将激活状态项的点击映射为"双击"事件。
建议修改此逻辑，使用真正的双击检测，同时保留正常的点击处理：
- onClick={() => (active ? onDoubleClick?.() : ctx?.handleClick(index))}
+ onClick={() => ctx?.handleClick(index)}
+ onDoubleClick={() => onDoubleClick?.()}或者至少在注释中清楚地说明这种行为，因为它与标准的双击事件处理不同。
📝 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.
| onClick={() => (active ? onDoubleClick?.() : ctx?.handleClick(index))} | |
| onClick={() => ctx?.handleClick(index)} | |
| onDoubleClick={() => onDoubleClick?.()} |
| ...style, | ||
| }} | ||
| onClick={() => ctx?.handleClick(index)} | ||
| onClick={() => (active ? onDoubleClick?.() : ctx?.handleClick(index))} |
There was a problem hiding this comment.
更新了点击事件处理逻辑
与 Web 版本类似，点击事件逻辑将激活状态项的点击映射为"双击"事件。
建议修改此逻辑，使用真正的双击检测：
- onClick={() => (active ? onDoubleClick?.() : ctx?.handleClick(index))}
+ onClick={() => ctx?.handleClick(index)}
+ onDoubleClick={() => onDoubleClick?.()}或者在文档中明确说明此行为，避免用户混淆。
📝 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.
| onClick={() => (active ? onDoubleClick?.() : ctx?.handleClick(index))} | |
| onClick={() => ctx?.handleClick(index)} | |
| onDoubleClick={() => onDoubleClick?.()} |
| 'en-US': { | ||
| ce5c5446: 'Basic Usage', | ||
| c38a08ef: 'Custom DefaultValue', | ||
| c38a08ef: 'Custom', | ||
| ce5c5448: 'Only Icon', | ||
| ce5c5440: 'No Icon', | ||
| ce5c5440: 'Only Text', | ||
| b840c88f: 'Logo Tips', | ||
| customColor: 'Custom Color', | ||
| '8dab2f66': 'Tabbar With Custom Number Of Icons', | ||
| customColor: 'Custom Color and Size', | ||
| cfbdc781: 'Fixed Bottom', | ||
| c9e6df49: 'Dot', | ||
| c9e6df49: 'With Controled', | ||
| c9e6df48: 'Mock Double Click', | ||
| }, |
There was a problem hiding this comment.
英文翻译中存在拼写错误
第48行中的英文翻译 "With Controled" 存在拼写错误，应修改为 "With Controlled"（多一个'l'）。
此外，英文翻译中 "Custom" 可能过于简单，无法准确表达 "首坑品牌+营销态" 的含义，建议考虑使用更具描述性的翻译，如 "Featured Brand + Marketing State"。
- c9e6df49: 'With Controled',
+ c9e6df49: 'With Controlled',📝 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.
| 'en-US': { | |
| ce5c5446: 'Basic Usage', | |
| c38a08ef: 'Custom DefaultValue', | |
| c38a08ef: 'Custom', | |
| ce5c5448: 'Only Icon', | |
| ce5c5440: 'No Icon', | |
| ce5c5440: 'Only Text', | |
| b840c88f: 'Logo Tips', | |
| customColor: 'Custom Color', | |
| '8dab2f66': 'Tabbar With Custom Number Of Icons', | |
| customColor: 'Custom Color and Size', | |
| cfbdc781: 'Fixed Bottom', | |
| c9e6df49: 'Dot', | |
| c9e6df49: 'With Controled', | |
| c9e6df48: 'Mock Double Click', | |
| }, | |
| 'en-US': { | |
| ce5c5446: 'Basic Usage', | |
| c38a08ef: 'Custom', | |
| ce5c5448: 'Only Icon', | |
| ce5c5440: 'Only Text', | |
| b840c88f: 'Logo Tips', | |
| customColor: 'Custom Color and Size', | |
| cfbdc781: 'Fixed Bottom', | |
| c9e6df49: 'With Controlled', | |
| c9e6df48: 'Mock Double Click', | |
| }, |
| - 注意：** 该组件不符合移动端规范，已被废弃。请使用 SideBar ** | ||
|
|
||
| [//]: # '#### Tabbar' | ||
|
|
| - 增加Demo：支持营销态的处理方式； | ||
|
|
||
| [//]: # '#### TabbarItem' | ||
|
|
| [//]: # '#### Tabbar' | ||
|
|
||
| - 增加Demo：首坑为 logo 的当前流行处理方式； | ||
| - 增加Demo：支持营销态的处理方式； |
There was a problem hiding this comment.
不属于组件自身的升级内容，写到这里有一定的干扰
| ...style, | ||
| }} | ||
| onClick={() => ctx?.handleClick(index)} | ||
| onClick={() => (active ? onDoubleClick?.() : ctx?.handleClick(index))} |
There was a problem hiding this comment.
处理双击的逻辑不对, onDoubleClick={() => {}}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/packages/tabbar/doc.en-US.md (2)
107-107: 文档中的缩写格式需要修正在
value属性描述中，应将 "eg" 修改为正确的缩写格式 "e.g."（包含两个句点）。- | value | value to show in Badge, eg number、charctor and custom content | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` | + | value | value to show in Badge, e.g. number、charctor and custom content | `ReactNode` \| `((active: boolean) => ReactNode)` | `-` |🧰 Tools
🪛 LanguageTool
[uncategorized] ~107-~107: The abbreviation “e.g.” (= for example) requires two periods.
Context: ...-| | value | value to show in Badge, eg number、charctor and custom content | `R...(E_G)
110-111: 移除冒号以符合英文语法规范在
top和right属性的描述中，"can be set to:" 后面的冒号应该被移除，因为它跟随的是介词"to"。- | top | Up and down offset of Badge, support unit setting, can be set to: 5, etc. | `number` | `0` | - | right | Left and right offset of Badge, support unit setting, can be set to: 5, etc. | `number` | `0` | + | top | Up and down offset of Badge, support unit setting, can be set to 5, etc. | `number` | `0` | + | right | Left and right offset of Badge, support unit setting, can be set to 5, etc. | `number` | `0` |🧰 Tools
🪛 LanguageTool
[typographical] ~110-~110: Do not use a colon (:) before a series that is introduced by a preposition (‘to’). Remove the colon or add a noun or a noun phrase after the preposition.
Context: ...Badge, support unit setting, can be set to: 5, etc. |number|0| | right | Le...(RP_COLON)
[typographical] ~111-~111: Do not use a colon (:) before a series that is introduced by a preposition (‘to’). Remove the colon or add a noun or a noun phrase after the preposition.
Context: ...Badge, support unit setting, can be set to: 5, etc. |number|0| | onActiveCl...(RP_COLON)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (12)
src/packages/tabbar/__tests__/tabbar.spec.tsx(4 hunks)src/packages/tabbar/demos/h5/demo8.tsx(1 hunks)src/packages/tabbar/demos/taro/demo8.tsx(1 hunks)src/packages/tabbar/doc.en-US.md(4 hunks)src/packages/tabbar/doc.md(4 hunks)src/packages/tabbar/doc.taro.md(4 hunks)src/packages/tabbar/doc.zh-TW.md(3 hunks)src/packages/tabbaritem/tabbaritem.taro.tsx(5 hunks)src/packages/tabbaritem/tabbaritem.tsx(6 hunks)src/sites/sites-react/doc/docs/react/migrate-from-v2.md(1 hunks)src/sites/sites-react/doc/docs/taro/migrate-from-v2.md(2 hunks)src/types/spec/tabbar/base.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/sites/sites-react/doc/docs/react/migrate-from-v2.md
- src/packages/tabbar/doc.zh-TW.md
- src/packages/tabbar/doc.taro.md
- src/packages/tabbar/doc.md
🧰 Additional context used
🧬 Code Definitions (2)
src/packages/tabbaritem/tabbaritem.tsx (2)
src/packages/badge/badge.taro.tsx (1)
Badge(26-115)src/packages/badge/badge.tsx (1)
Badge(18-93)
src/packages/tabbar/__tests__/tabbar.spec.tsx (2)
src/packages/tabbar/tabbar.taro.tsx (1)
Tabbar(22-98)src/packages/tabbar/tabbar.tsx (1)
Tabbar(21-96)
🪛 Biome (1.9.4)
src/packages/tabbar/__tests__/tabbar.spec.tsx
[error] 18-29: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment
(lint/complexity/noUselessFragments)
[error] 114-126: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment
(lint/complexity/noUselessFragments)
🪛 LanguageTool
src/packages/tabbar/doc.en-US.md
[uncategorized] ~107-~107: The abbreviation “e.g.” (= for example) requires two periods.
Context: ...- | | value | value to show in Badge, eg number、charctor and custom content | `R...
(E_G)
[typographical] ~110-~110: Do not use a colon (:) before a series that is introduced by a preposition (‘to’). Remove the colon or add a noun or a noun phrase after the preposition.
Context: ...Badge, support unit setting, can be set to: 5, etc. | number | 0 | | right | Le...
(RP_COLON)
[typographical] ~111-~111: Do not use a colon (:) before a series that is introduced by a preposition (‘to’). Remove the colon or add a noun or a noun phrase after the preposition.
Context: ...Badge, support unit setting, can be set to: 5, etc. | number | 0 | | onActiveCl...
(RP_COLON)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (41)
src/sites/sites-react/doc/docs/taro/migrate-from-v2.md (1)
140-146: 清晰地文档化了 Tabbar 组件的新功能文档很好地描述了 Tabbar 和 TabbarItem 组件的新功能：
icon、title和value属性现在可以接受函数类型，根据活动状态显示不同的内容- 新增
onActiveClick事件处理当元素已经处于焦点状态时的点击事件这些更改与 PR 的目标一致，增强了组件的交互性和灵活性。
src/packages/tabbar/__tests__/tabbar.spec.tsx (13)
2-2: 导入了 waitFor 函数以支持异步测试导入了
waitFor函数来适当处理异步测试场景，这是一个好的实践。
5-13: 扩展了图标导入以支持新功能添加了
Heart和HeartFill图标的导入，以支持测试基于活动状态动态显示图标的新功能。
20-25: 简化了图标渲染方式移除了图标的宽度和高度属性，使代码更加简洁，这是一个好的改进。
32-33: 更新了测试选择器将选择器从
.nut-tabbar-item-icon-box更改为.nut-tabbar-item .nut-icon，这与组件的实际结构更加匹配。
40-43: 简化了组件渲染代码移除了不必要的属性，使测试代码更加简洁。
58-60: 简化了组件渲染代码同样移除了不必要的属性，保持了代码的一致性。
70-74: 测试动态属性功能添加了对动态属性 (title、icon、value) 的测试，这些属性可以根据活动状态返回不同的值，很好地覆盖了新功能。
75-78: 增加了测试覆盖率添加了更多的测试项，提高了对组件不同状态的测试覆盖率。
84-97: 增强了测试断言添加了针对文本、徽章值和图标的更详细断言，确保组件在不同状态下的行为符合预期。
98-106: 使用 waitFor 进行异步测试使用
waitFor函数正确处理异步状态更新的测试，确保在状态变化后进行断言。
109-129: 测试新增的 onActiveClick 功能添加了对
onActiveClick事件的测试，验证当已激活的项目再次被点击时是否正确触发回调函数，这是对新功能的重要测试。🧰 Tools
🪛 Biome (1.9.4)
[error] 114-126: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment(lint/complexity/noUselessFragments)
137-140: 简化了组件渲染代码保持了一致的代码风格，移除了不必要的属性。
🧰 Tools
🪛 Biome (1.9.4)
[error] 137-145: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment(lint/complexity/noUselessFragments)
164-174: 添加了方向布局测试增加了测试项，验证
direction="horizontal"属性在只有两个项目时的渲染效果，提高了测试覆盖率。src/packages/tabbar/demos/taro/demo8.tsx (5)
3-3: 更新了图标导入新增了
Heart和HeartFill图标的导入，以支持演示动态图标功能。
5-6: 组件重命名并简化了属性将
Demo8重命名为Demo，并移除了inactiveColor和activeColor属性，使示例更加简洁。
9-12: 展示动态图标功能添加了一个使用函数作为
icon属性的示例，根据激活状态显示不同的图标 (HeartFill或Heart)，很好地展示了新功能。
13-17: 展示 onActiveClick 功能添加了一个使用
onActiveClick事件的示例，当已激活的项目被再次点击时，会在控制台输出消息，很好地展示了这个新功能。
22-22: 更新了导出名称将导出名称从
Demo8更改为Demo，与组件名保持一致。src/packages/tabbar/demos/h5/demo8.tsx (5)
3-3: 更新了图标导入新增了
Heart和HeartFill图标的导入，以支持演示动态图标功能。
5-6: 组件重命名并简化了属性将
Demo8重命名为Demo，并移除了inactiveColor和activeColor属性，使示例更加简洁。
9-12: 展示动态图标功能添加了一个使用函数作为
icon属性的示例，根据激活状态显示不同的图标 (HeartFill或Heart)，很好地展示了新功能。
13-17: 展示 onActiveClick 功能添加了一个使用
onActiveClick事件的示例，当已激活的项目被再次点击时，会在控制台输出消息，很好地展示了这个新功能。
22-22: 更新了导出名称将导出名称从
Demo8更改为Demo，与组件名保持一致。src/packages/tabbaritem/tabbaritem.tsx (5)
37-37: 新增onActiveClick属性提升了组件交互能力新增的
onActiveClick属性允许在已激活的选项上执行自定义点击操作，增强了组件的灵活性。此功能对于需要在当前活跃项上执行额外操作的场景非常有用。
49-49: 优化了大尺寸样式的应用逻辑将
${classPrefix}-large类的应用条件从!icon && !title调整为!icon || !title，这样当图标或文字任一缺失时就应用大尺寸样式，使组件在各种配置下的视觉效果更加一致。
54-58: 增加了对函数类型 props 的支持添加的
renderNodeWithActive辅助函数使组件能够根据激活状态动态渲染内容，增强了组件的灵活性。这个实现简洁明了，支持了接口定义中title、icon和value属性接受函数的能力。
119-119: 点击事件处理逻辑需要优化当前实现将活跃项的点击映射为
onActiveClick事件，而非活跃项的点击映射为ctx?.handleClick。这种设计可能会导致用户困惑，因为它与常规的点击和双击事件模式不一致。建议修改此逻辑，使点击始终触发标准行为，同时为活跃项添加额外的回调：
- onClick={() => (active ? onActiveClick?.() : ctx?.handleClick(index))} + onClick={() => { + ctx?.handleClick(index); + if (active) onActiveClick?.(); + }}
122-129: 重构组件渲染逻辑提高了代码可维护性将渲染逻辑拆分为多个函数（
renderDualItem、renderIconAndTitle、renderTitle等），并根据direction属性选择不同的渲染方式，大大提高了代码的可读性和可维护性。同时支持了水平布局模式，使组件更加灵活。src/types/spec/tabbar/base.ts (3)
10-10: 增加了方向控制属性在
BaseTabbar接口中添加direction属性，使 Tabbar 组件支持不同的布局方向，提高了组件的灵活性和适应性。
16-18: 增强了属性类型定义的灵活性将
title、icon和value属性的类型定义扩展为支持函数形式，使这些属性可以根据激活状态动态渲染不同内容，大大提升了组件的表现力和定制化能力。
23-24: 新增方向和活跃点击事件属性在
BaseTabbarItem接口中添加了direction和onActiveClick属性，使每个选项卡都能够控制自己的布局方向并处理活跃状态下的点击事件，进一步提高了组件的可定制性。src/packages/tabbaritem/tabbaritem.taro.tsx (5)
38-38: 新增onActiveClick属性与 Web 版本保持一致Taro 版本也添加了
onActiveClick属性，确保了跨平台行为的一致性，便于开发者在不同平台上使用相同的 API。
55-59: 增加了对函数类型 props 的支持添加的
renderNodeWithActive辅助函数使组件能够根据激活状态动态渲染内容，与 Web 版本保持一致，确保了跨平台行为的统一性。
92-101: 针对鸿蒙系统优化了图标颜色处理
renderIcon函数中针对鸿蒙系统的差异做了特殊处理，通过React.cloneElement手动设置图标颜色，确保在不同系统下视觉效果一致，这是一个很好的兼容性处理。
131-131: 点击事件处理逻辑需要优化当前实现将活跃项的点击映射为
onActiveClick事件，而非活跃项的点击映射为ctx?.handleClick。这种设计可能会导致用户困惑，因为它与常规的点击交互模式不一致。建议修改此逻辑，使点击始终触发标准行为，同时为活跃项添加额外的回调：
- onClick={() => (active ? onActiveClick?.() : ctx?.handleClick(index))} + onClick={() => { + ctx?.handleClick(index); + if (active) onActiveClick?.(); + }}
134-141: 增强了组件的布局灵活性通过条件渲染，根据
direction属性和dot值选择不同的渲染方式，使组件支持水平和垂直两种布局模式，提高了组件的适应性和灵活性。src/packages/tabbar/doc.en-US.md (4)
21-69: 优化了文档的章节标题更新了多个演示部分的标题，使其更加准确地描述各个示例的功能和用途，提高了文档的清晰度和易用性。例如将"No Icon"改为"Only Text"，将"Custom Color"改为"With Controlled"等。
105-107: 更新了属性类型定义，增强了组件灵活性在文档中更新了
title、icon和value属性的类型定义，新增了函数类型(active: boolean) => ReactNode，使组件能够根据激活状态动态渲染不同内容，大大提升了组件的表现力。🧰 Tools
🪛 LanguageTool
[uncategorized] ~107-~107: The abbreviation “e.g.” (= for example) requires two periods.
Context: ...-| | value | value to show in Badge, eg number、charctor and custom content | `R...(E_G)
112-112: 添加了新属性的文档说明为新增的
onActiveClick属性添加了文档说明，清晰地解释了该属性的用途和使用场景，有助于开发者快速理解和使用这一新功能。
122-132: 更新了CSS变量的默认值调整了多个CSS变量的默认值，包括
--nutui-tabbar-height、--nutui-tabbar-text-font-size和--nutui-tabbar-text-margin-top，这些调整有助于改善组件的视觉效果和布局。
2 participants
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
样式
新功能