[新增] 集成 Sonner 通知库，添加 Toaster 组件并在 InlineMessage 中使用

openflare_server/web/components/feedback/inline-message.tsx

@@ -1,35 +1,44 @@
-import { cn } from '@/lib/utils/cn';
+'use client';
+
+import { useEffect } from 'react';
+import { toast } from 'sonner';
 
 type InlineMessageTone = 'info' | 'success' | 'danger';
 
-const toneClasses: Record<InlineMessageTone, string> = {
-  info: 'border-[var(--status-info-border)] bg-[var(--status-info-soft)] text-[var(--status-info-foreground)]',
-  success:
-    'border-[var(--status-success-border)] bg-[var(--status-success-soft)] text-[var(--status-success-foreground)]',
-  danger:
-    'border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] text-[var(--status-danger-foreground)]',
-};
-
 interface InlineMessageProps {
   tone?: InlineMessageTone;
   message: string;
   className?: string;
+  onClear?: () => void;
 }
 
 export function InlineMessage({
   tone = 'info',
   message,
-  className,
+  onClear,
 }: InlineMessageProps) {
-  return (
-    <div
-      className={cn(
-        'rounded-2xl border px-4 py-3 text-sm leading-6',
-        toneClasses[tone],
-        className,
-      )}
-    >
-      {message}
-    </div>
-  );
+  useEffect(() => {
+    if (!message) return;
+
+    const options = {
+      position: 'bottom-right' as const,
+    };
+
+    if (tone === 'success') {
+      toast.success(message, options);
+    } else if (tone === 'danger') {
+      toast.error(message, options);
+    } else {
+      toast(message, options);
+    }
+
+    if (onClear) {
+      const timer = setTimeout(() => {
+        onClear();
+      }, 0);
+      return () => clearTimeout(timer);
+    }
+  }, [tone, message, onClear]);
+
+  return null;
 }