From d4aaa46968bd161032d4c3e15979288d60d88c68 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 10 May 2025 23:18:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20SubscribeCard=20=E5=92=8C?=
 =?UTF-8?q?=20SubscribeShareCard=20=E7=BB=84=E4=BB=B6=E7=9A=84=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/cards/SubscribeCard.vue      | 186 +++++++++++---------
 src/components/cards/SubscribeShareCard.vue | 107 +++++------
 2 files changed, 154 insertions(+), 139 deletions(-)

diff --git a/src/components/cards/SubscribeCard.vue b/src/components/cards/SubscribeCard.vue
index cd1348a0..72ee65a8 100644
--- a/src/components/cards/SubscribeCard.vue
+++ b/src/components/cards/SubscribeCard.vue
@@ -296,99 +296,109 @@ function onSubscribeEditRemove() {
   <div>
     <VHover>
       <template #default="hover">
-        <VCard
-          v-bind="hover.props"
-          :key="props.media?.id"
-          class="flex flex-col h-full"
+        <div
+          class="w-full h-full rounded-lg overflow-hidden"
           :class="{
-            'outline-dashed outline-1': props.media?.best_version && imageLoaded,
             'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
-            'opacity-70': subscribeState === 'S',
+            'outline-dashed outline-1': props.media?.best_version && imageLoaded,
           }"
-          min-height="170"
-          @click="editSubscribeDialog"
-          :ripple="false"
         >
-          <div class="me-n3 absolute top-1 right-2">
-            <IconBtn>
-              <VIcon icon="mdi-dots-vertical" color="white" />
-              <VMenu activator="parent" close-on-content-click>
-                <VList>
-                  <template v-for="(item, i) in dropdownItems" :key="i">
-                    <VListItem v-if="item.show !== false" :base-color="item.props.color" @click="item.props.click">
-                      <template #prepend>
-                        <VIcon :icon="item.props.prependIcon" />
-                      </template>
-                      <VListItemTitle v-text="item.title" />
-                    </VListItem>
-                  </template>
-                </VList>
-              </VMenu>
-            </IconBtn>
-          </div>
-          <template #image>
-            <VImg :src="backdropUrl || posterUrl" aspect-ratio="3/2" cover @load="imageLoadHandler" position="top">
-              <template #placeholder>
-                <div class="w-full h-full">
-                  <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
-                </div>
-              </template>
-              <div class="absolute inset-0 subscribe-card-background"></div>
-            </VImg>
-            <div v-if="subscribeState === 'P'" class="absolute inset-0 bg-yellow-900 opacity-80 pointer-events-none" />
-          </template>
-          <div>
-            <VCardText class="flex items-center py-3">
-              <div class="h-auto w-16 flex-shrink-0 overflow-hidden rounded-md cursor-move" v-if="imageLoaded">
-                <VImg :src="posterUrl" aspect-ratio="2/3" cover>
-                  <template #placeholder>
-                    <div class="w-full h-full">
-                      <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
-                    </div>
-                  </template>
-                </VImg>
-              </div>
-              <div class="flex flex-col justify-center overflow-hidden pl-2 xl:pl-4">
-                <div class="text-sm font-medium text-white sm:pt-1">{{ props.media?.year }}</div>
-                <div class="mr-2 min-w-0 text-lg font-bold text-white">
-                  {{ props.media?.name }}
-                  {{ formatSeason(props.media?.season ? props.media?.season.toString() : '') }}
-                </div>
-              </div>
-            </VCardText>
-            <VCardText class="flex justify-space-between align-center flex-wrap py-3">
-              <div class="flex align-center">
-                <IconBtn
-                  v-if="props.media?.total_episode"
-                  v-bind="props"
-                  icon="mdi-progress-download"
-                  color="white"
-                  class="me-1"
-                />
-                <div v-if="props.media?.season" class="text-subtitle-2 me-4 text-white">
-                  {{ (props.media?.total_episode || 0) - (props.media?.lack_episode || 0) }} /
-                  {{ props.media?.total_episode }}
-                </div>
-                <IconBtn v-if="props.media?.username" icon="mdi-account" color="white" class="me-1" />
-                <span v-if="props.media?.username" class="text-subtitle-2 me-4 text-white">
-                  {{ props.media?.username }}
-                </span>
-              </div>
-            </VCardText>
-            <VCardText v-if="lastUpdateText" class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300">
-              <VIcon icon="mdi-download" class="me-1" />
-              {{ lastUpdateText }}
-            </VCardText>
-            <div class="w-full absolute bottom-0">
-              <VProgressLinear
-                v-if="getPercentage() > 0"
-                :model-value="getPercentage()"
-                bg-color="success"
-                color="success"
-              />
+          <VCard
+            v-bind="hover.props"
+            :key="props.media?.id"
+            class="flex flex-col h-full"
+            :class="{
+              'opacity-70': subscribeState === 'S',
+            }"
+            rounded="0"
+            min-height="170"
+            @click="editSubscribeDialog"
+            :ripple="false"
+          >
+            <div class="me-n3 absolute top-1 right-4">
+              <IconBtn>
+                <VIcon icon="mdi-dots-vertical" color="white" />
+                <VMenu activator="parent" close-on-content-click>
+                  <VList>
+                    <template v-for="(item, i) in dropdownItems" :key="i">
+                      <VListItem v-if="item.show !== false" :base-color="item.props.color" @click="item.props.click">
+                        <template #prepend>
+                          <VIcon :icon="item.props.prependIcon" />
+                        </template>
+                        <VListItemTitle v-text="item.title" />
+                      </VListItem>
+                    </template>
+                  </VList>
+                </VMenu>
+              </IconBtn>
             </div>
-          </div>
-        </VCard>
+            <template #image>
+              <VImg :src="backdropUrl || posterUrl" aspect-ratio="3/2" cover @load="imageLoadHandler" position="top">
+                <template #placeholder>
+                  <div class="w-full h-full">
+                    <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
+                  </div>
+                </template>
+                <div class="absolute inset-0 outline-none subscribe-card-background"></div>
+              </VImg>
+              <div
+                v-if="subscribeState === 'P'"
+                class="absolute inset-0 bg-yellow-900 opacity-80 pointer-events-none"
+              />
+            </template>
+            <div>
+              <VCardText class="flex items-center py-3">
+                <div class="h-auto w-16 flex-shrink-0 overflow-hidden rounded-md cursor-move" v-if="imageLoaded">
+                  <VImg :src="posterUrl" aspect-ratio="2/3" cover>
+                    <template #placeholder>
+                      <div class="w-full h-full">
+                        <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+                      </div>
+                    </template>
+                  </VImg>
+                </div>
+                <div class="flex flex-col justify-center overflow-hidden pl-2 xl:pl-4">
+                  <div class="text-sm font-medium text-white sm:pt-1">{{ props.media?.year }}</div>
+                  <div class="mr-2 min-w-0 text-lg font-bold text-white">
+                    {{ props.media?.name }}
+                    {{ formatSeason(props.media?.season ? props.media?.season.toString() : '') }}
+                  </div>
+                </div>
+              </VCardText>
+              <VCardText class="flex justify-space-between align-center flex-wrap py-3">
+                <div class="flex align-center">
+                  <IconBtn
+                    v-if="props.media?.total_episode"
+                    v-bind="props"
+                    icon="mdi-progress-download"
+                    color="white"
+                    class="me-1"
+                  />
+                  <div v-if="props.media?.season" class="text-subtitle-2 me-4 text-white">
+                    {{ (props.media?.total_episode || 0) - (props.media?.lack_episode || 0) }} /
+                    {{ props.media?.total_episode }}
+                  </div>
+                  <IconBtn v-if="props.media?.username" icon="mdi-account" color="white" class="me-1" />
+                  <span v-if="props.media?.username" class="text-subtitle-2 me-4 text-white">
+                    {{ props.media?.username }}
+                  </span>
+                </div>
+              </VCardText>
+              <VCardText v-if="lastUpdateText" class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300">
+                <VIcon icon="mdi-download" class="me-1" />
+                {{ lastUpdateText }}
+              </VCardText>
+              <div class="w-full absolute bottom-0">
+                <VProgressLinear
+                  v-if="getPercentage() > 0"
+                  :model-value="getPercentage()"
+                  bg-color="success"
+                  color="success"
+                />
+              </div>
+            </div>
+          </VCard>
+        </div>
       </template>
     </VHover>
     <!-- 订阅编辑弹窗 -->
diff --git a/src/components/cards/SubscribeShareCard.vue b/src/components/cards/SubscribeShareCard.vue
index 79ac0778..659c28c3 100644
--- a/src/components/cards/SubscribeShareCard.vue
+++ b/src/components/cards/SubscribeShareCard.vue
@@ -97,64 +97,69 @@ function doDelete() {
   <div class="h-full">
     <VHover>
       <template #default="hover">
-        <VCard
-          v-bind="hover.props"
-          :key="props.media?.id"
-          class="flex flex-col h-full"
+        <div
+          class="w-full h-full rounded-lg overflow-hidden"
           :class="{
             'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
           }"
-          min-height="170"
-          @click="showForkSubscribe"
         >
-          <template #image>
-            <VImg :src="backdropUrl || posterUrl" aspect-ratio="3/2" cover @load="imageLoadHandler" position="top">
-              <template #placeholder>
-                <div class="w-full h-full">
-                  <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
+          <VCard
+            v-bind="hover.props"
+            :key="props.media?.id"
+            class="flex flex-col h-full"
+            rounded="0"
+            min-height="170"
+            @click="showForkSubscribe"
+          >
+            <template #image>
+              <VImg :src="backdropUrl || posterUrl" aspect-ratio="3/2" cover @load="imageLoadHandler" position="top">
+                <template #placeholder>
+                  <div class="w-full h-full">
+                    <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
+                  </div>
+                </template>
+                <div class="absolute inset-0 subscribe-card-background"></div>
+              </VImg>
+            </template>
+            <div class="h-full flex flex-col">
+              <VCardText class="flex items-center pb-1 grow">
+                <div class="h-auto w-12 flex-shrink-0 overflow-hidden rounded-md" v-if="imageLoaded">
+                  <VImg :src="posterUrl" aspect-ratio="2/3" cover @click.stop="viewMediaDetail">
+                    <template #placeholder>
+                      <div class="w-full h-full">
+                        <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+                      </div>
+                    </template>
+                  </VImg>
                 </div>
-              </template>
-              <div class="absolute inset-0 subscribe-card-background"></div>
-            </VImg>
-          </template>
-          <div class="h-full flex flex-col">
-            <VCardText class="flex items-center pb-1 grow">
-              <div class="h-auto w-12 flex-shrink-0 overflow-hidden rounded-md" v-if="imageLoaded">
-                <VImg :src="posterUrl" aspect-ratio="2/3" cover @click.stop="viewMediaDetail">
-                  <template #placeholder>
-                    <div class="w-full h-full">
-                      <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
-                    </div>
-                  </template>
-                </VImg>
-              </div>
-              <div class="flex flex-col justify-center pl-2 xl:pl-4">
-                <div class="mr-2 min-w-0 text-lg font-bold text-white line-clamp-2 overflow-hidden text-ellipsis ...">
-                  {{ props.media?.share_title }}
+                <div class="flex flex-col justify-center pl-2 xl:pl-4">
+                  <div class="mr-2 min-w-0 text-lg font-bold text-white line-clamp-2 overflow-hidden text-ellipsis ...">
+                    {{ props.media?.share_title }}
+                  </div>
+                  <div class="text-sm font-medium text-gray-200 sm:pt-1 line-clamp-3 overflow-hidden text-ellipsis ...">
+                    {{ props.media?.share_comment }}
+                  </div>
                 </div>
-                <div class="text-sm font-medium text-gray-200 sm:pt-1 line-clamp-3 overflow-hidden text-ellipsis ...">
-                  {{ props.media?.share_comment }}
+              </VCardText>
+              <VCardText class="flex justify-space-between align-center flex-wrap">
+                <div class="flex align-center">
+                  <IconBtn v-bind="props" icon="mdi-account" color="white" class="me-1" />
+                  <div class="text-subtitle-2 me-4 text-white">
+                    {{ props.media?.share_user }}
+                  </div>
+                  <IconBtn v-if="props.media?.count" icon="mdi-fire" color="white" class="me-1" />
+                  <span v-if="props.media?.count" class="text-subtitle-2 me-4 text-white">
+                    {{ props.media?.count.toLocaleString() }}
+                  </span>
                 </div>
-              </div>
-            </VCardText>
-            <VCardText class="flex justify-space-between align-center flex-wrap">
-              <div class="flex align-center">
-                <IconBtn v-bind="props" icon="mdi-account" color="white" class="me-1" />
-                <div class="text-subtitle-2 me-4 text-white">
-                  {{ props.media?.share_user }}
-                </div>
-                <IconBtn v-if="props.media?.count" icon="mdi-fire" color="white" class="me-1" />
-                <span v-if="props.media?.count" class="text-subtitle-2 me-4 text-white">
-                  {{ props.media?.count.toLocaleString() }}
-                </span>
-              </div>
-            </VCardText>
-            <VCardText class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300">
-              <VIcon icon="mdi-calcdar" class="me-1" />
-              {{ dateText }}
-            </VCardText>
-          </div>
-        </VCard>
+              </VCardText>
+              <VCardText class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300">
+                <VIcon icon="mdi-calcdar" class="me-1" />
+                {{ dateText }}
+              </VCardText>
+            </div>
+          </VCard>
+        </div>
       </template>
     </VHover>
     <!-- 订阅编辑弹窗 -->