改进:Toast 消息组件替代 alert

变更:
- 龙虾入河提示改为 toast 组件
- 3 秒后自动消失,无需点击确定
- 绿色渐变背景,更美观
- 滑入 + 淡出动画效果
This commit is contained in:
2026-04-04 19:36:08 +08:00
parent 4dbbbeaf6a
commit 018d633dd9

View File

@@ -7,6 +7,13 @@ function LobsterRiver({ agents, onRefresh, onAgentToRiver, onAgentFromRiver }) {
const [riverAgents, setRiverAgents] = useState([]); const [riverAgents, setRiverAgents] = useState([]);
const [hoveredAgent, setHoveredAgent] = useState(null); const [hoveredAgent, setHoveredAgent] = useState(null);
const [showHint, setShowHint] = useState(false); 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) => { const handleDragOver = (e) => {
@@ -46,7 +53,7 @@ function LobsterRiver({ agents, onRefresh, onAgentToRiver, onAgentFromRiver }) {
onAgentToRiver(parseInt(agentId)); onAgentToRiver(parseInt(agentId));
} }
alert(`🦐 ${agentName} 已放归河水中!🌊`); showToast(`🦐 ${agentName} 已放归河水中!🌊`);
} }
// 刷新列表 // 刷新列表
@@ -100,6 +107,13 @@ function LobsterRiver({ agents, onRefresh, onAgentToRiver, onAgentFromRiver }) {
<div className="wave wave-3"></div> <div className="wave wave-3"></div>
</div> </div>
{/* Toast 消息 */}
{toast && (
<div className="toast-message">
{toast}
</div>
)}
{/* 河中的龙虾 */} {/* 河中的龙虾 */}
<div className="river-agents"> <div className="river-agents">
{riverAgents.map(agent => ( {riverAgents.map(agent => (
@@ -363,6 +377,42 @@ function LobsterRiver({ agents, onRefresh, onAgentToRiver, onAgentFromRiver }) {
font-size: 0.9em; 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> `}</style>
</div> </div>
); );