zhizhi/modules/m-channel/channel-router.js

// 频道路由（支持真实模块适配器 + 卡片列表首页 + 数据采集钩子）
window.ChannelRouter = {
    currentChannel: 'home',
    contentEl: null,
    
    init: function(contentElement) {
        this.contentEl = contentElement;
        console.log('[router] 初始化');
        
        const savedState = ChannelState.restoreState();
        if (savedState && savedState.currentChannel) {
            this.currentChannel = savedState.currentChannel;
        }
        
        this.loadChannel(this.currentChannel);
        
        if (savedState && savedState.visited) {
            savedState.visited.forEach(channel => {
                document.querySelectorAll('.channel-btn').forEach(btn => {
                    if (btn.dataset.channel === channel) {
                        btn.classList.add('visited');
                    }
                });
            });
        }

        // 页面关闭时结束计时
        window.addEventListener('beforeunload', function() {
            if (typeof ChannelAnalytics !== 'undefined') {
                ChannelAnalytics.endSession();
            }
        });
    },
    
    navigateTo: function(channel) {
        if (channel === this.currentChannel) return;
        
        console.log(`[router] 导航到: ${channel}`);
        
        this.contentEl.classList.add('fade-out');
        
        setTimeout(() => {
            this.loadChannel(channel);
            this.contentEl.classList.remove('fade-out');
            this.contentEl.classList.add('fade-in');
            setTimeout(() => {
                this.contentEl.classList.remove('fade-in');
            }, 300);
        }, 300);
        
        this.currentChannel = channel;
        
        document.querySelectorAll('.channel-btn').forEach(btn => {
            btn.classList.remove('active');
            if (btn.dataset.channel === channel) {
                btn.classList.add('active');
            }
        });
        
        ChannelState.saveState({
            currentChannel: channel,
            visited: this.getVisitedChannels()
        });
    },
    
    loadChannel: function(channel) {
        if (!this.contentEl) return;
        
        // 数据采集钩子：开始加载
        if (typeof ChannelAnalytics !== 'undefined') {
            ChannelAnalytics.markLoadStart();
            if (channel !== 'home' && channel !== 'debug' && channel !== 'dashboard' && channel !== 'settings') {
                ChannelAnalytics.recordVisit(channel);
            }
        }
        
        // 如果是真实模块（m06/m08/m11）
        if (channel === 'm06' || channel === 'm08' || channel === 'm11') {
            if (window.ModuleAdapter) {
                ModuleAdapter.loadModule(channel, 'channel-content');
                // 模块加载完成后记录加载时间
                setTimeout(() => {
                    if (typeof ChannelAnalytics !== 'undefined') {
                        ChannelAnalytics.markLoadEnd(channel);
                    }
                }, 100);
            } else {
                this.contentEl.innerHTML = '<div class="error-boundary">适配器未加载</div>';
            }
            ModuleLifecycle.onLoad(channel);
            return;
        }
        
        // 数据面板路由（环节8新增）
        if (channel === 'dashboard') {
            fetch('views/channel-dashboard.html')
                .then(response => response.text())
                .then(html => {
                    this.contentEl.innerHTML = html;
                    // 渲染图表
                    if (typeof ChannelDashboard !== 'undefined') {
                        ChannelDashboard.render();
                    }
                    ModuleLifecycle.onLoad('dashboard');
                    // 记录加载完成
                    if (typeof ChannelAnalytics !== 'undefined') {
                        ChannelAnalytics.markLoadEnd('dashboard');
                    }
                })
                .catch(err => {
                    this.contentEl.innerHTML = '<h2>数据面板加载失败</h2>';
                    console.error(err);
                });
            return;
        }
        
        // 设置中心路由（环节9新增）
        if (channel === 'settings') {
            fetch('views/channel-settings.html')
                .then(r => r.text())
                .then(html => {
                    this.contentEl.innerHTML = html;
                    if (typeof SettingsUI !== 'undefined') {
                        SettingsUI.init();
                    }
                    // 记录加载完成
                    if (typeof ChannelAnalytics !== 'undefined') {
                        ChannelAnalytics.markLoadEnd('settings');
                    }
                })
                .catch(err => {
                    this.contentEl.innerHTML = '<h2>设置面板加载失败</h2>';
                    console.error(err);
                });
            return;
        }
        
        // 内置频道
        if (channel === 'home') {
            this.renderModuleCards();
        } else if (channel === 'debug') {
            this.loadDebugPanel();
        } else {
            this.contentEl.innerHTML = '<h2>未知频道</h2>';
        }

        // 对于内置频道也记录加载完成
        if (typeof ChannelAnalytics !== 'undefined' && channel !== 'dashboard' && channel !== 'settings') {
            ChannelAnalytics.markLoadEnd(channel);
        }
    },
    
    // 渲染所有模块卡片（用于首页）
    renderModuleCards: function() {
        const modules = [
            { id: 'm06', name: '工单管理', icon: '📋', desc: '管理任务和工单' },
            { id: 'm08', name: '数据统计', icon: '📊', desc: '查看数据统计和报表' },
            { id: 'm11', name: '组件库', icon: '🧩', desc: '系统组件展示' },
            { id: 'debug', name: '调试面板', icon: '🐞', desc: '查看事件和模块状态' },
            { id: 'dashboard', name: '数据面板', icon: '📈', desc: '查看使用统计和性能' }
        ];
        
        let html = '<div class="module-grid">';
        modules.forEach(mod => {
            const isFavorite = window.ChannelPreferences ? 
                ChannelPreferences.getFavorites().includes(mod.id) : false;
            html += `
                <div class="module-card" data-module="${mod.id}">
                    <div class="module-card-header">
                        <span class="drag-handle">⋮⋮</span>
                        <span class="module-card-title">${mod.icon} ${mod.name}</span>
                        <span class="favorite-star ${isFavorite ? 'active' : ''}">${isFavorite ? '★' : '☆'}</span>
                    </div>
                    <div class="module-card-content">
                        <p>${mod.desc}</p>
                    </div>
                </div>
            `;
        });
        html += '</div>';
        
        this.contentEl.innerHTML = html;
        ModuleLifecycle.onLoad('home');
        
        // 触发收藏/拖拽重新初始化
        if (window.ChannelFavorites) {
            setTimeout(() => {
                ChannelFavorites.init();
                ChannelFavorites.initDragAndDrop();
            }, 100);
        }
    },
    
    loadDebugPanel: function() {
        fetch('views/channel-debug.html')
            .then(response => response.text())
            .then(html => {
                this.contentEl.innerHTML = html;
                ModuleLifecycle.onLoad('debug');
                this.initDebugPanel();
            })
            .catch(err => {
                this.contentEl.innerHTML = '<h2>调试面板加载失败</h2>';
            });
    },
    
    initDebugPanel: function() {
        const msgList = document.getElementById('debug-messages');
        if (msgList && window.debugMessages) {
            window.debugMessages.forEach(msg => {
                const li = document.createElement('li');
                li.textContent = `[${msg.time}] ${msg.event}: ${JSON.stringify(msg.data)}`;
                msgList.appendChild(li);
            });
        }
        const sendBtn = document.getElementById('debug-send');
        const input = document.getElementById('debug-input');
        if (sendBtn && input) {
            sendBtn.addEventListener('click', () => {
                const text = input.value.trim();
                if (text) {
                    EventBus.emit('debug:message', { text, from: '调试面板' });
                    input.value = '';
                }
            });
        }
        const clearBtn = document.getElementById('debug-clear');
        if (clearBtn) {
            clearBtn.addEventListener('click', () => {
                ChannelState.clearState();
                alert('状态已清除，刷新页面生效');
            });
        }
    },
    
    getVisitedChannels: function() {
        const visited = [];
        document.querySelectorAll('.channel-btn.visited').forEach(btn => {
            visited.push(btn.dataset.channel);
        });
        return visited;
    }
};