AnimationManager/client/js/alert-view.js

(() => {
    /**
     * 全局提示遮罩层管理
     * 用于服务器断开连接时阻止 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();
    // });
})();