feat(dock): always show dock (#1217)

src/_locales/cmn-CN.yml

@@ -155,9 +155,11 @@ settings:
     number: 数字
     dot: 圆点
     none: 不显示
+  always_use_dock: 总是使用 Dock 栏
+  always_use_dock_desc: 启用后，Dock 栏将始终显示，侧边栏将隐藏。我们推荐你同时启用自动隐藏 Dock 栏。
+  auto_hide_dock: 自动隐藏 Dock 栏
   dock_position: Dock 栏位置
   dock_position_desc: 在屏幕中摆放位置。
-  auto_hide_dock: 自动隐藏 Dock 栏
   dock_content_adjustment: Dock 内容调整
   dock_content_adjustment_desc: 第一个激活的 Dock 项的页面将会是启动页面。
   dock_item_open_in_new_tab: 在新标签页打开

src/_locales/cmn-TW.yml

@@ -155,9 +155,11 @@ settings:
     number: 數字
     dot: 圓點
     none: 不顯示
+  always_use_dock: 總是使用 Dock
+  always_use_dock_desc: 啟用後，Dock 將始終顯示，側邊欄將隱藏。我們推薦你同時啟用自動隱藏 Dock。
+  auto_hide_dock: 自動隱藏 Dock
   dock_position: Dock 位置
   dock_position_desc: 螢幕上的位置。
-  auto_hide_dock: 自動隱藏 Dock
   dock_content_adjustment: Dock 內容調整
   dock_content_adjustment_desc: 第一個啟用的 Dock 項目的頁面將是起始頁面。
   dock_item_open_in_new_tab: 在新索引標籤開啟

src/_locales/en.yml

@@ -155,9 +155,11 @@ settings:
     number: Number
     dot: Dot
     none: Do not show
+  always_use_dock: Always use the dock
+  always_use_dock_desc: The dock will always be visible and the sidebar will be hidden. We also recommend enabling auto-hide for the dock.
+  auto_hide_dock: Automatically hide the dock
   dock_position: Dock position
   dock_position_desc: Position on screen.
-  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

src/_locales/jyut.yml

@@ -153,9 +153,11 @@ settings:
     number: 數字
     dot: 圓點
     none: 唔顯示
+  always_use_dock: 點都要用 Dock
+  always_use_dock_desc: 啓用後，Dock 點都要用佢而唔係用側邊欄。我哋推介你同時啓用自動收埋 Dock 去。
+  auto_hide_dock: 自動收埋 Dock
   dock_position: Dock 放位
   dock_position_desc: 放喺螢幕邊度。
-  auto_hide_dock: 自動收埋 Dock
   dock_content_adjustment: Dock 內容調整
   dock_content_adjustment_desc: 第一個啓用嘅 Dock 項個頁面會係開始頁面。
   dock_item_open_in_new_tab: 在新分頁度開啓

src/components/Dock/Dock.vue

@@ -9,6 +9,7 @@ import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
 import type { DockItem } from '~/stores/mainStore'
 import { useMainStore } from '~/stores/mainStore'
+import { isHomePage } from '~/utils/main'
 
 import Tooltip from '../Tooltip.vue'
 import type { HoveringDockItem } from './types'
@@ -57,7 +58,7 @@ const showBackToTopOrRefreshButton = computed((): boolean => {
   }
 
   return settings.value.moveBackToTopOrRefreshButtonToDock
-    && props.activatedPage !== AppPage.Search
+    && props.activatedPage !== AppPage.Search && isHomePage()
 })
 
 watch(() => settings.value.autoHideDock, (newValue) => {
@@ -137,6 +138,10 @@ function handleBackToTopOrRefresh() {
     emit('backToTop')
 }
 
+function isDockItemActivated(dockItem: DockItem): boolean {
+  return props.activatedPage === dockItem.page && isHomePage()
+}
+
 const dockContentRef = ref<HTMLElement>()
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 const { width: dockWidth, height: dockHeight } = useElementSize(dockContentRef)
@@ -182,8 +187,8 @@ const dockTransformStyle = computed((): { transform: string, transformOrigin: st
 <template>
   <aside
     class="dock-wrap"
-    pos="absolute top-0" flex="~ col justify-center items-center" w-full h-full
-    z-1 pointer-events-none
+    pos="fixed top-0" flex="~ col justify-center items-center" w-full h-full
+    z-10 pointer-events-none
   >
     <!-- Edge Div -->
     <div
@@ -216,19 +221,19 @@ const dockTransformStyle = computed((): { transform: string, transformOrigin: st
             <button
               class="dock-item group"
               :class="{
-                'active': activatedPage === dockItem.page,
+                'active': isDockItemActivated(dockItem),
                 'inactive': hoveringDockItem.themeMode && isDark,
                 'disable-glowing-effect': settings.disableDockGlowingEffect,
               }"
               @click="handleDockItemClick(dockItem)"
             >
               <div
-                v-show="activatedPage !== dockItem.page"
+                v-show="!isDockItemActivated(dockItem)"
                 :class="dockItem.icon"
                 text-xl
               />
               <div
-                v-show="activatedPage === dockItem.page"
+                v-show="isDockItemActivated(dockItem)"
                 :class="dockItem.iconActivated"
                 text-xl
               />

src/components/Settings/DesktopAndDock/DesktopAndDock.vue

@@ -107,6 +107,12 @@ function handleToggleDockItem(dockItem: any) {
     </SettingsItemGroup>
 
     <SettingsItemGroup :title="$t('settings.group_dock')">
+      <SettingsItem :title="$t('settings.always_use_dock')" :desc="$t('settings.always_use_dock_desc')">
+        <Radio v-model="settings.alwaysUseDock" />
+      </SettingsItem>
+      <SettingsItem :title="$t('settings.auto_hide_dock')">
+        <Radio v-model="settings.autoHideDock" />
+      </SettingsItem>
       <SettingsItem :title="$t('settings.dock_position')" :desc="$t('settings.dock_position_desc')">
         <Select
           v-model="settings.dockPosition"
@@ -114,9 +120,6 @@ function handleToggleDockItem(dockItem: any) {
           w="full"
         />
       </SettingsItem>
-      <SettingsItem :title="$t('settings.auto_hide_dock')">
-        <Radio v-model="settings.autoHideDock" />
-      </SettingsItem>
       <SettingsItem :desc="$t('settings.dock_content_adjustment_desc')">
         <template #title>
           <div flex="~ gap-4 items-center">

src/contentScripts/views/App.vue

@@ -127,9 +127,14 @@ function handleDockItemClick(dockItem: DockItem) {
       // iframePageURL.value = dockItem.url
     }
     else {
-      nextTick(() => {
-        changeActivatePage(dockItem.page)
-      })
+      if (isHomePage()) {
+        nextTick(() => {
+          changeActivatePage(dockItem.page)
+        })
+      }
+      else {
+        location.href = `https://www.bilibili.com/?page=${dockItem.page}`
+      }
     }
 
     // When not opened in a new tab, change the `activatedPage`
@@ -279,7 +284,7 @@ provide<BewlyAppProvider>('BEWLY_APP', {
       pointer-events-none
     >
       <Dock
-        v-if="showBewlyPage || iframePageURL"
+        v-if="settings.alwaysUseDock || (showBewlyPage || iframePageURL)"
         pointer-events-auto
         :activated-page="activatedPage"
         @settings-visibility-change="toggleSettings"

src/logic/storage.ts

@@ -38,8 +38,9 @@ export interface Settings {
   autoHideTopBar: boolean
   showBewlyOrBiliPageSwitcher: boolean
   topBarIconBadges: 'number' | 'dot' | 'none'
-  dockPosition: 'left' | 'right' | 'bottom'
+  alwaysUseDock: boolean
   autoHideDock: boolean
+  dockPosition: 'left' | 'right' | 'bottom'
   /** @deprecated use dockItemsConfig instead */
   dockItemVisibilityList: { page: AppPage, visible: boolean }[]
   dockItemsConfig: { page: AppPage, visible: boolean, openInNewTab: boolean, useOriginalBiliPage: boolean }[]
@@ -134,8 +135,9 @@ export const originalSettings: Settings = {
   autoHideTopBar: false,
   showBewlyOrBiliPageSwitcher: true,
   topBarIconBadges: 'number',
-  dockPosition: 'right',
+  alwaysUseDock: true,
   autoHideDock: false,
+  dockPosition: 'right',
   /** @deprecated use dockItemsConfig instead */
   dockItemVisibilityList: [],
   dockItemsConfig: [],