feat person detail page

src/components/cards/MediaCard.vue

@@ -324,7 +324,7 @@ function getExistText(season: number) {
 }
 
 // 打开详情页
-function openDetailWindow() {
+function goMediaDetail() {
   router.push({
     path: '/media',
     query: {
@@ -433,7 +433,7 @@ const getImgUrl: Ref<string> = computed(() => {
           <VCardText
             v-show="hover.isHovering || imageLoadError"
             class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
-            @click.stop="openDetailWindow"
+            @click.stop="goMediaDetail"
           >
             <span class="font-bold">{{ props.media?.year }}</span>
             <h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">

src/components/cards/PersonCard.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import personIcon from '@images/misc/person.png'
 import type { TmdbPerson } from '@/api/types'
+import router from '@/router'
 
 const personProps = defineProps({
   person: Object as PropType<TmdbPerson>,
@@ -11,12 +12,27 @@ const personProps = defineProps({
 // 当前人物
 const personInfo = ref(personProps.person)
 
+// 人物图片是否加载
+const isImageLoaded = ref(false)
+
 // 人物图片地址
 function getPersonImage() {
   if (!personInfo.value?.profile_path)
     return personIcon
   return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personInfo.value?.profile_path}`
 }
+
+// 人物详情
+function goPersonDetail() {
+  if (!personInfo.value?.id)
+    return
+  router.push({
+    path: '/person',
+    query: {
+      personid: personInfo.value?.id,
+    },
+  })
+}
 </script>
 
 <template>
@@ -29,6 +45,7 @@ function getPersonImage() {
         :class="{
           'transition transform-cpu duration-300 scale-105': hover.isHovering,
         }"
+        @click.stop="goPersonDetail"
       >
         <div
           class="person-card relative transform-gpu cursor-pointer rounded text-white shadow ring-1 transition duration-150 ease-in-out scale-100 ring-gray-700"
@@ -36,11 +53,17 @@ function getPersonImage() {
           <div style="padding-bottom: 150%;">
             <div class="absolute inset-0 flex h-full w-full flex-col items-center p-2">
               <div class="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
-                <VAvatar size="120" class="ring-1 ring-gray-700">
+                <VAvatar
+                  size="120"
+                  :class="{
+                    'ring-1 ring-gray-700': isImageLoaded,
+                  }"
+                >
                   <VImg
                     v-img
                     :src="getPersonImage()"
                     cover
+                    @load="isImageLoaded = true"
                   />
                 </VAvatar>
               </div>