update: anime page

src/contentScripts/views/Anime/Anime.vue

@@ -1,18 +1,22 @@
 <script setup lang="ts">
 // import PopularAnimeCarousel from './components/PopularAnimeCarousel.vue'
 import AnimeTimeTable from './components/AnimeTimeTable.vue'
-import type { AnimeItem } from './types'
-import { getUserID, removeHttpFromUrl } from '~/utils'
+import type { AnimeItem, PopularAnime } from './types'
+import { getUserID, numFormatter, removeHttpFromUrl } from '~/utils'
+import { LanguageType } from '~/enums/appEnums'
+import { language } from '~/logic'
 
-const recommendAnimeList = reactive<AnimeItem[]>([])
 const animeWatchList = reactive<AnimeItem[]>([])
-const cursor = ref<number>(29) // 遊標默認必須要非0，否則第一次會出現同樣的結果
+const recommendAnimeList = reactive<AnimeItem[]>([])
+const popularAnimeList = reactive<AnimeItem[]>([])
+const coursor = ref<number>(29) // 遊標默認必須要非0，否則第一次會出現同樣的結果
 const isLoading = ref<boolean>()
 const activatedSeasonId = ref<number>()
 
 onMounted(() => {
-  getRecommendAnimeList()
   getAnimeWatchList()
+  getPopularAnimeList()
+  getRecommendAnimeList()
 
   window.onscroll = () => {
     if (
@@ -59,31 +63,46 @@ function getRecommendAnimeList() {
   browser.runtime
     .sendMessage({
       contentScriptQuery: 'getRecommendAnimeList',
-      cursor: cursor.value ?? '',
+      coursor: coursor.value,
     })
     .then((response) => {
       const {
         code,
-        data: { items, coursor },
+        data: { items, coursor, has_next },
       } = response
-      if (code === 0) {
+      if (code === 0 && has_next) {
         if (recommendAnimeList.length === 0)
           Object.assign(recommendAnimeList, items[0].sub_items as AnimeItem[])
         else recommendAnimeList.push(...items[0].sub_items)
 
-        cursor.value = coursor
+        coursor.value = coursor
       }
     })
     .finally(() => {
       isLoading.value = false
     })
 }
+
+function getPopularAnimeList() {
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getPopularAnimeList',
+    })
+    .then((response) => {
+      const {
+        code,
+        result: { list },
+      } = response
+      if (code === 0)
+        Object.assign(popularAnimeList, list as PopularAnime[])
+    })
+}
 </script>
 
 <template>
   <div>
     <div>
-      <!-- <section mb-16>
+      <!-- <section mb-8>
         <PopularAnimeCarousel />
       </section> -->
 
@@ -160,6 +179,86 @@ function getRecommendAnimeList() {
         </HorizontalScrollView>
       </section>
 
+      <!-- Popular Anime -->
+      <section mb-8>
+        <div flex justify-between items-end mb-6>
+          <h3 text="3xl $bew-text-1" font="bold">
+            Popular Anime
+          </h3>
+          <a
+            href="https://www.bilibili.com/v/popular/rank/bangumi"
+            target="_blank"
+            un-text="$bew-theme-color"
+          >{{ $t('common.view_all') }}</a>
+        </div>
+
+        <HorizontalScrollView w="[calc(100%+1.5rem)]">
+          <div w-full flex>
+            <article
+              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)] [calc(100%/2-1.5rem)]"
+              last:w="2xl:1/6 xl:1/5 lg:1/4 md:1/3 1/2"
+              shrink-0
+              m="r-6"
+              last:pr-6
+            >
+              <a
+                rounded="$bew-radius"
+                aspect="12/16"
+                overflow-hidden
+                mb-4
+                bg="$bew-fill-3"
+                :href="item.url"
+                target="_blank"
+                relative
+              >
+                <div
+                  w-full
+                  pos="absolute bottom-0"
+                  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)]"
+                >
+                  {{ item.rank }}
+                </div>
+                <img
+                  :src="`${removeHttpFromUrl(item.cover)}@466w_622h.webp`"
+                  :alt="item.title"
+                  rounded="$bew-radius"
+                >
+              </a>
+              <p un-text="lg" my-4>
+                <a
+                  :href="item.url"
+                  target="_blank"
+                  class="keep-two-lines"
+                  :title="item.title"
+                >
+                  {{ item.title }}
+                </a>
+              </p>
+              <p text="$bew-text-2" mb-10>
+                <span
+                  text="$bew-theme-color"
+                  bg="$bew-theme-color-20"
+                  p="x-3 y-1"
+                  mr-2
+                  rounded-4
+                  lh-loose
+                >{{ item.rating }}
+                </span>
+                {{ numFormatter(Number(item.stat.series_follow)) }} follow
+              </p>
+            </article>
+          </div>
+        </HorizontalScrollView>
+      </section>
+
       <!-- Anime Timetable -->
       <section mb-8>
         <div flex justify-between items-end mb-6>

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

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import type { Ref } from 'vue'
 import type { AnimeTimeTableItem } from '../types'
 import { removeHttpFromUrl } from '~/utils'
 
 const animeTimeTable = reactive<AnimeTimeTableItem[]>([])
 const daysOfTheWeekList = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN']
+const animeTimeTableWrap = ref<HTMLElement>() as Ref<HTMLElement>
 
 onMounted(() => {
   getAnimeTimeTable()
@@ -24,8 +26,8 @@ function getAnimeTimeTable() {
 
 <template>
   <div>
-    <HorizontalScrollView :default-scroll-left="600">
-      <ul flex="~">
+    <HorizontalScrollView>
+      <ul ref="animeTimeTableWrap" flex="~">
         <li
           v-for="item in animeTimeTable"
           :key="item.date_ts"
@@ -108,7 +110,9 @@ function getAnimeTimeTable() {
                   shrink-0
                 >
                   <img
-                    :src="`${removeHttpFromUrl(episode.square_cover)}@300w_300h.webp`"
+                    :src="`${removeHttpFromUrl(
+                      episode.square_cover,
+                    )}@300w_300h.webp`"
                     :alt="episode.title"
                     w-18
                     aspect="square"

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

@@ -37,15 +37,19 @@ function getPopularAnimeList() {
 </script>
 
 <template>
-  <div
-    ref="bannerContent"
-    w-full
-    h-600px
-    pos="absolute top-0 left-0"
-    z="-1"
-  >
+  <div ref="bannerContent" w-full h-800px pos="absolute top-0 left-0" z="-1">
+    <!-- banner mask -->
     <div
-      :style="{ backgroundImage: `url(${activatedAnime?.ss_horizontal_cover})` }"
+      pos="absolute bottom-0 left-0"
+      w-full
+      h-300px
+      bg="gradient-to-b gradient-from-transparent gradient-to-$bew-bg"
+      z-1
+    />
+    <div
+      :style="{
+        backgroundImage: `url(${activatedAnime?.ss_horizontal_cover})`,
+      }"
       bg="cover center"
       duration-600
       w-full
@@ -53,41 +57,49 @@ function getPopularAnimeList() {
       pos="absolute"
       after:content-none
       after:pos="absolute top-0 left-0"
-      after:w-full after:h-full
-      after:backdrop-blur-xl
-      opacity-30
+      after:w-full
+      after:h-full
     />
   </div>
 
   <!-- banner -->
-  <div h-600px z-1 pos="relative" flex justify-center>
+  <div h-800px z-1 pos="relative" flex justify-center>
     <div>
-      <img
+      <!-- <img
         :src="activatedAnime?.ss_horizontal_cover.replace('https:', '')"
         pointer-events-none
-        h="400px"
-      >
-      <div text="2xl white" p-4 pos="relative" bg="black opacity-60">
+        rounded="$bew-radius"
+        h="[calc(100%-170px)]"
+      > -->
+      <!-- <div text="2xl white" p-4 pos="relative" bg="black opacity-60">
         {{ activatedAnime?.title }}
-      </div>
+      </div> -->
     </div>
   </div>
 
-  <ul w-full flex gap-6 overflow-hidden m="t--150px" z-1 relative>
-    <li
-      v-for="(item, index) in popularAnimeList"
-      :key="index"
-      flex="1"
-      flex-shrink-0
-      @mouseover="activatedAnime = item"
+  <div flex="~ justify-between" m="t--350px">
+    <ul
+      w="1/3"
+      ml-auto
+      flex
+      overflow-hidden
+      z-1
+      relative
     >
-      <img
-        :src="item.ss_horizontal_cover.replace('https:', '')"
-        rounded="$bew-radius"
+      <li
+        v-for="(item, index) in popularAnimeList"
+        :key="index"
+        pr-2
+        flex="~ 1 gap-2 shrink-0"
+        @mouseover="activatedAnime = item"
       >
-      {{ item.title }}
-    </li>
-  </ul>
+        <img :src="item.cover.replace('https:', '')">
+        <!-- <div flex items-center>
+          {{ item.title }}
+        </div> -->
+      </li>
+    </ul>
+  </div>
 </template>
 
 <style lang="scss" scoped></style>