my_one_web/static/js/dashboard.js

/**
 * OpenClaw Mission Control - Dashboard JavaScript
 * 作者：小白 🐶
 */

let currentSessionKey = null;

// 页面切换
document.querySelectorAll('.nav-item').forEach(item => {
    item.addEventListener('click', (e) => {
        e.preventDefault();
        
        // 移除所有活动状态
        document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
        document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
        
        // 添加当前活动状态
        item.classList.add('active');
        const pageId = 'page-' + item.dataset.page;
        document.getElementById(pageId).classList.add('active');
        
        // 如果是会话管理页面，加载数据
        if (item.dataset.page === 'sessions') {
            fetchSessions();
        }
    });
});

// 获取系统状态
async function fetchStatus() {
    try {
        const response = await fetch('/api/status');
        const result = await response.json();
        
        if (result.success) {
            const data = result.data;
            
            // 更新 CPU
            document.getElementById('cpu-percent').textContent = data.cpu.percent + '%';
            document.getElementById('cpu-progress').style.width = data.cpu.percent + '%';
            
            // 更新内存
            document.getElementById('memory-value').textContent = 
                `${data.memory.used} / ${data.memory.total} GB`;
            document.getElementById('memory-progress').style.width = data.memory.percent + '%';
            
            // 更新磁盘
            document.getElementById('disk-value').textContent = 
                `${data.disk.used} / ${data.disk.total} GB`;
            document.getElementById('disk-progress').style.width = data.disk.percent + '%';
            
            // 更新进程数
            document.getElementById('process-count').textContent = data.process_count;
        }
    } catch (error) {
        console.error('获取状态失败:', error);
    }
}

// 获取会话列表
async function fetchSessions() {
    const container = document.getElementById('sessions-list');
    container.innerHTML = '<div class="loading">加载中...</div>';
    
    try {
        const response = await fetch('/api/sessions');
        const result = await response.json();
        
        if (result.success && result.data.sessions) {
            if (result.data.sessions.length === 0) {
                container.innerHTML = '<div class="empty-message">暂无活跃会话</div>';
                return;
            }
            
            container.innerHTML = '';
            result.data.sessions.forEach(session => {
                const card = createSessionCard(session);
                container.appendChild(card);
            });
        } else {
            container.innerHTML = '<div class="error-message">加载失败: ' + (result.error || '未知错误') + '</div>';
        }
    } catch (error) {
        container.innerHTML = '<div class="error-message">加载失败: ' + error.message + '</div>';
    }
}

// 创建会话卡片
function createSessionCard(session) {
    const card = document.createElement('div');
    card.className = 'session-card';
    
    const updateTime = new Date(session.updatedAt).toLocaleString('zh-CN');
    const isActive = Date.now() - session.updatedAt < 300000; // 5分钟内活跃
    
    card.innerHTML = `
        <div class="session-header">
            <span class="session-icon">${session.kind === 'qqbot' ? '💬' : '🌐'}</span>
            <div class="session-info">
                <div class="session-name">${session.displayName || session.key.split(':').pop()}</div>
                <div class="session-meta">
                    <span class="channel">${session.channel || 'unknown'}</span>
                    <span class="model">${session.model || 'unknown'}</span>
                </div>
            </div>
            <span class="session-status ${isActive ? 'active' : 'inactive'}">
                ${isActive ? '活跃' : '离线'}
            </span>
        </div>
        <div class="session-details">
            <div class="detail-item">
                <span class="label">Token 使用:</span>
                <span class="value">${session.totalTokens || 0} / ${session.contextTokens || 0}</span>
            </div>
            <div class="detail-item">
                <span class="label">最后活动:</span>
                <span class="value">${updateTime}</span>
            </div>
        </div>
        <div class="session-actions">
            <button class="btn-view" onclick="viewSession('${session.key}')">📋 查看详情</button>
            <button class="btn-kill" onclick="confirmKillSession('${session.key}')">🗑️ 终止</button>
        </div>
    `;
    
    return card;
}

// 查看会话详情
async function viewSession(sessionKey) {
    currentSessionKey = sessionKey;
    const modal = document.getElementById('session-modal');
    const detail = document.getElementById('session-detail');
    
    modal.classList.add('show');
    detail.innerHTML = '<div class="loading">加载中...</div>';
    
    try {
        const response = await fetch(`/api/sessions/${encodeURIComponent(sessionKey)}`);
        const result = await response.json();
        
        if (result.success && result.data) {
            detail.innerHTML = `
                <div class="detail-section">
                    <h4>基本信息</h4>
                    <div class="detail-grid">
                        <div class="detail-item">
                            <span class="label">会话 Key:</span>
                            <span class="value code">${sessionKey}</span>
                        </div>
                        <div class="detail-item">
                            <span class="label">渠道:</span>
                            <span class="value">${result.data.channel || '-'}</span>
                        </div>
                        <div class="detail-item">
                            <span class="label">模型:</span>
                            <span class="value">${result.data.model || '-'}</span>
                        </div>
                    </div>
                </div>
                <div class="detail-section">
                    <h4>最近消息 (最近 ${result.data.messages?.length || 0} 条)</h4>
                    <div class="message-list">
                        ${(result.data.messages || []).map(msg => `
                            <div class="message-item ${msg.role}">
                                <span class="role">${msg.role === 'user' ? '👤 用户' : '🤖 助手'}</span>
                                <div class="content">${escapeHtml(msg.content?.substring(0, 200) || '')}${msg.content?.length > 200 ? '...' : ''}</div>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `;
        } else {
            detail.innerHTML = '<div class="error-message">加载失败</div>';
        }
    } catch (error) {
        detail.innerHTML = '<div class="error-message">加载失败: ' + error.message + '</div>';
    }
}

// 确认终止会话
function confirmKillSession(sessionKey) {
    if (confirm('确定要终止这个会话吗？此操作不可撤销。')) {
        killSession(sessionKey);
    }
}

// 终止当前会话
async function killCurrentSession() {
    if (currentSessionKey) {
        await killSession(currentSessionKey);
        closeSessionModal();
    }
}

// 终止会话
async function killSession(sessionKey) {
    try {
        const response = await fetch(`/api/sessions/${encodeURIComponent(sessionKey)}/kill`, {
            method: 'POST'
        });
        const result = await response.json();
        
        if (result.success) {
            alert('会话已终止');
            fetchSessions();
        } else {
            alert('终止失败: ' + (result.error || result.message));
        }
    } catch (error) {
        alert('终止失败: ' + error.message);
    }
}

// 关闭模态框
function closeSessionModal() {
    document.getElementById('session-modal').classList.remove('show');
    currentSessionKey = null;
}

// HTML 转义
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// 刷新状态
function refreshStatus() {
    fetchStatus();
}

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    fetchStatus();
    
    // 每 30 秒自动刷新
    setInterval(fetchStatus, 30000);
    
    // 点击模态框背景关闭
    document.getElementById('session-modal').addEventListener('click', (e) => {
        if (e.target.id === 'session-modal') {
            closeSessionModal();
        }
    });
});