Update public/index.html

public/index.html

@@ -1270,13 +1270,20 @@
         if (!isLoggedIn) {
           card.classList.add('not-logged-in'); // 未登录时添加类以调整高度
         }
+        // 根据 instance.private 属性选择不同的图标
+        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>` // 锁图标，表示 private 实例
+          : `<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>`; // 服务器图标，表示非 private 实例
+        
         card.innerHTML = `
           <div class="server-header">
             <div class="server-name">
               <div class="status-dot status-sleep"></div>
-              <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>
+              ${iconSvg}
               <div>${instance.name} </div>
             </div>
             <div>
@@ -1311,6 +1318,7 @@
           </div>
           <div class="action-buttons" style="display: ${isLoggedIn ? 'flex' : 'none'};">
             <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>
@@ -1590,6 +1598,12 @@
     function viewInstance(url) {
       window.open(url, '_blank');
     }
+
+    // 新增函数：在新标签页中打开实例的管理页面
+    function manageInstance(repoId) {
+      const manageUrl = `https://huggingface.co/spaces/${repoId}`;
+      window.open(manageUrl, '_blank');
+    }
     
     // 新增函数：切换实例监控状态
     function toggleMonitorInstance(instanceId, checked) {