Update public/index.html

public/index.html

@@ -138,7 +138,7 @@
       padding: 16px;
       border: 1px solid var(--metric-border);
       transition: background 0.2s ease, box-shadow 0.2s ease;
-      min-height: 150px;
+      min-height: 180px; /* 增加高度以容纳新字段 */
       display: flex;
       flex-direction: column;
       box-shadow: 0 0 5px rgba(0, 212, 255, 0.2);
@@ -146,7 +146,7 @@
       overflow: hidden;
     }
     .server-card.not-logged-in {
-      min-height: 120px;
+      min-height: 150px; /* 未登录时高度略小 */
     }
     .server-card:hover {
       background: var(--metric-hover);
@@ -165,18 +165,19 @@
     .server-header {
       display: flex;
       justify-content: space-between;
-      align-items: center;
+      align-items: flex-start; /* 调整为顶部对齐以容纳描述 */
       margin-bottom: 12px;
       font-size: 14px;
     }
     .server-name {
       display: flex;
-      align-items: center;
-      gap: 8px;
+      flex-direction: column; /* 改为列布局以显示描述 */
+      align-items: flex-start;
+      gap: 4px;
       flex: 1;
       min-width: 0;
     }
-    .server-name div {
+    .server-name div.name {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -185,6 +186,14 @@
       color: var(--accent-color);
       text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
     }
+    .server-name div.description {
+      font-size: 12px;
+      color: var(--secondary-text);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
+    }
     .server-flag {
       width: 20px;
       height: 20px;
@@ -194,7 +203,7 @@
     }
     .metric-grid {
       display: grid;
-      grid-template-columns: repeat(5, 1fr);
+      grid-template-columns: repeat(3, 1fr); /* 默认3列x2行以容纳6个指标 */
       gap: 10px;
       margin-top: 12px;
     }
@@ -319,7 +328,7 @@
         font-size: 20px;
       }
       .metric-grid {
-        grid-template-columns: repeat(3, 1fr); /* 与系统概览同步，变为3列 */
+        grid-template-columns: repeat(3, 1fr); /* 与系统概览同步，保持3列x2行 */
         gap: 8px;
       }
       .metric-item {
@@ -344,7 +353,7 @@
         grid-template-columns: 1fr !important;
       }
       .metric-grid {
-        grid-template-columns: repeat(2, 1fr); /* 与系统概览同步，变为2列 */
+        grid-template-columns: repeat(2, 1fr); /* 与系统概览同步，变为2列x3行 */
         gap: 8px;
       }
       .metric-item {
@@ -365,6 +374,9 @@
         padding: 16px;
         margin-bottom: 20px;
       }
+      .server-name div.description {
+        font-size: 11px; /* 窄屏下描述字体缩小 */
+      }
     }
     @media (max-width: 400px) {
       #summary {
@@ -1287,6 +1299,19 @@
       chartDataBuffer.set(instanceId, { data: [], count: 0 });
     }
 
+    // 格式化日期时间函数
+    function formatDateTime(timestamp) {
+      if (!timestamp) return 'N/A';
+      const date = new Date(timestamp);
+      if (isNaN(date.getTime())) return 'N/A';
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hours}:${minutes}`;
+    }
+
     function renderInstanceCard(instance, container) {
       const instanceId = instance.repo_id;
       instanceMap.set(instanceId, instance);
@@ -1314,7 +1339,8 @@
             <div class="server-name">
               <div class="status-dot status-sleep"></div>
               ${iconSvg}
-              <div>${instance.name} </div>
+              <div class="name">${instance.name}</div>
+              <div class="description">${instance.short_description || '暂无描述'}</div>
             </div>
             <div>
               <button class="chart-toggle-button" onclick="toggleChart('${instanceId}')">查看图表</button>
@@ -1341,6 +1367,10 @@
               <div class="metric-label">下载</div>
               <div class="metric-value download">N/A</div>
             </div>
+            <div class="metric-item">
+              <div class="metric-label">最后修改</div>
+              <div class="metric-value last-modified">${formatDateTime(instance.lastModified)}</div>
+            </div>
           </div>
           <div class="action-buttons" style="display: ${isLoggedIn ? 'flex' : 'none'};">
             <button class="action-button view-button" onclick="viewInstance('${instance.url}')">查看</button>