feat: 主题卡片支持截屏

src/components/UI/ThemeCard.vue

@@ -5,6 +5,7 @@
  * 为未来设置页色系配置预留扩展点。
  */
 import { computed } from 'vue'
+import CaptureButton from '@/components/common/CaptureButton.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -12,10 +13,13 @@ const props = withDefaults(
     variant?: 'section' | 'card' | 'elevated'
     /** 是否显示装饰性渐变光晕（仅 elevated 生效） */
     decorative?: boolean
+    /** hover 时显示右上角截屏按钮 */
+    capturable?: boolean
   }>(),
   {
     variant: 'section',
     decorative: false,
+    capturable: true,
   }
 )
 
@@ -27,13 +31,16 @@ const variantClasses: Record<string, string> = {
     'rounded-[24px] bg-card-bg shadow-xl ring-1 ring-gray-900/5 dark:bg-card-dark dark:ring-white/10',
 }
 
-const containerClass = computed(() => `relative overflow-hidden ${variantClasses[props.variant]}`)
+const containerClass = computed(() => {
+  const base = `relative overflow-hidden ${variantClasses[props.variant]}`
+  return props.capturable ? `group/card ${base}` : base
+})
 
 const showDecoration = computed(() => props.decorative && props.variant === 'elevated')
 </script>
 
 <template>
-  <div :class="containerClass">
+  <div :class="containerClass" :data-theme-card="capturable ? '' : undefined">
     <div v-if="showDecoration" class="pointer-events-none absolute inset-0 overflow-hidden">
       <div
         class="absolute -left-[20%] -top-[20%] h-[70%] w-[70%] rounded-full bg-blue-400/10 blur-[80px] dark:bg-blue-500/20"
@@ -42,6 +49,14 @@ const showDecoration = computed(() => props.decorative && props.variant === 'ele
         class="absolute -right-[20%] top-[10%] h-[70%] w-[70%] rounded-full bg-pink-400/10 blur-[80px] dark:bg-pink-500/20"
       />
     </div>
+
+    <div
+      v-if="capturable"
+      class="absolute right-3 top-3 z-50 opacity-0 transition-opacity duration-200 group-hover/card:opacity-100"
+    >
+      <CaptureButton type="element" target-selector="[data-theme-card]" size="xs" />
+    </div>
+
     <slot />
   </div>
 </template>