feat: 优化网页消息提醒样式

web/src/App.vue

@@ -1,11 +1,24 @@
 <script setup lang="ts">
 import 'vue-sonner/style.css'
-import { KeepAlive, onMounted, watch } from 'vue'
+import '@/sonner-overrides.css'
+import { computed, KeepAlive, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { RouterView, useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useSystemStore } from '@/stores/system'
 import { Toaster } from '@/components/ui/sonner'
 
+const { t } = useI18n()
+
+/** Defaults merged into every toast; duration also set on `<Toaster>` for clarity */
+const toasterToastOptions = computed(() => ({
+  closeButtonAriaLabel: t('toast.closeNotification'),
+  classes: {
+    title: 'text-sm font-semibold leading-snug tracking-tight text-popover-foreground',
+    description: 'text-sm leading-relaxed text-muted-foreground',
+  },
+}))
+
 const router = useRouter()
 const authStore = useAuthStore()
 const systemStore = useSystemStore()
@@ -56,5 +69,18 @@ watch(
     </KeepAlive>
     <component :is="Component" v-if="route.name !== 'Console' || !authStore.isAuthenticated" />
   </RouterView>
-  <Toaster rich-colors close-button position="top-center" />
+  <Toaster
+    rich-colors
+    close-button
+    position="top-center"
+    close-button-position="top-right"
+    theme="system"
+    :duration="4000"
+    :gap="14"
+    :visible-toasts="3"
+    :offset="{ top: '1rem', right: '1rem', left: '1rem', bottom: '1rem' }"
+    :mobile-offset="{ top: 'max(1rem, env(safe-area-inset-top))', bottom: 'max(1rem, env(safe-area-inset-bottom))', left: '1rem', right: '1rem' }"
+    :toast-options="toasterToastOptions"
+    :container-aria-label="t('toast.notificationsRegion')"
+  />
 </template>