feat: update ranking page

* refactor: move VideoCard to src/VideoCard directory
* refactor: create VideoCardSkeleton for reuseable VideoCard Skeleton

src/components/VideoCard/VideoCard.vue

@@ -23,6 +23,7 @@ const props = defineProps<{
   isFollowed?: boolean
   horizontal?: boolean
   tag?: string
+  rank?: number
 }>()
 
 const videoUrl = computed(() => {
@@ -144,6 +145,26 @@ function handelMouseLeave() {
       @mouseleave="handelMouseLeave"
     >
       <div :style="{ display: horizontal ? 'flex' : 'block', gap: horizontal ? '1.5rem' : '0' }">
+        <div
+          v-if="rank" flex="~ justify-center" pos="absolute left-1 top-1" z-10
+          group-hover:transform="translate--4px" transition="all ease-in-out 300"
+        >
+          <div
+            v-if="rank <= 3"
+            bg="$bew-theme-color" text-center lh-30px h-30px w-30px text-white rounded="1/2" shadow="$bew-shadow-1"
+            border="1 $bew-theme-color"
+            text="2xl" fw-bold
+          >
+            {{ rank }}
+          </div>
+          <div
+            v-else
+            bg="$bew-elevated-solid-1" text-center lh-30px h-30px w-30px rounded="1/2" shadow="$bew-shadow-1"
+            border="1 $bew-border-color"
+          >
+            {{ rank }}
+          </div>
+        </div>
         <!-- Cover -->
         <div
           :style="{ width: horizontal ? '250px' : '100%' }"
@@ -263,8 +284,8 @@ function handelMouseLeave() {
                   @click="showPopCtrl = false"
                 />
 
-                <!-- dislike reason popup -->
-                <!-- <div
+              <!-- dislike reason popup -->
+              <!-- <div
                   pos="absolute top-9 right-0"
                   p="2"
                   z="30"

src/components/VideoCard/VideoCardSkeleton.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+defineProps<{
+  horizontal?: boolean
+  hasTag?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    v-if="!horizontal"
+    mb-8 pointer-events-none select-none
+  >
+    <div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
+    <div flex mt-4>
+      <div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
+      <div w-full>
+        <div grid gap-2>
+          <div w-full h-5 bg="$bew-fill-3" />
+          <div w="3/4" h-5 bg="$bew-fill-3" />
+        </div>
+        <div grid gap-2 mt-4>
+          <div w="50%" h-4 bg="$bew-fill-2" />
+          <div w="80%" h-4 bg="$bew-fill-2" />
+        </div>
+        <div text="transparent sm" inline-block mt-4 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
+          hello world
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div
+    v-else
+    flex="~ gap-6"
+    mb-10 pointer-events-none select-none
+  >
+    <!-- Cover -->
+    <div :style="{ width: '250px' }" shrink-0 aspect-video h-fit bg="$bew-fill-4" rounded="$bew-radius" />
+    <!-- Other Information -->
+    <div
+      w-full mt-0
+      flex="~ gap-4"
+    >
+      <div w-full>
+        <div grid gap-2>
+          <div w-full h-5 bg="$bew-fill-3" />
+          <div w="3/4" h-5 bg="$bew-fill-3" />
+        </div>
+        <div grid gap-2 mt-4>
+          <div :style="{ width: '70%' }" h-4 bg="$bew-fill-2" />
+          <div w="80%" h-4 bg="$bew-fill-2" />
+        </div>
+
+        <div mt-4 flex>
+          <div text="transparent sm" inline-block p="x-2 y-1" bg="$bew-fill-1" rounded-4>
+            hello world
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/contentScripts/views/Home/Home.vue

@@ -102,7 +102,7 @@ onUnmounted(() => {
           :focused-character="settings.searchPageSearchBarFocusCharacter"
         />
       </div>
-      <header pos="sticky top-70px" z-10 mb-4>
+      <header pos="sticky top-80px" z-10 mb-4>
         <ul flex="~ items-center gap-2">
           <li
             v-for="tab in tabs" :key="tab.value"

src/contentScripts/views/Home/components/Ranking.vue

@@ -4,6 +4,8 @@ import type { RankingType, RankingVideoModel } from '../types'
 
 const { t } = useI18n()
 
+const handleBackToTop = inject('handleBackToTop') as () => void
+
 const rankingTypes = computed((): RankingType[] => {
   return [
     { name: 'All', rid: 0 },
@@ -34,10 +36,12 @@ const rankingTypes = computed((): RankingType[] => {
   ]
 })
 
+const isLoading = ref<boolean>(false)
 const activatedRankingType = reactive<RankingType>({ ...rankingTypes.value[0] })
 const videoList = reactive<RankingVideoModel[]>([])
 
 watch(() => activatedRankingType.name, () => {
+  handleBackToTop()
   getRankingVideos()
 })
 
@@ -46,6 +50,8 @@ onMounted(() => {
 })
 
 function getRankingVideos() {
+  videoList.length = 0
+  isLoading.value = true
   browser.runtime.sendMessage({
     contentScriptQuery: 'getRankingVideos',
     rid: activatedRankingType.rid,
@@ -54,13 +60,13 @@ function getRankingVideos() {
       const { list } = response.data
       Object.assign(videoList, list)
     }
-  })
+  }).finally(() => isLoading.value = false)
 }
 </script>
 
 <template>
   <div flex="~ gap-40px">
-    <aside pos="fixed" h="[calc(100vh-120px)]" w-200px shrink-0>
+    <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">
@@ -76,9 +82,9 @@ function getRankingVideos() {
       </OverlayScrollbarsComponent>
     </aside>
 
-    <main ml-240px w-full>
+    <main w-full>
       <VideoCard
-        v-for="video in videoList"
+        v-for="(video, index) in videoList"
         :id="Number(video.aid)"
         :key="video.aid"
         :duration="video.duration"
@@ -92,9 +98,15 @@ function getRankingVideos() {
         :danmaku="video.stat.danmaku"
         :published-timestamp="video.pubdate"
         :bvid="video.bvid"
+        :rank="index + 1"
         horizontal
         w-full
       />
+
+      <!-- skeleton -->
+      <template v-if="isLoading">
+        <VideoCardSkeleton v-for="item in 30" :key="item" horizontal />
+      </template>
     </main>
   </div>
 </template>