f1e4185c8f
- 创建 API Blueprint 模块结构 - 实现系统状态 API (CPU/内存/磁盘/进程) - 实现服务状态 API - 创建仪表盘页面模板 - 添加仪表盘 CSS 样式 - 添加仪表盘 JavaScript 交互 - 登录后自动跳转到仪表盘
107 lines
3.5 KiB
JavaScript
107 lines
3.5 KiB
JavaScript
/**
|
|
* 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);
|
|
});
|