From af5d9ce46b089592c0da6966e771e9ec122f40ce Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 12 Jan 2025 21:55:14 +0800
Subject: [PATCH] feat(top-bar): bewly or bili top bar switcher (#1237) close
 #1237

---
 src/_locales/cmn-CN.yml                       |  4 ++
 src/_locales/cmn-TW.yml                       |  4 ++
 src/_locales/en.yml                           |  4 ++
 src/_locales/jyut.yml                         |  4 ++
 .../DesktopAndDock/DesktopAndDock.vue         |  3 ++
 .../TopBar/BewlyOrBiliTopBarSwitcher.vue      | 42 +++++++++++++++++++
 src/contentScripts/views/App.vue              |  6 +--
 src/logic/storage.ts                          |  2 +
 src/styles/removeBiliTopBar.scss              |  5 +++
 9 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 src/components/TopBar/BewlyOrBiliTopBarSwitcher.vue

diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml
index e35f8265..34d5a72c 100644
--- a/src/_locales/cmn-CN.yml
+++ b/src/_locales/cmn-CN.yml
@@ -149,6 +149,7 @@ settings:
   # Desktop & Dock
   use_old_top_bar: 使用旧版顶栏
   auto_hide_top_bar: 自动隐藏顶栏
+  show_bewly_or_bili_top_bar_switcher: 显示 BewlyBewly/Bilibili 顶栏切换器
   show_bewly_or_bili_page_switcher: 显示 BewlyBewly/Bilibili 页面切换器
   top_bar_icon_badges: 图标角标
   top_bar_icon_badges_opt:
@@ -287,6 +288,9 @@ auth:
   auth_access_key_first: 在这之前请先授权 BewlyBewly 使用 access key
 
 topbar:
+  switch_to_bewly_top_bar: 切换到 BewlyBewly 顶栏
+  switch_to_bili_top_bar: 切换到 Bilibili/Bilibili-Evolved 顶栏
+
   sign_in: 登录
   notifications: 通知
   moments: 动态
diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml
index 8ea0b57a..e4b30fb3 100644
--- a/src/_locales/cmn-TW.yml
+++ b/src/_locales/cmn-TW.yml
@@ -149,6 +149,7 @@ settings:
   # Desktop and Dock
   use_old_top_bar: 使用舊版頂欄
   auto_hide_top_bar: 自動隱藏頂欄
+  show_bewly_or_bili_top_bar_switcher: 顯示 BewlyBewly/Bilibili 頂欄切換器
   show_bewly_or_bili_page_switcher: 顯示 BewlyBewly/Bilibili 頁面切換器
   top_bar_icon_badges: 圖示標記樣式
   top_bar_icon_badges_opt:
@@ -288,6 +289,9 @@ auth:
   auth_access_key_first: 在這之前請先授權 BewlyBewly 使用 access key
 
 topbar:
+  switch_to_bewly_top_bar: 切換到 BewlyBewly 頂部欄
+  switch_to_bili_top_bar: 切換到 Bilibili/Bilibili-Evolved 頂部欄
+
   sign_in: 登入
   notifications: 通知
   moments: 動態
diff --git a/src/_locales/en.yml b/src/_locales/en.yml
index bd5d0f6d..bc3c52db 100644
--- a/src/_locales/en.yml
+++ b/src/_locales/en.yml
@@ -149,6 +149,7 @@ settings:
   # Desktop & Dock
   use_old_top_bar: Use the old top bar
   auto_hide_top_bar: Automatically hide the top bar
+  show_bewly_or_bili_top_bar_switcher: Show BewlyBewly/Bilibili top bar switcher
   show_bewly_or_bili_page_switcher: Show BewlyBewly/Bilibili page switcher
   top_bar_icon_badges: Icon badges
   top_bar_icon_badges_opt:
@@ -290,6 +291,9 @@ auth:
   auth_access_key_first: Before doing this, authorize BewlyBewly to use the access key.
 
 topbar:
+  switch_to_bewly_top_bar: Switch to BewlyBewly top bar
+  switch_to_bili_top_bar: Switch to BiliBili/Bilibili-Evolved top bar
+
   sign_in: Sign in
   notifications: Notifications
   moments: Moments
diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml
index 510cad5e..409d250b 100644
--- a/src/_locales/jyut.yml
+++ b/src/_locales/jyut.yml
@@ -147,6 +147,7 @@ settings:
   # Desktop and Dock
   use_old_top_bar: 用返舊版頂部欄
   auto_hide_top_bar: 自動收埋頂部欄
+  show_bewly_or_bili_top_bar_switcher: 顯示 BewlyBewly/Bilibili 頂部欄切換掣
   show_bewly_or_bili_page_switcher: 顯示 BewlyBewly/Bilibili 頁面切換掣
   top_bar_icon_badges: 圖示邊位標記
   top_bar_icon_badges_opt:
@@ -286,6 +287,9 @@ auth:
   auth_access_key_first: 整之前記得先授權 BewlyBewly 去用 access key
 
 topbar:
+  switch_to_bewly_top_bar: 切換到 BewlyBewly 頂部欄
+  switch_to_bili_top_bar: 切換到 Bilibili/Bilibili-Evolved 頂部欄
+
   sign_in: 登入
   notifications: 通知
   moments: 動向
diff --git a/src/components/Settings/DesktopAndDock/DesktopAndDock.vue b/src/components/Settings/DesktopAndDock/DesktopAndDock.vue
index 5b585ecc..5b0576a2 100644
--- a/src/components/Settings/DesktopAndDock/DesktopAndDock.vue
+++ b/src/components/Settings/DesktopAndDock/DesktopAndDock.vue
@@ -98,6 +98,9 @@ function handleToggleDockItem(dockItem: any) {
       <SettingsItem :title="$t('settings.auto_hide_top_bar')">
         <Radio v-model="settings.autoHideTopBar" />
       </SettingsItem>
+      <SettingsItem :title="$t('settings.show_bewly_or_bili_top_bar_switcher')">
+        <Radio v-model="settings.showBewlyOrBiliTopBarSwitcher" />
+      </SettingsItem>
       <SettingsItem :title="$t('settings.show_bewly_or_bili_page_switcher')">
         <Radio v-model="settings.showBewlyOrBiliPageSwitcher" />
       </SettingsItem>
diff --git a/src/components/TopBar/BewlyOrBiliTopBarSwitcher.vue b/src/components/TopBar/BewlyOrBiliTopBarSwitcher.vue
new file mode 100644
index 00000000..a0e86402
--- /dev/null
+++ b/src/components/TopBar/BewlyOrBiliTopBarSwitcher.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { settings } from '~/logic'
+
+function toggleBewlyTopBar() {
+  settings.value.useOriginalBilibiliTopBar = !settings.value.useOriginalBilibiliTopBar
+  settings.value.showTopBar = !settings.value.showTopBar
+}
+</script>
+
+<template>
+  <div
+    class="group"
+    pos="fixed top-0 right-0"
+    z-10
+    w-full
+    flex="~ items-center justify-center"
+    p="t-20px"
+    m="t-[calc(var(--bew-top-bar-height)-20px)]"
+  >
+    <button
+      style="backdrop-filter: var(--bew-filter-glass-1);"
+      class="opacity-0 group-hover:opacity-100"
+      transform="translate-y--100% group-hover:translate-y-0"
+      flex="~ items-center gap-2"
+      text="$bew-text-2 sm"
+      bg="$bew-elevated" p="x-2 y-1"
+      rounded="full" shadow="$bew-shadow-1"
+      duration-300
+      @click="toggleBewlyTopBar"
+    >
+      <i i-mingcute:transfer-3-line text-xs />
+      <span>
+        <template v-if="settings.showTopBar">
+          {{ $t('topbar.switch_to_bili_top_bar') }}
+        </template>
+        <template v-else>
+          {{ $t('topbar.switch_to_bewly_top_bar') }}
+        </template>
+      </span>
+    </button>
+  </div>
+</template>
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index a4b73aa4..887c4219 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -283,7 +283,7 @@ provide<BewlyAppProvider>('BEWLY_APP', {
     ref="mainAppRef"
     class="bewly-wrapper"
     :class="{ dark: isDark }"
-    text="$bew-text-1"
+    text="$bew-text-1 size-$bew-base-font-size"
   >
     <!-- Background -->
     <template v-if="showBewlyPage">
@@ -334,6 +334,8 @@ provide<BewlyAppProvider>('BEWLY_APP', {
           || !isHomePage()"
       m-auto max-w="$bew-page-max-width"
     >
+      <BewlyOrBiliTopBarSwitcher v-if="settings.showBewlyOrBiliTopBarSwitcher" />
+
       <OldTopBar
         v-if="settings.useOldTopBar"
         pos="top-0 left-0" z="99 hover:1001" w-full
@@ -385,8 +387,6 @@ provide<BewlyAppProvider>('BEWLY_APP', {
 
 <style lang="scss" scoped>
 .bewly-wrapper {
-  --uno: "text-size-$bew-base-font-size";
-
   // To fix the filter used in `.bewly-wrapper` that cause the positions of elements become discorded.
   > * > * {
     filter: var(--bew-filter-force-dark);
diff --git a/src/logic/storage.ts b/src/logic/storage.ts
index 6674f361..73281517 100644
--- a/src/logic/storage.ts
+++ b/src/logic/storage.ts
@@ -36,6 +36,7 @@ export interface Settings {
   // Desktop & Dock
   useOldTopBar: boolean
   autoHideTopBar: boolean
+  showBewlyOrBiliTopBarSwitcher: boolean
   showBewlyOrBiliPageSwitcher: boolean
   topBarIconBadges: 'number' | 'dot' | 'none'
   alwaysUseDock: boolean
@@ -133,6 +134,7 @@ export const originalSettings: Settings = {
   // Desktop & Dock
   useOldTopBar: false,
   autoHideTopBar: false,
+  showBewlyOrBiliTopBarSwitcher: true,
   showBewlyOrBiliPageSwitcher: true,
   topBarIconBadges: 'number',
   alwaysUseDock: false,
diff --git a/src/styles/removeBiliTopBar.scss b/src/styles/removeBiliTopBar.scss
index 7bda75e4..b7c0f4fd 100644
--- a/src/styles/removeBiliTopBar.scss
+++ b/src/styles/removeBiliTopBar.scss
@@ -11,6 +11,11 @@
     height: var(--bew-top-bar-height) !important;
   }
 
+  // Remove the Bilibili Evolved's top bar
+  .custom-navbar {
+    display: none;
+  }
+
   // some pages have a white bar at the top; changing the top margin fixes this problem
   .banner-wrapper,
   .home-banner-wrapper {