feat(top-bar): add a setting to control link open mode

2025-04-14 13:15:29 +00:00 · 2024-09-01 04:37:27 +08:00
parent d14aa75a89
commit d534adc0f2
14 changed files with 177 additions and 126 deletions
--- 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>
--- 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
--- 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="{
--- a/src/components/TopBar/components/ALink.vue
+++ 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>
--- 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>
--- 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 -->
--- 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 -->
--- 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 -->
--- 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>
--- 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>
--- 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
--- 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 -->
--- 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
--- 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,