From 95ae47b0afa96ba72fa29a98100ccd4decef3c06 Mon Sep 17 00:00:00 2001 From: Hakadao Date: Sun, 21 Jul 2024 19:08:23 +0800 Subject: [PATCH] refactor(top-bar): move all relative logic to `TopBar.vue` && remove `alwaysShowTheTopBarLogoOnSearchPageMode` setting --- src/_locales/cmn-CN.yml | 1 - src/_locales/cmn-TW.yml | 1 - src/_locales/en.yml | 1 - src/_locales/jyut.yml | 1 - src/components/Settings/components/Home.vue | 4 - src/components/TopBar/TopBar.vue | 745 +++++++++++--------- src/contentScripts/views/App.vue | 87 +-- src/logic/storage.ts | 2 - 8 files changed, 403 insertions(+), 439 deletions(-) diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml index 910ed7a2..4c0259ce 100644 --- a/src/_locales/cmn-CN.yml +++ b/src/_locales/cmn-CN.yml @@ -151,7 +151,6 @@ settings: home_tabs_adjustment: 标签栏调整 home_tabs_adjustment_desc: 第一个激活的标签项是默认界面 always_show_tabs_on_home_page: 总是显示首页标签栏 - always_show_the_top_bar_logo: 总是显示顶栏 Logo # Compatibility # Common diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml index e77bc6c5..dbe8f961 100644 --- a/src/_locales/cmn-TW.yml +++ b/src/_locales/cmn-TW.yml @@ -154,7 +154,6 @@ settings: home_tabs_adjustment: 標籤欄調整 home_tabs_adjustment_desc: 第一個啟用的標籤項目調整頁面將是起始頁面 always_show_tabs_on_home_page: 總是顯示首頁標籤欄 - always_show_the_top_bar_logo: 永遠顯示頂欄 Logo # Compatibility # Common diff --git a/src/_locales/en.yml b/src/_locales/en.yml index ab1c2b66..3f7c0da4 100644 --- a/src/_locales/en.yml +++ b/src/_locales/en.yml @@ -152,7 +152,6 @@ settings: home_tabs_adjustment: Tabs adjustment home_tabs_adjustment_desc: The first activated tab is the default page always_show_tabs_on_home_page: Always show tabs on the home page - always_show_the_top_bar_logo: Always show the top bar logo # Compatibility # Common diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml index d8e3481d..32732ecc 100644 --- a/src/_locales/jyut.yml +++ b/src/_locales/jyut.yml @@ -154,7 +154,6 @@ settings: home_tabs_adjustment: 分頁欄調整 home_tabs_adjustment_desc: 第一個啓用嘅分頁項目會係開始頁面 always_show_tabs_on_home_page: 永遠顯示主頁分頁欄 - always_show_the_top_bar_logo: 永遠顯示頂欄 Logo # Compatibility # Common diff --git a/src/components/Settings/components/Home.vue b/src/components/Settings/components/Home.vue index f5a552fe..18024c3e 100644 --- a/src/components/Settings/components/Home.vue +++ b/src/components/Settings/components/Home.vue @@ -325,10 +325,6 @@ function handleToggleHomeTab(tab: any) { - - - - diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index cee854cb..5a50c1ec 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -5,6 +5,7 @@ import type { Ref, UnwrapNestedRefs } from 'vue' import { useApiClient } from '~/composables/api' import { useBewlyApp } from '~/composables/useAppProvider' import { useDelayedHover } from '~/composables/useDelayedHover' +import { AppPage } from '~/enums/appEnums' import { settings } from '~/logic' import { getUserID, isHomePage } from '~/utils/main' import emitter from '~/utils/mitt' @@ -24,26 +25,15 @@ import type { UnReadDm, UnReadMessage, UserInfo } from './types' // import { useTopBarStore } from '~/stores/topBarStore' -const props = withDefaults(defineProps(), { - showSearchBar: true, - showLogo: true, -}) - // const popups = { NotificationsPop, MomentsPop, FavoritesPop, HistoryPop } // const topBarStore = useTopBarStore() -interface Props { - showSearchBar?: boolean - showLogo?: boolean - mask?: boolean -} - // const topBarItems = computed(() => { // return topBarStore.topBarItems // }) -const { activatedPage, scrollbarRef } = useBewlyApp() +const { activatedPage, scrollbarRef, reachTop } = useBewlyApp() const mid = getUserID() || '' const userInfo = reactive>({}) as UnwrapNestedRefs @@ -52,16 +42,63 @@ const hideTopBar = ref(false) const headerTarget = ref(null) const { isOutside: isOutsideTopBar } = useMouseInElement(headerTarget) -// const showChannelsPop = ref(false) -// const showUserPanelPop = ref(false) -// const showNotificationsPop = ref(false) -// const showMomentsPop = ref(false) -// const showFavoritesPop = ref(false) -// const showHistoryPop = ref(false) -// const showWatchLaterPop = ref(false) -// const showUploadPop = ref(false) -// const showMorePop = ref(false) +const api = useApiClient() +// initially, assume the user is logged in cuz data retrieval is slow, which may show the login +// button even after login. if the user is not logged in, the login button will show up later +const isLogin = ref(true) + +const logo = ref() as Ref +const avatarImg = ref() as Ref +const avatarShadow = ref() as Ref +const favoritesPopRef = ref() +const momentsPopRef = ref() + +const scrollTop = ref(0) +const oldScrollTop = ref(0) + +const isSearchPage = computed(() => { + if (/https?:\/\/search.bilibili.com\/.*$/.test(location.href)) + return true + return false +}) + +const showSearchBar = computed(() => { + if (isHomePage()) { + if (settings.value.useOriginalBilibiliHomepage) + return true + if (activatedPage.value === AppPage.Search) + return false + if (settings.value.useSearchPageModeOnHomePage && activatedPage.value === AppPage.Home && reachTop.value) + return false + } + else { + if (isSearchPage.value) + return false + } + return true +}) + +const isTopBarFixed = computed(() => { + if ( + (isHomePage() && settings.value.useOriginalBilibiliHomepage) + // video page + || /https?:\/\/(?:www.)?bilibili.com\/(?:video|list)\/.*/.test(location.href) + // anime playback & movie page + || /https?:\/\/(?:www.)?bilibili.com\/bangumi\/play\/.*/.test(location.href) + // moment page + || /https?:\/\/t.bilibili.com.*/.test(location.href) + // channel, anime, chinese anime, tv shows, movie, variety shows, mooc + || /https?:\/\/(?:www.)?bilibili.com\/(?:v|anime|guochuang|tv|movie|variety|mooc).*/.test(location.href) + // articles page + || /https?:\/\/(?:www.)?bilibili.com\/read\/home.*/.test(location.href) + ) { + return true + } + return false +}) + +// #region Popups visibility control const popupVisible = reactive({ channels: false, userPanel: false, @@ -73,25 +110,6 @@ const popupVisible = reactive({ upload: false, more: false, }) -const api = useApiClient() -// initially, assume the user is logged in cuz data retrieval is slow, which may show the login -// button even after login. if the user is not logged in, the login button will show up later -const isLogin = ref(true) -const unReadMessage = reactive>( - {}, -) as UnwrapNestedRefs -const unReadDm = reactive({} as UnwrapNestedRefs) -const unReadMessageCount = ref(0) -const newMomentsCount = ref(0) - -const logo = ref() as Ref -const avatarImg = ref() as Ref -const avatarShadow = ref() as Ref -const favoritesPopRef = ref() -const momentsPopRef = ref() - -const scrollTop = ref(0) -const oldScrollTop = ref(0) function closeAllTopBarPopup(exceptionKey?: keyof typeof popupVisible) { Object.keys(popupVisible).forEach((key) => { @@ -145,6 +163,7 @@ const notifications = useDelayedHover({ popupVisible.notifications = false }, }) + // Moments const moments = useDelayedHover({ beforeEnter: () => closeAllTopBarPopup('moments'), @@ -156,6 +175,7 @@ const moments = useDelayedHover({ popupVisible.moments = false }, }) + // Favorites const favorites = useDelayedHover({ beforeEnter: () => closeAllTopBarPopup('favorites'), @@ -166,6 +186,7 @@ const favorites = useDelayedHover({ popupVisible.favorites = false }, }) + // History const history = useDelayedHover({ beforeEnter: () => closeAllTopBarPopup('history'), @@ -176,6 +197,7 @@ const history = useDelayedHover({ popupVisible.history = false }, }) + // Watch Later const watchLater = useDelayedHover({ beforeEnter: () => closeAllTopBarPopup('watchLater'), @@ -186,6 +208,7 @@ const watchLater = useDelayedHover({ popupVisible.watchLater = false }, }) + // Upload const upload = useDelayedHover({ beforeEnter: () => closeAllTopBarPopup('upload'), @@ -196,6 +219,7 @@ const upload = useDelayedHover({ popupVisible.upload = false }, }) + // More const more = useDelayedHover({ beforeEnter: () => closeAllTopBarPopup(), @@ -205,6 +229,8 @@ const more = useDelayedHover({ leave: () => popupVisible.more = false, }) +// #endregion + watch(() => settings.value.autoHideTopBar, (newVal) => { if (!newVal) toggleTopBarVisible(true) @@ -317,6 +343,13 @@ async function getUserInfo() { } } +// #region Notifications +const unReadMessage = reactive>( + {}, +) as UnwrapNestedRefs +const unReadDm = reactive({} as UnwrapNestedRefs) +const unReadMessageCount = ref(0) + async function getUnreadMessageCount() { if (!isLogin.value) return @@ -350,6 +383,10 @@ async function getUnreadMessageCount() { unReadMessageCount.value = result } } +// #endregion + +// #region Moments +const newMomentsCount = ref(0) async function getTopBarNewMomentsCount() { if (!isLogin.value) @@ -368,6 +405,7 @@ async function getTopBarNewMomentsCount() { newMomentsCount.value = result } } +// #endregion function toggleTopBarVisible(visible: boolean) { hideTopBar.value = !visible @@ -381,52 +419,53 @@ defineExpose({ + - - - + + +