From 65a87b64f9ef3d3e4cf85253eb3ee9287092f1fc Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sun, 30 Jul 2023 13:12:27 +0800
Subject: [PATCH] fix

---
 src/api/types.ts                        |  3 +++
 src/views/discover/MediaDetailView.vue  | 29 +++----------------------
 src/views/discover/PersonDetailView.vue |  9 +++++++-
 3 files changed, 14 insertions(+), 27 deletions(-)

diff --git a/src/api/types.ts b/src/api/types.ts
index f4c9499e..dc74300c 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -319,6 +319,9 @@ export interface TmdbPerson {
 
   // 热度
   popularity?: number
+
+  // 图片
+  images?: Object
 }
 
 // 站点
diff --git a/src/views/discover/MediaDetailView.vue b/src/views/discover/MediaDetailView.vue
index 78171724..32cc7c7d 100644
--- a/src/views/discover/MediaDetailView.vue
+++ b/src/views/discover/MediaDetailView.vue
@@ -48,24 +48,15 @@ onBeforeMount(() => {
   </div>
   <div v-if="mediaDetail.tmdb_id" class="max-w-8xl mx-auto px-4">
     <div class="media-page">
-      <div class="media-page-bg-image">
-        <VImg cover :src="mediaDetail.backdrop_path" class="absolute inset-0 w-full h-full object-cover object-center" />
-        <div
-          class="absolute inset-0"
-          style="background-image: linear-gradient(180deg, rgba(17, 24, 39, 47%) 0%, rgba(17, 24, 39, 100%) 100%);"
-        />
-      </div>
       <div class="media-header">
         <div class="media-poster">
           <VImg :src="mediaDetail.poster_path" cover />
         </div>
         <div class="media-title">
           <div class="media-status" />
-          <h1 class="media-title">
-            {{ mediaDetail.title }}
-            <span class="media-year">
-              ({{ mediaDetail.year }})
-            </span>
+          <h1 class="flex flex-col items-baseline md:flex-row">
+            <span>{{ mediaDetail.title }}</span>
+            <span v-if="mediaDetail.year" class="text-lg">（{{ mediaDetail.year }}）</span>
           </h1>
           <span class="media-attributes">
             <span>{{ mediaDetail.runtime }}</span>
@@ -142,15 +133,6 @@ onBeforeMount(() => {
   padding-inline: 1rem;
 }
 
-.media-page-bg-image {
-  // FIXME: 前景图看不到
-  position: absolute;
-  z-index: -10;
-  block-size: 100%;
-  inline-size: 100%;
-  inset: 0;
-}
-
 .media-header {
   display: flex;
   flex-direction: column;
@@ -233,11 +215,6 @@ onBeforeMount(() => {
   }
 }
 
-h1 .media-year {
-    font-size: 1.5rem;
-    line-height: 2rem;
-}
-
 ul.media-crew {
     margin-top: 1.5rem;
     display: grid;
diff --git a/src/views/discover/PersonDetailView.vue b/src/views/discover/PersonDetailView.vue
index 0559e9dc..19f6e6c5 100644
--- a/src/views/discover/PersonDetailView.vue
+++ b/src/views/discover/PersonDetailView.vue
@@ -35,6 +35,13 @@ function getPersonImage() {
   return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personDetail.value?.profile_path}`
 }
 
+// 将别名数组拆分为、分隔的字符串
+function getAlsoKnownAs() {
+  if (!personDetail.value?.also_known_as)
+    return ''
+  return personDetail.value.also_known_as.join('、')
+}
+
 onBeforeMount(() => {
   getPersonDetail()
 })
@@ -77,7 +84,7 @@ onBeforeMount(() => {
             <span v-if="personDetail.place_of_birth">{{ personDetail.place_of_birth }}</span>
           </div>
           <div v-if="personDetail.also_known_as">
-            别名：{{ personDetail.also_known_as }}
+            别名：{{ getAlsoKnownAs() }}
           </div>
         </div>
       </div>