Refine dashboard recommendations and transparent cards

src/components/dialog/SiteResourceDialog.vue

@@ -2,7 +2,7 @@
 import api from '@/api'
 import type { Site, TorrentInfo, SiteCategory } from '@/api/types'
 import { formatFileSize } from '@core/utils/formatters'
-import { useDisplay } from 'vuetify'
+import { useDisplay, useTheme } from 'vuetify'
 import AddDownloadDialog from '../dialog/AddDownloadDialog.vue'
 import ProgressiveCardGrid from '@/components/misc/ProgressiveCardGrid.vue'
 import { useI18n } from 'vue-i18n'
@@ -13,6 +13,9 @@ const { t, locale } = useI18n()
 // 响应式断点
 const display = useDisplay()
 
+// 当前主题
+const theme = useTheme()
+
 // 输入参数
 const props = defineProps({
   site: Object as PropType<Site>,
@@ -92,9 +95,13 @@ const resultSummaryText = computed(() => {
 // 是否小屏幕
 const isMobileLayout = computed(() => display.smAndDown.value)
 
+// 是否透明主题
+const isTransparentTheme = computed(() => theme.name.value === 'transparent')
+
 // 移动端分页数据
 const mobileResourceList = computed(() => resourceDataList.value)
 
+// 获取资源项唯一标识
 function getResourceItemKey(item: TorrentInfo, index: number) {
   return item.page_url || item.enclosure || `${item.title}-${item.pubdate || ''}-${index}`
 }
@@ -188,10 +195,12 @@ watch(
   },
 )
 
+// 切换移动端搜索栏
 function toggleMobileSearch() {
   mobileSearchExpanded.value = !mobileSearchExpanded.value
 }
 
+// 关闭移动端搜索栏
 function closeMobileSearch() {
   mobileSearchExpanded.value = false
 }
@@ -480,7 +489,11 @@ onMounted(() => {
               :get-item-key="getResourceItemKey"
             >
               <template #default="{ item }">
-                <VCard class="site-resource-card" variant="flat">
+                <VCard
+                  class="site-resource-card"
+                  :class="{ 'site-resource-card--transparent': isTransparentTheme }"
+                  variant="flat"
+                >
                   <VCardText class="pa-3">
                     <button type="button" class="site-resource-title-btn text-start" @click="addDownload(item)">
                       <div class="site-resource-card__title text-body-1 font-weight-medium text-high-emphasis">
@@ -746,7 +759,7 @@ onMounted(() => {
   background: var(--site-resource-card-bg);
 }
 
-:global(html[data-theme="transparent"]) .site-resource-card {
+.site-resource-card--transparent {
   --site-resource-card-bg: rgba(var(--v-theme-surface), var(--transparent-opacity));
 
   backdrop-filter: blur(var(--transparent-blur));

src/pages/dashboard.vue

@@ -78,7 +78,7 @@ const DASHBOARD_DESKTOP_DEFAULT_LAYOUT: DashboardGridLayoutConfig = {
   cpu: { x: 4, y: 22, w: 4, h: DASHBOARD_RESOURCE_CHART_ROWS },
   quickActions: { x: 8, y: 22, w: 4, h: 5 },
   systemInfo: { x: 8, y: 27, w: 4, h: 6 },
-  mediaRecommend: { x: 0, y: 33, w: 12, h: 23 },
+  mediaRecommend: { x: 0, y: 33, w: 8, h: 17 },
 }
 
 // 单个设备档位的仪表盘配置，将布局与显示项绑定到同一份持久化数据。
@@ -179,8 +179,8 @@ const dashboardConfigs = ref<DashboardItem[]>([
     name: t('dashboard.recommendedMedia'),
     key: '',
     attrs: {},
-    cols: { cols: 12 },
+    cols: { cols: 12, md: 8 },
-    rows: 23,
+    rows: 17,
     elements: [],
   },
   {
@@ -1522,6 +1522,13 @@ onBeforeUnmount(() => {
   block-size: 100%;
 }
 
+/* 需要默认尺寸约束的组件可挂载此类，用户编辑后统一解除比例和最小高度。 */
+.dashboard-grid-item.is-manual-height :deep(.dashboard-grid-adaptive-size),
+.dashboard-grid.is-editing :deep(.dashboard-grid-adaptive-size) {
+  aspect-ratio: auto;
+  min-block-size: 0;
+}
+
 .dashboard-grid-item.is-manual-height :deep(.dashboard-work-card),
 .dashboard-grid.is-editing :deep(.dashboard-work-card) {
   max-block-size: none;

src/views/dashboard/MediaRecommend.vue

@@ -201,7 +201,7 @@ onBeforeUnmount(stopAutoplay)
 
 <template>
   <VCard
-    class="dashboard-recommend dashboard-grid-fill dashboard-grid-no-drag"
+    class="dashboard-recommend dashboard-grid-adaptive-size dashboard-grid-fill dashboard-grid-no-drag"
     :class="{ 'is-loading': loading }"
     @mouseenter="isPaused = true"
     @mouseleave="isPaused = false"
@@ -334,8 +334,9 @@ onBeforeUnmount(stopAutoplay)
 .dashboard-recommend {
   position: relative;
   overflow: hidden;
-  block-size: 100%;
+  aspect-ratio: 2 / 1;
-  min-block-size: 520px;
+  block-size: auto;
+  min-block-size: 0;
   background: rgb(8, 18, 28);
   color: white;
   isolation: isolate;
@@ -510,7 +511,6 @@ onBeforeUnmount(stopAutoplay)
 .dashboard-recommend-empty {
   display: flex;
   block-size: 100%;
-  min-block-size: 520px;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, 0.68);
@@ -518,6 +518,36 @@ onBeforeUnmount(stopAutoplay)
   gap: 0.75rem;
 }
 
+@media (min-width: 741px) and (hover: hover) {
+  .dashboard-recommend-topbar,
+  .dashboard-recommend-arrow {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+
+  .dashboard-recommend-topbar {
+    transform: translateY(-4px);
+  }
+
+  .dashboard-recommend-arrow--previous {
+    transform: translateX(-4px);
+  }
+
+  .dashboard-recommend-arrow--next {
+    transform: translateX(4px);
+  }
+
+  .dashboard-recommend:hover .dashboard-recommend-topbar,
+  .dashboard-recommend:focus-within .dashboard-recommend-topbar,
+  .dashboard-recommend:hover .dashboard-recommend-arrow,
+  .dashboard-recommend:focus-within .dashboard-recommend-arrow {
+    opacity: 1;
+    pointer-events: auto;
+    transform: none;
+  }
+}
+
 @media (max-width: 740px) {
   .dashboard-recommend {
     min-block-size: 460px;
@@ -555,23 +585,16 @@ onBeforeUnmount(stopAutoplay)
   }
 
   .dashboard-recommend-detail {
+    justify-content: center;
+    inline-size: max-content;
     min-inline-size: 124px;
     inset-block-end: 3.8rem;
-    inset-inline-end: 0.85rem;
+    inset-inline: 50% auto;
+    transform: translateX(-50%);
   }
 
   .dashboard-recommend-arrow {
-    block-size: 36px;
+    display: none;
-    inline-size: 36px;
-    inset-block-end: 0.75rem;
-  }
-
-  .dashboard-recommend-arrow--previous {
-    inset-inline-start: 0.85rem;
-  }
-
-  .dashboard-recommend-arrow--next {
-    inset-inline-end: 0.85rem;
   }
 
   .dashboard-recommend-pagination {
@@ -605,13 +628,11 @@ onBeforeUnmount(stopAutoplay)
     max-inline-size: 68vw;
   }
 
-  .dashboard-recommend-detail {
-    inset-inline: 0.85rem;
-    inline-size: calc(100% - 1.7rem);
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .dashboard-recommend-topbar,
+  .dashboard-recommend-arrow,
   .dashboard-recommend-page {
     transition: none;
   }