Refine subscribe files dialog layout

src/components/dialog/SubscribeFilesDialog.vue

@@ -85,6 +85,14 @@ function resolveImageUrl(url?: string) {
   return getDisplayImageUrl(url || '', globalSettings.GLOBAL_IMAGE_CACHE)
 }
 
+/**
+ * 将 TMDB 缩略背景图切换为原始尺寸后生成可展示地址。
+ */
+function resolveHeroImageUrl(url?: string) {
+  const originalUrl = (url || '').replace(/\/t\/p\/w\d+\//i, '/t/p/original/')
+  return resolveImageUrl(originalUrl)
+}
+
 /**
  * 根据订阅媒体类型生成集数展示文案。
  */
@@ -251,14 +259,6 @@ const missingCount = computed(() => Math.max(totalCount.value - libraryCount.val
 
 // 顶部统计卡片
 const statItems = computed<FileStatItem[]>(() => [
-  {
-    key: 'total',
-    label: t('dialog.subscribeFiles.totalEpisodes'),
-    value: totalCount.value,
-    total: totalCount.value,
-    icon: 'mdi-view-grid-outline',
-    color: 'primary',
-  },
   {
     key: 'download',
     label: t('dialog.subscribeFiles.downloadedCount'),
@@ -290,7 +290,7 @@ const selectedFiles = computed(() => {
 
 // 顶部主背景图
 const heroBackdropUrl = computed(() => {
-  return resolveImageUrl(selectedEpisode.value?.backdrop || subscribe.value?.backdrop || subscribe.value?.poster)
+  return resolveHeroImageUrl(selectedEpisode.value?.backdrop || subscribe.value?.backdrop || subscribe.value?.poster)
 })
 
 // 顶部海报图
@@ -392,23 +392,22 @@ onBeforeMount(() => {
                 <p class="subscribe-files-hero__description">
                   {{ selectedEpisode?.description || subscribe?.description || t('dialog.subscribeFiles.noOverview') }}
                 </p>
-              </div>
+                <div class="subscribe-files-stats">
-
+                  <div v-for="item in statItems" :key="item.key" class="subscribe-files-stat-card">
-              <div class="subscribe-files-stats">
+                    <div class="subscribe-files-stat-card__icon">
-                <div v-for="item in statItems" :key="item.key" class="subscribe-files-stat-card">
+                      <VIcon :icon="item.icon" :color="item.color" size="22" />
-                  <div class="subscribe-files-stat-card__icon">
+                    </div>
-                    <VIcon :icon="item.icon" :color="item.color" size="22" />
+                    <div class="subscribe-files-stat-card__content">
+                      <div class="subscribe-files-stat-card__label">{{ item.label }}</div>
+                      <div class="subscribe-files-stat-card__value">{{ item.value }}/{{ item.total }}</div>
+                    </div>
+                    <VProgressLinear
+                      :model-value="calcPercent(item.value, item.total)"
+                      :color="item.color"
+                      height="3"
+                      rounded
+                    />
                   </div>
-                  <div class="subscribe-files-stat-card__content">
-                    <div class="subscribe-files-stat-card__label">{{ item.label }}</div>
-                    <div class="subscribe-files-stat-card__value">{{ item.value }}</div>
-                  </div>
-                  <VProgressLinear
-                    :model-value="calcPercent(item.value, item.total)"
-                    :color="item.color"
-                    height="3"
-                    rounded
-                  />
                 </div>
               </div>
             </div>
@@ -725,7 +724,7 @@ onBeforeMount(() => {
   display: grid;
   align-items: end;
   gap: 2rem;
-  grid-template-columns: 15rem minmax(0, 1fr) 14rem;
+  grid-template-columns: 15rem minmax(0, 1fr);
   padding: 3.5rem 2.25rem 2rem;
 }
 
@@ -803,6 +802,9 @@ onBeforeMount(() => {
 .subscribe-files-stats {
   display: grid;
   gap: 0.8rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-block-start: 1rem;
+  max-inline-size: 42rem;
 }
 
 .subscribe-files-stat-card {
@@ -1271,8 +1273,8 @@ onBeforeMount(() => {
   }
 
   .subscribe-files-stats {
-    grid-column: 1 / -1;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    margin-block-start: 0.75rem;
   }
 
   .subscribe-files-stat-card {
@@ -1282,10 +1284,7 @@ onBeforeMount(() => {
   }
 
   .subscribe-files-stat-card__content {
-    display: flex;
+    display: block;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 0.5rem;
   }
 
   .subscribe-files-stat-card__label,
@@ -1331,14 +1330,6 @@ onBeforeMount(() => {
     grid-template-columns: 6.5rem minmax(0, 1fr);
   }
 
-  .subscribe-files-stats {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .subscribe-files-stat-card:first-child {
-    grid-column: 1 / -1;
-  }
-
   .subscribe-files-mobile-card__header {
     grid-template-columns: auto minmax(0, 1fr);
   }

src/plugins/vuetify/index.ts

@@ -2,7 +2,7 @@ import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
 import { VBtn } from 'vuetify/components/VBtn'
 import * as labsComponents from 'vuetify/labs/components'
-import AppDialog from '@/components/dialog/AppDialog'
+import AppDialog from './AppDialog'
 import defaults from './defaults'
 import { icons } from './icons'
 import theme from './theme'