Update public/index.html

public/index.html

@@ -4,269 +4,193 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>HF Space Manager</title>
+  <!-- 引入 Chart.js CDN -->
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
-  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M13 21h-2v-11h2v11zm4 0h-2v-7h2v7zm4 0h-2v-4h2v4zm-16 0h-2v-14h2v14zm4 0h-2v-18h2v18z'/%3E%3C/svg%3E" type="image/svg+xml">
   <style>
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
     * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
     body {
-      font-family: 'Inter', "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-      background: var(--background-color);
-      color: var(--text-color);
-      padding: 25px 20px;
+      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
+      background: #f5f7fa; /* 参考截图，使用浅灰色背景 */
+      color: #333;
+      padding: 20px;
       min-height: 100vh;
       transition: background 0.3s ease, color 0.3s ease;
-      line-height: 1.6;
     }
     :root {
-      --background-color: #0a0a0a;
-      --text-color: #e0e0e0;
-      --card-background: #181818;
-      --card-border: rgba(255, 255, 255, 0.08);
-      --metric-background: #282828;
-      --metric-border: rgba(255, 255, 255, 0.05);
-      --metric-hover: #383838;
-      --secondary-text: #b0b0b0;
-      --label-color: #808080;
-      --network-background: rgba(255, 255, 255, 0.05);
-      --action-button-bg: #3a3a3a;
-      --action-button-hover: #4a4a4a;
-      --action-button-text: #e0e0e0;
-      --accent-color: #4CAF50;
-      --error-color: #f44336;
-      --warning-color: #ffa500;
-      --success-color: #4CAF50;
-      --overlay-background: rgba(0, 0, 0, 0.8);
-    }
-    [data-theme="light"] {
-      --background-color: #f0f2f5;
+      /* 浅色模式变量 */
+      --background-color: #f5f7fa;
       --text-color: #333;
-      --card-background: #ffffff;
-      --card-border: rgba(0, 0, 0, 0.1);
-      --metric-background: #e8ebef;
-      --metric-border: rgba(0, 0, 0, 0.05);
-      --metric-hover: #dadec3;
-      --secondary-text: #555;
-      --label-color: #888;
+      --card-background: #fff;
+      --card-border: #e8ecef;
+      --metric-background: #f9f9fb;
+      --metric-border: #e8ecef;
+      --metric-hover: #f1f3f5;
+      --secondary-text: #666;
+      --label-color: #999;
       --network-background: rgba(0, 0, 0, 0.05);
-      --action-button-bg: #ddd;
-      --action-button-hover: #ccc;
-      --action-button-text: #333;
-      --accent-color: #4CAF50;
-      --error-color: #f44336;
-      --warning-color: #ffa500;
-      --success-color: #4CAF50;
-      --overlay-background: rgba(0, 0, 0, 0.5);
+      --action-button-bg: linear-gradient(90deg, #34c759, #28a745); /* 绿色渐变按钮 */
+      --action-button-hover: linear-gradient(90deg, #2eb850, #23963d);
     }
     .container {
-      max-width: 1200px;
+      max-width: 1400px;
       margin: 0 auto;
-      animation: fadeIn 0.6s ease;
+      animation: fadeIn 0.5s ease;
       padding: 0 15px;
     }
     .overview {
       background: var(--card-background);
-      border-radius: 12px;
-      padding: 25px;
-      margin-bottom: 30px;
+      border-radius: 15px;
+      padding: 20px;
+      margin-bottom: 25px;
       border: 1px solid var(--card-border);
-      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
-      transition: background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 添加阴影 */
+      transition: background 0.3s ease, border 0.3s ease;
     }
     .overview-title {
-      font-size: 22px;
-      font-weight: 600;
+      font-size: 20px;
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 20px;
       color: var(--text-color);
+      font-weight: 600;
     }
-    .header-container {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 20px;
-      flex-wrap: wrap;
-      gap: 15px;
-    }
-    .auth-buttons {
-      display: flex;
-      gap: 10px;
+    .overview-title svg {
+      width: 24px;
+      height: 24px;
+      fill: #34c759; /* 绿色图标 */
     }
     .theme-toggle {
       display: flex;
       align-items: center;
-      gap: 8px;
-      margin-bottom: 20px;
+      gap: 10px;
+      margin-bottom: 15px;
       font-size: 14px;
       color: var(--secondary-text);
     }
-    .theme-toggle span {
-      font-weight: 500;
-      margin-right: 4px;
-    }
     .theme-toggle button {
       background: var(--metric-background);
       border: 1px solid var(--metric-border);
       color: var(--text-color);
-      padding: 8px;
-      border-radius: 8px;
+      padding: 6px;
+      border-radius: 6px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 36px;
-      height: 36px;
-      transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
-      outline: none;
+      width: 32px;
+      height: 32px;
+      transition: background 0.2s ease, transform 0.2s ease;
     }
     .theme-toggle button:hover {
       background: var(--metric-hover);
-      border-color: var(--metric-border);
-      transform: translateY(-1px);
-    }
-    .theme-toggle button:active {
-      transform: translateY(0);
-    }
-    .theme-toggle button:focus-visible {
-      outline: 2px solid var(--accent-color);
-      outline-offset: 2px;
+      transform: scale(1.05);
     }
     .theme-toggle svg {
       width: 18px;
       height: 18px;
-      fill: var(--secondary-text);
-      transition: fill 0.3s ease;
-    }
-    .theme-toggle button[data-active="true"] {
-      background: var(--accent-color);
-      border-color: var(--accent-color);
-    }
-    .theme-toggle button[data-active="true"] svg {
-      fill: #fff;
+      fill: var(--text-color);
     }
     #summary {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-      gap: 15px;
+      grid-template-columns: repeat(6, 1fr);
+      gap: 24px; /* 增加卡片间距 */
     }
     #summary div {
       background: var(--metric-background);
-      padding: 15px;
-      border-radius: 8px;
+      padding: 16px;
+      border-radius: 12px;
       border: 1px solid var(--metric-border);
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); /* 添加阴影 */
       transition: background 0.3s ease, border 0.3s ease;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
+      text-align: center;
     }
     #summary div {
-      font-size: 13px;
+      font-size: 14px;
       color: var(--secondary-text);
     }
     #summary span {
       display: block;
-      font-size: 24px;
-      font-weight: 700;
-      margin-top: 6px;
+      font-size: 24px; /* 增大数字字体 */
+      font-weight: bold;
+      margin-top: 8px;
       color: var(--text-color);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      width: 100%;
+    }
+    #summary .no-data {
+      color: #999;
+      font-size: 16px;
+      margin-top: 8px;
     }
     .stats-container {
-      display: flex;
-      flex-direction: column;
-      gap: 25px;
-      margin-top: 25px;
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 20px;
+      margin-top: 20px;
     }
     .user-group {
       background: var(--card-background);
-      border-radius: 12px;
+      border-radius: 10px;
       border: 1px solid var(--card-border);
       overflow: hidden;
       transition: background 0.3s ease, border 0.3s ease;
     }
     .user-group summary {
-      padding: 18px 25px;
-      font-weight: 600;
+      padding: 15px;
+      font-weight: bold;
       cursor: pointer;
       color: var(--text-color);
       background: var(--metric-background);
       transition: background 0.2s ease;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
     }
     .user-group summary:hover {
       background: var(--metric-hover);
     }
-    .user-group summary::marker,
     .user-group summary::-webkit-details-marker {
-      display: none;
-    }
-    .user-group {
-      position: relative;
-    }
-    .user-group summary::after {
-      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="%23b0b0b0"><path d="M18.59 10.59L12 17.17 5.41 10.59 4 12l8 8 8-8z"/></svg>');
-      display: inline-block;
-      margin-left: 10px;
-      transform: rotate(0deg);
-      transition: transform 0.2s ease;
-      fill: var(--secondary-text);
-    }
-    .user-group[open] summary::after {
-      transform: rotate(180deg);
-    }
-    [data-theme="light"] .user-group summary::after {
-      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="%23555"><path d="M18.59 10.59L12 17.17 5.41 10.59 4 12l8 8 8-8z"/></svg>');
+      color: var(--text-color);
     }
     .user-servers {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      grid-template-columns: repeat(2, 1fr);
       gap: 15px;
-      padding: 20px 25px 25px;
+      padding: 15px;
     }
     .server-card {
       background: var(--metric-background);
-      border-radius: 10px;
-      padding: 18px;
+      border-radius: 8px;
+      padding: 15px;
       border: 1px solid var(--metric-border);
       transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease, border 0.3s ease;
-      min-height: 160px;
+      min-height: 150px;
       display: flex;
       flex-direction: column;
-      justify-content: space-between;
+    }
+    .server-card.not-logged-in {
+      min-height: 120px;
     }
     .server-card:hover {
-      transform: translateY(-3px);
-      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+      transform: translateY(-2px);
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
     }
     .server-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 15px;
-      font-size: 15px;
-      flex-wrap: wrap;
-      gap: 10px;
+      margin-bottom: 10px;
+      font-size: 14px;
     }
     .server-name {
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 8px;
       flex: 1;
       min-width: 0;
-      font-weight: 600;
-      color: var(--text-color);
     }
     .server-name div {
       overflow: hidden;
@@ -278,27 +202,20 @@
       width: 20px;
       height: 20px;
       border-radius: 4px;
-      border: 1px solid rgba(0, 0, 0, 0.1);
       flex-shrink: 0;
-      fill: var(--label-color);
     }
     .metric-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
+      grid-template-columns: repeat(5, 1fr);
       gap: 10px;
-      margin-top: 15px;
-    }
-    @media (max-width: 400px) {
-      .metric-grid {
-        grid-template-columns: repeat(2, 1fr);
-      }
+      margin-top: 10px;
     }
     .metric-item {
       background: var(--card-background);
-      padding: 10px;
+      padding: 8px;
       border-radius: 6px;
       border: 1px solid var(--metric-border);
-      transition: background 0.3s ease, border 0.3s ease;
+      transition: background 0.3s ease;
       overflow: hidden;
     }
     .metric-item:hover {
@@ -307,126 +224,87 @@
     .metric-label {
       color: var(--label-color);
       font-size: 12px;
-      margin-bottom: 4px;
+      margin-bottom: 3px;
       white-space: nowrap;
-      font-weight: 500;
     }
     .metric-value {
-      font-size: 15px;
-      font-weight: 600;
-      color: var(--text-color);
+      font-size: 14px;
+      font-weight: 500;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       max-width: 100%;
     }
-    .metric-value.status-running { color: var(--success-color); }
-    .metric-value.status-sleeping { color: var(--warning-color); }
-    .metric-value.status-stopped { color: var(--error-color); }
     .status-dot {
       display: inline-block;
       border-radius: 50%;
+      animation: pulse 2s infinite;
       width: 10px;
       height: 10px;
       flex-shrink: 0;
-      margin-right: 5px;
     }
-    .status-dot.status-online {
-      background-color: var(--success-color);
-      animation: pulse 2s infinite;
-      box-shadow: 0 0 0 rgba(76, 175, 80, 0.4);
+    .status-online {
+      background-color: #34c759;
+      color: #34c759;
     }
-    .status-dot.status-offline {
-      background-color: var(--error-color);
+    .status-offline {
+      background-color: #f44336;
+      color: #f44336;
     }
-    .status-dot.status-sleep {
-      background-color: var(--warning-color);
+    .status-sleep {
+      background-color: #ffa500;
+      color: #ffa500;
       animation: none;
     }
-    @keyframes pulse {
-      0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
-      70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
-      100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
-    }
     .action-buttons {
       display: flex;
-      gap: 8px;
-      margin-top: 15px;
-      padding-top: 15px;
-      border-top: 1px solid var(--metric-border);
+      gap: 10px;
+      margin-top: 10px;
     }
     .action-button {
       background: var(--action-button-bg);
-      color: var(--action-button-text);
+      color: #fff;
       border: none;
-      padding: 8px 14px;
-      border-radius: 6px;
+      padding: 6px 12px;
+      border-radius: 4px;
       cursor: pointer;
       font-size: 13px;
-      font-weight: 500;
-      transition: background 0.2s ease, transform 0.1s ease;
-      outline: none;
-      flex-shrink: 0;
+      transition: background 0.2s ease;
     }
     .action-button:hover {
       background: var(--action-button-hover);
-      transform: translateY(-1px);
-    }
-    .action-button:active {
-      transform: translateY(0);
-    }
-    .action-button:focus-visible {
-      outline: 2px solid var(--accent-color);
-      outline-offset: 2px;
     }
     .network-stats {
       background: var(--network-background);
       border: 1px solid var(--metric-border);
-      margin-top: 20px;
+      margin-top: 10px;
       padding: 15px;
       border-radius: 8px;
+      display: flex;
+      justify-content: space-between;
       transition: background 0.3s ease, border 0.3s ease;
+    }
+    .network-item {
       font-size: 14px;
       color: var(--secondary-text);
-      display: flex;
-      gap: 20px;
-      flex-wrap: wrap;
     }
-    .network-stats strong {
+    .network-item span {
       color: var(--text-color);
-      font-weight: 600;
-      margin-right: 5px;
+      font-weight: 500;
     }
     @keyframes fadeIn {
       from { opacity: 0; transform: translateY(20px); }
       to { opacity: 1; transform: translateY(0); }
     }
-    @media (max-width: 768px) {
-      body {
-        padding: 20px 15px;
-      }
-      .overview {
-        padding: 20px;
-        margin-bottom: 20px;
-      }
-      .overview-title {
-        font-size: 20px;
-        margin-bottom: 15px;
-      }
-      .header-container {
-        flex-direction: column;
-        align-items: flex-start;
-      }
-      .auth-buttons {
-        width: 100%;
-        justify-content: flex-end;
-      }
-      .theme-toggle {
-        margin-bottom: 15px;
-      }
+    @keyframes pulse {
+      0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
+      70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
+      100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
+    }
+    @media (max-width: 600px) {
       #summary {
-        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-        gap: 12px;
+        grid-template-columns: 1fr;
+        gap: 16px;
       }
       #summary div {
         padding: 12px;
@@ -434,54 +312,132 @@
       #summary span {
         font-size: 20px;
       }
-      .user-group summary {
-        padding: 15px 20px;
-      }
       .user-servers {
-        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-        gap: 12px;
-        padding: 15px 20px 20px;
-      }
-      .server-card {
-        padding: 15px;
-      }
-      .server-header {
-        font-size: 14px;
-        margin-bottom: 10px;
+        grid-template-columns: 1fr !important;
       }
       .metric-grid {
+        grid-template-columns: repeat(2, 1fr);
         gap: 8px;
       }
       .metric-item {
-        padding: 8px;
-      }
-      .metric-label {
-        font-size: 11px;
+        padding: 6px;
       }
       .metric-value {
-        font-size: 14px;
+        font-size: 13px;
       }
-      .action-button {
-        padding: 7px 12px;
-        font-size: 12px;
+      .server-header {
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 8px;
       }
-      .network-stats {
-        padding: 12px;
-        gap: 15px;
+      .container {
+        padding: 0 10px;
+      }
+      .overview {
+        padding: 15px;
+        margin-bottom: 20px;
       }
     }
+    .login-overlay, .confirm-overlay, .loading-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.6);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+      display: none;
+    }
+    .login-box, .confirm-box {
+      background: var(--card-background);
+      padding: 30px;
+      border-radius: 10px;
+      border: 1px solid var(--card-border);
+      width: 300px;
+      text-align: center;
+    }
+    .login-box h2, .confirm-box h2 {
+      margin-bottom: 20px;
+      color: var(--text-color);
+    }
+    .login-box input {
+      width: 100%;
+      padding: 10px;
+      margin: 10px 0;
+      border: 1px solid var(--metric-border);
+      border-radius: 5px;
+      background: var(--metric-background);
+      color: var(--text-color);
+    }
+    .login-box button, .confirm-box button {
+      width: 48%;
+      padding: 10px;
+      background: var(--action-button-bg);
+      border: none;
+      border-radius: 5px;
+      color: #fff;
+      cursor: pointer;
+      transition: background 0.2s ease;
+      margin: 5px 1%;
+    }
+    .login-box button:hover, .confirm-box button:hover {
+      background: var(--action-button-hover);
+    }
+    .login-error {
+      color: #f44336;
+      margin-top: 10px;
+      font-size: 14px;
+    }
+    .login-button, .logout-button {
+      background: var(--action-button-bg);
+      border: none;
+      color: #fff;
+      padding: 6px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 13px;
+      transition: background 0.2s ease;
+    }
+    .login-button:hover, .logout-button:hover {
+      background: var(--action-button-hover);
+    }
+    .header-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 15px;
+    }
+    .auth-buttons {
+      display: flex;
+      gap: 10px;
+    }
+    .loader {
+      border: 5px solid var(--card-background);
+      border-top: 5px solid #34c759;
+      border-radius: 50%;
+      width: 50px;
+      height: 50px;
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
     .filter-sort-panel {
       background: var(--card-background);
       border: 1px solid var(--card-border);
-      border-radius: 12px;
-      padding: 20px;
-      margin-bottom: 25px;
+      border-radius: 10px;
+      padding: 15px;
+      margin-bottom: 20px;
       display: flex;
       flex-wrap: wrap;
       gap: 15px;
       align-items: center;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
       transition: background 0.3s ease, border 0.3s ease;
-      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     }
     .filter-sort-group {
       display: flex;
@@ -490,260 +446,108 @@
       font-size: 14px;
       color: var(--text-color);
       min-width: 200px;
-      flex-basis: calc(50% - 10px);
-      flex-grow: 1;
-      max-width: 300px;
-    }
-    @media (max-width: 768px) {
-      .filter-sort-group {
-        flex-basis: 100%;
-        max-width: 100%;
-      }
-      .refresh-button {
-        width: 100%;
-        justify-content: center;
-      }
     }
     .filter-sort-group label {
       white-space: nowrap;
       color: var(--secondary-text);
       font-weight: 500;
-      min-width: 60px;
     }
     .filter-sort-group select {
       flex: 1;
       background: var(--metric-background);
       border: 1px solid var(--metric-border);
       color: var(--text-color);
-      padding: 10px 12px;
+      padding: 8px 12px;
       border-radius: 6px;
       cursor: pointer;
       font-size: 14px;
-      font-weight: 500;
-      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+      transition: background 0.2s ease, border 0.2s ease;
       outline: none;
       appearance: none;
-      background-image: url("data:image/svg+xml;utf8,<svg fill='%23b0b0b0' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
+      background-image: url("data:image/svg+xml;utf8,<svg fill='%23333' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
       background-repeat: no-repeat;
       background-position: right 10px center;
       padding-right: 36px;
     }
-    [data-theme="light"] .filter-sort-group select {
-      background-image: url("data:image/svg+xml;utf8,<svg fill='%23555' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
-    }
     .filter-sort-group select:hover {
       background-color: var(--metric-hover);
-      border-color: rgba(255, 255, 255, 0.15);
+      border-color: #d1d5db;
     }
     .filter-sort-group select:focus {
-      border-color: var(--accent-color);
-      box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
+      border-color: #34c759;
+      box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.3);
     }
     .refresh-button {
-      background: var(--accent-color);
+      background: var(--action-button-bg);
       border: none;
       color: #fff;
-      padding: 10px 18px;
+      padding: 8px 16px;
       border-radius: 6px;
       cursor: pointer;
       font-size: 14px;
-      font-weight: 500;
-      transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
+      transition: background 0.2s ease, transform 0.2s ease;
       display: flex;
       align-items: center;
       gap: 8px;
       height: 40px;
-      outline: none;
-    }
-    .refresh-button:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
     }
-    .refresh-button:hover:not(:disabled) {
-      background: #3a8d40;
+    .refresh-button:hover {
+      background: var(--action-button-hover);
       transform: translateY(-1px);
     }
-    .refresh-button:active:not(:disabled) {
-      transform: translateY(0);
-    }
-    .refresh-button:focus-visible:not(:disabled) {
-      outline: 2px solid #fff;
-      outline-offset: 2px;
+    .refresh-button.loading .refresh-icon {
+      animation: spin 1s linear infinite;
     }
     .refresh-icon {
       width: 16px;
       height: 16px;
       fill: currentColor;
     }
-    .refresh-button.loading .refresh-icon {
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
+    @media (max-width: 600px) {
+      .filter-sort-group {
+        min-width: 100%;
+      }
+      .filter-sort-panel {
+        gap: 12px;
+        padding: 12px;
+      }
     }
     .chart-container {
       display: none;
       margin-top: 15px;
-      background: var(--metric-background);
-      border: 1px solid var(--metric-border);
+      background: var(--card-background);
+      border: 1px solid var(--card-border);
       border-radius: 8px;
-      padding: 8px;
-      height: 280px;
+      padding: 10px;
+      height: 300px;
       transition: background 0.3s ease, border 0.3s ease;
     }
-    .server-card.expanded .chart-container {
-      display: block;
-    }
-    canvas {
-      width: 100% !important;
-      height: 100% !important;
-    }
-    @media (max-width: 600px) {
-      .chart-container {
-        height: 220px;
-      }
-    }
     .chart-toggle-button {
-      background: var(--action-button-bg);
-      color: var(--action-button-text);
-      border: none;
+      background: var(--metric-background);
+      color: var(--text-color);
+      border: 1px solid var(--metric-border);
       padding: 6px 12px;
       border-radius: 4px;
       cursor: pointer;
-      font-size: 12px;
-      transition: background 0.2s ease, transform 0.1s ease;
+      font-size: 13px;
+      transition: background 0.2s ease;
       margin-left: auto;
       white-space: nowrap;
-      outline: none;
     }
     .chart-toggle-button:hover {
-      background: var(--action-button-hover);
-      transform: translateY(-1px);
-    }
-    .chart-toggle-button:active {
-      transform: translateY(0);
-    }
-    .chart-toggle-button:focus-visible {
-      outline: 2px solid var(--accent-color);
-      outline-offset: 2px;
-    }
-    .login-overlay, .confirm-overlay, .loading-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: var(--overlay-background);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 1000;
-      visibility: hidden;
-      opacity: 0;
-      transition: opacity 0.3s ease, visibility 0.3s ease;
-    }
-    .login-overlay.visible, .confirm-overlay.visible, .loading-overlay.visible {
-      visibility: visible;
-      opacity: 1;
-    }
-    .login-box, .confirm-box {
-      background: var(--card-background);
-      padding: 30px;
-      border-radius: 10px;
-      border: 1px solid var(--card-border);
-      width: 90%;
-      max-width: 380px;
-      text-align: center;
-      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
-      transform: scale(0.95);
-      transition: transform 0.3s ease;
-    }
-    .login-overlay.visible .login-box,
-    .confirm-overlay.visible .confirm-box {
-      transform: scale(1);
-    }
-    .login-box h2, .confirm-box h2 {
-      margin-bottom: 25px;
-      color: var(--text-color);
-      font-size: 20px;
-      font-weight: 600;
-    }
-    .login-box input {
-      width: 100%;
-      padding: 12px;
-      margin: 8px 0;
-      border: 1px solid var(--metric-border);
-      border-radius: 6px;
-      background: var(--metric-background);
-      color: var(--text-color);
-      font-size: 15px;
-      transition: border-color 0.2s ease, box-shadow 0.2s ease;
-      outline: none;
-    }
-    .login-box input::placeholder {
-      color: var(--secondary-text);
-      opacity: 0.7;
-    }
-    .login-box input:focus {
-      border-color: var(--accent-color);
-      box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
-    }
-    .login-box .button-group, .confirm-box .button-group {
-      display: flex;
-      justify-content: space-between;
-      gap: 10px;
-      margin-top: 20px;
-    }
-    .login-box button, .confirm-box button {
-      flex: 1;
-      padding: 12px;
-      background: var(--action-button-bg);
-      border: none;
-      border-radius: 6px;
-      color: var(--action-button-text);
-      cursor: pointer;
-      font-size: 15px;
-      font-weight: 500;
-      transition: background 0.2s ease, transform 0.1s ease;
-      outline: none;
-    }
-    .confirm-box button:first-child {
-      background: var(--accent-color);
-      color: #fff;
-    }
-    .confirm-box button:first-child:hover {
-      background: #3a8d40;
-    }
-    .login-box button:hover, .confirm-box button:hover {
-      background: var(--action-button-hover);
-      transform: translateY(-1px);
-    }
-    .login-box button:active, .confirm-box button:active {
-      transform: translateY(0);
-    }
-    .login-box button:focus-visible, .confirm-box button:focus-visible {
-      outline: 2px solid var(--accent-color);
-      outline-offset: 2px;
+      background: var(--metric-hover);
     }
-    .login-error {
-      color: var(--error-color);
-      margin-top: 15px;
-      font-size: 14px;
-      min-height: 20px;
+    .expanded .chart-container {
+      display: block;
     }
-    .confirm-box p {
-      line-height: 1.5;
-      font-size: 15px;
-      color: var(--secondary-text);
+    canvas {
+      width: 100% !important;
+      height: auto !important;
     }
-    .loader {
-      border: 5px solid rgba(255, 255, 255, 0.3);
-      border-top: 5px solid #fff;
-      border-radius: 50%;
-      width: 50px;
-      height: 50px;
-      animation: spin 0.8s linear infinite;
+    @media (max-width: 600px) {
+      .chart-container {
+        height: 250px;
+      }
     }
   </style>
 </head>
@@ -751,14 +555,20 @@
   <div class="container">
     <div class="overview">
       <div class="header-container">
-        <div class="overview-title">📊 系统概览</div>
+        <div class="overview-title">
+          <!-- 使用图表图标，与截图一致 -->
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M3 3h18v18H3V3zm2 2v14h14V5H5zm2 2h2v10H7V7zm4 4h2v6h-2v-6zm4-4h2v10h-2V7z"/>
+          </svg>
+          系统概览
+        </div>
         <div class="auth-buttons">
           <button class="login-button" id="loginButton" onclick="showLoginForm()">登录</button>
           <button class="logout-button" id="logoutButton" style="display: none;" onclick="logout()">登出</button>
         </div>
       </div>
       <div class="theme-toggle">
-        <span>主题:</span>
+        主题:
         <button onclick="toggleTheme('system')" title="跟随系统">
           <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
             <path d="M3 5h18c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2zm0 12h18V7H3v10zm2-8h2v2H5V9zm0 4h2v2H5v-2zm4-4h10v2H9V9zm0 4h10v2H9v-2z"/>
@@ -776,16 +586,17 @@
         </button>
       </div>
       <div id="summary">
-        <div>总用户数 <span id="totalUsers">0</span></div>
-        <div>总实例数 <span id="totalServers">0</span></div>
-        <div>在线实例 <span id="onlineServers">0</span></div>
-        <div>离线实例 <span id="offlineServers">0</span></div>
-        <div>总上传 <span id="totalUpload">0 B/s</span></div>
-        <div>总下载 <span id="totalDownload">0 B/s</span></div>
+        <div>总用户数: <span id="totalUsers">0</span><div class="no-data" id="totalUsersNoData" style="display: none;">暂无数据</div></div>
+        <div>总实例数: <span id="totalServers">0</span><div class="no-data" id="totalServersNoData" style="display: none;">暂无数据</div></div>
+        <div>在线实例: <span id="onlineServers">0</span><div class="no-data" id="onlineServersNoData" style="display: none;">暂无数据</div></div>
+        <div>离线实例: <span id="offlineServers">0</span><div class="no-data" id="offlineServersNoData" style="display: none;">暂无数据</div></div>
+        <div>总上传: <span id="totalUpload">0 B/s</span><div class="no-data" id="totalUploadNoData" style="display: none;">暂无数据</div></div>
+        <div>总下载: <span id="totalDownload">0 B/s</span><div class="no-data" id="totalDownloadNoData" style="display: none;">暂无数据</div></div>
       </div>
       <div class="network-stats">
-        目前总上传速度: <strong id="totalUpload2">0 B/s</strong>
-        目前总下载速度: <strong id="totalDownload2">0 B/s</strong>
+        <div class="network-item">当前在线上传速度: <span id="currentUploadSpeed">0 B/s</span></div>
+        <div class="network-item">当前在线下行速度: <span id="currentDownloadSpeed">0 B/s</span></div>
+        <div class="network-item">最后更新: <span id="lastUpdated">未知</span></div>
       </div>
     </div>
     <div class="filter-sort-panel">
@@ -820,14 +631,15 @@
         刷新数据
       </button>
     </div>
-    <div id="servers" class="stats-container"></div>
+    <div id="servers" class="stats-container">
+    </div>
   </div>
   <div id="loginOverlay" class="login-overlay">
     <div class="login-box">
       <h2>登录</h2>
-      <input type="text" id="username" placeholder="用户名" autocomplete="username">
-      <input type="password" id="password" placeholder="密码" autocomplete="current-password">
-      <div class="button-group">
+      <input type="text" id="username" placeholder="用户名">
+      <input type="password" id="password" placeholder="密码">
+      <div style="display: flex; justify-content: center; gap: 10px; margin-top: 20px;">
         <button onclick="login()">登录</button>
         <button onclick="hideLoginForm()">取消</button>
       </div>
@@ -837,54 +649,36 @@
   <div id="confirmOverlay" class="confirm-overlay">
     <div class="confirm-box">
       <h2 id="confirmTitle">确认操作</h2>
-      <p id="confirmMessage" style="margin-bottom: 20px; color: var(--secondary-text);"></p>
-      <div class="button-group">
-        <button onclick="confirmAction()">确认</button>
-        <button onclick="cancelAction()">取消</button>
-      </div>
+      <p id="confirmMessage" style="margin-bottom: 20px; color: var(--text-color);"></p>
+      <button onclick="confirmAction()">确认</button>
+      <button onclick="cancelAction()">取消</button>
     </div>
   </div>
   <div id="loadingOverlay" class="loading-overlay">
     <div class="loader"></div>
   </div>
   <script>
-    // 日志函数，便于调试
-    function logDebug(message) {
-      console.log(`[DEBUG] ${new Date().toISOString()}: ${message}`);
-    }
-    function logError(message) {
-      console.error(`[ERROR] ${new Date().toISOString()}: ${message}`);
-    }
-
-    // 主题切换
+    // 主题切换功能（保持原有逻辑）
     function setTheme(theme) {
-      logDebug(`设置主题: ${theme}`);
-      const htmlElement = document.documentElement;
-      const themeToggleButtons = document.querySelectorAll('.theme-toggle button');
-      themeToggleButtons.forEach(button => {
-        button.removeAttribute('data-active');
-      });
       if (theme === 'system') {
         localStorage.removeItem('theme');
         const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        htmlElement.setAttribute('data-theme', systemPrefersDark ? 'dark' : 'light');
-        document.querySelector('.theme-toggle button[title="跟随系统"]').setAttribute('data-active', 'true');
+        document.documentElement.setAttribute('data-theme', systemPrefersDark ? 'dark' : 'light');
       } else {
         localStorage.setItem('theme', theme);
-        htmlElement.setAttribute('data-theme', theme);
-        document.querySelector(`.theme-toggle button[title="${theme === 'light' ? '浅色模式' : '深色模式'}"]`).setAttribute('data-active', 'true');
+        document.documentElement.setAttribute('data-theme', theme);
       }
     }
     function toggleTheme(theme) {
       setTheme(theme);
     }
     function initTheme() {
-      logDebug('初始化主题...');
       const savedTheme = localStorage.getItem('theme');
       if (savedTheme) {
         setTheme(savedTheme);
       } else {
-        setTheme('system');
+        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        setTheme(systemPrefersDark ? 'dark' : 'light');
       }
     }
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
@@ -894,114 +688,98 @@
     });
     initTheme();
 
-    // 全局状态
+    // 全局变量
     let isLoggedIn = false;
-    let allInstances = [];
-    const serverStatus = new Map();
-    const instanceMap = new Map();
-    const chartInstances = new Map();
+    let lastUpdatedTime = null;
 
-    // 加载状态控制
+    // 加载状态控制函数
     function showLoading() {
-      logDebug('显示加载中...');
-      document.getElementById('loadingOverlay').classList.add('visible');
-      document.getElementById('refreshButton').classList.add('loading');
-      document.getElementById('refreshButton').disabled = true;
+      document.getElementById('loadingOverlay').style.display = 'flex';
+      const refreshButton = document.getElementById('refreshButton');
+      refreshButton.classList.add('loading');
+      refreshButton.disabled = true;
     }
     function hideLoading() {
-      logDebug('隐藏加载中...');
-      document.getElementById('loadingOverlay').classList.remove('visible');
-      document.getElementById('refreshButton').classList.remove('loading');
-      document.getElementById('refreshButton').disabled = false;
+      document.getElementById('loadingOverlay').style.display = 'none';
+      const refreshButton = document.getElementById('refreshButton');
+      refreshButton.classList.remove('loading');
+      refreshButton.disabled = false;
     }
 
-    // 登录状态管理
-    async function checkLoginStatus() {
-      logDebug('检查登录状态...');
+    // 登录状态管理（保持原有逻辑）
+    function checkLoginStatus() {
       const token = localStorage.getItem('authToken');
       const loginButton = document.getElementById('loginButton');
       const logoutButton = document.getElementById('logoutButton');
       if (token) {
-        logDebug('找到本地 token，尝试验证...');
         showLoading();
-        try {
-          const response = await fetch('/api/verify-token', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ token })
-          });
-          const data = await response.json();
+        return fetch('/api/verify-token', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ token })
+        })
+        .then(response => response.json())
+        .then(data => {
           hideLoading();
           if (data.success) {
-            logDebug('Token 验证成功，用户已登录');
             isLoggedIn = true;
             loginButton.style.display = 'none';
             logoutButton.style.display = 'block';
             updateActionButtons(true);
-            return true;
           } else {
-            logDebug('Token 验证失败或过期，清除本地存储: ' + data.message);
             localStorage.removeItem('authToken');
             isLoggedIn = false;
             loginButton.style.display = 'block';
             logoutButton.style.display = 'none';
             updateActionButtons(false);
-            return false;
           }
-        } catch (error) {
+          return data.success;
+        })
+        .catch(error => {
           hideLoading();
-          logError('验证 token 请求失败，清除本地存储: ' + error.message);
           localStorage.removeItem('authToken');
           isLoggedIn = false;
           loginButton.style.display = 'block';
           logoutButton.style.display = 'none';
           updateActionButtons(false);
           return false;
-        }
+        });
       } else {
-        logDebug('本地存储中无 token，设置为未登录状态');
         isLoggedIn = false;
         loginButton.style.display = 'block';
         logoutButton.style.display = 'none';
         updateActionButtons(false);
-        return false;
+        return Promise.resolve(false);
       }
     }
 
     function showLoginForm() {
-      logDebug('显示登录表单');
-      document.getElementById('loginOverlay').classList.add('visible');
+      document.getElementById('loginOverlay').style.display = 'flex';
       document.getElementById('username').value = '';
       document.getElementById('password').value = '';
       document.getElementById('loginError').style.display = 'none';
     }
     function hideLoginForm() {
-      logDebug('隐藏登录表单');
-      document.getElementById('loginOverlay').classList.remove('visible');
+      document.getElementById('loginOverlay').style.display = 'none';
     }
-    async function login() {
-      logDebug('尝试登录...');
+    function login() {
       const username = document.getElementById('username').value;
       const password = document.getElementById('password').value;
       const loginError = document.getElementById('loginError');
-      if (!username || !password) {
-        loginError.textContent = '请输入用户名和密码';
-        loginError.style.display = 'block';
-        return;
-      }
       showLoading();
-      try {
-        logDebug('发送登录请求...');
-        const response = await fetch('/api/login', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ username, password })
-        });
-        const data = await response.json();
-        logDebug('收到登录响应: ' + JSON.stringify(data));
+      fetch('/api/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ username, password })
+      })
+      .then(response => response.json())
+      .then(data => {
         hideLoading();
-        if (data && data.success) {
-          logDebug('登录成功，保存 token');
+        if (data.success) {
           localStorage.setItem('authToken', data.token);
           isLoggedIn = true;
           hideLoginForm();
@@ -1010,31 +788,29 @@
           updateActionButtons(true);
           refreshData();
         } else {
-          logDebug('登录失败: ' + (data.message || '未知错误'));
-          loginError.textContent = data.message || '登录失败，请检查用户名和密码';
+          loginError.textContent = data.message || '登录失败';
           loginError.style.display = 'block';
         }
-      } catch (error) {
+      })
+      .catch(error => {
         hideLoading();
-        logError('登录请求失败: ' + error.message);
-        loginError.textContent = '登录请求失败，请检查网络';
+        loginError.textContent = '登录请求失败，请稍后重试';
         loginError.style.display = 'block';
-      }
+      });
     }
-    async function logout() {
-      logDebug('尝试登出...');
+    function logout() {
       const token = localStorage.getItem('authToken');
       if (token) {
         showLoading();
-        try {
-          await fetch('/api/logout', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ token })
-          });
-        } catch (error) {
-          logError('登出请求失败，但仍清除 token: ' + error.message);
-        } finally {
+        fetch('/api/logout', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ token })
+        })
+        .then(response => response.json())
+        .then(data => {
           hideLoading();
           localStorage.removeItem('authToken');
           isLoggedIn = false;
@@ -1042,9 +818,17 @@
           document.getElementById('logoutButton').style.display = 'none';
           updateActionButtons(false);
           refreshData();
-        }
+        })
+        .catch(error => {
+          hideLoading();
+          localStorage.removeItem('authToken');
+          isLoggedIn = false;
+          document.getElementById('loginButton').style.display = 'block';
+          document.getElementById('logoutButton').style.display = 'none';
+          updateActionButtons(false);
+          refreshData();
+        });
       } else {
-        logDebug('本地无 token，直接设置为未登录状态');
         isLoggedIn = false;
         document.getElementById('loginButton').style.display = 'block';
         document.getElementById('logoutButton').style.display = 'none';
@@ -1053,7 +837,6 @@
       }
     }
     function updateActionButtons(loggedIn) {
-      logDebug('更新操作按钮状态，是否已登录: ' + loggedIn);
       isLoggedIn = loggedIn;
       const cards = document.querySelectorAll('.server-card');
       cards.forEach(card => {
@@ -1061,47 +844,33 @@
         if (buttons) {
           buttons.style.display = loggedIn ? 'flex' : 'none';
         }
-      });
-      const chartToggleButtons = document.querySelectorAll('.chart-toggle-button');
-      chartToggleButtons.forEach(button => {
-        button.style.display = 'inline-block';
+        if (loggedIn) {
+          card.classList.remove('not-logged-in');
+        } else {
+          card.classList.add('not-logged-in');
+        }
+        const chartToggleButton = card.querySelector('.chart-toggle-button');
+        if (chartToggleButton) {
+          chartToggleButton.style.display = 'inline-block';
+        }
       });
     }
 
-    // 初始化逻辑
-    window.onload = function() {
-      logDebug('页面加载完成，开始初始化...');
-      showLoading();
-      checkLoginStatus().then(() => {
-        logDebug('登录状态检查完成，开始初始化数据...');
-        initialize().catch(error => {
-          logError('初始化数据失败: ' + error.message);
-          hideLoading();
-        });
-      }).catch(error => {
-        logError('检查登录状态失败: ' + error.message);
-        hideLoading();
-        initialize().catch(err => {
-          logError('即使登录检查失败，初始化数据仍然失败: ' + err.message);
-          hideLoading();
-        });
-      });
+    // 页面加载时初始化
+    window.onload = async function() {
+      await checkLoginStatus();
+      await initialize();
     };
 
-    // 二次确认弹窗逻辑
+    // 二次确认弹窗逻辑（保持原有逻辑）
     let pendingAction = null;
     let pendingRepoId = null;
     function showConfirmDialog(action, repoId, title, message) {
-      if (!isLoggedIn) {
-        alert('请先登录以执行此操作');
-        showLoginForm();
-        return;
-      }
       pendingAction = action;
       pendingRepoId = repoId;
       document.getElementById('confirmTitle').textContent = title;
       document.getElementById('confirmMessage').textContent = message;
-      document.getElementById('confirmOverlay').classList.add('visible');
+      document.getElementById('confirmOverlay').style.display = 'flex';
     }
     function confirmAction() {
       if (pendingAction === 'restart') {
@@ -1114,29 +883,25 @@
     function cancelAction() {
       pendingAction = null;
       pendingRepoId = null;
-      document.getElementById('confirmOverlay').classList.remove('visible');
+      document.getElementById('confirmOverlay').style.display = 'none';
     }
 
+    // 获取用户名列表
     async function getUsernames() {
-      logDebug('尝试获取用户名列表...');
       try {
+        showLoading();
         const token = localStorage.getItem('authToken');
         const headers = {};
         if (token) {
           headers['Authorization'] = `Bearer ${token}`;
-          logDebug('getUsernames 请求中附加 Token');
         }
         const response = await fetch('/api/config', { headers });
-        if (!response.ok) {
-          logError(`获取配置失败: ${response.status} ${response.statusText}`);
-          return [];
-        }
         const config = await response.json();
-        logDebug('成功获取用户名列表: ' + JSON.stringify(config));
+        hideLoading();
         const usernamesList = config.usernames ? config.usernames.split(',').map(name => name.trim()).filter(name => name) : [];
         document.getElementById('totalUsers').textContent = usernamesList.length;
+        document.getElementById('totalUsersNoData').style.display = usernamesList.length === 0 ? 'block' : 'none';
         const userFilter = document.getElementById('userFilter');
-        const currentUserFilterValue = userFilter.value;
         userFilter.innerHTML = '<option value="all">全部用户</option>';
         usernamesList.forEach(username => {
           const option = document.createElement('option');
@@ -1144,170 +909,263 @@
           option.textContent = username;
           userFilter.appendChild(option);
         });
-        if (usernamesList.includes(currentUserFilterValue)) {
-          userFilter.value = currentUserFilterValue;
-        } else {
-          userFilter.value = 'all';
-        }
         return usernamesList;
       } catch (error) {
-        logError('获取用户名失败: ' + error.message);
+        hideLoading();
         document.getElementById('totalUsers').textContent = 0;
-        const userFilter = document.getElementById('userFilter');
-        userFilter.innerHTML = '<option value="all">全部用户</option>';
+        document.getElementById('totalUsersNoData').style.display = 'block';
         return [];
       }
     }
 
+    // 获取实例列表
     async function fetchInstances() {
-      logDebug('尝试获取实例列表...');
       try {
+        showLoading();
         const token = localStorage.getItem('authToken');
         const headers = {};
         if (token) {
           headers['Authorization'] = `Bearer ${token}`;
-          logDebug('fetchInstances 请求中附加 Token');
-        } else {
-          logDebug('无可用 Token，未附加 Authorization 头');
         }
         const response = await fetch('/api/proxy/spaces', { headers });
-        if (!response.ok) {
-          const errorBody = await response.json().catch(() => ({}));
-          if (response.status === 401) {
-            logDebug('获取实例列表失败: 未授权 (可能是 token 过期)');
-            localStorage.removeItem('authToken');
-            isLoggedIn = false;
-            updateActionButtons(false);
-            document.getElementById('loginButton').style.display = 'block';
-            document.getElementById('logoutButton').style.display = 'none';
-            alert('登录已过期，请重新登录');
-            showLoginForm();
-          } else {
-            alert(`获取实例列表失败: ${response.status} ${response.statusText} - ${errorBody.error || '未知服务器错误'}`);
-            logError(`获取实例列表失败: ${response.status} ${response.statusText}` + JSON.stringify(errorBody));
-          }
-          return [];
-        }
         const instances = await response.json();
-        logDebug('从后端获取的实例列表: ' + instances.length + ' 个实例');
+        hideLoading();
         if (instances.length === 0) {
-          logDebug('警告: 未获取到任何实例数据。');
+          alert('未获取到实例数据，可能是网络问题或数据暂不可用。');
         }
         return instances;
       } catch (error) {
-        logError("获取实例列表失败：" + error.message);
-        alert('获取实例列表网络请求失败，请检查后端服务。');
+        hideLoading();
+        alert('获取实例列表失败，请稍后重试。');
         return [];
       }
     }
 
+    // 监控数据流管理
     class MetricsStreamManager {
       constructor() {
         this.eventSource = null;
-        this.subscribedInstances = [];
       }
       connect(subscribedInstances = []) {
-        logDebug('尝试连接 SSE，订阅实例: ' + subscribedInstances.length);
-        if (this.eventSource && this.subscribedInstances.length === subscribedInstances.length && this.subscribedInstances.every((value, index) => value === subscribedInstances[index])) {
-          logDebug('SSE 连接已存在且订阅列表未改变，无需重新连接');
-          return;
-        }
-        this.disconnect();
-        this.subscribedInstances = subscribedInstances;
-        if (subscribedInstances.length === 0) {
-          logDebug('没有需要监控的实例，不建立 SSE 连接');
-          return;
+        if (this.eventSource) {
+          this.eventSource.close();
         }
         const instancesParam = subscribedInstances.join(',');
-        const token = localStorage.getItem('authToken') || '';
-        const url = `/api/proxy/live-metrics-stream?instances=${encodeURIComponent(instancesParam)}&token=${encodeURIComponent(token)}`;
-        logDebug('建立 SSE 连接 URL: ' + url.split('&token=')[0] + (token ? '&token=...(隐藏)' : '&token=空'));
+        const token = localStorage.getItem('authToken');
+        const url = `/api/proxy/live-metrics-stream?instances=${encodeURIComponent(instancesParam)}&token=${encodeURIComponent(token || '')}`;
         this.eventSource = new EventSource(url);
-        this.eventSource.onopen = () => {
-          logDebug('SSE 连接已成功建立');
-        };
         this.eventSource.addEventListener("metric", (event) => {
           try {
             const data = JSON.parse(event.data);
             const { repoId, metrics } = data;
-            if (document.getElementById(`instance-${repoId}`)) {
-              logDebug(`收到 ${repoId} 的监控数据`);
-              updateServerCard(metrics, repoId);
-            }
+            updateServerCard(metrics, repoId);
           } catch (error) {
-            logError(`解析监控数据失败: ` + event.data + ' ERROR: ' + error.message);
+            console.error(`解析监控数据失败:`, error);
           }
         });
         this.eventSource.onerror = (error) => {
-          logError(`SSE 连接错误: ` + JSON.stringify(error));
+          this.eventSource.close();
+          this.eventSource = null;
+          setTimeout(() => this.connect(subscribedInstances), 5000);
         };
-        logDebug(`SSE 连接已建立，订阅实例: ${instancesParam}`);
       }
       disconnect() {
         if (this.eventSource) {
           this.eventSource.close();
           this.eventSource = null;
-          logDebug(`SSE 连接已断开`);
         }
-        this.subscribedInstances = [];
       }
     }
-
     const metricsStreamManager = new MetricsStreamManager();
+    const instanceMap = new Map();
+    const serverStatus = new Map();
+    let allInstances = [];
+    const chartInstances = new Map();
 
+    // 初始化页面数据
     async function initialize() {
-      logDebug('开始初始化数据...');
-      showLoading();
-      try {
-        logDebug('获取用户名列表...');
-        await getUsernames();
-        logDebug('获取实例列表...');
-        allInstances = await fetchInstances();
-        logDebug('实例列表获取完成，数量: ' + allInstances.length);
-        chartInstances.forEach(chart => {
-          if (chart) {
-            chart.destroy();
-          }
-        });
-        chartInstances.clear();
-        serverStatus.clear();
-        instanceMap.clear();
-        logDebug('应用过滤和排序...');
-        applyFiltersAndSort();
-        logDebug('初始化完成');
-      } catch (error) {
-        logError('初始化失败: ' + error.message);
-      } finally {
-        hideLoading();
-        logDebug('初始化过程结束，隐藏加载状态');
-      }
+      await getUsernames();
+      const instances = await fetchInstances();
+      allInstances = instances;
+      renderInstances(allInstances);
+      const runningInstances = instances
+        .filter(instance => instance.status.toLowerCase() === 'running')
+        .map(instance => instance.repo_id);
+      metricsStreamManager.connect(runningInstances);
+      updateSummary();
+      updateActionButtons(isLoggedIn);
+      lastUpdatedTime = new Date();
+      updateLastUpdatedTime();
     }
 
+    // 手动刷新数据
     async function refreshData() {
-      logDebug('手动刷新数据...');
       showLoading();
       metricsStreamManager.disconnect();
-      await new Promise(resolve => setTimeout(resolve, 100));
+      chartInstances.forEach(chart => {
+        if (chart) {
+          chart.destroy();
+        }
+      });
+      chartInstances.clear();
       await initialize();
+      applyFiltersAndSort();
+      lastUpdatedTime = new Date();
+      updateLastUpdatedTime();
     }
 
-    function renderInstanceCard(instance, container) {
-      logDebug(`渲染实例: ${instance.repo_id}`);
-      const instanceId = instance.repo_id;
-      if (instance.private && !isLoggedIn) {
-        const existingCard = document.getElementById(`instance-${instanceId}`);
-        if (existingCard) {
-          existingCard.remove();
-          instanceMap.delete(instanceId);
-          serverStatus.delete(instanceId);
-          if (chartInstances.has(instanceId)) {
-            chartInstances.get(instanceId).destroy();
-            chartInstances.delete(instanceId);
-          }
+    // 渲染实例卡片
+    function renderInstances(instances) {
+      const serversContainer = document.getElementById('servers');
+      serversContainer.innerHTML = '';
+      const userGroups = {};
+      instances.forEach(instance => {
+        if (!userGroups[instance.owner]) {
+          userGroups[instance.owner] = [];
         }
-        logDebug(`跳过私有实例渲染: ${instanceId} (未登录)`);
-        return;
+        userGroups[instance.owner].push(instance);
+      });
+      Object.keys(userGroups).forEach(owner => {
+        let userGroup = document.createElement('details');
+        userGroup.className = 'user-group';
+        userGroup.id = `user-${owner}`;
+        userGroup.setAttribute('open', '');
+        const summary = document.createElement('summary');
+        summary.textContent = `用户: ${owner}`;
+        userGroup.appendChild(summary);
+        const userServers = document.createElement('div');
+        userServers.className = 'user-servers';
+        userGroup.appendChild(userServers);
+        serversContainer.appendChild(userGroup);
+        userGroups[owner].forEach(instance => {
+          renderInstanceCard(instance, userServers);
+        });
+      });
+    }
+
+    // 创建图表
+    function createChart(instanceId) {
+      const canvasId = `chart-${instanceId}`;
+      const canvas = document.getElementById(canvasId);
+      if (!canvas) return null;
+      const gridColor = 'rgba(0, 0, 0, 0.1)';
+      const textColor = '#333';
+      const ctx = canvas.getContext('2d');
+      const chart = new Chart(ctx, {
+        type: 'line',
+        data: {
+          labels: Array(30).fill(''),
+          datasets: [
+            {
+              label: 'CPU 使用率 (%)',
+              data: [],
+              borderColor: '#34c759',
+              backgroundColor: 'rgba(52, 199, 89, 0.2)',
+              tension: 0.4,
+              fill: true,
+            },
+            {
+              label: '内存使用率 (%)',
+              data: [],
+              borderColor: '#2196F3',
+              backgroundColor: 'rgba(33, 150, 243, 0.2)',
+              tension: 0.4,
+              fill: true,
+            },
+            {
+              label: '上传速度 (KB/s)',
+              data: [],
+              borderColor: '#F44336',
+              backgroundColor: 'rgba(244, 67, 54, 0.2)',
+              tension: 0.4,
+              fill: true,
+            },
+            {
+              label: '下载速度 (KB/s)',
+              data: [],
+              borderColor: '#FF9800',
+              backgroundColor: 'rgba(255, 152, 0, 0.2)',
+              tension: 0.4,
+              fill: true,
+            },
+          ]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              labels: {
+                color: textColor,
+                font: { size: 12 }
+              }
+            },
+            tooltip: {
+              mode: 'index',
+              intersect: false,
+            }
+          },
+          scales: {
+            y: {
+              beginAtZero: true,
+              grid: { color: gridColor },
+              ticks: {
+                color: textColor,
+                font: { size: 11 }
+              }
+            },
+            x: {
+              grid: { color: gridColor },
+              ticks: {
+                color: textColor,
+                font: { size: 11 },
+                maxRotation: 0,
+                minRotation: 0,
+                autoSkip: true,
+                autoSkipPadding: 10
+              }
+            }
+          },
+          elements: {
+            point: {
+              radius: 0,
+              hitRadius: 5
+            }
+          },
+          animation: false
+        }
+      });
+      chartInstances.set(instanceId, chart);
+      return chart;
+    }
+
+    // 更新图表数据
+    function updateChart(instanceId, data) {
+      let chart = chartInstances.get(instanceId);
+      if (!chart) {
+        chart = createChart(instanceId);
+        if (!chart) return;
       }
+      const cpuData = chart.data.datasets[0].data;
+      const memoryData = chart.data.datasets[1].data;
+      const uploadData = chart.data.datasets[2].data;
+      const downloadData = chart.data.datasets[3].data;
+      cpuData.push(data.cpu_usage_pct);
+      memoryData.push(((data.memory_used_bytes / data.memory_total_bytes) * 100).toFixed(2));
+      uploadData.push((data.tx_bps / 1024).toFixed(2));
+      downloadData.push((data.rx_bps / 1024).toFixed(2));
+      if (cpuData.length > 30) {
+        cpuData.shift();
+        memoryData.shift();
+        uploadData.shift();
+        downloadData.shift();
+      }
+      chart.update();
+    }
+
+    // 渲染单个实例卡片
+    function renderInstanceCard(instance, container) {
+      const instanceId = instance.repo_id;
       instanceMap.set(instanceId, instance);
       const cardId = `instance-${instanceId}`;
       let card = document.getElementById(cardId);
@@ -1315,15 +1173,22 @@
         card = document.createElement('div');
         card.id = cardId;
         card.className = 'server-card';
+        if (!isLoggedIn) {
+          card.classList.add('not-logged-in');
+        }
         const iconSvg = instance.private
-          ? `<svg class="server-flag" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18 8v-3c0-1.656-1.344-3-3-3h-6c-1.656 0-3 1.344-3 3v3h-3v14h18v-14h-3zm-10-1.5c0-.828.672-1.5 1.5-1.5h5c.828 0 1.5.672 1.5 1.5v2.5h-8v-2.5zm4 11.5c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z"/></svg>`
-          : `<svg class="server-flag" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M21 3H3C1.9 3 1 3.9 1 5v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 5H4V6h16v2zm1 4H3c-1.1 0-2 .9-2 2v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-3c0-1.1-.9-2-2-2zm-1 5H4v-2h16v2zm1 4H3c-1.1 0-2 .9-2 2v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-3c0-1.1-.9-2-2-2zm-1 5H4v-2h16v2z"/></svg>`;
+          ? `<svg class="server-flag" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M18 8v-3c0-1.656-1.344-3-3-3h-6c-1.656 0-3 1.344-3 3v3h-3v14h18v-14h-3zm-10-1.5c0-.828.672-1.5 1.5-1.5h5c.828 0 1.5.672 1.5 1.5v2.5h-8v-2.5zm4 11.5c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z"/>
+            </svg>`
+          : `<svg class="server-flag" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+               <path d="M21 3H3C1.9 3 1 3.9 1 5v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 5H4V6h16v2zm1 4H3c-1.1 0-2 .9-2 2v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-3c0-1.1-.9-2-2-2zm-1 5H4v-2h16v2zm1 4H3c-1.1 0-2 .9-2 2v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-3c0-1.1-.9-2-2-2zm-1 5H4v-2h16v2z"/>
+            </svg>`;
         card.innerHTML = `
           <div class="server-header">
             <div class="server-name">
-              <span class="status-dot"></span>
+              <div class="status-dot status-sleep"></div>
               ${iconSvg}
-              <div>${instance.name} </div>
+              <div>${instance.name}</div>
             </div>
             <div>
               <button class="chart-toggle-button" onclick="toggleChart('${instanceId}')">查看图表</button>
@@ -1352,8 +1217,8 @@
             </div>
           </div>
           <div class="action-buttons" style="display: ${isLoggedIn ? 'flex' : 'none'};">
-            <button class="action-button " onclick="viewInstance('${instance.url}')">查看空间</button>
-            <button class="action-button " onclick="manageInstance('${instance.repo_id}')">管理页面</button>
+            <button class="action-button view-button" onclick="viewInstance('${instance.url}')">查看</button>
+            <button class="action-button" onclick="manageInstance('${instance.repo_id}')">管理</button>
             <button class="action-button" onclick="showConfirmDialog('restart', '${instance.repo_id}', '确认重启', '您确定要重启实例 ${instance.name} (${instance.repo_id}) 吗？')">重启</button>
             <button class="action-button" onclick="showConfirmDialog('rebuild', '${instance.repo_id}', '确认重建', '您确定要重建实例 ${instance.name} (${instance.repo_id}) 吗？')">重建</button>
           </div>
@@ -1362,144 +1227,85 @@
           </div>
         `;
         container.appendChild(card);
-        logDebug(`新卡片已添加: ${instanceId}`);
       }
       const statusDot = card.querySelector('.status-dot');
-      const statusTextElement = card.querySelector('.metric-value.status');
-      const currentStatus = instance.status.toLowerCase();
-      statusDot.className = 'status-dot';
-      statusTextElement.className = 'metric-value status';
-      if (currentStatus === 'running') {
-        statusDot.classList.add('status-online');
-        statusTextElement.classList.add('status-running');
-      } else if (currentStatus === 'sleeping') {
-        statusDot.classList.add('status-sleep');
-        statusTextElement.classList.add('status-sleeping');
+      const initialStatus = instance.status.toLowerCase();
+      if (initialStatus === 'running') {
+        statusDot.className = 'status-dot status-online';
+      } else if (initialStatus === 'sleeping') {
+        statusDot.className = 'status-dot status-sleep';
       } else {
-        statusDot.classList.add('status-offline');
-        statusTextElement.classList.add('status-stopped');
-      }
-      serverStatus.set(instanceId, {
-        lastSeen: Date.now(),
-        isOnline: currentStatus === 'running',
-        isSleep: currentStatus === 'sleeping',
-        data: null,
-        status: instance.status
-      });
-      const buttons = card.querySelector('.action-buttons');
-      if (buttons) {
-        buttons.style.display = isLoggedIn ? 'flex' : 'none';
-      }
-      const chartToggleButton = card.querySelector('.chart-toggle-button');
-      if (chartToggleButton) {
-        chartToggleButton.style.display = 'inline-block';
+        statusDot.className = 'status-dot status-offline';
       }
+      serverStatus.set(instanceId, { lastSeen: Date.now(), isOnline: initialStatus === 'running', isSleep: initialStatus === 'sleeping', data: null, status: instance.status });
     }
 
-    function renderInstances(instancesToRender) {
-      logDebug(`渲染实例列表，数量: ${instancesToRender.length}`);
-      hideLoading();
-      const serversContainer = document.getElementById('servers');
-      const currentInstanceIds = new Set(Array.from(serversContainer.querySelectorAll('.server-card')).map(card => card.id.replace('instance-', '')));
-      const userGroupsContainer = document.getElementById('servers');
-      userGroupsContainer.innerHTML = '';
-      const userGroups = {};
-      instancesToRender.forEach(instance => {
-        if (!userGroups[instance.owner]) {
-          userGroups[instance.owner] = [];
-        }
-        userGroups[instance.owner].push(instance);
-      });
-      Object.keys(userGroups).forEach(owner => {
-        let userGroup = document.createElement('details');
-        userGroup.className = 'user-group';
-        userGroup.id = `user-${owner}`;
-        userGroup.setAttribute('open', '');
-        const summary = document.createElement('summary');
-        summary.textContent = `用户: ${owner} (${userGroups[owner].length} 个实例)`;
-        userGroup.appendChild(summary);
-        const userServers = document.createElement('div');
-        userServers.className = 'user-servers';
-        userGroup.appendChild(userServers);
-        userGroupsContainer.appendChild(userGroup);
-        userGroups[owner].forEach(instance => {
-          renderInstanceCard(instance, userServers);
-        });
-      });
-      const newInstanceIdsToRender = new Set(instancesToRender.map(inst => inst.repo_id));
-      currentInstanceIds.forEach(instanceId => {
-        if (!newInstanceIdsToRender.has(instanceId)) {
-          if (chartInstances.has(instanceId)) {
-            logDebug(`清理不再显示的图表实例: ${instanceId}`);
-            chartInstances.get(instanceId).destroy();
-            chartInstances.delete(instanceId);
-          }
+    // 切换图表显示/隐藏
+    function toggleChart(instanceId) {
+      const card = document.getElementById(`instance-${instanceId}`);
+      const chartContainer = document.getElementById(`chart-container-${instanceId}`);
+      const toggleButton = card.querySelector('.chart-toggle-button');
+      if (!card || !chartContainer) return;
+      if (card.classList.contains('expanded')) {
+        card.classList.remove('expanded');
+        toggleButton.textContent = '查看图表';
+      } else {
+        card.classList.add('expanded');
+        toggleButton.textContent = '收起图表';
+        if (!chartInstances.has(instanceId)) {
+          createChart(instanceId);
         }
-      });
-      const runningInstancesInView = instancesToRender
-        .filter(instance => instance.status.toLowerCase() === 'running')
-        .map(instance => instance.repo_id);
-      logDebug(`连接 SSE，监控运行中实例: ${runningInstancesInView.length}`);
-      metricsStreamManager.connect(runningInstancesInView);
-      updateSummary();
+      }
     }
 
-    function updateServerCard(data, instanceId) {
-      logDebug(`更新实例卡片数据: ${instanceId}`);
-      const card = document.getElementById(`instance-${instanceId}`);
+    // 更新实例卡片数据
+    function updateServerCard(data, instanceId, isSleep = false) {
+      const cardId = `instance-${instanceId}`;
+      let card = document.getElementById(cardId);
       const instance = instanceMap.get(instanceId);
-      if (!card || !instance) {
-        logDebug(`卡片或实例不存在，跳过更新: ${instanceId}`);
+      if (!card && instance) {
         return;
       }
-      const statusDot = card.querySelector('.status-dot');
-      const statusTextElement = card.querySelector('.metric-value.status');
-      let isOnline = false;
-      let isSleep = false;
-      let currentStatus = instance.status.toLowerCase();
-      if (data && Object.keys(data).length > 0) {
-        currentStatus = 'running';
-        isOnline = true;
-        isSleep = false;
-        card.querySelector('.cpu-usage').textContent = `${data.cpu_usage_pct?.toFixed(2) || 'N/A'}%`;
-        const memoryPct = (data.memory_total_bytes > 0) ? ((data.memory_used_bytes / data.memory_total_bytes) * 100).toFixed(2) : 'N/A';
-        card.querySelector('.memory-usage').textContent = `${memoryPct}%`;
-        card.querySelector('.upload').textContent = `${formatBytes(data.tx_bps)}/s`;
-        card.querySelector('.download').textContent = `${formatBytes(data.rx_bps)}/s`;
-        const chartContainer = document.getElementById(`chart-container-${instanceId}`);
-        if (chartContainer && chartContainer.parentElement.classList.contains('expanded')) {
+      if (card) {
+        const statusDot = card.querySelector('.status-dot');
+        let upload = 'N/A', download = 'N/A', cpuUsage = 'N/A', memoryUsage = 'N/A';
+        let isOnline = false;
+        if (data) {
+          cpuUsage = `${data.cpu_usage_pct}%`;
+          memoryUsage = `${((data.memory_used_bytes / data.memory_total_bytes) * 100).toFixed(2)}%`;
+          upload = `${formatBytes(data.tx_bps)}/s`;
+          download = `${formatBytes(data.rx_bps)}/s`;
+          statusDot.className = 'status-dot status-online';
+          isOnline = true;
+          isSleep = false;
           updateChart(instanceId, data);
+        } else {
+          const currentStatus = instance?.status.toLowerCase() || 'unknown';
+          if (currentStatus === 'running') {
+            statusDot.className = 'status-dot status-online';
+            isOnline = true;
+            isSleep = false;
+          } else if (currentStatus === 'sleeping') {
+            statusDot.className = 'status-dot status-sleep';
+            isOnline = false;
+            isSleep = true;
+          } else {
+            statusDot.className = 'status-dot status-offline';
+            isOnline = false;
+            isSleep = false;
+          }
         }
-      } else {
-        card.querySelector('.cpu-usage').textContent = 'N/A';
-        card.querySelector('.memory-usage').textContent = 'N/A';
-        card.querySelector('.upload').textContent = 'N/A';
-        card.querySelector('.download').textContent = 'N/A';
-      }
-      statusDot.className = 'status-dot';
-      statusTextElement.className = 'metric-value status';
-      if (currentStatus === 'running') {
-        statusDot.classList.add('status-online');
-        statusTextElement.classList.add('status-running');
-      } else if (currentStatus === 'sleeping') {
-        statusDot.classList.add('status-sleep');
-        statusTextElement.classList.add('status-sleeping');
-      } else {
-        statusDot.classList.add('status-offline');
-        statusTextElement.classList.add('status-stopped');
+        card.querySelector('.cpu-usage').textContent = cpuUsage;
+        card.querySelector('.memory-usage').textContent = memoryUsage;
+        card.querySelector('.upload').textContent = upload;
+        card.querySelector('.download').textContent = download;
+        serverStatus.set(instanceId, { lastSeen: Date.now(), isOnline, isSleep, data: data || null, status: instance?.status || 'unknown' });
+        updateSummary();
       }
-      serverStatus.set(instanceId, {
-        lastSeen: Date.now(),
-        isOnline: currentStatus === 'running',
-        isSleep: currentStatus === 'sleeping',
-        data: data || null,
-        status: instance.status
-      });
-      updateSummary();
     }
 
+    // 重启实例
     async function restartSpace(repoId) {
-      logDebug(`尝试重启实例: ${repoId}`);
       try {
         const token = localStorage.getItem('authToken');
         if (!token || !isLoggedIn) {
@@ -1511,12 +1317,14 @@
         const encodedRepoId = encodeURIComponent(repoId);
         const response = await fetch(`/api/proxy/restart/${encodedRepoId}`, {
           method: 'POST',
-          headers: { 'Authorization': `Bearer ${token}` }
+          headers: {
+            'Authorization': `Bearer ${token}`
+          }
         });
         const result = await response.json();
         hideLoading();
         if (result.success) {
-          logDebug(`重启成功: ${repoId}`);
+          alert(`重启成功: ${repoId}`);
           refreshData();
         } else {
           if (response.status === 401) {
@@ -1529,18 +1337,16 @@
             showLoginForm();
           } else {
             alert(`重启失败: ${result.error || '未知错误'}`);
-            logError(`重启失败 (${repoId}): ${result.error || '未知错误'} ${JSON.stringify(result.details || {})}`);
           }
         }
       } catch (error) {
         hideLoading();
-        logError(`重启请求失败 (${repoId}): ${error.message}`);
-        alert(`重启请求失败: ${error.message || '检查网络或后端服务'}`);
+        alert(`重启失败: ${error.message}`);
       }
     }
 
+    // 重建实例
     async function rebuildSpace(repoId) {
-      logDebug(`尝试重建实例: ${repoId}`);
       try {
         const token = localStorage.getItem('authToken');
         if (!token || !isLoggedIn) {
@@ -1552,12 +1358,14 @@
         const encodedRepoId = encodeURIComponent(repoId);
         const response = await fetch(`/api/proxy/rebuild/${encodedRepoId}`, {
           method: 'POST',
-          headers: { 'Authorization': `Bearer ${token}` }
+          headers: {
+            'Authorization': `Bearer ${token}`
+          }
         });
         const result = await response.json();
         hideLoading();
         if (result.success) {
-          logDebug(`重建成功: ${repoId}`);
+          alert(`重建成功: ${repoId}`);
           refreshData();
         } else {
           if (response.status === 401) {
@@ -1570,313 +1378,136 @@
             showLoginForm();
           } else {
             alert(`重建失败: ${result.error || '未知错误'}`);
-            logError(`重建失败 (${repoId}): ${result.error || '未知错误'} ${JSON.stringify(result.details || {})}`);
           }
         }
       } catch (error) {
         hideLoading();
-        logError(`重建请求失败 (${repoId}): ${error.message}`);
-        alert(`重建请求失败: ${error.message || '检查网络或后端服务'}`);
+        alert(`重建失败: ${error.message}`);
       }
     }
 
+    // 更新概览数据
     function updateSummary() {
-      logDebug('更新总览数据...');
       let online = 0;
       let offline = 0;
-      let totalRunningUpload = 0;
-      let totalRunningDownload = 0;
+      let totalUpload = 0;
+      let totalDownload = 0;
       serverStatus.forEach((status, instanceId) => {
-        if (status.status?.toLowerCase() === 'running') {
+        const isRecentlyOnline = status.isOnline || status.status.toLowerCase() === 'running';
+        if (isRecentlyOnline) {
           online++;
           if (status.data) {
-            totalRunningUpload += parseFloat(status.data.tx_bps) || 0;
-            totalRunningDownload += parseFloat(status.data.rx_bps) || 0;
+            totalUpload += parseFloat(status.data.tx_bps) || 0;
+            totalDownload += parseFloat(status.data.rx_bps) || 0;
           }
         } else {
           offline++;
         }
       });
-      document.getElementById('totalServers').textContent = allInstances.length;
+      document.getElementById('totalServers').textContent = serverStatus.size;
+      document.getElementById('totalServersNoData').style.display = serverStatus.size === 0 ? 'block' : 'none';
       document.getElementById('onlineServers').textContent = online;
+      document.getElementById('onlineServersNoData').style.display = online === 0 ? 'block' : 'none';
       document.getElementById('offlineServers').textContent = offline;
-      document.getElementById('totalUpload').textContent = `${formatBytes(totalRunningUpload)}/s`;
-      document.getElementById('totalDownload').textContent = `${formatBytes(totalRunningDownload)}/s`;
-      const totalAllUpload = Array.from(serverStatus.values()).reduce((sum, status) => sum + (status.data?.tx_bps || 0), 0);
-      const totalAllDownload = Array.from(serverStatus.values()).reduce((sum, status) => sum + (status.data?.rx_bps || 0), 0);
-      document.getElementById('totalUpload2').textContent = `${formatBytes(totalAllUpload)}/s`;
-      document.getElementById('totalDownload2').textContent = `${formatBytes(totalAllDownload)}/s`;
+      document.getElementById('offlineServersNoData').style.display = offline === 0 ? 'block' : 'none';
+      const uploadText = `${formatBytes(totalUpload)}/s`;
+      const downloadText = `${formatBytes(totalDownload)}/s`;
+      document.getElementById('totalUpload').textContent = uploadText;
+      document.getElementById('totalUploadNoData').style.display = totalUpload === 0 ? 'block' : 'none';
+      document.getElementById('totalDownload').textContent = downloadText;
+      document.getElementById('totalDownloadNoData').style.display = totalDownload === 0 ? 'block' : 'none';
+      document.getElementById('currentUploadSpeed').textContent = uploadText;
+      document.getElementById('currentDownloadSpeed').textContent = downloadText;
     }
 
-    function formatBytes(bytes, dp = 2) {
-      if (bytes === null || bytes === undefined) return 'N/A';
+    // 格式化字节单位
+    function formatBytes(bytes) {
       if (bytes === 0) return '0 B';
-      const K = 1024;
-      const SIZES = ['B', 'KB', 'MB', 'GB', 'TB'];
-      const i = Math.floor(Math.log(bytes) / Math.log(K));
-      return parseFloat((bytes / Math.pow(K, i)).toFixed(dp)) + ' ' + SIZES[i];
+      const k = 1024;
+      const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
     }
 
-    setInterval(async () => {
-      logDebug('定时刷新数据...');
-      if (!document.getElementById('loadingOverlay').classList.contains('visible')) {
-        await refreshData();
-      } else {
-        logDebug('正在手动刷新中，跳过定时刷新');
+    // 更新最后更新时间
+    function updateLastUpdatedTime() {
+      if (lastUpdatedTime) {
+        const now = new Date();
+        const diff = Math.floor((now - lastUpdatedTime) / 1000);
+        let timeText = '';
+        if (diff < 60) {
+          timeText = `${diff}秒前`;
+        } else if (diff < 3600) {
+          timeText = `${Math.floor(diff / 60)}分钟前`;
+        } else {
+          timeText = lastUpdatedTime.toLocaleString('zh-CN');
+        }
+        document.getElementById('lastUpdated').textContent = timeText;
       }
+    }
+
+    // 定时更新
+    setInterval(updateSummary, 5000);
+    setInterval(updateLastUpdatedTime, 1000);
+    setInterval(async () => {
+      metricsStreamManager.disconnect();
+      await initialize();
     }, 300000);
 
+    // 应用过滤和排序
     function applyFiltersAndSort() {
-      logDebug('应用过滤和排序...');
       const statusFilter = document.getElementById('statusFilter').value;
       const userFilter = document.getElementById('userFilter').value;
       const sortBy = document.getElementById('sortBy').value;
-      let filteredInstances = allInstances.filter(instance => {
-        const statusMatch = statusFilter === 'all' || instance.status.toLowerCase() === statusFilter;
-        const userMatch = userFilter === 'all' || instance.owner === userFilter;
-        const privateMatch = !instance.private || isLoggedIn;
-        return statusMatch && userMatch && privateMatch;
-      });
+      let filteredInstances = allInstances;
+      if (statusFilter !== 'all') {
+        filteredInstances = filteredInstances.filter(instance => instance.status.toLowerCase() === statusFilter);
+      }
+      if (userFilter !== 'all') {
+        filteredInstances = filteredInstances.filter(instance => instance.owner === userFilter);
+      }
       filteredInstances.sort((a, b) => {
         if (sortBy === 'name-asc') {
           return a.name.localeCompare(b.name);
         } else if (sortBy === 'name-desc') {
           return b.name.localeCompare(a.name);
         } else if (sortBy === 'status-asc') {
-          const statusOrder = { 'running': 0, 'sleeping': 1, 'stopped': 2, 'building': 3, 'build_error': 4, 'error': 5, 'unknown': 6 };
-          const statusA = statusOrder[a.status?.toLowerCase()] || 6;
-          const statusB = statusOrder[b.status?.toLowerCase()] || 6;
-          if (statusA !== statusB) {
-            return statusA - statusB;
-          }
-          return a.name.localeCompare(b.name);
+          const statusOrder = { 'running': 0, 'sleeping': 1, 'stopped': 2 };
+          return statusOrder[a.status.toLowerCase()] - statusOrder[b.status.toLowerCase()];
         } else if (sortBy === 'status-desc') {
-          const statusOrder = { 'running': 5, 'sleeping': 4, 'stopped': 3, 'building': 2, 'build_error': 1, 'error': 0, 'unknown': -1 };
-          const statusA = statusOrder[a.status?.toLowerCase()] || -1;
-          const statusB = statusOrder[b.status?.toLowerCase()] || -1;
-          if (statusA !== statusB) {
-            return statusB - statusA;
-          }
-          return b.name.localeCompare(a.name);
+          const statusOrder = { 'running': 2, 'sleeping': 1, 'stopped': 0 };
+          return statusOrder[a.status.toLowerCase()] - statusOrder[b.status.toLowerCase()];
         }
         return 0;
       });
-      logDebug(`过滤和排序后的实例数量: ${filteredInstances.length}`);
+      instanceMap.clear();
+      serverStatus.clear();
+      metricsStreamManager.disconnect();
+      chartInstances.forEach(chart => {
+        if (chart) {
+          chart.destroy();
+        }
+      });
+      chartInstances.clear();
       renderInstances(filteredInstances);
+      const runningInstances = filteredInstances
+        .filter(instance => instance.status.toLowerCase() === 'running')
+        .map(instance => instance.repo_id);
+      metricsStreamManager.connect(runningInstances);
+      updateSummary();
       updateActionButtons(isLoggedIn);
     }
 
+    // 查看实例
     function viewInstance(url) {
-      logDebug(`尝试查看实例: ${url}`);
-      if (url && url !== 'N/A') {
-        window.open(url, '_blank');
-      } else {
-        alert('该实例没有可用的 public URL。');
-      }
+      window.open(url, '_blank');
     }
+
+    // 管理实例
     function manageInstance(repoId) {
-      logDebug(`尝试管理实例: ${repoId}`);
       const manageUrl = `https://huggingface.co/spaces/${repoId}`;
       window.open(manageUrl, '_blank');
     }
-
-    function createChart(instanceId) {
-      logDebug(`创建图表实例: ${instanceId}`);
-      const canvasId = `chart-${instanceId}`;
-      const canvas = document.getElementById(canvasId);
-      if (!canvas) {
-        logError(`Canvas element not found for instanceId: ${instanceId}`);
-        return null;
-      }
-      if (canvas.chart) {
-        logDebug(`Chart already exists for canvasId: ${canvasId}, destroying old one.`);
-        canvas.chart.destroy();
-      }
-      const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
-      const gridColor = isDarkMode ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.08)';
-      const textColor = isDarkMode ? '#e0e0e0' : '#333';
-      const ctx = canvas.getContext('2d');
-      const chart = new Chart(ctx, {
-        type: 'line',
-        data: {
-          labels: Array(30).fill(''),
-          datasets: [
-            {
-              label: 'CPU (%)',
-              data: [],
-              borderColor: '#4CAF50',
-              backgroundColor: 'rgba(76, 175, 80, 0.1)',
-              tension: 0.3,
-              fill: true,
-              pointRadius: 0,
-              hitRadius: 10,
-              pointHoverRadius: 5,
-            },
-            {
-              label: '内存 (%)',
-              data: [],
-              borderColor: '#2196F3',
-              backgroundColor: 'rgba(33, 150, 243, 0.1)',
-              tension: 0.3,
-              fill: true,
-              pointRadius: 0,
-              hitRadius: 10,
-              pointHoverRadius: 5,
-            },
-            {
-              label: '上传 (KB/s)',
-              data: [],
-              borderColor: '#FF9800',
-              backgroundColor: 'rgba(255, 152, 0, 0.1)',
-              tension: 0.3,
-              fill: true,
-              pointRadius: 0,
-              hitRadius: 10,
-              pointHoverRadius: 5,
-            },
-            {
-              label: '下载 (KB/s)',
-              data: [],
-              borderColor: '#9C27B0',
-              backgroundColor: 'rgba(156, 39, 176, 0.1)',
-              tension: 0.3,
-              fill: true,
-              pointRadius: 0,
-              hitRadius: 10,
-              pointHoverRadius: 5,
-            },
-          ]
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          animation: false,
-          plugins: {
-            legend: {
-              labels: {
-                color: textColor,
-                font: { size: 11 }
-              }
-            },
-            tooltip: {
-              mode: 'index',
-              intersect: false,
-              callbacks: {
-                label: function(context) {
-                  let label = context.dataset.label || '';
-                  if (label) {
-                    label += ': ';
-                  }
-                  if (context.parsed.y !== null) {
-                    label += context.parsed.y.toFixed(2);
-                    if (label.includes('CPU (%)') || label.includes('内存 (%)')) {
-                      label += '%';
-                    }
-                  }
-                  return label;
-                }
-              },
-              titleFont: { size: 12 },
-              bodyFont: { size: 11 },
-              padding: 10,
-              displayColors: true,
-              boxPadding: 4,
-            }
-          },
-          scales: {
-            y: {
-              beginAtZero: true,
-              max: 100,
-              grid: { color: gridColor, drawBorder: false },
-              ticks: {
-                color: textColor,
-                font: { size: 10 },
-                callback: function(value) {
-                  return value + '%';
-                }
-              },
-              title: {
-                display: true,
-                text: '使用率 (%) / 流量 (KB/s)',
-                color: textColor,
-                font: { size: 11, weight: 'bold' },
-                padding: { top: 0, bottom: 10 }
-              }
-            },
-            x: {
-              grid: { color: gridColor, drawBorder: false },
-              ticks: {
-                color: textColor,
-                font: { size: 10 },
-                maxRotation: 0,
-                minRotation: 0,
-                autoSkip: true,
-                autoSkipPadding: 15,
-                callback: function(value, index, values) {
-                  return '';
-                }
-              }
-            }
-          },
-          hover: {
-            mode: 'nearest',
-            intersect: true
-          }
-        }
-      });
-      canvas.chart = chart;
-      chartInstances.set(instanceId, chart);
-      logDebug(`图表创建成功: ${instanceId}`);
-      return chart;
-    }
-
-    function updateChart(instanceId, data) {
-      let chart = chartInstances.get(instanceId);
-      const chartContainer = document.getElementById(`chart-container-${instanceId}`);
-      if (!chartContainer || !chartContainer.parentElement.classList.contains('expanded')) {
-        return;
-      }
-      if (!chart) {
-        chart = createChart(instanceId);
-        if (!chart) return;
-        logDebug(`Instance ${instanceId}: Chart created.`);
-      }
-      const cpuDataset = chart.data.datasets[0].data;
-      const memoryDataset = chart.data.datasets[1].data;
-      const uploadDataset = chart.data.datasets[2].data;
-      const downloadDataset = chart.data.datasets[3].data;
-      cpuDataset.push(data.cpu_usage_pct?.toFixed(2) || NaN);
-      const memoryPct = (data.memory_total_bytes > 0) ? ((data.memory_used_bytes / data.memory_total_bytes) * 100).toFixed(2) : NaN;
-      memoryDataset.push(memoryPct);
-      uploadDataset.push((data.tx_bps / 1024).toFixed(2));
-      downloadDataset.push((data.rx_bps / 1024).toFixed(2));
-      const maxDataPoints = 30;
-      if (cpuDataset.length > maxDataPoints) {
-        cpuDataset.shift();
-        memoryDataset.shift();
-        uploadDataset.shift();
-        downloadDataset.shift();
-      }
-      chart.update('quiet');
-    }
-
-    function toggleChart(instanceId) {
-      logDebug(`切换图表显示: ${instanceId}`);
-      const card = document.getElementById(`instance-${instanceId}`);
-      const chartContainer = document.getElementById(`chart-container-${instanceId}`);
-      const toggleButton = card.querySelector('.chart-toggle-button');
-      if (!card || !chartContainer) return;
-      if (card.classList.contains('expanded')) {
-        card.classList.remove('expanded');
-        toggleButton.textContent = '查看图表';
-      } else {
-        card.classList.add('expanded');
-        toggleButton.textContent = '收起图表';
-        if (!chartInstances.has(instanceId)) {
-          createChart(instanceId);
-        }
-      }
-    }
   </script>
 </body>
 </html>