AnimationManager/client/js/disk/alert.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() {
            await this.ensureElements();
            this.overlay = document.getElementById('alertOverlay');
            this.message = document.getElementById('alertMessage');
            this.startConnectionCheck();
        }

        async ensureElements() {
            if (document.getElementById('alertOverlay')) {
                return;
            }

            try {
                const response = await fetch('/page/alert-overlay.html', { cache: 'no-cache' });
                if (!response.ok) {
                    throw new Error('加载 Alert Overlay 组件失败');
                }
                const html = await response.text();
                document.body.insertAdjacentHTML('beforeend', html);
            } catch (error) {
                console.error('加载 Alert Overlay 组件失败:', error);
            }
        }

        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();
    // });
})();