From 47644b530ebc16faf8e283ef0be53f4564aa5b96 Mon Sep 17 00:00:00 2001 From: Hakadao Date: Sun, 15 Dec 2024 22:35:36 +0800 Subject: [PATCH] feat: moments page --- src/_locales/cmn-CN.yml | 1 + src/_locales/cmn-TW.yml | 1 + src/_locales/en.yml | 1 + src/_locales/jyut.yml | 1 + src/components/Dock/Dock.vue | 22 ++++++- src/components/IframePage.vue | 6 +- .../DesktopAndDock/DesktopAndDock.vue | 9 ++- src/contentScripts/views/App.vue | 57 ++++++++----------- src/contentScripts/views/Moments/Moments.vue | 5 ++ src/enums/appEnums.ts | 1 + src/stores/mainStore.ts | 17 ++++++ 11 files changed, 81 insertions(+), 40 deletions(-) create mode 100644 src/contentScripts/views/Moments/Moments.vue diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml index 6a829aca..78196451 100644 --- a/src/_locales/cmn-CN.yml +++ b/src/_locales/cmn-CN.yml @@ -368,6 +368,7 @@ dock: history: 观看历史 favorites: 收藏 watch_later: 稍后再看 + moments: 动态 dark_mode: 暗色模式 light_mode: 亮色模式 settings: 设置 diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml index ed405c00..59d8ce2c 100644 --- a/src/_locales/cmn-TW.yml +++ b/src/_locales/cmn-TW.yml @@ -369,6 +369,7 @@ dock: history: 觀看記錄 watch_later: 稍後觀看 favorites: 收藏 + moments: 動向 dark_mode: 深色模式 light_mode: 淺色模式 settings: 設定 diff --git a/src/_locales/en.yml b/src/_locales/en.yml index 53f15058..6db99b84 100644 --- a/src/_locales/en.yml +++ b/src/_locales/en.yml @@ -371,6 +371,7 @@ dock: history: History favorites: Favorites watch_later: Watch later + moments: Moments dark_mode: Dark Mode light_mode: Light Mode settings: Settings diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml index 892084e0..efb8bbac 100644 --- a/src/_locales/jyut.yml +++ b/src/_locales/jyut.yml @@ -368,6 +368,7 @@ dock: history: 收睇記錄 watch_later: 陣間至睇 favorites: 我嘅至愛 + moments: 動向 dark_mode: 深色模式 light_mode: 淺色模式 settings: 設定 diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue index 78b6d5f6..a0906b53 100644 --- a/src/components/Dock/Dock.vue +++ b/src/components/Dock/Dock.vue @@ -79,22 +79,38 @@ function computeDockItem(): DockItem[] { })) } + if (Array.isArray(settings.value.dockItemsConfig) && settings.value.dockItemsConfig.length < mainStore.dockItems.length) { + // Add missing items to dockItemsConfig + const missingItems = mainStore.dockItems.filter(dock => !settings.value.dockItemsConfig.some(item => item.page === dock.page)) + settings.value.dockItemsConfig = [ + ...settings.value.dockItemsConfig, + ...missingItems.map(dock => ({ page: dock.page, visible: true, openInNewTab: false, useOriginalBiliPage: false })), + ] + } // if dockItemVisibilityList not fresh , set it to default - if (!settings.value.dockItemsConfig.length || settings.value.dockItemsConfig.length !== mainStore.dockItems.length) - settings.value.dockItemsConfig = mainStore.dockItems.map(dock => ({ page: dock.page, visible: true, openInNewTab: false, useOriginalBiliPage: false })) + else if (!Array.isArray(settings.value.dockItemsConfig) || settings.value.dockItemsConfig.length !== mainStore.dockItems.length) { + settings.value.dockItemsConfig = mainStore.dockItems.map(dock => + ({ page: dock.page, visible: true, openInNewTab: false, useOriginalBiliPage: false }), + ) + } const targetDockItems: DockItem[] = [] settings.value.dockItemsConfig.forEach((item) => { const foundItem = mainStore.dockItems.find(defaultItem => defaultItem.page === item.page) + // If the dock item does not have Bewly page, then use the original BiliBili page + if (!foundItem?.hasBewlyPage) + item.useOriginalBiliPage = true + item.visible && targetDockItems.push({ i18nKey: foundItem?.i18nKey || '', icon: foundItem?.icon || '', iconActivated: foundItem?.iconActivated || '', page: foundItem?.page || AppPage.Home, openInNewTab: item.openInNewTab, - useOriginalBiliPage: item.useOriginalBiliPage || false, + useOriginalBiliPage: item.useOriginalBiliPage || !foundItem?.hasBewlyPage, url: foundItem?.url || '', + hasBewlyPage: foundItem?.hasBewlyPage || false, }) }) return targetDockItems diff --git a/src/components/IframePage.vue b/src/components/IframePage.vue index 8b4d6385..aa3c6373 100644 --- a/src/components/IframePage.vue +++ b/src/components/IframePage.vue @@ -7,8 +7,10 @@ const headerShow = ref(false) const iframeRef = ref(null) const currentUrl = ref(props.url) -onMounted(async () => { - +onMounted(() => { + nextTick(() => { + iframeRef.value?.focus() + }) }) onBeforeUnmount(() => { diff --git a/src/components/Settings/DesktopAndDock/DesktopAndDock.vue b/src/components/Settings/DesktopAndDock/DesktopAndDock.vue index c02c236b..a7e593f5 100644 --- a/src/components/Settings/DesktopAndDock/DesktopAndDock.vue +++ b/src/components/Settings/DesktopAndDock/DesktopAndDock.vue @@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n' import draggable from 'vuedraggable' import { settings } from '~/logic' +import type { DockItem } from '~/stores/mainStore' import { useMainStore } from '~/stores/mainStore' import SettingsItem from '../components/SettingsItem.vue' @@ -69,12 +70,12 @@ const sidebarPositions = computed(() => { }) function resetDockContent() { - settings.value.dockItemsConfig = mainStore.dockItems.map((e: any) => { + settings.value.dockItemsConfig = mainStore.dockItems.map((e: DockItem) => { return { page: e.page, visible: true, openInNewTab: false, - useOriginalBiliPage: false, + useOriginalBiliPage: !e.hasBewlyPage, } }) } @@ -149,7 +150,9 @@ function handleToggleDockItem(dockItem: any) {
-
+
{{ $t('settings.dock_item_use_original_bili_web_page') }}
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue index 48b0aae0..4a9dce12 100644 --- a/src/contentScripts/views/App.vue +++ b/src/contentScripts/views/App.vue @@ -34,6 +34,7 @@ const pages = { [AppPage.History]: defineAsyncComponent(() => import('./History/History.vue')), [AppPage.WatchLater]: defineAsyncComponent(() => import('./WatchLater/WatchLater.vue')), [AppPage.Favorites]: defineAsyncComponent(() => import('./Favorites/Favorites.vue')), + [AppPage.Moments]: defineAsyncComponent(() => import('./Moments/Moments.vue')), } const mainAppRef = ref() as Ref const scrollbarRef = ref() @@ -48,42 +49,37 @@ const reachTop = ref(true) const iframeDrawerURL = ref('') const showIframeDrawer = ref(false) -const iframePageURL = ref('') const iframePageRef = ref() -const showBewlyPage = computed((): boolean => { - if (isInIframe()) { - return false - } - else if (iframePageURL.value) { - return false - } - else { - return isHomePage() && !isInIframe() && !settings.value.useOriginalBilibiliHomepage +const iframePageURL = computed((): string => { + // If the iframe is not the BiliBili homepage or in iframe, then don't show the iframe page + if (!isHomePage(window.self.location.href) || isInIframe()) + return '' + const currentDockItemConfig = settings.value.dockItemsConfig.find(e => e.page === activatedPage.value) + if (currentDockItemConfig) { + return currentDockItemConfig.useOriginalBiliPage || !mainStore.getDockItemByPage(activatedPage.value)?.hasBewlyPage ? mainStore.getBiliWebPageURLByPage(activatedPage.value) : '' } + return '' }) -const showIframePage = computed((): boolean => { - // If the iframe is not the BiliBili homepage, then don't show the iframe page - if (!isHomePage(window.self.location.href)) +const showBewlyPage = computed((): boolean => { + if (isInIframe()) return false - // use `!isInIframe()` to prevent nested calls to the BiliBili homepage - return !isInIframe() && !!iframePageURL.value && !!activatedPage.value + + const dockItem = mainStore.getDockItemByPage(activatedPage.value) + if (!dockItem?.hasBewlyPage) + return false + + if (iframePageURL.value) + return false + + return isHomePage() && !isInIframe() && !settings.value.useOriginalBilibiliHomepage }) const isFirstTimeActivatedPageChange = ref(true) watch( () => activatedPage.value, - (newVal) => { - // Set the iframePageURL when the activatedPage changes and the `dockItem.useOriginalBiliPage` is true - const dockItem = settings.value.dockItemsConfig.find(e => e.page === newVal) - if (dockItem && dockItem.useOriginalBiliPage) { - const dockItem = settings.value.dockItemsConfig.find(e => e.page === activatedPage.value) - if (dockItem && dockItem.useOriginalBiliPage) - // iframePageURL.value = dockItem.page === AppPage.Home ? '' : mainStore.getBiliWebPageURLByPage(dockItem.page) - iframePageURL.value = mainStore.getBiliWebPageURLByPage(dockItem.page) - } - + () => { if (!isFirstTimeActivatedPageChange.value) { // Update the URL query parameter when activatedPage changes const url = new URL(window.location.href) @@ -131,7 +127,6 @@ function handleDockItemClick(dockItem: DockItem) { // iframePageURL.value = dockItem.url } else { - iframePageURL.value = '' nextTick(() => { changeActivatePage(dockItem.page) }) @@ -284,7 +279,7 @@ provide('BEWLY_APP', { pointer-events-none > ('BEWLY_APP', {
- diff --git a/src/enums/appEnums.ts b/src/enums/appEnums.ts index 6baa4038..cb0e2565 100644 --- a/src/enums/appEnums.ts +++ b/src/enums/appEnums.ts @@ -12,6 +12,7 @@ export enum AppPage { History = 'History', Favorites = 'Favorites', WatchLater = 'WatchLater', + Moments = 'Moments', } export enum TopBarPopup { diff --git a/src/stores/mainStore.ts b/src/stores/mainStore.ts index 34d6b396..ce3daef5 100644 --- a/src/stores/mainStore.ts +++ b/src/stores/mainStore.ts @@ -12,6 +12,7 @@ export interface DockItem { openInNewTab: boolean useOriginalBiliPage: boolean url: string + hasBewlyPage: boolean // Whether BewlyBewly has a page for this item } export interface HomeTab { @@ -30,6 +31,7 @@ export const useMainStore = defineStore('main', () => { openInNewTab: false, useOriginalBiliPage: false, url: 'https://www.bilibili.com', + hasBewlyPage: true, }, { i18nKey: 'dock.search', @@ -39,6 +41,7 @@ export const useMainStore = defineStore('main', () => { openInNewTab: false, useOriginalBiliPage: false, url: 'https://search.bilibili.com/all', + hasBewlyPage: true, }, { i18nKey: 'dock.anime', @@ -48,6 +51,7 @@ export const useMainStore = defineStore('main', () => { openInNewTab: false, useOriginalBiliPage: false, url: 'https://www.bilibili.com/anime', + hasBewlyPage: true, }, { i18nKey: 'dock.favorites', @@ -57,6 +61,7 @@ export const useMainStore = defineStore('main', () => { openInNewTab: false, useOriginalBiliPage: false, url: `https://space.bilibili.com/${getUserID()}/favlist`, + hasBewlyPage: true, }, { i18nKey: 'dock.history', @@ -66,6 +71,7 @@ export const useMainStore = defineStore('main', () => { openInNewTab: false, useOriginalBiliPage: false, url: `https://www.bilibili.com/account/history`, + hasBewlyPage: true, }, { i18nKey: 'dock.watch_later', @@ -75,6 +81,17 @@ export const useMainStore = defineStore('main', () => { openInNewTab: false, useOriginalBiliPage: false, url: `https://www.bilibili.com/watchlater/#/list`, + hasBewlyPage: true, + }, + { + i18nKey: 'dock.moments', + icon: 'i-tabler:windmill', + iconActivated: 'i-tabler:windmill-filled', + page: AppPage.Moments, + openInNewTab: false, + useOriginalBiliPage: true, + url: `https://t.bilibili.com`, + hasBewlyPage: false, }, ] })