refactor(Tabs): Separate Tabs into Tabs and VerticalTabs #2699
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -1,26 +1,34 @@ | ||||||||||||||
| import React, { useState } from 'react' | ||||||||||||||
| import { Tabs } from '@nutui/nutui-react' | ||||||||||||||
|
|
||||||||||||||
| const Demo22 = () => { | ||||||||||||||
| const [tab11value, setTab11value] = useState<string | number>('0') | ||||||||||||||
| const [tab12value, setTab12value] = useState<string | number>('0') | ||||||||||||||
|
Comment on lines
+4
to
+6
There was a problem hiding this comment. 🛠️ Refactor suggestion 组件命名与状态管理需要改进 组件从 Demo17 重命名为 Demo22，但文件名仍然是 demo17.tsx，这可能会导致混淆。建议保持文件名与组件名的一致性。另外，状态变量的命名（tab11value, tab12value）不够语义化。 建议进行如下修改： -const Demo22 = () => {
- const [tab11value, setTab11value] = useState<string | number>('0')
- const [tab12value, setTab12value] = useState<string | number>('0')
+const Demo17 = () => {
+ const [largeTabValue, setLargeTabValue] = useState<string | number>('0')
+ const [smallTabValue, setSmallTabValue] = useState<string | number>('0')📝 Committable suggestion
Suggested change
|
||||||||||||||
| return ( | ||||||||||||||
| <> | ||||||||||||||
| <Tabs | ||||||||||||||
| value={tab11value} | ||||||||||||||
| onChange={(value) => { | ||||||||||||||
| setTab11value(value) | ||||||||||||||
| }} | ||||||||||||||
| style={{ '--nutui-tabs-titles-font-size': '20px' }} | ||||||||||||||
| > | ||||||||||||||
| <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane> | ||||||||||||||
| <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane> | ||||||||||||||
| <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane> | ||||||||||||||
| </Tabs> | ||||||||||||||
|
Comment on lines
9
to
+19
There was a problem hiding this comment. 🛠️ Refactor suggestion 建议增强标签页的可访问性和内容展示
建议按照以下方式修改： +const FONT_SIZES = {
+ large: '20px',
+ small: '12px',
+}
<Tabs
value={tab11value}
onChange={(value) => {
setTab11value(value)
}}
- style={{ '--nutui-tabs-titles-font-size': '20px' }}
+ style={{ '--nutui-tabs-titles-font-size': FONT_SIZES.large }}
+ role="tablist"
+ aria-label="大字号标签页示例"
>
- <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+ <Tabs.TabPane title="Tab 1" role="tabpanel" aria-label="标签页1">
+ 这是一个使用大字号的标签页示例内容
+ </Tabs.TabPane>
|
||||||||||||||
| <Tabs | ||||||||||||||
| value={tab12value} | ||||||||||||||
| onChange={(value) => { | ||||||||||||||
| setTab12value(value) | ||||||||||||||
| }} | ||||||||||||||
| style={{ '--nutui-tabs-titles-font-size': '12px' }} | ||||||||||||||
| > | ||||||||||||||
| <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane> | ||||||||||||||
| <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane> | ||||||||||||||
| <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane> | ||||||||||||||
Alex-huxiyang marked this conversation as resolved.
Show resolved
Hide resolved
Comment on lines
+20
to
+29
There was a problem hiding this comment. 🛠️ Refactor suggestion 建议重构重复的标签页代码 当前代码存在明显的重复，两个标签页组件的结构完全相同，仅字体大小不同。建议提取可重用的组件来减少代码重复。 建议创建一个可复用的标签页组件： interface CustomTabsProps {
value: string | number
onChange: (value: string | number) => void
fontSize: 'large' | 'small'
label: string
}
const CustomTabs: React.FC<CustomTabsProps> = ({ value, onChange, fontSize, label }) => (
<Tabs
value={value}
onChange={onChange}
style={{ '--nutui-tabs-titles-font-size': FONT_SIZES[fontSize] }}
role="tablist"
aria-label={label}
>
<Tabs.TabPane title="Tab 1" role="tabpanel">示例内容 1</Tabs.TabPane>
<Tabs.TabPane title="Tab 2" role="tabpanel">示例内容 2</Tabs.TabPane>
<Tabs.TabPane title="Tab 3" role="tabpanel">示例内容 3</Tabs.TabPane>
</Tabs>
)
Comment on lines
+20
to
+29
There was a problem hiding this comment. 🛠️ Refactor suggestion 第二个 Tabs 组件存在重复代码 两个 Tabs 组件的结构完全相同，只是字体大小不同。建议将重复的部分抽离为可复用的组件。 建议创建一个新的组件来处理这种重复的结构： interface CustomTabsProps {
value: string | number
onChange: (value: string | number) => void
fontSize: string
}
const CustomTabs: React.FC<CustomTabsProps> = ({ value, onChange, fontSize }) => (
<Tabs
value={value}
onChange={onChange}
style={{ '--nutui-tabs-titles-font-size': fontSize }}
>
<Tabs.TabPane title="Tab 1">
<div className="content">标签页内容 1</div>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2">
<div className="content">标签页内容 2</div>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 3">
<div className="content">标签页内容 3</div>
</Tabs.TabPane>
</Tabs>
) |
||||||||||||||
| </Tabs> | ||||||||||||||
| </> | ||||||||||||||
| ) | ||||||||||||||
| } | ||||||||||||||
| export default Demo22 | ||||||||||||||
|
There was a problem hiding this comment. 🛠️ Refactor suggestion 导出语句需要与组件名保持一致 如果采纳了之前的建议将组件改名为 Demo17，这里的导出语句也需要相应修改。 -export default Demo22
+export default Demo17📝 Committable suggestion
Suggested change
|
||||||||||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,49 @@ | ||
| import React, { useState } from 'react' | ||
| import { Tabs } from '@nutui/nutui-react' | ||
| import { Star } from '@nutui/icons-react' | ||
|
|
||
| const Demo23 = () => { | ||
|
Comment on lines
+3
to
+5
There was a problem hiding this comment. 💡 Codebase verification 组件命名不一致问题 文件名为
建议：
🔗 Analysis chain验证组件重命名的影响 组件从 Demo18 重命名为 Demo23 可能会影响其他文件中的引用。 🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# 检查是否有其他文件仍在引用 Demo18
rg "Demo18" --type tsx
Length of output: 50 Script: #!/bin/bash
# Search for Demo18 references in all files
rg "Demo18"
# Also search for Demo23 to understand the current usage
rg "Demo23"
# List all files in the demos directory to understand the structure
fd . "src/packages/tabs/demos"
Length of output: 1980 |
||
| const [tab7value, setTab7value] = useState('c1') | ||
| const list6 = [ | ||
| { | ||
| title: '自定义 1', | ||
| paneKey: 'c1', | ||
| icon: <Star />, | ||
| }, | ||
| { | ||
| title: '自定义 2', | ||
| paneKey: 'c2', | ||
| }, | ||
| { | ||
| title: '自定义 3', | ||
| paneKey: 'c3', | ||
| }, | ||
| ] | ||
| return ( | ||
| <> | ||
| <Tabs | ||
| value={tab7value} | ||
| title={() => { | ||
| return list6.map((item) => ( | ||
| <div | ||
| onClick={() => setTab7value(item.paneKey)} | ||
| className={`nut-tabs-titles-item ${tab7value === item.paneKey ? 'nut-tabs-titles-item-active' : ''}`} | ||
| key={item.paneKey} | ||
| > | ||
| {item.icon || null} | ||
| <span className="nut-tabs-titles-item-text">{item.title}</span> | ||
| <span className="nut-tabs-titles-item-line" /> | ||
| </div> | ||
Alex-huxiyang marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| )) | ||
| }} | ||
| > | ||
| {list6.map((item) => ( | ||
| <Tabs.TabPane key={item.paneKey} value={item.paneKey}> | ||
| {item.title} | ||
| </Tabs.TabPane> | ||
| ))} | ||
| </Tabs> | ||
| </> | ||
| ) | ||
| } | ||
|
Comment on lines
22
to
48
There was a problem hiding this comment. 🛠️ Refactor suggestion 建议优化渲染逻辑和性能 当前实现存在以下几个需要注意的地方：
const TabTitle: React.FC<{
item: TabItem;
isActive: boolean;
onClick: () => void;
}> = ({ item, isActive, onClick }) => (
<div
onClick={onClick}
className={`nut-tabs-titles-item ${isActive ? 'nut-tabs-titles-item-active' : ''}`}
>
{item.icon}
<span className="nut-tabs-titles-item-text">{item.title}</span>
<span className="nut-tabs-titles-item-line" />
</div>
);
const tabPanes = useMemo(() =>
list6.map((item) => (
<Tabs.TabPane key={item.paneKey} value={item.paneKey}>
{item.title}
</Tabs.TabPane>
)),
[list6]
); |
||
| export default Demo23 | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💡 Codebase verification
需要添加垂直标签页面的具体实现
根据验证结果，虽然在
app.config.ts中添加了页面配置，但是在packages/nutui-taro-demo/src/pages/verticaltabs/目录下尚未找到对应的页面实现文件。建议：
packages/nutui-taro-demo/src/pages/verticaltabs/目录下创建index.tsx文件VerticalTabs组件🔗 Analysis chain
新增垂直标签页面配置正确！
页面配置的位置合理，与现有的标签页面放在同一个导航子包中，保持了良好的组织结构。
请运行以下脚本验证新页面的实现：
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
Length of output: 190
Script:
Length of output: 1081
Script:
Length of output: 1112