美化CPU显示

public/js/app.js

@@ -548,16 +548,14 @@
 
     // 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>I/O Wait: ${data.cpuIowait.toFixed(1)}%</span>
-            </div>
+        <div style="display: flex; align-items: baseline; gap: 8px;">
+            <span style="font-weight: 700; font-size: 1.1rem;">${formatPercent(data.cpuBusy)}</span>
+            <span style="font-size: 0.7rem; color: var(--text-secondary); font-weight: normal;">(IO Wait: ${data.cpuIowait.toFixed(1)}%)</span>
         </div>
     `;
 
     const metrics = [
-        { key: 'cpuBusy', label: 'CPU 使用率 (Busy / IO Wait)', value: cpuValueHtml },
+      { key: 'cpuBusy', label: 'CPU 使用率', 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) },
@@ -660,6 +658,14 @@
       const res = await fetch(url);
       if (!res.ok) throw new Error('Query failed');
       const data = await res.json();
+
+      if (metricKey === 'cpuBusy' && data.series) {
+        // Simplify: ONLY show total busy CPU usage (everything except idle)
+        // Since it's a percentage, 100 - idle is the total busy percentage
+        data.values = data.series.idle.map(idleVal => Math.max(0, 100 - idleVal));
+        data.series = null; // This tells MetricChart to draw a single line instead of stacked area
+      }
+
       chart.setData(data);
     } catch (err) {
       console.error(`Error loading history for ${metricKey}:`, err);