NetBrain_MCP/web/static/js/session-manager.js

/**
 * 会话管理器模块
 * 
 * 负责管理设备连接会话，包括保存会话配置、加载会话和会话组管理
 */

class SessionManager {
    constructor() {
        this.activeSessions = {}; // 当前活跃会话
        this.savedSessions = {}; // 保存的会话配置
        this.sessionGroups = {}; // 会话组
        
        // 从本地存储加载保存的会话配置
        this.loadFromStorage();
    }
    
    /**
     * 将会话配置保存到本地存储
     */
    saveToStorage() {
        localStorage.setItem('netbrain_saved_sessions', JSON.stringify(this.savedSessions));
        localStorage.setItem('netbrain_session_groups', JSON.stringify(this.sessionGroups));
    }
    
    /**
     * 从本地存储加载会话配置
     */
    loadFromStorage() {
        try {
            const savedSessions = localStorage.getItem('netbrain_saved_sessions');
            const sessionGroups = localStorage.getItem('netbrain_session_groups');
            
            if (savedSessions) {
                this.savedSessions = JSON.parse(savedSessions);
            }
            
            if (sessionGroups) {
                this.sessionGroups = JSON.parse(sessionGroups);
            }
        } catch (error) {
            console.error('加载会话配置失败:', error);
        }
    }
    
    /**
     * 注册活跃会话
     * @param {string} sessionId 会话ID
     * @param {Object} sessionInfo 会话信息对象
     */
    registerActiveSession(sessionId, sessionInfo) {
        // 检查是否已存在相同的会话
        // 防止重复注册同一个设备和凭据的会话
        if (sessionInfo.deviceId && sessionInfo.credentialId) {
            const existingSessionIds = Object.keys(this.activeSessions);
            
            for (const existingId of existingSessionIds) {
                const existingSession = this.activeSessions[existingId];
                
                // 如果发现相同设备和凭据的活跃会话，则移除旧会话
                if (existingSession.deviceId === sessionInfo.deviceId && 
                    existingSession.credentialId === sessionInfo.credentialId &&
                    existingId !== sessionId) {
                    
                    console.log(`发现重复会话，正在移除旧会话 ${existingId}`);
                    delete this.activeSessions[existingId];
                }
            }
        }
        
        // 注册新会话
        this.activeSessions[sessionId] = {
            ...sessionInfo,
            startTime: sessionInfo.startTime || new Date(),
            status: sessionInfo.status || 'active'
        };
        
        // 输出调试信息
        console.log(`注册会话: ${sessionId}, 当前活跃会话数: ${Object.keys(this.activeSessions).length}`);
        
        this.notifySessionListeners();
    }
    
    /**
     * 注销活跃会话
     * @param {string} sessionId 会话ID
     */
    unregisterActiveSession(sessionId) {
        if (this.activeSessions[sessionId]) {
            delete this.activeSessions[sessionId];
            this.notifySessionListeners();
        }
    }
    
    /**
     * 更新会话状态
     * @param {string} sessionId 会话ID
     * @param {string} status 状态
     */
    updateSessionStatus(sessionId, status) {
        if (this.activeSessions[sessionId]) {
            this.activeSessions[sessionId].status = status;
            this.notifySessionListeners();
        }
    }
    
    /**
     * 保存会话配置
     * @param {string} name 会话名称
     * @param {Object} config 会话配置
     */
    saveSession(name, config) {
        this.savedSessions[name] = {
            ...config,
            createdAt: new Date().toISOString()
        };
        
        this.saveToStorage();
        this.notifySessionListeners();
        return true;
    }
    
    /**
     * 删除保存的会话配置
     * @param {string} name 会话名称
     */
    deleteSession(name) {
        if (this.savedSessions[name]) {
            delete this.savedSessions[name];
            
            // 同时从会话组中移除
            for (const groupName in this.sessionGroups) {
                const group = this.sessionGroups[groupName];
                const index = group.sessions.indexOf(name);
                if (index !== -1) {
                    group.sessions.splice(index, 1);
                }
            }
            
            this.saveToStorage();
            this.notifySessionListeners();
            return true;
        }
        return false;
    }
    
    /**
     * 创建会话组
     * @param {string} groupName 组名称
     * @param {Array} sessions 会话列表
     */
    createSessionGroup(groupName, sessions = []) {
        this.sessionGroups[groupName] = {
            name: groupName,
            sessions: sessions,
            createdAt: new Date().toISOString()
        };
        
        this.saveToStorage();
        this.notifySessionListeners();
        return true;
    }
    
    /**
     * 更新会话组
     * @param {string} groupName 组名称
     * @param {Array} sessions 会话列表
     */
    updateSessionGroup(groupName, sessions) {
        if (this.sessionGroups[groupName]) {
            this.sessionGroups[groupName].sessions = sessions;
            this.saveToStorage();
            this.notifySessionListeners();
            return true;
        }
        return false;
    }
    
    /**
     * 删除会话组
     * @param {string} groupName 组名称
     */
    deleteSessionGroup(groupName) {
        if (this.sessionGroups[groupName]) {
            delete this.sessionGroups[groupName];
            this.saveToStorage();
            this.notifySessionListeners();
            return true;
        }
        return false;
    }
    
    /**
     * 获取所有活跃会话
     * @returns {Object} 活跃会话对象
     */
    getActiveSessions() {
        return this.activeSessions;
    }
    
    /**
     * 获取所有保存的会话配置
     * @returns {Object} 保存的会话配置
     */
    getSavedSessions() {
        return this.savedSessions;
    }
    
    /**
     * 获取所有会话组
     * @returns {Object} 会话组对象
     */
    getSessionGroups() {
        return this.sessionGroups;
    }
    
    // 会话变更监听器列表
    sessionListeners = [];
    
    /**
     * 添加会话变更监听器
     * @param {Function} listener 监听器函数
     */
    addSessionListener(listener) {
        this.sessionListeners.push(listener);
    }
    
    /**
     * 移除会话变更监听器
     * @param {Function} listener 监听器函数
     */
    removeSessionListener(listener) {
        const index = this.sessionListeners.indexOf(listener);
        if (index !== -1) {
            this.sessionListeners.splice(index, 1);
        }
    }
    
    /**
     * 通知所有会话监听器
     */
    notifySessionListeners() {
        const data = {
            activeSessions: this.activeSessions,
            savedSessions: this.savedSessions,
            sessionGroups: this.sessionGroups
        };
        
        this.sessionListeners.forEach(listener => {
            try {
                listener(data);
            } catch (error) {
                console.error('会话监听器执行错误:', error);
            }
        });
    }
    
    /**
     * 连接到设备
     * @param {string} deviceId 设备ID
     * @param {string} credentialId 凭据ID
     * @param {string} name 会话名称
     * @returns {Object} 连接信息
     */
    async connectToDevice(deviceId, credentialId, name) {
        // 会话ID使用设备ID和凭据ID组合
        const sessionId = `${deviceId}_${credentialId}_${Date.now()}`;
        
        // 创建会话记录
        const sessionInfo = {
            id: sessionId,
            name: name,
            deviceId: deviceId,
            credentialId: credentialId,
            startTime: new Date(),
            status: 'connecting'
        };
        
        // 注册活跃会话
        this.registerActiveSession(sessionId, sessionInfo);
        
        return sessionInfo;
    }
}

/**
 * 会话管理UI类
 * 
 * 处理会话管理相关的UI交互
 */
class SessionManagerUI {
    constructor() {
        // 获取DOM元素
        this.activeSessionsList = document.getElementById('active-sessions-list');
        this.savedSessionsList = document.getElementById('saved-sessions-list');
        this.sessionGroupsList = document.getElementById('session-groups-list');
        
        // 获取会话操作按钮
        this.newSessionBtn = document.getElementById('new-session-btn');
        this.saveSessionBtn = document.getElementById('save-session-btn');
        this.manageGroupsBtn = document.getElementById('manage-groups-btn');
        
        // 绑定按钮事件
        if (this.newSessionBtn) {
            this.newSessionBtn.addEventListener('click', () => {
                // 显示连接对话框
                window.terminalManager.showConnectDialog();
            });
        }
        
        if (this.saveSessionBtn) {
            this.saveSessionBtn.addEventListener('click', () => {
                this.showSaveSessionDialog();
            });
        }
        
        if (this.manageGroupsBtn) {
            this.manageGroupsBtn.addEventListener('click', () => {
                this.showManageGroupsDialog();
            });
        }
        
        // 绑定保存会话表单提交事件
        const saveSessionForm = document.getElementById('save-session-form');
        if (saveSessionForm) {
            saveSessionForm.addEventListener('submit', (e) => {
                e.preventDefault();
                this.saveSession();
            });
        }
        
        // 绑定创建组按钮事件
        const createGroupBtn = document.getElementById('create-group-btn');
        if (createGroupBtn) {
            createGroupBtn.addEventListener('click', () => {
                this.createSessionGroup();
            });
        }
        
        // 绑定对话框关闭按钮事件
        document.querySelectorAll('.modal .close, .modal .close-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                document.querySelectorAll('.modal').forEach(modal => {
                    modal.style.display = 'none';
                });
            });
        });
        
        // 添加会话变更监听器
        if (window.sessionManager) {
            window.sessionManager.addSessionListener(this.updateUI.bind(this));
        }
        
        // 初始化UI
        this.updateUI({
            activeSessions: window.sessionManager?.getActiveSessions() || {},
            savedSessions: window.sessionManager?.getSavedSessions() || {},
            sessionGroups: window.sessionManager?.getSessionGroups() || {}
        });
    }
    
    // 更新UI
    updateUI(data) {
        const { activeSessions, savedSessions, sessionGroups } = data;
        
        // 更新活跃会话列表
        this.updateActiveSessionsList(activeSessions);
        
        // 更新保存的会话列表
        this.updateSavedSessionsList(savedSessions);
        
        // 更新会话组列表
        this.updateSessionGroupsList(sessionGroups, savedSessions);
    }
    
    // 更新活跃会话列表
    updateActiveSessionsList(activeSessions) {
        if (!this.activeSessionsList) return;
        
        this.activeSessionsList.innerHTML = '';
        
        const sessionIds = Object.keys(activeSessions);
        
        if (sessionIds.length === 0) {
            this.activeSessionsList.innerHTML = '<div class="session-empty">暂无活跃会话</div>';
            return;
        }
        
        // 使用Set避免重复会话
        const processedSessions = new Set();
        
        sessionIds.forEach(sessionId => {
            // 避免重复显示会话
            if (processedSessions.has(sessionId)) {
                console.warn(`会话ID ${sessionId} 已存在，避免重复显示`);
                return;
            }
            
            processedSessions.add(sessionId);
            
            const session = activeSessions[sessionId];
            const sessionItem = document.createElement('div');
            sessionItem.className = 'session-item';
            sessionItem.dataset.sessionId = sessionId; // 添加会话ID作为数据属性
            
            // 状态指示灯
            let statusClass = '';
            
            switch (session.status) {
                case 'active':
                    statusClass = 'status-active';
                    break;
                case 'connecting':
                    statusClass = 'status-connecting';
                    break;
                case 'disconnected':
                    statusClass = 'status-disconnected';
                    break;
                case 'error':
                    statusClass = 'status-error';
                    break;
                default:
                    statusClass = 'status-connecting';
                    break;
            }
            
            sessionItem.innerHTML = `
                <div class="session-item-content">
                    <div class="session-item-title">
                        <span class="status-indicator ${statusClass}"></span>
                        ${session.name}
                    </div>
                    <div class="session-item-details">
                        ${new Date(session.startTime).toLocaleTimeString()}
                    </div>
                </div>
                <div class="session-item-actions">
                    <button class="session-item-action save-session" title="保存会话">
                        <i class="fas fa-save"></i>
                    </button>
                    <button class="session-item-action close-session" title="关闭会话" data-session-id="${sessionId}">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            `;
            
            // 保存会话按钮
            sessionItem.querySelector('.save-session').addEventListener('click', () => {
                this.showSaveSessionDialog(session);
            });
            
            // 关闭会话按钮 - 修复关闭逻辑
            sessionItem.querySelector('.close-session').addEventListener('click', (event) => {
                const clickedSessionId = event.currentTarget.dataset.sessionId;
                console.log(`关闭会话: ${clickedSessionId}`);
                
                const termInfo = window.terminalManager.getTerminalById(clickedSessionId);
                if (termInfo) {
                    window.terminalManager.closeTerminal(clickedSessionId);
                } else {
                    // 如果没有找到对应的终端，直接注销会话
                    window.sessionManager.unregisterActiveSession(clickedSessionId);
                    // 手动更新UI
                    this.updateActiveSessionsList(window.sessionManager.getActiveSessions());
                }
            });
            
            this.activeSessionsList.appendChild(sessionItem);
        });
    }
    
    // 更新保存的会话列表
    updateSavedSessionsList(savedSessions) {
        if (!this.savedSessionsList) return;
        
        this.savedSessionsList.innerHTML = '';
        
        const sessionNames = Object.keys(savedSessions);
        
        if (sessionNames.length === 0) {
            this.savedSessionsList.innerHTML = '<div class="session-empty">暂无保存的会话</div>';
            return;
        }
        
        sessionNames.forEach(sessionName => {
            const session = savedSessions[sessionName];
            const sessionItem = document.createElement('div');
            sessionItem.className = 'session-item';
            
            sessionItem.innerHTML = `
                <div class="session-item-content">
                    <div class="session-item-title">${sessionName}</div>
                    <div class="session-item-details">
                        ${session.description || ''}
                    </div>
                </div>
                <div class="session-item-actions">
                    <button class="session-item-action connect-session" title="连接会话">
                        <i class="fas fa-plug"></i>
                    </button>
                    <button class="session-item-action delete-session" title="删除会话">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            `;
            
            // 连接会话按钮
            sessionItem.querySelector('.connect-session').addEventListener('click', () => {
                if (session.deviceId && session.credentialId) {
                    // 创建连接
                    window.terminalManager.createTerminal(
                        sessionName, 
                        session.deviceId, 
                        session.credentialId
                    );
                } else {
                    alert('无法连接会话：缺少设备ID或凭据ID');
                }
            });
            
            // 删除会话按钮
            sessionItem.querySelector('.delete-session').addEventListener('click', () => {
                if (confirm(`确定要删除保存的会话"${sessionName}"吗？`)) {
                    window.sessionManager.deleteSession(sessionName);
                }
            });
            
            this.savedSessionsList.appendChild(sessionItem);
        });
    }
    
    // 更新会话组列表
    updateSessionGroupsList(sessionGroups, savedSessions) {
        if (!this.sessionGroupsList) return;
        
        this.sessionGroupsList.innerHTML = '';
        
        const groupNames = Object.keys(sessionGroups);
        
        if (groupNames.length === 0) {
            this.sessionGroupsList.innerHTML = '<div class="session-empty">暂无会话组</div>';
            return;
        }
        
        groupNames.forEach(groupName => {
            const group = sessionGroups[groupName];
            const groupItem = document.createElement('div');
            groupItem.className = 'session-group-item';
            
            // 组标题
            const groupHeader = document.createElement('div');
            groupHeader.className = 'session-group-header';
            groupHeader.innerHTML = `
                <div class="session-item-title">
                    <i class="fas fa-folder"></i> ${groupName}
                </div>
                <div class="session-item-actions">
                    <button class="session-item-action toggle-group">
                        <i class="fas fa-chevron-down"></i>
                    </button>
                </div>
            `;
            
            // 组内容
            const groupContent = document.createElement('div');
            groupContent.className = 'session-group-content';
            
            // 添加组内会话
            if (group.sessions.length === 0) {
                groupContent.innerHTML = '<div class="session-empty">此组中没有会话</div>';
            } else {
                group.sessions.forEach(sessionName => {
                    if (savedSessions[sessionName]) {
                        const session = savedSessions[sessionName];
                        const sessionItem = document.createElement('div');
                        sessionItem.className = 'session-item';
                        
                        sessionItem.innerHTML = `
                            <div class="session-item-content">
                                <div class="session-item-title">${sessionName}</div>
                            </div>
                            <div class="session-item-actions">
                                <button class="session-item-action connect-session" title="连接会话">
                                    <i class="fas fa-plug"></i>
                                </button>
                            </div>
                        `;
                        
                        // 连接会话按钮
                        sessionItem.querySelector('.connect-session').addEventListener('click', () => {
                            if (session.deviceId && session.credentialId) {
                                // 创建连接
                                window.terminalManager.createTerminal(
                                    sessionName, 
                                    session.deviceId, 
                                    session.credentialId
                                );
                            } else {
                                alert('无法连接会话：缺少设备ID或凭据ID');
                            }
                        });
                        
                        groupContent.appendChild(sessionItem);
                    }
                });
            }
            
            // 切换组展开/折叠
            groupHeader.querySelector('.toggle-group').addEventListener('click', () => {
                groupContent.classList.toggle('active');
                const icon = groupHeader.querySelector('.toggle-group i');
                if (groupContent.classList.contains('active')) {
                    icon.className = 'fas fa-chevron-up';
                } else {
                    icon.className = 'fas fa-chevron-down';
                }
            });
            
            groupItem.appendChild(groupHeader);
            groupItem.appendChild(groupContent);
            this.sessionGroupsList.appendChild(groupItem);
        });
    }
    
    // 显示保存会话对话框
    showSaveSessionDialog(session) {
        const modal = document.getElementById('save-session-modal');
        modal.style.display = 'block';
        
        // 加载活跃会话列表到下拉框
        const activeSessionSelect = document.getElementById('active-session-select');
        if (activeSessionSelect) {
            activeSessionSelect.innerHTML = '<option value="">-- 请选择会话 --</option>';
            
            const activeSessions = window.sessionManager.getActiveSessions();
            for (const sessionId in activeSessions) {
                const s = activeSessions[sessionId];
                const option = document.createElement('option');
                option.value = sessionId;
                option.textContent = s.name;
                activeSessionSelect.appendChild(option);
                
                // 如果有指定的会话，则选中它
                if (session && sessionId === session.id) {
                    option.selected = true;
                }
            }
        }
        
        // 加载会话组列表到下拉框
        const sessionGroupSelect = document.getElementById('session-group');
        if (sessionGroupSelect) {
            sessionGroupSelect.innerHTML = '<option value="">-- 无分组 --</option>';
            
            const sessionGroups = window.sessionManager.getSessionGroups();
            for (const groupName in sessionGroups) {
                const option = document.createElement('option');
                option.value = groupName;
                option.textContent = groupName;
                sessionGroupSelect.appendChild(option);
            }
        }
        
        // 设置表单默认值
        if (session) {
            const sessionNameInput = document.getElementById('session-name');
            if (sessionNameInput) {
                sessionNameInput.value = session.name;
            }
        }
    }
    
    // 显示管理会话组对话框
    showManageGroupsDialog() {
        const modal = document.getElementById('manage-groups-modal');
        modal.style.display = 'block';
        
        this.updateGroupsManagerUI();
    }
    
    // 更新管理会话组对话框内容
    updateGroupsManagerUI() {
        const groupsList = document.getElementById('manage-groups-list');
        if (!groupsList) return;
        
        groupsList.innerHTML = '';
        
        const sessionGroups = window.sessionManager.getSessionGroups();
        const groupNames = Object.keys(sessionGroups);
        
        if (groupNames.length === 0) {
            groupsList.innerHTML = '<div class="group-empty">暂无会话组</div>';
            return;
        }
        
        groupNames.forEach(groupName => {
            const group = sessionGroups[groupName];
            const groupItem = document.createElement('div');
            groupItem.className = 'group-item';
            groupItem.innerHTML = `
                <div class="group-item-name">${groupName}</div>
                <div class="group-item-actions">
                    <button class="session-item-action edit-group" title="编辑组">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="session-item-action delete-group" title="删除组">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            `;
            
            // 编辑组按钮
            groupItem.querySelector('.edit-group').addEventListener('click', () => {
                this.showEditGroupDialog(groupName, group);
            });
            
            // 删除组按钮
            groupItem.querySelector('.delete-group').addEventListener('click', () => {
                if (confirm(`确定要删除会话组"${groupName}"吗？`)) {
                    window.sessionManager.deleteSessionGroup(groupName);
                    this.updateGroupsManagerUI();
                }
            });
            
            groupsList.appendChild(groupItem);
        });
    }
    
    // 显示编辑会话组对话框
    showEditGroupDialog(groupName, group) {
        // 实现编辑会话组功能
        alert(`编辑会话组功能开发中: ${groupName}`);
    }
    
    // 创建会话组
    createSessionGroup() {
        const groupNameInput = document.getElementById('new-group-name');
        if (!groupNameInput) return;
        
        const groupName = groupNameInput.value.trim();
        
        if (!groupName) {
            alert('请输入组名称');
            return;
        }
        
        if (window.sessionManager.getSessionGroups()[groupName]) {
            alert('已存在同名会话组');
            return;
        }
        
        window.sessionManager.createSessionGroup(groupName);
        groupNameInput.value = '';
        this.updateGroupsManagerUI();
    }
    
    // 保存会话
    saveSession() {
        const sessionId = document.getElementById('active-session-select')?.value;
        const sessionName = document.getElementById('session-name')?.value.trim();
        const sessionDesc = document.getElementById('session-description')?.value.trim();
        const groupName = document.getElementById('session-group')?.value;
        
        if (!sessionId || !sessionName) {
            alert('请选择会话并输入会话名称');
            return;
        }
        
        const activeSessions = window.sessionManager.getActiveSessions();
        const sessionInfo = activeSessions[sessionId];
        
        if (!sessionInfo) {
            alert('所选会话不存在');
            return;
        }
        
        // 保存会话配置
        const config = {
            name: sessionName,
            description: sessionDesc,
            deviceId: sessionInfo.deviceId,
            credentialId: sessionInfo.credentialId,
            originalId: sessionId
        };
        
        window.sessionManager.saveSession(sessionName, config);
        
        // 如果指定了会话组，添加到组
        if (groupName) {
            const groups = window.sessionManager.getSessionGroups();
            if (groups[groupName]) {
                const sessions = [...groups[groupName].sessions];
                if (!sessions.includes(sessionName)) {
                    sessions.push(sessionName);
                    window.sessionManager.updateSessionGroup(groupName, sessions);
                }
            }
        }
        
        // 关闭对话框
        document.getElementById('save-session-modal').style.display = 'none';
        
        // 重置表单
        document.getElementById('save-session-form')?.reset();
    }
}

// 原本在这里自动创建实例的代码已移除，改为在页面加载时统一创建