refactor: rename AnimeCard to LongCoverCard

* refactor:  rename `AnimeCardSkeleton` to `LongCoverCardSkeleton`
* style: add hover effect to `AnimeCard`

src/contentScripts/views/Anime/Anime.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 // import PopularAnimeCarousel from './components/PopularAnimeCarousel.vue'
 import AnimeTimeTable from './components/AnimeTimeTable.vue'
-import AnimeCard from './components/AnimeCard.vue'
-import AnimeCardSkeleton from './components/AnimeCardSkeleton.vue'
 import type { AnimeItem, PopularAnime } from './types'
 import { getUserID, openLinkToNewTab } from '~/utils/main'
 import { numFormatter } from '~/utils/dataFormatter'
@@ -127,7 +125,7 @@ function getPopularAnimeList() {
         <HorizontalScrollView w="[calc(100%+1.5rem)]">
           <div w-full flex>
             <template v-if="isLoadingAnimeWatchList">
-              <AnimeCardSkeleton
+              <LongCoverCardSkeleton
                 v-for="item in 6" :key="item"
                 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"
@@ -136,7 +134,7 @@ function getPopularAnimeList() {
                 last:pr-6
               />
             </template>
-            <AnimeCard
+            <LongCoverCard
               v-for="item in animeWatchList"
               :key="item.episode_id"
               :url="item.url"
@@ -178,7 +176,7 @@ function getPopularAnimeList() {
         <HorizontalScrollView w="[calc(100%+1.5rem)]">
           <div w-full flex>
             <template v-if="isLoadingPopularAnime">
-              <AnimeCardSkeleton
+              <LongCoverCardSkeleton
                 v-for="item in 6" :key="item"
                 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"
@@ -187,7 +185,7 @@ function getPopularAnimeList() {
                 last:pr-6
               />
             </template>
-            <AnimeCard
+            <LongCoverCard
               v-for="item in popularAnimeList"
               :key="item.episode_id"
               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)]"
@@ -223,7 +221,7 @@ function getPopularAnimeList() {
           {{ $t('anime.recommended_for_you') }}
         </h3>
         <div grid="~ 2xl:cols-6 xl:cols-5 lg:cols-4 md:cols-3 sm:cols-2 cols-1 gap-6">
-          <AnimeCard
+          <LongCoverCard
             v-for="item in recommendAnimeList"
             :key="item.episode_id"
             :url="item.link"
@@ -238,7 +236,7 @@ function getPopularAnimeList() {
           />
 
           <template v-if="isLoadingRecommendAnime">
-            <AnimeCardSkeleton
+            <LongCoverCardSkeleton
               v-for="item in 30" :key="item"
             />
           </template>

src/contentScripts/views/Anime/components/AnimeCard.vue

@@ -1,125 +0,0 @@
-<script setup lang="ts">
-import { removeHttpFromUrl } from '~/utils/main'
-
-defineProps<{
-  url: string
-  cover: string
-  coverHover?: string
-  tags?: string[]
-  title: string
-  desc: string
-  capsuleText?: string
-  rank?: number
-}>()
-</script>
-
-<template>
-  <div>
-    <a
-      rounded="$bew-radius" w-full aspect="12/16" overflow-hidden mb-4 bg="$bew-fill-3" relative
-      class="group"
-      :href="url" target="_blank" tabindex="-1"
-    >
-      <div
-        v-if="rank"
-        w-full
-        pos="absolute bottom-0" z-1
-        text="white 7xl shadow-xl"
-        px-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"
-      >
-        {{ rank }}
-      </div>
-
-      <div
-        overflow-hidden
-        rounded="$bew-radius"
-        aspect="12/16"
-        mb-4
-        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>
-          </div>
-        </div> -->
-
-        <img
-          :src="`${removeHttpFromUrl(cover)}@466w_622h.webp`"
-          :alt="title"
-          rounded="$bew-radius" aspect="12/16" max-w-full w-full
-        >
-
-        <!-- 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
-          );
-        "
-        /> -->
-      </div>
-    </a>
-    <p un-text="lg" my-4>
-      <a
-        :href="url"
-        target="_blank"
-        class="keep-two-lines"
-        :title="title"
-      >
-        {{ title }}
-      </a>
-    </p>
-    <div text="$bew-text-2" mb-10 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>
-      <span> {{ desc }} </span>
-    </div>
-  </div>
-</template>

src/contentScripts/views/Anime/components/AnimeCardSkeleton.vue

@@ -1,16 +0,0 @@
-<template>
-  <div>
-    <div
-      rounded="$bew-radius" aspect="12/16" overflow-hidden mb-4 bg="$bew-fill-4"
-    />
-    <p w-full h-5 my-2 my-4 bg="$bew-fill-3" />
-    <div text="$bew-fill-2" mb-10 flex items-center>
-      <div
-        text="transparent" bg="$bew-fill-2" p="x-3 y-1" mr-2 h-27px rounded-4
-      >
-        0.0
-      </div>
-      <div w="60%" h-4 bg="$bew-fill-2" />
-    </div>
-  </div>
-</template>