From a43c2237853575c7a79c667d3c26306e47ef59b4 Mon Sep 17 00:00:00 2001
From: hakadao <a578457889743@gmail.com>
Date: Sun, 2 Jun 2024 17:47:36 +0800
Subject: [PATCH] refactor(LongCoverCard):  update props && update styles

---
 .../LongCoverCard/LongCoverCard.vue           | 289 ++++++++++--------
 .../LongCoverCard/LongCoverCardSkeleton.vue   |   1 +
 src/contentScripts/views/Anime/Anime.vue      |  78 +++--
 .../views/Home/components/Ranking.vue         |  24 +-
 4 files changed, 226 insertions(+), 166 deletions(-)

diff --git a/src/components/LongCoverCard/LongCoverCard.vue b/src/components/LongCoverCard/LongCoverCard.vue
index 4c69b7ce..c102f186 100644
--- a/src/components/LongCoverCard/LongCoverCard.vue
+++ b/src/components/LongCoverCard/LongCoverCard.vue
@@ -1,153 +1,192 @@
 <script setup lang="ts">
+import { useDark } from '~/composables/useDark'
 import { numFormatter } from '~/utils/dataFormatter'
 import { removeHttpFromUrl } from '~/utils/main'
 
+import LongCoverCardSkeleton from './LongCoverCardSkeleton.vue'
+
 defineProps<{
+  skeleton?: boolean
+  bangumi: Bangumi
+  horizontal?: boolean
+}>()
+
+interface Bangumi {
   url: string
   cover: string
   coverHover?: string
   tags?: string[]
   title: string
   desc: string
+  evaluate?: string
   capsuleText?: string
   rank?: number
   view?: number
   follow?: number
-  horizontal?: boolean
-}>()
+  badge?: {
+    text: string
+    bgColor: string
+    bgColorDark: string
+  }
+}
+
+const { isDark } = useDark()
 </script>
 
 <template>
-  <a
-    class="group"
-    :style="{
-      display: horizontal ? 'flex' : 'block',
-    }"
-    :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 -->
-    <div
-      :style="{ width: horizontal ? '170px' : '100%' }"
-      tabindex="-1" block
-      rounded="$bew-radius" w-full bg="$bew-fill-4" relative shrink-0
+  <div mb-6>
+    <a
+      v-if="!skeleton && bangumi"
+      class="group"
+      :style="{
+        display: horizontal ? 'flex' : 'block',
+      }"
+      :href="bangumi.url" target="_blank" rel="noopener noreferrer"
+      gap-4 hover:bg="$bew-fill-2" hover:ring="8 $bew-fill-2"
+      content-visibility-auto intrinsic-size-400px
+      transition="all ease-in-out 300"
+      rounded="$bew-radius" h-fit
     >
-      <div aspect="12/16" overflow-hidden rounded="$bew-radius">
-        <div
-          v-if="rank"
-          w-full
-          pos="absolute bottom-0" z-1
-          text="white 7xl shadow"
-          p-2 fw-bold h-150px flex items-end
-          bg="gradient-to-b gradient-from-transparent gradient-to-[rgba(0,0,0,.6)]"
-          rounded-b="$bew-radius"
-          :style="{
-            '--un-text-shadow': rank <= 3 ? '4px 4px 0 var(--bew-theme-color), 6px 6px 0 var(--bew-theme-color-60)' : '',
-          }"
-        >
-          {{ rank }}
-        </div>
-
-        <div
-          overflow-hidden
-          rounded="$bew-radius"
-          aspect="12/16"
-          pos="relative"
-          bg="$bew-fill-3"
-        >
-
-          <!-- anime genres -->
-          <!-- <div
-          v-if="tags && tags?.length > 0"
-          pos="absolute bottom-0" w-full h-180px flex items-end z-1
-          opacity="0 group-hover:100"
-          transform="~ translate-y-4 group-hover:translate-y-0"
-          transition="all duration-300"
-          style="
-          background: linear-gradient(
-            transparent,
-            rgba(0, 0, 0, 0.6)
-          );
-        "
-        >
-          <div flex="~ wrap" gap-2 p-2>
-            <span
-              v-for="tag in tags"
-              :key="tag"
-              bg="white opacity-30"
-              text="white sm"
-              leading-none
-              p="x-2 y-1"
-              rounded="$bew-radius-half"
-              shrink-0
-            >{{ tag }}</span>
+      <!-- Cover -->
+      <div
+        :style="{ width: horizontal ? '170px' : '100%' }"
+        tabindex="-1" block
+        rounded="$bew-radius" w-full bg="$bew-fill-4" relative shrink-0
+      >
+        <div aspect="12/16" overflow-hidden rounded="$bew-radius">
+          <!-- badge -->
+          <div
+            v-if="bangumi.badge"
+            :style="{
+              backgroundColor: isDark ? bangumi.badge.bgColorDark : bangumi.badge.bgColor,
+            }"
+            pos="absolute top-0 right-0"
+            p="x-2 y-1" m-1 rounded="$bew-radius"
+            opacity-100 group-hover:opacity-0 duration-300
+            text="sm white" z-1
+          >
+            {{ bangumi.badge.text }}
           </div>
-        </div> -->
 
-          <img
-            :src="`${removeHttpFromUrl(cover)}@466w_622h.webp`"
-            :alt="title"
-            rounded="$bew-radius" aspect="12/16" max-w-full w-full
+          <!-- rank -->
+          <div
+            v-if="bangumi.rank"
+            w-full
+            pos="absolute bottom-0" z-1
+            text="white 7xl shadow"
+            p-2 fw-bold h-150px flex items-end
+            bg="gradient-to-b gradient-from-transparent gradient-to-[rgba(0,0,0,.6)]"
+            rounded-b="$bew-radius"
+            :style="{
+              '--un-text-shadow': bangumi.rank <= 3 ? '4px 4px 0 var(--bew-theme-color), 6px 6px 0 var(--bew-theme-color-60)' : '',
+            }"
+          >
+            {{ bangumi.rank }}
+          </div>
+
+          <div
+            overflow-hidden
+            rounded="$bew-radius"
+            aspect="12/16"
+            pos="relative"
           >
 
-        <!-- image after hovering -->
-        <!-- <div
-          v-if="coverHover"
-          w-full
-          rounded="$bew-radius"
-          aspect="12/16"
-          transform="~ scale-120 group-hover:scale-100"
-          transition="all duration-1000"
-          bg="cover center"
-          pos="absolute top-0 left-0"
-          :style="{
-            backgroundImage: `url(${removeHttpFromUrl(
-              coverHover || cover,
-            )}@672w_378h_1c.webp)`,
-          }"
-          style="
-          transition-timing-function: cubic-bezier(
-            0.22,
-            0.61,
-            0.36,
-            1
-          );
-        "
-        /> -->
+            <!-- anime genres -->
+            <div
+              v-if="bangumi.evaluate || (Array.isArray(bangumi.tags) && bangumi.tags?.length > 0)"
+              pos="absolute bottom-0" w-full h-full p-2
+              flex="~ col justify-end"
+              opacity-0 group-hover:opacity-100
+              transform="~ translate-y-4 group-hover:translate-y-0"
+              transition="all duration-300"
+              z-1
+              style="
+                background: linear-gradient(
+                  transparent,
+                  rgba(0, 0, 0, 0.8)
+                );
+              "
+            >
+              <div mb-4 text="white group-hover:shadow-[0_0_4px_rgba(0,0,0,1)]">{{ bangumi.evaluate }}</div>
+              <template v-if="Array.isArray(bangumi.tags) && bangumi.tags?.length > 0">
+                <div flex="~ wrap" gap-2>
+                  <span
+                    v-for="tag in bangumi.tags"
+                    :key="tag"
+                    bg="white opacity-30"
+                    text="white sm"
+                    leading-none
+                    p="x-2 y-1"
+                    rounded="$bew-radius-half"
+                    shrink-0
+                  >{{ tag }}
+                  </span>
+                </div>
+              </template>
+            </div>
+
+            <img
+              :src="`${removeHttpFromUrl(bangumi.cover)}@466w_622h.webp`"
+              :alt="bangumi.title"
+              rounded="$bew-radius" aspect="12/16" max-w-full w-full
+            >
+
+            <!-- image after hovering -->
+            <div
+              v-if="bangumi.coverHover"
+              w-full
+              rounded="$bew-radius"
+              aspect="12/16"
+              transform="~ scale-110 group-hover:scale-100"
+              transition="all duration-340"
+              bg="cover center"
+              pos="absolute top-0 left-0"
+              opacity-0 group-hover:opacity-100
+              :style="{
+                backgroundImage: `url(${removeHttpFromUrl(
+                  bangumi.coverHover || bangumi.cover,
+                )}@672w_378h_1c.webp)`,
+              }"
+              style="transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);"
+            />
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      flex-1
-      :style="{
-        marginTop: horizontal ? '0' : '1rem',
-      }"
-    >
-      <p un-text="lg" mb-4>
-        <a
-          :href="url" target="_blank" rel="noopener noreferrer"
-          class="keep-two-lines"
-          :title="title"
-        >
-          {{ title }}
-        </a>
-      </p>
-      <p v-if="view || follow" text="$bew-text-2" mb-2>
-        <span v-if="view" mr-4>{{ $t('common.view', { count: numFormatter(view) }, view) }}</span>
-        <span v-if="follow">{{ $t('common.anime_follow_count', { count: numFormatter(follow) }, follow) }}</span>
-      </p>
-      <div text="$bew-text-2" flex flex-wrap gap-2 items-center>
-        <div
-          v-if="capsuleText"
-          text="$bew-theme-color" bg="$bew-theme-color-20"
-          p="x-3" h-27px lh-27px rounded-4
-        >
-          {{ capsuleText }}
+      <div
+        flex-1
+        :style="{
+          marginTop: horizontal ? '0' : '1rem',
+        }"
+      >
+        <p un-text="lg" mb-4>
+          <a
+            :href="bangumi.url" target="_blank" rel="noopener noreferrer"
+            class="keep-two-lines"
+            :title="bangumi.title"
+          >
+            {{ bangumi.title }}
+          </a>
+        </p>
+        <p v-if="bangumi.view || bangumi.follow" text="$bew-text-2" mb-2>
+          <span v-if="bangumi.view" mr-4>{{ $t('common.view', { count: numFormatter(bangumi.view) }, bangumi.view) }}</span>
+          <span v-if="bangumi.follow">{{ $t('common.anime_follow_count', { count: numFormatter(bangumi.follow) }, bangumi.follow) }}</span>
+        </p>
+        <div text="$bew-text-2" flex flex-wrap gap-2 items-center>
+          <div
+            v-if="bangumi.capsuleText"
+            text="$bew-theme-color" bg="$bew-theme-color-20"
+            p="x-3" h-27px lh-27px rounded-4
+          >
+            {{ bangumi.capsuleText }}
+          </div>
+          <span> {{ bangumi.desc }} </span>
         </div>
-        <span> {{ desc }} </span>
       </div>
-    </div>
-  </a>
+    </a>
+    <LongCoverCardSkeleton
+      v-else-if="skeleton"
+      :horizontal="horizontal"
+      important-mb-0
+    />
+  </div>
 </template>
diff --git a/src/components/LongCoverCard/LongCoverCardSkeleton.vue b/src/components/LongCoverCard/LongCoverCardSkeleton.vue
index d14970f3..8ea0c5a4 100644
--- a/src/components/LongCoverCard/LongCoverCardSkeleton.vue
+++ b/src/components/LongCoverCard/LongCoverCardSkeleton.vue
@@ -10,6 +10,7 @@ defineProps<{
       display: horizontal ? 'flex' : 'block',
     }"
     gap-4
+    mb-6
   >
     <div
       rounded="$bew-radius" aspect="12/16" overflow-hidden mb-4 bg="$bew-fill-4"
diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index f90a2caf..528973dd 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -132,10 +132,6 @@ function getPopularAnimeList() {
 <template>
   <div>
     <div>
-      <!-- <section mb-8>
-        <PopularAnimeCarousel />
-      </section> -->
-
       <!-- Your Watchlist -->
       <section v-if="getUserID()" class="anime-section">
         <div flex justify-between items-center mb-6>
@@ -161,26 +157,36 @@ function getPopularAnimeList() {
                 w="2xl:[calc(100%/6-1.5rem)] xl:[calc(100%/5-1.5rem)] lg:[calc(100%/4-1.5rem)] md:[calc(100%/3-1.5rem)] sm:[calc(100%/2-1.5rem)] [calc(100%-1.5rem)]"
                 last:w="2xl:1/6 xl:1/5 lg:1/4 md:1/3 sm:1/2 full"
                 shrink-0
-                m="r-6"
+                mr-6 important-mb-0
                 last:pr-6
               />
             </template>
             <LongCoverCard
               v-for="item in animeWatchList"
               :key="item.short_url"
-              :url="item.url"
-              :cover="item.cover"
-              :title="item.title"
-              :capsule-text="item.is_finish
-                ? $t('anime.total_episodes', { ep: item.total_count })
-                : $t('anime.update_to_n_episodes', {
-                  ep: item.formal_ep_count,
-                })"
-              :desc="item.progress !== '' ? item.progress : $t('anime.havent_seen')"
+              :bangumi="{
+                url: item.url,
+                cover: item.cover,
+                coverHover: item?.horizontal_cover_16_9,
+                title: item.title,
+                desc: item.progress !== '' ? item.progress : $t('anime.havent_seen'),
+                evaluate: item.evaluate,
+                tags: item.styles,
+                capsuleText: item.is_finish
+                  ? $t('anime.total_episodes', { ep: item.total_count })
+                  : $t('anime.update_to_n_episodes', {
+                    ep: item.formal_ep_count,
+                  }),
+                badge: {
+                  text: item.badge_info.text || '',
+                  bgColor: item.badge_info.bg_color || '',
+                  bgColorDark: item.badge_info.bg_color_night || '',
+                },
+              }"
               w="2xl:[calc(100%/6-1.5rem)] xl:[calc(100%/5-1.5rem)] lg:[calc(100%/4-1.5rem)] md:[calc(100%/3-1.5rem)] sm:[calc(100%/2-1.5rem)] [calc(100%-1.5rem)]"
               last:w="2xl:1/6 xl:1/5 lg:1/4 md:1/3 sm:1/2 full"
               shrink-0
-              m="r-6"
+              mr-6 important-mb-0
               last:pr-6
             />
           </div>
@@ -212,7 +218,7 @@ function getPopularAnimeList() {
                 w="2xl:[calc(100%/6-1.5rem)] xl:[calc(100%/5-1.5rem)] lg:[calc(100%/4-1.5rem)] md:[calc(100%/3-1.5rem)] sm:[calc(100%/2-1.5rem)] [calc(100%-1.5rem)]"
                 last:w="2xl:1/6 xl:1/5 lg:1/4 md:1/3 sm:1/2 full"
                 shrink-0
-                m="r-6"
+                mr-6 important-mb-0
                 last:pr-6
               />
             </template>
@@ -222,14 +228,21 @@ function getPopularAnimeList() {
               w="2xl:[calc(100%/6-1.5rem)] xl:[calc(100%/5-1.5rem)] lg:[calc(100%/4-1.5rem)] md:[calc(100%/3-1.5rem)] sm:[calc(100%/2-1.5rem)] [calc(100%-1.5rem)]"
               last:w="2xl:1/6 xl:1/5 lg:1/4 md:1/3 sm:1/2 full"
               shrink-0
-              m="r-6"
+              mr-6 important-mb-0
               last:pr-6
-              :url="item.url"
-              :cover="item.cover"
-              :title="item.title"
-              :desc="$t('anime.follow', { num: numFormatter(item.stat.series_follow) })"
-              :capsule-text="item.rating.replace('分', '')"
-              :rank="item.rank"
+              :bangumi="{
+                url: item.url,
+                cover: item.cover,
+                title: item.title,
+                desc: $t('anime.follow', { num: numFormatter(item.stat.series_follow) }),
+                capsuleText: item.rating.replace('分', ''),
+                rank: item.rank,
+                badge: {
+                  text: item.badge_info.text || '',
+                  bgColor: item.badge_info.bg_color || '',
+                  bgColorDark: item.badge_info.bg_color_night || '',
+                },
+              }"
             />
           </div>
         </HorizontalScrollView>
@@ -255,14 +268,16 @@ function getPopularAnimeList() {
           <LongCoverCard
             v-for="item in recommendAnimeList"
             :key="item.episode_id"
-            :url="item.link ?? ''"
-            :cover="item.cover"
-            :cover-hover="item?.hover?.img"
-            :tags="item?.hover?.text"
-            :title="item.title"
-            :desc="item.sub_title"
-            :capsule-text="item.rating"
-            mb-10
+            :bangumi="{
+              url: item.link ?? '',
+              cover: item.cover,
+              coverHover: item?.hover?.img,
+              tags: item?.hover?.text,
+              title: item.title,
+              desc: item.sub_title,
+              evaluate: item.evaluate,
+              capsuleText: item.rating,
+            }"
             @mouseenter="activatedSeasonId = item.season_id"
             @mouseleave="activatedSeasonId = 0"
           />
@@ -270,7 +285,6 @@ function getPopularAnimeList() {
           <template v-if="isLoadingRecommendAnime">
             <LongCoverCardSkeleton
               v-for="item in 30" :key="item"
-              mb-10
             />
           </template>
         </div>
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index a1c73805..05c07b4f 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -224,16 +224,22 @@ defineExpose({ initData })
         <LongCoverCard
           v-for="pgc in PgcList"
           :key="pgc.url"
-          :url="pgc.url"
-          :cover="pgc.cover"
-          :title="pgc.title"
-          :desc="pgc.new_ep.index_show"
-          :view="pgc.stat.view"
-          :follow="pgc.stat.follow"
-          :rank="pgc.rank"
-          :capsule-text="pgc.rating.replace('分', '')"
+          :bangumi="{
+            url: pgc.url,
+            cover: pgc.cover,
+            title: pgc.title,
+            desc: pgc.new_ep.index_show,
+            view: pgc.stat.view,
+            follow: pgc.stat.follow,
+            rank: pgc.rank,
+            capsuleText: pgc.rating.replace('分', ''),
+            badge: {
+              text: pgc.badge_info.text || '',
+              bgColor: pgc.badge_info.bg_color || '',
+              bgColorDark: pgc.badge_info.bg_color_night || '',
+            },
+          }"
           :horizontal="gridLayout !== 'adaptive'"
-          mb-8
         />
       </template>