(() => { /** * 全局提示遮罩层管理 * 用于服务器断开连接时阻止 UI 交互并显示重连状态 */ class AlertView { constructor(options = {}) { this.overlay = null; this.message = null; this.checkInterval = options.checkInterval || 3000; // 检测间隔 this.pingUrl = options.pingUrl || '/api/disk/list?path='; // 用于检测连接的接口 this.isConnected = true; this.reconnectTimer = null; this.init(); } async init() { // 直接使用 DOM 中的元素,不再需要 fetch 加载 this.overlay = document.getElementById('alertOverlay'); this.message = document.getElementById('alertOverlayMessage'); // 如果元素不存在,等待 DOM 加载完成 if (!this.overlay || !this.message) { await this.waitForElements(); } this.startConnectionCheck(); } async waitForElements() { // 等待元素出现(最多等待 1 秒) const maxWait = 1000; const startTime = Date.now(); while (!this.overlay || !this.message) { if (Date.now() - startTime > maxWait) { console.error('Alert Overlay 元素未找到'); return; } await new Promise(resolve => setTimeout(resolve, 50)); this.overlay = document.getElementById('alertOverlay'); this.message = document.getElementById('alertOverlayMessage'); } } show(msg) { if (this.overlay) { if (msg && this.message) { this.message.textContent = msg; } this.overlay.classList.add('show'); } } hide() { if (this.overlay) { this.overlay.classList.remove('show'); } } startConnectionCheck() { // 定期检测服务器连接 setInterval(() => this.checkConnection(), this.checkInterval); } async checkConnection() { try { const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 5000); const response = await fetch(this.pingUrl, { method: 'GET', signal: controller.signal }); clearTimeout(timeoutId); if (response.ok) { if (!this.isConnected) { // 重连成功 this.isConnected = true; this.hide(); this.onReconnected(); } } else { this.handleDisconnect(); } } catch (error) { this.handleDisconnect(); } } handleDisconnect() { if (this.isConnected) { this.isConnected = false; this.show('服务器断开连接,正在重连...'); this.startReconnect(); } } startReconnect() { if (this.reconnectTimer) { clearInterval(this.reconnectTimer); } // 每 2 秒尝试重连一次 this.reconnectTimer = setInterval(() => { this.tryReconnect(); }, 2000); } async tryReconnect() { try { const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 5000); const response = await fetch(this.pingUrl, { method: 'GET', signal: controller.signal }); clearTimeout(timeoutId); if (response.ok) { // 重连成功 clearInterval(this.reconnectTimer); this.reconnectTimer = null; this.isConnected = true; this.hide(); this.onReconnected(); } } catch (error) { // 重连失败,继续尝试 } } onReconnected() { // 重连成功后刷新页面数据 if (window.diskManager && typeof window.diskManager.loadFiles === 'function') { window.diskManager.loadFiles(); } } } // 导出到全局 window.AlertView = AlertView; // 页面加载完成后自动初始化(已禁用) // document.addEventListener('DOMContentLoaded', () => { // window.alertView = new AlertView(); // }); })();