Add glass theme backdrop treatment to media details

src/views/discover/MediaDetailView.vue

@@ -155,6 +155,11 @@ const isTransparentTheme = computed(() => {
   return theme.name.value === 'transparent'
 })
 
+// 计算主题是否为玻璃
+const isGlassTheme = computed(() => {
+  return theme.name.value === 'glass'
+})
+
 // 打开站点选择弹窗，并把站点选择结果交回详情页执行搜索。
 function openSearchSiteDialog() {
   openSharedDialog(
@@ -796,7 +801,10 @@ onUnmounted(() => {
   <div
     v-if="hasMediaIdentity()"
     class="max-w-8xl mx-auto px-4"
-    :class="{ 'media-detail-transparent': isTransparentTheme }"
+    :class="{
+      'media-detail-transparent': isTransparentTheme,
+      'media-detail-glass': isGlassTheme,
+    }"
   >
     <template v-if="getBackdropUrl || getPosterUrl">
       <div class="vue-media-back vue-media-back-image absolute left-0 top-0 w-full h-96">
@@ -1406,12 +1414,13 @@ onUnmounted(() => {
   background-image: none;
 }
 
-.media-detail-transparent .vue-media-back-overlay {
+.media-detail-transparent .vue-media-back-overlay,
+.media-detail-glass .vue-media-back-overlay {
   display: none;
 }
 
-.media-detail-transparent .vue-media-back-image {
+.media-detail-transparent .vue-media-back-image,
-  opacity: 0.78;
+.media-detail-glass .vue-media-back-image {
   mask-image:
     linear-gradient(to bottom, transparent 0%, #000 16%, #000 58%, transparent 100%),
     linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
@@ -1422,6 +1431,14 @@ onUnmounted(() => {
   -webkit-mask-composite: source-in;
 }
 
+.media-detail-transparent .vue-media-back-image {
+  opacity: 0.78;
+}
+
+.media-detail-glass .vue-media-back-image {
+  opacity: 0.88;
+}
+
 .media-page {
   position: relative;
   z-index: 1;

src/views/discover/__tests__/MediaDetailView.spec.ts

@@ -1,5 +1,6 @@
 import type { MediaInfo, NotExistMediaInfo, Site, Subscribe, TmdbEpisode } from '@/api/types'
 import { getMediaSubscribeId } from '@/composables/useMediaSubscribe'
+import vuetify from '@/plugins/vuetify'
 import MediaDetailView from '@/views/discover/MediaDetailView.vue'
 import { fireEvent, screen, waitFor, within } from '@testing-library/vue'
 import { flushPromises } from '@vue/test-utils'
@@ -247,6 +248,21 @@ describe('MediaDetailView detail and actions', () => {
     })
   })
 
+  it('applies the glass backdrop fade treatment in the glass theme', async () => {
+    const previousTheme = vuetify.theme.global.name.value
+
+    try {
+      vuetify.theme.global.name.value = 'glass'
+      const { container } = await renderDetail()
+
+      expect(await screen.findByRole('heading', { name: /详情测试电影/ })).toBeInTheDocument()
+      expect(container.querySelector('.media-detail-glass')).toBeInTheDocument()
+      expect(container.querySelector('.media-detail-transparent')).not.toBeInTheDocument()
+    } finally {
+      vuetify.theme.global.name.value = previousTheme
+    }
+  })
+
   it('renders legal empty media separately from loading', async () => {
     const empty = createEmptyMediaInfo()
     await renderDetail({ media: empty, mediaId: 'tmdb:8301', type: '电影' })