From 7d6778eaa372411a13b715e38e552766bdcc81ae Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Fri, 4 Aug 2023 07:21:26 +0800
Subject: [PATCH] fix image

---
 src/views/discover/MediaDetailView.vue |  8 +++++++-
 src/views/system/NameTestView.vue      | 20 ++++++++++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/views/discover/MediaDetailView.vue b/src/views/discover/MediaDetailView.vue
index 50022582..83ca3e78 100644
--- a/src/views/discover/MediaDetailView.vue
+++ b/src/views/discover/MediaDetailView.vue
@@ -393,7 +393,13 @@ onBeforeMount(() => {
     <div class="media-page">
       <div class="media-header">
         <div class="media-poster">
-          <VImg :src="getW500Image(mediaDetail.poster_path)" cover />
+          <VImg :src="getW500Image(mediaDetail.poster_path)" cover class="object-cover aspect-w-2 aspect-h-3 ring-1 ring-gray-500">
+            <template #placeholder>
+              <div class="w-full h-full">
+                <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+              </div>
+            </template>
+          </VImg>
         </div>
         <div class="media-title">
           <div v-if="isExists" class="media-status">
diff --git a/src/views/system/NameTestView.vue b/src/views/system/NameTestView.vue
index 6db5c464..6f9df0d7 100644
--- a/src/views/system/NameTestView.vue
+++ b/src/views/system/NameTestView.vue
@@ -46,6 +46,15 @@ async function nameTest() {
   }
 }
 
+// 打开TMDB详情页面
+function openTmdbPage(type: string, tmdbId: number) {
+  if (!type || !tmdbId)
+    return
+
+  const url = `https://www.themoviedb.org/${type === '电影' ? 'movie' : 'tv'}/${tmdbId}`
+  window.open(url, '_blank')
+}
+
 // TMDB图片转换为w500大小
 function getW500Image(url = '') {
   if (!url)
@@ -104,10 +113,16 @@ function getW500Image(url = '') {
             <VImg
               width="10rem"
               aspect-ratio="2/3"
-              class="object-cover aspect-w-2 aspect-h-3 rounded ring-1 ring-gray-500 shadow"
+              class="object-cover aspect-w-2 aspect-h-3 rounded-lg ring-1 ring-gray-500"
               :src="getW500Image(nameTestResult?.media_info?.poster_path)"
               cover
-            />
+            >
+              <template #placeholder>
+                <div class="w-full h-full">
+                  <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+                </div>
+              </template>
+            </VImg>
           </div>
 
           <div>
@@ -153,6 +168,7 @@ function getW500Image(url = '') {
                 variant="elevated"
                 color="success"
                 class="me-1 mb-1"
+                @click="openTmdbPage(nameTestResult?.media_info?.type, nameTestResult?.media_info?.tmdb_id)"
               >
                 {{ nameTestResult?.media_info?.tmdb_id }}
               </VChip>