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: 180px;
+      min-height: 150px;
       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: 150px;
+      min-height: 120px;
     }
     .server-card:hover {
       background: var(--metric-hover);
@@ -175,6 +175,21 @@
       gap: 8px;
       flex: 1;
       min-width: 0;
+      cursor: pointer;
+      position: relative;
+    }
+    .server-name:hover {
+      opacity: 0.8;
+    }
+    .server-name::after {
+      content: '▼';
+      font-size: 12px;
+      color: var(--accent-color);
+      margin-left: 8px;
+      transition: transform 0.3s ease;
+    }
+    .server-card.info-expanded .server-name::after {
+      transform: rotate(180deg);
     }
     .server-name div {
       overflow: hidden;
@@ -234,9 +249,13 @@
       border-radius: 4px;
       border: 1px solid var(--metric-border);
       margin-top: 12px;
-      transition: background 0.2s ease;
+      transition: background 0.2s ease, height 0.3s ease;
       overflow: hidden;
       box-shadow: inset 0 0 3px rgba(0, 212, 255, 0.2);
+      display: none;
+    }
+    .server-card.info-expanded .info-block {
+      display: block;
     }
     .info-block:hover {
       background: var(--metric-hover);
@@ -710,7 +729,7 @@
   <div class="container">
     <div class="overview">
       <div class="header-container">
-        <div class="overview-title">📊 系统概览</div>
+        <div class="overview-title">🪩 系统概览</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>
@@ -1375,6 +1394,14 @@
       }
     }
 
+    // 切换信息块显示/隐藏的函数
+    function toggleInfoBlock(instanceId) {
+      const card = document.getElementById(`instance-${instanceId}`);
+      if (!card) return;
+
+      card.classList.toggle('info-expanded');
+    }
+
     function renderInstanceCard(instance, container) {
       const instanceId = instance.repo_id;
       instanceMap.set(instanceId, instance);
@@ -1404,10 +1431,10 @@
 
         card.innerHTML = `
           <div class="server-header">
-            <div class="server-name">
+            <div class="server-name" onclick="toggleInfoBlock('${instanceId}')">
               <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>