diff --git a/public/css/style.css b/public/css/style.css index b073db3..6e8afc9 100644 --- a/public/css/style.css +++ b/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; - font-size: 0.75rem; + gap: 24px; + 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 { diff --git a/public/index.html b/public/index.html index edd1842..7a657ab 100644 --- a/public/index.html +++ b/public/index.html @@ -173,12 +173,15 @@
-

- - - - 网络流量趋势 (24h) -

+
+

+ + + + 网络流量趋势 (24h) +

+ +
接收 (RX) 发送 (TX) @@ -202,57 +205,6 @@
- - -
-
-

- - - - - 资源使用概览 -

-
-
-
-
- - - - -
- 0% - CPU -
-
-
-
-
- - - - -
- 0% - RAM -
-
-
-
-
- - - - -
- 0% - DISK -
-
-
-
-
diff --git a/public/js/app.js b/public/js/app.js index a5de77d..f31ccde 100644 --- a/public/js/app.js +++ b/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) {