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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
|
|
||
| const subPackages = [ | ||
| { | ||
| "root": "base", | ||
| "pages": [ | ||
| "pages/button/index", | ||
| "pages/cell/index", | ||
| "pages/configprovider/index", | ||
| "pages/icon/index", | ||
| "pages/image/index", | ||
| "pages/overlay/index" | ||
| ] | ||
| }, | ||
| { | ||
| "root": "layout", | ||
| "pages": [ | ||
| "pages/divider/index", | ||
| "pages/grid/index", | ||
| "pages/layout/index", | ||
| "pages/safearea/index", | ||
| "pages/space/index", | ||
| "pages/sticky/index" | ||
| ] | ||
| }, | ||
| { | ||
| "root": "nav", | ||
| "pages": [ | ||
| "pages/backtop/index", | ||
| "pages/elevator/index", | ||
| "pages/fixednav/index", | ||
| "pages/hoverbutton/index", | ||
| "pages/navbar/index", | ||
| "pages/sidenavbar/index", | ||
| "pages/tabbar/index", | ||
| "pages/tabs/index", | ||
| "pages/verticaltabs/index" | ||
|
Comment on lines
+35
to
+36
There was a problem hiding this comment. 💡 Codebase verification 需要创建垂直选项卡示例页面 在app.config.ts中添加了路由配置，但是对应的页面文件夹和组件尚未创建。请注意：
🔗 Analysis chain页面路由配置正确添加 新增的垂直选项卡页面路由配置符合现有规范，且放置在正确的导航组件子包中。 执行以下脚本以验证页面路由的唯一性： 🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# 描述：检查是否存在重复的页面路由配置
# 预期结果：不应该有重复的页面路由
# 搜索所有可能包含页面路由配置的文件
rg "pages/verticaltabs/index"
Length of output: 105 Script: #!/bin/bash
# 检查垂直选项卡页面文件是否存在
fd "index\.(tsx?|jsx?)" -p packages/nutui-taro-demo/src/pages/verticaltabs/
# 检查其他配置文件中是否有相关路由
rg -g "*.config.*" "verticaltabs"
# 检查是否有相关的组件引用
rg "VerticalTabs" -A 2
Length of output: 9849 Script: #!/bin/bash
# 检查demo页面文件是否存在
fd -p "demo" packages/nutui-taro-demo/src/pages/verticaltabs/
# 检查是否有相关的路由配置文件
fd -p "index.config" packages/nutui-taro-demo/src/pages/verticaltabs/
# 检查pages目录结构
fd -t d "pages" packages/nutui-taro-demo/src/
Length of output: 485 |
||
| ] | ||
| }, | ||
| { | ||
| "root": "dentry", | ||
| "pages": [ | ||
| "pages/address/index", | ||
| "pages/calendar/index", | ||
| "pages/calendarcard/index", | ||
| "pages/cascader/index", | ||
| "pages/checkbox/index", | ||
| "pages/datepicker/index", | ||
| "pages/form/index", | ||
| "pages/input/index", | ||
| "pages/inputnumber/index" | ||
| ] | ||
| }, | ||
| { | ||
| "root": "dataentry", | ||
| "pages": [ | ||
| "pages/menu/index", | ||
| "pages/numberkeyboard/index", | ||
| "pages/picker/index", | ||
| "pages/radio/index", | ||
| "pages/range/index", | ||
| "pages/rate/index", | ||
| "pages/searchbar/index", | ||
| "pages/shortpassword/index", | ||
| "pages/signature/index", | ||
| "pages/switch/index", | ||
| "pages/textarea/index", | ||
| "pages/uploader/index" | ||
| ] | ||
| }, | ||
| { | ||
| "root": "feedback", | ||
| "pages": [ | ||
| "pages/actionsheet/index", | ||
| "pages/badge/index", | ||
| "pages/dialog/index", | ||
| "pages/drag/index", | ||
| "pages/empty/index", | ||
| "pages/infiniteloading/index", | ||
| "pages/loading/index", | ||
| "pages/noticebar/index", | ||
| "pages/notify/index", | ||
| "pages/popover/index", | ||
| "pages/popup/index", | ||
| "pages/pulltorefresh/index", | ||
| "pages/resultpage/index", | ||
| "pages/skeleton/index", | ||
| "pages/swipe/index", | ||
| "pages/toast/index" | ||
| ] | ||
| }, | ||
| { | ||
| "root": "exhibition", | ||
| "pages": [ | ||
| "pages/animate/index", | ||
| "pages/animatingnumbers/index", | ||
| "pages/avatar/index", | ||
| "pages/circleprogress/index", | ||
| "pages/collapse/index", | ||
| "pages/countdown/index", | ||
| "pages/ellipsis/index", | ||
| "pages/imagepreview/index", | ||
| "pages/indicator/index", | ||
| "pages/pagination/index", | ||
| "pages/price/index", | ||
| "pages/progress/index", | ||
| "pages/steps/index", | ||
| "pages/swiper/index", | ||
| "pages/table/index", | ||
| "pages/tag/index", | ||
| "pages/tour/index", | ||
| "pages/video/index", | ||
| "pages/virtuallist/index" | ||
| ] | ||
| }, | ||
| { | ||
| "root": "business", | ||
| "pages": [ | ||
| "pages/avatarcropper/index", | ||
| "pages/barrage/index", | ||
| "pages/card/index", | ||
| "pages/timeselect/index", | ||
| "pages/trendarrow/index", | ||
| "pages/watermark/index" | ||
| ] | ||
| } | ||
| ]; | ||
|
|
||
| export default defineAppConfig({ | ||
| pages: ['pages/index/index'], | ||
| subPackages, | ||
| window: { | ||
| backgroundTextStyle: 'light', | ||
| navigationBarBackgroundColor: '#fff', | ||
| navigationBarTitleText: 'NutUI-React', | ||
| navigationBarTextStyle: 'black' | ||
| }, | ||
| components: ['pages/index/index', ...(subPackages.map(subPackage => { | ||
| return subPackage.pages.map(page => `${subPackage.root}/${page}`) | ||
| }).flat())] | ||
| }) | ||
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') | ||||||
oasis-cloud marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
| 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> | ||||||
oasis-cloud marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
| <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
|
||||||
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