feat: 添加 vue-sonner,优化反馈

This commit is contained in:
2026-05-23 14:37:53 +08:00
parent 7d68db723b
commit e317e117d9
9 changed files with 141 additions and 12 deletions
+55
View File
@@ -0,0 +1,55 @@
<script lang="ts" setup>
import type { ToasterProps } from 'vue-sonner'
import {
CircleCheckIcon,
InfoIcon,
Loader2Icon,
OctagonXIcon,
TriangleAlertIcon,
XIcon,
} from '@lucide/vue'
import { Toaster as Sonner } from 'vue-sonner'
import { cn } from '@/lib/utils'
const props = defineProps<ToasterProps>()
</script>
<template>
<Sonner
:class="cn('toaster group', props.class)"
:style="{
'--normal-bg': 'var(--popover)',
'--normal-text': 'var(--popover-foreground)',
'--normal-border': 'var(--border)',
'--border-radius': 'var(--radius)',
}"
:toast-options="{
classes: {
toast: 'rounded-2xl',
},
}"
v-bind="props"
>
<template #success-icon>
<CircleCheckIcon class="size-4" />
</template>
<template #info-icon>
<InfoIcon class="size-4" />
</template>
<template #warning-icon>
<TriangleAlertIcon class="size-4" />
</template>
<template #error-icon>
<OctagonXIcon class="size-4" />
</template>
<template #loading-icon>
<div>
<Loader2Icon class="size-4 animate-spin" />
</div>
</template>
<template #close-icon>
<XIcon class="size-4" />
</template>
</Sonner>
</template>
+1
View File
@@ -0,0 +1 @@
export { default as Toaster } from './Sonner.vue'