2026-03-01 12:15:18 +08:00
|
|
|
|
{{--
|
|
|
|
|
|
文件功能：全局右下角 Toast 小卡片通知组件
|
|
|
|
|
|
|
|
|
|
|
|
提供全局 JS API：
|
|
|
|
|
|
window.chatToast.show({ title, message, icon?, color?, duration? })
|
|
|
|
|
|
- title: 卡片标题
|
|
|
|
|
|
- message: 卡片内容（支持 HTML）
|
|
|
|
|
|
- icon: 左侧 Emoji 图标（可选，默认 💬）
|
|
|
|
|
|
- color: 强调色 HEX（可选，默认 #336699）
|
|
|
|
|
|
- duration: 自动消失毫秒数（可选，默认 6000；0 = 不自动消失）
|
|
|
|
|
|
- action: { label, onClick } 可选操作按钮
|
|
|
|
|
|
|
|
|
|
|
|
使用示例：
|
2026-03-04 15:00:02 +08:00
|
|
|
|
window.chatToast.show({ title: '奖励金币', message: '你收到 100 枚金币！', icon: '💰', color: '#f59e0b' });
|
2026-03-01 12:15:18 +08:00
|
|
|
|
|
|
|
|
|
|
多条 Toast 从右下角向上堆叠，各自独立计时。
|
|
|
|
|
|
|
|
|
|
|
|
@author ChatRoom Laravel
|
|
|
|
|
|
@version 1.0.0
|
|
|
|
|
|
--}}
|
|
|
|
|
|
|
|
|
|
|
|
{{-- Toast 容器（固定右下角，由 JS 动态填充） --}}
|
|
|
|
|
|
<div id="chat-toast-container"
|
|
|
|
|
|
style="position:fixed; bottom:24px; right:24px; z-index:999998;
|
|
|
|
|
|
display:flex; flex-direction:column-reverse; gap:10px; pointer-events:none;">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
@keyframes toastSlideIn {
|
|
|
|
|
|
from {
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
transform: translateX(32px) scale(.96);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
to {
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
transform: translateX(0) scale(1);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2026-05-05 21:48:36 +08:00
|
|
|
|
|
|
|
|
|
|
@media (max-width: 640px) {
|
|
|
|
|
|
#chat-toast-container {
|
2026-05-05 21:57:24 +08:00
|
|
|
|
right: 12px !important;
|
|
|
|
|
|
bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
|
|
|
|
|
|
left: 12px !important;
|
|
|
|
|
|
align-items: stretch;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#chat-toast-container .chat-toast-card {
|
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
|
min-width: 0 !important;
|
|
|
|
|
|
max-width: none !important;
|
2026-05-05 21:48:36 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
2026-03-01 12:15:18 +08:00
|
|
|
|
</style>
|
