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';

View File

@@ -0,0 +1,24 @@
<script setup lang="ts">
import { cn } from '@vben-core/shared/utils';
const props = defineProps<{
class?: any;
}>();
</script>
<template>
<div
:class="
cn(
'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';

View File

@@ -9,6 +9,7 @@ export * from './checkbox';
export * from './dialog'; export * from './dialog';
export * from './dropdown-menu'; export * from './dropdown-menu';
export * from './form'; export * from './form';
export * from './glass-card';
export * from './hover-card'; export * from './hover-card';
export * from './input'; export * from './input';
export * from './label'; export * from './label';

View File

@@ -34,6 +34,7 @@ export {
VbenPinInput, VbenPinInput,
VbenSelect, VbenSelect,
VbenSpinner, VbenSpinner,
GlassCard,
} from '@vben-core/shadcn-ui'; } from '@vben-core/shadcn-ui';
export type { FlattenedItem } from '@vben-core/shadcn-ui'; export type { FlattenedItem } from '@vben-core/shadcn-ui';