优化显示

public/css/style.css

@@ -1983,3 +1983,101 @@ input:checked+.slider:before {
     grid-template-columns: 1fr;
   }
 }
+
+/* ---- Network Summary Stats Premium Layout ---- */
+.network-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  padding: 8px 0;
+  margin: 12px 0;
+  animation: slideInDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.summary-stat-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: var(--radius-lg);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.summary-stat-item::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at top left, rgba(99, 102, 241, 0.05), transparent 70%);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.summary-stat-item:hover {
+  background: rgba(99, 102, 241, 0.08);
+  border-color: rgba(99, 102, 241, 0.3);
+  transform: translateY(-3px) scale(1.01);
+  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.5), 0 0 15px rgba(99, 102, 241, 0.1);
+}
+
+.summary-stat-item:hover::after {
+  opacity: 1;
+}
+
+.stat-icon-wrapper {
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  background: rgba(99, 102, 241, 0.15);
+  color: var(--accent-indigo);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  flex-shrink: 0;
+}
+
+.stat-rx .stat-icon-wrapper { background: rgba(34, 211, 238, 0.12); color: #22d3ee; }
+.stat-tx .stat-icon-wrapper { background: rgba(99, 102, 241, 0.12); color: #818cf8; }
+.stat-p95 .stat-icon-wrapper { background: rgba(244, 63, 94, 0.12); color: #fb7185; }
+.stat-total .stat-icon-wrapper { background: rgba(16, 185, 129, 0.12); color: #34d399; }
+
+.stat-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.summary-stat-label {
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 700;
+}
+
+.summary-stat-value {
+  font-size: 1.3rem;
+  font-weight: 800;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  letter-spacing: -0.01em;
+  line-height: 1;
+}
+
+@keyframes slideInDown {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 600px) {
+  .network-summary-grid {
+    grid-template-columns: 1fr;
+  }
+}

public/js/app.js

@@ -1083,21 +1083,41 @@
               wrapperDiv.style.display = 'none'; // Hide the chart canvas
               summaryDiv.innerHTML = `
                   <div class="network-summary-grid">
-                      <div class="summary-stat-item">
+                      <div class="summary-stat-item stat-rx">
-                          <span class="summary-stat-label">24h 接收总量</span>
+                          <div class="stat-icon-wrapper">
-                          <span class="summary-stat-value">${formatBytes(stats.rxTotal)}</span>
+                              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10l5 5 5-5M12 15V3"></path><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"></path></svg>
+                          </div>
+                          <div class="stat-info">
+                              <span class="summary-stat-label">24h 接收总量</span>
+                              <span class="summary-stat-value">${formatBytes(stats.rxTotal)}</span>
+                          </div>
                       </div>
-                      <div class="summary-stat-item">
+                      <div class="summary-stat-item stat-tx">
-                          <span class="summary-stat-label">24h 发送总量</span>
+                          <div class="stat-icon-wrapper">
-                          <span class="summary-stat-value">${formatBytes(stats.txTotal)}</span>
+                              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 14l-5-5-5 5M12 9v12"></path><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"></path></svg>
+                          </div>
+                          <div class="stat-info">
+                              <span class="summary-stat-label">24h 发送总量</span>
+                              <span class="summary-stat-value">${formatBytes(stats.txTotal)}</span>
+                          </div>
                       </div>
                       <div class="summary-stat-item stat-p95">
-                          <span class="summary-stat-label">95计费 (上行)</span>
+                          <div class="stat-icon-wrapper">
-                          <span class="summary-stat-value">${formatBandwidth(stats.p95)}</span>
+                              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M16 8l-8 8M12 7v10M7 12h10"></path></svg>
+                          </div>
+                          <div class="stat-info">
+                              <span class="summary-stat-label">95计费 (上行)</span>
+                              <span class="summary-stat-value">${formatBandwidth(stats.p95)}</span>
+                          </div>
                       </div>
                       <div class="summary-stat-item stat-total">
-                          <span class="summary-stat-label">24h 网络总流量</span>
+                          <div class="stat-icon-wrapper">
-                          <span class="summary-stat-value">${formatBytes(stats.total)}</span>
+                              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                          </div>
+                          <div class="stat-info">
+                              <span class="summary-stat-label">24h 网络总流量</span>
+                              <span class="summary-stat-value">${formatBytes(stats.total)}</span>
+                          </div>
                       </div>
                   </div>
               `;