Update public/index.html

public/index.html

@@ -386,10 +386,10 @@
         </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="totalUsers">0</span></div>
         <div>总上传: <span id="totalUpload">0 B/s</span></div>
         <div>总下载: <span id="totalDownload">0 B/s</span></div>
       </div>
@@ -452,55 +452,66 @@
 
     initTheme();
 
+    // 全局变量，表示当前是否已登录
+    let isLoggedIn = false;
+
     // 登录状态管理
     function checkLoginStatus() {
-      return new Promise((resolve) => {
-        const token = localStorage.getItem('authToken');
-        const loginButton = document.getElementById('loginButton');
-        const logoutButton = document.getElementById('logoutButton');
+      const token = localStorage.getItem('authToken');
+      const loginButton = document.getElementById('loginButton');
+      const logoutButton = document.getElementById('logoutButton');
 
-        // 初始化时先隐藏操作按钮，确保在验证完成前不显示
-        updateActionButtons(false);
+      // 先检查本地是否有 token，决定初始 UI 状态
+      if (token) {
+        console.log('本地存储中找到 token，尝试验证:', token.slice(0, 8) + '...');
+        // 先假设未登录，直到验证成功
         loginButton.style.display = 'block';
         logoutButton.style.display = 'none';
+        updateActionButtons(false);
 
-        if (token) {
-          fetch('/api/verify-token', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ token })
-          })
-          .then(response => response.json())
-          .then(data => {
-            if (data.success) {
-              loginButton.style.display = 'none';
-              logoutButton.style.display = 'block';
-              updateActionButtons(true);
-            } else {
-              localStorage.removeItem('authToken');
-              loginButton.style.display = 'block';
-              logoutButton.style.display = 'none';
-              updateActionButtons(false);
-            }
-            resolve(data.success);
-          })
-          .catch(error => {
-            console.error('验证 token 失败:', error);
+        // 发送请求验证 token
+        return fetch('/api/verify-token', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ token })
+        })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            console.log('Token 验证成功，用户已登录');
+            isLoggedIn = true;
+            loginButton.style.display = 'none';
+            logoutButton.style.display = 'block';
+            updateActionButtons(true);
+          } else {
+            console.log('Token 验证失败，清除本地存储:', data.message);
             localStorage.removeItem('authToken');
+            isLoggedIn = false;
             loginButton.style.display = 'block';
             logoutButton.style.display = 'none';
             updateActionButtons(false);
-            resolve(false);
-          });
-        } else {
+          }
+          return data.success;
+        })
+        .catch(error => {
+          console.error('验证 token 失败，清除本地存储:', error);
+          localStorage.removeItem('authToken');
+          isLoggedIn = false;
           loginButton.style.display = 'block';
           logoutButton.style.display = 'none';
           updateActionButtons(false);
-          resolve(false);
-        }
-      });
+          return false;
+        });
+      } else {
+        console.log('本地存储中无 token，显示未登录状态');
+        isLoggedIn = false;
+        loginButton.style.display = 'block';
+        logoutButton.style.display = 'none';
+        updateActionButtons(false);
+        return Promise.resolve(false);
+      }
     }
 
     function showLoginForm() {
@@ -529,10 +540,16 @@
       .then(response => response.json())
       .then(data => {
         if (data.success) {
+          console.log('登录成功，保存 token');
           localStorage.setItem('authToken', data.token);
+          isLoggedIn = true;
           hideLoginForm();
-          checkLoginStatus();
+          // 手动更新 UI 状态
+          document.getElementById('loginButton').style.display = 'none';
+          document.getElementById('logoutButton').style.display = 'block';
+          updateActionButtons(true);
         } else {
+          console.log('登录失败:', data.message);
           loginError.textContent = data.message || '登录失败';
           loginError.style.display = 'block';
         }
@@ -556,31 +573,49 @@
         })
         .then(response => response.json())
         .then(data => {
+          console.log('登出成功，清除 token');
           localStorage.removeItem('authToken');
-          checkLoginStatus();
+          isLoggedIn = false;
+          document.getElementById('loginButton').style.display = 'block';
+          document.getElementById('logoutButton').style.display = 'none';
+          updateActionButtons(false);
         })
         .catch(error => {
-          console.error('登出失败:', error);
+          console.error('登出失败，但仍清除 token:', error);
           localStorage.removeItem('authToken');
-          checkLoginStatus();
+          isLoggedIn = false;
+          document.getElementById('loginButton').style.display = 'block';
+          document.getElementById('logoutButton').style.display = 'none';
+          updateActionButtons(false);
         });
+      } else {
+        console.log('本地无 token，直接设置为未登录');
+        isLoggedIn = false;
+        document.getElementById('loginButton').style.display = 'block';
+        document.getElementById('logoutButton').style.display = 'none';
+        updateActionButtons(false);
       }
     }
 
-    function updateActionButtons(isLoggedIn) {
+    function updateActionButtons(loggedIn) {
+      console.log('更新操作按钮状态，是否已登录:', loggedIn);
+      isLoggedIn = loggedIn;
       const cards = document.querySelectorAll('.server-card');
       cards.forEach(card => {
         const buttons = card.querySelector('.action-buttons');
         if (buttons) {
-          buttons.style.display = isLoggedIn ? 'flex' : 'none';
+          buttons.style.display = loggedIn ? 'flex' : 'none';
         }
       });
     }
 
-    // 页面加载时初始化登录状态
-    document.addEventListener('DOMContentLoaded', async () => {
+    // 使用 window.onload 确保页面完全加载后检查登录状态
+    window.onload = async function() {
+      console.log('页面加载完成，开始检查登录状态');
       await checkLoginStatus();
-    });
+      console.log('登录状态检查完成，初始化数据');
+      initialize();
+    };
 
     // 二次确认弹窗逻辑
     let pendingAction = null;
@@ -694,14 +729,10 @@
         }
       });
       updateSummary();
+      // 初始化完成后再次确保按钮状态正确
+      updateActionButtons(isLoggedIn);
     }
 
-    // 在页面完全加载并验证登录状态后初始化数据
-    document.addEventListener('DOMContentLoaded', async () => {
-      await checkLoginStatus();
-      initialize();
-    });
-
     function renderInstanceCard(instance) {
       const instanceId = instance.repo_id;
       instanceMap.set(instanceId, instance);
@@ -763,9 +794,9 @@
               <div class="metric-value download">N/A</div>
             </div>
           </div>
-          <div class="action-buttons" style="display: none;">
+          <div class="action-buttons" style="display: ${isLoggedIn ? 'flex' : 'none'};">
             <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>
+            <button class="action-button" onclick="showConfirmDialog('rebuild', '${instance.repo_id}', '确认重建', '您确定要重建实例 ${instance.name} (${instance.repo_id}) 吗？重建将从头开始构建，可能会清除缓存和设置。')">重建</button>
           </div>
         `;
         userServers.appendChild(card);
@@ -835,7 +866,7 @@
     async function restartSpace(repoId) {
       try {
         const token = localStorage.getItem('authToken');
-        if (!token) {
+        if (!token || !isLoggedIn) {
           alert('请先登录以执行此操作');
           showLoginForm();
           return;
@@ -854,7 +885,10 @@
           if (response.status === 401) {
             alert('登录已过期，请重新登录');
             localStorage.removeItem('authToken');
-            checkLoginStatus();
+            isLoggedIn = false;
+            document.getElementById('loginButton').style.display = 'block';
+            document.getElementById('logoutButton').style.display = 'none';
+            updateActionButtons(false);
             showLoginForm();
           } else {
             alert(`重启失败: ${result.error || '未知错误'}`);
@@ -870,7 +904,7 @@
     async function rebuildSpace(repoId) {
       try {
         const token = localStorage.getItem('authToken');
-        if (!token) {
+        if (!token || !isLoggedIn) {
           alert('请先登录以执行此操作');
           showLoginForm();
           return;
@@ -889,7 +923,10 @@
           if (response.status === 401) {
             alert('登录已过期，请重新登录');
             localStorage.removeItem('authToken');
-            checkLoginStatus();
+            isLoggedIn = false;
+            document.getElementById('loginButton').style.display = 'block';
+            document.getElementById('logoutButton').style.display = 'none';
+            updateActionButtons(false);
             showLoginForm();
           } else {
             alert(`重建失败: ${result.error || '未知错误'}`);