CN-JS-HuiBai/PromdataPanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

修改结构

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-04 20:47:05 +08:00
parent 66244efcd7
commit 831d1d93c4
3 changed files with 13 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/css/style.css
View File

@@ -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 {

66
public/index.html
View File

@@ -173,12 +173,15 @@
<!-- Network Traffic 24h Chart -->
<div class="chart-card chart-card-wide" id="networkChart">
<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">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
</svg>
网络流量趋势 (24h)
</h2>
<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 -->

54
public/js/app.js
View File

@@ -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) {