update: anime page

src/background/apis/anime.ts

@@ -11,6 +11,14 @@ export const setupAnimeAPIs = () => {
         .then(data => data)
         .catch(error => console.error(error))
     }
+    else if (message.contentScriptQuery === 'getRecommendAnimeList') {
+      const url
+        = `https://api.bilibili.com/pgc/page/web/v3/feed?name=anime&coursor=${message.cursor ?? ''}`
+      return fetch(url)
+        .then(response => response.json())
+        .then(data => data)
+        .catch(error => console.error(error))
+    }
     else if (message.contentScriptQuery === 'getAnimeTimeTable') {
       const url
         = 'https://api.bilibili.com/pgc/web/timeline?types=1&before=6&after=6'

src/contentScripts/views/Anime/Anime.vue

@@ -1,7 +1,92 @@
 <script setup lang="ts">
-import PopularAnimeCarousel from './components/PopularAnimeCarousel.vue'
+// import PopularAnimeCarousel from './components/PopularAnimeCarousel.vue'
+import type { Ref } from 'vue'
+import type { RecommendAnimeItem } from './types'
+
+const recommendAnimeList = reactive<RecommendAnimeItem[]>([])
+const cursor = ref<number>()
+const animeWrap = ref<HTMLElement>() as Ref<HTMLElement>
+const isLoading = ref<boolean>()
+
+onMounted(() => {
+  getRecommendAnimeList()
+
+  if (animeWrap.value) {
+    animeWrap.value.addEventListener('scroll', () => {
+      // When you scroll to the bottom, they will automatically
+      // add the next page of data to the history list
+      if (
+        animeWrap.value.clientHeight + animeWrap.value.scrollTop
+          >= animeWrap.value.scrollHeight - 20
+        && recommendAnimeList.length > 0
+        && !isLoading.value
+      )
+        getRecommendAnimeList()
+    })
+  }
+})
+
+function getRecommendAnimeList() {
+  isLoading.value = true
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getRecommendAnimeList',
+      cursor: cursor.value ?? '',
+    })
+    .then((response) => {
+      const {
+        code,
+        data: { items, coursor },
+      } = response
+      if (code === 0) {
+        if (recommendAnimeList.length === 0) {
+          Object.assign(
+            recommendAnimeList,
+            items[0].sub_items as RecommendAnimeItem[],
+          )
+        }
+        else { recommendAnimeList.push(...items[0].sub_items) }
+        cursor.value = coursor
+      }
+    }).finally(() => { isLoading.value = false })
+}
 </script>
 
 <template>
-  <PopularAnimeCarousel />
+  <div ref="animeWrap">
+    <!-- <PopularAnimeCarousel /> -->
+    <section>
+      <h3 text="3xl $bew-text-1" font="bold" my-4>
+        Recommended for you
+      </h3>
+      <div grid="~ xl:cols-6 lg:cols-4 md:cols-3 cols-2 gap-6">
+        <a
+          v-for="item in recommendAnimeList"
+          :key="item.episode_id"
+          :href="item.link"
+          target="_blank"
+        >
+          <div
+            rounded="$bew-radius"
+            aspect="12/16"
+            overflow-hidden
+            mb-4
+            bg="$bew-fill-3"
+          >
+            <img
+              :src="`${item.cover.replace('https:', '')}@466w_622h.webp`"
+              :alt="item.title"
+              rounded="$bew-radius"
+            >
+          </div>
+          <p text="lg" my-2>{{ item.title }}</p>
+          <p text="$bew-text-2" mb-8>{{ item.sub_title }}</p>
+        </a>
+      </div>
+    </section>
+  </div>
+  <!-- loading -->
+  <loading v-if="isLoading && recommendAnimeList.length !== 0" m="-t-4" />
 </template>
+
+<style lang="scss" scoped></style>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { PopularAnime } from './types'
+import type { PopularAnime } from '../types'
 
 const popularAnimeList = reactive<PopularAnime[]>([])
 const activatedAnime = ref<PopularAnime>()
@@ -40,39 +40,39 @@ function getPopularAnimeList() {
   <div
     ref="bannerContent"
     w-full
-    h-70vh
-    min-h-400px
+    h-600px
     pos="absolute top-0 left-0"
     z="-1"
-    backdrop-blur-2xl
   >
     <div
-      :style="{ backgroundImage: `url(${activatedAnime?.cover})` }"
+      :style="{ backgroundImage: url(${activatedAnime?.cover}) }"
       bg="cover center"
       duration-600
       w-full
       h-full
       pos="absolute"
-      opacity-60
       after:content-none
       after:pos="absolute top-0 left-0"
       after:w-full after:h-full
       after:backdrop-blur-2xl
+      opacity-30
     />
   </div>
-  <div h-70vh min-h-400px z-1>
-    <div text="3xl">
-      {{ activatedAnime?.title }}
 
+  <div h-600px z-1 pos="relative" flex justify-center>
+    <div>
       <img
-        w="full"
         :src="activatedAnime?.ss_horizontal_cover.replace('https:', '')"
-        rounded="$bew-radius"
+        pointer-events-none
+        h="400px"
       >
+      <div text="2xl white" p-4 pos="relative" bg="black opacity-60">
+        {{ activatedAnime?.title }}
+      </div>
     </div>
   </div>
 
-  <ul w-full flex gap-4 overflow-hidden m="t--150px">
+  <ul w-full flex gap-4 overflow-hidden m="t--150px" z-1 relative>
     <li
       v-for="(item, index) in popularAnimeList"
       :key="index"
@@ -81,7 +81,6 @@ function getPopularAnimeList() {
       @mouseover="activatedAnime = item"
     >
       <img
-        w="full"
         :src="item.ss_horizontal_cover.replace('https:', '')"
         rounded="$bew-radius"
       >

src/contentScripts/views/Anime/types.ts

@@ -25,3 +25,31 @@ export interface PopularAnime {
   title: string
   url: string
 }
+
+export interface RecommendAnimeItem {
+  cover: string
+  episode_id: number
+  evaluate: string
+  hover: {
+    img: string
+    text: string[]
+  }
+  link: string
+  rank_id: number
+  rating: string
+  rating_count: number
+  report: object
+  season_id: number
+  season_type: number
+  stat: {
+    danmaku: number
+    duration: number
+    view: number
+  }
+  sub_title: string
+  text: string[]
+  title: string
+  user_status: {
+    follow: number
+  }
+}