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-05 17:55:21 +08:00
parent 144b9b817d
commit 34a10e3cd2
2 changed files with 35 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
public/js/app.js
View File

@@ -874,33 +874,7 @@
<span style="font-size: 0.7rem; color: var(--text-secondary); font-weight: normal;">(IO Wait: ${data.cpuIowait.toFixed(1)}%)</span>
</div>
`;
// Render partitions list if any
if (data.partitions && data.partitions.length > 0) {
dom.detailPartitionsContainer.style.display = 'block';
dom.partitionSummary.textContent = `${data.partitions.length} 个本地分区`;
// Remove old listener if any and add new toggle listener
dom.partitionHeader.onclick = (e) => {
e.stopPropagation();
dom.detailPartitionsContainer.classList.toggle('active');
};
dom.detailPartitionsList.innerHTML = data.partitions.map(p => `
<div class="partition-row">
<div class="partition-info">
<span class="partition-mount">${escapeHtml(p.mountpoint)}</span>
<span class="partition-usage-text">${formatBytes(p.used)} / ${formatBytes(p.size)} (${formatPercent(p.percent)})</span>
</div>
<div class="partition-progress">
<div class="partition-bar" style="width: ${Math.min(p.percent, 100)}%; background-color: ${getUsageColor(p.percent)};"></div>
</div>
</div>
`).join('');
} else {
dom.detailPartitionsContainer.style.display = 'none';
}
// Define metrics to show
const metrics = [
{ key: 'cpuBusy', label: 'CPU 使用率', value: cpuValueHtml },
{ key: 'memUsedPct', label: '内存使用率 (RAM)', value: formatPercent(data.memUsedPct) },
@@ -912,6 +886,7 @@
{ key: 'sockstatTcpMem', label: 'TCP 内存占用', value: formatBytes(data.sockstatTcpMem) }
];
// Render normal metrics
dom.detailMetricsList.innerHTML = metrics.map(m => `
<div class="metric-item" id="metric-${m.key}">
<div class="metric-item-header" onclick="toggleMetricExpand('${m.key}')">
@@ -923,7 +898,7 @@
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="metric-item-content">
<div class="metric-item-content" id="metrics-content-${m.key}">
<div class="chart-controls">
<div class="time-range-group">
<div class="time-range-selector">
@@ -949,6 +924,37 @@
</div>
</div>
`).join('');
// Handle partitions integration: Move the expandable partition section UNDER the Disk Usage metric
if (data.partitions && data.partitions.length > 0) {
dom.detailPartitionsContainer.style.display = 'block';
dom.partitionSummary.textContent = `${data.partitions.length} 个本地分区`;
// Find the disk metric item and insert the partition container after it
const diskMetricItem = document.getElementById('metric-rootFsUsedPct');
if (diskMetricItem) {
diskMetricItem.after(dom.detailPartitionsContainer);
}
dom.partitionHeader.onclick = (e) => {
e.stopPropagation();
dom.detailPartitionsContainer.classList.toggle('active');
};
dom.detailPartitionsList.innerHTML = data.partitions.map(p => `
<div class="partition-row">
<div class="partition-info">
<span class="partition-mount">${escapeHtml(p.mountpoint)}</span>
<span class="partition-usage-text">${formatBytes(p.used)} / ${formatBytes(p.size)} (${formatPercent(p.percent)})</span>
</div>
<div class="partition-progress">
<div class="partition-bar" style="width: ${Math.min(p.percent, 100)}%; background-color: ${getUsageColor(p.percent)};"></div>
</div>
</div>
`).join('');
} else {
dom.detailPartitionsContainer.style.display = 'none';
}
}
window.toggleMetricExpand = async function (metricKey) {