feat(top-bar): bewly/bili page switcher

src/_locales/cmn-CN.yml

@@ -149,6 +149,7 @@ settings:
   # Desktop & Dock
   use_old_top_bar: 使用旧版顶栏
   auto_hide_top_bar: 自动隐藏顶栏
+  show_bewly_or_bili_page_switcher: 显示 BewlyBewly/Bilibili 页面切换器
   top_bar_icon_badges: 图标角标
   top_bar_icon_badges_opt:
     number: 数字

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_page_switcher: 顯示 BewlyBewly/Bilibili 頁面切換器
   top_bar_icon_badges: 圖示標記樣式
   top_bar_icon_badges_opt:
     number: 數字

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_page_switcher: Show BewlyBewly/Bilibili page switcher
   top_bar_icon_badges: Icon badges
   top_bar_icon_badges_opt:
     number: Number

src/_locales/jyut.yml

@@ -147,6 +147,7 @@ settings:
   # Desktop and Dock
   use_old_top_bar: 用返舊版頂部欄
   auto_hide_top_bar: 自動收埋頂部欄
+  show_bewly_or_bili_page_switcher: 顯示 BewlyBewly/Bilibili 頁面切換掣
   top_bar_icon_badges: 圖示邊位標記
   top_bar_icon_badges_opt:
     number: 數字

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_page_switcher')">
+        <Radio v-model="settings.showBewlyOrBiliPageSwitcher" />
+      </SettingsItem>
       <SettingsItem :title="$t('settings.top_bar_icon_badges')">
         <Select v-model="settings.topBarIconBadges" :options="topBarIconBadgesOptions" w="full" />
       </SettingsItem>

src/components/TopBar/TopBar.vue

@@ -11,6 +11,7 @@ import api from '~/utils/api'
 import { getUserID, isHomePage } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
+import BewlyOrBiliPageSwitcher from './components/BewlyOrBiliPageSwitcher.vue'
 import ChannelsPop from './components/ChannelsPop.vue'
 import FavoritesPop from './components/FavoritesPop.vue'
 import HistoryPop from './components/HistoryPop.vue'
@@ -471,10 +472,10 @@ defineExpose({
         />
         <!-- </Transition> -->
 
-        <div shrink-0 flex="inline xl:1 justify-center">
+        <div shrink-0 flex="inline xl:1 justify-start items-center gap-2">
           <div
             ref="channels"
-            z-1 relative w-fit mr-auto
+            z-1 relative w-fit
           >
             <a
               ref="logo" href="//www.bilibili.com"
@@ -490,7 +491,7 @@ defineExpose({
             >
               <svg
                 t="1720198072316" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-                p-id="1477" width="38" height="38"
+                p-id="1477" width="36" height="36"
                 :style="{
                   fill: forceWhiteIcon ? 'white' : 'var(--bew-theme-color)',
                   filter: forceWhiteIcon ? 'drop-shadow(0 0 4px rgba(0, 0, 0, 0.6))' : 'drop-shadow(0 0 4px var(--bew-theme-color-60))',
@@ -511,6 +512,8 @@ defineExpose({
               />
             </Transition>
           </div>
+
+          <BewlyOrBiliPageSwitcher v-if="settings.showBewlyOrBiliPageSwitcher" z-1 />
         </div>
 
         <!-- search bar -->

src/components/TopBar/components/BewlyOrBiliPageSwitcher.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { useBewlyApp } from '~/composables/useAppProvider'
+import { settings } from '~/logic'
+import { useMainStore } from '~/stores/mainStore'
+
+const { activatedPage } = useBewlyApp()
+const { getDockItemByPage } = useMainStore()
+
+const options = readonly([
+  {
+    name: 'BewlyBewly',
+    useOriginalBiliPage: false,
+  },
+  {
+    name: 'BiliBili',
+    useOriginalBiliPage: true,
+  },
+])
+
+const currentPage = computed(() => {
+  return settings.value.dockItemsConfig.find(dockItem => dockItem.page === activatedPage.value)
+})
+
+function switchPage(useOriginalBiliPage: boolean) {
+  const dockItem = settings.value.dockItemsConfig.find(dockItem => dockItem.page === activatedPage.value)
+  if (dockItem) {
+    dockItem.useOriginalBiliPage = useOriginalBiliPage
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="getDockItemByPage(activatedPage)?.hasBewlyPage"
+    style="backdrop-filter: var(--bew-filter-glass-1);"
+    flex="~ gap-1" bg="$bew-elevated" p-1 rounded-full
+    h-34px
+  >
+    <button
+      v-for="option in options" :key="option.name"
+      :class="{
+        active: option.useOriginalBiliPage === currentPage?.useOriginalBiliPage,
+      }"
+      rounded-inherit text="$bew-text-2 hover:$bew-text-1 xs" p="x-4 y-1" bg="hover:$bew-fill-2"
+      fw-bold duration-300
+      @click="switchPage(option.useOriginalBiliPage)"
+    >
+      {{ option.name }}
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.active {
+  --uno: "bg-$bew-fill-3 text-$bew-text-1";
+}
+</style>

src/logic/storage.ts

@@ -36,6 +36,7 @@ export interface Settings {
   // Desktop & Dock
   useOldTopBar: boolean
   autoHideTopBar: boolean
+  showBewlyOrBiliPageSwitcher: boolean
   topBarIconBadges: 'number' | 'dot' | 'none'
   dockPosition: 'left' | 'right' | 'bottom'
   autoHideDock: boolean
@@ -131,6 +132,7 @@ export const originalSettings: Settings = {
   // Desktop & Dock
   useOldTopBar: false,
   autoHideTopBar: false,
+  showBewlyOrBiliPageSwitcher: true,
   topBarIconBadges: 'number',
   dockPosition: 'right',
   autoHideDock: false,