AnimationManager/client/js/export-view-manager.js

/**
 * 导出动画弹出框管理器
 * 负责管理 export-view iframe 的显示和隐藏
 */
class ExportViewManager {
    constructor() {
        this.frame = null;
        this.isShowing = false;
        this.resolveCallback = null;
        this.init();
    }

    init() {
        this.frame = document.getElementById('exportViewFrame');
        if (!this.frame) {
            // console.error('[ExportViewManager] exportViewFrame 未找到');
            return;
        }

        // 监听来自 export-view 的消息
        window.addEventListener('message', (event) => {
            if (event.origin !== window.location.origin) {
                return;
            }

            const { data } = event;
            if (data && data.type === 'close-export-view') {
                // console.log('[ExportViewManager] 收到关闭消息');
                this.hide();
            } else if (data && data.type === 'export-confirmed') {
                // console.log('[ExportViewManager] 用户确认导出');
                this.handleExportConfirmed(data);
            }
        });
    }

    /**
     * 显示导出弹出框
     * @param {string} folderName - 文件夹名称
     * @returns {Promise<boolean>} - 返回用户是否确认导出
     */
    async show(folderName) {
        // console.log('[ExportViewManager] → show() 被调用');
        // console.log('[ExportViewManager]   文件夹名称:', folderName);

        if (!this.frame) {
            // console.error('[ExportViewManager] frame 未初始化');
            return false;
        }

        return new Promise((resolve) => {
            this.resolveCallback = resolve;
            this.isShowing = true;

            // 显示 iframe
            this.frame.style.display = 'block';

            // 等待 iframe 加载完成后发送文件夹名称
            const sendFolderName = () => {
                if (this.frame.contentWindow) {
                    this.frame.contentWindow.postMessage({
                        type: 'generate-export-preview',
                        folderName: folderName
                    }, '*');
                    // console.log('[ExportViewManager] ✓ 已发送文件夹名称到 export-view');
                } else {
                    // 如果 iframe 还没加载完，等待一下再试
                    setTimeout(sendFolderName, 100);
                }
            };

            // 监听 iframe 加载完成
            const handleLoad = () => {
                // console.log('[ExportViewManager] ✓ iframe 加载完成');
                // 等待一小段时间确保 iframe 内容完全初始化
                setTimeout(() => {
                    sendFolderName();
                }, 100);
            };
            
            this.frame.onload = handleLoad;

            // 如果 iframe 已经加载，立即发送
            if (this.frame.contentDocument && this.frame.contentDocument.readyState === 'complete') {
                handleLoad();
            } else {
                // 重新加载 iframe 以确保它处于干净状态
                this.frame.src = this.frame.src;
            }
        });
    }

    /**
     * 隐藏导出弹出框
     */
    hide() {
        // console.log('[ExportViewManager] → hide() 被调用');
        
        if (this.frame) {
            this.frame.style.display = 'none';
        }
        
        this.isShowing = false;
        
        // 如果还有未完成的 Promise，返回 false（取消）
        if (this.resolveCallback) {
            this.resolveCallback(false);
            this.resolveCallback = null;
        }
    }

    /**
     * 处理用户确认导出
     * @param {Object} data - 导出数据
     */
    handleExportConfirmed(data) {
        // console.log('[ExportViewManager] 处理导出确认');
        
        if (this.resolveCallback) {
            this.resolveCallback(true);
            this.resolveCallback = null;
        }
        
        // 关闭弹出框
        this.hide();
    }
}

// 全局单例
// console.log('[ExportViewManager] 创建全局实例...');
window.ExportViewManager = new ExportViewManager();
// console.log('[ExportViewManager] ✓ 全局实例已创建');