feat: update ranking page

* refactor: 分離 Home.vue 的 ts 類型

src/contentScripts/views/Home/Home.vue

@@ -3,31 +3,33 @@ import ForYou from './components/ForYou.vue'
 import Following from './components/Following.vue'
 import Trending from './components/Trending.vue'
 import Ranking from './components/Ranking.vue'
+import type { HomeTab } from './types'
+import { HomeSubPage } from './types'
 import emitter from '~/utils/mitt'
 import { settings } from '~/logic'
 
 const handleBackToTop = inject('handleBackToTop') as () => void
 
 const recommendContentKey = ref<string>(`recommendContent${Number(new Date())}`)
-const activatedPage = ref<'ForYou' | 'Following' | 'Trending'>('ForYou')
+const activatedPage = ref<HomeSubPage>(HomeSubPage.ForYou)
 const pages = { ForYou, Following, Trending, Ranking }
 
-const tabs = reactive<{ label: string; value: 'ForYou' | 'Following' | 'Trending' | 'Ranking' }[]>([
+const tabs = reactive<HomeTab[]>([
   {
     label: 'For you',
-    value: 'ForYou',
+    value: HomeSubPage.ForYou,
   },
   {
     label: 'Following',
-    value: 'Following',
+    value: HomeSubPage.Following,
   },
   {
     label: 'Trending',
-    value: 'Trending',
+    value: HomeSubPage.Trending,
   },
   {
     label: 'Ranking',
-    value: 'Ranking',
+    value: HomeSubPage.Ranking,
   },
 ])
 

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

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import type { RankingType } from '../types'
 
 const { t } = useI18n()
 
-const genres = computed(() => {
+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'), rid: 168 },
+    { 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 },
@@ -32,14 +33,31 @@ const genres = computed(() => {
     { name: 'Newest Uploader', rid: 0, type: 'rookie' },
   ]
 })
+
+const activatedRankingType = ref<RankingType>(rankingTypes.value[0])
 </script>
 
 <template>
   <div>
-    <ul>
-      <li>
-        <a href="">ALL</a>
-      </li>
-    </ul>
+    <aside h="[calc(100vh-140px)]" w-200px>
+      <OverlayScrollbarsComponent h-inherit defer>
+        <ul>
+          <li v-for="rankingType in rankingTypes" :key="rankingType.name">
+            <a
+              px-4 lh-30px h-30px hover:bg="$bew-fill-2"
+              block rounded="$bew-radius" cursor-pointer
+            >{{ rankingType.name }}</a>
+          </li>
+        </ul>
+      </OverlayScrollbarsComponent>
+    </aside>
+
+    <main />
   </div>
 </template>
+
+<style lang="scss" scoped>
+.active {
+
+}
+</style>

src/contentScripts/views/Home/types.ts

@@ -1,3 +1,15 @@
+export interface HomeTab {
+  label: string
+  value: HomeSubPage
+}
+
+export enum HomeSubPage {
+  ForYou = 'ForYou',
+  Following = 'Following',
+  Trending = 'Trending',
+  Ranking = 'Ranking',
+}
+
 export interface VideoModel {
   id: number
   bvid: string
@@ -310,3 +322,10 @@ export interface PopularVideoModel {
     corner_mark: number
   }
 }
+
+export interface RankingType {
+  name: string
+  rid?: number
+  seasonType?: number
+  type?: string
+}