feat: custom home tab (#314)

* feat: custom home tab

* fix: init home tab

* fix: init homePageTabVisibilityList

* fix: delete default page opions

* fix: change text and reset

---------

Co-authored-by: pengyunfei <pengyunfei@360.cn>
This commit is contained in:
cloudflypeng
2024-02-25 19:16:23 +08:00
committed by GitHub
parent 641f87e0ec
commit 1a5c7cecea
6 changed files with 137 additions and 24 deletions

View File

@@ -23,35 +23,57 @@ const showSearchPageMode = ref<boolean>(false)
const shouldMoveTabsUp = ref<boolean>(false)
const tabContentLoading = ref<boolean>(false)
const tabs = computed((): HomeTab[] => {
return [
{
label: t('home.for_you'),
value: HomeSubPage.ForYou,
},
{
label: t('home.following'),
value: HomeSubPage.Following,
},
{
label: t('home.subscribed_series'),
value: HomeSubPage.SubscribedSeries,
},
{
label: t('home.trending'),
value: HomeSubPage.Trending,
},
{
label: t('home.ranking'),
value: HomeSubPage.Ranking,
},
]
})
const tabs = ref<HomeTab[]>([])
const defaultTabs = [
{
label: t('home.for_you'),
value: HomeSubPage.ForYou,
},
{
label: t('home.following'),
value: HomeSubPage.Following,
},
{
label: t('home.subscribed_series'),
value: HomeSubPage.SubscribedSeries,
},
{
label: t('home.trending'),
value: HomeSubPage.Trending,
},
{
label: t('home.ranking'),
value: HomeSubPage.Ranking,
},
]
watch(() => activatedPage.value, () => {
handleBackToTop(settings.value.useSearchPageModeOnHomePage ? 510 : 0)
})
// use Json stringify to watch the changes of the array item properties
watch(() => JSON.stringify(settings.value.homePageTabVisibilityList), () => {
tabs.value = computeTabs()
})
function computeTabs() {
// if homePageTabVisibilityList not fresh , set it to default
if (!settings.value.homePageTabVisibilityList.length || settings.value.homePageTabVisibilityList.length !== defaultTabs.length)
settings.value.homePageTabVisibilityList = defaultTabs.map(tab => ({ page: tab.value, visible: true }))
const targetTabs: HomeTab[] = []
for (const tab of settings.value.homePageTabVisibilityList) {
tab.visible && targetTabs.push({
label: (defaultTabs.find(defaultTab => defaultTab.value === tab.page) || {})?.label || tab.page,
value: tab.page,
})
}
return targetTabs
}
onMounted(() => {
showSearchPageMode.value = true
emitter.off('topBarVisibleChange')
@@ -69,6 +91,9 @@ onMounted(() => {
shouldMoveTabsUp.value = true
}
})
tabs.value = computeTabs()
activatedPage.value = tabs.value[0].value
})
onUnmounted(() => {