feat(@vben-core/shadcn-ui): 新增 GlassCard 毛玻璃卡片组件

- 创建独立的 GlassCard 组件,提供更明确的语义化 API
- 导出 GlassCard 组件供项目使用
- 支持自定义 class 属性进行样式扩展
This commit is contained in:
lzh
2025-12-22 14:55:38 +08:00
parent a5a396e692
commit 855cb7154f
6 changed files with 50 additions and 0 deletions

View File

@@ -0,0 +1,20 @@
<script setup lang="ts">
const props = defineProps<{
class?: string | string[] | Record<string, boolean>;
}>();
</script>
<template>
<div
:class="[
'glass-card glass-border glass-shadow glass-highlight',
'rounded-[2rem] text-card-foreground',
'transition-all duration-300 ease-out',
'hover:-translate-y-1 hover:glass-shadow-hover',
props.class,
]"
>
<slot></slot>
</div>
</template>

View File

@@ -0,0 +1,2 @@
export { default as GlassCard } from './GlassCard.vue';