XNSim/XNSimHtml/components/content-area.js

class ContentArea extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.contentCache = new Map(); // 添加内容缓存Map
    }

    connectedCallback() {
        this.render();
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    height: 100%;
                    overflow: auto;
                }

                .content-container {
                    height: 100%;
                    padding: 0 10px;  /* 减小左右边距 */
                    box-sizing: border-box;
                }

                /* 为不同类型的内容设置不同的样式 */
                overview-page {
                    display: block;
                    padding: 0 10px;
                }

                update-history {
                    display: block;
                    padding: 0;
                }
            </style>
            <div class="content-container"></div>
        `;
    }

    loadContent(id) {
        const container = this.shadowRoot.querySelector('.content-container');
        
        // 先清空容器
        container.innerHTML = '';
        
        // 检查是否已有缓存的内容
        if (this.contentCache.has(id)) {
            try {
                // 如果已缓存，直接使用缓存的内容
                const cachedContent = this.contentCache.get(id);
                
                // 添加到DOM
                container.appendChild(cachedContent);
                
                // 如果组件有重新激活方法，调用它
                if (typeof cachedContent.reactivate === 'function') {
                    // 使用一个短延迟确保DOM已更新后再激活
                    requestAnimationFrame(() => {
                        try {
                            cachedContent.reactivate();
                        } catch (err) {
                            console.error(`激活组件 ${id} 时出错:`, err);
                        }
                    });
                }
            } catch (err) {
                console.error(`从缓存加载组件 ${id} 时出错:`, err);
                // 缓存加载失败，清除缓存并创建新组件
                this.clearCache(id);
                // 递归调用以创建新组件
                this.loadContent(id);
                return;
            }
            
            return;
        }
        
        // 如果没有缓存，创建新的内容
        let contentElement;
        
        switch (id) {
            case 'overview':
                contentElement = document.createElement('overview-page');
                break;
            case 'update-history':
                contentElement = document.createElement('update-history');
                break;
            case 'run-log':
                contentElement = document.createElement('run-log');
                break;
            case 'system-info':
                contentElement = document.createElement('system-info');
                break;
            case 'help':
                contentElement = document.createElement('help-component');
                break;
            case 'qa':
                contentElement = document.createElement('qa-component');
                break;
            case 'configuration-config':
                contentElement = document.createElement('configuration-config');
                break;
            case 'interface-config':
                contentElement = document.createElement('interface-config');
                break;
            case 'model-development':
                contentElement = document.createElement('model-development');
                break;
            case 'service-development':
                contentElement = document.createElement('service-development');
                break;
            case 'run-sim':
                contentElement = document.createElement('run-sim');
                break;
            case 'simulation-monitor':
                contentElement = document.createElement('simulation-monitor');
                break;
            case 'model-monitor':
                contentElement = document.createElement('model-monitor');
                break;
            case 'data-monitor':
                contentElement = document.createElement('data-monitor');
                break;
            case 'data-collection':
                contentElement = document.createElement('data-collection');
                break;
            case 'profile':
                contentElement = document.createElement('profile-center');
                break;
            case 'users':
                contentElement = document.createElement('user-management');
                break;
            case 'system-log':
                contentElement = document.createElement('system-log');
                break;
            case 'todo':
                contentElement = document.createElement('todo-component');
                break;
            default:
                contentElement = document.createElement('div');
                contentElement.textContent = '正在开发中...';
        }
        
        // 添加监听器，当内容被移出DOM时通知组件
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
                    Array.from(mutation.removedNodes).forEach((node) => {
                        if (node === contentElement && typeof contentElement.isActive === 'boolean') {
                            contentElement.isActive = false;
                        }
                    });
                }
            });
        });
        
        observer.observe(container, { childList: true });
        
        // 缓存内容组件
        this.contentCache.set(id, contentElement);
        
        // 添加到容器
        container.appendChild(contentElement);
    }
    
    // 清除特定标签页的缓存
    clearCache(id) {
        if (this.contentCache.has(id)) {
            this.contentCache.delete(id);
        }
    }
    
    // 清除所有缓存
    clearAllCache() {
        this.contentCache.clear();
    }
}

customElements.define('content-area', ContentArea);