40 lines
1.0 KiB
Vue
40 lines
1.0 KiB
Vue
<script setup lang="ts">
|
||
const props = withDefaults(defineProps<{
|
||
name: string
|
||
color?: string
|
||
size?: 'sm' | 'md' | 'lg'
|
||
}>(), {
|
||
color: 'blue',
|
||
size: 'md'
|
||
})
|
||
|
||
// 静态类名映射，确保 Tailwind 能扫描生成
|
||
const gradients: Record<string, string> = {
|
||
blue: 'from-blue-500 to-blue-700',
|
||
orange: 'from-orange-500 to-orange-700',
|
||
violet: 'from-violet-500 to-violet-700',
|
||
emerald: 'from-emerald-500 to-emerald-700',
|
||
sky: 'from-sky-500 to-sky-700',
|
||
amber: 'from-amber-500 to-amber-700'
|
||
}
|
||
|
||
const sizes = {
|
||
sm: 'size-8 text-sm rounded-lg',
|
||
md: 'size-12 text-xl rounded-xl',
|
||
lg: 'size-20 text-4xl rounded-2xl'
|
||
} as const
|
||
|
||
const initial = computed(() => props.name.replace(/[（(].*$/, '').charAt(0))
|
||
const gradient = computed(() => gradients[props.color] ?? gradients.blue)
|
||
const sizeClass = computed(() => sizes[props.size])
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
class="flex shrink-0 items-center justify-center font-bold text-white bg-gradient-to-br shadow-sm select-none"
|
||
:class="[gradient, sizeClass]"
|
||
>
|
||
{{ initial }}
|
||
</div>
|
||
</template>
|