feat: 添加透明主题支持及背景图片轮换功能

- 在 App.vue 中引入 API 获取背景图片，并实现背景图片的轮换功能。
- 更新主题切换逻辑，支持透明主题，并在主题变化时更新 HTML 属性。
- 在样式中添加透明主题的特定样式，确保各个组件在透明主题下的显示效果。

src/views/discover/MediaDetailView.vue

@@ -12,6 +12,7 @@ import { isNullOrEmptyObject } from '@/@core/utils'
 import { useUserStore } from '@/stores'
 import SubscribeEditDialog from '@/components/dialog/SubscribeEditDialog.vue'
 import SearchSiteDialog from '@/components/dialog/SearchSiteDialog.vue'
+import { useTheme } from 'vuetify'
 
 // 输入参数
 const mediaProps = defineProps({
@@ -30,6 +31,9 @@ const userStore = useUserStore()
 // 提示框
 const $toast = useToast()
 
+// 获取主题信息
+const theme = useTheme()
+
 // 媒体详情
 const mediaDetail = ref<MediaInfo>({} as MediaInfo)
 
@@ -72,6 +76,11 @@ const searchType = ref('title')
 // 选择站点对话框
 const chooseSiteDialog = ref(false)
 
+// 计算主题是否为透明
+const isNonTransparentTheme = computed(() => {
+  return theme.name.value !== 'transparent'
+})
+
 // 查询所有站点
 async function querySites() {
   try {
@@ -519,7 +528,7 @@ onBeforeMount(() => {
 <template>
   <LoadingBanner v-if="!isRefreshed" class="mt-12" />
   <div v-if="mediaDetail.tmdb_id || mediaDetail.douban_id || mediaDetail.bangumi_id" class="max-w-8xl mx-auto px-4">
-    <template v-if="getBackdropUrl || getPosterUrl">
+    <template v-if="(getBackdropUrl || getPosterUrl) && isNonTransparentTheme">
       <div class="vue-media-back absolute left-0 top-0 w-full h-96">
         <VImg class="h-96" position="top" :src="getBackdropUrl || getPosterUrl" cover />
       </div>
@@ -972,7 +981,6 @@ onBeforeMount(() => {
     ),
     linear-gradient(90deg, rgba(var(--v-theme-background), 0) 50%, rgba(var(--v-theme-background), 1) 100%),
     linear-gradient(270deg, rgba(var(--v-theme-background), 0) 50%, rgba(var(--v-theme-background), 1) 100%);
-  box-shadow: 0 0 0 2px rgb(var(--v-theme-background));
   margin-block-start: calc(-70px - env(safe-area-inset-top));
 }
 

src/views/torrent/TorrentCardListView.vue

@@ -387,7 +387,7 @@ function loadMore({ done }: { done: any }) {
 </script>
 
 <template>
-  <div class="search-header d-none d-sm-flex">
+  <div class="search-header d-none d-sm-flex mb-3">
     <!-- 页面头部和筛选栏 -->
     <VCard class="view-header rounded-xl">
       <div class="d-flex align-center flex-wrap pa-3">
@@ -499,7 +499,7 @@ function loadMore({ done }: { done: any }) {
   </div>
 
   <!-- 移动端头部和筛选区域 -->
-  <VCard class="d-block d-sm-none search-header-mobile">
+  <VCard class="d-block d-sm-none search-header-mobile mb-3">
     <!-- 移动端头部 -->
     <div class="view-header">
       <div class="d-flex align-center flex-wrap pa-2">
@@ -617,7 +617,6 @@ function loadMore({ done }: { done: any }) {
   position: sticky;
   z-index: 10;
   backdrop-filter: blur(10px);
-  background-color: rgba(var(--v-theme-background), 0.95);
   inset-block-start: 0;
 }
 

src/views/torrent/TorrentRowListView.vue

@@ -583,7 +583,7 @@ onMounted(() => {
         mode="intersect"
         side="end"
         :items="displayDataList"
-        class="resource-list"
+        class="resource-list overflow-hidden"
         @load="loadMore"
       >
         <template #loading />
@@ -607,7 +607,6 @@ onMounted(() => {
   position: sticky;
   z-index: 10;
   backdrop-filter: blur(10px);
-  background-color: rgba(var(--v-theme-background), 0.95);
   inset-block-start: 0;
 }
 
@@ -615,7 +614,6 @@ onMounted(() => {
   position: sticky;
   z-index: 10;
   backdrop-filter: blur(10px);
-  background-color: rgba(var(--v-theme-background), 0.95);
   inset-block-start: 0;
 }