mirror of
https://github.com/fawney19/Aether.git
synced 2026-01-07 10:12:27 +08:00
45 lines
1.5 KiB
Vue
45 lines
1.5 KiB
Vue
<template>
|
|
<div :class="cardClass">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface Props {
|
|
variant?: 'default' | 'glass' | 'elevated' | 'interactive' | 'subtle' | 'inset'
|
|
class?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
variant: 'default'
|
|
})
|
|
|
|
// 标准卡片变体定义
|
|
const variants = {
|
|
// 默认卡片 - 纯色背景,标准边框,用于主要内容容器
|
|
default: 'rounded-2xl border border-border bg-card text-card-foreground shadow-sm',
|
|
|
|
// 玻璃态卡片 - 半透明背景+模糊效果,用于嵌套内容/次要层级
|
|
glass: 'rounded-2xl border border-border bg-card/50 text-card-foreground shadow-sm backdrop-blur-sm',
|
|
|
|
// 提升卡片 - 更强阴影效果,用于模态对话框/强调内容
|
|
elevated: 'rounded-2xl border border-border bg-card text-card-foreground shadow-lg',
|
|
|
|
// 交互卡片 - 带hover效果,用于可点击列表项
|
|
interactive: 'rounded-2xl border border-border bg-card text-card-foreground shadow-sm transition-all duration-200 hover:shadow-md hover:border-primary/30 hover:-translate-y-0.5',
|
|
|
|
// 轻量卡片 - 更淡的边框,用于辅助信息区域
|
|
subtle: 'rounded-2xl border border-border/50 bg-card text-card-foreground shadow-sm',
|
|
|
|
// 嵌入式卡片 - 极淡背景,用于卡片内的子卡片(保持层级关系)
|
|
inset: 'rounded-xl border border-border/40 bg-card/40 text-card-foreground'
|
|
}
|
|
|
|
const cardClass = computed(() =>
|
|
cn(variants[props.variant], props.class)
|
|
)
|
|
</script>
|