From 777c4ec7e3ab3006e56d0c830822c9c66fabe88e Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 8 Aug 2026 15:33:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=AA=92=E4=BD=93?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E4=B8=8E=E7=89=88=E6=9C=AC=E6=A0=87=E5=BF=97?=
 =?UTF-8?q?=20(#650)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: traeagent <traeagent@users.noreply.github.com>
---
 .../examples/plugin-component/index.html.zip  | Bin 584 -> 584 bytes
 .trae-html-share-packages/index.html.zip      | Bin 12047 -> 12047 bytes
 .../public/offline.html.zip                   | Bin 2338 -> 2338 bytes
 src/components/cards/MediaCard.vue            |  29 +++++---
 src/components/cards/SubscribeCard.vue        |  62 +++++++++---------
 .../cards/__tests__/MediaCard.spec.ts         |   2 +-
 .../cards/__tests__/SubscribeCard.spec.ts     |   4 +-
 7 files changed, 55 insertions(+), 42 deletions(-)

diff --git a/.trae-html-share-packages/examples/plugin-component/index.html.zip b/.trae-html-share-packages/examples/plugin-component/index.html.zip
index bc3a141652d8d0c437d93925b62bdb23c332cdea..3711bbfa9364910368db71b04fb534267d445a28 100644
GIT binary patch
delta 28
kcmX@Xa)N~?z?+#xgn@y9gJF`@MxF<ZOp~l8zhjI70AP#<cK`qY

delta 28
jcmX@Xa)N~?z?+#xgn@y9gTdEeBhLdyCSQZe?--*1TEhm}

diff --git a/.trae-html-share-packages/index.html.zip b/.trae-html-share-packages/index.html.zip
index 1cf4bb0bc5ff9b62d78c361793022bfeb63e8b0e..d70ed78462e5301a5a2df88dab901e1e4453e6d1 100644
GIT binary patch
delta 43
vcmeB=>yP6J@MdNaVPIh3U|4Fkk!QaO(^9L=XH|}K0_n-q^vpoiIXy=J4J{3r

delta 43
vcmeB=>yP6J@MdNaVPIh3V9++$$g^LCN!wuaS(W3QKzi~tJu?t>PR|hl>NX3A

diff --git a/.trae-html-share-packages/public/offline.html.zip b/.trae-html-share-packages/public/offline.html.zip
index e93becd59755ce113f1a525b9e31b62d795721a2..5bfaab7fa30269417589e41790138845287a13c2 100644
GIT binary patch
delta 28
kcmZ1^v`C02z?+#xgn@y9gJHSVMxN6gOv|k%-{kNF09+^sL;wH)

delta 28
jcmZ1^v`C02z?+#xgn@y9gF(q)BhP6LCMAQ(H#s~3QJ)4T

diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 85ad05d4..e0692210 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -6,7 +6,6 @@ let mediaCardIdSeed = 0
 </script>
 
 <script lang="ts" setup>
-import noImage from '@images/no-image.jpeg'
 import { getDisplayImageUrl, getLogoUrl } from '@/utils/imageUtils'
 import api from '@/api'
 import { formatRating } from '@/@core/utils/formatters'
@@ -397,16 +396,30 @@ function setupIntersectionObserver() {
   }
 }
 
+// 媒体占位图标：电影/电视剧/音乐各自使用对应图标，缺失封面时统一渲染图标 + 底色占位
+const placeholderIcon = computed(() => {
+  switch (props.media?.type) {
+    case '音乐':
+      return 'mdi-album'
+    case '电视剧':
+      return 'mdi-television-classic'
+    case '电影':
+    default:
+      return 'mdi-movie-open-outline'
+  }
+})
+
 // 计算图片地址
 const getImgUrl: Ref<string> = computed(() => {
+  if (imageLoadError.value) return ''
   if (props.media?.type === '音乐') {
     // 音乐封面优先使用 cover_url（ListenBrainz/MusicBrainz 统计接口返回），回退到 poster_path
     const musicCover = props.media?.cover_url || props.media?.poster_path
-    if (!musicCover || imageLoadError.value) return ''
+    if (!musicCover) return ''
     return getDisplayImageUrl(musicCover, globalSettings.GLOBAL_IMAGE_CACHE)
   }
-  if (imageLoadError.value) return noImage
-  const url = props.media?.poster_path?.replace('original', 'w500') ?? noImage
+  const url = props.media?.poster_path?.replace('original', 'w500')
+  if (!url) return ''
   return getDisplayImageUrl(url, globalSettings.GLOBAL_IMAGE_CACHE)
 })
 
@@ -481,10 +494,10 @@ onBeforeUnmount(() => {
           @click.stop="handleMediaCardClick(hover.isHovering)"
         >
           <div
-            v-if="props.media?.type === '音乐' && !getImgUrl"
-            class="music-card-placeholder d-flex align-center justify-center"
+            v-if="!getImgUrl"
+            class="media-card-placeholder d-flex align-center justify-center"
           >
-            <VIcon icon="mdi-album" size="64" color="medium-emphasis" />
+            <VIcon :icon="placeholderIcon" size="64" color="medium-emphasis" />
           </div>
           <VImg
             v-else
@@ -578,7 +591,7 @@ onBeforeUnmount(() => {
   inline-size: 100%;
 }
 
-.music-card-placeholder {
+.media-card-placeholder {
   aspect-ratio: 2 / 3;
   background: rgb(var(--v-theme-surface-variant));
   block-size: 100%;
diff --git a/src/components/cards/SubscribeCard.vue b/src/components/cards/SubscribeCard.vue
index 97404df8..824d1640 100644
--- a/src/components/cards/SubscribeCard.vue
+++ b/src/components/cards/SubscribeCard.vue
@@ -12,7 +12,6 @@ import { useGlobalSettingsStore } from '@/stores'
 import { openSharedDialog } from '@/composables/useSharedDialog'
 import { getDisplayImageUrl } from '@/utils/imageUtils'
 import { buildMusicDetailRoute } from '@/utils/music'
-import noImage from '@images/no-image.jpeg'
 
 const SubscribeEditDialog = defineAsyncComponent(() => import('../dialog/SubscribeEditDialog.vue'))
 const SubscribeFilesDialog = defineAsyncComponent(() => import('../dialog/SubscribeFilesDialog.vue'))
@@ -421,40 +420,41 @@ watch(
   },
 )
 
-// 音乐订阅：背景图与海报可能只存在其一，两者都缺失时不再使用通用占位图，
-// 改为渲染与音乐媒体卡片一致的胶片占位背景（专辑图标），避免出现空白图片区。
-const isMusicSubscribe = computed(() => props.media?.type === '音乐')
+// 媒体占位图标：电影/电视剧/音乐各自使用对应图标，缺失封面时统一渲染图标 + 底色占位
+const placeholderIcon = computed(() => {
+  switch (props.media?.type) {
+    case '音乐':
+      return 'mdi-album'
+    case '电视剧':
+      return 'mdi-television-classic'
+    case '电影':
+    default:
+      return 'mdi-movie-open-outline'
+  }
+})
 
 // 计算backdrop图片地址
 const backdropUrl = computed(() => {
-  if (isMusicSubscribe.value) {
-    if (backdropLoadError.value) return ''
-    const url = props.media?.backdrop || props.media?.poster
-    if (!url) return ''
-    return getDisplayImageUrl(url, globalSettings.GLOBAL_IMAGE_CACHE)
-  }
-  const url = backdropLoadError.value ? noImage : props.media?.backdrop || props.media?.poster || noImage
-  return getDisplayImageUrl(url || '', globalSettings.GLOBAL_IMAGE_CACHE)
+  if (backdropLoadError.value) return ''
+  const url = props.media?.backdrop || props.media?.poster
+  if (!url) return ''
+  return getDisplayImageUrl(url, globalSettings.GLOBAL_IMAGE_CACHE)
 })
 
 // 计算海报图片地址
 const posterUrl = computed(() => {
-  if (isMusicSubscribe.value) {
-    if (posterLoadError.value) return ''
-    const url = props.media?.poster || props.media?.backdrop
-    if (!url) return ''
-    return getDisplayImageUrl(url, globalSettings.GLOBAL_IMAGE_CACHE)
-  }
-  const url = posterLoadError.value ? noImage : props.media?.poster || noImage
-  return getDisplayImageUrl(url || '', globalSettings.GLOBAL_IMAGE_CACHE)
+  if (posterLoadError.value) return ''
+  const url = props.media?.poster || props.media?.backdrop
+  if (!url) return ''
+  return getDisplayImageUrl(url, globalSettings.GLOBAL_IMAGE_CACHE)
 })
 
-// 音乐订阅缺失封面时展示胶片占位背景，对齐音乐媒体卡片
-const showMusicPlaceholder = computed(() => isMusicSubscribe.value && !backdropUrl.value)
+// 缺失封面时展示媒体占位背景（图标 + 底色），对齐音乐媒体卡片
+const showPlaceholder = computed(() => !backdropUrl.value)
 
 // 占位背景出现时同步标记图片已加载，让卡片正文与徽标正常渲染
 watch(
-  showMusicPlaceholder,
+  showPlaceholder,
   show => {
     if (show) imageLoaded.value = true
   },
@@ -539,10 +539,10 @@ function handleCardClick() {
               </div>
               <template #image v-if="display.smAndUp.value">
                 <div
-                  v-if="showMusicPlaceholder"
-                  class="subscribe-card-music-placeholder d-flex align-center justify-center"
+                  v-if="showPlaceholder"
+                  class="subscribe-card-placeholder d-flex align-center justify-center"
                 >
-                  <VIcon icon="mdi-album" size="64" color="medium-emphasis" />
+                  <VIcon :icon="placeholderIcon" size="64" color="medium-emphasis" />
                 </div>
                 <VImg
                   v-else
@@ -567,10 +567,10 @@ function handleCardClick() {
               <template v-if="display.xs.value">
                 <div class="subscribe-card-mobile-media">
                   <div
-                    v-if="showMusicPlaceholder"
-                    class="subscribe-card-music-placeholder d-flex align-center justify-center"
+                    v-if="showPlaceholder"
+                    class="subscribe-card-placeholder d-flex align-center justify-center"
                   >
-                    <VIcon icon="mdi-album" size="64" color="medium-emphasis" />
+                    <VIcon :icon="placeholderIcon" size="64" color="medium-emphasis" />
                   </div>
                   <VImg
                     v-else
@@ -972,8 +972,8 @@ function handleCardClick() {
   background-image: linear-gradient(180deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
 }
 
-/* 音乐订阅缺失封面时的胶片占位背景，对齐音乐媒体卡片 */
-.subscribe-card-music-placeholder {
+/* 缺失封面时的媒体占位背景（图标 + 底色），对齐音乐媒体卡片 */
+.subscribe-card-placeholder {
   block-size: 100%;
   inline-size: 100%;
   background: rgb(var(--v-theme-surface-variant));
diff --git a/src/components/cards/__tests__/MediaCard.spec.ts b/src/components/cards/__tests__/MediaCard.spec.ts
index 287d8a0b..c004310e 100644
--- a/src/components/cards/__tests__/MediaCard.spec.ts
+++ b/src/components/cards/__tests__/MediaCard.spec.ts
@@ -354,7 +354,7 @@ describe('MediaCard', () => {
 
     const { container } = await renderCard(media)
 
-    expect(container.querySelector('.music-card-placeholder .v-icon')).not.toBeNull()
+    expect(container.querySelector('.media-card-placeholder .v-icon')).not.toBeNull()
     expect(container.querySelector('img[src*="no-image"]')).toBeNull()
   })
 
diff --git a/src/components/cards/__tests__/SubscribeCard.spec.ts b/src/components/cards/__tests__/SubscribeCard.spec.ts
index 98df7a56..69aea6ec 100644
--- a/src/components/cards/__tests__/SubscribeCard.spec.ts
+++ b/src/components/cards/__tests__/SubscribeCard.spec.ts
@@ -150,7 +150,7 @@ describe('SubscribeCard display and progress', () => {
 
     await fireEvent.error(image as HTMLImageElement)
 
-    await waitFor(() => expect(container.querySelector<HTMLImageElement>('img')?.src).toContain('no-image'))
+    await waitFor(() => expect(container.querySelector('.subscribe-card-placeholder')).toBeInTheDocument())
   })
 
   it('falls back from backdrop to poster for music subscriptions, then to the album placeholder', async () => {
@@ -166,7 +166,7 @@ describe('SubscribeCard display and progress', () => {
 
     // 背景图与海报都缺失：渲染与音乐媒体卡片一致的胶片占位背景
     const { container } = await renderCard({ backdrop: undefined, poster: undefined, type: '音乐' })
-    const placeholder = container.querySelector('.subscribe-card-music-placeholder')
+    const placeholder = container.querySelector('.subscribe-card-placeholder')
     expect(placeholder).toBeInTheDocument()
     expect(placeholder?.querySelector('.v-icon, [class*="mdi-album"]')).not.toBeNull()
     expect(container.querySelector('img')).toBeNull()