优化一点东西 懒得写了

This commit is contained in:
CN-JS-HuiBai
2026-04-04 22:35:05 +08:00
parent 286eb1687d
commit e77bdbcc9e
3 changed files with 217 additions and 98 deletions

View File

@@ -471,14 +471,25 @@
dom.detailUptime.textContent = `${days}${hours}小时 ${mins}`;
// Define metrics to show
const cpuValueHtml = `
<div style="display: flex; flex-direction: column; align-items: flex-end; gap: 2px;">
<span style="font-weight: 700;">${formatPercent(data.cpuBusy)}</span>
<div style="font-size: 0.65rem; color: var(--text-secondary); display: flex; gap: 6px; font-weight: normal;">
<span>Sys: ${data.cpuSystem.toFixed(1)}%</span>
<span>User: ${data.cpuUser.toFixed(1)}%</span>
<span>Wait: ${data.cpuIowait.toFixed(1)}%</span>
</div>
</div>
`;
const metrics = [
{ key: 'cpuBusy', label: 'CPU 忙碌率 (Busy)', value: formatPercent(data.cpuBusy) },
{ key: 'sysLoad', label: '系统负载 (Load)', value: data.sysLoad.toFixed(1) + '%' },
{ key: 'memUsedPct', label: '内存使用率 (RAM)', value: formatPercent(data.memUsedPct) },
{ key: 'swapUsedPct', label: 'SWAP 使用率', value: formatPercent(data.swapUsedPct) },
{ key: 'rootFsUsedPct', label: '根分区使用率 (/)', value: formatPercent(data.rootFsUsedPct) },
{ key: 'netRx', label: '网络接收速率 (RX)', value: formatBandwidth(data.netRx) },
{ key: 'netTx', label: '网络发送速率 (TX)', value: formatBandwidth(data.netTx) }
{ key: 'cpuBusy', label: 'CPU 使用率 (Busy Breakdown)', value: cpuValueHtml },
{ key: 'sysLoad', label: '系统负载 (Load)', value: data.sysLoad.toFixed(1) + '%' },
{ key: 'memUsedPct', label: '内存使用率 (RAM)', value: formatPercent(data.memUsedPct) },
{ key: 'swapUsedPct', label: 'SWAP 使用率', value: formatPercent(data.swapUsedPct) },
{ key: 'rootFsUsedPct', label: '根分区使用率 (/)', value: formatPercent(data.rootFsUsedPct) },
{ key: 'netRx', label: '网络接收速率 (RX)', value: formatBandwidth(data.netRx) },
{ key: 'netTx', label: '网络发送速率 (TX)', value: formatBandwidth(data.netTx) }
];
dom.detailMetricsList.innerHTML = metrics.map(m => `
@@ -512,7 +523,7 @@
</div>
</div>
</div>
<div class="detail-chart-wrapper">
<div class="detail-chart-wrapper" style="${m.key === 'cpuBusy' ? 'height: 260px;' : ''}">
<canvas id="chart-${m.key}"></canvas>
</div>
</div>