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,17 +95,14 @@ function doDelete() {
   <div class="h-full">
     <VHover>
       <template #default="hover">
-        <div
-          class="w-full h-full rounded-lg overflow-hidden"
-          :class="{
-            'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
-          }"
-        >
         <VCard
           v-bind="hover.props"
           :key="props.workflow?.id"
-            class="flex flex-col h-full"
-            rounded="0"
+          class="workflow-share-card flex flex-col h-full cursor-pointer overflow-hidden"
+          :class="{
+            'workflow-share-card--hovering': hover.isHovering,
+          }"
+          rounded="lg"
           min-height="150"
           :style="{ background: gradientStyle }"
           @click="showForkWorkflow"
@@ -139,8 +136,19 @@ function doDelete() {
             </VCardText>
           </div>
         </VCard>
-        </div>
       </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>