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

2026-05-23 14:37:53 +08:00
parent 7d68db723b
commit e317e117d9
9 changed files with 141 additions and 12 deletions
@@ -12,14 +12,10 @@ import {

 import { Button } from "@/components/ui/button";
 import { useAuthStore } from "@/stores/auth";
+import { useGlobalStore } from "@/stores/global";

-/** 使用 VueUse 的 useColorMode 切换 dark/light，class 会挂到 <html> 上 */
-const colorMode = useColorMode();
-const isDark = computed(() => colorMode.value === "dark");
-
-const toggleColorMode = () => {
-  colorMode.value = isDark.value ? "light" : "dark";
-};
+/** 主题状态由 themeStore 统一管理，持久化由 @nuxtjs/color-mode 处理 */
+const themeStore = useGlobalStore();

 const authStore = useAuthStore();

@@ -45,6 +41,7 @@ const isActive = (to: string) => {
  return route.path.startsWith(to);
 };

+// 退出登录
 const handleSignOut = async () => {
  await authStore.signOut();
  await navigateTo("/login");
@@ -93,9 +90,9 @@ const handleSignOut = async () => {
          variant="ghost"
          size="icon"
          aria-label="切换主题"
-          @click="toggleColorMode"
+          @click="themeStore.toggle"
        >
-          <Sun v-if="isDark" class="size-4" />
+          <Sun v-if="themeStore.isDark" class="size-4" />
          <Moon v-else class="size-4" />
        </Button>

@@ -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>
@@ -0,0 +1 @@
+export { default as Toaster } from './Sonner.vue'
				`@@ -0,0 +1 @@`
				`export { default as Toaster } from './Sonner.vue'`