Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: tabs 代码简化\修订纵向样式 #2948

Open
wants to merge 2 commits into
base: feat_v3.x
Choose a base branch
from

Conversation

xiaoyatong
Copy link
Collaborator

@xiaoyatong xiaoyatong commented Jan 16, 2025

🤔 这个变动的性质是?

  • 新特性提交
  • 日常 bug 修复
  • 站点、文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • TypeScript 定义更新
  • 包体积优化
  • 性能优化
  • 功能增强
  • 国际化改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他改动(是关于什么的改动?)

🔗 相关 Issue

💡 需求背景和解决方案

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • fork仓库代码是否为最新避免文件冲突
  • Files changed 没有 package.json lock 等无关文件

Summary by CodeRabbit

  • 新特性

    • 更新了多个演示文件中的标签页标题,将"Tab 1"改为"Tab longitem"
    • 优化了标签页组件的样式和渲染逻辑
  • 样式调整

    • 修改了标签页组件的CSS样式,调整了内边距和文本显示方式
  • 代码重构

    • 简化了标签页组件的状态管理和条件渲染逻辑
    • 优化了代码的可读性和类型安全性
  • 性能优化

    • 精简了组件的渲染和事件处理流程

Copy link

coderabbitai bot commented Jan 16, 2025

概述

演练

这个拉取请求包含了对多个文件的修改,主要涉及标签页(Tabs)和标签窗格(TabPane)组件的演示和样式。修改的重点是将第一个标签的标题从"Tab 1"更改为"Tab longitem",并对一些组件的渲染逻辑和样式进行了细微的优化。这些更改主要是cosmetic的,不会影响组件的核心功能。

变更

文件路径 变更摘要
src/packages/tabpane/*.tsx 简化条件渲染逻辑,使用逻辑与(&&)运算符
src/packages/tabs/demos/h5/*.tsx 将第一个标签标题从"Tab 1"更改为"Tab longitem"
src/packages/tabs/demos/taro/*.tsx 将第一个标签标题从"Tab 1"更改为"Tab longitem"
src/packages/tabs/tabs.scss 调整标签样式,修改内边距和文本溢出处理
src/packages/tabs/tabs.tsx 重构状态管理和渲染逻辑,优化类型安全性

可能相关的PR

建议标签

size/M, 3.x

建议审阅者

  • oasis-cloud

诗歌

🐰 标签跳舞,文字轻盈
"Tab 1"变身"longitem"
代码如诗,优雅飞翔
兔子微笑,改动悄然
用心编织,技艺精良 🌈


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?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions github-actions bot added the 3.x label Jan 16, 2025
Copy link

codecov bot commented Jan 16, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 85.58%. Comparing base (96a4da5) to head (566fac5).

Additional details and impacted files
@@              Coverage Diff              @@
##           feat_v3.x    #2948      +/-   ##
=============================================
- Coverage      85.59%   85.58%   -0.02%     
=============================================
  Files            277      277              
  Lines          18158    18133      -25     
  Branches        2760     2754       -6     
=============================================
- Hits           15543    15519      -24     
+ Misses          2610     2609       -1     
  Partials           5        5              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (8)
src/packages/tabpane/tabpane.tsx (1)

40-40: 代码简化建议

代码变更使用 && 运算符确实让代码更简洁了,但建议考虑使用更明确的条件渲染方式来提高代码的可读性。

建议考虑以下写法:

- return children && <div className={classes}>{!disabled && children}</div>
+ return children ? <div className={classes}>{!disabled && children}</div> : null

这样可以:

  • 更清晰地表达条件渲染的意图
  • 避免在某些边界情况下可能出现的渲染问题(比如 children0 的情况)
  • 保持与 React 条件渲染的常见模式一致
src/packages/tabpane/tabpane.taro.tsx (1)

41-41: 保持与 Web 版本一致的代码风格

该改动与 Web 版本保持一致,使用了相同的简化方式。建议与 Web 版本采用相同的优化方案。

建议采用相同的改进方案:

- return children && <View className={classes}>{!disabled && children}</View>
+ return children ? <View className={classes}>{!disabled && children}</View> : null

原因:

  • 保持 Web 版本和 Taro 版本的代码风格一致性
  • 提高代码可读性和可维护性
  • 确保在不同平台上有一致的渲染行为
src/packages/tabs/demos/h5/demo13.tsx (2)

16-25: 建议优化示例内容的展示方式

当前的实现方式存在以下可以改进的地方:

  1. 重复的内容可以使用循环来生成,提高代码的可维护性
  2. 建议添加 aria-label 属性以提升无障碍访问体验

建议按照以下方式重构代码:

-        <Tabs.TabPane title="Tab longitem" value="0">
-          <p>Tab longitem</p>
-          <p>Tab longitem</p>
-          <p>Tab longitem</p>
-          <p>Tab longitem</p>
-          <p>Tab longitem</p>
-          <p>Tab longitem</p>
-          <p>Tab longitem</p>
-          <p>Tab longitem</p>
-          <p>Tab longitem</p>
+        <Tabs.TabPane 
+          title="Tab longitem" 
+          value="0"
+          aria-label="长文本标签页示例"
+        >
+          {Array(9).fill(null).map((_, index) => (
+            <p key={index}>Tab longitem</p>
+          ))}
         </Tabs.TabPane>

Line range hint 8-14: 建议改进样式实现方式

当前的样式实现存在以下问题:

  1. 使用内联样式不利于样式的统一管理和维护
  2. 硬编码的 z-index 值可能会导致层级管理困难

建议:

  1. 将样式迁移到独立的样式文件中
  2. 使用 CSS 变量来管理 z-index 值,便于统一维护和调整
+// 在样式文件中定义
+:root {
+  --nutui-tabs-zindex: 11;
+}

-      <Tabs
-        value={tabvalue}
-        style={{ position: 'relative', zIndex: 11 }}
-        tabStyle={{ position: 'sticky', top: '0px', zIndex: 11 }}
+      <Tabs
+        value={tabvalue}
+        className="demo-tabs"
+        tabClassName="demo-tabs-header"
src/packages/tabs/tabs.tsx (1)

177-180: 简化了标签切换逻辑

通过反转禁用状态的检查,使代码更加清晰和直观。建议使用可选链操作符进一步优化代码:

-    onClick && onClick(item.value)
-    if (!item.disabled) {
+    onClick?.(item.value)
+    if (!item.disabled) {
🧰 Tools
🪛 Biome (1.9.4)

[error] 177-177: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

src/packages/tabs/tabs.taro.tsx (1)

227-231: 优化了标签切换处理

与 Web 版本保持一致的逻辑处理方式,建议使用可选链操作符优化代码:

-    onClick && onClick(item.value)
-    if (!item.disabled) {
+    onClick?.(item.value)
+    if (!item.disabled) {
🧰 Tools
🪛 Biome (1.9.4)

[error] 229-230: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

src/packages/tabs/demos/taro/demo12.tsx (1)

Line range hint 6-6: 建议完善 TODO 注释

当前的 TODO 注释 "鸿蒙支持的不好" 过于简略。建议详细说明具体的兼容性问题和可能的解决方案。

建议更新为类似这样的注释:

- // TODO:鸿蒙支持的不好
+ // TODO: 鸿蒙系统兼容性问题
+ // 1. 具体问题描述
+ // 2. 可能的解决方案
+ // 3. 相关issue链接
src/packages/tabs/tabs.scss (1)

216-219: 垂直标签样式优化建议

当前样式修改存在以下问题和建议:

  1. white-space: break-spaces 虽然解决了文本换行问题,但可能导致不一致的标签高度。
  2. 固定宽度 90px 可能不够灵活,建议考虑使用相对单位。
  3. 建议添加文本溢出处理机制。

建议修改为:

.nut-tabs-ellipsis {
  white-space: break-spaces;
  padding-left: 6px;
- width: 90px;
+ width: min(90px, 30%);
  line-height: $font-size-base;
+ max-height: 2.5em;
+ overflow-y: auto;
}
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 96a4da5 and 566fac5.

📒 Files selected for processing (39)
  • src/packages/tabpane/tabpane.taro.tsx (1 hunks)
  • src/packages/tabpane/tabpane.tsx (1 hunks)
  • src/packages/tabs/demos/h5/demo1.tsx (1 hunks)
  • src/packages/tabs/demos/h5/demo10.tsx (1 hunks)
  • src/packages/tabs/demos/h5/demo11.tsx (1 hunks)
  • src/packages/tabs/demos/h5/demo12.tsx (2 hunks)
  • src/packages/tabs/demos/h5/demo13.tsx (1 hunks)
  • src/packages/tabs/demos/h5/demo14.tsx (1 hunks)
  • src/packages/tabs/demos/h5/demo2.tsx (1 hunks)
  • src/packages/tabs/demos/h5/demo20.tsx (1 hunks)
  • src/packages/tabs/demos/h5/demo21.tsx (1 hunks)
  • src/packages/tabs/demos/h5/demo22.tsx (2 hunks)
  • src/packages/tabs/demos/h5/demo3.tsx (1 hunks)
  • src/packages/tabs/demos/h5/demo4.tsx (1 hunks)
  • src/packages/tabs/demos/h5/demo5.tsx (1 hunks)
  • src/packages/tabs/demos/h5/demo6.tsx (1 hunks)
  • src/packages/tabs/demos/h5/demo7.tsx (1 hunks)
  • src/packages/tabs/demos/h5/demo8.tsx (1 hunks)
  • src/packages/tabs/demos/h5/demo9.tsx (1 hunks)
  • src/packages/tabs/demos/taro/demo1.tsx (1 hunks)
  • src/packages/tabs/demos/taro/demo10.tsx (1 hunks)
  • src/packages/tabs/demos/taro/demo11.tsx (1 hunks)
  • src/packages/tabs/demos/taro/demo12.tsx (2 hunks)
  • src/packages/tabs/demos/taro/demo13.tsx (1 hunks)
  • src/packages/tabs/demos/taro/demo14.tsx (1 hunks)
  • src/packages/tabs/demos/taro/demo2.tsx (1 hunks)
  • src/packages/tabs/demos/taro/demo20.tsx (1 hunks)
  • src/packages/tabs/demos/taro/demo21.tsx (1 hunks)
  • src/packages/tabs/demos/taro/demo22.tsx (2 hunks)
  • src/packages/tabs/demos/taro/demo3.tsx (1 hunks)
  • src/packages/tabs/demos/taro/demo4.tsx (1 hunks)
  • src/packages/tabs/demos/taro/demo5.tsx (1 hunks)
  • src/packages/tabs/demos/taro/demo6.tsx (1 hunks)
  • src/packages/tabs/demos/taro/demo7.tsx (1 hunks)
  • src/packages/tabs/demos/taro/demo8.tsx (1 hunks)
  • src/packages/tabs/demos/taro/demo9.tsx (1 hunks)
  • src/packages/tabs/tabs.scss (1 hunks)
  • src/packages/tabs/tabs.taro.tsx (8 hunks)
  • src/packages/tabs/tabs.tsx (5 hunks)
✅ Files skipped from review due to trivial changes (30)
  • src/packages/tabs/demos/taro/demo5.tsx
  • src/packages/tabs/demos/h5/demo1.tsx
  • src/packages/tabs/demos/taro/demo4.tsx
  • src/packages/tabs/demos/h5/demo3.tsx
  • src/packages/tabs/demos/taro/demo8.tsx
  • src/packages/tabs/demos/taro/demo6.tsx
  • src/packages/tabs/demos/h5/demo21.tsx
  • src/packages/tabs/demos/taro/demo9.tsx
  • src/packages/tabs/demos/h5/demo8.tsx
  • src/packages/tabs/demos/h5/demo5.tsx
  • src/packages/tabs/demos/h5/demo9.tsx
  • src/packages/tabs/demos/h5/demo4.tsx
  • src/packages/tabs/demos/taro/demo10.tsx
  • src/packages/tabs/demos/taro/demo1.tsx
  • src/packages/tabs/demos/h5/demo2.tsx
  • src/packages/tabs/demos/h5/demo7.tsx
  • src/packages/tabs/demos/taro/demo2.tsx
  • src/packages/tabs/demos/taro/demo7.tsx
  • src/packages/tabs/demos/h5/demo10.tsx
  • src/packages/tabs/demos/h5/demo11.tsx
  • src/packages/tabs/demos/taro/demo22.tsx
  • src/packages/tabs/demos/h5/demo20.tsx
  • src/packages/tabs/demos/taro/demo21.tsx
  • src/packages/tabs/demos/h5/demo14.tsx
  • src/packages/tabs/demos/h5/demo22.tsx
  • src/packages/tabs/demos/taro/demo20.tsx
  • src/packages/tabs/demos/h5/demo6.tsx
  • src/packages/tabs/demos/h5/demo12.tsx
  • src/packages/tabs/demos/taro/demo14.tsx
  • src/packages/tabs/demos/taro/demo3.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
src/packages/tabs/tabs.taro.tsx

[error] 229-230: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

🔇 Additional comments (7)
src/packages/tabs/demos/taro/demo13.tsx (1)

17-17: 标签文本更新符合预期!

标签文本从 "Tab 1" 更新为 "Tab longitem" 的修改保持了与其他演示文件的一致性。

Also applies to: 21-21

src/packages/tabs/tabs.tsx (2)

78-80: 改进了类型安全性

nav 参数的类型从 any 更新为 HTMLDivElement,提高了类型安全性。


232-240: 优化了子组件属性传递

使用 React.cloneElement 更新子组件属性的方式更加规范,特别是自动高度类名的处理逻辑更加清晰。

src/packages/tabs/tabs.taro.tsx (2)

166-170: 简化了滚动动画逻辑

滚动方向处理逻辑更加简洁,直接使用状态更新替代了复杂的动画计算。


302-310: 改进了子组件属性更新逻辑

使用 React.cloneElement 处理子组件属性的方式更加规范,自动高度的处理逻辑更加清晰。

src/packages/tabs/demos/taro/demo11.tsx (1)

14-15: 示例文本更新保持一致性!

将标签文本从 "Tab 1" 更新为 "Tab longitem" 的修改与其他示例保持一致。

src/packages/tabs/demos/taro/demo12.tsx (1)

19-19: 标签文本更新使演示更实用

将标签文本从 "Tab 1" 更改为 "Tab longitem" 有助于展示组件处理长文本的能力。这种更改使演示更加实用和贴近实际场景。

Also applies to: 33-33

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant