fix: apply theme shadow to workflow and download cards

src/components/cards/DownloadingCard.vue

@@ -71,9 +71,22 @@ async function deleteDownload() {
 </script>
 
 <template>
-  <VCard v-if="cardState" :key="props.info?.hash" class="flex flex-col h-full" min-height="150">
+  <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" aspect-ratio="2/3" cover @load="imageLoadHandler" position="top">
+      <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" />
@@ -116,7 +129,33 @@ async function deleteDownload() {
 </template>
 
 <style lang="scss" scoped>
+.downloading-card {
+  position: relative;
+  isolation: isolate;
+  background-color: rgb(31, 41, 55) !important;
+}
+
+// 图片槽和渐变遮罩统一继承卡片圆角，避免阴影增强后四角露出页面底色。
+.downloading-card :deep(.v-card__image),
+.downloading-card :deep(.v-responsive),
+.downloading-card :deep(.v-img),
+.downloading-card :deep(.v-img__img),
+.downloading-card :deep(.v-responsive__content) {
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.downloading-card :deep(.v-card__image) {
+  background-color: rgb(31, 41, 55);
+}
+
+.downloading-card-image {
+  block-size: 100%;
+}
+
 .downloading-card-background {
+  border-radius: inherit;
   background-image: linear-gradient(180deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
+  pointer-events: none;
 }
 </style>

src/components/cards/WorkflowShareCard.vue

@@ -95,52 +95,60 @@ function doDelete() {
   <div class="h-full">
     <VHover>
       <template #default="hover">
-        <div
-          class="w-full h-full rounded-lg overflow-hidden"
+        <VCard
+          v-bind="hover.props"
+          :key="props.workflow?.id"
+          class="workflow-share-card flex flex-col h-full cursor-pointer overflow-hidden"
           :class="{
-            'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
+            'workflow-share-card--hovering': hover.isHovering,
           }"
+          rounded="lg"
+          min-height="150"
+          :style="{ background: gradientStyle }"
+          @click="showForkWorkflow"
         >
-          <VCard
-            v-bind="hover.props"
-            :key="props.workflow?.id"
-            class="flex flex-col h-full"
-            rounded="0"
-            min-height="150"
-            :style="{ background: gradientStyle }"
-            @click="showForkWorkflow"
-          >
-            <div class="h-full flex flex-col">
-              <VCardText class="flex items-center pa-3 pb-1 grow">
-                <div class="flex flex-col justify-center w-full">
-                  <VCardTitle class="text-lg text-bold text-white line-clamp-2 break-words">
-                    {{ props.workflow?.share_title }}
-                  </VCardTitle>
-                  <div class="px-4 text-white text-opacity-90 overflow-hidden line-clamp-3 break-all ...">
-                    {{ props.workflow?.share_comment }}
-                  </div>
+          <div class="h-full flex flex-col">
+            <VCardText class="flex items-center pa-3 pb-1 grow">
+              <div class="flex flex-col justify-center w-full">
+                <VCardTitle class="text-lg text-bold text-white line-clamp-2 break-words">
+                  {{ props.workflow?.share_title }}
+                </VCardTitle>
+                <div class="px-4 text-white text-opacity-90 overflow-hidden line-clamp-3 break-all ...">
+                  {{ props.workflow?.share_comment }}
                 </div>
-              </VCardText>
-              <VCardText class="flex justify-space-between align-center flex-wrap py-2">
-                <div class="flex align-center">
-                  <IconBtn v-bind="props" icon="mdi-account" class="me-1 text-white" />
-                  <div class="text-subtitle-2 me-4 text-white text-opacity-90">
-                    {{ props.workflow?.share_user }}
-                  </div>
-                  <IconBtn v-if="props.workflow?.count" icon="mdi-fire" class="me-1 text-white" />
-                  <span v-if="props.workflow?.count" class="text-subtitle-2 me-4 text-white text-opacity-90">
-                    {{ props.workflow?.count.toLocaleString() }}
-                  </span>
+              </div>
+            </VCardText>
+            <VCardText class="flex justify-space-between align-center flex-wrap py-2">
+              <div class="flex align-center">
+                <IconBtn v-bind="props" icon="mdi-account" class="me-1 text-white" />
+                <div class="text-subtitle-2 me-4 text-white text-opacity-90">
+                  {{ props.workflow?.share_user }}
                 </div>
-              </VCardText>
-              <VCardText class="absolute right-0 bottom-0 d-flex align-center p-2 text-white text-sm text-opacity-75">
-                <VIcon icon="mdi-calendar" size="small" class="me-1" />
-                {{ dateText }}
-              </VCardText>
-            </div>
-          </VCard>
-        </div>
+                <IconBtn v-if="props.workflow?.count" icon="mdi-fire" class="me-1 text-white" />
+                <span v-if="props.workflow?.count" class="text-subtitle-2 me-4 text-white text-opacity-90">
+                  {{ props.workflow?.count.toLocaleString() }}
+                </span>
+              </div>
+            </VCardText>
+            <VCardText class="absolute right-0 bottom-0 d-flex align-center p-2 text-white text-sm text-opacity-75">
+              <VIcon icon="mdi-calendar" size="small" class="me-1" />
+              {{ dateText }}
+            </VCardText>
+          </div>
+        </VCard>
       </template>
     </VHover>
   </div>
 </template>
+
+<style lang="scss" scoped>
+// 阴影需要落在实际卡片上，不能被额外的 overflow 容器裁掉。
+.workflow-share-card {
+  transition: transform 0.3s ease, box-shadow 0.2s ease;
+  transform: translateZ(0);
+}
+
+.workflow-share-card--hovering {
+  transform: translate3d(0, -0.25rem, 0);
+}
+</style>