From 73673820f18e736f786ecb78ac4c8aee7551918a Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 4 Jun 2026 22:42:43 +0800
Subject: [PATCH] fix: prevent download card shadow clipping

---
 src/components/cards/DownloadingCard.vue     | 123 +++++++++++--------
 src/views/reorganize/DownloadingListView.vue |  15 ++-
 2 files changed, 87 insertions(+), 51 deletions(-)

diff --git a/src/components/cards/DownloadingCard.vue b/src/components/cards/DownloadingCard.vue
index 32a5b41f..33b77f7e 100644
--- a/src/components/cards/DownloadingCard.vue
+++ b/src/components/cards/DownloadingCard.vue
@@ -71,70 +71,93 @@ async function deleteDownload() {
 </script>
 
 <template>
-  <VCard
-    v-if="cardState"
-    :key="props.info?.hash"
-    class="downloading-card flex flex-col h-full overflow-hidden"
-    rounded="lg"
-    min-height="150"
-  >
-    <template #image>
-      <VImg
-        :src="props.info?.media.image"
-        class="downloading-card-image"
-        aspect-ratio="2/3"
-        cover
-        @load="imageLoadHandler"
-        position="top"
-      >
-        <template #placeholder>
-          <div class="w-full h-full">
-            <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
-          </div>
-        </template>
-        <template #default>
-          <div class="absolute inset-0 outline-none downloading-card-background"></div>
-        </template>
-      </VImg>
-    </template>
+  <div v-if="cardState" class="downloading-card-shadow-shell">
+    <VCard
+      :key="props.info?.hash"
+      class="downloading-card flex flex-col h-full overflow-hidden"
+      rounded="lg"
+      min-height="150"
+    >
+      <template #image>
+        <VImg
+          :src="props.info?.media.image"
+          class="downloading-card-image"
+          aspect-ratio="2/3"
+          cover
+          @load="imageLoadHandler"
+          position="top"
+        >
+          <template #placeholder>
+            <div class="w-full h-full">
+              <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+            </div>
+          </template>
+          <template #default>
+            <div class="absolute inset-0 outline-none downloading-card-background"></div>
+          </template>
+        </VImg>
+      </template>
 
-    <div>
-      <VCardTitle class="break-words whitespace-normal text-white">
-        {{ props.info?.media.title || props.info?.name }}
-        {{
-          props.info?.media.episode
-            ? `${props.info?.media.season} ${props.info?.media.episode}`
-            : props.info?.season_episode
-        }}
-      </VCardTitle>
+      <div>
+        <VCardTitle class="break-words whitespace-normal text-white">
+          {{ props.info?.media.title || props.info?.name }}
+          {{
+            props.info?.media.episode
+              ? `${props.info?.media.season} ${props.info?.media.episode}`
+              : props.info?.season_episode
+          }}
+        </VCardTitle>
 
-      <VCardSubtitle class="break-words whitespace-normal text-white">
-        {{ props.info?.title }}
-      </VCardSubtitle>
+        <VCardSubtitle class="break-words whitespace-normal text-white">
+          {{ props.info?.title }}
+        </VCardSubtitle>
 
-      <VCardText class="text-subtitle-1 pt-3 pb-1 text-white">
-        {{ getSpeedText() }}
-      </VCardText>
+        <VCardText class="text-subtitle-1 pt-3 pb-1 text-white">
+          {{ getSpeedText() }}
+        </VCardText>
 
-      <VCardText v-if="getPercentage() > 0" class="text-white">
-        <VProgressLinear :model-value="getPercentage()" bg-color="success" color="success" />
-      </VCardText>
+        <VCardText v-if="getPercentage() > 0" class="text-white">
+          <VProgressLinear :model-value="getPercentage()" bg-color="success" color="success" />
+        </VCardText>
 
-      <VCardActions class="justify-space-between">
-        <VBtn :icon="`${isDownloading ? 'mdi-pause' : 'mdi-play'}`" @click="toggleDownload" />
-        <VBtn color="error" icon="mdi-trash-can-outline" @click="deleteDownload" />
-      </VCardActions>
-    </div>
-  </VCard>
+        <VCardActions class="justify-space-between">
+          <VBtn :icon="`${isDownloading ? 'mdi-pause' : 'mdi-play'}`" @click="toggleDownload" />
+          <VBtn color="error" icon="mdi-trash-can-outline" @click="deleteDownload" />
+        </VCardActions>
+      </div>
+    </VCard>
+  </div>
 </template>
 
 <style lang="scss" scoped>
+// 外层壳承载主题阴影，避免 VCard 的圆角裁切层影响阴影外扩。
+.downloading-card-shadow-shell {
+  position: relative;
+  border-radius: 8px;
+  block-size: 100%;
+  box-shadow: var(--app-surface-shadow);
+  inline-size: 100%;
+  transition: box-shadow 0.2s ease;
+}
+
+@media (hover: hover) {
+  .downloading-card-shadow-shell:hover {
+    box-shadow: var(--app-surface-hover-shadow);
+  }
+}
+
 .downloading-card {
   position: relative;
   isolation: isolate;
   background-color: rgb(31, 41, 55) !important;
 }
 
+// 阴影已经交给外层壳，内层卡片只负责裁切图片和内容圆角。
+.downloading-card.downloading-card.v-card[class],
+.downloading-card.downloading-card.v-card[class]:hover {
+  box-shadow: none !important;
+}
+
 // 图片槽和渐变遮罩统一继承卡片圆角，避免阴影增强后四角露出页面底色。
 .downloading-card :deep(.v-card__image),
 .downloading-card :deep(.v-responsive),
diff --git a/src/views/reorganize/DownloadingListView.vue b/src/views/reorganize/DownloadingListView.vue
index 43ca3088..23bb44a2 100644
--- a/src/views/reorganize/DownloadingListView.vue
+++ b/src/views/reorganize/DownloadingListView.vue
@@ -76,7 +76,12 @@ useKeepAliveRefresh(fetchData, {
 
 <template>
   <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-  <VPullToRefresh v-model="loading" @load="onRefresh" :pull-down-threshold="64">
+  <VPullToRefresh
+    v-model="loading"
+    class="downloading-refresh-shell"
+    @load="onRefresh"
+    :pull-down-threshold="64"
+  >
     <ProgressiveCardGrid
       v-if="filteredDataList.length > 0"
       :items="filteredDataList"
@@ -96,3 +101,11 @@ useKeepAliveRefresh(fetchData, {
     />
   </VPullToRefresh>
 </template>
+
+<style lang="scss" scoped>
+// VPullToRefresh 自带 overflow: hidden，给下载卡阴影预留裁剪范围内的缓冲区。
+.downloading-refresh-shell {
+  margin: -1rem;
+  padding: 1rem;
+}
+</style>