From 7d6e2f64c0842d2055064ac656354c92db65864f Mon Sep 17 00:00:00 2001 From: Hakadao Date: Tue, 16 Apr 2024 17:41:31 +0800 Subject: [PATCH] fix(MomentsPop): cannot record the scroll position (#451) --- src/components/TopBar/TopBar.vue | 14 +-- .../TopBar/components/MomentsPop.vue | 100 ++++++++++-------- 2 files changed, 66 insertions(+), 48 deletions(-) diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index dab3e72ebe..406d8e4631 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -66,6 +66,7 @@ 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) @@ -82,7 +83,10 @@ const notifications = useDelayedHover({ }) // Moments const moments = useDelayedHover({ - enter: () => showMomentsPop.value = true, + enter: () => { + showMomentsPop.value = true + momentsPopRef.value && momentsPopRef.value.initData() + }, leave: () => showMomentsPop.value = false, }) // Favorites @@ -497,7 +501,7 @@ defineExpose({ v-if="settings.topBarIconBadges === 'number'" class="unread-message" > - {{ unReadMessageCount > 999 ? '999+' : unReadMessageCount }} + {{ unReadMessageCount > 99 ? '99+' : unReadMessageCount }}
- {{ newMomentsCount > 999 ? '999+' : newMomentsCount }} + {{ newMomentsCount > 99 ? '99+' : newMomentsCount }}
- - - +
diff --git a/src/components/TopBar/components/MomentsPop.vue b/src/components/TopBar/components/MomentsPop.vue index 9a96a3c33f..ad537a635d 100644 --- a/src/components/TopBar/components/MomentsPop.vue +++ b/src/components/TopBar/components/MomentsPop.vue @@ -37,28 +37,17 @@ const noMoreContent = ref(false) const livePage = ref(1) const momentsWrap = ref() as Ref -watch(selectedTab, (newVal: number, oldVal: number) => { +watch(selectedTab, (newVal, oldVal) => { if (newVal === oldVal) return if (momentsWrap.value) smoothScrollToTop(momentsWrap.value, 300) - if (newVal === 0) { - getTopBarNewMoments([MomentType.Video, MomentType.Bangumi]) - } - else if (newVal === 1) { - livePage.value = 1 - getTopbarLiveMoments(livePage.value) - } - else if (newVal === 2) { - getTopBarNewMoments([MomentType.Article]) - } -}) + initData() +}, { immediate: true }) onMounted(() => { - getTopBarNewMoments([MomentType.Video, MomentType.Bangumi]) - if (momentsWrap.value) { momentsWrap.value.addEventListener('scroll', () => { if ( @@ -90,40 +79,63 @@ function onClickTab(tabId: number) { }) } -function getTopBarNewMoments(type_list: number[]) { - moments.length = 0 +async function initData() { + if (selectedTab.value === 0) { + await getTopBarNewMoments([MomentType.Video, MomentType.Bangumi]) + } + else if (selectedTab.value === 1) { + livePage.value = 1 + getTopbarLiveMoments(livePage.value) + } + else if (selectedTab.value === 2) { + await getTopBarNewMoments([MomentType.Article]) + } +} + +async function getTopBarNewMoments(type_list: number[]) { isLoading.value = true - browser.runtime - .sendMessage({ - contentScriptQuery: API.MOMENT.GET_TOP_BAR_NEW_MOMENTS, - uid: getUserID(), - type_list, - }) - .then((res) => { - if (res.code === 0) { - if (Array.isArray(res.data.cards) && res.data.cards.length > 0) { - res.data.cards.forEach((item: any) => { - pushItemIntoMoments(item) - }) - } + try { + const res = await browser.runtime + .sendMessage({ + contentScriptQuery: API.MOMENT.GET_TOP_BAR_NEW_MOMENTS, + uid: getUserID(), + type_list, + }) - if (moments.length !== 0 && res.data.cards.length < 20) { - isLoading.value = false - noMoreContent.value = true + if (res.code === 0) { + // If there are no new moments, do not change the data to record the scroll position + if (moments.length !== 0) { + if (res.data.new_num === 0) return - } + } - // set this lastest offset id, which will clear the new moment's marker point - // after you watch these moments. - if (selectedTab.value === 0) - setLastestOffsetID(MomentType.Video, moments[0].id) - else if (selectedTab.value === 2) - setLastestOffsetID(MomentType.Article, moments[0].id) + moments.length = 0 - noMoreContent.value = false + if (Array.isArray(res.data.cards) && res.data.cards.length > 0) { + res.data.cards.forEach((item: any) => { + pushItemIntoMoments(item) + }) } - isLoading.value = false - }) + + if (moments.length !== 0 && res.data.cards.length < 20) { + isLoading.value = false + noMoreContent.value = true + return + } + + // set this lastest offset id, which will clear the new moment's marker point + // after you watch these moments. + if (selectedTab.value === 0) + setLastestOffsetID(MomentType.Video, moments[0].id) + else if (selectedTab.value === 2) + setLastestOffsetID(MomentType.Article, moments[0].id) + + noMoreContent.value = false + } + } + finally { + isLoading.value = false + } } function getTopbarHistoryMoments(type_list: number[]) { @@ -272,6 +284,10 @@ function toggleWatchLater(aid: number) { }) } } + +defineExpose({ + initData, +})