feat: migrate the ranking page

Author: KunMoe

components/kun/top-bar/Avatar.vue

@@ -30,15 +30,17 @@ const statusClasses = computed(() => {
 
 <template>
   <div class="flex items-center space-x-1">
-    <KunButton
-      :is-icon-only="true"
-      variant="light"
-      color="default"
-      size="xl"
-      href="/search"
-    >
-      <KunIcon name="lucide:search" />
-    </KunButton>
+    <KunTooltip text="Ctrl + K 以快速搜索" position="bottom">
+      <KunButton
+        :is-icon-only="true"
+        variant="light"
+        color="default"
+        size="xl"
+        href="/search"
+      >
+        <KunIcon name="lucide:search" />
+      </KunButton>
+    </KunTooltip>
 
     <KunButton
       :is-icon-only="true"

components/ranking/Galgame.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { galgameSortItem } from '~/constants/ranking'
+import { galgameRankingPageData } from './pageData'
+
+const { data } = await useFetch(`/api/ranking/galgame`, {
+  method: 'GET',
+  query: galgameRankingPageData,
+  ...kungalgameResponseHandler
+})
+</script>
+
+<template>
+  <KunLink
+    color="default"
+    underline="none"
+    v-for="(galgame, index) in data"
+    :key="galgame.id"
+    :to="`/user/${galgame.id}/info`"
+    class-name="hover:bg-default-100 flex cursor-pointer items-center justify-between rounded-lg p-3 transition-colors"
+  >
+    <div class="flex items-center">
+      <span class="text-default-500 w-12 text-xl font-bold">
+        {{ index + 1 }}
+      </span>
+      {{ getPreferredLanguageText(galgame.name) }}
+    </div>
+
+    <div class="flex items-center space-x-2">
+      <KunIcon
+        :name="
+          galgameSortItem.find((i) => i.sortField === galgame.sortField)
+            ?.icon || ''
+        "
+        class="text-primary h-5 w-5"
+      />
+      <span class="font-medium">{{ galgame.value }}</span>
+    </div>
+  </KunLink>
+</template>

components/ranking/Topic.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { topicIconMap } from '~/constants/ranking'
+import { topicSortItem } from '~/constants/ranking'
 import { topicRankingPageData } from './pageData'
 
 const { data } = await useFetch(`/api/ranking/topic`, {
@@ -14,8 +14,8 @@ const { data } = await useFetch(`/api/ranking/topic`, {
     color="default"
     underline="none"
     v-for="(topic, index) in data"
-    :key="topic.tid"
-    :to="`/topic/${topic.tid}`"
+    :key="topic.id"
+    :to="`/topic/${topic.id}`"
     class-name="hover:bg-default-100 flex cursor-pointer items-center justify-between rounded-lg p-3 transition-colors"
   >
     <div class="flex items-center">
@@ -29,10 +29,12 @@ const { data } = await useFetch(`/api/ranking/topic`, {
 
     <div class="flex items-center space-x-2">
       <KunIcon
-        :name="topicIconMap[topicRankingPageData.sortField]"
+        :name="
+          topicSortItem.find((i) => i.sortField === topic.sortField)?.icon || ''
+        "
         class="text-primary h-5 w-5"
       />
-      <span class="font-medium">{{ topic.field }}</span>
+      <span class="font-medium">{{ topic.value }}</span>
     </div>
   </KunLink>
 </template>

components/ranking/User.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { userIconMap } from '~/constants/ranking'
+import { userSortItem } from '~/constants/ranking'
 import { userRankingPageData } from './pageData'
 
 const { data } = await useFetch(`/api/ranking/user`, {
@@ -14,8 +14,8 @@ const { data } = await useFetch(`/api/ranking/user`, {
     color="default"
     underline="none"
     v-for="(user, index) in data"
-    :key="user.uid"
-    :to="`/user/${user.uid}/info`"
+    :key="user.id"
+    :to="`/user/${user.id}/info`"
     class-name="hover:bg-default-100 flex cursor-pointer items-center justify-between rounded-lg p-3 transition-colors"
   >
     <div class="flex items-center">
@@ -28,10 +28,12 @@ const { data } = await useFetch(`/api/ranking/user`, {
 
     <div class="flex items-center space-x-2">
       <KunIcon
-        :name="userIconMap[userRankingPageData.sortField]"
+        :name="
+          userSortItem.find((i) => i.sortField === user.sortField)?.icon || ''
+        "
         class="text-primary h-5 w-5"
       />
-      <span class="font-medium">{{ user.field }}</span>
+      <span class="font-medium">{{ user.value }}</span>
     </div>
   </KunLink>
 </template>

components/ranking/pageData.ts

@@ -1,18 +1,31 @@
 import type {
-  RankingGetTopicsRequestData,
-  RankingGetUserRequestData
-} from '~/types/api/ranking'
+  getTopicRankingSchema,
+  getGalgameRankingSchema,
+  getUserRankingSchema
+} from '~/validations/ranking'
+import type { z } from 'zod'
 
-export const topicRankingPageData = reactive<RankingGetTopicsRequestData>({
-  page: '1',
-  limit: '100',
-  sortField: 'views',
+type Topic = z.infer<typeof getTopicRankingSchema>
+type Galgame = z.infer<typeof getGalgameRankingSchema>
+type User = z.infer<typeof getUserRankingSchema>
+
+export const topicRankingPageData = reactive<Topic>({
+  page: 1,
+  limit: 100,
+  sortField: 'view',
+  sortOrder: 'desc'
+})
+
+export const galgameRankingPageData = reactive<Galgame>({
+  page: 1,
+  limit: 100,
+  sortField: 'view',
   sortOrder: 'desc'
 })
 
-export const userRankingPageData = reactive<RankingGetUserRequestData>({
-  page: '1',
-  limit: '100',
+export const userRankingPageData = reactive<User>({
+  page: 1,
+  limit: 100,
   sortField: 'moemoepoint',
   sortOrder: 'desc'
 })

constants/layout.ts

@@ -80,6 +80,11 @@ export const kunLayoutItem: KunLayoutItem[] = [
         router: '/ranking/topic',
         label: '话题排行'
       },
+      {
+        name: 'galgame',
+        router: '/ranking/galgame',
+        label: 'Galgame 排行'
+      },
       {
         name: 'ranking',
         router: '/ranking/user',