person card

src/components/cards/MediaCard.vue

@@ -91,7 +91,7 @@ async function handleAddSubscribe() {
   }
   else if (props.media?.type === '电视剧') {
     // 豆瓣电视剧，只会有一季
-    const season = props.media?.season || 1
+    const season = props.media?.season ?? 1
     // 添加订阅
     addSubscribe(season)
   }
@@ -371,7 +371,7 @@ const seasonsHeaders = [
 const getImgUrl: Ref<string> = computed(() => {
   if (imageLoadError.value)
     return noImage
-  const url = props.media?.poster_path || noImage
+  const url = props.media?.poster_path ?? noImage
   // 如果地址中包含douban则使用中转代理
   if (url.includes('doubanio.com'))
     return `${import.meta.env.VITE_API_BASE_URL}douban/img/${encodeURIComponent(url)}`

src/components/cards/PersonCard.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import personIcon from '@images/misc/person.png'
+import type { TmdbPerson } from '@/api/types'
+
+const personProps = defineProps({
+  person: Object as PropType<TmdbPerson>,
+  width: String,
+  height: String,
+})
+
+// 当前人物
+const personInfo = ref(personProps.person)
+
+// 人物图片地址
+function getPersonImage() {
+  if (!personInfo.value?.profile_path)
+    return personIcon
+  return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personInfo.value?.profile_path}`
+}
+</script>
+
+<template>
+  <VHover v-bind="personProps">
+    <template #default="hover">
+      <VCard
+        v-bind="hover.props"
+        :height="personProps.height"
+        :width="personProps.width"
+        :class="{
+          'transition transform-cpu duration-300 scale-105': hover.isHovering,
+        }"
+      >
+        <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"
+        >
+          <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">
+                <div class="relative w-3/4 overflow-hidden rounded-full">
+                  <VImg :src="getPersonImage()" cover />
+                </div>
+              </div>
+              <div class="w-full truncate text-center font-bold">
+                {{ personInfo?.name }}
+              </div>
+              <div class="overflow-hidden whitespace-normal text-center text-sm" style=" display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical;-webkit-line-clamp: 2;">
+                {{ personInfo?.character }}
+              </div>
+              <div class="absolute bottom-0 left-0 right-0 h-12 rounded-b" />
+            </div>
+          </div>
+        </div>
+      </VCard>
+    </template>
+  </VHover>
+</template>
+
+<style lang="scss">
+.person-card {
+  background-image: linear-gradient(45deg, #99999b, #384359 60%);
+}
+</style>