From 06d58d95ab9b0c86c8cb7fe2c1a991725f7e09c6 Mon Sep 17 00:00:00 2001 From: Hakadao Date: Mon, 9 Dec 2024 02:34:15 +0800 Subject: [PATCH] feat(dock): support opening in a new tab && using the Bilibili page --- src/_locales/cmn-CN.yml | 2 + src/_locales/cmn-TW.yml | 2 + src/_locales/en.yml | 2 + src/_locales/jyut.yml | 2 + src/components/Dock/Dock.vue | 75 ++++++++++------ src/components/IframePage.vue | 72 ++++++++++++++++ .../DesktopAndDock/DesktopAndDock.vue | 34 ++++++-- src/contentScripts/index.ts | 9 +- src/contentScripts/views/App.vue | 86 +++++++++++++++---- src/logic/storage.ts | 4 + src/stores/mainStore.ts | 75 ++++++++++++++-- 11 files changed, 305 insertions(+), 58 deletions(-) create mode 100644 src/components/IframePage.vue diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml index cab8bd92..6a829aca 100644 --- a/src/_locales/cmn-CN.yml +++ b/src/_locales/cmn-CN.yml @@ -154,6 +154,8 @@ settings: auto_hide_dock: 自动隐藏 Dock 栏 dock_content_adjustment: Dock 内容调整 dock_content_adjustment_desc: 第一个激活的 Dock 项的页面将会是启动页面。 + dock_item_open_in_new_tab: 在新标签页打开 + dock_item_use_original_bili_web_page: 使用原版 Bilibili 网页 disable_dock_glowing_effect: 关闭 Dock 栏发光效果 disable_light_dark_mode_switcher: 禁用亮/暗色模式切换按钮 move_back_to_top_and_refresh_to_dock: 将返回顶部和刷新按钮移动到 Dock 栏 diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml index d49c903c..ed405c00 100644 --- a/src/_locales/cmn-TW.yml +++ b/src/_locales/cmn-TW.yml @@ -154,6 +154,8 @@ settings: auto_hide_dock: 自動隱藏 Dock dock_content_adjustment: Dock 內容調整 dock_content_adjustment_desc: 第一個啟用的 Dock 項目的頁面將是起始頁面。 + dock_item_open_in_new_tab: 在新索引標籤開啟 + dock_item_use_original_bili_web_page: 使用原版 Bilibili 網頁 disable_dock_glowing_effect: 關閉 Dock 發光效果 disable_light_dark_mode_switcher: 關閉淺/深色模式切換按鈕 move_back_to_top_and_refresh_to_dock: 將返回頂部和重新整理按鈕移動到 Dock diff --git a/src/_locales/en.yml b/src/_locales/en.yml index fac26c76..53f15058 100644 --- a/src/_locales/en.yml +++ b/src/_locales/en.yml @@ -154,6 +154,8 @@ settings: auto_hide_dock: Automatically hide the dock dock_content_adjustment: Dock content adjustment dock_content_adjustment_desc: The page of the first activated dock item will be the startup page. + dock_item_open_in_new_tab: Open in new tab + dock_item_use_original_bili_web_page: Use the original Bilibili web page disable_dock_glowing_effect: Disable the dock glowing effect disable_light_dark_mode_switcher: Disable light/dark mode switcher move_back_to_top_and_refresh_to_dock: Move the back-to-top and refresh buttons to the dock diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml index e2257b90..892084e0 100644 --- a/src/_locales/jyut.yml +++ b/src/_locales/jyut.yml @@ -153,6 +153,8 @@ settings: auto_hide_dock: 自動收埋 Dock dock_content_adjustment: Dock 內容調整 dock_content_adjustment_desc: 第一個啓用嘅 Dock 項個頁面會係開始頁面。 + dock_item_open_in_new_tab: 在新分頁度開啓 + dock_item_use_original_bili_web_page: 用返原本嘅 Bilibili 網頁 disable_dock_glowing_effect: 熄咗 Dock 發光效果去 disable_light_dark_mode_switcher: 閂咗淺 / 深色主題切換粒掣去 move_back_to_top_and_refresh_to_dock: 將返去頂部同重新整理粒掣擺到落 Dock 度 diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue index 8a5a90a4..780538e2 100644 --- a/src/components/Dock/Dock.vue +++ b/src/components/Dock/Dock.vue @@ -11,21 +11,30 @@ import { useMainStore } from '~/stores/mainStore' import Tooltip from '../Tooltip.vue' import type { HoveringDockItem } from './types' -defineProps<{ +const props = defineProps<{ activatedPage: AppPage }>() -// const emit = defineEmits(['changePage', 'settingsVisibilityChange', 'refresh', 'backToTop']) +// const emit = defineEmits(['pageChange', 'settingsVisibilityChange', 'refresh', 'backToTop']) const emit = defineEmits<{ - (e: 'changePage', page: AppPage): void + (e: 'dockItemClick', dockItem: DockItem): void (e: 'settingsVisibilityChange'): void (e: 'refresh'): void (e: 'backToTop'): void }>() + const mainStore = useMainStore() const { isDark, toggleDark } = useDark() const { reachTop } = useBewlyApp() +const hideDock = ref(false) +const hoveringDockItem = reactive({ + themeMode: false, + settings: false, +}) +const currentDockItems = ref([]) +const activatedDockItem = ref() + const tooltipPlacement = computed(() => { if (settings.value.dockPosition === 'left') return 'right' @@ -36,48 +45,61 @@ const tooltipPlacement = computed(() => { return 'right' }) -const hideDock = ref(false) -const hoveringDockItem = reactive({ - themeMode: false, - settings: false, +/** + * Whether to show the back to top or refresh button + */ +const showBackToTopOrRefreshButton = computed((): boolean => { + const dockItemConfig = settings.value.dockItemsConfig.find(e => e.page === props.activatedPage) + if (dockItemConfig && dockItemConfig.useOriginalBiliPage) { + return false + } + + return settings.value.moveBackToTopOrRefreshButtonToDock + && props.activatedPage !== AppPage.Search }) -const currentDockItems = ref([]) watch(() => settings.value.autoHideDock, (newValue) => { hideDock.value = newValue -}) +}, { immediate: true }) // use Json stringify to watch the changes of the array item properties -watch(() => JSON.stringify(settings.value.dockItemVisibilityList), () => { +watch(() => JSON.stringify(settings.value.dockItemsConfig), () => { currentDockItems.value = computeDockItem() -}) +}, { immediate: true }) function computeDockItem(): DockItem[] { + // Transfer the data from dockItemVisibilityList into dockItemsConfig + if (settings.value.dockItemVisibilityList.length > 0 && settings.value.dockItemsConfig.length === 0) { + settings.value.dockItemsConfig = settings.value.dockItemVisibilityList.map(item => + ({ + page: item.page, + visible: item.visible, + openInNewTab: false, + useOriginalBiliPage: false, + })) + } + // if dockItemVisibilityList not fresh , set it to default - if (!settings.value.dockItemVisibilityList.length || settings.value.dockItemVisibilityList.length !== mainStore.dockItems.length) - settings.value.dockItemVisibilityList = mainStore.dockItems.map(dock => ({ page: dock.page, visible: true })) + 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 })) const targetDockItems: DockItem[] = [] - settings.value.dockItemVisibilityList.forEach((item) => { + settings.value.dockItemsConfig.forEach((item) => { const foundItem = mainStore.dockItems.find(defaultItem => defaultItem.page === item.page) 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, + url: foundItem?.url || '', }) }) return targetDockItems } -onMounted(() => { - if (settings.value.autoHideDock) - hideDock.value = true - - currentDockItems.value = computeDockItem() -}) - function toggleHideDock(hide: boolean) { if (settings.value.autoHideDock) hideDock.value = hide @@ -85,6 +107,11 @@ function toggleHideDock(hide: boolean) { hideDock.value = false } +function handleDockItemClick(dockItem: DockItem) { + activatedDockItem.value = dockItem + emit('dockItemClick', dockItem) +} + function handleBackToTopOrRefresh() { if (reachTop.value) emit('refresh') @@ -132,7 +159,7 @@ function handleBackToTopOrRefresh() { 'inactive': hoveringDockItem.themeMode && isDark, 'disable-glowing-effect': settings.disableDockGlowingEffect, }" - @click="emit('changePage', dockItem.page)" + @click="handleDockItemClick(dockItem)" >