51 lines
2.3 KiB
HTML
51 lines
2.3 KiB
HTML
|
{# Toast 提示组件 #}
|
||
|
|
<div id="toast-container" class="fixed bottom-4 right-4 z-50 space-y-2">
|
||
|
|
{# Toast 会通过 JS 动态添加 #}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 显示 Toast
|
||
|
|
function showToast(message, type = 'info') {
|
||
|
|
const container = document.getElementById('toast-container');
|
||
|
|
const toast = document.createElement('div');
|
||
|
|
|
||
|
|
const colors = {
|
||
|
|
success: 'bg-green-500',
|
||
|
|
error: 'bg-red-500',
|
||
|
|
warning: 'bg-yellow-500',
|
||
|
|
info: 'bg-primary-500'
|
||
|
|
};
|
||
|
|
|
||
|
|
const icons = {
|
||
|
|
success: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>',
|
||
|
|
error: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>',
|
||
|
|
warning: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>',
|
||
|
|
info: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>'
|
||
|
|
};
|
||
|
|
|
||
|
|
toast.className = `${colors[type]} text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 transform transition-all duration-300 translate-x-full`;
|
||
|
|
toast.innerHTML = `
|
||
|
|
<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
${icons[type]}
|
||
|
|
</svg>
|
||
|
|
<span>${message}</span>
|
||
|
|
<button onclick="this.parentElement.remove()" class="ml-2 hover:opacity-75">
|
||
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
`;
|
||
|
|
|
||
|
|
container.appendChild(toast);
|
||
|
|
|
||
|
|
// 动画进入
|
||
|
|
setTimeout(() => toast.classList.remove('translate-x-full'), 10);
|
||
|
|
|
||
|
|
// 3秒后自动消失
|
||
|
|
setTimeout(() => {
|
||
|
|
toast.classList.add('translate-x-full');
|
||
|
|
setTimeout(() => toast.remove(), 300);
|
||
|
|
}, 3000);
|
||
|
|
}
|
||
|
|
</script>
|