修改结构

public/css/style.css

@@ -522,7 +522,7 @@ input:checked + .slider:before {
 /* ---- Charts Section ---- */
 .charts-section {
   display: grid;
-  grid-template-columns: 1fr 360px;
+  grid-template-columns: 1fr;
   gap: 16px;
   margin-bottom: 24px;
 }
@@ -565,8 +565,8 @@ input:checked + .slider:before {
 
 .chart-legend {
   display: flex;
-  gap: 16px;
+  gap: 24px;
-  font-size: 0.75rem;
+  font-size: 0.8rem;
   color: var(--text-secondary);
 }
 
@@ -587,7 +587,7 @@ input:checked + .slider:before {
 
 .chart-body {
   padding: 12px 22px;
-  height: 220px;
+  height: 280px;
 }
 
 .chart-body canvas {

public/index.html

@@ -173,12 +173,15 @@
         <!-- Network Traffic 24h Chart -->
         <div class="chart-card chart-card-wide" id="networkChart">
           <div class="chart-card-header">
+            <div style="display: flex; align-items: center; gap: 16px;">
               <h2 class="chart-title">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="chart-title-icon">
                   <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
                 </svg>
                 网络流量趋势 (24h)
               </h2>
+              <span class="title-time" id="gaugesTime"></span>
+            </div>
             <div class="chart-legend">
               <span class="legend-item"><span class="legend-dot legend-rx"></span>接收 (RX)</span>
               <span class="legend-item"><span class="legend-dot legend-tx"></span>发送 (TX)</span>
@@ -202,57 +205,6 @@
             </div>
           </div>
         </div>
-
-        <!-- Resource Gauges -->
-        <div class="chart-card chart-card-gauges" id="gaugesCard">
-          <div class="chart-card-header">
-            <h2 class="chart-title">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="chart-title-icon">
-                <path d="M12 20V10M18 20V4M6 20v-4"/>
-              </svg>
-              <span class="title-time" id="gaugesTime"></span>
-              资源使用概览
-            </h2>
-          </div>
-          <div class="gauges-container">
-            <div class="gauge-wrapper">
-              <div class="gauge" id="gaugeCpu">
-                <svg viewBox="0 0 120 120">
-                  <circle class="gauge-bg" cx="60" cy="60" r="52"/>
-                  <circle class="gauge-fill gauge-fill-cpu" cx="60" cy="60" r="52" id="gaugeCpuFill"/>
-                </svg>
-                <div class="gauge-center">
-                  <span class="gauge-value" id="gaugeCpuValue">0%</span>
-                  <span class="gauge-label">CPU</span>
-                </div>
-              </div>
-            </div>
-            <div class="gauge-wrapper">
-              <div class="gauge" id="gaugeRam">
-                <svg viewBox="0 0 120 120">
-                  <circle class="gauge-bg" cx="60" cy="60" r="52"/>
-                  <circle class="gauge-fill gauge-fill-ram" cx="60" cy="60" r="52" id="gaugeRamFill"/>
-                </svg>
-                <div class="gauge-center">
-                  <span class="gauge-value" id="gaugeRamValue">0%</span>
-                  <span class="gauge-label">RAM</span>
-                </div>
-              </div>
-            </div>
-            <div class="gauge-wrapper">
-              <div class="gauge" id="gaugeDisk">
-                <svg viewBox="0 0 120 120">
-                  <circle class="gauge-bg" cx="60" cy="60" r="52"/>
-                  <circle class="gauge-fill gauge-fill-disk" cx="60" cy="60" r="52" id="gaugeDiskFill"/>
-                </svg>
-                <div class="gauge-center">
-                  <span class="gauge-value" id="gaugeDiskValue">0%</span>
-                  <span class="gauge-label">DISK</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </section>
 
       <!-- Server List -->

public/js/app.js

@@ -26,12 +26,6 @@
     traffic24hTx: document.getElementById('traffic24hTx'),
     traffic24hTotal: document.getElementById('traffic24hTotal'),
     networkCanvas: document.getElementById('networkCanvas'),
-    gaugeCpuFill: document.getElementById('gaugeCpuFill'),
-    gaugeRamFill: document.getElementById('gaugeRamFill'),
-    gaugeDiskFill: document.getElementById('gaugeDiskFill'),
-    gaugeCpuValue: document.getElementById('gaugeCpuValue'),
-    gaugeRamValue: document.getElementById('gaugeRamValue'),
-    gaugeDiskValue: document.getElementById('gaugeDiskValue'),
     serverTableBody: document.getElementById('serverTableBody'),
     btnSettings: document.getElementById('btnSettings'),
     settingsModal: document.getElementById('settingsModal'),
@@ -74,9 +68,6 @@
 
   // ---- Initialize ----
   function init() {
-    // Add SVG gradient definitions for gauges
-    addGaugeSvgDefs();
-
     // Resource Gauges Time
     updateGaugesTime();
     setInterval(updateGaugesTime, 1000);
@@ -260,36 +251,6 @@
     }
   }
 
-  // ---- Add SVG Gradient Defs ----
-  function addGaugeSvgDefs() {
-    const svgs = document.querySelectorAll('.gauge svg');
-    const gradients = [
-      { id: 'gaugeCpuGrad', colors: ['#6366f1', '#818cf8'] },
-      { id: 'gaugeRamGrad', colors: ['#06b6d4', '#22d3ee'] },
-      { id: 'gaugeDiskGrad', colors: ['#f59e0b', '#fbbf24'] }
-    ];
-
-    svgs.forEach((svg, i) => {
-      const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
-      const grad = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
-      grad.setAttribute('id', gradients[i].id);
-      grad.setAttribute('x1', '0%');
-      grad.setAttribute('y1', '0%');
-      grad.setAttribute('x1', '100%');
-      grad.setAttribute('y2', '100%');
-
-      gradients[i].colors.forEach((color, ci) => {
-        const stop = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
-        stop.setAttribute('offset', ci === 0 ? '0%' : '100%');
-        stop.setAttribute('stop-color', color);
-        grad.appendChild(stop);
-      });
-
-      defs.appendChild(grad);
-      svg.insertBefore(defs, svg.firstChild);
-    });
-  }
-
   // ---- Clock ----
   function updateClock() {
     if (dom.clock) {
@@ -344,11 +305,6 @@
     dom.traffic24hTx.textContent = formatBytes(data.traffic24h.tx);
     dom.traffic24hTotal.textContent = formatBytes(data.traffic24h.total || (data.traffic24h.rx + data.traffic24h.tx));
 
-    // Update gauges
-    updateGauge(dom.gaugeCpuFill, dom.gaugeCpuValue, cpuPct);
-    updateGauge(dom.gaugeRamFill, dom.gaugeRamValue, memPct);
-    updateGauge(dom.gaugeDiskFill, dom.gaugeDiskValue, diskPct);
-
     // Update server table
     updateServerTable(data.servers);
 
@@ -364,16 +320,6 @@
     previousMetrics = data;
   }
 
-  // ---- Gauge Update ----
-  const CIRCUMFERENCE = 2 * Math.PI * 52; // r=52
-
-  function updateGauge(fillEl, valueEl, percent) {
-    const clamped = Math.min(100, Math.max(0, percent));
-    const offset = CIRCUMFERENCE - (clamped / 100) * CIRCUMFERENCE;
-    fillEl.style.strokeDashoffset = offset;
-    valueEl.textContent = formatPercent(clamped);
-  }
-
   // ---- Server Table ----
   function updateServerTable(servers) {
     if (!servers || servers.length === 0) {