优化设计

public/index.html

@@ -466,7 +466,7 @@
             <div class="detail-metrics-list" id="detailMetricsList"></div>
 
             <div class="detail-partitions-container metric-item" id="detailPartitionsContainer"
-              style="display: none; margin: 10px;">
+              style="display: none;">
               <div class="metric-item-header" id="partitionHeader">
                 <div class="metric-label-group">
                   <span class="metric-label">磁盘分区详情 (已挂载)</span>

public/js/app.js

@@ -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>
     `;
-    
+    // Define metrics to show
-    // 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';
-    }
-
     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) {