chore: 换用更美观、现代的前端页面 (#348)

web/src/lib/components/ui/sonner/index.ts

@@ -1 +1 @@
-export { default as Toaster } from "./sonner.svelte";
+export { default as Toaster } from './sonner.svelte';

web/src/lib/components/ui/sonner/sonner.svelte

@@ -1,20 +1,13 @@
 <script lang="ts">
-	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
-	import { mode } from "mode-watcher";
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+	import { mode } from 'mode-watcher';
 
-	type $$Props = SonnerProps;
+	let { ...restProps }: SonnerProps = $props();
 </script>
 
 <Sonner
-	theme={$mode}
+	theme={mode.current}
 	class="toaster group"
-	toastOptions={{
-		classes: {
-			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-			description: "group-[.toast]:text-muted-foreground",
-			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-		},
-	}}
-	{...$$restProps}
+	style="--normal-bg: var(--popover); --normal-text: var(--popover-foreground); --normal-border: var(--border);"
+	{...restProps}
 />