From 91418521f314385f00053abe3cd1431da759a44e Mon Sep 17 00:00:00 2001
From: starknt <1431880400@qq.com>
Date: Thu, 11 Jan 2024 16:38:11 +0800
Subject: [PATCH 01/45] refactor: improve components load method, and improve
 provide `app`

---
 src/_locales/cmn-CN.yml                       |  1 +
 src/_locales/cmn-TW.yml                       |  1 +
 src/_locales/en.yml                           |  1 +
 src/_locales/jyut.yml                         |  1 +
 src/components/OverlayScrollbarsComponent.ts  |  4 ++
 src/components/Settings/Settings.vue          | 20 ++++---
 src/components/TopBar/TopBar.vue              |  4 +-
 src/composables/useAppProvider.ts             | 20 +++++++
 src/contentScripts/views/App.vue              | 53 ++++++++++---------
 .../views/Favorites/Favorites.vue             | 16 +++---
 src/contentScripts/views/History/History.vue  | 16 +++---
 src/contentScripts/views/Home/Home.vue        | 26 +++++----
 .../views/Home/components/Following.vue       | 45 ++++++++++++----
 .../views/Home/components/ForYou.vue          | 45 ++++++++++------
 .../views/Home/components/Ranking.vue         | 18 ++++++-
 .../Home/components/SubscribedSeries.vue      | 46 ++++++++++++----
 .../views/Home/components/Trending.vue        | 25 ++++++---
 .../views/WatchLater/WatchLater.vue           | 15 +++---
 src/logic/common-setup.ts                     |  2 -
 vite.config.ts                                |  2 +
 20 files changed, 240 insertions(+), 121 deletions(-)
 create mode 100644 src/components/OverlayScrollbarsComponent.ts
 create mode 100644 src/composables/useAppProvider.ts

diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml
index c21f728b..a2059afe 100644
--- a/src/_locales/cmn-CN.yml
+++ b/src/_locales/cmn-CN.yml
@@ -23,6 +23,7 @@ common:
   disable: 禁用
   refresh: 刷新
   reset: 重置
+  no_more_content: 没有更多内容了
 settings:
   title: 设置
 
diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml
index d20bb4d1..6cc62165 100644
--- a/src/_locales/cmn-TW.yml
+++ b/src/_locales/cmn-TW.yml
@@ -23,6 +23,7 @@ common:
   disable: 停用
   refresh: 重新整理
   reset: 重置
+  no_more_content: 沒有更多內容了
 settings:
   title: 設定
 
diff --git a/src/_locales/en.yml b/src/_locales/en.yml
index b697cbcb..5d8be5b0 100644
--- a/src/_locales/en.yml
+++ b/src/_locales/en.yml
@@ -23,6 +23,7 @@ common:
   disable: Disable
   refresh: Refresh
   reset: Reset
+  no_more_content: No more content
 settings:
   title: Settings
 
diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml
index 2a255b03..d00adfef 100644
--- a/src/_locales/jyut.yml
+++ b/src/_locales/jyut.yml
@@ -23,6 +23,7 @@ common:
   disable: 閂埋
   refresh: 重新整理
   reset: 重置
+  no_more_content: 沒有更多內容了
 settings:
   title: 設定
 
diff --git a/src/components/OverlayScrollbarsComponent.ts b/src/components/OverlayScrollbarsComponent.ts
new file mode 100644
index 00000000..338ec5ad
--- /dev/null
+++ b/src/components/OverlayScrollbarsComponent.ts
@@ -0,0 +1,4 @@
+export default defineAsyncComponent(async () => {
+  const { OverlayScrollbarsComponent } = await import('overlayscrollbars-vue')
+  return OverlayScrollbarsComponent
+})
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 55f4f7dd..181b0185 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -1,12 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { Icon } from '@iconify/vue'
-import General from './components/General.vue'
-import Appearance from './components/Appearance.vue'
-import SearchPage from './components/SearchPage.vue'
-import Home from './components/Home.vue'
-import Compatibility from './components/Compatibility.vue'
-import About from './components/About.vue'
+
 import type { MenuItem } from './types'
 import { MenuType } from './types'
 import { settings } from '~/logic'
@@ -15,7 +10,14 @@ const emit = defineEmits(['close'])
 
 const { t } = useI18n()
 
-const settingsMenu = { General, Appearance, SearchPage, Home, Compatibility, About }
+const settingsMenu = {
+  [MenuType.General]: defineAsyncComponent(() => import('./components/General.vue')),
+  [MenuType.Appearance]: defineAsyncComponent(() => import('./components/Appearance.vue')),
+  [MenuType.SearchPage]: defineAsyncComponent(() => import('./components/SearchPage.vue')),
+  [MenuType.Home]: defineAsyncComponent(() => import('./components/Home.vue')),
+  [MenuType.Compatibility]: defineAsyncComponent(() => import('./components/Compatibility.vue')),
+  [MenuType.About]: defineAsyncComponent(() => import('./components/About.vue')),
+}
 const activatedMenuItem = ref<MenuType>(MenuType.General)
 const title = ref<string>(t('settings.title'))
 const preventCloseSettings = ref<boolean>(false)
@@ -194,7 +196,9 @@ function setCurrentTitle() {
             <!-- <div h-80px mt--8 /> -->
 
             <Transition name="page-fade">
-              <Component :is="settingsMenu[activatedMenuItem]" />
+              <KeepAlive>
+                <Component :is="settingsMenu[activatedMenuItem]" :key="activatedMenuItem" />
+              </KeepAlive>
             </Transition>
           </main>
         </OverlayScrollbarsComponent>
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index c737e27f..732a3c56 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -10,7 +10,6 @@ import HistoryPop from './components/HistoryPop.vue'
 import { getUserID, isHomePage } from '~/utils/main'
 import { settings } from '~/logic'
 import emitter from '~/utils/mitt'
-import type { AppPage } from '~/enums/appEnums'
 
 // import { useTopBarStore } from '~/stores/topBarStore'
 
@@ -33,8 +32,7 @@ interface Props {
 //   return topBarStore.topBarItems
 // })
 
-const activatedPage = inject('activatedPage') as Ref<AppPage>
-const scrollbarRef = inject('scrollbarRef') as Ref
+const { activatedPage, scrollbarRef } = useBewlyApp()
 
 const mid = getUserID() || ''
 const userInfo = reactive<UserInfo | NonNullable<unknown>>({}) as UnwrapNestedRefs<UserInfo>
diff --git a/src/composables/useAppProvider.ts b/src/composables/useAppProvider.ts
new file mode 100644
index 00000000..794c5ba3
--- /dev/null
+++ b/src/composables/useAppProvider.ts
@@ -0,0 +1,20 @@
+import type { Ref } from 'vue'
+import type { AppPage } from '~/enums/appEnums'
+
+export interface BewlyAppProvider {
+  activatedPage: Ref<AppPage>
+  scrollbarRef: Ref<any>
+  mainAppRef: Ref<any>
+  handleReachBottom: Ref<(() => void) | undefined>
+  handlePageRefresh: Ref<(() => void) | undefined>
+  handleBackToTop: (targetScrollTop: number) => void
+}
+
+export function useBewlyApp(): BewlyAppProvider {
+  const provider = inject<BewlyAppProvider>('BEWLY_APP')
+
+  if (import.meta.env.DEV && !provider)
+    throw new Error('AppProvider is not injected')
+
+  return provider!
+}
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 0bf8ca8f..cecaf8d8 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -1,28 +1,32 @@
 <script setup lang="ts">
-import { useToggle } from '@vueuse/core'
+import { useThrottleFn, useToggle } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import browser from 'webextension-polyfill'
 import type { Ref } from 'vue'
 
-import Home from './Home/Home.vue'
-import Search from './Search/Search.vue'
-import Anime from './Anime/Anime.vue'
-import History from './History/History.vue'
-import WatchLater from './WatchLater/WatchLater.vue'
-import Favorites from './Favorites/Favorites.vue'
 import { accessKey, settings } from '~/logic'
 import { AppPage, LanguageType } from '~/enums/appEnums'
 import { getUserID, hexToRGBA, isHomePage, smoothScrollToTop } from '~/utils/main'
-import emitter from '~/utils/mitt'
+import type { BewlyAppProvider } from '~/composables/useAppProvider'
 
 const activatedPage = ref<AppPage>(settings.value.dockItemVisibilityList.find(e => e.visible === true)?.page ?? AppPage.Home)
 const { locale } = useI18n()
 const [showSettings, toggleSettings] = useToggle(false)
-const pages = { Home, Search, Anime, History, WatchLater, Favorites }
+const pages = {
+  [AppPage.Home]: defineAsyncComponent(() => import('./Home/Home.vue')),
+  [AppPage.Search]: defineAsyncComponent(() => import('./Search/Search.vue')),
+  [AppPage.Anime]: defineAsyncComponent(() => import('./Anime/Anime.vue')),
+  [AppPage.History]: defineAsyncComponent(() => import('./History/History.vue')),
+  [AppPage.WatchLater]: defineAsyncComponent(() => import('./WatchLater/WatchLater.vue')),
+  [AppPage.Favorites]: defineAsyncComponent(() => import('./Favorites/Favorites.vue')),
+}
 const mainAppRef = ref<HTMLElement>() as Ref<HTMLElement>
 const scrollbarRef = ref()
 const showTopBarMask = ref<boolean>(false)
-const dynamicComponentKey = ref<string>(`dynamicComponent${Number(new Date())}`)
+const handlePageRefresh = ref<() => void>()
+const handleReachBottom = ref<() => void>()
+const handleThrottledPageRefresh = useThrottleFn(() => handlePageRefresh.value?.(), 500)
+const handleThrottledReachBottom = useThrottleFn(() => handleReachBottom.value?.(), 500)
 const topBarRef = ref()
 
 const isVideoPage = computed(() => {
@@ -123,7 +127,7 @@ function changeActivatePage(pageName: AppPage) {
   if (activatedPage.value === pageName) {
     if (activatedPage.value !== AppPage.Search) {
       if (scrollTop === 0)
-        handleRefresh()
+        handleThrottledPageRefresh()
       else
         handleBackToTop()
     }
@@ -198,12 +202,6 @@ function setAppThemeColor() {
     document.documentElement.style.setProperty(`--bew-theme-color-${i + 1}0`, hexToRGBA(settings.value.themeColor, i * 0.1 + 0.1))
 }
 
-function handleRefresh() {
-  emitter.emit('pageRefresh')
-  if (activatedPage.value === AppPage.Anime)
-    dynamicComponentKey.value = `dynamicComponent${Number(new Date())}`
-}
-
 function handleBackToTop(targetScrollTop = 0 as number) {
   const osInstance = scrollbarRef.value?.osInstance()
 
@@ -229,17 +227,20 @@ function handleOsScroll() {
     showTopBarMask.value = true
 
   if (clientHeight + scrollTop >= scrollHeight - 20)
-    emitter.emit('reachBottom')
+    handleThrottledReachBottom()
 
   if (isHomePage())
     topBarRef.value?.handleScroll()
 }
 
-provide('handleBackToTop', handleBackToTop)
-provide('handleRefresh', handleRefresh)
-provide('activatedPage', activatedPage)
-provide('scrollbarRef', scrollbarRef)
-provide('mainAppRef', mainAppRef)
+provide<BewlyAppProvider>('BEWLY_APP', {
+  activatedPage,
+  mainAppRef,
+  scrollbarRef,
+  handleBackToTop,
+  handlePageRefresh,
+  handleReachBottom,
+})
 </script>
 
 <template>
@@ -312,12 +313,14 @@ provide('mainAppRef', mainAppRef)
               <!-- control button group -->
               <BackToTopAndRefreshButtons
                 v-if="activatedPage !== AppPage.Search" :show-refresh-button="!showTopBarMask"
-                @refresh="handleRefresh"
+                @refresh="handleThrottledPageRefresh"
                 @back-to-top="handleBackToTop"
               />
 
               <Transition name="page-fade">
-                <Component :is="pages[activatedPage]" :key="dynamicComponentKey" />
+                <KeepAlive>
+                  <Component :is="pages[activatedPage]" :key="activatedPage" />
+                </KeepAlive>
               </Transition>
             </div>
           </main>
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index ef64d152..9ea638ff 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import type { Ref } from 'vue'
 import { getCSRF, getUserID, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
 import type { FavoriteCategory, FavoriteResource } from '~/components/TopBar/types'
 import emitter from '~/utils/mitt'
@@ -19,7 +20,7 @@ const activatedCategoryCover = ref<string>('')
 const shouldMoveCtrlBarUp = ref<boolean>(false)
 const currentPageNum = ref<number>(1)
 const keyword = ref<string>('')
-
+const handlePageRefresh = inject('handlePageRefresh') as Ref<() => void | Promise<void>>
 const isLoading = ref<boolean>(true)
 const isFullPageLoading = ref<boolean>(false)
 const noMoreContent = ref<boolean>()
@@ -37,11 +38,6 @@ onMounted(async () => {
       getFavoriteResources(selectedCategory.value!.id, ++currentPageNum.value, keyword.value)
   })
 
-  emitter.off('pageRefresh')
-  emitter.on('pageRefresh', async () => {
-    favoriteResources.length = 0
-    handleSearch()
-  })
   emitter.off('topBarVisibleChange')
   emitter.on('topBarVisibleChange', (val) => {
     shouldMoveCtrlBarUp.value = false
@@ -61,10 +57,16 @@ onMounted(async () => {
 
 onUnmounted(() => {
   emitter.off('reachBottom')
-  emitter.off('pageRefresh')
   emitter.off('topBarVisibleChange')
 })
 
+onActivated(() => {
+  handlePageRefresh.value = () => {
+    favoriteResources.length = 0
+    handleSearch()
+  }
+})
+
 async function getFavoriteCategories() {
   await browser.runtime
     .sendMessage({
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index e9c85777..45ce619e 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -3,6 +3,7 @@ import { useDateFormat } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
 // import type { HistoryItem } from './types'
+import type { Ref } from 'vue'
 import { getCSRF, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 import emitter from '~/utils/mitt'
@@ -18,6 +19,7 @@ const historyList = reactive<Array<HistoryItem>>([])
 const currentPageNum = ref<number>(1)
 const keyword = ref<string>()
 const historyStatus = ref<boolean>()
+const handlePageRefresh = inject('handlePageRefresh') as Ref<() => void | Promise<void>>
 
 const HistoryBusiness = computed(() => {
   return Business
@@ -56,17 +58,17 @@ onMounted(() => {
       else getHistoryList()
     }
   })
-
-  emitter.off('pageRefresh')
-  emitter.on('pageRefresh', async () => {
-    historyList.length = 0
-    getHistoryList()
-  })
 })
 
 onUnmounted(() => {
   emitter.off('reachBottom')
-  emitter.off('pageRefresh')
+})
+
+onActivated(() => {
+  handlePageRefresh.value = () => {
+    historyList.length = 0
+    getHistoryList()
+  }
 })
 
 /**
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 33fb2c60..105f5f2a 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import ForYou from './components/ForYou.vue'
-import Following from './components/Following.vue'
-import Trending from './components/Trending.vue'
-import Ranking from './components/Ranking.vue'
-import SubscribedSeries from './components/SubscribedSeries.vue'
+
 import type { HomeTab } from './types'
 import { HomeSubPage } from './types'
 import emitter from '~/utils/mitt'
@@ -12,11 +8,16 @@ import { settings } from '~/logic'
 
 const { t } = useI18n()
 
-const handleBackToTop = inject('handleBackToTop') as (targetScrollTop: number) => void
+const { handleBackToTop } = useBewlyApp()
 
-const recommendContentKey = ref<string>(`recommendContent${Number(new Date())}`)
 const activatedPage = ref<HomeSubPage>(HomeSubPage.ForYou)
-const pages = { ForYou, Following, SubscribedSeries, Trending, Ranking }
+const pages = {
+  [HomeSubPage.ForYou]: defineAsyncComponent(() => import('./components/ForYou.vue')),
+  [HomeSubPage.Following]: defineAsyncComponent(() => import('./components/Following.vue')),
+  [HomeSubPage.SubscribedSeries]: defineAsyncComponent(() => import('./components/SubscribedSeries.vue')),
+  [HomeSubPage.Trending]: defineAsyncComponent(() => import('./components/Trending.vue')),
+  [HomeSubPage.Ranking]: defineAsyncComponent(() => import('./components/Ranking.vue')),
+}
 const showSearchPageMode = ref<boolean>(false)
 const shouldMoveTabsUp = ref<boolean>(false)
 
@@ -51,10 +52,6 @@ watch(() => activatedPage.value, () => {
 
 onMounted(() => {
   showSearchPageMode.value = true
-  emitter.off('pageRefresh')
-  emitter.on('pageRefresh', async () => {
-    recommendContentKey.value = `recommendContent${Number(new Date())}`
-  })
   emitter.off('topBarVisibleChange')
   emitter.on('topBarVisibleChange', (val) => {
     shouldMoveTabsUp.value = false
@@ -73,7 +70,6 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  emitter.off('pageRefresh')
   emitter.off('topBarVisibleChange')
 })
 </script>
@@ -158,7 +154,9 @@ onUnmounted(() => {
       </header>
 
       <Transition name="page-fade">
-        <Component :is="pages[activatedPage]" :key="recommendContentKey" />
+        <KeepAlive>
+          <Component :is="pages[activatedPage]" :key="activatedPage" />
+        </KeepAlive>
       </Transition>
       <!-- <RecommendContent :key="recommendContentKey" /> -->
     </main>
diff --git a/src/contentScripts/views/Home/components/Following.vue b/src/contentScripts/views/Home/components/Following.vue
index 45201fc1..39606552 100644
--- a/src/contentScripts/views/Home/components/Following.vue
+++ b/src/contentScripts/views/Home/components/Following.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
-import emitter from '~/utils/mitt'
 
 const videoList = reactive<MomentItem[]>([])
 const isLoading = ref<boolean>(false)
@@ -10,28 +9,49 @@ const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
 const offset = ref<string>('')
 const updateBaseline = ref<string>('')
 const noMoreContent = ref<boolean>(false)
+const noMoreContentWarning = ref<boolean>(false)
+const { handleReachBottom, handlePageRefresh } = useBewlyApp()
+
+function initPageAction() {
+  handleReachBottom.value = async () => {
+    if (isLoading.value)
+      return
+    if (noMoreContent.value) {
+      noMoreContentWarning.value = true
+      return
+    }
+    for (let i = 0; i < 3; i++)
+      await getFollowedUsersVideos()
+  }
+  handlePageRefresh.value = async () => {
+    videoList.length = 0
+    offset.value = ''
+    noMoreContent.value = false
+    noMoreContentWarning.value = false
+    for (let i = 0; i < 3; i++)
+      await getFollowedUsersVideos()
+  }
+}
 
 onMounted(async () => {
   for (let i = 0; i < 3; i++)
     await getFollowedUsersVideos()
-
-  emitter.off('reachBottom')
-  emitter.on('reachBottom', async () => {
-    if (!isLoading.value) {
-      for (let i = 0; i < 3; i++)
-        await getFollowedUsersVideos()
-    }
-  })
+  initPageAction()
 })
 
-onUnmounted(() => {
-  emitter.off('reachBottom')
+onActivated(() => {
+  initPageAction()
 })
 
 async function getFollowedUsersVideos() {
   if (noMoreContent.value)
     return
 
+  if (offset.value === '0') {
+    noMoreContent.value = true
+    return
+  }
+
   isLoading.value = true
   try {
     const response: MomentResult = await browser.runtime.sendMessage({
@@ -116,6 +136,9 @@ function jumpToLoginPage() {
       </template>
     </div>
 
+    <!-- no more content -->
+    <Empty v-if="noMoreContentWarning" class="pb-4" :description="$t('common.no_more_content')" />
+
     <Transition name="fade">
       <Loading v-if="isLoading" />
     </Transition>
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index a4a087fd..f4415ff5 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -2,7 +2,6 @@
 import type { Ref } from 'vue'
 import type { AppForYouResult, Item as AppVideoItem } from '~/models/video/appForYou'
 import type { Item as VideoItem, forYouResult } from '~/models/video/forYou'
-import emitter from '~/utils/mitt'
 import { accessKey, settings } from '~/logic'
 import { LanguageType } from '~/enums/appEnums'
 import { TVAppKey } from '~/utils/authProvider'
@@ -14,6 +13,33 @@ const needToLoginFirst = ref<boolean>(false)
 const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
 const refreshIdx = ref<number>(1)
 const noMoreContent = ref<boolean>(false)
+const { handleReachBottom, handlePageRefresh } = useBewlyApp()
+
+function initPageAction() {
+  handleReachBottom.value = async () => {
+    if (!isLoading.value) {
+      if (settings.value.recommendationMode === 'web') {
+        getRecommendVideos()
+      }
+      else {
+        for (let i = 0; i < 3; i++)
+          await getAppRecommendVideos()
+      }
+    }
+  }
+
+  handlePageRefresh.value = async () => {
+    videoList.length = 0
+    appVideoList.length = 0
+    if (settings.value.recommendationMode === 'web') {
+      await getRecommendVideos()
+    }
+    else {
+      for (let i = 0; i < 3; i++)
+        await getAppRecommendVideos()
+    }
+  }
+}
 
 watch(() => settings.value.recommendationMode, (newValue) => {
   videoList.length = 0
@@ -41,22 +67,11 @@ onMounted(async () => {
     }
   }, 200)
 
-  emitter.off('reachBottom')
-  emitter.on('reachBottom', async () => {
-    if (!isLoading.value) {
-      if (settings.value.recommendationMode === 'web') {
-        getRecommendVideos()
-      }
-      else {
-        for (let i = 0; i < 3; i++)
-          await getAppRecommendVideos()
-      }
-    }
-  })
+  initPageAction()
 })
 
-onUnmounted(() => {
-  emitter.off('reachBottom')
+onActivated(() => {
+  initPageAction()
 })
 
 async function getRecommendVideos() {
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index d86a73e9..f00d8983 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -7,8 +7,7 @@ import { settings } from '~/logic'
 import emitter from '~/utils/mitt'
 
 const { t } = useI18n()
-
-const handleBackToTop = inject('handleBackToTop') as (targetScrollTop: number) => void
+const { handleBackToTop, handlePageRefresh } = useBewlyApp()
 
 const rankingTypes = computed((): RankingType[] => {
   return [
@@ -46,6 +45,16 @@ const videoList = reactive<RankingVideoItem[]>([])
 const PgcList = reactive<RankingPgcItem[]>([])
 const shouldMoveAsideUp = ref<boolean>(false)
 
+function initPageAction() {
+  handlePageRefresh.value = async () => {
+    videoList.length = 0
+    PgcList.length = 0
+    if (isLoading.value)
+      return
+    getRankingVideos()
+  }
+}
+
 watch(() => activatedRankingType.value.id, () => {
   handleBackToTop(settings.value.useSearchPageModeOnHomePage ? 510 : 0)
 
@@ -72,6 +81,11 @@ onMounted(() => {
   })
 
   getRankingVideos()
+  initPageAction()
+})
+
+onActivated(() => {
+  initPageAction()
 })
 
 onBeforeUnmount(() => {
diff --git a/src/contentScripts/views/Home/components/SubscribedSeries.vue b/src/contentScripts/views/Home/components/SubscribedSeries.vue
index a16c9373..8333b519 100644
--- a/src/contentScripts/views/Home/components/SubscribedSeries.vue
+++ b/src/contentScripts/views/Home/components/SubscribedSeries.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
-import emitter from '~/utils/mitt'
 
 const momentList = reactive<MomentItem[]>([])
 const isLoading = ref<boolean>(false)
@@ -10,28 +9,52 @@ const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
 const offset = ref<string>('')
 const updateBaseline = ref<string>('')
 const noMoreContent = ref<boolean>(false)
+const noMoreContentWarning = ref<boolean>(false)
+const { handleReachBottom, handlePageRefresh } = useBewlyApp()
+
+function initPageAction() {
+  handleReachBottom.value = async () => {
+    if (isLoading.value)
+      return
+    if (noMoreContent.value) {
+      noMoreContentWarning.value = true
+      return
+    }
+    for (let i = 0; i < 3; i++)
+      await getFollowedUsersVideos()
+  }
+  handlePageRefresh.value = async () => {
+    offset.value = ''
+    momentList.length = 0
+    noMoreContent.value = false
+    noMoreContentWarning.value = false
+    if (isLoading.value)
+      return
+    for (let i = 0; i < 3; i++)
+      await getFollowedUsersVideos()
+  }
+}
 
 onMounted(async () => {
   for (let i = 0; i < 3; i++)
     await getFollowedUsersVideos()
 
-  emitter.off('reachBottom')
-  emitter.on('reachBottom', async () => {
-    if (!isLoading.value) {
-      for (let i = 0; i < 3; i++)
-        await getFollowedUsersVideos()
-    }
-  })
+  initPageAction()
 })
 
-onUnmounted(() => {
-  emitter.off('reachBottom')
+onActivated(() => {
+  initPageAction()
 })
 
 async function getFollowedUsersVideos() {
   if (noMoreContent.value)
     return
 
+  if (offset.value === '0') {
+    noMoreContent.value = true
+    return
+  }
+
   isLoading.value = true
   try {
     const response: MomentResult = await browser.runtime.sendMessage({
@@ -115,6 +138,9 @@ function jumpToLoginPage() {
       </template>
     </div>
 
+    <!-- no more content -->
+    <Empty v-if="noMoreContentWarning" class="pb-4" :description="$t('common.no_more_content')" />
+
     <Transition name="fade">
       <Loading v-if="isLoading" />
     </Transition>
diff --git a/src/contentScripts/views/Home/components/Trending.vue b/src/contentScripts/views/Home/components/Trending.vue
index 7bc87719..054a3e68 100644
--- a/src/contentScripts/views/Home/components/Trending.vue
+++ b/src/contentScripts/views/Home/components/Trending.vue
@@ -1,25 +1,34 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import type { TrendingResult, List as VideoItem } from '~/models/video/trending'
-import emitter from '~/utils/mitt'
 
 const videoList = reactive<VideoItem[]>([])
 const isLoading = ref<boolean>(false)
 const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
 const pn = ref<number>(1)
+const { handleReachBottom, handlePageRefresh } = useBewlyApp()
+
+function initPageAction() {
+  handleReachBottom.value = async () => {
+    if (!isLoading.value)
+      await getTrendingVideos()
+  }
+
+  handlePageRefresh.value = async () => {
+    videoList.length = 0
+    pn.value = 1
+    await getTrendingVideos()
+  }
+}
 
 onMounted(async () => {
   await getTrendingVideos()
 
-  emitter.off('reachBottom')
-  emitter.on('reachBottom', async () => {
-    if (!isLoading.value)
-      await getTrendingVideos()
-  })
+  initPageAction()
 })
 
-onUnmounted(() => {
-  emitter.off('reachBottom')
+onActivated(() => {
+  initPageAction()
 })
 
 async function getTrendingVideos() {
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index 57d516db..c5cf7a38 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -3,7 +3,6 @@ import { useDateFormat } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import { getCSRF, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
 import { calcCurrentTime } from '~/utils/dataFormatter'
-import emitter from '~/utils/mitt'
 import type { List as VideoItem, WatchLaterResult } from '~/models/video/watchLater'
 
 const { t } = useI18n()
@@ -11,19 +10,17 @@ const { t } = useI18n()
 const isLoading = ref<boolean>()
 const noMoreContent = ref<boolean>()
 const watchLaterList = reactive<VideoItem[]>([])
+const { handlePageRefresh } = useBewlyApp()
 
 onMounted(() => {
   getAllWatchLaterList()
-
-  emitter.off('pageRefresh')
-  emitter.on('pageRefresh', async () => {
-    watchLaterList.length = 0
-    getAllWatchLaterList()
-  })
 })
 
-onUnmounted(() => {
-  emitter.off('pageRefresh')
+onActivated(() => {
+  handlePageRefresh.value = () => {
+    watchLaterList.length = 0
+    getAllWatchLaterList()
+  }
 })
 
 /**
diff --git a/src/logic/common-setup.ts b/src/logic/common-setup.ts
index ce8b2a33..ee0ca3dc 100644
--- a/src/logic/common-setup.ts
+++ b/src/logic/common-setup.ts
@@ -29,6 +29,4 @@ export async function setupApp(app: App) {
       position: POSITION.TOP_CENTER,
     })
   app.use(pinia)
-  const { OverlayScrollbarsComponent } = await import('overlayscrollbars-vue')
-  app.component('OverlayScrollbarsComponent', OverlayScrollbarsComponent)
 }
diff --git a/vite.config.ts b/vite.config.ts
index 214fcaab..f16a2b7b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -33,11 +33,13 @@ export const sharedConfig: UserConfig = {
           ],
         },
       ],
+      dirs: [r('src/composables')],
       dts: r('src/auto-imports.d.ts'),
     }),
 
     // https://github.com/antfu/unplugin-vue-components
     Components({
+      extensions: ['vue', 'ts'],
       dirs: [r('src/components')],
       // generate `components.d.ts` for ts support with Volar
       dts: r('src/components.d.ts'),

From 7940f32e3588935c61837975b33f0fd25270be3d Mon Sep 17 00:00:00 2001
From: starknt <1431880400@qq.com>
Date: Thu, 11 Jan 2024 17:14:43 +0800
Subject: [PATCH 02/45] fix: not working components

---
 src/contentScripts/views/Anime/Anime.vue      | 51 +++++++++++---
 .../views/Favorites/Favorites.vue             | 34 ++++++----
 src/contentScripts/views/History/History.vue  | 67 +++++++++----------
 .../views/WatchLater/WatchLater.vue           | 18 +++--
 4 files changed, 108 insertions(+), 62 deletions(-)

diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index 6dbaad91..d13660ea 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -2,7 +2,6 @@
 import AnimeTimeTable from './components/AnimeTimeTable.vue'
 import { getUserID, openLinkToNewTab } from '~/utils/main'
 import { numFormatter } from '~/utils/dataFormatter'
-import emitter from '~/utils/mitt'
 import type { List as WatchListItem, WatchListResult } from '~/models/anime/watchList'
 import type { List as PopularAnimeItem, PopularAnimeResult } from '~/models/anime/popular'
 import type { ItemSubItem as RecommendationItem, RecommendationResult } from '~/models/anime/recommendation'
@@ -15,21 +14,48 @@ const isLoadingAnimeWatchList = ref<boolean>()
 const isLoadingPopularAnime = ref<boolean>()
 const isLoadingRecommendAnime = ref<boolean>()
 const activatedSeasonId = ref<number>()
+const noMoreContent = ref<boolean>()
+const noMoreContentWarning = ref<boolean>()
+const { handleReachBottom, handlePageRefresh } = useBewlyApp()
+
+const isLoading = computed(() => {
+  return isLoadingAnimeWatchList.value || isLoadingPopularAnime.value || isLoadingRecommendAnime.value
+})
+
+function initPageAction() {
+  handleReachBottom.value = () => {
+    if (isLoadingRecommendAnime.value)
+      return
+    if (noMoreContent.value) {
+      noMoreContentWarning.value = true
+      return
+    }
+    getRecommendAnimeList()
+  }
+  handlePageRefresh.value = () => {
+    if (isLoading.value)
+      return
+
+    animeWatchList.length = 0
+    recommendAnimeList.length = 0
+    popularAnimeList.length = 0
+    cursor.value = 0
+    getAnimeWatchList()
+    getPopularAnimeList()
+    getRecommendAnimeList()
+  }
+}
 
 onMounted(() => {
   getAnimeWatchList()
   getPopularAnimeList()
   getRecommendAnimeList()
 
-  emitter.off('reachBottom')
-  emitter.on('reachBottom', () => {
-    if (!isLoadingRecommendAnime.value)
-      getRecommendAnimeList()
-  })
+  initPageAction()
 })
 
-onUnmounted(() => {
-  emitter.off('reachBottom')
+onActivated(() => {
+  initPageAction()
 })
 
 function getAnimeWatchList() {
@@ -70,10 +96,13 @@ function getRecommendAnimeList() {
       if (code === 0 && has_next) {
         if (recommendAnimeList.length === 0)
           Object.assign(recommendAnimeList, items[0].sub_items as RecommendationItem[])
-        else recommendAnimeList.push(...items[0].sub_items)
+        else
+          recommendAnimeList.push(...items[0].sub_items)
 
         cursor.value = coursor
       }
+      if (code === 0 && !has_next)
+        noMoreContent.value = true
     })
     .finally(() => {
       isLoadingRecommendAnime.value = false
@@ -246,6 +275,10 @@ function getPopularAnimeList() {
         </div>
       </section>
     </div>
+
+    <!-- no more content -->
+    <Empty v-if="noMoreContentWarning" class="pb-4" :description="$t('common.no_more_content')" />
+
     <!-- loading -->
     <loading v-if="isLoadingRecommendAnime && recommendAnimeList.length !== 0" m="-t-4" />
   </div>
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index 9ea638ff..ac03ccb3 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -20,23 +20,33 @@ const activatedCategoryCover = ref<string>('')
 const shouldMoveCtrlBarUp = ref<boolean>(false)
 const currentPageNum = ref<number>(1)
 const keyword = ref<string>('')
-const handlePageRefresh = inject('handlePageRefresh') as Ref<() => void | Promise<void>>
+const { handlePageRefresh, handleReachBottom } = useBewlyApp()
 const isLoading = ref<boolean>(true)
 const isFullPageLoading = ref<boolean>(false)
 const noMoreContent = ref<boolean>()
 
+function initPageAction() {
+  handleReachBottom.value = async () => {
+    if (isLoading.value)
+      return
+    if (noMoreContent.value)
+      return
+    await getFavoriteResources(selectedCategory.value!.id, ++currentPageNum.value, keyword.value)
+  }
+
+  handlePageRefresh.value = () => {
+    if (isLoading.value)
+      return
+    favoriteResources.length = 0
+    handleSearch()
+  }
+}
+
 onMounted(async () => {
   await getFavoriteCategories()
   changeCategory(favoriteCategories[0])
 
-  emitter.off('reachBottom')
-  emitter.on('reachBottom', () => {
-    if (isLoading.value)
-      return
-
-    if (!noMoreContent.value)
-      getFavoriteResources(selectedCategory.value!.id, ++currentPageNum.value, keyword.value)
-  })
+  initPageAction()
 
   emitter.off('topBarVisibleChange')
   emitter.on('topBarVisibleChange', (val) => {
@@ -56,15 +66,11 @@ onMounted(async () => {
 })
 
 onUnmounted(() => {
-  emitter.off('reachBottom')
   emitter.off('topBarVisibleChange')
 })
 
 onActivated(() => {
-  handlePageRefresh.value = () => {
-    favoriteResources.length = 0
-    handleSearch()
-  }
+  initPageAction()
 })
 
 async function getFavoriteCategories() {
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 45ce619e..7588819a 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -3,10 +3,8 @@ import { useDateFormat } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
 // import type { HistoryItem } from './types'
-import type { Ref } from 'vue'
 import { getCSRF, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
 import { calcCurrentTime } from '~/utils/dataFormatter'
-import emitter from '~/utils/mitt'
 import { Business } from '~/models/video/history'
 import type { List as HistoryItem, HistoryResult } from '~/models/video/history'
 import type { List as HistorySearchItem, HistorySearchResult } from '~/models/video/historySearch'
@@ -14,32 +12,46 @@ import type { List as HistorySearchItem, HistorySearchResult } from '~/models/vi
 const { t } = useI18n()
 
 const isLoading = ref<boolean>()
-const noMoreContent = ref<boolean>()
+const noMoreContent = ref<boolean>(false)
+const noMoreContentWarning = ref<boolean>(false)
 const historyList = reactive<Array<HistoryItem>>([])
 const currentPageNum = ref<number>(1)
 const keyword = ref<string>()
 const historyStatus = ref<boolean>()
-const handlePageRefresh = inject('handlePageRefresh') as Ref<() => void | Promise<void>>
+const { handlePageRefresh, handleReachBottom } = useBewlyApp()
 
 const HistoryBusiness = computed(() => {
   return Business
 })
 
+function initPageAction() {
+  handleReachBottom.value = () => {
+    if (isLoading.value)
+      return
+    if (noMoreContent.value) {
+      noMoreContentWarning.value = true
+      return
+    }
+
+    if (keyword.value)
+      searchHistoryList()
+    else
+      getHistoryList()
+  }
+
+  handlePageRefresh.value = () => {
+    historyList.length = 0
+    currentPageNum.value = 1
+    getHistoryList()
+  }
+}
+
 watch(
   () => keyword.value,
   (newValue, oldValue) => {
     if (newValue === oldValue)
       return
-    emitter.on('reachBottom', () => {
-      if (isLoading.value)
-        return
-
-      if (!noMoreContent.value) {
-        if (keyword.value)
-          searchHistoryList()
-        else getHistoryList()
-      }
-    })
+    initPageAction()
   },
 )
 
@@ -47,28 +59,11 @@ onMounted(() => {
   getHistoryList()
   getHistoryPauseStatus()
 
-  emitter.off('reachBottom')
-  emitter.on('reachBottom', () => {
-    if (isLoading.value)
-      return
-
-    if (!noMoreContent.value) {
-      if (keyword.value)
-        searchHistoryList()
-      else getHistoryList()
-    }
-  })
-})
-
-onUnmounted(() => {
-  emitter.off('reachBottom')
+  initPageAction()
 })
 
 onActivated(() => {
-  handlePageRefresh.value = () => {
-    historyList.length = 0
-    getHistoryList()
-  }
+  initPageAction()
 })
 
 /**
@@ -154,7 +149,7 @@ function deleteHistoryItem(index: number, historyItem: HistoryItem) {
  * @param item history item
  * @return {string} url
  */
-function getHistoryUrl(item: HistoryItem) {
+function getHistoryUrl(item: HistoryItem): string {
   // anime
   if (item.history.business === 'pgc') {
     return removeHttpFromUrl(item.uri)
@@ -481,6 +476,10 @@ function jumpToLoginPage() {
           </section>
         </a>
       </transition-group>
+
+      <!-- no more content -->
+      <Empty v-if="noMoreContentWarning" class="py-4" :description="$t('common.no_more_content')" />
+
       <!-- loading -->
       <Transition name="fade">
         <loading
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index c5cf7a38..bf4c2b6d 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -12,15 +12,23 @@ const noMoreContent = ref<boolean>()
 const watchLaterList = reactive<VideoItem[]>([])
 const { handlePageRefresh } = useBewlyApp()
 
-onMounted(() => {
-  getAllWatchLaterList()
-})
-
-onActivated(() => {
+function initPageAction() {
   handlePageRefresh.value = () => {
+    if (isLoading.value)
+      return
+
     watchLaterList.length = 0
     getAllWatchLaterList()
   }
+}
+
+onMounted(() => {
+  getAllWatchLaterList()
+  initPageAction()
+})
+
+onActivated(() => {
+  initPageAction()
 })
 
 /**

From 0d1735ab87c366c5443d8fe2b72f2a76b8dc61f9 Mon Sep 17 00:00:00 2001
From: starknt <1431880400@qq.com>
Date: Thu, 11 Jan 2024 17:21:45 +0800
Subject: [PATCH 03/45] fix: page refresh not reset page num

---
 src/contentScripts/views/Favorites/Favorites.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index ac03ccb3..5201ba2e 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -24,13 +24,16 @@ const { handlePageRefresh, handleReachBottom } = useBewlyApp()
 const isLoading = ref<boolean>(true)
 const isFullPageLoading = ref<boolean>(false)
 const noMoreContent = ref<boolean>()
+const noMoreContentWarning = ref<boolean>(false)
 
 function initPageAction() {
   handleReachBottom.value = async () => {
     if (isLoading.value)
       return
-    if (noMoreContent.value)
+    if (noMoreContent.value) {
+      noMoreContentWarning.value = true
       return
+    }
     await getFavoriteResources(selectedCategory.value!.id, ++currentPageNum.value, keyword.value)
   }
 
@@ -38,6 +41,7 @@ function initPageAction() {
     if (isLoading.value)
       return
     favoriteResources.length = 0
+    currentPageNum.value = 1
     handleSearch()
   }
 }
@@ -236,6 +240,9 @@ function handleUnfavorite(favoriteResource: FavoriteResource) {
           </TransitionGroup>
         </div>
 
+        <!-- no more content -->
+        <Empty v-if="noMoreContentWarning" class="py-4" :description="$t('common.no_more_content')" />
+
         <!-- loading -->
         <Transition name="fade">
           <Loading

From f654385f75bdbd9eefa79ab304c85601fee2946c Mon Sep 17 00:00:00 2001
From: starknt <1431880400@qq.com>
Date: Thu, 11 Jan 2024 17:29:21 +0800
Subject: [PATCH 04/45] fix: page refresh reset action

---
 src/contentScripts/views/Anime/Anime.vue      |  2 ++
 .../views/Favorites/Favorites.vue             |  2 ++
 src/contentScripts/views/History/History.vue  |  2 ++
 .../views/Home/components/ForYou.vue          | 32 ++++++++++++-------
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index d13660ea..095fbb79 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -40,6 +40,8 @@ function initPageAction() {
     recommendAnimeList.length = 0
     popularAnimeList.length = 0
     cursor.value = 0
+    noMoreContent.value = false
+    noMoreContentWarning.value = false
     getAnimeWatchList()
     getPopularAnimeList()
     getRecommendAnimeList()
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index 5201ba2e..dc5a2d91 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -42,6 +42,8 @@ function initPageAction() {
       return
     favoriteResources.length = 0
     currentPageNum.value = 1
+    noMoreContent.value = false
+    noMoreContentWarning.value = false
     handleSearch()
   }
 }
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 7588819a..aed379fd 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -42,6 +42,8 @@ function initPageAction() {
   handlePageRefresh.value = () => {
     historyList.length = 0
     currentPageNum.value = 1
+    noMoreContent.value = false
+    noMoreContentWarning.value = false
     getHistoryList()
   }
 }
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index f4415ff5..f7f436a3 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -13,24 +13,34 @@ const needToLoginFirst = ref<boolean>(false)
 const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
 const refreshIdx = ref<number>(1)
 const noMoreContent = ref<boolean>(false)
+const noMoreContentWarning = ref<boolean>(false)
 const { handleReachBottom, handlePageRefresh } = useBewlyApp()
 
 function initPageAction() {
   handleReachBottom.value = async () => {
-    if (!isLoading.value) {
-      if (settings.value.recommendationMode === 'web') {
-        getRecommendVideos()
-      }
-      else {
-        for (let i = 0; i < 3; i++)
-          await getAppRecommendVideos()
-      }
+    if (isLoading.value)
+      return
+    if (noMoreContent.value) {
+      noMoreContentWarning.value = true
+      return
+    }
+    if (settings.value.recommendationMode === 'web') {
+      getRecommendVideos()
+    }
+    else {
+      for (let i = 0; i < 3; i++)
+        await getAppRecommendVideos()
     }
   }
 
   handlePageRefresh.value = async () => {
+    if (isLoading.value)
+      return
+
     videoList.length = 0
     appVideoList.length = 0
+    noMoreContent.value = false
+    noMoreContentWarning.value = false
     if (settings.value.recommendationMode === 'web') {
       await getRecommendVideos()
     }
@@ -75,9 +85,6 @@ onActivated(() => {
 })
 
 async function getRecommendVideos() {
-  if (noMoreContent.value)
-    return
-
   isLoading.value = true
   try {
     const response: forYouResult = await browser.runtime.sendMessage({
@@ -217,6 +224,9 @@ function jumpToLoginPage() {
       </template>
     </div>
 
+    <!-- no more content -->
+    <Empty v-if="noMoreContentWarning" class="py-4" :description="$t('common.no_more_content')" />
+
     <Transition name="fade">
       <Loading v-if="isLoading" />
     </Transition>

From dc9387e8c1d1f3d5e76c44a7b1d6fb6e9a62da09 Mon Sep 17 00:00:00 2001
From: starknt <1431880400@qq.com>
Date: Fri, 12 Jan 2024 23:57:27 +0800
Subject: [PATCH 05/45] fix: `global Speed` conflict

---
 src/contentScripts/index.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index 29ff1599..70207ab8 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -143,7 +143,9 @@ function injectApp() {
     container.id = 'bewly'
     const root = document.createElement('div')
     const styleEl = document.createElement('link')
-    const shadowDOM = container.attachShadow?.({ mode: __DEV__ ? 'open' : 'closed' }) || container
+    // Fix #69 https://github.com/hakadao/BewlyBewly/issues/69
+    // https://medium.com/@emilio_martinez/shadow-dom-open-vs-closed-1a8cf286088a - open shadow dom
+    const shadowDOM = container.attachShadow?.({ mode: 'open' }) || container
     styleEl.setAttribute('rel', 'stylesheet')
     styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
     shadowDOM.appendChild(styleEl)

From 06bef266c539a515a629ee410db4a017d2273cec Mon Sep 17 00:00:00 2001
From: starknt <1431880400@qq.com>
Date: Fri, 12 Jan 2024 23:57:34 +0800
Subject: [PATCH 06/45] refactor: improve search bar component

---
 src/_locales/cmn-CN.yml                |  1 +
 src/_locales/cmn-TW.yml                |  1 +
 src/_locales/en.yml                    |  1 +
 src/_locales/jyut.yml                  |  1 +
 src/components/SearchBar/SearchBar.vue | 92 +++++++++++++-------------
 5 files changed, 50 insertions(+), 46 deletions(-)

diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml
index f2e5a59d..bb88bbe3 100644
--- a/src/_locales/cmn-CN.yml
+++ b/src/_locales/cmn-CN.yml
@@ -294,3 +294,4 @@ watch_later:
 search_bar:
   history_title: 搜索历史
   clear_history: 清空搜索历史
+  placeholder: 输入关键字搜索
diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml
index fb346986..21e2ca91 100644
--- a/src/_locales/cmn-TW.yml
+++ b/src/_locales/cmn-TW.yml
@@ -297,3 +297,4 @@ watch_later:
 search_bar:
   history_title: 搜尋記錄
   clear_history: 清除所有搜尋記錄
+  placeholder: 輸入關鍵字搜尋
diff --git a/src/_locales/en.yml b/src/_locales/en.yml
index a0c60f19..53302fae 100644
--- a/src/_locales/en.yml
+++ b/src/_locales/en.yml
@@ -293,3 +293,4 @@ watch_later:
 search_bar:
   history_title: Search History
   clear_history: Clear search history
+  placeholder: Enter keywords to search
diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml
index 20087e04..02910a3f 100644
--- a/src/_locales/jyut.yml
+++ b/src/_locales/jyut.yml
@@ -297,3 +297,4 @@ watch_later:
 search_bar:
   history_title: 搜尋記錄
   clear_history: 剷晒你啲搜尋記錄
+  placeholder: 键入关键字搜尋
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index e1766e71..f898e137 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -1,5 +1,6 @@
 <!-- TODO: refactor all that code -->
 <script setup lang="ts">
+import { onClickOutside, useFocus, useWindowFocus, watchThrottled } from '@vueuse/core'
 import type { HistoryItem, SuggestionItem, SuggestionResponse } from './searchHistoryProvider'
 import {
   addSearchHistory,
@@ -14,7 +15,9 @@ defineProps<{
   focusedCharacter?: string
 }>()
 
-const isFocus = ref<boolean>(false)
+const inputRef = ref<HTMLInputElement | null>(null)
+const { focused: isFocus } = useFocus(inputRef)
+const isWindowFocus = useWindowFocus()
 const keyword = ref<string>('')
 const suggestions = reactive<SuggestionItem[]>([])
 const selectedIndex = ref<number>(-1)
@@ -22,30 +25,35 @@ const searchHistory = shallowRef<HistoryItem[]>([])
 const historyItemRef = ref<HTMLElement[]>([])
 const suggestionItemRef = ref<HTMLElement[]>([])
 
-watch(isFocus, async (focus) => {
+watch([isFocus, isWindowFocus], async ([focus, windowFocus]) => {
   // 延后加载搜索历史
-  if (focus)
+  if (focus && windowFocus)
     searchHistory.value = await getSearchHistory()
-})
+  if (!windowFocus) {
+    selectedIndex.value = -1
+    inputRef.value?.blur()
+  }
+}, { flush: 'sync' })
 
-function handleInput() {
+watchThrottled(keyword, (keyword) => {
   selectedIndex.value = -1
-  if (keyword.value.length > 0) {
-    browser.runtime
-      .sendMessage({
-        contentScriptQuery: 'getSearchSuggestion',
-        term: keyword.value,
-      })
-      .then((res: SuggestionResponse) => {
-        if (!res || (res && res.code !== 0))
-          return
-        Object.assign(suggestions, res.result.tag)
-      })
-  }
-  else {
+
+  if (keyword.length <= 0) {
     suggestions.length = 0
+    return
   }
-}
+
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getSearchSuggestion',
+      term: keyword,
+    })
+    .then((res: SuggestionResponse) => {
+      if (!res || (res && res.code !== 0))
+        return
+      Object.assign(suggestions, res.result.tag)
+    })
+}, { throttle: 100 })
 
 async function navigateToSearchResultPage(keyword: string) {
   if (keyword) {
@@ -78,13 +86,15 @@ function handleKeyUp() {
   suggestionItemRef.value.forEach((item, index) => {
     if (index === selectedIndex.value)
       item.classList.add('active')
-    else item.classList.remove('active')
+    else
+      item.classList.remove('active')
   })
 
   historyItemRef.value.forEach((item, index) => {
     if (index === selectedIndex.value)
       item.classList.add('active')
-    else item.classList.remove('active')
+    else
+      item.classList.remove('active')
   })
 }
 
@@ -142,12 +152,10 @@ async function handleClearSearchHistory() {
       w="full"
       h="full"
       content="~"
-      @click="isFocus = false"
     />
     <Transition name="mask">
       <div
         v-if="darkenOnFocus && isFocus" pos="fixed top-0 left-0" w-full h-full bg="black opacity-60"
-        @click="isFocus = false"
       />
     </Transition>
 
@@ -162,8 +170,8 @@ async function handleClearSearchHistory() {
       <Transition name="focus-character">
         <img v-show="focusedCharacter && isFocus" :src="focusedCharacter" width="100" object-contain pos="absolute right-0 bottom-40px">
       </Transition>
-
       <input
+        ref="inputRef"
         v-model.trim="keyword"
         rounded="60px focus:$bew-radius"
         p="l-6 r-16 y-3"
@@ -173,12 +181,11 @@ async function handleClearSearchHistory() {
         ring="1 $bew-border-color"
         transition="all duration-300"
         type="text"
-        @focus="isFocus = true"
-        @input="handleInput"
-        @keyup.enter.stop.passive="navigateToSearchResultPage(keyword)"
-        @keyup.up.stop.passive="handleKeyUp"
-        @keyup.down.stop.passive="handleKeyDown"
-        @keydown.stop="() => {}"
+        autocomplete="off"
+        :placeholder="$t('search_bar.placeholder')"
+        @keyup.up="handleKeyUp"
+        @keyup.down="handleKeyDown"
+        @keyup.enter="navigateToSearchResultPage(keyword)"
       >
       <button
         p-2
@@ -199,14 +206,13 @@ async function handleClearSearchHistory() {
 
     <Transition name="result-list">
       <div
-        v-if="
-          isFocus
-            && searchHistory.length !== 0
-            && keyword.length === 0
-        "
-        id="search-history"
+        v-if="isFocus"
+        class="search-suggestion search-history min-h-60px"
       >
-        <div class="history-list flex flex-col gap-y-2">
+        <div
+          v-show="keyword.length === 0 && searchHistory.length !== 0"
+          class="history-list flex flex-col gap-y-2"
+        >
           <div class="title p-2 pb-0 flex justify-between">
             <span>{{ $t('search_bar.history_title') }}</span>
             <button class="rounded-2 duration-300 pointer-events-auto cursor-pointer" hover="text-$bew-theme-color" text="base $bew-text-2" @click="handleClearSearchHistory">
@@ -233,16 +239,10 @@ async function handleClearSearchHistory() {
             </div>
           </div>
         </div>
-      </div>
-    </Transition>
 
-    <Transition name="result-list">
-      <div
-        v-if="isFocus && suggestions.length !== 0 && keyword.length > 0"
-        id="search-suggestion"
-      >
         <div
           v-for="(item, index) in suggestions"
+          v-show="keyword.length > 0"
           :key="index"
           ref="suggestionItemRef"
           class="suggestion-item"
@@ -339,7 +339,7 @@ async function handleClearSearchHistory() {
       hover:bg-$bew-fill-2;
   }
 
-  #search-history {
+  .search-history {
     @include search-content;
     --at-apply: bg-$bew-elevated-1;
 
@@ -357,7 +357,7 @@ async function handleClearSearchHistory() {
     }
   }
 
-  #search-suggestion {
+  .search-suggestion {
     @include search-content;
     --at-apply: bg-$bew-elevated-1;
 

From 2f36f4177fde60669196431f1f6b04cce55eb231 Mon Sep 17 00:00:00 2001
From: starknt <1431880400@qq.com>
Date: Sat, 13 Jan 2024 22:35:44 +0800
Subject: [PATCH 07/45] fix: when del search bar history, and the result list
 hide

---
 src/components/SearchBar/SearchBar.vue | 42 +++++++++++++++++---------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index f898e137..d3bc8c21 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -1,6 +1,6 @@
 <!-- TODO: refactor all that code -->
 <script setup lang="ts">
-import { onClickOutside, useFocus, useWindowFocus, watchThrottled } from '@vueuse/core'
+import { useWindowFocus, watchThrottled } from '@vueuse/core'
 import type { HistoryItem, SuggestionItem, SuggestionResponse } from './searchHistoryProvider'
 import {
   addSearchHistory,
@@ -16,7 +16,7 @@ defineProps<{
 }>()
 
 const inputRef = ref<HTMLInputElement | null>(null)
-const { focused: isFocus } = useFocus(inputRef)
+const isFocus = ref(false)
 const isWindowFocus = useWindowFocus()
 const keyword = ref<string>('')
 const suggestions = reactive<SuggestionItem[]>([])
@@ -25,15 +25,16 @@ const searchHistory = shallowRef<HistoryItem[]>([])
 const historyItemRef = ref<HTMLElement[]>([])
 const suggestionItemRef = ref<HTMLElement[]>([])
 
-watch([isFocus, isWindowFocus], async ([focus, windowFocus]) => {
+watch(isFocus, async (focus) => {
   // 延后加载搜索历史
-  if (focus && windowFocus)
+  if (focus && searchHistory.value.length === 0)
     searchHistory.value = await getSearchHistory()
-  if (!windowFocus) {
-    selectedIndex.value = -1
-    inputRef.value?.blur()
-  }
-}, { flush: 'sync' })
+})
+
+watch(isWindowFocus, (windowFocus) => {
+  if (!windowFocus)
+    isFocus.value = false
+}, { flush: 'post' })
 
 watchThrottled(keyword, (keyword) => {
   selectedIndex.value = -1
@@ -145,17 +146,23 @@ async function handleClearSearchHistory() {
 </script>
 
 <template>
-  <div id="search-wrap" w="full" max-w="550px" m="x-8" pos="relative">
+  <div
+    id="search-wrap" w="full" max-w="550px" m="x-8"
+    pos="relative"
+  >
     <div
       v-if="!darkenOnFocus && isFocus"
       pos="fixed top-0 left-0"
       w="full"
       h="full"
       content="~"
+      z="2"
+      @click="isFocus = false"
     />
     <Transition name="mask">
       <div
-        v-if="darkenOnFocus && isFocus" pos="fixed top-0 left-0" w-full h-full bg="black opacity-60"
+        v-if="darkenOnFocus && isFocus"
+        pos="fixed top-0 left-0" w-full h-full bg="black opacity-60"
       />
     </Transition>
 
@@ -166,7 +173,11 @@ async function handleClearSearchHistory() {
       :style="{ backdropFilter: isFocus ? 'blur(15px)' : 'blur(0)' }"
     />
 
-    <div class="search-bar group" :class="isFocus ? 'focus' : ''" flex="~" items-center pos="relative">
+    <div
+      class="search-bar group" :class="isFocus ? 'focus' : ''" flex="~" items-center
+      pos="relative"
+      z="3"
+    >
       <Transition name="focus-character">
         <img v-show="focusedCharacter && isFocus" :src="focusedCharacter" width="100" object-contain pos="absolute right-0 bottom-40px">
       </Transition>
@@ -183,6 +194,7 @@ async function handleClearSearchHistory() {
         type="text"
         autocomplete="off"
         :placeholder="$t('search_bar.placeholder')"
+        @focus="isFocus = true"
         @keyup.up="handleKeyUp"
         @keyup.down="handleKeyDown"
         @keyup.enter="navigateToSearchResultPage(keyword)"
@@ -206,11 +218,11 @@ async function handleClearSearchHistory() {
 
     <Transition name="result-list">
       <div
-        v-if="isFocus"
-        class="search-suggestion search-history min-h-60px"
+        v-if="isFocus && (suggestions.length !== 0 || searchHistory.length !== 0)"
+        class="search-suggestion search-history min-h-60px z-3"
       >
         <div
-          v-show="keyword.length === 0 && searchHistory.length !== 0"
+          v-show="keyword.length === 0"
           class="history-list flex flex-col gap-y-2"
         >
           <div class="title p-2 pb-0 flex justify-between">

From a3c6fcd6fcdde775492ff097e3a2126335d85e3b Mon Sep 17 00:00:00 2001
From: MengNianxiaoyao <2589141604@qq.com>
Date: Mon, 15 Jan 2024 11:43:39 +0800
Subject: [PATCH 08/45] =?UTF-8?q?fix:=20=E4=B8=93=E6=A0=8F=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=BE=A7=E8=BE=B9=E6=A0=8F=E7=9B=AE=E5=BD=95=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E5=9E=82=E7=9B=B4=E5=B1=85=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/adaptedStyles/articlesPage.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/styles/adaptedStyles/articlesPage.scss b/src/styles/adaptedStyles/articlesPage.scss
index 279bf851..e86c18bb 100644
--- a/src/styles/adaptedStyles/articlesPage.scss
+++ b/src/styles/adaptedStyles/articlesPage.scss
@@ -3,6 +3,10 @@
     line-height: unset;
   }
 
+  .right-side-bar .catalog{
+    justify-content: center;
+  }
+
   body {
     background-color: unset;
   }

From de6a0ab10efc53520786c5eb1d58fba3cc342774 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 16 Jan 2024 23:24:19 +0800
Subject: [PATCH 09/45] revert: revert search bar code to previous version to
 undo recent changes

---
 src/_locales/cmn-CN.yml                |   1 -
 src/_locales/cmn-TW.yml                |   1 -
 src/_locales/en.yml                    |   1 -
 src/_locales/jyut.yml                  |   1 -
 src/components/SearchBar/SearchBar.vue | 104 +++++++++++--------------
 5 files changed, 46 insertions(+), 62 deletions(-)

diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml
index bb88bbe3..f2e5a59d 100644
--- a/src/_locales/cmn-CN.yml
+++ b/src/_locales/cmn-CN.yml
@@ -294,4 +294,3 @@ watch_later:
 search_bar:
   history_title: 搜索历史
   clear_history: 清空搜索历史
-  placeholder: 输入关键字搜索
diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml
index 21e2ca91..fb346986 100644
--- a/src/_locales/cmn-TW.yml
+++ b/src/_locales/cmn-TW.yml
@@ -297,4 +297,3 @@ watch_later:
 search_bar:
   history_title: 搜尋記錄
   clear_history: 清除所有搜尋記錄
-  placeholder: 輸入關鍵字搜尋
diff --git a/src/_locales/en.yml b/src/_locales/en.yml
index 53302fae..a0c60f19 100644
--- a/src/_locales/en.yml
+++ b/src/_locales/en.yml
@@ -293,4 +293,3 @@ watch_later:
 search_bar:
   history_title: Search History
   clear_history: Clear search history
-  placeholder: Enter keywords to search
diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml
index 02910a3f..20087e04 100644
--- a/src/_locales/jyut.yml
+++ b/src/_locales/jyut.yml
@@ -297,4 +297,3 @@ watch_later:
 search_bar:
   history_title: 搜尋記錄
   clear_history: 剷晒你啲搜尋記錄
-  placeholder: 键入关键字搜尋
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index d3bc8c21..e1766e71 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -1,6 +1,5 @@
 <!-- TODO: refactor all that code -->
 <script setup lang="ts">
-import { useWindowFocus, watchThrottled } from '@vueuse/core'
 import type { HistoryItem, SuggestionItem, SuggestionResponse } from './searchHistoryProvider'
 import {
   addSearchHistory,
@@ -15,9 +14,7 @@ defineProps<{
   focusedCharacter?: string
 }>()
 
-const inputRef = ref<HTMLInputElement | null>(null)
-const isFocus = ref(false)
-const isWindowFocus = useWindowFocus()
+const isFocus = ref<boolean>(false)
 const keyword = ref<string>('')
 const suggestions = reactive<SuggestionItem[]>([])
 const selectedIndex = ref<number>(-1)
@@ -27,34 +24,28 @@ const suggestionItemRef = ref<HTMLElement[]>([])
 
 watch(isFocus, async (focus) => {
   // 延后加载搜索历史
-  if (focus && searchHistory.value.length === 0)
+  if (focus)
     searchHistory.value = await getSearchHistory()
 })
 
-watch(isWindowFocus, (windowFocus) => {
-  if (!windowFocus)
-    isFocus.value = false
-}, { flush: 'post' })
-
-watchThrottled(keyword, (keyword) => {
+function handleInput() {
   selectedIndex.value = -1
-
-  if (keyword.length <= 0) {
-    suggestions.length = 0
-    return
+  if (keyword.value.length > 0) {
+    browser.runtime
+      .sendMessage({
+        contentScriptQuery: 'getSearchSuggestion',
+        term: keyword.value,
+      })
+      .then((res: SuggestionResponse) => {
+        if (!res || (res && res.code !== 0))
+          return
+        Object.assign(suggestions, res.result.tag)
+      })
   }
-
-  browser.runtime
-    .sendMessage({
-      contentScriptQuery: 'getSearchSuggestion',
-      term: keyword,
-    })
-    .then((res: SuggestionResponse) => {
-      if (!res || (res && res.code !== 0))
-        return
-      Object.assign(suggestions, res.result.tag)
-    })
-}, { throttle: 100 })
+  else {
+    suggestions.length = 0
+  }
+}
 
 async function navigateToSearchResultPage(keyword: string) {
   if (keyword) {
@@ -87,15 +78,13 @@ function handleKeyUp() {
   suggestionItemRef.value.forEach((item, index) => {
     if (index === selectedIndex.value)
       item.classList.add('active')
-    else
-      item.classList.remove('active')
+    else item.classList.remove('active')
   })
 
   historyItemRef.value.forEach((item, index) => {
     if (index === selectedIndex.value)
       item.classList.add('active')
-    else
-      item.classList.remove('active')
+    else item.classList.remove('active')
   })
 }
 
@@ -146,23 +135,19 @@ async function handleClearSearchHistory() {
 </script>
 
 <template>
-  <div
-    id="search-wrap" w="full" max-w="550px" m="x-8"
-    pos="relative"
-  >
+  <div id="search-wrap" w="full" max-w="550px" m="x-8" pos="relative">
     <div
       v-if="!darkenOnFocus && isFocus"
       pos="fixed top-0 left-0"
       w="full"
       h="full"
       content="~"
-      z="2"
       @click="isFocus = false"
     />
     <Transition name="mask">
       <div
-        v-if="darkenOnFocus && isFocus"
-        pos="fixed top-0 left-0" w-full h-full bg="black opacity-60"
+        v-if="darkenOnFocus && isFocus" pos="fixed top-0 left-0" w-full h-full bg="black opacity-60"
+        @click="isFocus = false"
       />
     </Transition>
 
@@ -173,16 +158,12 @@ async function handleClearSearchHistory() {
       :style="{ backdropFilter: isFocus ? 'blur(15px)' : 'blur(0)' }"
     />
 
-    <div
-      class="search-bar group" :class="isFocus ? 'focus' : ''" flex="~" items-center
-      pos="relative"
-      z="3"
-    >
+    <div class="search-bar group" :class="isFocus ? 'focus' : ''" flex="~" items-center pos="relative">
       <Transition name="focus-character">
         <img v-show="focusedCharacter && isFocus" :src="focusedCharacter" width="100" object-contain pos="absolute right-0 bottom-40px">
       </Transition>
+
       <input
-        ref="inputRef"
         v-model.trim="keyword"
         rounded="60px focus:$bew-radius"
         p="l-6 r-16 y-3"
@@ -192,12 +173,12 @@ async function handleClearSearchHistory() {
         ring="1 $bew-border-color"
         transition="all duration-300"
         type="text"
-        autocomplete="off"
-        :placeholder="$t('search_bar.placeholder')"
         @focus="isFocus = true"
-        @keyup.up="handleKeyUp"
-        @keyup.down="handleKeyDown"
-        @keyup.enter="navigateToSearchResultPage(keyword)"
+        @input="handleInput"
+        @keyup.enter.stop.passive="navigateToSearchResultPage(keyword)"
+        @keyup.up.stop.passive="handleKeyUp"
+        @keyup.down.stop.passive="handleKeyDown"
+        @keydown.stop="() => {}"
       >
       <button
         p-2
@@ -218,13 +199,14 @@ async function handleClearSearchHistory() {
 
     <Transition name="result-list">
       <div
-        v-if="isFocus && (suggestions.length !== 0 || searchHistory.length !== 0)"
-        class="search-suggestion search-history min-h-60px z-3"
+        v-if="
+          isFocus
+            && searchHistory.length !== 0
+            && keyword.length === 0
+        "
+        id="search-history"
       >
-        <div
-          v-show="keyword.length === 0"
-          class="history-list flex flex-col gap-y-2"
-        >
+        <div class="history-list flex flex-col gap-y-2">
           <div class="title p-2 pb-0 flex justify-between">
             <span>{{ $t('search_bar.history_title') }}</span>
             <button class="rounded-2 duration-300 pointer-events-auto cursor-pointer" hover="text-$bew-theme-color" text="base $bew-text-2" @click="handleClearSearchHistory">
@@ -251,10 +233,16 @@ async function handleClearSearchHistory() {
             </div>
           </div>
         </div>
+      </div>
+    </Transition>
 
+    <Transition name="result-list">
+      <div
+        v-if="isFocus && suggestions.length !== 0 && keyword.length > 0"
+        id="search-suggestion"
+      >
         <div
           v-for="(item, index) in suggestions"
-          v-show="keyword.length > 0"
           :key="index"
           ref="suggestionItemRef"
           class="suggestion-item"
@@ -351,7 +339,7 @@ async function handleClearSearchHistory() {
       hover:bg-$bew-fill-2;
   }
 
-  .search-history {
+  #search-history {
     @include search-content;
     --at-apply: bg-$bew-elevated-1;
 
@@ -369,7 +357,7 @@ async function handleClearSearchHistory() {
     }
   }
 
-  .search-suggestion {
+  #search-suggestion {
     @include search-content;
     --at-apply: bg-$bew-elevated-1;
 

From 3638125c49f481a19b6c85cc88785bb9da54538a Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 16 Jan 2024 23:26:41 +0800
Subject: [PATCH 10/45] =?UTF-8?q?fix:=20=E4=BB=8E=E7=A8=8D=E5=90=8E?=
 =?UTF-8?q?=E5=86=8D=E7=9C=8B=E6=89=93=E5=BC=80=E8=A7=86=E9=A2=91=E6=97=B6?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E8=B7=B3=E8=BD=AC=20#180?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/contentScripts/views/App.vue | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index e5927d6a..a3f9fa64 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -95,7 +95,7 @@ watch(() => settings.value.adaptToOtherPageStyles, () => {
 })
 
 onMounted(() => {
-  openVideoPageIfBvidExists()
+  // openVideoPageIfBvidExists()
 
   if (isHomePage()) {
     // Force overwrite Bilibili Evolved body tag & html tag background color
@@ -249,15 +249,21 @@ provide<BewlyAppProvider>('BEWLY_APP', {
 function openVideoPageIfBvidExists() {
   // Assume the URL is https://www.bilibili.com/?bvid=BV1be41127ft&spm_id_from=333.788.seo.out
 
-  // Get the current URL's query string
-  const queryString = window.location.search
-  // Create a URLSearchParams instance
-  const urlParams = new URLSearchParams(queryString)
-  const bvid = urlParams.get('bvid')
+  //   // Get the current URL's query string
+  //   const queryString = window.location.search
+  //   // Create a URLSearchParams instance
+  //   const urlParams = new URLSearchParams(queryString)
+  //   const bvid = urlParams.get('bvid')
 
   if (bvid)
     window.open(`https://www.bilibili.com/video/${bvid}`, '_self')
 }
+
+provide('handleBackToTop', handleBackToTop)
+provide('handleRefresh', handleRefresh)
+provide('activatedPage', activatedPage)
+provide('scrollbarRef', scrollbarRef)
+provide('mainAppRef', mainAppRef)
 </script>
 
 <template>

From acf76af37b5684913a3b90e0d7f0bb6ae3830d20 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 16 Jan 2024 23:56:38 +0800
Subject: [PATCH 11/45] style: adapt to  unadapted areas

---
 src/styles/adaptedStyles/channelPage.scss | 72 +++++++++++++++++------
 1 file changed, 53 insertions(+), 19 deletions(-)

diff --git a/src/styles/adaptedStyles/channelPage.scss b/src/styles/adaptedStyles/channelPage.scss
index 28ea9d7a..ad581795 100644
--- a/src/styles/adaptedStyles/channelPage.scss
+++ b/src/styles/adaptedStyles/channelPage.scss
@@ -1,41 +1,66 @@
 .bewly-design {
-  .channel-swiper .channel-carousel-tool .channel-nav-click li.active {
-    background-color: var(--bew-theme-color);
-  }
-
-  .inner-c .play-icon.button,
-  .hover-c .play-icon.button {
-    background-color: var(--bew-theme-color-80);
-  }
-
   .banner-wrapper {
     background-color: black;
     margin-bottom: 0 !important;
     padding-bottom: 20px !important;
   }
 
-  .promotion-c {
+  .index-module {
+    padding-bottom: 20px;
+    background: linear-gradient(0deg,#111319 40px,rgba(17,19,25,.8) 60.12%,rgba(20,20,20,.0001))
+  }
+
+  .promotion-c,
+  .link-c .link,
+  .section-title .subTitle {
     background-color: var(--bew-fill-1);
   }
 
   .hover-c .title,
-  :not(.index-module) > .inner-c .title {
+  :not(.index-module) > .inner-c .title,
+  .link-c .link,
+  .section-title .subTitle {
     color: var(--bew-text-1);
   }
 
-  .banner-wrapper .side-list .side-item .title {
+  .banner-wrapper .side-list .side-item .title,
+  .section-title .subTitle.highlight {
     color: white;
   }
 
-  .index-module .all-a:hover .all,
-  .index-module .all-a:hover .arrow-all,
-  .index-module .sub-m:hover,
-  .hot-module .hot-item:hover .title,
-  .promotion-c:hover .title,
-  .hover-c:hover .title {
-    color: var(--bew-theme-color);
+  .link-c .link {
+    border-color: var(--bew-border-color);
   }
 
+  // #region theme color adaption part
+  // Increase the priority of the style inside by writing a non-existent selector in :not()
+  :not(fjdslfds) {
+    .channel-swiper .channel-carousel-tool .channel-nav-click li.active,
+    .hot-module .left .goto,
+    .switch-c.checked,
+    .section-title .subTitle.highlight {
+      background-color: var(--bew-theme-color);
+    }
+
+    .inner-c .play-icon.button,
+    .hover-c .play-icon.button,
+    .hot-module .left .goto:hover {
+      background-color: var(--bew-theme-color-80);
+    }
+
+    .index-module .all-a:hover .all,
+    .index-module .all-a:hover .arrow-all,
+    .index-module .sub-m:hover,
+    .hot-module .hot-item:hover .title,
+    .promotion-c:hover .title,
+    .hover-c:hover .title,
+    .switch-c .round {
+      color: var(--bew-theme-color);
+    }
+  }
+  // #endregion
+
+  // #region dark mode adaption part
   &.dark {
     .channel-swiper .channel-carousel-tool .channel-nav-click li {
       background-color: var(--bew-fill-1);
@@ -44,5 +69,14 @@
     .channel-container .el-input__inner {
       box-shadow: 0 0 0 1px var(--bew-border-color) inset;
     }
+
+    .b-img {
+      background-color: var(--bew-fill-4);
+    }
+
+    .season-cover {
+      background-color: transparent;
+    }
   }
+  // #endregion
 }

From 0137f43cedb0c89547d161f204a55d8bbd30e04f Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 17 Jan 2024 00:29:16 +0800
Subject: [PATCH 12/45] style: adjust areas not yet compatible with dark mode

---
 src/styles/adaptedStyles/channelPage.scss |  4 ----
 src/styles/adaptedStyles/comments.scss    | 22 +++++++++++++++++-----
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/styles/adaptedStyles/channelPage.scss b/src/styles/adaptedStyles/channelPage.scss
index ad581795..90c9bb33 100644
--- a/src/styles/adaptedStyles/channelPage.scss
+++ b/src/styles/adaptedStyles/channelPage.scss
@@ -70,10 +70,6 @@
       box-shadow: 0 0 0 1px var(--bew-border-color) inset;
     }
 
-    .b-img {
-      background-color: var(--bew-fill-4);
-    }
-
     .season-cover {
       background-color: transparent;
     }
diff --git a/src/styles/adaptedStyles/comments.scss b/src/styles/adaptedStyles/comments.scss
index f46b5703..4eeec120 100644
--- a/src/styles/adaptedStyles/comments.scss
+++ b/src/styles/adaptedStyles/comments.scss
@@ -53,14 +53,25 @@
 
   &.dark {
     // Comment input box
-    .reply-box .box-normal .reply-box-warp .reply-box-textarea {
-      background-color: var(--bew-fill-1);
-      border-color: var(--bew-border-color);
-    }
+    // .reply-box .box-normal .reply-box-warp .reply-box-textarea {
+    //   background-color: var(--bew-fill-1);
+    //   border-color: var(--bew-border-color);
+    // }
 
     .bili-comment.browser-pc {
       // background-color: var(--bew-content-solid-1);
     }
+
+    .reply-box .box-normal .reply-box-warp,
+    .reply-box .box-expand .reply-box-emoji .emoji-btn,
+    .reply-box .box-expand .at-btn,
+    .reply-box .box-expand .image-btn {
+      border-color: var(--bew-border-color);
+    }
+
+    .reply-box .box-expand .svg-icon svg path {
+      filter: invert(1) hue-rotate(180deg);
+    }
   }
   // #endregion
 
@@ -283,7 +294,8 @@
       color: var(--bew-text-2) !important;
     }
 
-    .bb-comment .reply-notice .notice-item, .comment-bilibili-fold .reply-notice .notice-item{
+    .bb-comment .reply-notice .notice-item,
+    .comment-bilibili-fold .reply-notice .notice-item {
       background-color: var(--Ye1);
       border-color: var(--Ye1);
       color: var(--Or7);

From f78f127cd8df21d0b322803c8af7d06345741630 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 17 Jan 2024 00:29:34 +0800
Subject: [PATCH 13/45] chore: adjust regex

---
 src/styles/adaptedStyles/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/adaptedStyles/index.ts b/src/styles/adaptedStyles/index.ts
index e139cf0e..7084de32 100644
--- a/src/styles/adaptedStyles/index.ts
+++ b/src/styles/adaptedStyles/index.ts
@@ -59,7 +59,7 @@ async function setupStyles() {
 
   // anime page & chinese anime page
   else if (
-    /https?:\/\/www.bilibili.com\/(anime|guochuang).*/.test(currentUrl))
+    /https?:\/\/(www.)?bilibili.com\/(anime|guochuang).*/.test(currentUrl))
     await import('./animePage.scss')
 
   // channel page e.g. tv shows, movie, variety shows, mooc page

From 47f12ec9e3c541adbc6c1a1f22832a4454e6725c Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 17 Jan 2024 00:30:51 +0800
Subject: [PATCH 14/45] chore: update version number

---
 .github/workflows/changelog.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml
index b61776d4..9e51c045 100644
--- a/.github/workflows/changelog.yml
+++ b/.github/workflows/changelog.yml
@@ -19,6 +19,6 @@ jobs:
           token: ${{ secrets.RELEASE_TOKEN }}
           release-type: node
           package-name: release-please-action
-          release-as: 0.14.0
+          release-as: 0.14.1
           signoff: 'github-actions <41898282+github-actions[bot]@users.noreply.github.com>'
           changelog-types: '[{"type":"types","section":"Types","hidden":false},{"type":"revert","section":"Reverts","hidden":false},{"type":"feat","section":"Features","hidden":false},{"type":"fix","section":"Bug Fixes","hidden":false},{"type":"improvement","section":"Feature Improvements","hidden":false},{"type":"docs","section":"Docs","hidden":false},{"type":"i18n","section":"I18n","hidden":false},{"type":"ci","section":"CI","hidden":false},{"type":"chore","section":"Miscellaneous","hidden":false},{"type":"contributor","section":"New Contributors","hidden":false},{"type":"notice","section":"Notices","hidden":false}]'

From 34e241b4f15e3ed64eb4e1585458193772824021 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Fri, 19 Jan 2024 01:08:52 +0800
Subject: [PATCH 15/45] =?UTF-8?q?fix:=20=E9=A1=B6=E6=A0=8F=E7=9A=84?=
 =?UTF-8?q?=E5=8E=86=E5=8F=B2=E8=AE=B0=E5=BD=95=EF=BC=8C=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91=E6=97=B6=E4=BB=85up=E4=B8=BB=E5=88=B6?=
 =?UTF-8?q?=E4=BD=9C=E8=A7=86=E9=A2=91=E5=8F=AF=E4=BB=A5=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=E6=88=90=E5=8A=9F=EF=BC=8C=E5=85=B6=E4=BD=99=E7=9A=86=E8=B7=B3?=
 =?UTF-8?q?=E8=BD=AC=E4=B8=BB=E9=A1=B5=20#193?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TopBar/components/HistoryPop.vue | 4 +++-
 src/components/TopBar/types.ts                  | 1 +
 src/contentScripts/views/History/History.vue    | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/TopBar/components/HistoryPop.vue b/src/components/TopBar/components/HistoryPop.vue
index 805ae686..f196a27a 100644
--- a/src/components/TopBar/components/HistoryPop.vue
+++ b/src/components/TopBar/components/HistoryPop.vue
@@ -113,7 +113,9 @@ function onClickTab(tabId: number) {
 function getHistoryUrl(item: HistoryItem) {
   // Video
   if (activatedTab.value === 0) {
-    return `https://www.bilibili.com/video/${item.history.bvid}`
+    if (item.history.business === HistoryType.PGC)
+      return item.uri
+    return `//www.bilibili.com/video/${item.history.bvid}`
   }
   // Live
   else if (activatedTab.value === 1) {
diff --git a/src/components/TopBar/types.ts b/src/components/TopBar/types.ts
index e495770c..07617036 100644
--- a/src/components/TopBar/types.ts
+++ b/src/components/TopBar/types.ts
@@ -104,6 +104,7 @@ export interface HistoryItem {
   duration: number
   kid: number
   live_status: 0 | 1 // 0：未开播 1：已开播
+  uri: string
 }
 
 export interface FavoriteCategory {
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index aed379fd..d6770c93 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -352,7 +352,7 @@ function jumpToLoginPage() {
                 <template
                   v-else-if="historyItem.history.business === HistoryBusiness.PGC"
                 >
-                  Anime
+                  PGC
                 </template>
               </span>
 

From d964d1c38e25b3971c2f723620368fd4a4ffb1e7 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 17 Jan 2024 00:33:12 +0800
Subject: [PATCH 16/45] chore(main): release 0.14.1

Signed-off-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 19 +++++++++++++++++++
 package.json |  2 +-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 06bcd1ef..a735ba96 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,24 @@
 # Changelog
 
+## [0.14.1](https://github.com/hakadao/BewlyBewly/compare/v0.14.0...v0.14.1) (2024-01-16)
+
+
+### Reverts
+
+* revert search bar code to previous version to undo recent changes ([272ed02](https://github.com/hakadao/BewlyBewly/commit/272ed0233abc1f0f5fb3f9be812f95fd9c371a06))
+
+
+### Bug Fixes
+
+* 专栏页面侧边栏目录按钮垂直居中 ([e2f4427](https://github.com/hakadao/BewlyBewly/commit/e2f44275e3d77faedf5b00df8b8443fb06f48c9e))
+* 从稍后再看打开视频时自动跳转 [#180](https://github.com/hakadao/BewlyBewly/issues/180) ([1edf382](https://github.com/hakadao/BewlyBewly/commit/1edf3822770c172a371ea7183e9d8582ffc9ffc2))
+
+
+### Miscellaneous
+
+* adjust regex ([781b2c0](https://github.com/hakadao/BewlyBewly/commit/781b2c07d781dddb02662b875e46c58eb8984f20))
+* update version number ([d459603](https://github.com/hakadao/BewlyBewly/commit/d459603a5b27874883263a19b0b654fc872dd206))
+
 ## [0.14.0](https://github.com/hakadao/BewlyBewly/compare/v0.13.3...v0.14.0) (2024-01-14)
 
 
diff --git a/package.json b/package.json
index efea5d59..3aa722e9 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "bewly-bewly",
   "displayName": "BewlyBewly",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "private": true,
   "packageManager": "pnpm@8.14.1",
   "description": "Just make a few small changes to your Bilibili homepage.",

From 8e2e772e54626eee2a10ba6c73f1118fd835dd3f Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 17 Jan 2024 10:28:56 +0800
Subject: [PATCH 17/45] chore: changelog work add style changes type

---
 .github/workflows/changelog.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml
index 9e51c045..007377bb 100644
--- a/.github/workflows/changelog.yml
+++ b/.github/workflows/changelog.yml
@@ -21,4 +21,4 @@ jobs:
           package-name: release-please-action
           release-as: 0.14.1
           signoff: 'github-actions <41898282+github-actions[bot]@users.noreply.github.com>'
-          changelog-types: '[{"type":"types","section":"Types","hidden":false},{"type":"revert","section":"Reverts","hidden":false},{"type":"feat","section":"Features","hidden":false},{"type":"fix","section":"Bug Fixes","hidden":false},{"type":"improvement","section":"Feature Improvements","hidden":false},{"type":"docs","section":"Docs","hidden":false},{"type":"i18n","section":"I18n","hidden":false},{"type":"ci","section":"CI","hidden":false},{"type":"chore","section":"Miscellaneous","hidden":false},{"type":"contributor","section":"New Contributors","hidden":false},{"type":"notice","section":"Notices","hidden":false}]'
+          changelog-types: '[{"type":"types","section":"Types","hidden":false},{"type":"revert","section":"Reverts","hidden":false},{"type":"feat","section":"Features","hidden":false},{"type":"fix","section":"Bug Fixes","hidden":false},{"type":"improvement","section":"Feature Improvements","hidden":false},{"type":"docs","section":"Docs","hidden":false},{"type":"i18n","section":"I18n","hidden":false},{"type":"style","section":"Style Changes","hidden":false},{"type":"ci","section":"CI","hidden":false},{"type":"chore","section":"Miscellaneous","hidden":false},{"type":"contributor","section":"New Contributors","hidden":false},{"type":"notice","section":"Notices","hidden":false}]'

From f14a994527c755615b6cf1895bd8dd2b826747a2 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Fri, 19 Jan 2024 01:10:03 +0800
Subject: [PATCH 18/45] chore: update version number

---
 .github/workflows/changelog.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml
index 007377bb..e5ee3658 100644
--- a/.github/workflows/changelog.yml
+++ b/.github/workflows/changelog.yml
@@ -19,6 +19,6 @@ jobs:
           token: ${{ secrets.RELEASE_TOKEN }}
           release-type: node
           package-name: release-please-action
-          release-as: 0.14.1
+          release-as: 0.14.2
           signoff: 'github-actions <41898282+github-actions[bot]@users.noreply.github.com>'
           changelog-types: '[{"type":"types","section":"Types","hidden":false},{"type":"revert","section":"Reverts","hidden":false},{"type":"feat","section":"Features","hidden":false},{"type":"fix","section":"Bug Fixes","hidden":false},{"type":"improvement","section":"Feature Improvements","hidden":false},{"type":"docs","section":"Docs","hidden":false},{"type":"i18n","section":"I18n","hidden":false},{"type":"style","section":"Style Changes","hidden":false},{"type":"ci","section":"CI","hidden":false},{"type":"chore","section":"Miscellaneous","hidden":false},{"type":"contributor","section":"New Contributors","hidden":false},{"type":"notice","section":"Notices","hidden":false}]'

From d32e5434281a2a9523a5f6555a5f906b85e1f46c Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Fri, 19 Jan 2024 01:11:55 +0800
Subject: [PATCH 19/45] chore(main): release 0.14.2

Signed-off-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 13 +++++++++++++
 package.json |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a735ba96..14b6cb1d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,18 @@
 # Changelog
 
+## [0.14.2](https://github.com/hakadao/BewlyBewly/compare/v0.14.1...v0.14.2) (2024-01-18)
+
+
+### Bug Fixes
+
+* 顶栏的历史记录，跳转视频时仅up主制作视频可以跳转成功，其余皆跳转主页 [#193](https://github.com/hakadao/BewlyBewly/issues/193) ([6711291](https://github.com/hakadao/BewlyBewly/commit/67112911460d5dbf7d87d3cf64c00288c1462c3f))
+
+
+### Miscellaneous
+
+* changelog work add style changes type ([0d98064](https://github.com/hakadao/BewlyBewly/commit/0d980646018d01ae89a1e9c6ce36d9eeeabac59f))
+* update version number ([8cd6112](https://github.com/hakadao/BewlyBewly/commit/8cd6112d2e1d618e0f69a25c88179aae990ea8a8))
+
 ## [0.14.1](https://github.com/hakadao/BewlyBewly/compare/v0.14.0...v0.14.1) (2024-01-16)
 
 
diff --git a/package.json b/package.json
index 3aa722e9..3e5ec26f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "bewly-bewly",
   "displayName": "BewlyBewly",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "private": true,
   "packageManager": "pnpm@8.14.1",
   "description": "Just make a few small changes to your Bilibili homepage.",

From 1c6bb9e1d7566933111ee23b667affbdb3aca7d4 Mon Sep 17 00:00:00 2001
From: MengNianxiaoyao <2589141604@qq.com>
Date: Wed, 17 Jan 2024 22:37:12 +0800
Subject: [PATCH 20/45] chore: upgrade build deps version

---
 .github/workflows/ci.yml      | 12 ++++++------
 .github/workflows/release.yml | 14 +++++++-------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b3863ab5..20b4b951 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -12,9 +12,9 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2.4.0
+      - uses: actions/setup-node@v4
         with:
           node-version: 16.x
           cache: pnpm
@@ -28,9 +28,9 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2.4.0
+      - uses: actions/setup-node@v4
         with:
           node-version: 18.x
           cache: pnpm
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index a1e9b61f..fa5fed69 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -9,9 +9,9 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2.4.0
+      - uses: actions/setup-node@v4
         with:
           node-version: 16.x
           cache: pnpm
@@ -25,11 +25,11 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2.4.0
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18.17.0
+          node-version: 18.x
           cache: pnpm
 
       - name: Install

From 32979ac8bb37f0bf832689b67a5f28b942bd798d Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 20 Jan 2024 07:56:10 +0000
Subject: [PATCH 21/45] chore(deps-dev): bump vite from 3.2.7 to 3.2.8

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 3.2.7 to 3.2.8.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v3.2.8/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v3.2.8/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package.json   |  2 +-
 pnpm-lock.yaml | 32 ++++++++++++++++----------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 3e5ec26f..7c07201f 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     "unplugin-auto-import": "^0.11.5",
     "unplugin-icons": "^0.14.15",
     "unplugin-vue-components": "^0.22.12",
-    "vite": "^3.2.7",
+    "vite": "^3.2.8",
     "vitest": "^0.24.5",
     "vue": "^3.3.8",
     "vue-demi": "^0.13.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cfc0e31d..d645930f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -81,7 +81,7 @@ devDependencies:
     version: 0.54.3
   '@vitejs/plugin-vue':
     specifier: ^3.2.0
-    version: 3.2.0(vite@3.2.7)(vue@3.4.13)
+    version: 3.2.0(vite@3.2.8)(vue@3.4.13)
   '@vue/compiler-sfc':
     specifier: ^3.3.8
     version: 3.4.13
@@ -141,7 +141,7 @@ devDependencies:
     version: 4.9.5
   unocss:
     specifier: ^0.54.3
-    version: 0.54.3(postcss@8.4.33)(vite@3.2.7)
+    version: 0.54.3(postcss@8.4.33)(vite@3.2.8)
   unplugin-auto-import:
     specifier: ^0.11.5
     version: 0.11.5(@vueuse/core@10.7.2)
@@ -152,8 +152,8 @@ devDependencies:
     specifier: ^0.22.12
     version: 0.22.12(vue@3.4.13)
   vite:
-    specifier: ^3.2.7
-    version: 3.2.7(@types/node@18.19.6)(sass@1.69.7)(terser@5.26.0)
+    specifier: ^3.2.8
+    version: 3.2.8(@types/node@18.19.6)(sass@1.69.7)(terser@5.26.0)
   vitest:
     specifier: ^0.24.5
     version: 0.24.5(jsdom@20.0.3)(sass@1.69.7)(terser@5.26.0)
@@ -1572,12 +1572,12 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /@unocss/astro@0.54.3(vite@3.2.7):
+  /@unocss/astro@0.54.3(vite@3.2.8):
     resolution: {integrity: sha512-/gmnSIIsYtAVPbcIGXuuaoCM71x8s8I0VtsEQZicNB51ux7BhSyXIQ5CE/W384NqTaqJt7gHVfbjn+io4ZSJXw==}
     dependencies:
       '@unocss/core': 0.54.3
       '@unocss/reset': 0.54.3
-      '@unocss/vite': 0.54.3(vite@3.2.7)
+      '@unocss/vite': 0.54.3(vite@3.2.8)
     transitivePeerDependencies:
       - rollup
       - vite
@@ -1741,7 +1741,7 @@ packages:
       '@unocss/core': 0.54.3
     dev: true
 
-  /@unocss/vite@0.54.3(vite@3.2.7):
+  /@unocss/vite@0.54.3(vite@3.2.8):
     resolution: {integrity: sha512-UxVo7WQpTAr5uHyjLKW1xs5kcecctUXsPApUChFxQwHRUeMT1gnBftd0r7dtSwdsdELClbIUgRVCrpFAPy2Y3g==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
@@ -1756,19 +1756,19 @@ packages:
       chokidar: 3.5.3
       fast-glob: 3.3.2
       magic-string: 0.30.5
-      vite: 3.2.7(@types/node@18.19.6)(sass@1.69.7)(terser@5.26.0)
+      vite: 3.2.8(@types/node@18.19.6)(sass@1.69.7)(terser@5.26.0)
     transitivePeerDependencies:
       - rollup
     dev: true
 
-  /@vitejs/plugin-vue@3.2.0(vite@3.2.7)(vue@3.4.13):
+  /@vitejs/plugin-vue@3.2.0(vite@3.2.8)(vue@3.4.13):
     resolution: {integrity: sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^3.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 3.2.7(@types/node@18.19.6)(sass@1.69.7)(terser@5.26.0)
+      vite: 3.2.8(@types/node@18.19.6)(sass@1.69.7)(terser@5.26.0)
       vue: 3.4.13(typescript@4.9.5)
     dev: true
 
@@ -7649,7 +7649,7 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unocss@0.54.3(postcss@8.4.33)(vite@3.2.7):
+  /unocss@0.54.3(postcss@8.4.33)(vite@3.2.8):
     resolution: {integrity: sha512-uaoCKFigRkqceLmBrtWhLqQR6D6NyBAtSFVUnM1m57BSqA0EwAFmBsgoynzAmZRTQQFsPrBzKQjEmaCUTyUd9Q==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -7658,7 +7658,7 @@ packages:
       '@unocss/webpack':
         optional: true
     dependencies:
-      '@unocss/astro': 0.54.3(vite@3.2.7)
+      '@unocss/astro': 0.54.3(vite@3.2.8)
       '@unocss/cli': 0.54.3
       '@unocss/core': 0.54.3
       '@unocss/extractor-arbitrary-variants': 0.54.3
@@ -7677,7 +7677,7 @@ packages:
       '@unocss/transformer-compile-class': 0.54.3
       '@unocss/transformer-directives': 0.54.3
       '@unocss/transformer-variant-group': 0.54.3
-      '@unocss/vite': 0.54.3(vite@3.2.7)
+      '@unocss/vite': 0.54.3(vite@3.2.8)
     transitivePeerDependencies:
       - postcss
       - rollup
@@ -7849,8 +7849,8 @@ packages:
       extsprintf: 1.3.0
     dev: true
 
-  /vite@3.2.7(@types/node@18.19.6)(sass@1.69.7)(terser@5.26.0):
-    resolution: {integrity: sha512-29pdXjk49xAP0QBr0xXqu2s5jiQIXNvE/xwd0vUizYT2Hzqe4BksNNoWllFVXJf4eLZ+UlVQmXfB4lWrc+t18g==}
+  /vite@3.2.8(@types/node@18.19.6)(sass@1.69.7)(terser@5.26.0):
+    resolution: {integrity: sha512-EtQU16PLIJpAZol2cTLttNP1mX6L0SyI0pgQB1VOoWeQnMSvtiwovV3D6NcjN8CZQWWyESD2v5NGnpz5RvgOZA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -7918,7 +7918,7 @@ packages:
       tinybench: 2.5.1
       tinypool: 0.3.1
       tinyspy: 1.1.1
-      vite: 3.2.7(@types/node@18.19.6)(sass@1.69.7)(terser@5.26.0)
+      vite: 3.2.8(@types/node@18.19.6)(sass@1.69.7)(terser@5.26.0)
     transitivePeerDependencies:
       - less
       - sass

From cb165ba358ac43d34536e4996b47a72acb2056dd Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 23 Jan 2024 01:21:10 +0800
Subject: [PATCH 22/45] fix: resolve issue with displaying full favorites video
 list (#207)

---
 src/contentScripts/views/Favorites/Favorites.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index dc5a2d91..3ff135f5 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -129,10 +129,7 @@ async function getFavoriteResources(
       if (Array.isArray(res.data.medias) && res.data.medias.length > 0)
         favoriteResources.push(...res.data.medias)
 
-      if (
-        res.data.medias === null
-        || (res.data.medias.length < 20 && favoriteResources.length > 0)
-      )
+      if (!res.data.medias)
         noMoreContent.value = true
     }
   }
@@ -172,7 +169,7 @@ function handleUnfavorite(favoriteResource: FavoriteResource) {
     csrf: getCSRF(),
   }).then((res) => {
     if (res.code === 0)
-      favoriteResources.splice(favoriteResources.indexOf(favoriteResource), 1)
+      favoriteResources.splice(favoriteResources.indexOf(favoriteResource as FavoriteItem), 1)
   })
 }
 </script>

From 5c83b934d1119a64dccc9f2c62388c0caa0f605d Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 23 Jan 2024 01:34:32 +0800
Subject: [PATCH 23/45] fix: top bar not showing when reaching the top of the
 moments page (#205)

---
 src/components/TopBar/TopBar.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 7e7b2962..9affb9f9 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -141,6 +141,9 @@ function handleScroll() {
     scrollTop.value = document.documentElement.scrollTop
   }
 
+  if (scrollTop.value === 0)
+    toggleTopBarVisible(true)
+
   if (settings.value.autoHideTopBar && !hoveringTopBar.value && scrollTop.value !== 0) {
     if (scrollTop.value > oldScrollTop.value)
       toggleTopBarVisible(false)

From 05b02365fe7b07212c8cc01a158bab8d918ed7fc Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 23 Jan 2024 01:42:48 +0800
Subject: [PATCH 24/45] fix: exclude the unsupported page (#206)

---
 src/contentScripts/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index 70207ab8..9e596714 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -56,7 +56,7 @@ function isSupportedPages() {
     // notifications page
     || /https?:\/\/message.bilibili.com\.*/.test(currentUrl)
     // bilibili channel page b站分区页面
-    || /https?:\/\/www.bilibili.com\/v\/.*/.test(currentUrl)
+    || /https?:\/\/www.bilibili.com\/v\/(?!popular).*/.test(currentUrl)
     // anime page & chinese anime page
     || /https?:\/\/www.bilibili.com\/(anime|guochuang).*/.test(currentUrl)
     // channel page e.g. tv shows, movie, variety shows, mooc page

From a359d870984e2ee8e83ca6ea18032813dfd68bd4 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 23 Jan 2024 01:49:29 +0800
Subject: [PATCH 25/45] style: adjust homepage styles

---
 src/styles/adaptedStyles/homePage.scss | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/styles/adaptedStyles/homePage.scss b/src/styles/adaptedStyles/homePage.scss
index 6babbd5a..82a80d9f 100644
--- a/src/styles/adaptedStyles/homePage.scss
+++ b/src/styles/adaptedStyles/homePage.scss
@@ -9,7 +9,7 @@
   //   box-shadow: none;
   //   z-index: 60;
   // }
-  
+
   // .header-channel-fixed {
   //   background-color: var(--bew-elevated-2);
   //   backdrop-filter: var(--bew-filter-glass);
@@ -34,6 +34,11 @@
   //   filter: var(--bew-filter-icon-glow);
   // }
 
+  .bili-live-card .bili-live-card__info--living img,
+  .single-card.floor-card .living > img {
+    filter: var(--bew-filter-icon-glow);
+  }
+
   &.dark {
     .floor-card .floor-title {
       color: var(--bew-text-1);
@@ -43,4 +48,4 @@
       background-color: var(--bew-content-solid-1);
     }
   }
-}
\ No newline at end of file
+}

From 1e6ba5de532d5f9516d585423d13781b2ea3b6fb Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 23 Jan 2024 02:00:06 +0800
Subject: [PATCH 26/45] chore: update version number

---
 .github/workflows/changelog.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml
index e5ee3658..2be5bba6 100644
--- a/.github/workflows/changelog.yml
+++ b/.github/workflows/changelog.yml
@@ -19,6 +19,6 @@ jobs:
           token: ${{ secrets.RELEASE_TOKEN }}
           release-type: node
           package-name: release-please-action
-          release-as: 0.14.2
+          release-as: 0.14.3
           signoff: 'github-actions <41898282+github-actions[bot]@users.noreply.github.com>'
           changelog-types: '[{"type":"types","section":"Types","hidden":false},{"type":"revert","section":"Reverts","hidden":false},{"type":"feat","section":"Features","hidden":false},{"type":"fix","section":"Bug Fixes","hidden":false},{"type":"improvement","section":"Feature Improvements","hidden":false},{"type":"docs","section":"Docs","hidden":false},{"type":"i18n","section":"I18n","hidden":false},{"type":"style","section":"Style Changes","hidden":false},{"type":"ci","section":"CI","hidden":false},{"type":"chore","section":"Miscellaneous","hidden":false},{"type":"contributor","section":"New Contributors","hidden":false},{"type":"notice","section":"Notices","hidden":false}]'

From 9d00201bdf9d7e7edd2b791042677bb6be5c4b63 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 23 Jan 2024 02:01:43 +0800
Subject: [PATCH 27/45] chore(main): release 0.14.3

Signed-off-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 20 ++++++++++++++++++++
 package.json |  2 +-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 14b6cb1d..5b4b70ce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,25 @@
 # Changelog
 
+## [0.14.3](https://github.com/hakadao/BewlyBewly/compare/v0.14.2...v0.14.3) (2024-01-22)
+
+
+### Bug Fixes
+
+* exclude the unsupported page ([#206](https://github.com/hakadao/BewlyBewly/issues/206)) ([fda3469](https://github.com/hakadao/BewlyBewly/commit/fda3469425c93e7cc9157d017164d308966e474d))
+* resolve issue with displaying full favorites video list ([#207](https://github.com/hakadao/BewlyBewly/issues/207)) ([778382e](https://github.com/hakadao/BewlyBewly/commit/778382eb11028fc02fd491b77bca19badce380e1))
+* top bar not showing when reaching the top of the moments page ([#205](https://github.com/hakadao/BewlyBewly/issues/205)) ([ec38faf](https://github.com/hakadao/BewlyBewly/commit/ec38fafeab6c80dd45bc0e8f29598eeaed43f202))
+
+
+### Style Changes
+
+* adjust homepage styles ([b2c142d](https://github.com/hakadao/BewlyBewly/commit/b2c142d5380e98e82640eee3f31abaf519736f45))
+
+
+### Miscellaneous
+
+* **deps-dev:** bump vite from 3.2.7 to 3.2.8 ([93a41fa](https://github.com/hakadao/BewlyBewly/commit/93a41fae8e370f9108c76c1e76f94b1e1c080ccc))
+* update version number ([4b4808c](https://github.com/hakadao/BewlyBewly/commit/4b4808cbfe6adc3cf8ce38b0dd7208cfd81d80c5))
+
 ## [0.14.2](https://github.com/hakadao/BewlyBewly/compare/v0.14.1...v0.14.2) (2024-01-18)
 
 
diff --git a/package.json b/package.json
index 7c07201f..e3d3b9fb 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "bewly-bewly",
   "displayName": "BewlyBewly",
-  "version": "0.14.2",
+  "version": "0.14.3",
   "private": true,
   "packageManager": "pnpm@8.14.1",
   "description": "Just make a few small changes to your Bilibili homepage.",

From c40fe57be09d89ba1d28ca518f03b49a33ae0503 Mon Sep 17 00:00:00 2001
From: starknt <1431880400@qq.com>
Date: Thu, 11 Jan 2024 16:38:11 +0800
Subject: [PATCH 28/45] refactor: improve components load method, and improve
 provide `app`

---
 src/contentScripts/views/App.vue             | 13 ++++++++-----
 src/contentScripts/views/History/History.vue |  1 +
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index a3f9fa64..d096dde4 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -259,11 +259,14 @@ function openVideoPageIfBvidExists() {
     window.open(`https://www.bilibili.com/video/${bvid}`, '_self')
 }
 
-provide('handleBackToTop', handleBackToTop)
-provide('handleRefresh', handleRefresh)
-provide('activatedPage', activatedPage)
-provide('scrollbarRef', scrollbarRef)
-provide('mainAppRef', mainAppRef)
+provide<BewlyAppProvider>('BEWLY_APP', {
+  activatedPage,
+  mainAppRef,
+  scrollbarRef,
+  handleBackToTop,
+  handlePageRefresh,
+  handleReachBottom,
+})
 </script>
 
 <template>
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index d6770c93..13fad48d 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -3,6 +3,7 @@ import { useDateFormat } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
 // import type { HistoryItem } from './types'
+import type { Ref } from 'vue'
 import { getCSRF, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 import { Business } from '~/models/video/history'

From 767e8a7aa62786bbf89065e04ddf1012ae11b3e7 Mon Sep 17 00:00:00 2001
From: starknt <1431880400@qq.com>
Date: Fri, 26 Jan 2024 14:52:54 +0800
Subject: [PATCH 29/45] fix: merge `dev` branch

---
 src/contentScripts/views/App.vue | 28 ++++++++++------------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index d096dde4..f880c74a 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -237,27 +237,19 @@ function handleOsScroll() {
     topBarRef.value?.handleScroll()
 }
 
-provide<BewlyAppProvider>('BEWLY_APP', {
-  activatedPage,
-  mainAppRef,
-  scrollbarRef,
-  handleBackToTop,
-  handlePageRefresh,
-  handleReachBottom,
-})
 // fix #166 https://github.com/hakadao/BewlyBewly/issues/166
-function openVideoPageIfBvidExists() {
-  // Assume the URL is https://www.bilibili.com/?bvid=BV1be41127ft&spm_id_from=333.788.seo.out
+// function openVideoPageIfBvidExists() {
+// Assume the URL is https://www.bilibili.com/?bvid=BV1be41127ft&spm_id_from=333.788.seo.out
 
-  //   // Get the current URL's query string
-  //   const queryString = window.location.search
-  //   // Create a URLSearchParams instance
-  //   const urlParams = new URLSearchParams(queryString)
-  //   const bvid = urlParams.get('bvid')
+//   // Get the current URL's query string
+//   const queryString = window.location.search
+//   // Create a URLSearchParams instance
+//   const urlParams = new URLSearchParams(queryString)
+//   const bvid = urlParams.get('bvid')
 
-  if (bvid)
-    window.open(`https://www.bilibili.com/video/${bvid}`, '_self')
-}
+//   if (bvid)
+//     window.open(`https://www.bilibili.com/video/${bvid}`, '_self')
+// }
 
 provide<BewlyAppProvider>('BEWLY_APP', {
   activatedPage,

From a37c8ad13e5e752cb0dc80df39ef6ef3aa53b7e5 Mon Sep 17 00:00:00 2001
From: starknt <1431880400@qq.com>
Date: Fri, 26 Jan 2024 15:05:27 +0800
Subject: [PATCH 30/45] fix: `mainAppRef` inject logic

---
 src/components/Dock/Dock.vue                         | 4 +---
 src/components/RightSideButtons/RightSideButtons.vue | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index fa67426a..0c8901f5 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { Icon } from '@iconify/vue'
-import type { Ref } from 'vue'
 import type { CurrentDockItem, HoveringDockItem } from './types'
 import type { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
@@ -11,8 +10,7 @@ import { useMainStore } from '~/stores/mainStore'
 defineProps<{ activatedPage: AppPage }>()
 
 const emit = defineEmits(['change-page', 'settings-visibility-change'])
-
-const mainAppRef = inject('mainAppRef') as Ref<HTMLDivElement>
+const { mainAppRef } = useBewlyApp()
 
 const mainStore = useMainStore()
 const { t } = useI18n()
diff --git a/src/components/RightSideButtons/RightSideButtons.vue b/src/components/RightSideButtons/RightSideButtons.vue
index 3cd6614a..0ff268f4 100644
--- a/src/components/RightSideButtons/RightSideButtons.vue
+++ b/src/components/RightSideButtons/RightSideButtons.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
 import type { HoveringDockItem } from './types'
 import { settings } from '~/logic'
 
 const emit = defineEmits(['settings-visibility-change'])
-
-const mainAppRef = inject('mainAppRef') as Ref<HTMLDivElement>
+const { mainAppRef } = useBewlyApp()
 
 const hoveringDockItem = reactive<HoveringDockItem>({
   themeMode: false,

From b8a043cc60102595da113503110541762b9986c4 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 28 Jan 2024 17:35:46 +0800
Subject: [PATCH 31/45] i18n: update no_more_content text in en & jyut

---
 src/_locales/en.yml   | 2 +-
 src/_locales/jyut.yml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/_locales/en.yml b/src/_locales/en.yml
index d6b8d1c1..bc8e7c27 100644
--- a/src/_locales/en.yml
+++ b/src/_locales/en.yml
@@ -23,7 +23,7 @@ common:
   disable: Disable
   refresh: Refresh
   reset: Reset
-  no_more_content: No more content
+  no_more_content: No more content now, owari da
 settings:
   title: Settings
 
diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml
index af83c8c9..6dd5d331 100644
--- a/src/_locales/jyut.yml
+++ b/src/_locales/jyut.yml
@@ -23,7 +23,7 @@ common:
   disable: 閂埋
   refresh: 重新整理
   reset: 重置
-  no_more_content: 沒有更多內容了
+  no_more_content: 唔使睇喇，冇嘢喇
 settings:
   title: 設定
 

From 6b8363c52b2cd14cea4079a1f724714b3e00341b Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 28 Jan 2024 18:09:09 +0800
Subject: [PATCH 32/45] chore(eslint):  disable `no-alert` rule

---
 eslint.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/eslint.config.js b/eslint.config.js
index 05cc5939..c4549bae 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -14,6 +14,7 @@ module.exports = antfu({
         },
       },
     ],
+    'no-alert': 'off',
   },
   eslint: {
     ignorePatterns: [

From 74a7c62c9de94204b7950dda9774b59f9dceafaa Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 28 Jan 2024 18:37:31 +0800
Subject: [PATCH 33/45] perf(App): reduce KeepAlive usage

---
 src/contentScripts/views/App.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index f880c74a..6eff75ef 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -336,9 +336,7 @@ provide<BewlyAppProvider>('BEWLY_APP', {
               />
 
               <Transition name="page-fade">
-                <KeepAlive>
-                  <Component :is="pages[activatedPage]" :key="activatedPage" />
-                </KeepAlive>
+                <Component :is="pages[activatedPage]" />
               </Transition>
             </div>
           </main>

From 5ad23206217eac8f112f27740a7ee7bcbe913f4c Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 28 Jan 2024 19:08:41 +0800
Subject: [PATCH 34/45] refactor(useAppProvider): update `mainAppRef` type

---
 src/composables/useAppProvider.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/composables/useAppProvider.ts b/src/composables/useAppProvider.ts
index 794c5ba3..3cc8cd83 100644
--- a/src/composables/useAppProvider.ts
+++ b/src/composables/useAppProvider.ts
@@ -4,7 +4,7 @@ import type { AppPage } from '~/enums/appEnums'
 export interface BewlyAppProvider {
   activatedPage: Ref<AppPage>
   scrollbarRef: Ref<any>
-  mainAppRef: Ref<any>
+  mainAppRef: Ref<HTMLElement>
   handleReachBottom: Ref<(() => void) | undefined>
   handlePageRefresh: Ref<(() => void) | undefined>
   handleBackToTop: (targetScrollTop: number) => void

From b2832d5525fab07af82fd92fbc135bd1a56a14f5 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 28 Jan 2024 19:30:22 +0800
Subject: [PATCH 35/45] refactor: move the `OverlayScrollbars` style into
 `OverlayScrollbarsComponent`

---
 src/components/OverlayScrollbarsComponent.ts | 2 ++
 src/logic/common-setup.ts                    | 1 -
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/OverlayScrollbarsComponent.ts b/src/components/OverlayScrollbarsComponent.ts
index 338ec5ad..03054784 100644
--- a/src/components/OverlayScrollbarsComponent.ts
+++ b/src/components/OverlayScrollbarsComponent.ts
@@ -1,3 +1,5 @@
+import 'overlayscrollbars/overlayscrollbars.css'
+
 export default defineAsyncComponent(async () => {
   const { OverlayScrollbarsComponent } = await import('overlayscrollbars-vue')
   return OverlayScrollbarsComponent
diff --git a/src/logic/common-setup.ts b/src/logic/common-setup.ts
index ee0ca3dc..cd3cd80a 100644
--- a/src/logic/common-setup.ts
+++ b/src/logic/common-setup.ts
@@ -4,7 +4,6 @@ import Toast, { POSITION } from 'vue-toastification'
 import { createPinia } from 'pinia'
 import { i18n } from '~/utils/i18n'
 import 'vue-toastification/dist/index.css'
-import 'overlayscrollbars/overlayscrollbars.css'
 
 const pinia = createPinia()
 

From 579c5dea5f110a4f57121563ce68f58c3303d3c6 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 28 Jan 2024 19:45:45 +0800
Subject: [PATCH 36/45] perf(Settings): reduce KeepAlive usage

---
 src/components/Settings/Settings.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 181b0185..78c347fd 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -196,9 +196,7 @@ function setCurrentTitle() {
             <!-- <div h-80px mt--8 /> -->
 
             <Transition name="page-fade">
-              <KeepAlive>
-                <Component :is="settingsMenu[activatedMenuItem]" :key="activatedMenuItem" />
-              </KeepAlive>
+              <Component :is="settingsMenu[activatedMenuItem]" />
             </Transition>
           </main>
         </OverlayScrollbarsComponent>

From a56887904ed63fd0407ac94ea0edcaa401a31277 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 28 Jan 2024 19:52:04 +0800
Subject: [PATCH 37/45] fix: "no more content" still exists when refreshing
 data

---
 .../views/Favorites/Favorites.vue             | 53 +++++++++----------
 src/contentScripts/views/History/History.vue  | 43 +++++----------
 2 files changed, 36 insertions(+), 60 deletions(-)

diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index 3ff135f5..7b0b137a 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import type { Ref } from 'vue'
 import { getCSRF, getUserID, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
 import type { FavoriteCategory, FavoriteResource } from '~/components/TopBar/types'
 import emitter from '~/utils/mitt'
@@ -24,29 +23,6 @@ const { handlePageRefresh, handleReachBottom } = useBewlyApp()
 const isLoading = ref<boolean>(true)
 const isFullPageLoading = ref<boolean>(false)
 const noMoreContent = ref<boolean>()
-const noMoreContentWarning = ref<boolean>(false)
-
-function initPageAction() {
-  handleReachBottom.value = async () => {
-    if (isLoading.value)
-      return
-    if (noMoreContent.value) {
-      noMoreContentWarning.value = true
-      return
-    }
-    await getFavoriteResources(selectedCategory.value!.id, ++currentPageNum.value, keyword.value)
-  }
-
-  handlePageRefresh.value = () => {
-    if (isLoading.value)
-      return
-    favoriteResources.length = 0
-    currentPageNum.value = 1
-    noMoreContent.value = false
-    noMoreContentWarning.value = false
-    handleSearch()
-  }
-}
 
 onMounted(async () => {
   await getFavoriteCategories()
@@ -75,9 +51,25 @@ onUnmounted(() => {
   emitter.off('topBarVisibleChange')
 })
 
-onActivated(() => {
-  initPageAction()
-})
+function initPageAction() {
+  handleReachBottom.value = async () => {
+    if (isLoading.value)
+      return
+    if (noMoreContent.value)
+      return
+
+    await getFavoriteResources(selectedCategory.value!.id, ++currentPageNum.value, keyword.value)
+  }
+
+  handlePageRefresh.value = () => {
+    if (isLoading.value)
+      return
+    favoriteResources.length = 0
+    currentPageNum.value = 1
+    noMoreContent.value = false
+    handleSearch()
+  }
+}
 
 async function getFavoriteCategories() {
   await browser.runtime
@@ -142,14 +134,17 @@ async function getFavoriteResources(
 async function changeCategory(categoryItem: FavoriteCategory) {
   currentPageNum.value = 1
   selectedCategory.value = categoryItem
-
+  noMoreContent.value = false
   favoriteResources.length = 0
+
   getFavoriteResources(categoryItem.id, 1)
 }
 
 function handleSearch() {
   currentPageNum.value = 1
   favoriteResources.length = 0
+  noMoreContent.value = false
+
   getFavoriteResources(selectedCategory.value!.id, currentPageNum.value, keyword.value)
 }
 
@@ -240,7 +235,7 @@ function handleUnfavorite(favoriteResource: FavoriteResource) {
         </div>
 
         <!-- no more content -->
-        <Empty v-if="noMoreContentWarning" class="py-4" :description="$t('common.no_more_content')" />
+        <Empty v-if="noMoreContent" class="py-4" :description="$t('common.no_more_content')" />
 
         <!-- loading -->
         <Transition name="fade">
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 141a1a10..8aa1366c 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -12,7 +12,6 @@ const { t } = useI18n()
 
 const isLoading = ref<boolean>()
 const noMoreContent = ref<boolean>(false)
-const noMoreContentWarning = ref<boolean>(false)
 const historyList = reactive<Array<HistoryItem>>([])
 const currentPageNum = ref<number>(1)
 const keyword = ref<string>()
@@ -23,14 +22,19 @@ const HistoryBusiness = computed(() => {
   return Business
 })
 
+onMounted(() => {
+  getHistoryList()
+  getHistoryPauseStatus()
+
+  initPageAction()
+})
+
 function initPageAction() {
   handleReachBottom.value = () => {
     if (isLoading.value)
       return
-    if (noMoreContent.value) {
-      noMoreContentWarning.value = true
+    if (noMoreContent.value)
       return
-    }
 
     if (keyword.value)
       searchHistoryList()
@@ -42,31 +46,10 @@ function initPageAction() {
     historyList.length = 0
     currentPageNum.value = 1
     noMoreContent.value = false
-    noMoreContentWarning.value = false
     getHistoryList()
   }
 }
 
-watch(
-  () => keyword.value,
-  (newValue, oldValue) => {
-    if (newValue === oldValue)
-      return
-    initPageAction()
-  },
-)
-
-onMounted(() => {
-  getHistoryList()
-  getHistoryPauseStatus()
-
-  initPageAction()
-})
-
-onActivated(() => {
-  initPageAction()
-})
-
 /**
  * Get history list
  */
@@ -127,6 +110,7 @@ function searchHistoryList() {
 function handleSearch() {
   historyList.length = 0
   currentPageNum.value = 1
+  noMoreContent.value = false
   if (keyword.value)
     searchHistoryList()
   else getHistoryList()
@@ -219,7 +203,6 @@ function clearAllHistory() {
 }
 
 function handleClearAllWatchHistory() {
-  // eslint-disable-next-line no-alert
   const result = confirm(
     t('history.clear_all_watch_history_confirm'),
   )
@@ -228,7 +211,6 @@ function handleClearAllWatchHistory() {
 }
 
 function handlePauseWatchHistory() {
-  // eslint-disable-next-line no-alert
   const result = confirm(
     t('history.pause_watch_history_confirm'),
   )
@@ -237,7 +219,6 @@ function handlePauseWatchHistory() {
 }
 
 function handleTurnOnWatchHistory() {
-  // eslint-disable-next-line no-alert
   const result = confirm(
     t('history.turn_on_watch_history_confirm'),
   )
@@ -257,7 +238,7 @@ function jumpToLoginPage() {
         {{ $t('history.title') }}
       </h3>
       <!-- historyList -->
-      <transition-group name="list">
+      <TransitionGroup name="list">
         <a
           v-for="(historyItem, index) in historyList"
           :key="historyItem.kid"
@@ -478,10 +459,10 @@ function jumpToLoginPage() {
             </div>
           </section>
         </a>
-      </transition-group>
+      </TransitionGroup>
 
       <!-- no more content -->
-      <Empty v-if="noMoreContentWarning" class="py-4" :description="$t('common.no_more_content')" />
+      <Empty v-if="noMoreContent" class="py-4" :description="$t('common.no_more_content')" />
 
       <!-- loading -->
       <Transition name="fade">

From d1827fd89cf21d4e2cd46dd0aa39a2b77a47e0ff Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 29 Jan 2024 00:12:38 +0800
Subject: [PATCH 38/45] fix(Anime): fixed issue with anime timetable not
 refreshing

---
 src/contentScripts/views/Anime/Anime.vue      | 34 ++++++++-----------
 .../views/Anime/components/AnimeTimeTable.vue | 12 +++++--
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index 095fbb79..9a718cb5 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -15,21 +15,28 @@ const isLoadingPopularAnime = ref<boolean>()
 const isLoadingRecommendAnime = ref<boolean>()
 const activatedSeasonId = ref<number>()
 const noMoreContent = ref<boolean>()
-const noMoreContentWarning = ref<boolean>()
+const animeTimeTableRef = ref()
 const { handleReachBottom, handlePageRefresh } = useBewlyApp()
 
 const isLoading = computed(() => {
   return isLoadingAnimeWatchList.value || isLoadingPopularAnime.value || isLoadingRecommendAnime.value
 })
 
+onMounted(() => {
+  getAnimeWatchList()
+  getPopularAnimeList()
+  getRecommendAnimeList()
+
+  initPageAction()
+})
+
 function initPageAction() {
   handleReachBottom.value = () => {
     if (isLoadingRecommendAnime.value)
       return
-    if (noMoreContent.value) {
-      noMoreContentWarning.value = true
+    if (noMoreContent.value)
       return
-    }
+
     getRecommendAnimeList()
   }
   handlePageRefresh.value = () => {
@@ -41,25 +48,14 @@ function initPageAction() {
     popularAnimeList.length = 0
     cursor.value = 0
     noMoreContent.value = false
-    noMoreContentWarning.value = false
+
     getAnimeWatchList()
     getPopularAnimeList()
     getRecommendAnimeList()
+    animeTimeTableRef.value?.refreshAnimeTimeTable()
   }
 }
 
-onMounted(() => {
-  getAnimeWatchList()
-  getPopularAnimeList()
-  getRecommendAnimeList()
-
-  initPageAction()
-})
-
-onActivated(() => {
-  initPageAction()
-})
-
 function getAnimeWatchList() {
   isLoadingAnimeWatchList.value = true
   browser.runtime
@@ -244,7 +240,7 @@ function getPopularAnimeList() {
           </h3>
         </div>
 
-        <AnimeTimeTable w="[calc(100%+1.5rem)]" />
+        <AnimeTimeTable ref="animeTimeTableRef" w="[calc(100%+1.5rem)]" />
       </section>
 
       <!-- Recommended for you -->
@@ -279,7 +275,7 @@ function getPopularAnimeList() {
     </div>
 
     <!-- no more content -->
-    <Empty v-if="noMoreContentWarning" class="pb-4" :description="$t('common.no_more_content')" />
+    <Empty v-if="noMoreContent" class="pb-4" :description="$t('common.no_more_content')" />
 
     <!-- loading -->
     <loading v-if="isLoadingRecommendAnime && recommendAnimeList.length !== 0" m="-t-4" />
diff --git a/src/contentScripts/views/Anime/components/AnimeTimeTable.vue b/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
index 754baa07..2063e022 100644
--- a/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
+++ b/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
@@ -2,13 +2,12 @@
 import type { Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import browser from 'webextension-polyfill'
-import type { AnimeTimeTableItem } from '../types'
 import { removeHttpFromUrl } from '~/utils/main'
-import type { Result as TimetableItem, TimetableResult } from '~/models/apiModels/anime/timetable'
+import type { Result as TimetableItem, TimetableResult } from '~/models/anime/timeTable'
 
 const { t } = useI18n()
 
-const animeTimeTable = reactive<AnimeTimeTableItem[]>([])
+const animeTimeTable = reactive<TimetableItem[]>([])
 const animeTimeTableWrap = ref<HTMLElement>() as Ref<HTMLElement>
 
 const daysOfTheWeekList = computed(() => {
@@ -27,6 +26,11 @@ onMounted(() => {
   getAnimeTimeTable()
 })
 
+function refreshAnimeTimeTable() {
+  animeTimeTable.length = 0
+  getAnimeTimeTable()
+}
+
 function getAnimeTimeTable() {
   browser.runtime
     .sendMessage({
@@ -38,6 +42,8 @@ function getAnimeTimeTable() {
         Object.assign(animeTimeTable, result as TimetableItem[])
     })
 }
+
+defineExpose({ refreshAnimeTimeTable })
 </script>
 
 <template>

From 580f04dcb92b1457b654ac6d8cae5e58286cb6e1 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 29 Jan 2024 01:00:23 +0800
Subject: [PATCH 39/45] refactor: adjust the placement of `initPageAction()`

---
 .../views/Home/components/Following.vue       | 44 ++++++------
 .../views/Home/components/ForYou.vue          | 71 +++++++++----------
 .../views/Home/components/Ranking.vue         | 20 +++---
 .../views/Home/components/Trending.vue        | 20 +++---
 .../views/WatchLater/WatchLater.vue           | 16 ++---
 5 files changed, 80 insertions(+), 91 deletions(-)

diff --git a/src/contentScripts/views/Home/components/Following.vue b/src/contentScripts/views/Home/components/Following.vue
index 39606552..ab66c082 100644
--- a/src/contentScripts/views/Home/components/Following.vue
+++ b/src/contentScripts/views/Home/components/Following.vue
@@ -9,30 +9,8 @@ const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
 const offset = ref<string>('')
 const updateBaseline = ref<string>('')
 const noMoreContent = ref<boolean>(false)
-const noMoreContentWarning = ref<boolean>(false)
 const { handleReachBottom, handlePageRefresh } = useBewlyApp()
 
-function initPageAction() {
-  handleReachBottom.value = async () => {
-    if (isLoading.value)
-      return
-    if (noMoreContent.value) {
-      noMoreContentWarning.value = true
-      return
-    }
-    for (let i = 0; i < 3; i++)
-      await getFollowedUsersVideos()
-  }
-  handlePageRefresh.value = async () => {
-    videoList.length = 0
-    offset.value = ''
-    noMoreContent.value = false
-    noMoreContentWarning.value = false
-    for (let i = 0; i < 3; i++)
-      await getFollowedUsersVideos()
-  }
-}
-
 onMounted(async () => {
   for (let i = 0; i < 3; i++)
     await getFollowedUsersVideos()
@@ -43,6 +21,26 @@ onActivated(() => {
   initPageAction()
 })
 
+function initPageAction() {
+  handleReachBottom.value = async () => {
+    if (isLoading.value)
+      return
+    if (noMoreContent.value)
+      return
+
+    for (let i = 0; i < 3; i++)
+      await getFollowedUsersVideos()
+  }
+  handlePageRefresh.value = async () => {
+    videoList.length = 0
+    offset.value = ''
+    noMoreContent.value = false
+
+    for (let i = 0; i < 3; i++)
+      await getFollowedUsersVideos()
+  }
+}
+
 async function getFollowedUsersVideos() {
   if (noMoreContent.value)
     return
@@ -137,7 +135,7 @@ function jumpToLoginPage() {
     </div>
 
     <!-- no more content -->
-    <Empty v-if="noMoreContentWarning" class="pb-4" :description="$t('common.no_more_content')" />
+    <Empty v-if="noMoreContent" class="pb-4" :description="$t('common.no_more_content')" />
 
     <Transition name="fade">
       <Loading v-if="isLoading" />
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index f7f436a3..df60ef6c 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -13,44 +13,8 @@ const needToLoginFirst = ref<boolean>(false)
 const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
 const refreshIdx = ref<number>(1)
 const noMoreContent = ref<boolean>(false)
-const noMoreContentWarning = ref<boolean>(false)
 const { handleReachBottom, handlePageRefresh } = useBewlyApp()
 
-function initPageAction() {
-  handleReachBottom.value = async () => {
-    if (isLoading.value)
-      return
-    if (noMoreContent.value) {
-      noMoreContentWarning.value = true
-      return
-    }
-    if (settings.value.recommendationMode === 'web') {
-      getRecommendVideos()
-    }
-    else {
-      for (let i = 0; i < 3; i++)
-        await getAppRecommendVideos()
-    }
-  }
-
-  handlePageRefresh.value = async () => {
-    if (isLoading.value)
-      return
-
-    videoList.length = 0
-    appVideoList.length = 0
-    noMoreContent.value = false
-    noMoreContentWarning.value = false
-    if (settings.value.recommendationMode === 'web') {
-      await getRecommendVideos()
-    }
-    else {
-      for (let i = 0; i < 3; i++)
-        await getAppRecommendVideos()
-    }
-  }
-}
-
 watch(() => settings.value.recommendationMode, (newValue) => {
   videoList.length = 0
   appVideoList.length = 0
@@ -84,6 +48,39 @@ onActivated(() => {
   initPageAction()
 })
 
+function initPageAction() {
+  handleReachBottom.value = async () => {
+    if (isLoading.value)
+      return
+    if (noMoreContent.value)
+      return
+
+    if (settings.value.recommendationMode === 'web') {
+      getRecommendVideos()
+    }
+    else {
+      for (let i = 0; i < 3; i++)
+        await getAppRecommendVideos()
+    }
+  }
+
+  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()
+    }
+  }
+}
+
 async function getRecommendVideos() {
   isLoading.value = true
   try {
@@ -225,7 +222,7 @@ function jumpToLoginPage() {
     </div>
 
     <!-- no more content -->
-    <Empty v-if="noMoreContentWarning" class="py-4" :description="$t('common.no_more_content')" />
+    <Empty v-if="noMoreContent" class="pb-4" :description="$t('common.no_more_content')" />
 
     <Transition name="fade">
       <Loading v-if="isLoading" />
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index f00d8983..60aba0b3 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -45,16 +45,6 @@ const videoList = reactive<RankingVideoItem[]>([])
 const PgcList = reactive<RankingPgcItem[]>([])
 const shouldMoveAsideUp = ref<boolean>(false)
 
-function initPageAction() {
-  handlePageRefresh.value = async () => {
-    videoList.length = 0
-    PgcList.length = 0
-    if (isLoading.value)
-      return
-    getRankingVideos()
-  }
-}
-
 watch(() => activatedRankingType.value.id, () => {
   handleBackToTop(settings.value.useSearchPageModeOnHomePage ? 510 : 0)
 
@@ -88,6 +78,16 @@ onActivated(() => {
   initPageAction()
 })
 
+function initPageAction() {
+  handlePageRefresh.value = async () => {
+    videoList.length = 0
+    PgcList.length = 0
+    if (isLoading.value)
+      return
+    getRankingVideos()
+  }
+}
+
 onBeforeUnmount(() => {
   emitter.off('topBarVisibleChange')
 })
diff --git a/src/contentScripts/views/Home/components/Trending.vue b/src/contentScripts/views/Home/components/Trending.vue
index 054a3e68..64deb2db 100644
--- a/src/contentScripts/views/Home/components/Trending.vue
+++ b/src/contentScripts/views/Home/components/Trending.vue
@@ -8,6 +8,16 @@ const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
 const pn = ref<number>(1)
 const { handleReachBottom, handlePageRefresh } = useBewlyApp()
 
+onMounted(async () => {
+  await getTrendingVideos()
+
+  initPageAction()
+})
+
+onActivated(() => {
+  initPageAction()
+})
+
 function initPageAction() {
   handleReachBottom.value = async () => {
     if (!isLoading.value)
@@ -21,16 +31,6 @@ function initPageAction() {
   }
 }
 
-onMounted(async () => {
-  await getTrendingVideos()
-
-  initPageAction()
-})
-
-onActivated(() => {
-  initPageAction()
-})
-
 async function getTrendingVideos() {
   isLoading.value = true
   try {
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index bf4c2b6d..f531eda5 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -12,6 +12,11 @@ const noMoreContent = ref<boolean>()
 const watchLaterList = reactive<VideoItem[]>([])
 const { handlePageRefresh } = useBewlyApp()
 
+onMounted(() => {
+  getAllWatchLaterList()
+  initPageAction()
+})
+
 function initPageAction() {
   handlePageRefresh.value = () => {
     if (isLoading.value)
@@ -22,15 +27,6 @@ function initPageAction() {
   }
 }
 
-onMounted(() => {
-  getAllWatchLaterList()
-  initPageAction()
-})
-
-onActivated(() => {
-  initPageAction()
-})
-
 /**
  * Get watch later list
  */
@@ -63,7 +59,6 @@ function deleteWatchLaterItem(index: number, aid: number) {
 }
 
 function handleClearAllWatchLater() {
-  // eslint-disable-next-line no-alert
   const result = confirm(
     t('watch_later.clear_all_confirm'),
   )
@@ -82,7 +77,6 @@ function handleClearAllWatchLater() {
 }
 
 function handleRemoveWatchedVideos() {
-  // eslint-disable-next-line no-alert
   const result = confirm(
     t('watch_later.remove_watched_videos_confirm'),
   )

From 21bb9b1b8987b1307603358e2ef54c9c4485ee35 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 29 Jan 2024 18:01:52 +0800
Subject: [PATCH 40/45] chore: upgrade deps

---
 package.json   |  32 +--
 pnpm-lock.yaml | 523 ++++++++++++++++++++++++++++---------------------
 2 files changed, 320 insertions(+), 235 deletions(-)

diff --git a/package.json b/package.json
index e3d3b9fb..cec16c21 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "displayName": "BewlyBewly",
   "version": "0.14.3",
   "private": true,
-  "packageManager": "pnpm@8.14.1",
+  "packageManager": "pnpm@8.15.0",
   "description": "Just make a few small changes to your Bilibili homepage.",
   "homepage": "https://github.com/hakadao/BewlyBewly",
   "scripts": {
@@ -37,36 +37,36 @@
     "dplayer": "^1.27.1",
     "md5": "^2.3.0",
     "mitt": "^3.0.1",
-    "overlayscrollbars": "^2.4.5",
-    "overlayscrollbars-vue": "^0.5.6",
+    "overlayscrollbars": "^2.4.7",
+    "overlayscrollbars-vue": "^0.5.7",
     "pinia": "^2.1.7",
     "qrcode.vue": "^3.4.1",
-    "vue-i18n": "^9.7.0",
+    "vue-i18n": "^9.9.0",
     "vue-toastification": "2.0.0-rc.5",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.6.1",
-    "@ffflorian/jszip-cli": "^3.5.1",
-    "@iconify/json": "^2.2.143",
+    "@antfu/eslint-config": "^2.6.3",
+    "@ffflorian/jszip-cli": "^3.6.2",
+    "@iconify/json": "^2.2.176",
     "@iconify/vue": "^4.1.1",
     "@intlify/unplugin-vue-i18n": "^0.8.2",
     "@rollup/plugin-replace": "^5.0.5",
     "@types/dplayer": "^1.25.5",
     "@types/fs-extra": "^9.0.13",
-    "@types/node": "^18.18.10",
+    "@types/node": "^18.19.10",
     "@types/webextension-polyfill": "^0.9.2",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@unocss/reset": "^0.54.3",
     "@vitejs/plugin-vue": "^3.2.0",
-    "@vue/compiler-sfc": "^3.3.8",
-    "@vue/test-utils": "^2.4.2",
-    "@vueuse/core": "^10.6.1",
+    "@vue/compiler-sfc": "^3.4.15",
+    "@vue/test-utils": "^2.4.4",
+    "@vueuse/core": "^10.7.2",
     "chokidar": "^3.5.3",
     "cross-env": "^7.0.3",
     "crx": "^5.0.1",
-    "eslint": "^8.54.0",
+    "eslint": "^8.56.0",
     "esno": "^4.0.0",
     "fs-extra": "^10.1.0",
     "jsdom": "^20.0.3",
@@ -74,9 +74,9 @@
     "lint-staged": "^15.2.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.69.5",
+    "sass": "^1.70.0",
     "simple-git-hooks": "^2.9.0",
-    "terser": "^5.24.0",
+    "terser": "^5.27.0",
     "tsup": "^6.7.0",
     "typescript": "^4.9.5",
     "unocss": "^0.54.3",
@@ -85,9 +85,9 @@
     "unplugin-vue-components": "^0.22.12",
     "vite": "^3.2.8",
     "vitest": "^0.24.5",
-    "vue": "^3.3.8",
+    "vue": "^3.4.15",
     "vue-demi": "^0.13.11",
-    "web-ext": "^7.8.0",
+    "web-ext": "^7.11.0",
     "webext-bridge": "^5.0.5",
     "webextension-polyfill": "^0.10.0"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d645930f..d71b9f86 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,40 +18,40 @@ dependencies:
     specifier: ^3.0.1
     version: 3.0.1
   overlayscrollbars:
-    specifier: ^2.4.5
-    version: 2.4.6
+    specifier: ^2.4.7
+    version: 2.4.7
   overlayscrollbars-vue:
-    specifier: ^0.5.6
-    version: 0.5.6(overlayscrollbars@2.4.6)(vue@3.4.13)
+    specifier: ^0.5.7
+    version: 0.5.7(overlayscrollbars@2.4.7)(vue@3.4.15)
   pinia:
     specifier: ^2.1.7
-    version: 2.1.7(typescript@4.9.5)(vue@3.4.13)
+    version: 2.1.7(typescript@4.9.5)(vue@3.4.15)
   qrcode.vue:
     specifier: ^3.4.1
-    version: 3.4.1(vue@3.4.13)
+    version: 3.4.1(vue@3.4.15)
   vue-i18n:
-    specifier: ^9.7.0
-    version: 9.9.0(vue@3.4.13)
+    specifier: ^9.9.0
+    version: 9.9.0(vue@3.4.15)
   vue-toastification:
     specifier: 2.0.0-rc.5
-    version: 2.0.0-rc.5(vue@3.4.13)
+    version: 2.0.0-rc.5(vue@3.4.15)
   vuedraggable:
     specifier: ^4.1.0
-    version: 4.1.0(vue@3.4.13)
+    version: 4.1.0(vue@3.4.15)
 
 devDependencies:
   '@antfu/eslint-config':
-    specifier: ^2.6.1
-    version: 2.6.2(@vue/compiler-sfc@3.4.13)(eslint@8.56.0)(typescript@4.9.5)(vitest@0.24.5)
+    specifier: ^2.6.3
+    version: 2.6.3(@vue/compiler-sfc@3.4.15)(eslint@8.56.0)(typescript@4.9.5)(vitest@0.24.5)
   '@ffflorian/jszip-cli':
-    specifier: ^3.5.1
+    specifier: ^3.6.2
     version: 3.6.2(typescript@4.9.5)
   '@iconify/json':
-    specifier: ^2.2.143
-    version: 2.2.168
+    specifier: ^2.2.176
+    version: 2.2.176
   '@iconify/vue':
     specifier: ^4.1.1
-    version: 4.1.1(vue@3.4.13)
+    version: 4.1.1(vue@3.4.15)
   '@intlify/unplugin-vue-i18n':
     specifier: ^0.8.2
     version: 0.8.2(vue-i18n@9.9.0)
@@ -65,8 +65,8 @@ devDependencies:
     specifier: ^9.0.13
     version: 9.0.13
   '@types/node':
-    specifier: ^18.18.10
-    version: 18.19.6
+    specifier: ^18.19.10
+    version: 18.19.10
   '@types/webextension-polyfill':
     specifier: ^0.9.2
     version: 0.9.2
@@ -81,16 +81,16 @@ devDependencies:
     version: 0.54.3
   '@vitejs/plugin-vue':
     specifier: ^3.2.0
-    version: 3.2.0(vite@3.2.8)(vue@3.4.13)
+    version: 3.2.0(vite@3.2.8)(vue@3.4.15)
   '@vue/compiler-sfc':
-    specifier: ^3.3.8
-    version: 3.4.13
+    specifier: ^3.4.15
+    version: 3.4.15
   '@vue/test-utils':
-    specifier: ^2.4.2
-    version: 2.4.3(vue@3.4.13)
+    specifier: ^2.4.4
+    version: 2.4.4(vue@3.4.15)
   '@vueuse/core':
-    specifier: ^10.6.1
-    version: 10.7.2(vue@3.4.13)
+    specifier: ^10.7.2
+    version: 10.7.2(vue@3.4.15)
   chokidar:
     specifier: ^3.5.3
     version: 3.5.3
@@ -101,7 +101,7 @@ devDependencies:
     specifier: ^5.0.1
     version: 5.0.1
   eslint:
-    specifier: ^8.54.0
+    specifier: ^8.56.0
     version: 8.56.0
   esno:
     specifier: ^4.0.0
@@ -125,14 +125,14 @@ devDependencies:
     specifier: ^3.0.2
     version: 3.0.2
   sass:
-    specifier: ^1.69.5
-    version: 1.69.7
+    specifier: ^1.70.0
+    version: 1.70.0
   simple-git-hooks:
     specifier: ^2.9.0
     version: 2.9.0
   terser:
-    specifier: ^5.24.0
-    version: 5.26.0
+    specifier: ^5.27.0
+    version: 5.27.0
   tsup:
     specifier: ^6.7.0
     version: 6.7.0(postcss@8.4.33)(typescript@4.9.5)
@@ -147,25 +147,25 @@ devDependencies:
     version: 0.11.5(@vueuse/core@10.7.2)
   unplugin-icons:
     specifier: ^0.14.15
-    version: 0.14.15(@vue/compiler-sfc@3.4.13)
+    version: 0.14.15(@vue/compiler-sfc@3.4.15)
   unplugin-vue-components:
     specifier: ^0.22.12
-    version: 0.22.12(vue@3.4.13)
+    version: 0.22.12(vue@3.4.15)
   vite:
     specifier: ^3.2.8
-    version: 3.2.8(@types/node@18.19.6)(sass@1.69.7)(terser@5.26.0)
+    version: 3.2.8(@types/node@18.19.10)(sass@1.70.0)(terser@5.27.0)
   vitest:
     specifier: ^0.24.5
-    version: 0.24.5(jsdom@20.0.3)(sass@1.69.7)(terser@5.26.0)
+    version: 0.24.5(jsdom@20.0.3)(sass@1.70.0)(terser@5.27.0)
   vue:
-    specifier: ^3.3.8
-    version: 3.4.13(typescript@4.9.5)
+    specifier: ^3.4.15
+    version: 3.4.15(typescript@4.9.5)
   vue-demi:
     specifier: ^0.13.11
-    version: 0.13.11(vue@3.4.13)
+    version: 0.13.11(vue@3.4.15)
   web-ext:
-    specifier: ^7.8.0
-    version: 7.10.0
+    specifier: ^7.11.0
+    version: 7.11.0
   webext-bridge:
     specifier: ^5.0.5
     version: 5.0.5
@@ -188,8 +188,8 @@ packages:
       '@jridgewell/trace-mapping': 0.3.21
     dev: true
 
-  /@antfu/eslint-config@2.6.2(@vue/compiler-sfc@3.4.13)(eslint@8.56.0)(typescript@4.9.5)(vitest@0.24.5):
-    resolution: {integrity: sha512-iHJtFrJLE0gc+oQGxe8I2vpXwhn2wAbz2kqunSPhiOt39yV6yuoE+NJt5nstzy0INKfjSL2teQKlr4g7E2bVhA==}
+  /@antfu/eslint-config@2.6.3(@vue/compiler-sfc@3.4.15)(eslint@8.56.0)(typescript@4.9.5)(vitest@0.24.5):
+    resolution: {integrity: sha512-sfkamrOatMwMZkp14mBerHKIw8FY0SD1iCb5UZ6Y5hgb+FeDpNQPlVA0i2PN95TQ8NSYyPC1QnoM+UA5NSl0Kg==}
     hasBin: true
     peerDependencies:
       '@unocss/eslint-plugin': '>=0.50.0'
@@ -221,28 +221,28 @@ packages:
       '@eslint-types/jsdoc': 46.8.2-1
       '@eslint-types/typescript-eslint': 6.18.1
       '@eslint-types/unicorn': 50.0.1
-      '@stylistic/eslint-plugin': 1.5.3(eslint@8.56.0)(typescript@4.9.5)
-      '@typescript-eslint/eslint-plugin': 6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@4.9.5)
-      '@typescript-eslint/parser': 6.18.1(eslint@8.56.0)(typescript@4.9.5)
+      '@stylistic/eslint-plugin': 1.5.4(eslint@8.56.0)(typescript@4.9.5)
+      '@typescript-eslint/eslint-plugin': 6.19.1(@typescript-eslint/parser@6.19.1)(eslint@8.56.0)(typescript@4.9.5)
+      '@typescript-eslint/parser': 6.19.1(eslint@8.56.0)(typescript@4.9.5)
       eslint: 8.56.0
       eslint-config-flat-gitignore: 0.1.2
       eslint-merge-processors: 0.1.0(eslint@8.56.0)
       eslint-plugin-antfu: 2.1.1(eslint@8.56.0)
       eslint-plugin-eslint-comments: 3.2.0(eslint@8.56.0)
-      eslint-plugin-i: 2.29.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)
+      eslint-plugin-i: 2.29.1(@typescript-eslint/parser@6.19.1)(eslint@8.56.0)
       eslint-plugin-jsdoc: 48.0.2(eslint@8.56.0)
-      eslint-plugin-jsonc: 2.11.2(eslint@8.56.0)
+      eslint-plugin-jsonc: 2.13.0(eslint@8.56.0)
       eslint-plugin-markdown: 3.0.1(eslint@8.56.0)
       eslint-plugin-n: 16.6.2(eslint@8.56.0)
       eslint-plugin-no-only-tests: 3.1.0
       eslint-plugin-perfectionist: 2.5.0(eslint@8.56.0)(typescript@4.9.5)(vue-eslint-parser@9.4.0)
-      eslint-plugin-toml: 0.8.0(eslint@8.56.0)
+      eslint-plugin-toml: 0.9.2(eslint@8.56.0)
       eslint-plugin-unicorn: 50.0.1(eslint@8.56.0)
-      eslint-plugin-unused-imports: 3.0.0(@typescript-eslint/eslint-plugin@6.18.1)(eslint@8.56.0)
-      eslint-plugin-vitest: 0.3.20(@typescript-eslint/eslint-plugin@6.18.1)(eslint@8.56.0)(typescript@4.9.5)(vitest@0.24.5)
+      eslint-plugin-unused-imports: 3.0.0(@typescript-eslint/eslint-plugin@6.19.1)(eslint@8.56.0)
+      eslint-plugin-vitest: 0.3.20(@typescript-eslint/eslint-plugin@6.19.1)(eslint@8.56.0)(typescript@4.9.5)(vitest@0.24.5)
       eslint-plugin-vue: 9.20.1(eslint@8.56.0)
-      eslint-plugin-yml: 1.11.0(eslint@8.56.0)
-      eslint-processor-vue-blocks: 0.1.1(@vue/compiler-sfc@3.4.13)(eslint@8.56.0)
+      eslint-plugin-yml: 1.12.2(eslint@8.56.0)
+      eslint-processor-vue-blocks: 0.1.1(@vue/compiler-sfc@3.4.15)(eslint@8.56.0)
       globals: 13.24.0
       jsonc-eslint-parser: 2.4.0
       local-pkg: 0.5.0
@@ -881,8 +881,8 @@ packages:
     resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==}
     dev: true
 
-  /@iconify/json@2.2.168:
-    resolution: {integrity: sha512-NuimrvW7/BfOK97Kx0YMWG8UMcqdfc0GZ0mZfewA90Qvl3+dchLmbyvNXnFraUFrrS8Luie3P6R0+3gHE9DnIA==}
+  /@iconify/json@2.2.176:
+    resolution: {integrity: sha512-Pw1MA57OZdzyrJgGHzZXVnoht8vndv4aM6I3xj4SeimF14HA3e101Ignnlw2h/+Yjujf43jH7doPIVAhgCTFMw==}
     dependencies:
       '@iconify/types': 2.0.0
       pathe: 1.1.2
@@ -905,13 +905,13 @@ packages:
       - supports-color
     dev: true
 
-  /@iconify/vue@4.1.1(vue@3.4.13):
+  /@iconify/vue@4.1.1(vue@3.4.15):
     resolution: {integrity: sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==}
     peerDependencies:
       vue: '>=3'
     dependencies:
       '@iconify/types': 2.0.0
-      vue: 3.4.13(typescript@4.9.5)
+      vue: 3.4.15(typescript@4.9.5)
     dev: true
 
   /@intlify/bundle-utils@4.0.0(vue-i18n@9.9.0):
@@ -930,7 +930,7 @@ packages:
       '@intlify/shared': 9.4.1
       jsonc-eslint-parser: 1.4.1
       source-map: 0.6.1
-      vue-i18n: 9.9.0(vue@3.4.13)
+      vue-i18n: 9.9.0(vue@3.4.15)
       yaml-eslint-parser: 0.3.2
     dev: true
 
@@ -983,7 +983,7 @@ packages:
       '@intlify/bundle-utils': 4.0.0(vue-i18n@9.9.0)
       '@intlify/shared': 9.4.1
       '@rollup/pluginutils': 4.2.1
-      '@vue/compiler-sfc': 3.4.13
+      '@vue/compiler-sfc': 3.4.15
       debug: 4.3.4
       fast-glob: 3.3.2
       js-yaml: 4.1.0
@@ -992,7 +992,7 @@ packages:
       picocolors: 1.0.0
       source-map: 0.6.1
       unplugin: 1.6.0
-      vue-i18n: 9.9.0(vue@3.4.13)
+      vue-i18n: 9.9.0(vue@3.4.15)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1045,8 +1045,8 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
-  /@mdn/browser-compat-data@5.5.4:
-    resolution: {integrity: sha512-3Ut58LMJig1igriRHsbRHd7tRi4zz3dlnM/6msgl6FqDglxWZLN+ikYsluOg4D6CFmsXBq5WyYF/7HLwHMzDzA==}
+  /@mdn/browser-compat-data@5.5.7:
+    resolution: {integrity: sha512-DoHTZ/TjtNfUu9eiqJd+x3IcCQrhS+yOYU436TKUnlE36jZwNbK535D1CmTsSYdi/UcdCWNm5KRQZ9g1tlZCPw==}
     dev: true
 
   /@nodelib/fs.scandir@2.1.5:
@@ -1146,8 +1146,8 @@ packages:
     engines: {node: '>=14.16'}
     dev: true
 
-  /@stylistic/eslint-plugin-js@1.5.3(eslint@8.56.0):
-    resolution: {integrity: sha512-XlKnm82fD7Sw9kQ6FFigE0tobvptNBXZWsdfoKmUyK7bNxHsAHOFT8zJGY3j3MjZ0Fe7rLTu86hX/vOl0bRRdQ==}
+  /@stylistic/eslint-plugin-js@1.5.4(eslint@8.56.0):
+    resolution: {integrity: sha512-3ctWb3NvJNV1MsrZN91cYp2EGInLPSoZKphXIbIRx/zjZxKwLDr9z4LMOWtqjq14li/OgqUUcMq5pj8fgbLoTw==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: '>=8.40.0'
@@ -1159,53 +1159,53 @@ packages:
       espree: 9.6.1
     dev: true
 
-  /@stylistic/eslint-plugin-jsx@1.5.3(eslint@8.56.0):
-    resolution: {integrity: sha512-gKXWFmvg3B4e6G+bVz2p37icjj3gS5lzazZD6oLjmQ2b0Lw527VpnxGjWxQ16keKXtrVzUfebakjskOoALg3CQ==}
+  /@stylistic/eslint-plugin-jsx@1.5.4(eslint@8.56.0):
+    resolution: {integrity: sha512-JUfrpCkeBCqt1IZ4QsP4WgxGza4PhK4LPbc0VnCjHKygl+rgqoDAovqOuzFJ49wJ4Ix3r6OIHFuwiBGswZEVvg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: '>=8.40.0'
     dependencies:
-      '@stylistic/eslint-plugin-js': 1.5.3(eslint@8.56.0)
+      '@stylistic/eslint-plugin-js': 1.5.4(eslint@8.56.0)
       eslint: 8.56.0
       estraverse: 5.3.0
     dev: true
 
-  /@stylistic/eslint-plugin-plus@1.5.3(eslint@8.56.0)(typescript@4.9.5):
-    resolution: {integrity: sha512-fuOBySbH4dbfY4Dwvu+zg5y+e0lALHTyQske5+a2zNC8Ejnx4rFlVjYOmaVFtxFhTD4V0vM7o21Ozci0igcxKg==}
+  /@stylistic/eslint-plugin-plus@1.5.4(eslint@8.56.0)(typescript@4.9.5):
+    resolution: {integrity: sha512-dI0Cs5vYX/0uMhQDY+NK0cKQ0Pe9B6jWYxd0Ndud+mNloDaVLrsmJocK4zn+YfhGEDs1E4Nk5uAPZEumIpDuSg==}
     peerDependencies:
       eslint: '*'
     dependencies:
-      '@typescript-eslint/utils': 6.18.1(eslint@8.56.0)(typescript@4.9.5)
+      '@typescript-eslint/utils': 6.19.1(eslint@8.56.0)(typescript@4.9.5)
       eslint: 8.56.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@stylistic/eslint-plugin-ts@1.5.3(eslint@8.56.0)(typescript@4.9.5):
-    resolution: {integrity: sha512-/gUEqGo0gpFeu220YmC0788VliKnmTaAz4pI82KA5cUuCp6OzEhGlrNkb1eevMwH0RRgyND20HJxOYvEGlwu+w==}
+  /@stylistic/eslint-plugin-ts@1.5.4(eslint@8.56.0)(typescript@4.9.5):
+    resolution: {integrity: sha512-NZDFVIlVNjuPvhT+0Cidm5IS3emtx338xbJTqs2xfOVRDGTpYwRHhNVEGa1rFOpYHmv0sAj6+OXbMDn7ul0K/g==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: '>=8.40.0'
     dependencies:
-      '@stylistic/eslint-plugin-js': 1.5.3(eslint@8.56.0)
-      '@typescript-eslint/utils': 6.18.1(eslint@8.56.0)(typescript@4.9.5)
+      '@stylistic/eslint-plugin-js': 1.5.4(eslint@8.56.0)
+      '@typescript-eslint/utils': 6.19.1(eslint@8.56.0)(typescript@4.9.5)
       eslint: 8.56.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@stylistic/eslint-plugin@1.5.3(eslint@8.56.0)(typescript@4.9.5):
-    resolution: {integrity: sha512-Vee+hHKaCd8DPRoRJTCV+mOFz+zFIaA9QiNJaAvgBzmPkcDnSC7Ewh518fN6SSNe9psS8TDIpcxd1g5v4MSY5A==}
+  /@stylistic/eslint-plugin@1.5.4(eslint@8.56.0)(typescript@4.9.5):
+    resolution: {integrity: sha512-zWPXr+O67GC9KDAFkbL1U9UVqE6Iv69YMKhkIECCmE0GvClUJwdfsimm4XebEDondV7kfjMrTDZaYfrI5aS0Jg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: '>=8.40.0'
     dependencies:
-      '@stylistic/eslint-plugin-js': 1.5.3(eslint@8.56.0)
-      '@stylistic/eslint-plugin-jsx': 1.5.3(eslint@8.56.0)
-      '@stylistic/eslint-plugin-plus': 1.5.3(eslint@8.56.0)(typescript@4.9.5)
-      '@stylistic/eslint-plugin-ts': 1.5.3(eslint@8.56.0)(typescript@4.9.5)
+      '@stylistic/eslint-plugin-js': 1.5.4(eslint@8.56.0)
+      '@stylistic/eslint-plugin-jsx': 1.5.4(eslint@8.56.0)
+      '@stylistic/eslint-plugin-plus': 1.5.4(eslint@8.56.0)(typescript@4.9.5)
+      '@stylistic/eslint-plugin-ts': 1.5.4(eslint@8.56.0)(typescript@4.9.5)
       eslint: 8.56.0
     transitivePeerDependencies:
       - supports-color
@@ -1245,7 +1245,7 @@ packages:
   /@types/fs-extra@9.0.13:
     resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
     dependencies:
-      '@types/node': 18.19.6
+      '@types/node': 18.19.10
     dev: true
 
   /@types/http-cache-semantics@4.0.4:
@@ -1270,8 +1270,8 @@ packages:
     resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==}
     dev: true
 
-  /@types/node@18.19.6:
-    resolution: {integrity: sha512-X36s5CXMrrJOs2lQCdDF68apW4Rfx9ixYMawlepwmE4Anezv/AV2LSpKD1Ub8DAc+urp5bk0BGZ6NtmBitfnsg==}
+  /@types/node@18.19.10:
+    resolution: {integrity: sha512-IZD8kAM02AW1HRDTPOlz3npFava678pr8Ie9Vp8uRhBROXAv8MXT2pCnGZZAKYdromsNQLHQcfWQ6EOatVLtqA==}
     dependencies:
       undici-types: 5.26.5
     dev: true
@@ -1303,7 +1303,7 @@ packages:
   /@types/yauzl@2.10.3:
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
     dependencies:
-      '@types/node': 18.19.6
+      '@types/node': 18.19.10
     dev: true
 
   /@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.56.0)(typescript@4.9.5):
@@ -1334,8 +1334,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/eslint-plugin@6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@4.9.5):
-    resolution: {integrity: sha512-nISDRYnnIpk7VCFrGcu1rnZfM1Dh9LRHnfgdkjcbi/l7g16VYRri3TjXi9Ir4lOZSw5N/gnV/3H7jIPQ8Q4daA==}
+  /@typescript-eslint/eslint-plugin@6.19.1(@typescript-eslint/parser@6.19.1)(eslint@8.56.0)(typescript@4.9.5):
+    resolution: {integrity: sha512-roQScUGFruWod9CEyoV5KlCYrubC/fvG8/1zXuT0WTcxX87GnMMmnksMwSg99lo1xiKrBzw2icsJPMAw1OtKxg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
@@ -1346,11 +1346,11 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 6.18.1(eslint@8.56.0)(typescript@4.9.5)
-      '@typescript-eslint/scope-manager': 6.18.1
-      '@typescript-eslint/type-utils': 6.18.1(eslint@8.56.0)(typescript@4.9.5)
-      '@typescript-eslint/utils': 6.18.1(eslint@8.56.0)(typescript@4.9.5)
-      '@typescript-eslint/visitor-keys': 6.18.1
+      '@typescript-eslint/parser': 6.19.1(eslint@8.56.0)(typescript@4.9.5)
+      '@typescript-eslint/scope-manager': 6.19.1
+      '@typescript-eslint/type-utils': 6.19.1(eslint@8.56.0)(typescript@4.9.5)
+      '@typescript-eslint/utils': 6.19.1(eslint@8.56.0)(typescript@4.9.5)
+      '@typescript-eslint/visitor-keys': 6.19.1
       debug: 4.3.4
       eslint: 8.56.0
       graphemer: 1.4.0
@@ -1383,8 +1383,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@6.18.1(eslint@8.56.0)(typescript@4.9.5):
-    resolution: {integrity: sha512-zct/MdJnVaRRNy9e84XnVtRv9Vf91/qqe+hZJtKanjojud4wAVy/7lXxJmMyX6X6J+xc6c//YEWvpeif8cAhWA==}
+  /@typescript-eslint/parser@6.19.1(eslint@8.56.0)(typescript@4.9.5):
+    resolution: {integrity: sha512-WEfX22ziAh6pRE9jnbkkLGp/4RhTpffr2ZK5bJ18M8mIfA8A+k97U9ZyaXCEJRlmMHh7R9MJZWXp/r73DzINVQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
@@ -1393,10 +1393,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 6.18.1
-      '@typescript-eslint/types': 6.18.1
-      '@typescript-eslint/typescript-estree': 6.18.1(typescript@4.9.5)
-      '@typescript-eslint/visitor-keys': 6.18.1
+      '@typescript-eslint/scope-manager': 6.19.1
+      '@typescript-eslint/types': 6.19.1
+      '@typescript-eslint/typescript-estree': 6.19.1(typescript@4.9.5)
+      '@typescript-eslint/visitor-keys': 6.19.1
       debug: 4.3.4
       eslint: 8.56.0
       typescript: 4.9.5
@@ -1420,6 +1420,14 @@ packages:
       '@typescript-eslint/visitor-keys': 6.18.1
     dev: true
 
+  /@typescript-eslint/scope-manager@6.19.1:
+    resolution: {integrity: sha512-4CdXYjKf6/6aKNMSly/BP4iCSOpvMmqtDzRtqFyyAae3z5kkqEjKndR5vDHL8rSuMIIWP8u4Mw4VxLyxZW6D5w==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.19.1
+      '@typescript-eslint/visitor-keys': 6.19.1
+    dev: true
+
   /@typescript-eslint/type-utils@5.62.0(eslint@8.56.0)(typescript@4.9.5):
     resolution: {integrity: sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1440,8 +1448,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/type-utils@6.18.1(eslint@8.56.0)(typescript@4.9.5):
-    resolution: {integrity: sha512-wyOSKhuzHeU/5pcRDP2G2Ndci+4g653V43gXTpt4nbyoIOAASkGDA9JIAgbQCdCkcr1MvpSYWzxTz0olCn8+/Q==}
+  /@typescript-eslint/type-utils@6.19.1(eslint@8.56.0)(typescript@4.9.5):
+    resolution: {integrity: sha512-0vdyld3ecfxJuddDjACUvlAeYNrHP/pDeQk2pWBR2ESeEzQhg52DF53AbI9QCBkYE23lgkhLCZNkHn2hEXXYIg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
@@ -1450,8 +1458,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 6.18.1(typescript@4.9.5)
-      '@typescript-eslint/utils': 6.18.1(eslint@8.56.0)(typescript@4.9.5)
+      '@typescript-eslint/typescript-estree': 6.19.1(typescript@4.9.5)
+      '@typescript-eslint/utils': 6.19.1(eslint@8.56.0)(typescript@4.9.5)
       debug: 4.3.4
       eslint: 8.56.0
       ts-api-utils: 1.0.3(typescript@4.9.5)
@@ -1470,6 +1478,11 @@ packages:
     engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
+  /@typescript-eslint/types@6.19.1:
+    resolution: {integrity: sha512-6+bk6FEtBhvfYvpHsDgAL3uo4BfvnTnoge5LrrCj2eJN8g3IJdLTD4B/jK3Q6vo4Ql/Hoip9I8aB6fF+6RfDqg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dev: true
+
   /@typescript-eslint/typescript-estree@5.62.0(typescript@4.9.5):
     resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1513,6 +1526,28 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/typescript-estree@6.19.1(typescript@4.9.5):
+    resolution: {integrity: sha512-aFdAxuhzBFRWhy+H20nYu19+Km+gFfwNO4TEqyszkMcgBDYQjmPJ61erHxuT2ESJXhlhrO7I5EFIlZ+qGR8oVA==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 6.19.1
+      '@typescript-eslint/visitor-keys': 6.19.1
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.3
+      semver: 7.5.4
+      ts-api-utils: 1.0.3(typescript@4.9.5)
+      typescript: 4.9.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/utils@5.62.0(eslint@8.56.0)(typescript@4.9.5):
     resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1552,6 +1587,25 @@ packages:
       - typescript
     dev: true
 
+  /@typescript-eslint/utils@6.19.1(eslint@8.56.0)(typescript@4.9.5):
+    resolution: {integrity: sha512-JvjfEZuP5WoMqwh9SPAPDSHSg9FBHHGhjPugSRxu5jMfjvBpq5/sGTD+9M9aQ5sh6iJ8AY/Kk/oUYVEMAPwi7w==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.6
+      '@typescript-eslint/scope-manager': 6.19.1
+      '@typescript-eslint/types': 6.19.1
+      '@typescript-eslint/typescript-estree': 6.19.1(typescript@4.9.5)
+      eslint: 8.56.0
+      semver: 7.5.4
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
   /@typescript-eslint/visitor-keys@5.62.0:
     resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1568,6 +1622,14 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
+  /@typescript-eslint/visitor-keys@6.19.1:
+    resolution: {integrity: sha512-gkdtIO+xSO/SmI0W68DBg4u1KElmIUo3vXzgHyGPs6cxgB0sa3TlptRAAE0hUY1hM6FcDKEv7aIwiTGm76cXfQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.19.1
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
@@ -1756,91 +1818,91 @@ packages:
       chokidar: 3.5.3
       fast-glob: 3.3.2
       magic-string: 0.30.5
-      vite: 3.2.8(@types/node@18.19.6)(sass@1.69.7)(terser@5.26.0)
+      vite: 3.2.8(@types/node@18.19.10)(sass@1.70.0)(terser@5.27.0)
     transitivePeerDependencies:
       - rollup
     dev: true
 
-  /@vitejs/plugin-vue@3.2.0(vite@3.2.8)(vue@3.4.13):
+  /@vitejs/plugin-vue@3.2.0(vite@3.2.8)(vue@3.4.15):
     resolution: {integrity: sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^3.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 3.2.8(@types/node@18.19.6)(sass@1.69.7)(terser@5.26.0)
-      vue: 3.4.13(typescript@4.9.5)
+      vite: 3.2.8(@types/node@18.19.10)(sass@1.70.0)(terser@5.27.0)
+      vue: 3.4.15(typescript@4.9.5)
     dev: true
 
-  /@vue/compiler-core@3.4.13:
-    resolution: {integrity: sha512-zGUdmB3j3Irn9z51GXLJ5s0EAHxmsm5/eXl0y6MBaajMeOAaiT4+zaDoxui4Ets98dwIRr8BBaqXXHtHSfm+KA==}
+  /@vue/compiler-core@3.4.15:
+    resolution: {integrity: sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==}
     dependencies:
       '@babel/parser': 7.23.6
-      '@vue/shared': 3.4.13
+      '@vue/shared': 3.4.15
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.0.2
 
-  /@vue/compiler-dom@3.4.13:
-    resolution: {integrity: sha512-XSNbpr5Rs3kCfVAmBqMu/HDwOS+RL6y28ZZjDlnDUuf146pRWt2sQkwhsOYc9uu2lxjjJy2NcyOkK7MBLVEc7w==}
+  /@vue/compiler-dom@3.4.15:
+    resolution: {integrity: sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==}
     dependencies:
-      '@vue/compiler-core': 3.4.13
-      '@vue/shared': 3.4.13
+      '@vue/compiler-core': 3.4.15
+      '@vue/shared': 3.4.15
 
-  /@vue/compiler-sfc@3.4.13:
-    resolution: {integrity: sha512-SkpmQN8xIFBd5onT413DFSDdjxULJf6jmJg/t3w/DZ9I8ZzyNlLIBLO0qFLewVHyHCiAgpPZlWqSRZXYrawk3Q==}
+  /@vue/compiler-sfc@3.4.15:
+    resolution: {integrity: sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==}
     dependencies:
       '@babel/parser': 7.23.6
-      '@vue/compiler-core': 3.4.13
-      '@vue/compiler-dom': 3.4.13
-      '@vue/compiler-ssr': 3.4.13
-      '@vue/shared': 3.4.13
+      '@vue/compiler-core': 3.4.15
+      '@vue/compiler-dom': 3.4.15
+      '@vue/compiler-ssr': 3.4.15
+      '@vue/shared': 3.4.15
       estree-walker: 2.0.2
       magic-string: 0.30.5
       postcss: 8.4.33
       source-map-js: 1.0.2
 
-  /@vue/compiler-ssr@3.4.13:
-    resolution: {integrity: sha512-rwnw9SVBgD6eGKh8UucnwztieQo/R3RQrEGpE0b0cxb2xxvJeLs/fe7DoYlhEfaSyzM/qD5odkK87hl3G3oW+A==}
+  /@vue/compiler-ssr@3.4.15:
+    resolution: {integrity: sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==}
     dependencies:
-      '@vue/compiler-dom': 3.4.13
-      '@vue/shared': 3.4.13
+      '@vue/compiler-dom': 3.4.15
+      '@vue/shared': 3.4.15
 
   /@vue/devtools-api@6.5.1:
     resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
 
-  /@vue/reactivity@3.4.13:
-    resolution: {integrity: sha512-/ZdUOrGKkGVONzVJkfDqNcn2fLMvaa5VlYx2KwTbnRbX06YZ4GJE0PVTmWzIxtBYdpSTLLXgw3pDggO+96KXzg==}
+  /@vue/reactivity@3.4.15:
+    resolution: {integrity: sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==}
     dependencies:
-      '@vue/shared': 3.4.13
+      '@vue/shared': 3.4.15
 
-  /@vue/runtime-core@3.4.13:
-    resolution: {integrity: sha512-Ov4d4At7z3goxqzSqQxdfVYEcN5HY4dM1uDYL6Hu/Es9Za9BEN602zyjWhhi2+BEki5F9NizRSvn02k/tqNWlg==}
+  /@vue/runtime-core@3.4.15:
+    resolution: {integrity: sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==}
     dependencies:
-      '@vue/reactivity': 3.4.13
-      '@vue/shared': 3.4.13
+      '@vue/reactivity': 3.4.15
+      '@vue/shared': 3.4.15
 
-  /@vue/runtime-dom@3.4.13:
-    resolution: {integrity: sha512-ynde9p16eEV3u1VCxUre2e0nKzD0l3NzH0r599+bXeLT1Yhac8Atcot3iL9XNqwolxYCI89KBII+2MSVzfrz6w==}
+  /@vue/runtime-dom@3.4.15:
+    resolution: {integrity: sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==}
     dependencies:
-      '@vue/runtime-core': 3.4.13
-      '@vue/shared': 3.4.13
+      '@vue/runtime-core': 3.4.15
+      '@vue/shared': 3.4.15
       csstype: 3.1.3
 
-  /@vue/server-renderer@3.4.13(vue@3.4.13):
-    resolution: {integrity: sha512-hkw+UQyDZZtSn1q30nObMfc8beVEQv2pG08nghigxGw+iOWodR+tWSuJak0mzWAHlP/xt/qLc//dG6igfgvGEA==}
+  /@vue/server-renderer@3.4.15(vue@3.4.15):
+    resolution: {integrity: sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==}
     peerDependencies:
-      vue: 3.4.13
+      vue: 3.4.15
     dependencies:
-      '@vue/compiler-ssr': 3.4.13
-      '@vue/shared': 3.4.13
-      vue: 3.4.13(typescript@4.9.5)
+      '@vue/compiler-ssr': 3.4.15
+      '@vue/shared': 3.4.15
+      vue: 3.4.15(typescript@4.9.5)
 
-  /@vue/shared@3.4.13:
-    resolution: {integrity: sha512-56crFKLPpzk85WXX1L1c0QzPOuoapWlPVys8eMG8kkRmqdMjWUqK8KpFdE2d7BQA4CEbXwyyHPq6MpFr8H9rcg==}
+  /@vue/shared@3.4.15:
+    resolution: {integrity: sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g==}
 
-  /@vue/test-utils@2.4.3(vue@3.4.13):
-    resolution: {integrity: sha512-F4K7mF+ad++VlTrxMJVRnenKSJmO6fkQt2wpRDiKDesQMkfpniGWsqEi/JevxGBo2qEkwwjvTUAoiGJLNx++CA==}
+  /@vue/test-utils@2.4.4(vue@3.4.15):
+    resolution: {integrity: sha512-8jkRxz8pNhClAf4Co4ZrpAoFISdvT3nuSkUlY6Ys6rmTpw3DMWG/X3mw3gQ7QJzgCZO9f+zuE2kW57fi09MW7Q==}
     peerDependencies:
       '@vue/server-renderer': ^3.0.1
       vue: ^3.0.1
@@ -1849,17 +1911,17 @@ packages:
         optional: true
     dependencies:
       js-beautify: 1.14.11
-      vue: 3.4.13(typescript@4.9.5)
+      vue: 3.4.15(typescript@4.9.5)
       vue-component-type-helpers: 1.8.27
     dev: true
 
-  /@vueuse/core@10.7.2(vue@3.4.13):
+  /@vueuse/core@10.7.2(vue@3.4.15):
     resolution: {integrity: sha512-AOyAL2rK0By62Hm+iqQn6Rbu8bfmbgaIMXcE3TSr7BdQ42wnSFlwIdPjInO62onYsEMK/yDMU8C6oGfDAtZ2qQ==}
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.7.2
-      '@vueuse/shared': 10.7.2(vue@3.4.13)
-      vue-demi: 0.14.6(vue@3.4.13)
+      '@vueuse/shared': 10.7.2(vue@3.4.15)
+      vue-demi: 0.14.6(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -1869,10 +1931,10 @@ packages:
     resolution: {integrity: sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ==}
     dev: true
 
-  /@vueuse/shared@10.7.2(vue@3.4.13):
+  /@vueuse/shared@10.7.2(vue@3.4.15):
     resolution: {integrity: sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.4.13)
+      vue-demi: 0.14.6(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -1935,13 +1997,13 @@ packages:
     hasBin: true
     dev: true
 
-  /addons-linter@6.20.0(node-fetch@3.3.1):
-    resolution: {integrity: sha512-u3nnnz+dZS5sOAJMF/DdVnjLVDqqbLbpdTNEbCEPIwKlAIDR+FbHHrgRp3JWJw2gvwZuZCmYStQd/G5Llp0nFg==}
+  /addons-linter@6.21.0(node-fetch@3.3.1):
+    resolution: {integrity: sha512-4GBn14BR16FZE7dog6uz+1HO6V3B+mAVxmbwxRhed2y5eyrwIW832TmEpku+5A5bbovBZ4gilXEtBsl6A1AMmg==}
     engines: {node: '>=16.0.0'}
     hasBin: true
     dependencies:
       '@fluent/syntax': 0.19.0
-      '@mdn/browser-compat-data': 5.5.4
+      '@mdn/browser-compat-data': 5.5.7
       addons-moz-compare: 1.3.0
       addons-scanner-utils: 9.9.0(node-fetch@3.3.1)
       ajv: 8.12.0
@@ -2522,7 +2584,7 @@ packages:
     engines: {node: '>=12.13.0'}
     hasBin: true
     dependencies:
-      '@types/node': 18.19.6
+      '@types/node': 18.19.10
       escape-string-regexp: 4.0.0
       is-wsl: 2.2.0
       lighthouse-logger: 1.4.2
@@ -3535,6 +3597,16 @@ packages:
       eslint: 8.56.0
     dev: true
 
+  /eslint-compat-utils@0.4.1(eslint@8.56.0):
+    resolution: {integrity: sha512-5N7ZaJG5pZxUeNNJfUchurLVrunD1xJvyg5kYOIVF8kg1f3ajTikmAu/5fZ9w100omNPOoMjngRszh/Q/uFGMg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      eslint: 8.56.0
+      semver: 7.5.4
+    dev: true
+
   /eslint-config-flat-gitignore@0.1.2:
     resolution: {integrity: sha512-PcBsqtd5QHEZH4ROvpnRN4EP0qcHh9voCCHgtyHxnJZHGspJREcZn7oPqRG/GfWt9m3C0fkC2l5CuBtMig2wXQ==}
     dependencies:
@@ -3559,7 +3631,7 @@ packages:
       eslint: 8.56.0
     dev: true
 
-  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.18.1)(eslint-import-resolver-node@0.3.9)(eslint@8.56.0):
+  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-node@0.3.9)(eslint@8.56.0):
     resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -3580,7 +3652,7 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 6.18.1(eslint@8.56.0)(typescript@4.9.5)
+      '@typescript-eslint/parser': 6.19.1(eslint@8.56.0)(typescript@4.9.5)
       debug: 3.2.7
       eslint: 8.56.0
       eslint-import-resolver-node: 0.3.9
@@ -3619,7 +3691,7 @@ packages:
       ignore: 5.3.0
     dev: true
 
-  /eslint-plugin-i@2.29.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0):
+  /eslint-plugin-i@2.29.1(@typescript-eslint/parser@6.19.1)(eslint@8.56.0):
     resolution: {integrity: sha512-ORizX37MelIWLbMyqI7hi8VJMf7A0CskMmYkB+lkCX3aF4pkGV7kwx5bSEb4qx7Yce2rAf9s34HqDRPjGRZPNQ==}
     engines: {node: '>=12'}
     peerDependencies:
@@ -3629,7 +3701,7 @@ packages:
       doctrine: 3.0.0
       eslint: 8.56.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.18.1)(eslint-import-resolver-node@0.3.9)(eslint@8.56.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-node@0.3.9)(eslint@8.56.0)
       get-tsconfig: 4.7.2
       is-glob: 4.0.3
       minimatch: 3.1.2
@@ -3661,19 +3733,20 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-jsonc@2.11.2(eslint@8.56.0):
-    resolution: {integrity: sha512-F6A0MZhIGRBPOswzzn4tJFXXkPLiLwJaMlQwz/Qj1qx+bV5MCn79vBeJh2ynMmtqqHloi54KDCnsT/KWrcCcnQ==}
+  /eslint-plugin-jsonc@2.13.0(eslint@8.56.0):
+    resolution: {integrity: sha512-2wWdJfpO/UbZzPDABuUVvlUQjfMJa2p2iQfYt/oWxOMpXCcjuiMUSaA02gtY/Dbu82vpaSqc+O7Xq6ECHwtIxA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
       eslint: 8.56.0
-      eslint-compat-utils: 0.1.2(eslint@8.56.0)
+      eslint-compat-utils: 0.4.1(eslint@8.56.0)
       espree: 9.6.1
       graphemer: 1.4.0
       jsonc-eslint-parser: 2.4.0
       natural-compare: 1.4.0
+      synckit: 0.6.2
     dev: true
 
   /eslint-plugin-markdown@3.0.1(eslint@8.56.0):
@@ -3749,15 +3822,15 @@ packages:
       - typescript
     dev: true
 
-  /eslint-plugin-toml@0.8.0(eslint@8.56.0):
-    resolution: {integrity: sha512-vNfoLQq60nK5FTr6x9F/SK3ZcbMsHzfgXsoDLhoCqgGtpzoAmsZrFB+efKEjjLT9wdIL6sKbz4taLKpB9sU8Hw==}
+  /eslint-plugin-toml@0.9.2(eslint@8.56.0):
+    resolution: {integrity: sha512-ri0xf63PYf3pIq/WY9BIwrqxZmGTIwSkAO0bHddI0ajUwN4KGz6W8vOvdXFHOpRdRfzxlmXze/vfsY/aTEXESg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
       debug: 4.3.4
       eslint: 8.56.0
-      eslint-compat-utils: 0.1.2(eslint@8.56.0)
+      eslint-compat-utils: 0.4.1(eslint@8.56.0)
       lodash: 4.17.21
       toml-eslint-parser: 0.9.3
     transitivePeerDependencies:
@@ -3791,7 +3864,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-unused-imports@3.0.0(@typescript-eslint/eslint-plugin@6.18.1)(eslint@8.56.0):
+  /eslint-plugin-unused-imports@3.0.0(@typescript-eslint/eslint-plugin@6.19.1)(eslint@8.56.0):
     resolution: {integrity: sha512-sduiswLJfZHeeBJ+MQaG+xYzSWdRXoSw61DpU13mzWumCkR0ufD0HmO4kdNokjrkluMHpj/7PJeN35pgbhW3kw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3801,12 +3874,12 @@ packages:
       '@typescript-eslint/eslint-plugin':
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@4.9.5)
+      '@typescript-eslint/eslint-plugin': 6.19.1(@typescript-eslint/parser@6.19.1)(eslint@8.56.0)(typescript@4.9.5)
       eslint: 8.56.0
       eslint-rule-composer: 0.3.0
     dev: true
 
-  /eslint-plugin-vitest@0.3.20(@typescript-eslint/eslint-plugin@6.18.1)(eslint@8.56.0)(typescript@4.9.5)(vitest@0.24.5):
+  /eslint-plugin-vitest@0.3.20(@typescript-eslint/eslint-plugin@6.19.1)(eslint@8.56.0)(typescript@4.9.5)(vitest@0.24.5):
     resolution: {integrity: sha512-O05k4j9TGMOkkghj9dRgpeLDyOSiVIxQWgNDPfhYPm5ioJsehcYV/zkRLekQs+c8+RBCVXucSED3fYOyy2EoWA==}
     engines: {node: ^18.0.0 || >= 20.0.0}
     peerDependencies:
@@ -3819,10 +3892,10 @@ packages:
       vitest:
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@4.9.5)
+      '@typescript-eslint/eslint-plugin': 6.19.1(@typescript-eslint/parser@6.19.1)(eslint@8.56.0)(typescript@4.9.5)
       '@typescript-eslint/utils': 6.18.1(eslint@8.56.0)(typescript@4.9.5)
       eslint: 8.56.0
-      vitest: 0.24.5(jsdom@20.0.3)(sass@1.69.7)(terser@5.26.0)
+      vitest: 0.24.5(jsdom@20.0.3)(sass@1.70.0)(terser@5.27.0)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -3846,15 +3919,15 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-yml@1.11.0(eslint@8.56.0):
-    resolution: {integrity: sha512-NBZP1NDGy0u38pY5ieix75jxS9GNOJy9xd4gQa0rU4gWbfEsVhKDwuFaQ6RJpDbv6Lq5TtcAZS/YnAc0oeRw0w==}
+  /eslint-plugin-yml@1.12.2(eslint@8.56.0):
+    resolution: {integrity: sha512-hvS9p08FhPT7i/ynwl7/Wt7ke7Rf4P2D6fT8lZlL43peZDTsHtH2A0SIFQ7Kt7+mJ6if6P+FX3iJhMkdnxQwpg==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
       debug: 4.3.4
       eslint: 8.56.0
-      eslint-compat-utils: 0.1.2(eslint@8.56.0)
+      eslint-compat-utils: 0.4.1(eslint@8.56.0)
       lodash: 4.17.21
       natural-compare: 1.4.0
       yaml-eslint-parser: 1.2.2
@@ -3862,13 +3935,13 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-processor-vue-blocks@0.1.1(@vue/compiler-sfc@3.4.13)(eslint@8.56.0):
+  /eslint-processor-vue-blocks@0.1.1(@vue/compiler-sfc@3.4.15)(eslint@8.56.0):
     resolution: {integrity: sha512-9+dU5lU881log570oBwpelaJmOfOzSniben7IWEDRYQPPWwlvaV7NhOtsTuUWDqpYT+dtKKWPsgz4OkOi+aZnA==}
     peerDependencies:
       '@vue/compiler-sfc': ^3.3.0
       eslint: ^8.50.0
     dependencies:
-      '@vue/compiler-sfc': 3.4.13
+      '@vue/compiler-sfc': 3.4.15
       eslint: 8.56.0
     dev: true
 
@@ -5988,18 +6061,18 @@ packages:
     engines: {node: '>= 0.4.0'}
     dev: true
 
-  /overlayscrollbars-vue@0.5.6(overlayscrollbars@2.4.6)(vue@3.4.13):
-    resolution: {integrity: sha512-gBraPkblG/pE6P74+q0vOnULzmD1sePth7S3D6Cb8hLLLrkJNE66cNWzxUgVPtUP3gp5PK6R3rZsxNNo3Xs3GQ==}
+  /overlayscrollbars-vue@0.5.7(overlayscrollbars@2.4.7)(vue@3.4.15):
+    resolution: {integrity: sha512-i+jjyFXcCWlDhN3nOo0kt81NgwaixEvY60H/G2iixF2pAm4BnXi/i6muSWb5+rATd4I5TYnA+k5QYHmdI/Wvew==}
     peerDependencies:
       overlayscrollbars: ^2.0.0
       vue: ^3.2.25
     dependencies:
-      overlayscrollbars: 2.4.6
-      vue: 3.4.13(typescript@4.9.5)
+      overlayscrollbars: 2.4.7
+      vue: 3.4.15(typescript@4.9.5)
     dev: false
 
-  /overlayscrollbars@2.4.6:
-    resolution: {integrity: sha512-C7tmhetwMv9frEvIT/RfkAVEgbjRNz/Gh2zE8BVmN+jl35GRaAnz73rlGQCMRoC2arpACAXyMNnJkzHb7GBrcA==}
+  /overlayscrollbars@2.4.7:
+    resolution: {integrity: sha512-02X2/nHno35dzebCx+EO2tRDaKAOltZqUKdUqvq3Pt8htCuhJbYi+mjr0CYerVeGRRoZ2Uo6/8XrNg//DJJ+GA==}
     dev: false
 
   /p-cancelable@3.0.0:
@@ -6230,7 +6303,7 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /pinia@2.1.7(typescript@4.9.5)(vue@3.4.13):
+  /pinia@2.1.7(typescript@4.9.5)(vue@3.4.15):
     resolution: {integrity: sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==}
     peerDependencies:
       '@vue/composition-api': ^1.4.0
@@ -6244,8 +6317,8 @@ packages:
     dependencies:
       '@vue/devtools-api': 6.5.1
       typescript: 4.9.5
-      vue: 3.4.13(typescript@4.9.5)
-      vue-demi: 0.14.6(vue@3.4.13)
+      vue: 3.4.15(typescript@4.9.5)
+      vue-demi: 0.14.6(vue@3.4.15)
     dev: false
 
   /pino-abstract-transport@1.1.0:
@@ -6404,12 +6477,12 @@ packages:
       escape-goat: 4.0.0
     dev: true
 
-  /qrcode.vue@3.4.1(vue@3.4.13):
+  /qrcode.vue@3.4.1(vue@3.4.15):
     resolution: {integrity: sha512-wq/zHsifH4FJ1GXQi8/wNxD1KfQkckIpjK1KPTc/qwYU5/Bkd4me0w4xZSg6EXk6xLBkVDE0zxVagewv5EMAVA==}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
-      vue: 3.4.13(typescript@4.9.5)
+      vue: 3.4.15(typescript@4.9.5)
     dev: false
 
   /qs@6.5.3:
@@ -6748,8 +6821,8 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
-  /sass@1.69.7:
-    resolution: {integrity: sha512-rzj2soDeZ8wtE2egyLXgOOHQvaC2iosZrkF6v3EUG+tBwEvhqUCzm0VP3k9gHF9LXbSrRhT5SksoI56Iw8NPnQ==}
+  /sass@1.70.0:
+    resolution: {integrity: sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
@@ -6882,6 +6955,7 @@ packages:
 
   /sign-addon@5.3.0:
     resolution: {integrity: sha512-7nHlCzhQgVMLBNiXVEgbG/raq48awOW0lYMN5uo1BaB3mp0+k8M8pvDwbfTlr3apcxZJsk9HQsAW1POwoJugpQ==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       common-tags: 1.8.2
       core-js: 3.29.0
@@ -7259,6 +7333,13 @@ packages:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
     dev: true
 
+  /synckit@0.6.2:
+    resolution: {integrity: sha512-Vhf+bUa//YSTYKseDiiEuQmhGCoIF3CVBhunm3r/DQnYiGT4JssmnKQc44BIyOZRK2pKjXXAgbhfmbeoC9CJpA==}
+    engines: {node: '>=12.20'}
+    dependencies:
+      tslib: 2.6.2
+    dev: true
+
   /tar-stream@2.2.0:
     resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
     engines: {node: '>=6'}
@@ -7270,8 +7351,8 @@ packages:
       readable-stream: 3.6.2
     dev: true
 
-  /terser@5.26.0:
-    resolution: {integrity: sha512-dytTGoE2oHgbNV9nTzgBEPaqAWvcJNl66VZ0BkJqlvp71IjO8CxdBx/ykCNb47cLnCmCvRZ6ZR0tLkqvZCdVBQ==}
+  /terser@5.27.0:
+    resolution: {integrity: sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==}
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
@@ -7352,7 +7433,7 @@ packages:
     dev: true
 
   /tosource@1.0.0:
-    resolution: {integrity: sha1-QtiN0RZhi88A1hBt1URvNCeQL/E=}
+    resolution: {integrity: sha512-N6g8eQ1eerw6Y1pBhdgkubWIiPFwXa2POSUrlL8jth5CyyEWNWzoGKRkO3CaO7Jx27hlJP54muB3btIAbx4MPg==}
     engines: {node: '>=0.4.0'}
     dev: true
 
@@ -7414,6 +7495,10 @@ packages:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
     dev: true
 
+  /tslib@2.6.2:
+    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
+    dev: true
+
   /tsup@6.7.0(postcss@8.4.33)(typescript@4.9.5):
     resolution: {integrity: sha512-L3o8hGkaHnu5TdJns+mCqFsDBo83bJ44rlK7e6VdanIvpea4ArPcU3swWGsLVbXak1PqQx/V+SSmFPujBK+zEQ==}
     engines: {node: '>=14.18'}
@@ -7696,7 +7781,7 @@ packages:
     dependencies:
       '@antfu/utils': 0.7.7
       '@rollup/pluginutils': 5.1.0
-      '@vueuse/core': 10.7.2(vue@3.4.13)
+      '@vueuse/core': 10.7.2(vue@3.4.15)
       local-pkg: 0.4.3
       magic-string: 0.26.7
       unimport: 1.3.0
@@ -7705,7 +7790,7 @@ packages:
       - rollup
     dev: true
 
-  /unplugin-icons@0.14.15(@vue/compiler-sfc@3.4.13):
+  /unplugin-icons@0.14.15(@vue/compiler-sfc@3.4.15):
     resolution: {integrity: sha512-J6YBA+fUzVM2IZPXCK3Pnk36jYVwQ6lkjRgOnZaXNIxpMDsmwDqrE1AGJ0zUbfuEoOa90OBGc0OPfN1r+qlSIQ==}
     peerDependencies:
       '@svgr/core': '>=5.5.0'
@@ -7725,7 +7810,7 @@ packages:
       '@antfu/install-pkg': 0.1.1
       '@antfu/utils': 0.7.7
       '@iconify/utils': 2.1.14
-      '@vue/compiler-sfc': 3.4.13
+      '@vue/compiler-sfc': 3.4.15
       debug: 4.3.4
       kolorist: 1.8.0
       local-pkg: 0.4.3
@@ -7734,7 +7819,7 @@ packages:
       - supports-color
     dev: true
 
-  /unplugin-vue-components@0.22.12(vue@3.4.13):
+  /unplugin-vue-components@0.22.12(vue@3.4.15):
     resolution: {integrity: sha512-FxyzsuBvMCYPIk+8cgscGBQ345tvwVu+qY5IhE++eorkyvA4Z1TiD/HCiim+Kbqozl10i4K+z+NCa2WO2jexRA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -7754,7 +7839,7 @@ packages:
       minimatch: 5.1.6
       resolve: 1.22.8
       unplugin: 1.6.0
-      vue: 3.4.13(typescript@4.9.5)
+      vue: 3.4.15(typescript@4.9.5)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -7849,7 +7934,7 @@ packages:
       extsprintf: 1.3.0
     dev: true
 
-  /vite@3.2.8(@types/node@18.19.6)(sass@1.69.7)(terser@5.26.0):
+  /vite@3.2.8(@types/node@18.19.10)(sass@1.70.0)(terser@5.27.0):
     resolution: {integrity: sha512-EtQU16PLIJpAZol2cTLttNP1mX6L0SyI0pgQB1VOoWeQnMSvtiwovV3D6NcjN8CZQWWyESD2v5NGnpz5RvgOZA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -7874,18 +7959,18 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 18.19.6
+      '@types/node': 18.19.10
       esbuild: 0.15.18
       postcss: 8.4.33
       resolve: 1.22.8
       rollup: 2.79.1
-      sass: 1.69.7
-      terser: 5.26.0
+      sass: 1.70.0
+      terser: 5.27.0
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
 
-  /vitest@0.24.5(jsdom@20.0.3)(sass@1.69.7)(terser@5.26.0):
+  /vitest@0.24.5(jsdom@20.0.3)(sass@1.70.0)(terser@5.27.0):
     resolution: {integrity: sha512-zw6JhPUHtLILQDe5Q39b/SzoITkG+R7hcFjuthp4xsi6zpmfQPOZcHodZ+3bqoWl4EdGK/p1fuMiEwdxgbGLOA==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
@@ -7909,7 +7994,7 @@ packages:
     dependencies:
       '@types/chai': 4.3.11
       '@types/chai-subset': 1.3.5
-      '@types/node': 18.19.6
+      '@types/node': 18.19.10
       chai: 4.4.1
       debug: 4.3.4
       jsdom: 20.0.3
@@ -7918,7 +8003,7 @@ packages:
       tinybench: 2.5.1
       tinypool: 0.3.1
       tinyspy: 1.1.1
-      vite: 3.2.8(@types/node@18.19.6)(sass@1.69.7)(terser@5.26.0)
+      vite: 3.2.8(@types/node@18.19.10)(sass@1.70.0)(terser@5.27.0)
     transitivePeerDependencies:
       - less
       - sass
@@ -7932,7 +8017,7 @@ packages:
     resolution: {integrity: sha512-0vOfAtI67UjeO1G6UiX5Kd76CqaQ67wrRZiOe7UAb9Jm6GzlUr/fC7CV90XfwapJRjpCMaZFhv1V0ajWRmE9Dg==}
     dev: true
 
-  /vue-demi@0.13.11(vue@3.4.13):
+  /vue-demi@0.13.11(vue@3.4.15):
     resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
     engines: {node: '>=12'}
     hasBin: true
@@ -7944,10 +8029,10 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.13(typescript@4.9.5)
+      vue: 3.4.15(typescript@4.9.5)
     dev: true
 
-  /vue-demi@0.14.6(vue@3.4.13):
+  /vue-demi@0.14.6(vue@3.4.15):
     resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
     engines: {node: '>=12'}
     hasBin: true
@@ -7959,7 +8044,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.13(typescript@4.9.5)
+      vue: 3.4.15(typescript@4.9.5)
 
   /vue-eslint-parser@9.4.0(eslint@8.56.0):
     resolution: {integrity: sha512-7KsNBb6gHFA75BtneJsoK/dbZ281whUIwFYdQxA68QrCrGMXYzUMbPDHGcOQ0OocIVKrWSKWXZ4mL7tonCXoUw==}
@@ -7979,7 +8064,7 @@ packages:
       - supports-color
     dev: true
 
-  /vue-i18n@9.9.0(vue@3.4.13):
+  /vue-i18n@9.9.0(vue@3.4.15):
     resolution: {integrity: sha512-xQ5SxszUAqK5n84N+uUyHH/PiQl9xZ24FOxyAaNonmOQgXeN+rD9z/6DStOpOxNFQn4Cgcquot05gZc+CdOujA==}
     engines: {node: '>= 16'}
     peerDependencies:
@@ -7988,38 +8073,38 @@ packages:
       '@intlify/core-base': 9.9.0
       '@intlify/shared': 9.9.0
       '@vue/devtools-api': 6.5.1
-      vue: 3.4.13(typescript@4.9.5)
+      vue: 3.4.15(typescript@4.9.5)
 
-  /vue-toastification@2.0.0-rc.5(vue@3.4.13):
+  /vue-toastification@2.0.0-rc.5(vue@3.4.15):
     resolution: {integrity: sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==}
     peerDependencies:
       vue: ^3.0.2
     dependencies:
-      vue: 3.4.13(typescript@4.9.5)
+      vue: 3.4.15(typescript@4.9.5)
     dev: false
 
-  /vue@3.4.13(typescript@4.9.5):
-    resolution: {integrity: sha512-FE3UZ0p+oUZTwz+SzlH/hDFg+XsVRFvwmx0LXjdD1pRK/cO4fu5v6ltAZji4za4IBih3dV78elUK3di8v3pWIg==}
+  /vue@3.4.15(typescript@4.9.5):
+    resolution: {integrity: sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@vue/compiler-dom': 3.4.13
-      '@vue/compiler-sfc': 3.4.13
-      '@vue/runtime-dom': 3.4.13
-      '@vue/server-renderer': 3.4.13(vue@3.4.13)
-      '@vue/shared': 3.4.13
+      '@vue/compiler-dom': 3.4.15
+      '@vue/compiler-sfc': 3.4.15
+      '@vue/runtime-dom': 3.4.15
+      '@vue/server-renderer': 3.4.15(vue@3.4.15)
+      '@vue/shared': 3.4.15
       typescript: 4.9.5
 
-  /vuedraggable@4.1.0(vue@3.4.13):
+  /vuedraggable@4.1.0(vue@3.4.15):
     resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
     peerDependencies:
       vue: ^3.0.1
     dependencies:
       sortablejs: 1.14.0
-      vue: 3.4.13(typescript@4.9.5)
+      vue: 3.4.15(typescript@4.9.5)
     dev: false
 
   /w3c-xmlserializer@4.0.0:
@@ -8043,14 +8128,14 @@ packages:
       defaults: 1.0.4
     dev: true
 
-  /web-ext@7.10.0:
-    resolution: {integrity: sha512-UTh4n/F6tvJrfYxICuJMkc7N4Qp3GrmQ1XIXTuc8XDt1tKFPfmKMa0D/kJZKoPg8PJud7j5TT3EtTqMqzPj8Rg==}
+  /web-ext@7.11.0:
+    resolution: {integrity: sha512-EG6YXHITNDJB/h6Rc5FF08eMoN45sZPBBIIlEraBzxJ0RdJZ8Z3xvUUawbDwt+mowfv9X0XRWlLSwdWbRKgojg==}
     engines: {node: '>=14.0.0', npm: '>=6.9.0'}
     hasBin: true
     dependencies:
       '@babel/runtime': 7.21.0
       '@devicefarmer/adbkit': 3.2.3
-      addons-linter: 6.20.0(node-fetch@3.3.1)
+      addons-linter: 6.21.0(node-fetch@3.3.1)
       bunyan: 1.8.15
       camelcase: 7.0.1
       chrome-launcher: 0.15.1

From 1926faa9f289d59885a6f2602e1bba26e409fa52 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 29 Jan 2024 18:03:29 +0800
Subject: [PATCH 41/45] chore: annotate useless code

---
 src/utils/authProvider.ts | 120 ++++++++++++++++++--------------------
 1 file changed, 58 insertions(+), 62 deletions(-)

diff --git a/src/utils/authProvider.ts b/src/utils/authProvider.ts
index 20f1d063..c3a7d5d7 100644
--- a/src/utils/authProvider.ts
+++ b/src/utils/authProvider.ts
@@ -1,11 +1,4 @@
-/**
- * 感謝這份專案給出的獲取accessKey的方法
- * https://github.com/indefined/UserScripts/blob/42e20281d2e4d7bce16b5c8033b67ccb6ad312e9/bilibiliHome/bilibiliHome.user.js#L1149
- * TODO: 解耦，避免直接操作DOM
- */
-
-/* eslint-disable no-throw-literal */
-import browser from 'webextension-polyfill'
+// import browser from 'webextension-polyfill'
 import { appSign } from './appSign'
 import { accessKey } from '~/logic/storage'
 
@@ -14,63 +7,66 @@ export function revokeAccessKey() {
 }
 
 /**
- * @deprecated
- * @param t
- * @param element
+ * 感謝這份專案給出的獲取accessKey的方法
+ * https://github.com/indefined/UserScripts/blob/42e20281d2e4d7bce16b5c8033b67ccb6ad312e9/bilibiliHome/bilibiliHome.user.js#L1149
  */
-export function grantAccessKey(t: any, element: HTMLButtonElement): void {
-  const originalInnerHTML = element.innerHTML
-  element.innerHTML = `
-    <span class="animate-pulse">Loading...</span>
-  `
-  element.style.pointerEvents = 'none'
-  element.disabled = true
+// /**
+//  * @deprecated
+//  * @param t
+//  * @param element
+//  */
+// export function grantAccessKey(t: any, element: HTMLButtonElement): void {
+//   const originalInnerHTML = element.innerHTML
+//   element.innerHTML = `
+//     <span class="animate-pulse">Loading...</span>
+//   `
+//   element.style.pointerEvents = 'none'
+//   element.disabled = true
 
-  const tip = t('auth.err_tip')
-  fetch(
-    'https://passport.bilibili.com/login/app/third?appkey=5fd5a7d8bfd9b0e6'
-    + '&api=https%3A%2F%2Fwww.mcbbs.net%2Ftemplate%2Fmcbbs%2Fimage%2Fspecial_photo_bg.png&sign=04224646d1fea004e79606d3b038c84a',
-    {
-      method: 'GET',
-      credentials: 'include',
-    },
-  )
-    .then(res => res.json())
-    .then((data) => {
-      if (data.code || !data.data)
-        throw { tip, msg: data.msg || data.message || data.code, data }
-      else if (!data.data.has_login)
-        throw { tip, msg: t('auth.plz_login_first'), data }
-      else if (!data.data.confirm_uri)
-        throw { tip, msg: t('auth.receive_verified_url_err'), data }
-      else return data.data.confirm_uri
-    })
-    .then(
-      url =>
-        browser.runtime
-          .sendMessage({
-            contentScriptQuery: 'getAccessKey',
-            confirmUri: url,
-          })
-          .then((res: { accessKey: string }) => {
-            accessKey.value = res.accessKey
-            return Promise.resolve()
-          })
-          .catch((err: any) => {
-            // eslint-disable-next-line prefer-promise-reject-errors
-            return Promise.reject({ tip, msg: t('auth.failed_to_get_accesskey'), data: err })
-          }),
-    )
-    .catch((error) => {
-      element.innerHTML = originalInnerHTML
-      element.style.pointerEvents = 'auto'
-      element.disabled = false
+//   const tip = t('auth.err_tip')
+//   fetch(
+//     'https://passport.bilibili.com/login/app/third?appkey=5fd5a7d8bfd9b0e6'
+//     + '&api=https%3A%2F%2Fwww.mcbbs.net%2Ftemplate%2Fmcbbs%2Fimage%2Fspecial_photo_bg.png&sign=04224646d1fea004e79606d3b038c84a',
+//     {
+//       method: 'GET',
+//       credentials: 'include',
+//     },
+//   )
+//     .then(res => res.json())
+//     .then((data) => {
+//       if (data.code || !data.data)
+//         throw { tip, msg: data.msg || data.message || data.code, data }
+//       else if (!data.data.has_login)
+//         throw { tip, msg: t('auth.plz_login_first'), data }
+//       else if (!data.data.confirm_uri)
+//         throw { tip, msg: t('auth.receive_verified_url_err'), data }
+//       else return data.data.confirm_uri
+//     })
+//     .then(
+//       url =>
+//         browser.runtime
+//           .sendMessage({
+//             contentScriptQuery: 'getAccessKey',
+//             confirmUri: url,
+//           })
+//           .then((res: { accessKey: string }) => {
+//             accessKey.value = res.accessKey
+//             return Promise.resolve()
+//           })
+//           .catch((err: any) => {
+//             // eslint-disable-next-line prefer-promise-reject-errors
+//             return Promise.reject({ tip, msg: t('auth.failed_to_get_accesskey'), data: err })
+//           }),
+//     )
+//     .catch((error) => {
+//       element.innerHTML = originalInnerHTML
+//       element.style.pointerEvents = 'auto'
+//       element.disabled = false
 
-      // eslint-disable-next-line no-alert
-      alert(`${error.tip}: ${error.msg}`)
-      console.error(`${error.msg}: `, error.data)
-    })
-}
+//       alert(`${error.tip}: ${error.msg}`)
+//       console.error(`${error.msg}: `, error.data)
+//     })
+// }
 
 // https://socialsisteryi.github.io/bilibili-API-collect/docs/misc/sign/APPKey.html#appkey
 export const TVAppKey = {

From 0a064e576b288fc756dd19846798cc17b28a4f94 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 30 Jan 2024 00:06:52 +0800
Subject: [PATCH 42/45] fix: resolve with incorrect order of video list after
 refresh data

---
 src/contentScripts/views/Home/components/Following.vue      | 6 +++++-
 .../views/Home/components/SubscribedSeries.vue              | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/contentScripts/views/Home/components/Following.vue b/src/contentScripts/views/Home/components/Following.vue
index ab66c082..f1db2a10 100644
--- a/src/contentScripts/views/Home/components/Following.vue
+++ b/src/contentScripts/views/Home/components/Following.vue
@@ -32,8 +32,12 @@ function initPageAction() {
       await getFollowedUsersVideos()
   }
   handlePageRefresh.value = async () => {
-    videoList.length = 0
+    if (isLoading.value)
+      return
+
     offset.value = ''
+    updateBaseline.value = ''
+    videoList.length = 0
     noMoreContent.value = false
 
     for (let i = 0; i < 3; i++)
diff --git a/src/contentScripts/views/Home/components/SubscribedSeries.vue b/src/contentScripts/views/Home/components/SubscribedSeries.vue
index 8333b519..0cc92fc6 100644
--- a/src/contentScripts/views/Home/components/SubscribedSeries.vue
+++ b/src/contentScripts/views/Home/components/SubscribedSeries.vue
@@ -24,7 +24,11 @@ function initPageAction() {
       await getFollowedUsersVideos()
   }
   handlePageRefresh.value = async () => {
+    if (isLoading.value)
+      return
+
     offset.value = ''
+    updateBaseline.value = ''
     momentList.length = 0
     noMoreContent.value = false
     noMoreContentWarning.value = false

From a4a742206c4b0c2ce9afd6b6be10f437d2812f7d Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 30 Jan 2024 00:09:29 +0800
Subject: [PATCH 43/45] perf: only store the ForYou tab to reduce performance

---
 src/contentScripts/views/Home/Home.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 1e4ea79c..4707c31d 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -154,7 +154,7 @@ onUnmounted(() => {
       </header>
 
       <Transition name="page-fade">
-        <KeepAlive>
+        <KeepAlive include="ForYou">
           <Component :is="pages[activatedPage]" :key="activatedPage" />
         </KeepAlive>
       </Transition>

From 6d905730037e1f89bac79a3a367d0f184a151f9a Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 30 Jan 2024 17:14:39 +0800
Subject: [PATCH 44/45] chore: adjust `delay()` description

---
 src/utils/main.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/utils/main.ts b/src/utils/main.ts
index 39696e40..b2364bc1 100644
--- a/src/utils/main.ts
+++ b/src/utils/main.ts
@@ -100,11 +100,11 @@ export function injectCSS(css: string): HTMLStyleElement {
 
 /**
  * delay
- * @param time delay time
+ * @param ms milliseconds delay time
  */
-export function delay(time: number) {
+export function delay(ms: number) {
   return new Promise((resolve) => {
-    setTimeout(resolve, time)
+    setTimeout(resolve, ms)
   })
 }
 

From 11b7361ff50c86f87689f69f52950641a28a8c2d Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 30 Jan 2024 17:38:31 +0800
Subject: [PATCH 45/45] fix: unable to refresh data in some cases when changing
 the home tab

---
 src/contentScripts/views/Home/Home.vue        | 21 ++++++++++++++++---
 .../views/Home/components/Following.vue       |  7 +++++++
 .../views/Home/components/ForYou.vue          |  9 ++++++++
 .../views/Home/components/Ranking.vue         | 11 +++++++++-
 .../Home/components/SubscribedSeries.vue      |  7 +++++++
 .../views/Home/components/Trending.vue        |  7 +++++++
 6 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 4707c31d..fc03f2e3 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-
 import type { HomeTab } from './types'
 import { HomeSubPage } from './types'
 import emitter from '~/utils/mitt'
@@ -20,6 +19,7 @@ const pages = {
 }
 const showSearchPageMode = ref<boolean>(false)
 const shouldMoveTabsUp = ref<boolean>(false)
+const tabContentLoading = ref<boolean>(false)
 
 const tabs = computed((): HomeTab[] => {
   return [
@@ -72,6 +72,16 @@ onMounted(() => {
 onUnmounted(() => {
   emitter.off('topBarVisibleChange')
 })
+
+function handleChangeTab(tab: HomeTab) {
+  // 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
+  // because `handlePageRefresh` and `handleReachBottom` has been replaced
+  // now they are set to refresh the data of the tab you switched to
+  if (!tabContentLoading.value)
+    activatedPage.value = tab.value
+}
 </script>
 
 <template>
@@ -146,7 +156,8 @@ onUnmounted(() => {
             px-4 lh-35px bg="$bew-elevated-1 hover:$bew-elevated-1-hover" backdrop-glass rounded="$bew-radius"
             cursor-pointer shadow="$bew-shadow-1" box-border border="1 $bew-border-color" duration-300
             :class="{ 'tab-activated': activatedPage === tab.value }"
-            @click="activatedPage = tab.value"
+            :style="{ opacity: activatedPage !== tab.value && tabContentLoading ? 0.4 : 1 }"
+            @click="handleChangeTab(tab)"
           >
             <span class="text-center">{{ tab.label }}</span>
           </li>
@@ -155,7 +166,11 @@ onUnmounted(() => {
 
       <Transition name="page-fade">
         <KeepAlive include="ForYou">
-          <Component :is="pages[activatedPage]" :key="activatedPage" />
+          <Component
+            :is="pages[activatedPage]" :key="activatedPage"
+            @before-loading="tabContentLoading = true"
+            @after-loading="tabContentLoading = false"
+          />
         </KeepAlive>
       </Transition>
       <!-- <RecommendContent :key="recommendContentKey" /> -->
diff --git a/src/contentScripts/views/Home/components/Following.vue b/src/contentScripts/views/Home/components/Following.vue
index f1db2a10..db2f3961 100644
--- a/src/contentScripts/views/Home/components/Following.vue
+++ b/src/contentScripts/views/Home/components/Following.vue
@@ -2,6 +2,11 @@
 import type { Ref } from 'vue'
 import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
 
+const emit = defineEmits<{
+  (e: 'beforeLoading'): void
+  (e: 'afterLoading'): void
+}>()
+
 const videoList = reactive<MomentItem[]>([])
 const isLoading = ref<boolean>(false)
 const needToLoginFirst = ref<boolean>(false)
@@ -54,6 +59,7 @@ async function getFollowedUsersVideos() {
     return
   }
 
+  emit('beforeLoading')
   isLoading.value = true
   try {
     const response: MomentResult = await browser.runtime.sendMessage({
@@ -94,6 +100,7 @@ async function getFollowedUsersVideos() {
   }
   finally {
     isLoading.value = false
+    emit('afterLoading')
   }
 }
 
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index df60ef6c..7ca8158a 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -6,6 +6,11 @@ import { accessKey, settings } from '~/logic'
 import { LanguageType } from '~/enums/appEnums'
 import { TVAppKey } from '~/utils/authProvider'
 
+const emit = defineEmits<{
+  (e: 'beforeLoading'): void
+  (e: 'afterLoading'): void
+}>()
+
 const videoList = reactive<VideoItem[]>([])
 const appVideoList = reactive<AppVideoItem[]>([])
 const isLoading = ref<boolean>(true)
@@ -82,6 +87,7 @@ function initPageAction() {
 }
 
 async function getRecommendVideos() {
+  emit('beforeLoading')
   isLoading.value = true
   try {
     const response: forYouResult = await browser.runtime.sendMessage({
@@ -116,10 +122,12 @@ async function getRecommendVideos() {
   }
   finally {
     isLoading.value = false
+    emit('afterLoading')
   }
 }
 
 async function getAppRecommendVideos() {
+  emit('beforeLoading')
   isLoading.value = true
   try {
     const response: AppForYouResult = await browser.runtime.sendMessage({
@@ -155,6 +163,7 @@ async function getAppRecommendVideos() {
   }
   finally {
     isLoading.value = false
+    emit('afterLoading')
   }
 }
 
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index 60aba0b3..d316d940 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -6,6 +6,11 @@ import type { List as RankingPgcItem, RankingPgcResult } from '~/models/video/ra
 import { settings } from '~/logic'
 import emitter from '~/utils/mitt'
 
+const emit = defineEmits<{
+  (e: 'beforeLoading'): void
+  (e: 'afterLoading'): void
+}>()
+
 const { t } = useI18n()
 const { handleBackToTop, handlePageRefresh } = useBewlyApp()
 
@@ -94,6 +99,7 @@ onBeforeUnmount(() => {
 
 function getRankingVideos() {
   videoList.length = 0
+  emit('beforeLoading')
   isLoading.value = true
   browser.runtime.sendMessage({
     contentScriptQuery: 'getRankingVideos',
@@ -104,7 +110,10 @@ function getRankingVideos() {
       const { list } = response.data
       Object.assign(videoList, list)
     }
-  }).finally(() => isLoading.value = false)
+  }).finally(() => {
+    isLoading.value = false
+    emit('afterLoading')
+  })
 }
 
 function getRankingPgc() {
diff --git a/src/contentScripts/views/Home/components/SubscribedSeries.vue b/src/contentScripts/views/Home/components/SubscribedSeries.vue
index 0cc92fc6..26bac375 100644
--- a/src/contentScripts/views/Home/components/SubscribedSeries.vue
+++ b/src/contentScripts/views/Home/components/SubscribedSeries.vue
@@ -2,6 +2,11 @@
 import type { Ref } from 'vue'
 import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
 
+const emit = defineEmits<{
+  (e: 'beforeLoading'): void
+  (e: 'afterLoading'): void
+}>()
+
 const momentList = reactive<MomentItem[]>([])
 const isLoading = ref<boolean>(false)
 const needToLoginFirst = ref<boolean>(false)
@@ -59,6 +64,7 @@ async function getFollowedUsersVideos() {
     return
   }
 
+  emit('beforeLoading')
   isLoading.value = true
   try {
     const response: MomentResult = await browser.runtime.sendMessage({
@@ -99,6 +105,7 @@ async function getFollowedUsersVideos() {
   }
   finally {
     isLoading.value = false
+    emit('afterLoading')
   }
 }
 
diff --git a/src/contentScripts/views/Home/components/Trending.vue b/src/contentScripts/views/Home/components/Trending.vue
index 64deb2db..aa660dc4 100644
--- a/src/contentScripts/views/Home/components/Trending.vue
+++ b/src/contentScripts/views/Home/components/Trending.vue
@@ -2,6 +2,11 @@
 import type { Ref } from 'vue'
 import type { TrendingResult, List as VideoItem } from '~/models/video/trending'
 
+const emit = defineEmits<{
+  (e: 'beforeLoading'): void
+  (e: 'afterLoading'): void
+}>()
+
 const videoList = reactive<VideoItem[]>([])
 const isLoading = ref<boolean>(false)
 const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
@@ -32,6 +37,7 @@ function initPageAction() {
 }
 
 async function getTrendingVideos() {
+  emit('beforeLoading')
   isLoading.value = true
   try {
     const response: TrendingResult = await browser.runtime.sendMessage({
@@ -59,6 +65,7 @@ async function getTrendingVideos() {
   }
   finally {
     isLoading.value = false
+    emit('afterLoading')
   }
 }
 </script>