simple-memo/static/js/toast.js

// static/js/toast.js
// 美观的Toast消息提示组件（替代原生alert）
(function() {
    'use strict';

    // Toast样式
    const style = document.createElement('style');
    style.textContent = `
        .toast-container {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10000;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            pointer-events: none;
        }
        .toast {
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 14px;
            color: #fff;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            animation: toastIn 0.3s ease;
            pointer-events: auto;
            max-width: 400px;
            text-align: center;
            line-height: 1.5;
        }
        .toast.success {
            background: linear-gradient(135deg, #52c41a, #389e0d);
        }
        .toast.error {
            background: linear-gradient(135deg, #ff4d4f, #cf1322);
        }
        .toast.warning {
            background: linear-gradient(135deg, #faad14, #d48806);
        }
        .toast.info {
            background: linear-gradient(135deg, #1890ff, #096dd9);
        }
        .toast.toast-out {
            animation: toastOut 0.3s ease forwards;
        }
        @keyframes toastIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes toastOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }
            to {
                opacity: 0;
                transform: translateY(-20px);
            }
        }
        /* 确认对话框样式 */
        .toast-confirm-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 10001;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.2s ease;
        }
        .toast-confirm-overlay.fade-out {
            animation: fadeOut 0.2s ease forwards;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
        .toast-confirm-box {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            min-width: 280px;
            max-width: 320px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
            animation: scaleIn 0.2s ease;
        }
        .toast-confirm-box.scale-out {
            animation: scaleOut 0.2s ease forwards;
        }
        @keyframes scaleIn {
            from { transform: scale(0.9); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        @keyframes scaleOut {
            from { transform: scale(1); opacity: 1; }
            to { transform: scale(0.9); opacity: 0; }
        }
        .toast-confirm-message {
            font-size: 15px;
            color: #1e293b;
            text-align: center;
            margin-bottom: 20px;
            line-height: 1.5;
        }
        .toast-confirm-buttons {
            display: flex;
            gap: 12px;
        }
        .toast-confirm-btn {
            flex: 1;
            padding: 10px 16px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }
        .toast-confirm-btn.cancel {
            background: #f1f5f9;
            color: #64748b;
        }
        .toast-confirm-btn.cancel:hover {
            background: #e2e8f0;
        }
        .toast-confirm-btn.ok {
            background: linear-gradient(135deg, #ff4d4f, #cf1322);
            color: #fff;
        }
        .toast-confirm-btn.ok:hover {
            opacity: 0.9;
        }
    `;
    document.head.appendChild(style);

    // Toast容器
    let container = null;
    function getContainer() {
        if (!container) {
            container = document.createElement('div');
            container.className = 'toast-container';
            document.body.appendChild(container);
        }
        return container;
    }

    // 显示Toast
    function showToast(message, type, duration) {
        type = type || 'info';
        duration = duration || 3000;
        
        const toast = document.createElement('div');
        toast.className = 'toast ' + type;
        toast.textContent = message;
        
        const c = getContainer();
        c.appendChild(toast);
        
        // 自动移除
        setTimeout(function() {
            toast.classList.add('toast-out');
            setTimeout(function() {
                if (toast.parentNode) {
                    toast.parentNode.removeChild(toast);
                }
            }, 300);
        }, duration);
        
        return toast;
    }

    // 确认对话框
    function showConfirm(message) {
        return new Promise(function(resolve) {
            const overlay = document.createElement('div');
            overlay.className = 'toast-confirm-overlay';
            overlay.innerHTML = `
                <div class="toast-confirm-box">
                    <div class="toast-confirm-message">${message}</div>
                    <div class="toast-confirm-buttons">
                        <button class="toast-confirm-btn cancel">取消</button>
                        <button class="toast-confirm-btn ok">确定</button>
                    </div>
                </div>
            `;
            document.body.appendChild(overlay);

            const close = function(result) {
                overlay.classList.add('fade-out');
                const box = overlay.querySelector('.toast-confirm-box');
                if (box) box.classList.add('scale-out');
                setTimeout(function() {
                    if (overlay.parentNode) {
                        overlay.parentNode.removeChild(overlay);
                    }
                    resolve(result);
                }, 200);
            };

            overlay.querySelector('.cancel').addEventListener('click', function() {
                close(false);
            });
            overlay.querySelector('.ok').addEventListener('click', function() {
                close(true);
            });
            overlay.addEventListener('click', function(e) {
                if (e.target === overlay) {
                    close(false);
                }
            });
        });
    }

    // 便捷方法
    window.$toast = {
        success: function(msg, duration) { return showToast(msg, 'success', duration); },
        error: function(msg, duration) { return showToast(msg, 'error', duration); },
        warning: function(msg, duration) { return showToast(msg, 'warning', duration); },
        info: function(msg, duration) { return showToast(msg, 'info', duration); },
        show: function(msg, type, duration) { return showToast(msg, type, duration); },
        confirm: function(msg) { return showConfirm(msg); }
    };

    // 兼容Vue.prototype.$message风格
    window.$message = window.$toast;

})();