Update public/index.html

public/index.html

@@ -53,13 +53,13 @@
       max-width: 1400px;
       margin: 0 auto;
       animation: fadeIn 0.5s ease;
-      padding: 0 20px;
+      padding: 0 15px;
     }
     .overview {
       background: var(--card-background);
       border-radius: 15px;
-      padding: 25px;
-      margin-bottom: 30px;
+      padding: 20px;
+      margin-bottom: 25px;
       border: 1px solid var(--card-border);
       transition: background 0.3s ease, border 0.3s ease;
     }
@@ -68,14 +68,14 @@
       display: flex;
       align-items: center;
       gap: 10px;
-      margin-bottom: 20px;
+      margin-bottom: 15px;
       color: var(--text-color);
     }
     .theme-toggle {
       display: flex;
       align-items: center;
       gap: 10px;
-      margin-bottom: 20px;
+      margin-bottom: 15px;
       font-size: 14px;
       color: var(--secondary-text);
     }
@@ -105,25 +105,28 @@
     #summary {
       display: grid;
       grid-template-columns: repeat(6, 1fr);
-      gap: 15px;
+      gap: 12px;
     }
     #summary div {
       background: var(--metric-background);
-      padding: 15px;
+      padding: 12px;
       border-radius: 8px;
       border: 1px solid var(--metric-border);
       transition: background 0.3s ease, border 0.3s ease;
     }
     #summary div {
-      font-size: 14px;
+      font-size: 13px;
       color: var(--secondary-text);
     }
     #summary span {
       display: block;
-      font-size: 24px;
+      font-size: 22px;
       font-weight: bold;
       margin-top: 5px;
       color: var(--text-color);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
     .stats-container {
       display: grid;
@@ -164,7 +167,9 @@
       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;
-      height: auto;
+      min-height: 180px; /* 固定最小高度，避免内容变化导致抖动 */
+      display: flex;
+      flex-direction: column;
     }
     .server-card:hover {
       transform: translateY(-2px);
@@ -180,12 +185,21 @@
     .server-name {
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 8px;
+      flex: 1;
+      min-width: 0; /* 防止内容溢出 */
+    }
+    .server-name div {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%; /* 限制名称的最大宽度 */
     }
     .server-flag {
       width: 20px;
       height: 20px;
       border-radius: 4px;
+      flex-shrink: 0;
     }
     .metric-grid {
       display: grid;
@@ -199,6 +213,7 @@
       border-radius: 6px;
       border: 1px solid var(--metric-border);
       transition: background 0.3s ease;
+      overflow: hidden; /* 防止内容溢出 */
     }
     .metric-item:hover {
       background: var(--metric-hover);
@@ -207,10 +222,15 @@
       color: var(--label-color);
       font-size: 12px;
       margin-bottom: 3px;
+      white-space: nowrap;
     }
     .metric-value {
       font-size: 14px;
       font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%; /* 限制指标值的宽度 */
     }
     .status-dot {
       display: inline-block;
@@ -218,6 +238,7 @@
       animation: pulse 2s infinite;
       width: 10px;
       height: 10px;
+      flex-shrink: 0;
     }
     .status-online {
       background-color: #4CAF50;
@@ -273,13 +294,39 @@
     }
     @media (max-width: 768px) {
       #summary {
-        grid-template-columns: 1fr;
+        grid-template-columns: 1fr; /* 小屏幕单列显示 */
+        gap: 10px;
+      }
+      #summary div {
+        padding: 10px;
+      }
+      #summary span {
+        font-size: 20px; /* 小屏幕字体略小 */
       }
       .user-servers {
-        grid-template-columns: 1fr;
+        grid-template-columns: 1fr; /* 小屏幕单列显示实例卡片 */
       }
       .metric-grid {
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: repeat(2, 1fr); /* 小屏幕指标网格改为2列 */
+        gap: 8px;
+      }
+      .metric-item {
+        padding: 6px;
+      }
+      .metric-value {
+        font-size: 13px; /* 小屏幕字体略小 */
+      }
+      .server-header {
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 8px; /* 小屏幕避免标题和按钮过于紧密 */
+      }
+      .container {
+        padding: 0 10px; /* 小屏幕减少整体边距 */
+      }
+      .overview {
+        padding: 15px;
+        margin-bottom: 20px;
       }
     }
     .login-overlay, .confirm-overlay, .loading-overlay {
@@ -352,7 +399,7 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 20px;
+      margin-bottom: 15px;
     }
     .auth-buttons {
       display: flex;
@@ -377,10 +424,10 @@
       border: 1px solid var(--card-border);
       border-radius: 10px;
       padding: 15px;
-      margin-bottom: 25px;
+      margin-bottom: 20px;
       display: flex;
       flex-wrap: wrap;
-      gap: 20px;
+      gap: 15px;
       align-items: center;
       transition: background 0.3s ease, border 0.3s ease;
     }
@@ -390,7 +437,7 @@
       gap: 10px;
       font-size: 14px;
       color: var(--text-color);
-      min-width: 220px; /* 确保控件有足够的宽度 */
+      min-width: 200px; /* 确保控件有足够的宽度 */
     }
     .filter-sort-group label {
       white-space: nowrap;
@@ -453,7 +500,8 @@
         min-width: 100%; /* 小屏时控件占满一行 */
       }
       .filter-sort-panel {
-        gap: 15px; /* 小屏时减少间距 */
+        gap: 12px; /* 小屏时减少间距 */
+        padding: 12px;
       }
     }
     /* 图表相关样式 */
@@ -477,6 +525,7 @@
       font-size: 13px;
       transition: background 0.2s ease;
       margin-left: auto;
+      white-space: nowrap;
     }
     .chart-toggle-button:hover {
       background: var(--action-button-hover);
@@ -488,6 +537,11 @@
       width: 100% !important;
       height: auto !important;
     }
+    @media (max-width: 768px) {
+      .chart-container {
+        height: 250px; /* 小屏幕图表高度略减 */
+      }
+    }
   </style>
 </head>
 <body>