From ef55debeb883066c8ed51eae10644ff9847537ad Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 18 Oct 2023 01:34:06 +0800
Subject: [PATCH] feat: update ranking page

---
 src/background/messageListeners/ranking.ts    |   2 +-
 .../LongCoverCard/LongCoverCard.vue           |  49 ++++---
 .../views/Home/components/Ranking.vue         | 129 +++++++++++-------
 src/contentScripts/views/Home/types.ts        |  34 +++++
 4 files changed, 144 insertions(+), 70 deletions(-)

diff --git a/src/background/messageListeners/ranking.ts b/src/background/messageListeners/ranking.ts
index d353781c..2f1e9a5e 100644
--- a/src/background/messageListeners/ranking.ts
+++ b/src/background/messageListeners/ranking.ts
@@ -9,7 +9,7 @@ function handleMessage(message: any) {
       .then(data => data)
       .catch(error => console.error(error))
   }
-  else if (message.contentScriptQuery === 'getRankingAnime') {
+  else if (message.contentScriptQuery === 'getRankingPgc') {
     const url = `https://api.bilibili.com/pgc/web/rank/list?day=3&season_type=${message.seasonType}`
     return fetch(url)
       .then(response => response.json())
diff --git a/src/components/LongCoverCard/LongCoverCard.vue b/src/components/LongCoverCard/LongCoverCard.vue
index 51064bf7..ba5ce697 100644
--- a/src/components/LongCoverCard/LongCoverCard.vue
+++ b/src/components/LongCoverCard/LongCoverCard.vue
@@ -10,15 +10,22 @@ defineProps<{
   desc: string
   capsuleText?: string
   rank?: number
+  horizontal?: boolean
 }>()
 </script>
 
 <template>
-  <div>
+  <div
+    :style="{
+      display: horizontal ? 'flex' : 'block',
+
+    }" gap-4
+  >
     <!-- Cover -->
     <a
+      :style="{ width: horizontal ? '250px' : '100%' }"
       rounded="$bew-radius" w-full aspect="12/16" overflow-hidden mb-4 bg="$bew-fill-4" relative
-      class="group"
+      class="group" shrink-0
       :href="url" target="_blank" tabindex="-1"
     >
       <div
@@ -114,25 +121,27 @@ defineProps<{
         </div>
       </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" 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>
+      <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" 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>
-      <span> {{ desc }} </span>
     </div>
   </div>
 </template>
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index 535c8646..5385f88f 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import type { RankingType, RankingVideoModel } from '../types'
+import type { PgcModel, RankingType, RankingVideoModel } from '../types'
 import { settings } from '~/logic'
 
 const { t } = useI18n()
@@ -9,41 +9,45 @@ const handleBackToTop = inject('handleBackToTop') as (targetScrollTop: number) =
 
 const rankingTypes = computed((): RankingType[] => {
   return [
-    { name: 'All', rid: 0 },
-    { name: t('topbar.logo_dropdown.anime'), seasonType: 1 },
-    { name: t('topbar.logo_dropdown.chinese_anime'), seasonType: 4 },
-    { name: `${t('topbar.logo_dropdown.chinese_anime')} relative`, rid: 168 },
-    { name: t('topbar.logo_dropdown.documentary_films'), seasonType: 3 },
-    { name: t('topbar.logo_dropdown.animations'), rid: 1 },
-    { name: t('topbar.logo_dropdown.music'), rid: 3 },
-    { name: t('topbar.logo_dropdown.dance'), rid: 129 },
-    { name: t('topbar.logo_dropdown.gaming'), rid: 4 },
-    { name: t('topbar.logo_dropdown.knowledge'), rid: 36 },
-    { name: t('topbar.logo_dropdown.technology'), rid: 188 },
-    { name: t('topbar.logo_dropdown.sports'), rid: 234 },
-    { name: t('topbar.logo_dropdown.cars'), rid: 223 },
-    { name: t('topbar.logo_dropdown.life'), rid: 160 },
-    { name: t('topbar.logo_dropdown.foods'), rid: 211 },
-    { name: t('topbar.logo_dropdown.animals'), rid: 217 },
-    { name: t('topbar.logo_dropdown.kichiku'), rid: 119 },
-    { name: t('topbar.logo_dropdown.fashion'), rid: 155 },
-    { name: t('topbar.logo_dropdown.showbiz'), rid: 5 },
-    { name: t('topbar.logo_dropdown.cinephile'), rid: 181 },
-    { name: t('topbar.logo_dropdown.movies'), seasonType: 2 },
-    { name: t('topbar.logo_dropdown.tv_shows'), seasonType: 5 },
-    { name: t('topbar.logo_dropdown.variety_shows'), seasonType: 7 },
-    { name: 'Original', rid: 0, type: 'origin' },
-    { name: 'Newest Uploader', rid: 0, type: 'rookie' },
+    { id: 1, name: 'All', rid: 0 },
+    { id: 2, name: t('topbar.logo_dropdown.anime'), seasonType: 1 },
+    { id: 3, name: t('topbar.logo_dropdown.chinese_anime'), seasonType: 4 },
+    { id: 4, name: `${t('topbar.logo_dropdown.chinese_anime')} relative`, rid: 168 },
+    { id: 5, name: t('topbar.logo_dropdown.documentary_films'), seasonType: 3 },
+    { id: 6, name: t('topbar.logo_dropdown.animations'), rid: 1 },
+    { id: 7, name: t('topbar.logo_dropdown.music'), rid: 3 },
+    { id: 8, name: t('topbar.logo_dropdown.dance'), rid: 129 },
+    { id: 9, name: t('topbar.logo_dropdown.gaming'), rid: 4 },
+    { id: 10, name: t('topbar.logo_dropdown.knowledge'), rid: 36 },
+    { id: 11, name: t('topbar.logo_dropdown.technology'), rid: 188 },
+    { id: 12, name: t('topbar.logo_dropdown.sports'), rid: 234 },
+    { id: 13, name: t('topbar.logo_dropdown.cars'), rid: 223 },
+    { id: 14, name: t('topbar.logo_dropdown.life'), rid: 160 },
+    { id: 15, name: t('topbar.logo_dropdown.foods'), rid: 211 },
+    { id: 16, name: t('topbar.logo_dropdown.animals'), rid: 217 },
+    { id: 17, name: t('topbar.logo_dropdown.kichiku'), rid: 119 },
+    { id: 18, name: t('topbar.logo_dropdown.fashion'), rid: 155 },
+    { id: 19, name: t('topbar.logo_dropdown.showbiz'), rid: 5 },
+    { id: 20, name: t('topbar.logo_dropdown.cinephile'), rid: 181 },
+    { id: 21, name: t('topbar.logo_dropdown.movies'), seasonType: 2 },
+    { id: 22, name: t('topbar.logo_dropdown.tv_shows'), seasonType: 5 },
+    { id: 23, name: t('topbar.logo_dropdown.variety_shows'), seasonType: 7 },
+    { id: 24, name: 'Original', rid: 0, type: 'origin' },
+    { id: 25, name: 'Newest Uploader', rid: 0, type: 'rookie' },
   ]
 })
 
 const isLoading = ref<boolean>(false)
 const activatedRankingType = reactive<RankingType>({ ...rankingTypes.value[0] })
 const videoList = reactive<RankingVideoModel[]>([])
+const PgcList = reactive<PgcModel[]>([])
 
-watch(() => activatedRankingType.name, () => {
+watch(() => activatedRankingType.id, () => {
   handleBackToTop(settings.value.useSearchPageModeOnHomePage ? 510 : 0)
-  getRankingVideos()
+  if (activatedRankingType.seasonType)
+    getRankingPgc()
+  else
+    getRankingVideos()
 })
 
 onMounted(() => {
@@ -63,6 +67,18 @@ function getRankingVideos() {
     }
   }).finally(() => isLoading.value = false)
 }
+
+function getRankingPgc() {
+  PgcList.length = 0
+  isLoading.value = true
+  browser.runtime.sendMessage({
+    contentScriptQuery: 'getRankingPgc',
+    seasonType: activatedRankingType.seasonType,
+  }).then((response) => {
+    if (response.code === 0)
+      Object.assign(PgcList, response.result.list)
+  }).finally(() => isLoading.value = false)
+}
 </script>
 
 <template>
@@ -70,12 +86,12 @@ function getRankingVideos() {
     <aside pos="sticky top-140px" h="[calc(100vh-120px)]" w-200px shrink-0>
       <OverlayScrollbarsComponent h-inherit p-20px m--20px defer>
         <ul flex="~ col gap-2">
-          <li v-for="rankingType in rankingTypes" :key="rankingType.name">
+          <li v-for="rankingType in rankingTypes" :key="rankingType.id">
             <a
               px-4 lh-30px h-30px hover:bg="$bew-fill-2" w-inherit
               block rounded="$bew-radius" cursor-pointer transition="all 300 ease-out"
               hover:scale-105 un-text="$bew-text-2 hover:$bew-text-1"
-              :class="{ active: activatedRankingType.name === rankingType.name }"
+              :class="{ active: activatedRankingType.id === rankingType.id }"
               @click="Object.assign(activatedRankingType, rankingType)"
             >{{ rankingType.name }}</a>
           </li>
@@ -84,25 +100,40 @@ function getRankingVideos() {
     </aside>
 
     <main w-full>
-      <VideoCard
-        v-for="(video, index) in videoList"
-        :id="Number(video.aid)"
-        :key="video.aid"
-        :duration="video.duration"
-        :title="video.title"
-        :desc="video.desc"
-        :cover="video.pic"
-        :author="video.owner.name"
-        :author-face="video.owner.face"
-        :mid="video.owner.mid"
-        :view="video.stat.view"
-        :danmaku="video.stat.danmaku"
-        :published-timestamp="video.pubdate"
-        :bvid="video.bvid"
-        :rank="index + 1"
-        horizontal
-        w-full
-      />
+      <template v-if="!activatedRankingType.seasonType">
+        <VideoCard
+          v-for="(video, index) in videoList"
+          :id="Number(video.aid)"
+          :key="video.aid"
+          :duration="video.duration"
+          :title="video.title"
+          :desc="video.desc"
+          :cover="video.pic"
+          :author="video.owner.name"
+          :author-face="video.owner.face"
+          :mid="video.owner.mid"
+          :view="video.stat.view"
+          :danmaku="video.stat.danmaku"
+          :published-timestamp="video.pubdate"
+          :bvid="video.bvid"
+          :rank="index + 1"
+          horizontal
+          w-full
+        />
+      </template>
+      <template v-else>
+        <LongCoverCard
+          v-for="pgc in PgcList"
+          :key="pgc.url"
+          :url="pgc.url"
+          :cover="pgc.cover"
+          :title="pgc.title"
+          :desc="pgc.new_ep.index_show"
+          :rank="pgc.rank"
+          :capsule-text="pgc.rating.replace('分', '')"
+          horizontal
+        />
+      </template>
 
       <!-- skeleton -->
       <template v-if="isLoading">
diff --git a/src/contentScripts/views/Home/types.ts b/src/contentScripts/views/Home/types.ts
index 1f1f334b..6f014bc9 100644
--- a/src/contentScripts/views/Home/types.ts
+++ b/src/contentScripts/views/Home/types.ts
@@ -337,6 +337,7 @@ export interface PopularVideoModel {
 }
 
 export interface RankingType {
+  id: number
   name: string
   rid?: number
   seasonType?: number
@@ -405,3 +406,36 @@ export interface RankingVideoModel {
   score: number
   enable_vt: number
 }
+
+export interface PgcModel {
+  badge: string
+  badge_info: {
+    bg_color: string
+    bg_color_night: string
+    text: string
+  }
+  badge_type: number
+  copyright: string
+  cover: string
+  enable_vt: boolean
+  icon_font: {
+    name: string
+    text: string
+  }
+  new_ep: {
+    cover: string
+    index_show: string
+  }
+  rank: number
+  rating: string
+  season_id: number
+  ss_horizontal_cover: string
+  stat: {
+    danmaku: number
+    follow: number
+    series_follow: number
+    view: number
+  }
+  title: string
+  url: string
+}