frontend/js/right-section/right-section.js

// right-section.js
class RightSection {
    constructor() {
        this.currentTab = 'status-panel'; // 默认激活的标签
        
        // 初始化SettingsPanel，但不处理APIPanel
        setTimeout(() => {
            this.settingsPanel = new SettingsPanel();
            console.log('RightSection: SettingsPanel初始化完成');
        }, 200);
        
        this.init();
    }

    init() {
        this.initTabSwitching();
        
        // WebSocket监听
        window.addEventListener('websocket-message', (event) => {
            const message = event.detail;
            if (message.type === 'initial_data' && message.data.settings) {
                this.settingsPanel.updateSettings(message.data.settings);
            }
        });
    }

    initTabSwitching() {
        const tabButtons = document.querySelectorAll('.right-toolbar .tab-btn');
        
        tabButtons.forEach(button => {
            button.addEventListener('click', (e) => {
                e.preventDefault();
                
                const targetPanelId = button.getAttribute('data-target');
                
                tabButtons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');
                
                document.querySelectorAll('.tab-panel').forEach(panel => {
                    panel.classList.remove('active');
                });
                document.getElementById(targetPanelId).classList.add('active');
                
                this.currentTab = targetPanelId;
                
                // 让专门的tab事件处理器去处理API面板初始化
                // 不在这里做任何API面板相关的操作
            });
        });
    }
}

// 移除这个DOMContentLoaded事件监听器，避免重复初始化
// 改为导出类供index.html使用
window.RightSection = RightSection;

// 删除以下代码，避免重复初始化
// document.addEventListener('DOMContentLoaded', () => {
//     const rightSection = new RightSection();
// });