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 }) {
+ {/* Toast 消息 */} + {toast && ( +
+ {toast} +
+ )} + {/* 河中的龙虾 */}
{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; + } + } `}
);