✨ 改进:Toast 消息组件替代 alert
变更: - 龙虾入河提示改为 toast 组件 - 3 秒后自动消失,无需点击确定 - 绿色渐变背景,更美观 - 滑入 + 淡出动画效果
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user