From 9bf3a9efb23c26c9d98b1003487851913ea899b1 Mon Sep 17 00:00:00 2001
From: dreamhunter2333 <dreamhunter2333@gmail.com>
Date: Sat, 20 Dec 2025 13:32:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20Toast=20=E5=9C=A8?=
 =?UTF-8?q?=E6=B5=85=E8=89=B2=E6=A8=A1=E5=BC=8F=E4=B8=8B=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E8=89=B2=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用内联 style 直接设置背景色
- 浅色模式使用纯白 #ffffff
- 深色模式使用灰色 #1f2937

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/components/ui/toaster.tsx | 45 ++++++++++++++++++--------
 1 file changed, 31 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/ui/toaster.tsx b/frontend/src/components/ui/toaster.tsx
index e7897e2..80a5478 100644
--- a/frontend/src/components/ui/toaster.tsx
+++ b/frontend/src/components/ui/toaster.tsx
@@ -2,33 +2,50 @@ import { X, CheckCircle, AlertCircle, AlertTriangle, Info } from 'lucide-react'
 import { useToast } from './use-toast'
 import { cn } from '@/lib/utils'
 
-const toastStyles = {
-  success: 'border-green-400 bg-white text-green-700 dark:border-green-600 dark:bg-gray-900 dark:text-green-400',
-  error: 'border-red-400 bg-white text-red-700 dark:border-red-600 dark:bg-gray-900 dark:text-red-400',
-  warning: 'border-amber-400 bg-white text-amber-700 dark:border-amber-600 dark:bg-gray-900 dark:text-amber-400',
-  info: 'border-blue-400 bg-white text-blue-700 dark:border-blue-600 dark:bg-gray-900 dark:text-blue-400',
-}
+const toastConfig = {
+  success: {
+    border: 'border-green-300 dark:border-green-600',
+    text: 'text-green-500 dark:text-green-400',
+    Icon: CheckCircle,
+  },
+  error: {
+    border: 'border-red-300 dark:border-red-600',
+    text: 'text-red-500 dark:text-red-400',
+    Icon: AlertCircle,
+  },
+  warning: {
+    border: 'border-amber-300 dark:border-amber-600',
+    text: 'text-amber-500 dark:text-amber-400',
+    Icon: AlertTriangle,
+  },
+  info: {
+    border: 'border-blue-300 dark:border-blue-600',
+    text: 'text-blue-500 dark:text-blue-400',
+    Icon: Info,
+  },
+} as const
 
-const toastIcons = {
-  success: CheckCircle,
-  error: AlertCircle,
-  warning: AlertTriangle,
-  info: Info,
-}
+type ToastType = keyof typeof toastConfig
 
 export function Toaster() {
   const { toasts, removeToast } = useToast()
 
+  // 检测是否为深色模式
+  const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
+
   return (
     <div className="fixed top-4 right-4 z-50 flex flex-col gap-2 w-full max-w-sm">
       {toasts.map((toast) => {
-        const Icon = toastIcons[toast.type] || Info
+        const config = toastConfig[toast.type as ToastType] || toastConfig.info
+        const Icon = config.Icon
         return (
           <div
             key={toast.id}
+            style={{ backgroundColor: isDark ? '#1f2937' : '#ffffff' }}
             className={cn(
               "relative rounded-lg border p-4 shadow-lg animate-in slide-in-from-right",
-              toastStyles[toast.type] || toastStyles.info
+              config.border,
+              config.text
             )}
           >
             <div className="flex items-start gap-3">