feat: 添加个性推荐状态保留功能，支持在页面切换时保存和恢复浏览状态 #194

Author: keleus

src/_locales/cmn-CN.yml

@@ -288,7 +288,9 @@ settings:
     username_or_mid: 用户名 / MID
   filter_like_view_ratio: 按点赞播放比例筛选（仅在Web推荐模式下有效）
   filter_like_view_ratio_desc: 筛选视频的点赞数与播放数比例（默认为5%，最高为10%）
-  following_tab_show_livestreaming_videos: 在 “正在关注” 中显示直播视频
+  following_tab_show_livestreaming_videos: 在 "正在关注" 中显示直播视频
+  preserve_for_you_state: 留存个性推荐切换前状态
+  preserve_for_you_state_desc: 当从dock栏切换到其他页面时，留存个性推荐页面的浏览状态，返回时保持切换前的内容
   use_search_page_mode: 首页使用搜索页模式
   settings_shared_with_the_search_page: 与搜索页共用的配置
   settings_shared_with_the_search_page_desc: 这些设置都与搜索页共用。

src/_locales/cmn-TW.yml

@@ -272,6 +272,8 @@ settings:
   filter_by_user_table:
     username_or_mid: 使用者名稱 / MID
   following_tab_show_livestreaming_videos: 在「正在跟隨」中顯示實況直播
+  preserve_for_you_state: 留存為你推薦切換前狀態
+  preserve_for_you_state_desc: 當從dock欄切換到其他頁面時，留存為你推薦頁面的瀏覽狀態，返回時保持切換前的內容
   use_search_page_mode: 首頁使用搜尋頁模式
   settings_shared_with_the_search_page: 與搜尋頁共用的設定
   settings_shared_with_the_search_page_desc: 這些設定都與搜尋頁共用。

src/_locales/en.yml

@@ -310,6 +310,8 @@ settings:
   filter_by_user_table:
     username_or_mid: Username / MID
   following_tab_show_livestreaming_videos: Show Live-streaming videos in the "Following" tab
+  preserve_for_you_state: Preserve "For You" pre-switch state
+  preserve_for_you_state_desc: When switching from dock to other pages, preserve the browsing state of the "For You" page and maintain content before switching when returning
   use_search_page_mode: Use search page mode on homepage
   settings_shared_with_the_search_page: Settings shared with the search page
   settings_shared_with_the_search_page_desc: Those settings are used in common with the search page.

src/_locales/jyut.yml

@@ -255,6 +255,8 @@ settings:
   filter_by_user_table:
     username_or_mid: 用戶名 / MID
   following_tab_show_livestreaming_videos: 喺「跟緊啲人」入邊顯示實況直播
+  preserve_for_you_state: 留存估你心水切換前狀態
+  preserve_for_you_state_desc: 喺dock欄切換到其它頁面嗰陣，留存估你心水頁面嘅瀏覽狀態，返嚟嗰陣保持切換前嘅內容
   use_search_page_mode: 主頁使用搵嘢頁模式
   settings_shared_with_the_search_page: 同搵嘢頁共用嘅設定
   settings_shared_with_the_search_page_desc: 呢啲設定同搵嘢頁嗰度共用。

src/components/Dock/Dock.vue

@@ -3,7 +3,7 @@ import { Icon } from '@iconify/vue'
 import { useElementSize, useWindowSize } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
-import { useBewlyApp } from '~/composables/useAppProvider'
+import { UndoForwardState, useBewlyApp } from '~/composables/useAppProvider'
 import { useDark } from '~/composables/useDark'
 import { useDelayedHover } from '~/composables/useDelayedHover'
 import { HomeSubPage } from '~/contentScripts/views/Home/types'
@@ -32,9 +32,12 @@ const emit = defineEmits<{
 
 const mainStore = useMainStore()
 const { isDark, toggleDark } = useDark()
-const { reachTop, showUndoButton, homeActivatedPage } = useBewlyApp()
-// 添加前进按钮状态
-const showForwardButton = ref<boolean>(false)
+const { reachTop, homeActivatedPage, undoForwardState } = useBewlyApp()
+
+// 计算属性：是否显示撤销按钮
+const showUndo = computed(() => undoForwardState.value === UndoForwardState.ShowUndo)
+// 计算属性：是否显示前进按钮
+const showForward = computed(() => undoForwardState.value === UndoForwardState.ShowForward)
 
 const hideDock = ref<boolean>(false)
 const dockContentHover = ref<boolean>(false)
@@ -188,23 +191,21 @@ function handleBackToTopOrRefresh(action: 'backToTop' | 'refresh' | 'auto' = 'au
 // 处理撤销刷新
 function handleUndoRefresh() {
   emit('undoRefresh')
-  showForwardButton.value = true
-  showUndoButton.value = false
+  undoForwardState.value = UndoForwardState.ShowForward
 }
 
 // 添加处理前进的方法
 function handleForwardRefresh() {
   emit('forwardRefresh')
-  showUndoButton.value = true
-  showForwardButton.value = false
+  undoForwardState.value = UndoForwardState.ShowUndo
 }
 
 // 添加统一的前进后退处理方法
 function handleHistoryNavigation() {
-  if (showUndoButton.value) {
+  if (showUndo.value) {
     handleUndoRefresh()
   }
-  else if (showForwardButton.value) {
+  else if (showForward.value) {
     handleForwardRefresh()
   }
 }
@@ -558,20 +559,20 @@ onUnmounted(() => {
         <!-- 将原来的两个按钮替换为一个 -->
         <Transition name="fade">
           <button
-            v-if="shouldShowUndoForwardButtons && (showUndoButton || showForwardButton) && settings.enableUndoRefreshButton"
+            v-if="shouldShowUndoForwardButtons && (showUndo || showForward) && settings.enableUndoRefreshButton"
             class="back-to-top-or-refresh-btn"
             :class="{
               inactive: hoveringDockItem.themeMode && isDark,
             }"
             @click="handleHistoryNavigation"
           >
             <Icon
-              v-if="showUndoButton"
+              v-if="showUndo"
               icon="mdi:undo-variant"
               shrink-0 absolute text-2xl
             />
             <Icon
-              v-else-if="showForwardButton"
+              v-else-if="showForward"
               icon="mdi:redo-variant"
               shrink-0 absolute text-2xl
             />

src/components/Settings/DesktopAndDock/Navigation/Navigation.vue

@@ -168,6 +168,9 @@ function handleToggleDockItem(dockItem: any) {
       <SettingsItem :title="$t('settings.enable_undo_refresh_button')" :desc="$t('settings.enable_undo_refresh_button_desc')">
         <Radio v-model="settings.enableUndoRefreshButton" />
       </SettingsItem>
+      <SettingsItem :title="$t('settings.preserve_for_you_state')" :desc="$t('settings.preserve_for_you_state_desc')">
+        <Radio v-model="settings.preserveForYouState" />
+      </SettingsItem>
     </SettingsItemGroup>
 
     <SettingsItemGroup :title="$t('settings.group_sidebar')" :desc="$t('settings.group_sidebar_desc')">

src/composables/useAppProvider.ts

@@ -4,6 +4,13 @@ import { inject } from 'vue'
 import type { HomeSubPage } from '~/contentScripts/views/Home/types'
 import type { AppPage } from '~/enums/appEnums'
 
+// 定义撤销/前进按钮的状态枚举
+export enum UndoForwardState {
+  Hidden = 'hidden', // 隐藏状态
+  ShowUndo = 'showUndo', // 显示撤销按钮
+  ShowForward = 'showForward', // 显示前进按钮
+}
+
 export interface BewlyAppProvider {
   activatedPage: Ref<AppPage>
   // 添加Home页面的子页面状态
@@ -16,8 +23,8 @@ export interface BewlyAppProvider {
   // 添加撤销刷新的处理函数
   handleUndoRefresh: Ref<(() => void) | undefined>
   handleForwardRefresh: Ref<(() => void) | undefined>
-  // 添加控制撤销按钮显示的状态
-  showUndoButton: Ref<boolean>
+  // 使用枚举状态统一管理撤销/前进按钮
+  undoForwardState: Ref<UndoForwardState>
   handleBackToTop: (targetScrollTop?: number) => void
   haveScrollbar: () => Promise<boolean>
   openIframeDrawer: (url: string) => void

src/contentScripts/views/App.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { onKeyStroke, useEventListener, useThrottleFn, useToggle } from '@vueuse/core'
 import type { Ref } from 'vue'
-import { ref } from 'vue'
+import { provide, ref } from 'vue'
 
 import type { BewlyAppProvider } from '~/composables/useAppProvider'
+import { UndoForwardState } from '~/composables/useAppProvider'
 import { useDark } from '~/composables/useDark'
 import { BEWLY_MOUNTED, DRAWER_VIDEO_ENTER_PAGE_FULL, DRAWER_VIDEO_EXIT_PAGE_FULL, IFRAME_PAGE_SWITCH_BEWLY, IFRAME_PAGE_SWITCH_BILI, OVERLAY_SCROLL_BAR_SCROLL } from '~/constants/globalEvents'
 import { HomeSubPage } from '~/contentScripts/views/Home/types'
@@ -66,7 +67,8 @@ const handlePageRefresh = ref<() => void>()
 const handleReachBottom = ref<() => void>()
 const handleUndoRefresh = ref<() => void>()
 const handleForwardRefresh = ref<() => void>()
-const showUndoButton = ref<boolean>(false)
+// 使用新的枚举状态管理撤销/前进按钮
+const undoForwardState = ref<UndoForwardState>(UndoForwardState.Hidden)
 const handleThrottledPageRefresh = useThrottleFn(() => {
   const osInstance = scrollbarRef.value?.osInstance()
   if (!osInstance) {
@@ -487,7 +489,7 @@ provide<BewlyAppProvider>('BEWLY_APP', {
   handleReachBottom,
   handleUndoRefresh,
   handleForwardRefresh,
-  showUndoButton,
+  undoForwardState,
   openIframeDrawer,
   haveScrollbar,
 })

src/contentScripts/views/Home/Home.vue

@@ -269,16 +269,14 @@ function toggleTabContentLoading(loading: boolean) {
       </header>
 
       <Transition name="page-fade">
-        <KeepAlive include="ForYou">
-          <Component
-            :is="pages[activatedPage]" :key="activatedPage"
-            ref="tabPageRef"
-            :grid-layout="gridLayout.home"
-            :top-bar-visibility="topBarVisibility"
-            @before-loading="toggleTabContentLoading(true)"
-            @after-loading="toggleTabContentLoading(false)"
-          />
-        </KeepAlive>
+        <Component
+          :is="pages[activatedPage]" :key="activatedPage"
+          ref="tabPageRef"
+          :grid-layout="gridLayout.home"
+          :top-bar-visibility="topBarVisibility"
+          @before-loading="toggleTabContentLoading(true)"
+          @after-loading="toggleTabContentLoading(false)"
+        />
       </Transition>
     </main>
   </div>