feat(Home): clicking the tab will back to top and refresh data on homepage (#419)

close #419

src/contentScripts/views/Home/Home.vue

@@ -23,6 +23,7 @@ const showSearchPageMode = ref<boolean>(false)
 const shouldMoveTabsUp = ref<boolean>(false)
 const tabContentLoading = ref<boolean>(false)
 const currentTabs = ref<HomeTab[]>([])
+const tabPageRef = ref()
 
 const gridLayoutIcons = computed((): GridLayoutIcon[] => {
   return [
@@ -98,6 +99,15 @@ onUnmounted(() => {
 })
 
 function handleChangeTab(tab: HomeTab) {
+  if (activatedPage.value === tab.page) {
+    handleBackToTop(settings.value.useSearchPageModeOnHomePage ? 510 : 0)
+
+    if (tabContentLoading.value)
+      return
+    tabPageRef.value && tabPageRef.value.initData()
+    return
+  }
+
   // When the content of a tab is loading, prevent switching to another tab.
   // Since `initPageAction()` within the tab replaces the `handleReachBottom` and `handlePageRefresh` functions.
   // Therefore, this will lead to a failure in refreshing the data of the current tab
@@ -228,6 +238,7 @@ function toggleTabContentLoading(loading: boolean) {
         <KeepAlive include="ForYou">
           <Component
             :is="pages[activatedPage]" :key="activatedPage"
+            ref="tabPageRef"
             :grid-layout="homePageGridLayout"
             @before-loading="toggleTabContentLoading(true)"
             @after-loading="toggleTabContentLoading(false)"

src/contentScripts/views/Home/components/Following.vue

@@ -30,8 +30,7 @@ const noMoreContent = ref<boolean>(false)
 const { handleReachBottom, handlePageRefresh } = useBewlyApp()
 
 onMounted(async () => {
-  for (let i = 0; i < 3; i++)
-    await getFollowedUsersVideos()
+  initData()
   initPageAction()
 })
 
@@ -46,23 +45,30 @@ function initPageAction() {
     if (noMoreContent.value)
       return
 
-    for (let i = 0; i < 3; i++)
-      await getFollowedUsersVideos()
+    getData()
   }
   handlePageRefresh.value = async () => {
     if (isLoading.value)
       return
 
-    offset.value = ''
-    updateBaseline.value = ''
-    videoList.length = 0
-    noMoreContent.value = false
-
-    for (let i = 0; i < 3; i++)
-      await getFollowedUsersVideos()
+    initData()
   }
 }
 
+async function initData() {
+  offset.value = ''
+  updateBaseline.value = ''
+  videoList.length = 0
+  noMoreContent.value = false
+
+  await getData()
+}
+
+async function getData() {
+  for (let i = 0; i < 3; i++)
+    await getFollowedUsersVideos()
+}
+
 async function getFollowedUsersVideos() {
   if (noMoreContent.value)
     return
@@ -120,6 +126,8 @@ async function getFollowedUsersVideos() {
 function jumpToLoginPage() {
   location.href = 'https://passport.bilibili.com/login'
 }
+
+defineExpose({ initData })
 </script>
 
 <template>

src/contentScripts/views/Home/components/ForYou.vue

@@ -41,16 +41,8 @@ const activatedVideo = ref<AppVideoItem | null>()
 const videoCardRef = ref(null)
 const dislikedVideoIds = ref<number[]>([])
 
-watch(() => settings.value.recommendationMode, (newValue) => {
-  videoList.length = 0
-  appVideoList.length = 0
-  if (newValue === 'web') {
-    getRecommendVideos()
-  }
-  else {
-    for (let i = 0; i < 3; i++)
-      getAppRecommendVideos()
-  }
+watch(() => settings.value.recommendationMode, () => {
+  initData()
 })
 
 onClickOutside(videoCardRef, () => {
@@ -62,13 +54,7 @@ onMounted(async () => {
   // otherwise the `settings.value.recommendationMode` value will be undefined
   // i have no idea to fix that...
   setTimeout(async () => {
-    if (settings.value.recommendationMode === 'web') {
-      getRecommendVideos()
-    }
-    else {
-      for (let i = 0; i < 3; i++)
-        await getAppRecommendVideos()
-    }
+    initData()
   }, 200)
 
   initPageAction()
@@ -78,6 +64,22 @@ onActivated(() => {
   initPageAction()
 })
 
+async function initData() {
+  videoList.length = 0
+  appVideoList.length = 0
+  await getData()
+}
+
+async function getData() {
+  if (settings.value.recommendationMode === 'web') {
+    getRecommendVideos()
+  }
+  else {
+    for (let i = 0; i < 3; i++)
+      await getAppRecommendVideos()
+  }
+}
+
 function initPageAction() {
   handleReachBottom.value = async () => {
     if (isLoading.value)
@@ -85,29 +87,14 @@ function initPageAction() {
     if (noMoreContent.value)
       return
 
-    if (settings.value.recommendationMode === 'web') {
-      getRecommendVideos()
-    }
-    else {
-      for (let i = 0; i < 3; i++)
-        await getAppRecommendVideos()
-    }
+    getData()
   }
 
   handlePageRefresh.value = async () => {
     if (isLoading.value)
       return
 
-    videoList.length = 0
-    appVideoList.length = 0
-    noMoreContent.value = false
-    if (settings.value.recommendationMode === 'web') {
-      await getRecommendVideos()
-    }
-    else {
-      for (let i = 0; i < 3; i++)
-        await getAppRecommendVideos()
-    }
+    initData()
   }
 }
 
@@ -231,6 +218,8 @@ function closeVideoOptions() {
 function jumpToLoginPage() {
   location.href = 'https://passport.bilibili.com/login'
 }
+
+defineExpose({ initData })
 </script>
 
 <template>

src/contentScripts/views/Home/components/Ranking.vue

@@ -72,10 +72,7 @@ const shouldMoveAsideUp = ref<boolean>(false)
 watch(() => activatedRankingType.value.id, () => {
   handleBackToTop(settings.value.useSearchPageModeOnHomePage ? 510 : 0)
 
-  if ('seasonType' in activatedRankingType.value)
-    getRankingPgc()
-  else
-    getRankingVideos()
+  initData()
 })
 
 onMounted(() => {
@@ -94,7 +91,7 @@ onMounted(() => {
     }
   })
 
-  getRankingVideos()
+  initData()
   initPageAction()
 })
 
@@ -104,14 +101,25 @@ onActivated(() => {
 
 function initPageAction() {
   handlePageRefresh.value = async () => {
-    videoList.length = 0
-    PgcList.length = 0
     if (isLoading.value)
       return
-    getRankingVideos()
+    initData()
   }
 }
 
+function initData() {
+  videoList.length = 0
+  PgcList.length = 0
+  getData()
+}
+
+function getData() {
+  if ('seasonType' in activatedRankingType.value)
+    getRankingPgc()
+  else
+    getRankingVideos()
+}
+
 onBeforeUnmount(() => {
   emitter.off('topBarVisibleChange')
 })
@@ -146,6 +154,8 @@ function getRankingPgc() {
       Object.assign(PgcList, response.result.list)
   }).finally(() => isLoading.value = false)
 }
+
+defineExpose({ initData })
 </script>
 
 <template>

src/contentScripts/views/Home/components/SubscribedSeries.vue

@@ -30,6 +30,30 @@ const noMoreContent = ref<boolean>(false)
 const noMoreContentWarning = ref<boolean>(false)
 const { handleReachBottom, handlePageRefresh } = useBewlyApp()
 
+onMounted(async () => {
+  initData()
+  initPageAction()
+})
+
+onActivated(() => {
+  initPageAction()
+})
+
+async function initData() {
+  offset.value = ''
+  updateBaseline.value = ''
+  momentList.length = 0
+  noMoreContent.value = false
+  noMoreContentWarning.value = false
+
+  await getData()
+}
+
+async function getData() {
+  for (let i = 0; i < 3; i++)
+    await getFollowedUsersVideos()
+}
+
 function initPageAction() {
   handleReachBottom.value = async () => {
     if (isLoading.value)
@@ -38,36 +62,17 @@ function initPageAction() {
       noMoreContentWarning.value = true
       return
     }
-    for (let i = 0; i < 3; i++)
-      await getFollowedUsersVideos()
+    getData()
   }
   handlePageRefresh.value = async () => {
     if (isLoading.value)
       return
-
-    offset.value = ''
-    updateBaseline.value = ''
-    momentList.length = 0
-    noMoreContent.value = false
-    noMoreContentWarning.value = false
     if (isLoading.value)
       return
-    for (let i = 0; i < 3; i++)
-      await getFollowedUsersVideos()
+    initData()
   }
 }
 
-onMounted(async () => {
-  for (let i = 0; i < 3; i++)
-    await getFollowedUsersVideos()
-
-  initPageAction()
-})
-
-onActivated(() => {
-  initPageAction()
-})
-
 async function getFollowedUsersVideos() {
   if (noMoreContent.value)
     return
@@ -125,6 +130,8 @@ async function getFollowedUsersVideos() {
 function jumpToLoginPage() {
   location.href = 'https://passport.bilibili.com/login'
 }
+
+defineExpose({ initData })
 </script>
 
 <template>

src/contentScripts/views/Home/components/Trending.vue

@@ -27,8 +27,7 @@ const pn = ref<number>(1)
 const { handleReachBottom, handlePageRefresh } = useBewlyApp()
 
 onMounted(async () => {
-  await getTrendingVideos()
-
+  await initData()
   initPageAction()
 })
 
@@ -36,16 +35,24 @@ onActivated(() => {
   initPageAction()
 })
 
+async function initData() {
+  videoList.length = 0
+  pn.value = 1
+  await getData()
+}
+
+async function getData() {
+  await getTrendingVideos()
+}
+
 function initPageAction() {
   handleReachBottom.value = async () => {
     if (!isLoading.value)
-      await getTrendingVideos()
+      await getData()
   }
 
   handlePageRefresh.value = async () => {
-    videoList.length = 0
-    pn.value = 1
-    await getTrendingVideos()
+    initData()
   }
 }
 
@@ -81,6 +88,8 @@ async function getTrendingVideos() {
     emit('afterLoading')
   }
 }
+
+defineExpose({ initData })
 </script>
 
 <template>