From f7f7698403670839ea256cc6494e4e5daf676841 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Thu, 15 Feb 2024 02:09:44 +0800
Subject: [PATCH] refactor: #204

---
 .../LongCoverCard/LongCoverCard.vue           | 19 +++++----
 .../TopBar/components/HistoryPop.vue          | 39 +++++++++----------
 .../TopBar/components/MomentsPop.vue          | 32 +++++++--------
 src/components/VideoCard/VideoCard.vue        | 36 ++++++++---------
 .../views/Favorites/Favorites.vue             |  3 +-
 src/contentScripts/views/History/History.vue  | 28 +++++--------
 .../views/WatchLater/WatchLater.vue           | 14 +++----
 src/utils/main.ts                             |  3 +-
 8 files changed, 77 insertions(+), 97 deletions(-)

diff --git a/src/components/LongCoverCard/LongCoverCard.vue b/src/components/LongCoverCard/LongCoverCard.vue
index 5160b57b..2a711b9d 100644
--- a/src/components/LongCoverCard/LongCoverCard.vue
+++ b/src/components/LongCoverCard/LongCoverCard.vue
@@ -18,20 +18,20 @@ defineProps<{
 </script>
 
 <template>
-  <div
+  <a
+    class="group"
     :style="{
       display: horizontal ? 'flex' : 'block',
     }"
-    gap-4
-    class="group"
-    hover:bg="$bew-fill-2" hover:ring="8 $bew-fill-2"
+    :href="url" target="_blank" rel="noopener noreferrer"
+    gap-4 hover:bg="$bew-fill-2" hover:ring="8 $bew-fill-2"
     transition="all ease-in-out 300"
     rounded="$bew-radius" h-fit
   >
     <!-- Cover -->
-    <a
+    <div
       :style="{ width: horizontal ? '170px' : '100%' }"
-      :href="url" target="_blank" tabindex="-1" block
+      tabindex="-1" block
       rounded="$bew-radius" w-full bg="$bew-fill-4" relative shrink-0
     >
       <div aspect="12/16" overflow-hidden rounded="$bew-radius">
@@ -118,7 +118,7 @@ defineProps<{
         /> -->
         </div>
       </div>
-    </a>
+    </div>
     <div
       flex-1
       :style="{
@@ -127,8 +127,7 @@ defineProps<{
     >
       <p un-text="lg" mb-4>
         <a
-          :href="url"
-          target="_blank"
+          :href="url" target="_blank" rel="noopener noreferrer"
           class="keep-two-lines"
           :title="title"
         >
@@ -150,5 +149,5 @@ defineProps<{
         <span> {{ desc }} </span>
       </div>
     </div>
-  </div>
+  </a>
 </template>
diff --git a/src/components/TopBar/components/HistoryPop.vue b/src/components/TopBar/components/HistoryPop.vue
index d33f2c3b..37caf46c 100644
--- a/src/components/TopBar/components/HistoryPop.vue
+++ b/src/components/TopBar/components/HistoryPop.vue
@@ -5,7 +5,7 @@ import { onMounted, reactive, ref, watch } from 'vue'
 import { useDateFormat } from '@vueuse/core'
 import type { HistoryItem } from '../types'
 import { HistoryType } from '../types'
-import { removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
+import { isHomePage, removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 
 const { t } = useI18n()
@@ -199,7 +199,10 @@ function getHistoryList(type: HistoryType, viewAt = 0 as number) {
           {{ tab.name }}
         </div>
       </div>
-      <a href="https://www.bilibili.com/account/history" target="_blank" flex="~" items="center">
+      <a
+        href="https://www.bilibili.com/account/history" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+        flex="~ items-center"
+      >
         <span text="sm">{{ $t('common.view_all') }}</span>
       </a>
     </header>
@@ -208,7 +211,7 @@ function getHistoryList(type: HistoryType, viewAt = 0 as number) {
     <main overflow-hidden rounded="$bew-radius">
       <div
         ref="historysWrap"
-        flex="~ col gap-4"
+        flex="~ col gap-2"
         h="430px"
         overflow="y-scroll"
         p="x-4"
@@ -216,36 +219,32 @@ function getHistoryList(type: HistoryType, viewAt = 0 as number) {
         <!-- loading -->
         <Loading
           v-if="isLoading && historys.length === 0"
-          pos="absolute left-0"
-          bg="$bew-content-1"
-          z="1"
-          w="full"
           h="full"
           flex="~"
           items="center"
-          border="rounded-$bew-radius"
         />
 
         <!-- empty -->
-        <Empty v-if="!isLoading && historys.length === 0" w="full" h="full" />
+        <Empty
+          v-if="!isLoading && historys.length === 0"
+          pos="absolute top-0 left-0"
+          bg="$bew-content-1"
+          z="0" w="full" h="full"
+          flex="~ items-center"
+        />
 
         <!-- historys -->
-        <transition-group name="list">
+        <TransitionGroup name="list">
           <a
             v-for="historyItem in historys"
             :key="historyItem.kid"
-            :href="getHistoryUrl(historyItem)"
-            target="_blank"
-            hover:bg="$bew-fill-2"
+            :href="getHistoryUrl(historyItem)" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+            m="last:b-4 first:t-50px" p="2"
             rounded="$bew-radius"
-            p="2"
-            m="first:t-50px last:b-4"
-            class="group"
-            transition="duration"
+            hover:bg="$bew-fill-2"
             duration-300
-            block
           >
-            <section flex="~ gap-4" item-start>
+            <section flex="~ gap-4 item-start">
               <!-- Video cover, live cover, ariticle cover -->
               <div
                 bg="$bew-fill-1"
@@ -381,7 +380,7 @@ function getHistoryList(type: HistoryType, viewAt = 0 as number) {
               </div>
             </section>
           </a>
-        </transition-group>
+        </TransitionGroup>
 
         <!-- loading -->
         <Transition name="fade">
diff --git a/src/components/TopBar/components/MomentsPop.vue b/src/components/TopBar/components/MomentsPop.vue
index 42128575..fc2922bd 100644
--- a/src/components/TopBar/components/MomentsPop.vue
+++ b/src/components/TopBar/components/MomentsPop.vue
@@ -5,7 +5,7 @@ import { onMounted, reactive, ref, watch } from 'vue'
 import { isNewArticle, isNewVideo, setLastestOffsetID } from '../notify'
 import { MomentType } from '../types'
 import type { MomentItem } from '../types'
-import { getCSRF, getUserID, smoothScrollToTop } from '~/utils/main'
+import { getCSRF, getUserID, isHomePage, smoothScrollToTop } from '~/utils/main'
 import { calcTimeSince } from '~/utils/dataFormatter'
 
 const { t } = useI18n()
@@ -308,7 +308,10 @@ function toggleWatchLater(aid: number) {
           {{ tab.name }}
         </div>
       </div>
-      <a href="https://t.bilibili.com/" target="_blank" flex="~" items="center">
+      <a
+        href="https://t.bilibili.com/" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+        flex="~ items-center"
+      >
         <span text="sm">{{ $t('common.view_all') }}</span>
       </a>
     </header>
@@ -317,7 +320,7 @@ function toggleWatchLater(aid: number) {
     <main overflow-hidden rounded="$bew-radius">
       <div ref="momentsWrap" h="430px" overflow="y-scroll x-hidden" p="x-4">
         <!-- loading -->
-        <loading
+        <Loading
           v-if="isLoading && moments.length === 0"
           h="full"
           flex="~"
@@ -329,12 +332,8 @@ function toggleWatchLater(aid: number) {
           v-if="!isLoading && moments.length === 0"
           pos="absolute top-0 left-0"
           bg="$bew-content-1"
-          z="0"
-          w="full"
-          h="full"
-          flex="~"
-          items="center"
-          border="rounded-$bew-radius"
+          z="0" w="full" h="full"
+          flex="~ items-center"
         />
 
         <!-- moments -->
@@ -342,17 +341,12 @@ function toggleWatchLater(aid: number) {
           <a
             v-for="(moment, index) in moments"
             :key="index"
-            :href="moment.url"
-            target="_blank"
-            flex="~"
-            justify="between"
-            m="b-4"
-            first:m="t-16"
-            p="2"
+            :href="moment.url" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+            flex="~ justify-between"
+            m="b-2 first:t-50px" p="2"
             rounded="$bew-radius"
             hover:bg="$bew-fill-2"
-            transition="all duration-300"
-            cursor="pointer"
+            duration-300
             pos="relative"
           >
             <!-- new moment dot -->
@@ -373,7 +367,7 @@ function toggleWatchLater(aid: number) {
                   ? `https://space.bilibili.com/${moment.uid}`
                   : moment.url
               "
-              target="_blank"
+              :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
             >
               <img
                 :src="`${moment.face}@50w_50h_1c`"
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index bdfdbb4f..d26ab464 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -195,7 +195,10 @@ function handelMouseLeave() {
       hover:bg="$bew-fill-2" hover:ring="8 $bew-fill-2"
       :style="{ contentVisibility }"
     >
-      <div :style="{ display: horizontal ? 'flex' : 'block', gap: horizontal ? '1.5rem' : '0' }">
+      <a
+        :style="{ display: horizontal ? 'flex' : 'block', gap: horizontal ? '1.5rem' : '0' }"
+        :href="videoUrl" target="_blank" rel="noopener noreferrer"
+      >
         <!-- Cover -->
         <div
           :style="{ width: horizontal ? '300px' : '100%' }"
@@ -279,7 +282,7 @@ function handelMouseLeave() {
             class="opacity-0 group-hover/cover:opacity-100"
             transform="scale-70 group-hover/cover:scale-100"
             duration-300
-            @click.stop="toggleWatchLater"
+            @click.prevent="toggleWatchLater"
           >
             <Tooltip v-if="!isInWatchLater" :content="$t('common.save_to_watch_later')" placement="bottom" type="dark">
               <mingcute:carplay-line />
@@ -290,15 +293,13 @@ function handelMouseLeave() {
           </button>
 
           <!-- Video cover -->
-          <a :href="videoUrl" target="_blank">
-            <img
-              :src="`${removeHttpFromUrl(cover)}@672w_378h_1c`"
-              loading="lazy"
-              w="full" max-w-full align-middle aspect-video
-              bg="cover center"
-              rounded="$bew-radius"
-            >
-          </a>
+          <img
+            :src="`${removeHttpFromUrl(cover)}@672w_378h_1c`"
+            loading="lazy"
+            w="full" max-w-full align-middle aspect-video
+            bg="cover center"
+            rounded="$bew-radius"
+          >
         </div>
 
         <!-- Other Information -->
@@ -314,10 +315,8 @@ function handelMouseLeave() {
             <a
               v-if="authorFace"
               m="r-4" w="40px" h="40px" rounded="1/2" overflow="hidden"
-              object="center cover"
-              bg="$bew-fill-4" cursor="pointer"
-              style="--un-shadow: 0 0 0 2px var(--bew-theme-color)"
-              :href="`//space.bilibili.com/${mid}`" target="_blank"
+              object="center cover" bg="$bew-fill-4" cursor="pointer"
+              :href="`//space.bilibili.com/${mid}`" target="_blank" rel="noopener noreferrer"
               @click.stop=""
             >
               <img
@@ -335,8 +334,9 @@ function handelMouseLeave() {
                 text="lg overflow-ellipsis $bew-text-1"
                 cursor="pointer"
               >
-                <a :href="videoUrl" target="_blank" :title="title">
-                  {{ title }}</a>
+                <a :href="videoUrl" target="_blank" :title="title" rel="noopener noreferrer">
+                  {{ title }}
+                </a>
               </h3>
 
               <!-- <div
@@ -466,7 +466,7 @@ function handelMouseLeave() {
             </div>
           </div>
         </div>
-      </div>
+      </a>
     </div>
 
     <!-- skeleton -->
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index 476c230d..b1f43be7 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -195,7 +195,6 @@ function handleUnfavorite(favoriteResource: FavoriteResource) {
           <TransitionGroup name="list">
             <VideoCard
               v-for="item in favoriteResources" :id="item.id" :key="item.id"
-              :item="item"
               :duration="item.duration"
               :title="item.title"
               :cover="item.cover"
@@ -214,7 +213,7 @@ function handleUnfavorite(favoriteResource: FavoriteResource) {
                   rounded="$bew-radius"
                   text="!white xl"
                   bg="black opacity-60 hover:$bew-error-color-80"
-                  @click.stop="handleUnfavorite(item)"
+                  @click.prevent="handleUnfavorite(item)"
                 >
                   <Tooltip :content="$t('favorites.unfavorite')" placement="bottom" type="dark">
                     <ic-baseline-clear />
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 15b25863..043ce6c7 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -261,12 +261,12 @@ function jumpToLoginPage() {
       <transition-group name="list">
         <a
           v-for="(historyItem, index) in historyList"
-          :key="historyItem.kid"
+          :key="historyItem.kid" :href="getHistoryUrl(historyItem)"
+          target="_blank"
           block
           class="group"
           flex
           cursor-pointer
-          @click="openLinkToNewTab(`${getHistoryUrl(historyItem)}`)"
         >
           <!-- time slot -->
           <div
@@ -396,24 +396,22 @@ function jumpToLoginPage() {
             <!-- Description -->
             <div flex justify-between w-full>
               <div flex="~ col">
-                <a :href="`${getHistoryUrl(historyItem)}`" target="_blank" @click.stop="">
+                <a
+                  :href="`${getHistoryUrl(historyItem)}`" target="_blank" rel="noopener noreferrer"
+                  :title="historyItem.show_title ? historyItem.show_title : historyItem.title"
+                >
                   <h3
                     class="keep-two-lines"
                     overflow="hidden"
                     text="lg overflow-ellipsis"
                   >
-                    {{
-                      historyItem.show_title
-                        ? historyItem.show_title
-                        : historyItem.title
-                    }}
+                    {{ historyItem.show_title ? historyItem.show_title : historyItem.title }}
                   </h3>
                 </a>
                 <a
                   un-text="$bew-text-2 sm"
                   m="t-4 b-2"
-                  flex="~"
-                  items-center
+                  flex="~ items-center"
                   cursor-pointer
                   w-fit
                   rounded="$bew-radius"
@@ -421,13 +419,7 @@ function jumpToLoginPage() {
                   hover:bg="$bew-theme-color-10"
                   duration-300
                   pr-2
-                  :href="
-                    historyItem.author_mid
-                      ? `https://space.bilibili.com/${historyItem.author_mid}`
-                      : historyItem.uri
-                  "
-                  target="_blank"
-                  @click.stop=""
+                  :href="historyItem.author_mid ? `https://space.bilibili.com/${historyItem.author_mid}` : historyItem.uri" target="_blank" rel="noopener noreferrer"
                 >
                   <img
                     :src="
@@ -472,7 +464,7 @@ function jumpToLoginPage() {
                 opacity-0 group-hover:opacity-100
                 p-2
                 duration-300
-                @click.stop="deleteHistoryItem(index, historyItem)"
+                @click.prevent="deleteHistoryItem(index, historyItem)"
               >
                 <tabler:trash />
               </button>
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index 57d516db..9a1154b6 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -117,11 +117,9 @@ function jumpToLoginPage() {
           <a
             v-for="(item, index) in watchLaterList"
             :key="item.aid"
-            block
+            :href="`https://www.bilibili.com/video/${item.bvid}`" target="_blank" rel="noopener noreferrer"
             class="group"
-            flex
-            cursor-pointer
-            @click="openLinkToNewTab(`https://www.bilibili.com/list/watchlater?bvid=${item.bvid}`)"
+            block flex cursor-pointer
           >
             <section
               rounded="$bew-radius"
@@ -197,8 +195,7 @@ function jumpToLoginPage() {
                     class="keep-two-lines"
                     overflow="hidden"
                     un-text="lg overflow-ellipsis"
-                    :href="removeHttpFromUrl(`https://www.bilibili.com/list/watchlater?bvid=${item.bvid}`)" target="_blank"
-                    @click.stop=""
+                    :href="removeHttpFromUrl(`https://www.bilibili.com/list/watchlater?bvid=${item.bvid}`)" target="_blank" rel="noopener noreferrer"
                   >
                     {{ item.title }}
                   </a>
@@ -214,8 +211,7 @@ function jumpToLoginPage() {
                     hover:bg="$bew-theme-color-10"
                     duration-300
                     pr-2
-                    :href="`//space.bilibili.com/${item.owner.mid}`" target="_blank"
-                    @click.stop=""
+                    :href="`//space.bilibili.com/${item.owner.mid}`" target="_blank" rel="noopener noreferrer"
                   >
                     <img
                       :src="removeHttpFromUrl(`${item.owner.face}@40w_40h_1c`)"
@@ -245,7 +241,7 @@ function jumpToLoginPage() {
                     opacity-0 group-hover:opacity-100
                     p-2
                     duration-300
-                    @click.stop="deleteWatchLaterItem(index, item.aid)"
+                    @click.prevent="deleteWatchLaterItem(index, item.aid)"
                   >
                     <tabler:trash />
                   </button>
diff --git a/src/utils/main.ts b/src/utils/main.ts
index 39696e40..45fd492c 100644
--- a/src/utils/main.ts
+++ b/src/utils/main.ts
@@ -8,6 +8,7 @@ export function getCookie(name: string): string {
   const parts: Array<string> = value.split(`; ${name}=`)
   if (parts.length === 2)
     return parts?.pop()?.split(';').shift() || ''
+  return ''
 }
 
 /**
@@ -43,7 +44,7 @@ export function removeHttpFromUrl(url: string): string {
 }
 
 export function openLinkToNewTab(url: string) {
-  window.open(url, '_blank')
+  window.open(url, '_blank', 'noopener noreferrer')
 }
 
 /**