// 提示消息组件 (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) }; })();