From e72deb43d87f492a9fd430cb19df0082076dc1a0 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 16 Oct 2023 14:32:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20update=20ranking=20page=20*=20refactor:?=
 =?UTF-8?q?=20=E5=88=86=E9=9B=A2=20Home.vue=20=E7=9A=84=20ts=20=E9=A1=9E?=
 =?UTF-8?q?=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/contentScripts/views/Home/Home.vue        | 14 ++++----
 .../views/Home/components/Ranking.vue         | 32 +++++++++++++++----
 src/contentScripts/views/Home/types.ts        | 19 +++++++++++
 3 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 69fac36c..dacbbd0a 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/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,
   },
 ])
 
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index 60beaead..bd70aa73 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/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>
diff --git a/src/contentScripts/views/Home/types.ts b/src/contentScripts/views/Home/types.ts
index b38967aa..d637ce90 100644
--- a/src/contentScripts/views/Home/types.ts
+++ b/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
+}