From d534adc0f2c8d7a78703eb82c9b9c4e78de5bcef Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 1 Sep 2024 04:37:27 +0800
Subject: [PATCH] feat(top-bar):  add a setting to control link open mode

---
 .../DesktopAndDock/DesktopAndDock.vue         | 21 ++++++++++
 src/components/TopBar/OldTopBar.vue           | 29 ++++++--------
 src/components/TopBar/TopBar.vue              | 29 +++++++-------
 src/components/TopBar/components/ALink.vue    | 29 ++++++++++++++
 .../TopBar/components/ChannelsPop.vue         | 12 +++---
 .../TopBar/components/FavoritesPop.vue        | 21 +++++-----
 .../TopBar/components/HistoryPop.vue          | 22 ++++++-----
 .../TopBar/components/MomentsPop.vue          | 28 ++++++-------
 src/components/TopBar/components/MorePop.vue  |  9 +++--
 .../TopBar/components/NotificationsPop.vue    |  8 ++--
 .../TopBar/components/UserPanelPop.vue        | 39 +++++++++----------
 .../TopBar/components/WatchLaterPop.vue       | 22 +++++------
 .../oldTopBarComponents/OldUserPanelPop.vue   | 16 ++++----
 src/logic/storage.ts                          | 18 ++++++---
 14 files changed, 177 insertions(+), 126 deletions(-)
 create mode 100644 src/components/TopBar/components/ALink.vue

diff --git a/src/components/Settings/DesktopAndDock/DesktopAndDock.vue b/src/components/Settings/DesktopAndDock/DesktopAndDock.vue
index ad947f6a..ddf6fe09 100644
--- a/src/components/Settings/DesktopAndDock/DesktopAndDock.vue
+++ b/src/components/Settings/DesktopAndDock/DesktopAndDock.vue
@@ -44,6 +44,24 @@ const dockPositions = computed(() => {
     },
   ]
 })
+
+const topBarLinkOpenModeOptions = computed(() => {
+  return [
+    {
+      label: 'current tab',
+      value: 'currentTab',
+    },
+    {
+      label: 'current tab if not homepage',
+      value: 'currentTabIfNotHomepage',
+    },
+    {
+      label: 'new tab',
+      value: 'newTab',
+    },
+  ]
+})
+
 const pageOptions = computed((): { label: string, icon: string, value: string }[] => {
   return mainStore.dockItems.map((e: any) => {
     return {
@@ -78,6 +96,9 @@ function handleToggleDockItem(dockItem: any) {
       <SettingsItem :title="$t('settings.use_old_topbar')">
         <Radio v-model="settings.useOldTopBar" />
       </SettingsItem>
+      <SettingsItem title="link open mode">
+        <Select v-model="settings.topBarLinkOpenMode" :options="topBarLinkOpenModeOptions" w="full" />
+      </SettingsItem>
       <SettingsItem :title="$t('settings.auto_hide_topbar')">
         <Radio v-model="settings.autoHideTopBar" />
       </SettingsItem>
diff --git a/src/components/TopBar/OldTopBar.vue b/src/components/TopBar/OldTopBar.vue
index da674223..ff3204ef 100644
--- a/src/components/TopBar/OldTopBar.vue
+++ b/src/components/TopBar/OldTopBar.vue
@@ -11,6 +11,7 @@ import { settings } from '~/logic'
 import { getUserID, isHomePage } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
+import ALink from './components/ALink.vue'
 import ChannelsPop from './components/ChannelsPop.vue'
 import FavoritesPop from './components/FavoritesPop.vue'
 import HistoryPop from './components/HistoryPop.vue'
@@ -540,10 +541,9 @@ defineExpose({
             class="avatar right-side-item relative"
             shadow="$bew-shadow-2" rounded-full
           >
-            <a
+            <ALink
               ref="avatarImg"
               :href="`https://space.bilibili.com/${mid}`"
-              :target="isHomePage() ? '_blank' : '_self'"
               class="avatar-img"
               :class="{ hover: popupVisible.userPanel }"
               :style="{
@@ -646,13 +646,12 @@ defineExpose({
                       class="unread-dot"
                     />
                   </template>
-                  <a
+                  <ALink
                     href="https://message.bilibili.com"
-                    :target="isHomePage() ? '_blank' : '_self'"
                     :title="$t('topbar.notifications')"
                   >
                     <div i-tabler:bell />
-                  </a>
+                  </ALink>
 
                   <Transition name="slide-in">
                     <NotificationsPop
@@ -680,13 +679,12 @@ defineExpose({
                       class="unread-dot"
                     />
                   </template>
-                  <a
+                  <ALink
                     href="https://t.bilibili.com"
-                    :target="isHomePage() ? '_blank' : '_self'"
                     :title="$t('topbar.moments')"
                   >
                     <div i-tabler:windmill />
-                  </a>
+                  </ALink>
 
                   <Transition name="slide-in">
                     <MomentsPop v-show="popupVisible.moments" ref="momentsPopRef" class="bew-popover" />
@@ -699,13 +697,12 @@ defineExpose({
                   class="right-side-item"
                   :class="{ active: popupVisible.favorites }"
                 >
-                  <a
+                  <ALink
                     :href="`https://space.bilibili.com/${mid}/favlist`"
-                    :target="isHomePage() ? '_blank' : '_self'"
                     :title="$t('topbar.favorites')"
                   >
                     <div i-mingcute:star-line />
-                  </a>
+                  </ALink>
 
                   <Transition name="slide-in">
                     <KeepAlive>
@@ -725,13 +722,12 @@ defineExpose({
                   class="right-side-item"
                   :class="{ active: popupVisible.history }"
                 >
-                  <a
+                  <ALink
                     href="https://www.bilibili.com/account/history"
-                    :target="isHomePage() ? '_blank' : '_self'"
                     :title="$t('topbar.history')"
                   >
                     <div i-mingcute:time-line />
-                  </a>
+                  </ALink>
 
                   <Transition name="slide-in">
                     <HistoryPop
@@ -748,13 +744,12 @@ defineExpose({
                   class="right-side-item"
                   :class="{ active: popupVisible.watchLater }"
                 >
-                  <a
+                  <ALink
                     href="https://www.bilibili.com/watchlater/#/list"
-                    :target="isHomePage() ? '_blank' : '_self'"
                     :title="$t('topbar.watch_later')"
                   >
                     <div i-mingcute:carplay-line />
-                  </a>
+                  </ALink>
 
                   <Transition name="slide-in">
                     <WatchLaterPop
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 461d5641..666bbd72 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -11,6 +11,7 @@ import { settings } from '~/logic'
 import { getUserID, isHomePage } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
+import ALink from './components/ALink.vue'
 import ChannelsPop from './components/ChannelsPop.vue'
 import FavoritesPop from './components/FavoritesPop.vue'
 import HistoryPop from './components/HistoryPop.vue'
@@ -592,13 +593,12 @@ defineExpose({
                       class="unread-dot"
                     />
                   </template>
-                  <a
+                  <ALink
                     href="https://t.bilibili.com"
-                    :target="isHomePage() ? '_blank' : '_self'"
                     :title="$t('topbar.moments')"
                   >
                     <div i-tabler:windmill />
-                  </a>
+                  </ALink>
 
                   <Transition name="slide-in">
                     <MomentsPop v-show="popupVisible.moments" ref="momentsPopRef" class="bew-popover" />
@@ -611,13 +611,12 @@ defineExpose({
                   class="right-side-item"
                   :class="{ active: popupVisible.favorites }"
                 >
-                  <a
+                  <ALink
                     :href="`https://space.bilibili.com/${mid}/favlist`"
-                    :target="isHomePage() ? '_blank' : '_self'"
                     :title="$t('topbar.favorites')"
                   >
                     <div i-mingcute:star-line />
-                  </a>
+                  </ALink>
 
                   <Transition name="slide-in">
                     <KeepAlive>
@@ -636,13 +635,13 @@ defineExpose({
                   class="right-side-item"
                   :class="{ active: popupVisible.history }"
                 >
-                  <a
+                  <ALink
                     href="https://www.bilibili.com/account/history"
-                    :target="isHomePage() ? '_blank' : '_self'"
+
                     :title="$t('topbar.history')"
                   >
                     <div i-mingcute:time-line />
-                  </a>
+                  </ALink>
 
                   <Transition name="slide-in">
                     <HistoryPop v-if="popupVisible.history" class="bew-popover" />
@@ -655,13 +654,12 @@ defineExpose({
                   class="right-side-item"
                   :class="{ active: popupVisible.watchLater }"
                 >
-                  <a
+                  <ALink
                     href="https://www.bilibili.com/watchlater/#/list"
-                    :target="isHomePage() ? '_blank' : '_self'"
                     :title="$t('topbar.watch_later')"
                   >
                     <div i-mingcute:carplay-line />
-                  </a>
+                  </ALink>
 
                   <Transition name="slide-in">
                     <WatchLaterPop
@@ -745,13 +743,13 @@ defineExpose({
                       class="unread-dot"
                     />
                   </template>
-                  <a
+                  <ALink
                     href="https://message.bilibili.com"
                     :target="isHomePage() ? '_blank' : '_self'"
                     :title="$t('topbar.notifications')"
                   >
                     <div i-tabler:bell />
-                  </a>
+                  </ALink>
 
                   <Transition name="slide-in">
                     <NotificationsPop
@@ -770,10 +768,9 @@ defineExpose({
               :class="{ hover: popupVisible.userPanel }"
               class="avatar right-side-item"
             >
-              <a
+              <ALink
                 ref="avatarImg"
                 :href="`https://space.bilibili.com/${mid}`"
-                :target="isHomePage() ? '_blank' : '_self'"
                 class="avatar-img"
                 :class="{ hover: popupVisible.userPanel }"
                 :style="{
diff --git a/src/components/TopBar/components/ALink.vue b/src/components/TopBar/components/ALink.vue
new file mode 100644
index 00000000..e27574ae
--- /dev/null
+++ b/src/components/TopBar/components/ALink.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { settings } from '~/logic'
+import { isHomePage } from '~/utils/main'
+
+defineProps<{
+  href?: string
+  title?: string
+  rel?: string
+}>()
+
+const target = computed(() => {
+  if (settings.value.topBarLinkOpenMode === 'newTab') {
+    return '_blank'
+  }
+  if (settings.value.topBarLinkOpenMode === 'currentTabIfNotHomepage') {
+    return isHomePage() ? '_blank' : '_self'
+  }
+  if (settings.value.topBarLinkOpenMode === 'currentTab') {
+    return '_self'
+  }
+  return '_self'
+})
+</script>
+
+<template>
+  <a :href="href" :target="target" :title="title" :rel="rel">
+    <slot />
+  </a>
+</template>
diff --git a/src/components/TopBar/components/ChannelsPop.vue b/src/components/TopBar/components/ChannelsPop.vue
index e808f208..ab51296d 100644
--- a/src/components/TopBar/components/ChannelsPop.vue
+++ b/src/components/TopBar/components/ChannelsPop.vue
@@ -3,6 +3,8 @@ import { useI18n } from 'vue-i18n'
 
 import { isHomePage } from '~/utils/main'
 
+import ALink from './ALink.vue'
+
 const { t } = useI18n()
 
 const genres = computed(() => [
@@ -70,15 +72,14 @@ const otherLinks = computed(() => [
         :key="genre.name"
         class="link-item"
       >
-        <a
+        <ALink
           :href="genre.href"
-          :target="isHomePage() ? '_blank' : '_self'"
         >
           <svg aria-hidden="true" class="svg-icon">
             <use :xlink:href="genre.icon" />
           </svg>
           <span>{{ genre.name }}</span>
-        </a>
+        </ALink>
       </li>
     </ul>
     <ul
@@ -91,9 +92,8 @@ const otherLinks = computed(() => [
         :key="otherLink.name"
         class="link-item group"
       >
-        <a
+        <ALink
           :href="otherLink.href"
-          :target="isHomePage() ? '_blank' : '_self'"
         >
           <div v-if="otherLink.icon.startsWith('#')" class="icon">
             <svg
@@ -113,7 +113,7 @@ const otherLinks = computed(() => [
             />
           </div>
           <span>{{ otherLink.name }}</span>
-        </a>
+        </ALink>
       </li>
     </ul>
   </div>
diff --git a/src/components/TopBar/components/FavoritesPop.vue b/src/components/TopBar/components/FavoritesPop.vue
index b4f4326f..9cb4c3c3 100644
--- a/src/components/TopBar/components/FavoritesPop.vue
+++ b/src/components/TopBar/components/FavoritesPop.vue
@@ -6,9 +6,10 @@ import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
 import { useApiClient } from '~/composables/api'
 import { calcCurrentTime } from '~/utils/dataFormatter'
-import { getUserID, isHomePage, removeHttpFromUrl, scrollToTop } from '~/utils/main'
+import { getUserID, removeHttpFromUrl, scrollToTop } from '~/utils/main'
 
 import type { FavoriteCategory, FavoriteResource } from '../types'
+import ALink from './ALink.vue'
 
 const api = useApiClient()
 
@@ -163,18 +164,18 @@ defineExpose({
       </h3>
 
       <div flex="~ gap-4">
-        <a
-          :href="playAllUrl" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+        <ALink
+          :href="playAllUrl" rel="noopener noreferrer"
           flex="~" items="center"
         >
           <span text="sm">{{ $t('common.play_all') }}</span>
-        </a>
-        <a
-          :href="viewAllUrl" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+        </ALink>
+        <ALink
+          :href="viewAllUrl" rel="noopener noreferrer"
           flex="~" items="center"
         >
           <span text="sm">{{ $t('common.view_all') }}</span>
-        </a>
+        </ALink>
       </div>
     </header>
 
@@ -235,11 +236,11 @@ defineExpose({
         <div v-if="!isLoading && favoriteResources.length > 0" min-h="50px" />
 
         <TransitionGroup name="list">
-          <a
+          <ALink
             v-for="item in favoriteResources"
             :key="item.id"
             :href="isMusic(item) ? `https://www.bilibili.com/audio/au${item.id}` : `//www.bilibili.com/video/${item.bvid}`"
-            :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+            rel="noopener noreferrer"
             hover:bg="$bew-fill-2"
             rounded="$bew-radius"
             m="last:b-4" p="2"
@@ -292,7 +293,7 @@ defineExpose({
                 </div>
               </div>
             </section>
-          </a>
+          </ALink>
         </TransitionGroup>
 
         <!-- loading -->
diff --git a/src/components/TopBar/components/HistoryPop.vue b/src/components/TopBar/components/HistoryPop.vue
index 544b1d8e..1b90326d 100644
--- a/src/components/TopBar/components/HistoryPop.vue
+++ b/src/components/TopBar/components/HistoryPop.vue
@@ -10,7 +10,9 @@ import { useApiClient } from '~/composables/api'
 import type { HistoryResult, List as HistoryItem } from '~/models/history/history'
 import { Business } from '~/models/history/history'
 import { calcCurrentTime } from '~/utils/dataFormatter'
-import { isHomePage, removeHttpFromUrl, scrollToTop } from '~/utils/main'
+import { removeHttpFromUrl, scrollToTop } from '~/utils/main'
+
+import ALink from './ALink.vue'
 
 const { t } = useI18n()
 const api = useApiClient()
@@ -201,12 +203,12 @@ function getHistoryList(type: Business, view_at = 0 as number) {
           {{ tab.name }}
         </div>
       </div>
-      <a
-        href="https://www.bilibili.com/account/history" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+      <ALink
+        href="https://www.bilibili.com/account/history" rel="noopener noreferrer"
         flex="~ items-center"
       >
         <span text="sm">{{ $t('common.view_all') }}</span>
-      </a>
+      </ALink>
     </header>
 
     <!-- historys wrapper -->
@@ -242,10 +244,10 @@ function getHistoryList(type: Business, view_at = 0 as number) {
         <div v-if="!isLoading && historys.length > 0" min-h="50px" />
 
         <TransitionGroup name="list">
-          <a
+          <ALink
             v-for="historyItem in historys"
             :key="historyItem.kid"
-            :href="getHistoryUrl(historyItem)" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+            :href="getHistoryUrl(historyItem)" rel="noopener noreferrer"
             m="last:b-4" p="2"
             rounded="$bew-radius"
             hover:bg="$bew-fill-2"
@@ -364,12 +366,12 @@ function getHistoryList(type: Business, view_at = 0 as number) {
                   {{ historyItem.title }}
                 </h3>
                 <div text="$bew-text-2 sm" m="t-4" flex="~" align="items-center">
-                  <a
+                  <ALink
                     :href="`https://space.bilibili.com/${historyItem.author_mid}`"
-                    :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+                    rel="noopener noreferrer"
                   >
                     {{ historyItem.author_name }}
-                  </a>
+                  </ALink>
                   <span
                     v-if="historyItem.live_status === 1"
                     text="$bew-theme-color"
@@ -391,7 +393,7 @@ function getHistoryList(type: Business, view_at = 0 as number) {
                 </p>
               </div>
             </section>
-          </a>
+          </ALink>
         </TransitionGroup>
 
         <!-- loading -->
diff --git a/src/components/TopBar/components/MomentsPop.vue b/src/components/TopBar/components/MomentsPop.vue
index fa253758..44fdc077 100644
--- a/src/components/TopBar/components/MomentsPop.vue
+++ b/src/components/TopBar/components/MomentsPop.vue
@@ -9,7 +9,9 @@ import Tooltip from '~/components/Tooltip.vue'
 import { useApiClient } from '~/composables/api'
 import type { TopBarLiveMomentResult } from '~/models/moment/topBarLiveMoment'
 import type { TopBarMomentResult } from '~/models/moment/topBarMoment'
-import { getCSRF, isHomePage, scrollToTop } from '~/utils/main'
+import { getCSRF, scrollToTop } from '~/utils/main'
+
+import ALink from './ALink.vue'
 
 type MomentType = 'video' | 'live' | 'article'
 interface MomentTab { type: MomentType, name: any }
@@ -314,12 +316,12 @@ defineExpose({
           {{ tab.name }}
         </div>
       </div>
-      <a
-        href="https://t.bilibili.com/" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+      <ALink
+        href="https://t.bilibili.com/" rel="noopener noreferrer"
         flex="~ items-center"
       >
         <span text="sm">{{ $t('common.view_all') }}</span>
-      </a>
+      </ALink>
     </header>
 
     <!-- moments wrapper -->
@@ -350,10 +352,10 @@ defineExpose({
         <div v-if="!isLoading && moments.length > 0" min-h="50px" />
 
         <TransitionGroup name="list">
-          <a
+          <ALink
             v-for="(moment, index) in moments"
             :key="index"
-            :href="moment.link" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+            :href="moment.link" rel="noopener noreferrer"
             flex="~ justify-between"
             m="b-2" p="2"
             rounded="$bew-radius"
@@ -372,9 +374,9 @@ defineExpose({
               pos="absolute -top-12px -left-12px"
               style="box-shadow: 0 0 4px var(--bew-theme-color)"
             />
-            <a
+            <ALink
               :href="moment.authorJumpUrl"
-              :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+              rel="noopener noreferrer"
               rounded="1/2"
               w="40px" h="40px" m="r-4"
               bg="$bew-skeleton"
@@ -384,20 +386,20 @@ defineExpose({
                 rounded="1/2"
                 w="40px" h="40px"
               >
-            </a>
+            </ALink>
 
             <div flex="~" justify="between" w="full">
               <div>
                 <!-- <span v-if="selectedTab !== 1">{{ `${moment.name} ${t('topbar.moments_dropdown.uploaded')}` }}</span> -->
                 <!-- <span v-else>{{ `${moment.name} ${t('topbar.moments_dropdown.now_streaming')}` }}</span> -->
 
-                <a
+                <ALink
                   :href="moment.authorJumpUrl"
-                  :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+                  rel="noopener noreferrer"
                   font-bold
                 >
                   {{ moment.author }}
-                </a>
+                </ALink>
                 <div overflow-hidden text-ellipsis break-anywhere>
                   {{ moment.title }}
                 </div>
@@ -452,7 +454,7 @@ defineExpose({
                 </div>
               </div>
             </div>
-          </a>
+          </ALink>
         </TransitionGroup>
 
         <!-- loading -->
diff --git a/src/components/TopBar/components/MorePop.vue b/src/components/TopBar/components/MorePop.vue
index a833e426..db6270f2 100644
--- a/src/components/TopBar/components/MorePop.vue
+++ b/src/components/TopBar/components/MorePop.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-import { getUserID, isHomePage } from '~/utils/main'
+import { getUserID } from '~/utils/main'
+
+import ALink from './ALink.vue'
 
 const { t } = useI18n()
 
@@ -25,11 +27,10 @@ const list = computed((): { name: string, url: string, icon: string }[] => [
     rounded="$bew-radius"
     flex="~ col"
   >
-    <a
+    <ALink
       v-for="item in list"
       :key="item.name"
       :href="item.url"
-      :target="isHomePage() ? '_blank' : '_self'"
       pos="relative"
       p="x-4 y-2"
       bg="hover:$bew-fill-2"
@@ -41,6 +42,6 @@ const list = computed((): { name: string, url: string, icon: string }[] => [
     >
       <i :class="item.icon" class="mr-4" />
       <span class="flex-1">{{ item.name }}</span>
-    </a>
+    </ALink>
   </div>
 </template>
diff --git a/src/components/TopBar/components/NotificationsPop.vue b/src/components/TopBar/components/NotificationsPop.vue
index 68b6f315..c18da9fc 100644
--- a/src/components/TopBar/components/NotificationsPop.vue
+++ b/src/components/TopBar/components/NotificationsPop.vue
@@ -2,7 +2,8 @@
 import { useI18n } from 'vue-i18n'
 
 import { useApiClient } from '~/composables/api'
-import { isHomePage } from '~/utils/main'
+
+import ALink from './ALink.vue'
 
 const { t } = useI18n()
 const api = useApiClient()
@@ -81,11 +82,10 @@ function getUnreadMessageCount() {
     border="1 $bew-border-color"
     flex="~ col"
   >
-    <a
+    <ALink
       v-for="item in list"
       :key="item.name"
       :href="item.url"
-      :target="isHomePage() ? '_blank' : '_self'"
       pos="relative"
       flex="~ items-center justify-between gap-2"
       p="x-4 y-2"
@@ -111,6 +111,6 @@ function getUnreadMessageCount() {
       >
         {{ item.unreadCount > 99 ? '99+' : item.unreadCount }}
       </div>
-    </a>
+    </ALink>
   </div>
 </template>
diff --git a/src/components/TopBar/components/UserPanelPop.vue b/src/components/TopBar/components/UserPanelPop.vue
index f5d38cc7..ed12b01c 100644
--- a/src/components/TopBar/components/UserPanelPop.vue
+++ b/src/components/TopBar/components/UserPanelPop.vue
@@ -9,6 +9,7 @@ import { LV0_ICON, LV1_ICON, LV2_ICON, LV3_ICON, LV4_ICON, LV5_ICON, LV6_ICON, L
 import { getCSRF, getUserID, isHomePage } from '~/utils/main'
 
 import type { UserInfo, UserStat } from '../types'
+import ALink from './ALink.vue'
 
 const props = defineProps<{
   userInfo: UserInfo
@@ -128,23 +129,24 @@ function getLvIcon(level: number, isSigma: boolean = false): string {
       text="xs $bew-text-2"
       m="t-1 b-2"
     >
-      <a
+      <ALink
         class="group mr-4"
         href="https://account.bilibili.com/account/coin"
-        :target="isHomePage() ? '_blank' : '_self'"
-      >{{ $t('topbar.user_dropdown.money') + (userInfo.money ?? '-') }}</a>
-      <a
+      >
+        {{ $t('topbar.user_dropdown.money') + (userInfo.money ?? '-') }}
+      </ALink>
+      <ALink
         class="group"
         href="https://pay.bilibili.com/pay-v2-web/bcoin_index"
-        :target="isHomePage() ? '_blank' : '_self'"
-      >{{
-        $t('topbar.user_dropdown.b_coins') + (userInfo.wallet?.bcoin_balance ?? '-')
-      }}</a>
+      >
+        {{
+          $t('topbar.user_dropdown.b_coins') + (userInfo.wallet?.bcoin_balance ?? '-')
+        }}
+      </ALink>
     </div>
 
-    <a
+    <ALink
       href="//account.bilibili.com/account/record?type=exp"
-      target="_blank"
       block mb-2 w-full
       flex="~ col justify-center items-start"
     >
@@ -191,35 +193,32 @@ function getLvIcon(level: number, isSigma: boolean = false): string {
           v-html="DOMPurify.sanitize(getLvIcon(userInfo?.level_info?.current_level, userInfo?.is_senior_member))"
         />
       </template>
-    </a>
+    </ALink>
 
     <div grid="~ cols-3 gap-2" mb-2>
-      <a
+      <ALink
         class="channel-info-item"
         :href="`https://space.bilibili.com/${mid}/fans/follow`"
-        :target="isHomePage() ? '_blank' : '_self'"
         :title="`${userStat.following}`"
       >
         <div class="num">
           {{ userStat.following ? numFormatter(userStat.following) : '0' }}
         </div>
         <div>{{ $t('topbar.user_dropdown.following') }}</div>
-      </a>
-      <a
+      </ALink>
+      <ALink
         class="channel-info-item"
         :href="`https://space.bilibili.com/${mid}/fans/fans`"
-        :target="isHomePage() ? '_blank' : '_self'"
         :title="`${userStat.follower}`"
       >
         <div class="num">
           {{ userStat.follower ? numFormatter(userStat.follower) : '0' }}
         </div>
         <div>{{ $t('topbar.user_dropdown.followers') }}</div>
-      </a>
-      <a
+      </ALink>
+      <ALink
         class="channel-info-item"
         :href="`https://space.bilibili.com/${mid}/dynamic`"
-        :target="isHomePage() ? '_blank' : '_self'"
         :title="`${userStat.dynamic_count}`"
       >
         <div class="num">
@@ -228,7 +227,7 @@ function getLvIcon(level: number, isSigma: boolean = false): string {
           }}
         </div>
         <div>{{ $t('topbar.user_dropdown.posts') }}</div>
-      </a>
+      </ALink>
     </div>
 
     <div
diff --git a/src/components/TopBar/components/WatchLaterPop.vue b/src/components/TopBar/components/WatchLaterPop.vue
index 350afa0e..d9f54283 100644
--- a/src/components/TopBar/components/WatchLaterPop.vue
+++ b/src/components/TopBar/components/WatchLaterPop.vue
@@ -9,6 +9,8 @@ import type { List as VideoItem, WatchLaterResult } from '~/models/video/watchLa
 import { calcCurrentTime } from '~/utils/dataFormatter'
 import { isHomePage, removeHttpFromUrl } from '~/utils/main'
 
+import ALink from './ALink.vue'
+
 const api = useApiClient()
 const watchLaterList = reactive<VideoItem[]>([])
 const isLoading = ref<boolean>()
@@ -79,18 +81,18 @@ function getAllWatchLaterList() {
       </div>
 
       <div flex="~ gap-4">
-        <a
-          :href="playAllUrl" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+        <ALink
+          :href="playAllUrl" rel="noopener noreferrer"
           flex="~" items="center"
         >
           <span text="sm">{{ $t('common.play_all') }}</span>
-        </a>
-        <a
-          :href="viewAllUrl" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+        </ALink>
+        <ALink
+          :href="viewAllUrl" rel="noopener noreferrer"
           flex="~" items="center"
         >
           <span text="sm">{{ $t('common.view_all') }}</span>
-        </a>
+        </ALink>
       </div>
     </header>
 
@@ -126,10 +128,10 @@ function getAllWatchLaterList() {
         <div v-if="!isLoading && watchLaterList.length > 0" min-h="50px" />
 
         <TransitionGroup name="list">
-          <a
+          <ALink
             v-for="item in watchLaterList"
             :key="item.aid"
-            :href="getWatchLaterUrl(item.bvid)" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+            :href="getWatchLaterUrl(item.bvid)" rel="noopener noreferrer"
             m="last:b-4" p="2"
             rounded="$bew-radius"
             hover:bg="$bew-fill-2"
@@ -179,7 +181,6 @@ function getAllWatchLaterList() {
                     (item.progress / item.duration) * 100
                   "
                 />
-
               </div>
 
               <!-- Description -->
@@ -194,11 +195,10 @@ function getAllWatchLaterList() {
                 </h3>
                 <div text="$bew-text-2 sm" m="t-4" flex="~" align="items-center">
                   {{ item.owner.name }}
-
                 </div>
               </div>
             </section>
-          </a>
+          </ALink>
         </TransitionGroup>
 
         <!-- loading -->
diff --git a/src/components/TopBar/oldTopBarComponents/OldUserPanelPop.vue b/src/components/TopBar/oldTopBarComponents/OldUserPanelPop.vue
index bad0a8cf..31a2d413 100644
--- a/src/components/TopBar/oldTopBarComponents/OldUserPanelPop.vue
+++ b/src/components/TopBar/oldTopBarComponents/OldUserPanelPop.vue
@@ -8,6 +8,7 @@ import { numFormatter } from '~/utils/dataFormatter'
 import { LV0_ICON, LV1_ICON, LV2_ICON, LV3_ICON, LV4_ICON, LV5_ICON, LV6_ICON, LV6_LIGHTNING_ICON } from '~/utils/lvIcons'
 import { getCSRF, getUserID, isHomePage } from '~/utils/main'
 
+import ALink from '../components/ALink.vue'
 import type { UserInfo, UserStat } from '../types'
 
 const props = defineProps<{
@@ -202,32 +203,29 @@ function getLvIcon(level: number, isSigma: boolean = false): string {
     </a>
 
     <div grid="~ cols-3 gap-2" mb-2>
-      <a
+      <ALink
         class="channel-info-item"
         :href="`https://space.bilibili.com/${mid}/fans/follow`"
-        :target="isHomePage() ? '_blank' : '_self'"
         :title="`${userStat.following}`"
       >
         <div class="num">
           {{ userStat.following ? numFormatter(userStat.following) : '0' }}
         </div>
         <div>{{ $t('topbar.user_dropdown.following') }}</div>
-      </a>
-      <a
+      </ALink>
+      <ALink
         class="channel-info-item"
         :href="`https://space.bilibili.com/${mid}/fans/fans`"
-        :target="isHomePage() ? '_blank' : '_self'"
         :title="`${userStat.follower}`"
       >
         <div class="num">
           {{ userStat.follower ? numFormatter(userStat.follower) : '0' }}
         </div>
         <div>{{ $t('topbar.user_dropdown.followers') }}</div>
-      </a>
-      <a
+      </ALink>
+      <ALink
         class="channel-info-item"
         :href="`https://space.bilibili.com/${mid}/dynamic`"
-        :target="isHomePage() ? '_blank' : '_self'"
         :title="`${userStat.dynamic_count}`"
       >
         <div class="num">
@@ -236,7 +234,7 @@ function getLvIcon(level: number, isSigma: boolean = false): string {
           }}
         </div>
         <div>{{ $t('topbar.user_dropdown.posts') }}</div>
-      </a>
+      </ALink>
     </div>
 
     <div
diff --git a/src/logic/storage.ts b/src/logic/storage.ts
index 5bdddc4b..b9809305 100644
--- a/src/logic/storage.ts
+++ b/src/logic/storage.ts
@@ -16,12 +16,15 @@ export interface Settings {
   enableVideoPreview: boolean
   enableVideoCtrlBarOnVideoCard: boolean
   hoverVideoCardDelayed: boolean
-  useOldTopBar: boolean
-  autoHideTopBar: boolean
-  topBarIconBadges: 'number' | 'dot' | 'none'
   blockAds: boolean
   disableFrostedGlass: boolean
   reduceFrostedGlassBlur: boolean
+
+  // Desktop & Dock
+  useOldTopBar: boolean
+  topBarLinkOpenMode: 'currentTab' | 'currentTabIfNotHomepage' | 'newTab'
+  autoHideTopBar: boolean
+  topBarIconBadges: 'number' | 'dot' | 'none'
   dockPosition: 'left' | 'right' | 'bottom'
   autoHideDock: boolean
   dockItemVisibilityList: { page: AppPage, visible: boolean }[]
@@ -82,14 +85,17 @@ export const settings = useStorageLocal('settings', ref<Settings>({
   enableVideoPreview: true,
   enableVideoCtrlBarOnVideoCard: false,
   hoverVideoCardDelayed: false,
+  blockAds: false,
+  disableFrostedGlass: true,
+  reduceFrostedGlassBlur: false,
+
+  // Desktop & Dock
   useOldTopBar: false,
+  topBarLinkOpenMode: 'currentTabIfNotHomepage',
   autoHideTopBar: false,
   topBarIconBadges: 'number',
   dockPosition: 'right',
   autoHideDock: false,
-  blockAds: false,
-  disableFrostedGlass: true,
-  reduceFrostedGlassBlur: false,
   dockItemVisibilityList: [],
   disableLightDarkModeSwitcherOnDock: false,
   moveBackToTopOrRefreshButtonToDock: true,