From 018d633dd97972f75cb4a0ef72d2908f5367da4f Mon Sep 17 00:00:00 2001
From: flying-hero <462087392@qq.com>
Date: Sat, 4 Apr 2026 19:36:08 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E6=94=B9=E8=BF=9B=EF=BC=9AToast=20?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E7=BB=84=E4=BB=B6=E6=9B=BF=E4=BB=A3=20alert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

变更:
- 龙虾入河提示改为 toast 组件
- 3 秒后自动消失，无需点击确定
- 绿色渐变背景，更美观
- 滑入 + 淡出动画效果
---
 .../src/components/LobsterRiver/index.js      | 52 ++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/code/frontend/src/components/LobsterRiver/index.js b/code/frontend/src/components/LobsterRiver/index.js
index 1fe1e2a..1e8bcfd 100644
--- a/code/frontend/src/components/LobsterRiver/index.js
+++ b/code/frontend/src/components/LobsterRiver/index.js
@@ -7,6 +7,13 @@ function LobsterRiver({ agents, onRefresh, onAgentToRiver, onAgentFromRiver }) {
   const [riverAgents, setRiverAgents] = useState([]);
   const [hoveredAgent, setHoveredAgent] = useState(null);
   const [showHint, setShowHint] = useState(false);
+  const [toast, setToast] = useState(null); // toast 消息
+
+  // 显示 toast 消息，3 秒后自动消失
+  const showToast = (message) => {
+    setToast(message);
+    setTimeout(() => setToast(null), 3000);
+  };
 
   // 拖拽进入河水
   const handleDragOver = (e) => {
@@ -46,7 +53,7 @@ function LobsterRiver({ agents, onRefresh, onAgentToRiver, onAgentFromRiver }) {
           onAgentToRiver(parseInt(agentId));
         }
         
-        alert(`🦐 ${agentName} 已放归河水中！🌊`);
+        showToast(`🦐 ${agentName} 已放归河水中！🌊`);
       }
       
       // 刷新列表
@@ -100,6 +107,13 @@ function LobsterRiver({ agents, onRefresh, onAgentToRiver, onAgentFromRiver }) {
           <div className="wave wave-3"></div>
         </div>
         
+        {/* Toast 消息 */}
+        {toast && (
+          <div className="toast-message">
+            {toast}
+          </div>
+        )}
+        
         {/* 河中的龙虾 */}
         <div className="river-agents">
           {riverAgents.map(agent => (
@@ -363,6 +377,42 @@ function LobsterRiver({ agents, onRefresh, onAgentToRiver, onAgentFromRiver }) {
             font-size: 0.9em;
           }
         }
+        
+        .toast-message {
+          position: fixed;
+          top: 20px;
+          left: 50%;
+          transform: translateX(-50%);
+          background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
+          color: white;
+          padding: 15px 30px;
+          border-radius: 12px;
+          box-shadow: 0 8px 24px rgba(72, 187, 120, 0.4);
+          font-size: 1.1em;
+          font-weight: 600;
+          z-index: 9999;
+          animation: toastSlideDown 0.3s ease-out, toastFadeOut 0.3s ease-in 2.7s;
+        }
+        
+        @keyframes toastSlideDown {
+          from {
+            opacity: 0;
+            transform: translateX(-50%) translateY(-20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(-50%) translateY(0);
+          }
+        }
+        
+        @keyframes toastFadeOut {
+          from {
+            opacity: 1;
+          }
+          to {
+            opacity: 0;
+          }
+        }
       `}</style>
     </div>
   );