From 340bb08f2aae93879ba827c05be6b4c3c542d4d5 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 29 Aug 2024 15:27:49 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Amedia=20image=20cache?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/cards/MediaCard.vue     |  3 ++-
 src/components/cards/PluginAppCard.vue |  2 +-
 src/components/cards/PluginCard.vue    |  2 +-
 src/components/cards/SubscribeCard.vue | 33 +++++++++++++++++++-------
 src/views/discover/MediaDetailView.vue | 12 ++++++----
 5 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index d90ee898..99b117d3 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -370,7 +370,8 @@ const getImgUrl: Ref<string> = computed(() => {
   if (imageLoadError.value) return noImage
   const url = props.media?.poster_path?.replace('original', 'w500') ?? noImage
   // 使用图片缓存
-  if (globalSettings.GLOBAL_IMAGE_CACHE) return `${import.meta.env.VITE_API_BASE_URL}${url}`
+  if (globalSettings.GLOBAL_IMAGE_CACHE)
+    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
   // 如果地址中包含douban则使用中转代理
   if (url.includes('doubanio.com'))
     return `${import.meta.env.VITE_API_BASE_URL}douban/img?imgurl=${encodeURIComponent(url)}`
diff --git a/src/components/cards/PluginAppCard.vue b/src/components/cards/PluginAppCard.vue
index 70e015c5..ab7572c1 100644
--- a/src/components/cards/PluginAppCard.vue
+++ b/src/components/cards/PluginAppCard.vue
@@ -177,7 +177,7 @@ const dropdownItems = ref([
     >
       <div
         class="absolute inset-0 bg-cover bg-center"
-        :style="{ background: `${backgroundColor}`, filter: 'brightness(0.7)' }"
+        :style="{ background: `${backgroundColor}`, filter: 'brightness(0.5)' }"
       ></div>
       <div class="relative flex-1 min-w-0">
         <VCardTitle class="text-white px-2 text-shadow whitespace-nowrap overflow-hidden text-ellipsis">
diff --git a/src/components/cards/PluginCard.vue b/src/components/cards/PluginCard.vue
index 8452f6cb..f61687cf 100644
--- a/src/components/cards/PluginCard.vue
+++ b/src/components/cards/PluginCard.vue
@@ -411,7 +411,7 @@ watch(
     >
       <div
         class="absolute inset-0 bg-cover bg-center"
-        :style="{ background: `${backgroundColor}`, filter: 'brightness(0.7)' }"
+        :style="{ background: `${backgroundColor}`, filter: 'brightness(0.5)' }"
       />
       <div class="relative flex-1 min-w-0">
         <VCardTitle class="text-white px-2 text-shadow whitespace-nowrap overflow-hidden text-ellipsis">
diff --git a/src/components/cards/SubscribeCard.vue b/src/components/cards/SubscribeCard.vue
index f3c1a883..ea7a9ff7 100644
--- a/src/components/cards/SubscribeCard.vue
+++ b/src/components/cards/SubscribeCard.vue
@@ -13,6 +13,9 @@ const props = defineProps({
   media: Object as PropType<Subscribe>,
 })
 
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
 // 定义触发的自定义事件
 const emit = defineEmits(['remove', 'save'])
 
@@ -169,6 +172,24 @@ watch(
     if (newOpenState) editSubscribeDialog()
   },
 )
+
+// 计算backdrop图片地址
+const backdropUrl = computed(() => {
+  const url = props.media?.backdrop || props.media?.poster
+  // 使用图片缓存
+  if (globalSettings.GLOBAL_IMAGE_CACHE && url)
+    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
+  return url
+})
+
+// 计算海报图片地址
+const posterUrl = computed(() => {
+  const url = props.media?.poster
+  // 使用图片缓存
+  if (globalSettings.GLOBAL_IMAGE_CACHE && url)
+    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
+  return url
+})
 </script>
 
 <template>
@@ -208,13 +229,7 @@ watch(
           </IconBtn>
         </div>
         <template #image>
-          <VImg
-            :src="props.media?.backdrop || props.media?.poster"
-            aspect-ratio="3/2"
-            cover
-            @load="imageLoadHandler"
-            position="top"
-          >
+          <VImg :src="backdropUrl || posterUrl" aspect-ratio="3/2" cover @load="imageLoadHandler" position="top">
             <template #placeholder>
               <div class="w-full h-full">
                 <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
@@ -223,10 +238,10 @@ watch(
             <div class="absolute inset-0 subscribe-card-background"></div>
           </VImg>
         </template>
-        <div v-if="imageLoaded">
+        <div>
           <VCardText class="flex items-center">
             <div class="h-auto w-12 flex-shrink-0 overflow-hidden rounded-md shadow-lg">
-              <VImg :src="props.media?.poster" aspect-ratio="2/3" cover @click.stop="viewMediaDetail">
+              <VImg :src="posterUrl" aspect-ratio="2/3" cover @click.stop="viewMediaDetail">
                 <template #placeholder>
                   <div class="w-full h-full">
                     <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
diff --git a/src/views/discover/MediaDetailView.vue b/src/views/discover/MediaDetailView.vue
index 252f07dc..f7486e91 100644
--- a/src/views/discover/MediaDetailView.vue
+++ b/src/views/discover/MediaDetailView.vue
@@ -321,7 +321,8 @@ function getW500Image(url = '') {
   if (!url) return ''
   url = url.replace('original', 'w500')
   // 使用图片缓存
-  if (globalSettings.GLOBAL_IMAGE_CACHE) return `${import.meta.env.VITE_API_BASE_URL}${url}`
+  if (globalSettings.GLOBAL_IMAGE_CACHE)
+    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
   return url
 }
 
@@ -329,9 +330,11 @@ function getW500Image(url = '') {
 const getPosterUrl: Ref<string> = computed(() => {
   const url = mediaDetail.value.poster_path ?? ''
   // 使用图片缓存
-  if (globalSettings.GLOBAL_IMAGE_CACHE) return `${import.meta.env.VITE_API_BASE_URL}${url}`
+  if (globalSettings.GLOBAL_IMAGE_CACHE)
+    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
   // 如果地址中包含douban则使用中转代理
-  if (url.includes('doubanio.com')) return `${import.meta.env.VITE_API_BASE_URL}douban/img?imgurl=${url}`
+  if (url.includes('doubanio.com'))
+    return `${import.meta.env.VITE_API_BASE_URL}douban/img?imgurl=${encodeURIComponent(url)}`
   return url
 })
 
@@ -339,7 +342,8 @@ const getPosterUrl: Ref<string> = computed(() => {
 const getBackdropUrl: Ref<string> = computed(() => {
   const url = mediaDetail.value.backdrop_path ?? ''
   // 使用图片缓存
-  if (globalSettings.GLOBAL_IMAGE_CACHE) return `${import.meta.env.VITE_API_BASE_URL}${url}`
+  if (globalSettings.GLOBAL_IMAGE_CACHE)
+    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
   return url
 })