AnimationManager/client/js/hint-view.js

// 提示消息组件
(function() {
    let hintView = null;
    let hintMessage = null;
    let hideTimeout = null;

    function init() {
        // 如果 hint-view.html 已经加载，直接获取元素
        hintView = document.getElementById('hintView');
        hintMessage = document.getElementById('hintMessage');
        
        // 如果元素不存在，创建它们
        if (!hintView) {
            hintView = document.createElement('div');
            hintView.className = 'hint-view';
            hintView.id = 'hintView';
            
            hintMessage = document.createElement('span');
            hintMessage.className = 'hint-message';
            hintMessage.id = 'hintMessage';
            
            const hintContent = document.createElement('div');
            hintContent.className = 'hint-content';
            
            const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            icon.setAttribute('class', 'hint-icon');
            icon.setAttribute('width', '20');
            icon.setAttribute('height', '20');
            icon.setAttribute('viewBox', '0 0 20 20');
            icon.setAttribute('fill', 'currentColor');
            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            path.setAttribute('d', 'M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm-1 15l-5-5 1.41-1.41L9 12.17l7.59-7.59L18 6l-9 9z');
            icon.appendChild(path);
            
            hintContent.appendChild(icon);
            hintContent.appendChild(hintMessage);
            hintView.appendChild(hintContent);
            
            document.body.appendChild(hintView);
        }
    }

    function show(message, type = 'success', duration = 3000) {
        init();
        
        // 清除之前的定时器
        if (hideTimeout) {
            clearTimeout(hideTimeout);
            hideTimeout = null;
        }
        
        // 移除之前的类型类
        hintView.classList.remove('success', 'error', 'warning', 'info', 'show', 'hide');
        
        // 设置消息和类型
        hintMessage.textContent = message;
        hintView.classList.add(type);
        
        // 显示提示
        requestAnimationFrame(() => {
            hintView.classList.add('show');
        });
        
        // 自动隐藏
        hideTimeout = setTimeout(() => {
            hide();
        }, duration);
    }

    function hide() {
        if (!hintView) return;
        
        // 添加隐藏动画类
        hintView.classList.remove('show');
        hintView.classList.add('hide');
        
        // 动画结束后移除类
        setTimeout(() => {
            hintView.classList.remove('hide', 'success', 'error', 'warning', 'info');
            hintMessage.textContent = '';
        }, 300); // 与 CSS 动画时间一致
    }

    // 导出全局函数
    window.HintView = {
        show: show,
        hide: hide,
        success: (message, duration) => show(message, 'success', duration),
        error: (message, duration) => show(message, 'error', duration),
        warning: (message, duration) => show(message, 'warning', duration),
        info: (message, duration) => show(message, 'info', duration)
    };
})();