feat: 实现会话管理功能

- 实现会话列表 API
- 实现会话详情 API
- 实现终止会话 API
- 添加会话管理页面 UI
- 添加会话管理样式
- 添加会话管理交互脚本

static/js/dashboard.js

@@ -3,6 +3,8 @@
  * 作者：小白 🐶
  */
 
+let currentSessionKey = null;
+
 // 页面切换
 document.querySelectorAll('.nav-item').forEach(item => {
     item.addEventListener('click', (e) => {
@@ -16,6 +18,11 @@ document.querySelectorAll('.nav-item').forEach(item => {
         item.classList.add('active');
         const pageId = 'page-' + item.dataset.page;
         document.getElementById(pageId).classList.add('active');
+        
+        // 如果是会话管理页面，加载数据
+        if (item.dataset.page === 'sessions') {
+            fetchSessions();
+        }
     });
 });
 
@@ -50,6 +57,174 @@ async function fetchStatus() {
     }
 }
 
+// 获取会话列表
+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();
@@ -61,4 +236,11 @@ document.addEventListener('DOMContentLoaded', () => {
     
     // 每 30 秒自动刷新
     setInterval(fetchStatus, 30000);
+    
+    // 点击模态框背景关闭
+    document.getElementById('session-modal').addEventListener('click', (e) => {
+        if (e.target.id === 'session-modal') {
+            closeSessionModal();
+        }
+    });
 });