feat: 实现 OpenClaw Mission Control 仪表盘框架

- 创建 API Blueprint 模块结构 - 实现系统状态 API (CPU/内存/磁盘/进程) - 实现服务状态 API - 创建仪表盘页面模板 - 添加仪表盘 CSS 样式 - 添加仪表盘 JavaScript 交互 - 登录后自动跳转到仪表盘
2026-03-12 20:42:12 +08:00
parent ed6d0133ae
commit f1e4185c8f
10 changed files with 935 additions and 3 deletions
--- a/static/js/dashboard.js
+++ b/static/js/dashboard.js
@@ -0,0 +1,106 @@
+/**
+ * OpenClaw Mission Control - Dashboard JavaScript
+ * 作者：小白 🐶
+ */
+
+// 页面切换
+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');
+    });
+});
+
+// 获取系统状态
+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 fetchServices() {
+    try {
+        const response = await fetch('/api/status/services');
+        const result = await response.json();
+        
+        if (result.success) {
+            const container = document.getElementById('services-grid');
+            container.innerHTML = '';
+            
+            const icons = {
+                'Flask': '🌐',
+                '思源笔记': '📝',
+                'Gitea': '📦',
+                'NocoDB': '📊',
+                'Memory Viewer': '🧠'
+            };
+            
+            result.data.forEach(service => {
+                const card = document.createElement('div');
+                card.className = 'service-card';
+                card.innerHTML = `
+                    <span class="icon">${icons[service.name] || '🔌'}</span>
+                    <div class="info">
+                        <div class="name">${service.name}</div>
+                        <div class="port">端口: ${service.port}</div>
+                    </div>
+                    <span class="status-badge ${service.status}">${
+                        service.status === 'running' ? '运行中' : 
+                        service.status === 'stopped' ? '已停止' : '未知'
+                    }</span>
+                `;
+                container.appendChild(card);
+            });
+        }
+    } catch (error) {
+        console.error('获取服务状态失败:', error);
+    }
+}
+
+// 刷新状态
+function refreshStatus() {
+    fetchStatus();
+    fetchServices();
+}
+
+// 初始化
+document.addEventListener('DOMContentLoaded', () => {
+    fetchStatus();
+    fetchServices();
+    
+    // 每 30 秒自动刷新
+    setInterval(fetchStatus, 30000);
+});