From 42196d787796aacb0ef3932f1849adf2ba8a8dd5 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Thu, 9 Feb 2023 00:08:03 +0800
Subject: [PATCH] style: bug fixes

---
 src/components/BewSelect.vue                 | 13 ++-
 src/components/Topbar/Topbar.vue             | 22 ++---
 src/components/Topbar/TopbarHistoryPop.vue   |  1 +
 src/contentScripts/views/Anime/Anime.vue     |  2 +-
 src/contentScripts/views/History/History.vue | 97 +++++++++++---------
 5 files changed, 77 insertions(+), 58 deletions(-)

diff --git a/src/components/BewSelect.vue b/src/components/BewSelect.vue
index c1a90db7..866cf054 100644
--- a/src/components/BewSelect.vue
+++ b/src/components/BewSelect.vue
@@ -1,4 +1,9 @@
 <script lang="ts">
+// TODO: refactor to composition api
+
+// import { useI18n } from 'vue-i18n'
+// const { locale } = useI18n()
+
 interface OptionType {
   value: string
   label: string
@@ -16,13 +21,18 @@ export default defineComponent({
       showOptions: false as boolean,
     }
   },
+  // watch: {
+  //   locale(newValue) {
+  //     console.log(newValue)
+  //     this.$forceUpdate()
+  //   },
+  // },
   created() {
     if (!this.options)
       return
     this.label = `${this.options.find((item: OptionType) => item.value === this.modelValue)?.label}`
   },
   methods: {
-
     onClickOption(val: { value: string; label: string }) {
       window.removeEventListener('click', () => {})
       this.label = val.label
@@ -59,7 +69,6 @@ export default defineComponent({
       flex="~"
       justify="between"
       items="center"
-      @change="onChange"
       @click="showOptions = !showOptions"
     >
       <div
diff --git a/src/components/Topbar/Topbar.vue b/src/components/Topbar/Topbar.vue
index c4610cf9..be633676 100644
--- a/src/components/Topbar/Topbar.vue
+++ b/src/components/Topbar/Topbar.vue
@@ -227,7 +227,7 @@ function getNewMomentsCount() {
     <div class="right-side">
       <div v-if="!isLogin" class="right-side-item">
         <a href="https://passport.bilibili.com/login" class="login">
-          <ic:outline-account-circle class="text-base mr-2" />{{
+          <ic:outline-account-circle class="text-xl mr-2" />{{
             $t('topbar.sign_in')
           }}
         </a>
@@ -529,7 +529,7 @@ function getNewMomentsCount() {
   }
 
   .right-side-item {
-    --at-apply: relative text-$bew-text-1 mx-2 last:mr-0;
+    --at-apply: relative text-$bew-text-1 mx-2;
 
     &:not(.avatar) {
       a {
@@ -538,7 +538,7 @@ function getNewMomentsCount() {
       }
     }
 
-    &:not(.avatar):not(.upload) a {
+    &:not(.avatar):not(.upload) a:not(.login) {
       --un-drop-shadow: drop-shadow(0 0 6px white);
       --at-apply:dark:filter dark-hover:bg-white dark-hover:text-black
         hover:bg-$bew-fill-2;
@@ -551,18 +551,14 @@ function getNewMomentsCount() {
     }
   }
 
-  // .right-side-item:not(#avatar) {
-  //   a {
-  //     --un-drop-shadow-color: var(--bew-theme-color-60);
-  //     --at-apply: text-xl flex items-center p-2 drop-shadow-lg;
-  //   }
-  // }
-
-  .login {
+  .right-side-item .login {
+    --un-drop-shadow: drop-shadow(0 0 6px var(--bew-theme-color));
     --at-apply: rounded-full
-      important:text-$bew-theme-color important:px-4 mx-1 border-1
+      important:text-$bew-theme-color important:px-4
+      hover:important-bg-$bew-theme-color hover:important-text-white
       flex items-center justify-center important:text-base w-120px
-      border-solid border-$bew-theme-color;
+      border-solid border-$bew-theme-color border-2
+      important:dark:filter;
   }
 
   .avatar {
diff --git a/src/components/Topbar/TopbarHistoryPop.vue b/src/components/Topbar/TopbarHistoryPop.vue
index 895bda2a..f7930f0c 100644
--- a/src/components/Topbar/TopbarHistoryPop.vue
+++ b/src/components/Topbar/TopbarHistoryPop.vue
@@ -257,6 +257,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
           class="group"
           transition="duration"
           duration-300
+          block
         >
           <section flex="~ gap-4" item-start>
             <!-- Video cover, live cover, ariticle cover -->
diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index de4c9873..4c0c56de 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -205,7 +205,6 @@ function getPopularAnimeList() {
               <a
                 rounded="$bew-radius"
                 aspect="12/16"
-                overflow-hidden
                 mb-4
                 bg="$bew-fill-3"
                 :href="item.url"
@@ -222,6 +221,7 @@ function getPopularAnimeList() {
                   flex
                   items-end
                   bg="gradient-to-b gradient-from-transparent gradient-to-[rgba(0,0,0,.6)]"
+                  rounded-b="$bew-radius"
                 >
                   {{ item.rank }}
                 </div>
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 0de7771f..351ffbba 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -37,7 +37,10 @@ function getHistoryList() {
     .sendMessage({
       contentScriptQuery: 'getHistoryList',
       type: 'all',
-      viewAt: historyList.length > 0 ? historyList[historyList.length - 1].view_at : 0,
+      viewAt:
+        historyList.length > 0
+          ? historyList[historyList.length - 1].view_at
+          : 0,
     })
     .then((res) => {
       if (res.code === 0) {
@@ -86,54 +89,55 @@ function getHistoryUrl(item: HistoryItem) {
         :key="historyItem.kid"
         :href="getHistoryUrl(historyItem)"
         target="_blank"
-        hover:bg="$bew-fill-2"
         rounded="$bew-radius"
+        block
         p="2"
-        m="first:t-50px last:b-4"
+        m="last:b-4"
         class="group"
-        transition="duration"
+        hover:bg="$bew-fill-2"
         duration-300
+        overflow-hidden
       >
         <section flex="~ gap-4" item-start>
-          <!-- Video cover, live cover, ariticle cover -->
+
+          <!-- Video -->
           <div
-            bg="$bew-fill-1"
+            pos="relative" bg="$bew-fill-5"
             w="300px"
             flex="shrink-0"
-            border="rounded-$bew-radius-half"
-            overflow="hidden"
+            rounded="$bew-radius"
+            overflow-hidden
           >
-            <!-- Video -->
-
-            <div pos="relative">
-              <img
-                w="300px"
-                class="aspect-video"
-                :src="`${removeHttpFromUrl(historyItem.cover)}@672w_378h_1c`"
-                :alt="historyItem.title"
-                bg="contain"
-              >
-              <div
-                pos="absolute bottom-0 right-0"
-                bg="black opacity-60"
-                m="1"
-                p="x-2 y-1"
-                text="white xs"
-                border="rounded-full"
-              >
-                <!--  When progress = -1 means that the user watched the full video -->
-                {{
-                  `${historyItem.progress === -1 ? calcCurrentTime(historyItem.duration) : calcCurrentTime(historyItem.progress)} /
+            <img
+              w="300px"
+              class="aspect-video"
+              :src="`${removeHttpFromUrl(historyItem.cover)}@672w_378h_1c`"
+              :alt="historyItem.title"
+              bg="contain"
+            >
+            <div
+              pos="absolute bottom-0 right-0"
+              bg="black opacity-60"
+              m="2"
+              p="x-2 y-1"
+              text="white xs"
+              rounded-8
+            >
+              <!--  When progress = -1 means that the user watched the full video -->
+              {{
+                `${
+                  historyItem.progress === -1
+                    ? calcCurrentTime(historyItem.duration)
+                    : calcCurrentTime(historyItem.progress)
+                } /
                     ${calcCurrentTime(historyItem.duration)}`
-                }}
-              </div>
+              }}
+            </div>
+            <div w-full pos="absolute bottom-0" bg="white opacity-60">
+              <Progress
+                :percentage="(historyItem.progress / historyItem.duration) * 100"
+              />
             </div>
-            <Progress
-              :percentage="
-                (historyItem.progress / historyItem.duration) * 100
-              "
-            />
-
           </div>
 
           <!-- Description -->
@@ -141,7 +145,7 @@ function getHistoryUrl(item: HistoryItem) {
             <h3
               class="keep-two-lines"
               overflow="hidden"
-              text="overflow-ellipsis"
+              text="lg overflow-ellipsis"
             >
               {{ historyItem.title }}
             </h3>
@@ -157,10 +161,8 @@ function getHistoryUrl(item: HistoryItem) {
             </div>
             <p text="$bew-text-2 sm">
               {{
-                useDateFormat(
-                  historyItem.view_at * 1000,
-                  'YYYY-MM-DD HH:mm:ss',
-                ).value
+                useDateFormat(historyItem.view_at * 1000, 'YYYY-MM-DD HH:mm:ss')
+                  .value
               }}
             </p>
           </div>
@@ -171,3 +173,14 @@ function getHistoryUrl(item: HistoryItem) {
     <loading v-if="isLoading && historyList.length !== 0" m="-t-4" />
   </div>
 </template>
+
+<style lang="scss" scoped>
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.3s ease;
+}
+.list-enter-from,
+.list-leave-to {
+  --at-apply: opacity-0 transform translate-y-2 transform-gpu;
+}
+</style>