Spaces:

i0110
/

dashboard

Running

App Files Files Community

i0110 commited on Apr 25

Commit

ab5afa3

verified ·

1 Parent(s): 2e0d9e6

Update public/index.html

Browse files

Files changed (1) hide show

public/index.html +142 -36

public/index.html CHANGED Viewed

@@ -280,12 +280,86 @@
         grid-template-columns: 1fr 1fr;
       }
     }
   </style>
 </head>
 <body>
   <div class="container">
     <div class="overview">
-      <div class="overview-title">📊 系统概览</div>
       <div class="theme-toggle">
         主题:
         <button onclick="toggleTheme('system')" title="跟随系统">
@@ -316,6 +390,15 @@
     <div id="servers" class="stats-container">
     </div>
   </div>
   <script>
     // 主题切换功能
@@ -354,11 +437,64 @@
     initTheme();
     async function getUsernames() {
       try {
         const response = await fetch('/api/config');
         const config = await response.json();
-        console.log('Usernames from API:', config.usernames);
         const usernamesList = config.usernames ? config.usernames.split(',').map(name => name.trim()).filter(name => name) : [];
         document.getElementById('totalUsers').textContent = usernamesList.length;
         return usernamesList;
@@ -373,7 +509,6 @@
       try {
         const response = await fetch('/api/proxy/spaces');
         const instances = await response.json();
-        console.log(`Found ${instances.length} spaces`);
         return instances;
       } catch (error) {
         console.error("获取实例列表失败：", error);
@@ -389,12 +524,10 @@
       async connect(instanceId, username) {
         if (this.eventSources.has(instanceId)) {
-          console.log(`已经连接到实例 ${instanceId} 的监控数据，跳过重复连接`);
           return;
         }
         try {
-          console.log(`尝试连接监控数据: /api/proxy/live-metrics/${username}/${instanceId.split('/')[1]}`);
           const eventSource = new EventSource(
             `/api/proxy/live-metrics/${username}/${instanceId.split('/')[1]}`
           );
@@ -404,35 +537,26 @@
           eventSource.addEventListener("metric", (event) => {
             try {
               const data = JSON.parse(event.data);
-              console.log(`收到监控数据 (${instanceId}):`, data);
               updateServerCard(data, instanceId);
             } catch (error) {
-              console.error(`解析数据失败 (${instanceId}):`, error, event.data);
             }
           });
           eventSource.onerror = (error) => {
-            console.error(`EventSource 错误 (${instanceId}):`, error);
             eventSource.close();
             this.eventSources.delete(instanceId);
-            // 不设置为 sleep，通过 status 判断状态
             updateServerCard(null, instanceId, false);
           };
-          eventSource.onopen = () => {
-            console.log(`成功打开 EventSource 连接 (${instanceId})`);
-          };
           this.eventSources.set(instanceId, eventSource);
-          console.log(`已创建 EventSource 连接 (${instanceId})，当前总连接数: ${this.eventSources.size}`);
         } catch (error) {
           console.error(`连接失败 (${username}/${instanceId}):`, error);
-          updateServerCard(null, instanceId, false); // 不设置为 sleep，通过 status 判断状态
         }
       }
       disconnectAll() {
-        console.log(`断开所有监控数据连接 (${this.eventSources.size} 个)`);
         this.eventSources.forEach(es => es.close());
         this.eventSources.clear();
       }
@@ -443,16 +567,12 @@
     const serverStatus = new Map();
     async function initialize() {
-      await getUsernames(); // 先获取用户数并更新
       const instances = await fetchInstances();
       instances.forEach(instance => {
         renderInstanceCard(instance);
-        // 只连接状态为 running 的实例
         if (instance.status.toLowerCase() === 'running') {
-          console.log(`实例 ${instance.repo_id} 状态为 running，尝试连接监控数据`);
           metricsManager.connect(instance.repo_id, instance.owner);
-        } else {
-          console.log(`实例 ${instance.repo_id} 状态为 ${instance.status}，不连接监控数据`);
         }
       });
       updateSummary();
@@ -483,11 +603,9 @@
       }
       const userServers = userGroup.querySelector('.user-servers');
-      // 使用完整 repo_id 作为卡片 ID
       const cardId = `instance-${instanceId}`;
       let card = document.getElementById(cardId);
       if (!card) {
-        console.log(`渲染卡片，instanceId: ${instanceId}, cardId: ${cardId}`);
         card = document.createElement('div');
         card.id = cardId;
         card.className = 'server-card';
@@ -523,14 +641,13 @@
               <div class="metric-value download">N/A</div>
             </div>
           </div>
-          <div class="action-buttons">
             <button class="action-button" onclick="restartSpace('${instance.repo_id}')">重启</button>
             <button class="action-button" onclick="rebuildSpace('${instance.repo_id}')">重建</button>
           </div>
         `;
         userServers.appendChild(card);
       }
-      // 根据状态设置初始显示
       const statusDot = card.querySelector('.status-dot');
       const initialStatus = instance.status.toLowerCase();
       if (initialStatus === 'running') {
@@ -544,19 +661,16 @@
     }
     function updateServerCard(data, instanceId, isSleep = false) {
-      // 卡片 ID 使用完整 repo_id
       const cardId = `instance-${instanceId}`;
       let card = document.getElementById(cardId);
       const instance = instanceMap.get(instanceId);
       if (!card && instance) {
-        console.log(`卡片 ${cardId} 不存在，重新渲染`);
         renderInstanceCard(instance);
         card = document.getElementById(cardId);
       }
       if (card) {
-        console.log(`更新卡片显示，instanceId: ${instanceId}, cardId: ${cardId}`);
         const statusDot = card.querySelector('.status-dot');
         let upload = 'N/A', download = 'N/A', cpuUsage = 'N/A', memoryUsage = 'N/A';
         let isOnline = false;
@@ -569,9 +683,7 @@
           statusDot.className = 'status-dot status-online';
           isOnline = true;
           isSleep = false;
-          console.log(`更新监控数据 (${instanceId}): CPU=${cpuUsage}, 内存=${memoryUsage}, 上传=${upload}, 下载=${download}`);
         } else {
-          // 如果没有监控数据，根据实例状态设置图标
           const currentStatus = instance?.status.toLowerCase() || 'unknown';
           if (currentStatus === 'running') {
             statusDot.className = 'status-dot status-online';
@@ -586,7 +698,6 @@
             isOnline = false;
             isSleep = false;
           }
-          console.log(`无监控数据，基于状态更新 (${instanceId}): 状态=${currentStatus}`);
         }
         card.querySelector('.cpu-usage').textContent = cpuUsage;
@@ -596,14 +707,11 @@
         serverStatus.set(instanceId, { lastSeen: Date.now(), isOnline, isSleep, data: data || null, status: instance?.status || 'unknown' });
         updateSummary();
-      } else {
-        console.error(`卡片 ${cardId} 未找到，无法更新显示`);
       }
     }
     async function restartSpace(repoId) {
       try {
-        console.log(`尝试重启 Space: ${repoId}`);
         const encodedRepoId = encodeURIComponent(repoId);
         const response = await fetch(`/api/proxy/restart/${encodedRepoId}`, { method: 'POST' });
         const result = await response.json();
@@ -621,7 +729,6 @@
     async function rebuildSpace(repoId) {
       try {
-        console.log(`尝试重建 Space: ${repoId}`);
         const encodedRepoId = encodeURIComponent(repoId);
         const response = await fetch(`/api/proxy/rebuild/${encodedRepoId}`, { method: 'POST' });
         const result = await response.json();
@@ -644,7 +751,6 @@
       let totalDownload = 0;
       serverStatus.forEach((status, instanceId) => {
-        const now = Date.now();
         const isRecentlyOnline = status.isOnline || status.status.toLowerCase() === 'running';
         if (isRecentlyOnline) {
           online++;

         grid-template-columns: 1fr 1fr;
       }
     }
+    .login-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.7);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+    }
+    .login-box {
+      background: var(--card-background);
+      padding: 30px;
+      border-radius: 10px;
+      border: 1px solid var(--card-border);
+      width: 300px;
+      text-align: center;
+    }
+    .login-box h2 {
+      margin-bottom: 20px;
+      color: var(--text-color);
+    }
+    .login-box input {
+      width: 100%;
+      padding: 10px;
+      margin: 10px 0;
+      border: 1px solid var(--metric-border);
+      border-radius: 5px;
+      background: var(--metric-background);
+      color: var(--text-color);
+    }
+    .login-box button {
+      width: 100%;
+      padding: 10px;
+      background: var(--action-button-bg);
+      border: none;
+      border-radius: 5px;
+      color: var(--text-color);
+      cursor: pointer;
+      transition: background 0.2s ease;
+    }
+    .login-box button:hover {
+      background: var(--action-button-hover);
+    }
+    .login-error {
+      color: #f44336;
+      margin-top: 10px;
+      font-size: 14px;
+    }
+    .logout-button {
+      background: var(--action-button-bg);
+      border: none;
+      color: var(--text-color);
+      padding: 6px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 13px;
+      transition: background 0.2s ease;
+      margin-left: auto;
+    }
+    .logout-button:hover {
+      background: var(--action-button-hover);
+    }
+    .header-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+    }
   </style>
 </head>
 <body>
   <div class="container">
     <div class="overview">
+      <div class="header-container">
+        <div class="overview-title">📊 系统概览</div>
+        <button class="logout-button" id="logoutButton" style="display: none;" onclick="logout()">登出</button>
+      </div>
       <div class="theme-toggle">
         主题:
         <button onclick="toggleTheme('system')" title="跟随系统">
     <div id="servers" class="stats-container">
     </div>
   </div>
+  <div id="loginOverlay" class="login-overlay" style="display: none;">
+    <div class="login-box">
+      <h2>登录</h2>
+      <input type="text" id="username" placeholder="用户名">
+      <input type="password" id="password" placeholder="密码">
+      <button onclick="login()">登录</button>
+      <div id="loginError" class="login-error" style="display: none;"></div>
+    </div>
+  </div>
   <script>
     // 主题切换功能
     initTheme();
+    // 登录状态管理
+    function checkLoginStatus() {
+      const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
+      document.getElementById('loginOverlay').style.display = isLoggedIn ? 'none' : 'flex';
+      document.getElementById('logoutButton').style.display = isLoggedIn ? 'block' : 'none';
+      if (isLoggedIn) {
+        updateActionButtons(true);
+      } else {
+        updateActionButtons(false);
+      }
+    }
+    function login() {
+      const username = document.getElementById('username').value;
+      const password = document.getElementById('password').value;
+      const loginError = document.getElementById('loginError');
+      // 模拟后端验证 (前端硬编码验证，实际环境中应通过接口验证)
+      fetch('/api/config').then(response => response.json()).then(config => {
+        // 这里仅做演示，实际环境中不应将用户凭据硬编码在前端
+        const adminUsername = 'admin'; // 默认值，实际应从环境变量获取，但这里无法直接获取后端环境变量
+        const adminPassword = 'password'; // 默认值，实际应从环境变量获取
+        if (username === adminUsername && password === adminPassword) {
+          localStorage.setItem('isLoggedIn', 'true');
+          loginError.style.display = 'none';
+          checkLoginStatus();
+        } else {
+          loginError.textContent = '用户名或密码错误';
+          loginError.style.display = 'block';
+        }
+      }).catch(err => {
+        loginError.textContent = '登录系统错误，请稍后重试';
+        loginError.style.display = 'block';
+        console.error('获取配置失败，无法验证登录:', err);
+      });
+    }
+    function logout() {
+      localStorage.removeItem('isLoggedIn');
+      checkLoginStatus();
+    }
+    function updateActionButtons(isLoggedIn) {
+      const cards = document.querySelectorAll('.server-card');
+      cards.forEach(card => {
+        const buttons = card.querySelector('.action-buttons');
+        if (buttons) {
+          buttons.style.display = isLoggedIn ? 'flex' : 'none';
+        }
+      });
+    }
+    window.onload = checkLoginStatus;
     async function getUsernames() {
       try {
         const response = await fetch('/api/config');
         const config = await response.json();
         const usernamesList = config.usernames ? config.usernames.split(',').map(name => name.trim()).filter(name => name) : [];
         document.getElementById('totalUsers').textContent = usernamesList.length;
         return usernamesList;
       try {
         const response = await fetch('/api/proxy/spaces');
         const instances = await response.json();
         return instances;
       } catch (error) {
         console.error("获取实例列表失败：", error);
       async connect(instanceId, username) {
         if (this.eventSources.has(instanceId)) {
           return;
         }
         try {
           const eventSource = new EventSource(
             `/api/proxy/live-metrics/${username}/${instanceId.split('/')[1]}`
           );
           eventSource.addEventListener("metric", (event) => {
             try {
               const data = JSON.parse(event.data);
               updateServerCard(data, instanceId);
             } catch (error) {
+              console.error(`解析数据失败 (${instanceId}):`, error);
             }
           });
           eventSource.onerror = (error) => {
             eventSource.close();
             this.eventSources.delete(instanceId);
             updateServerCard(null, instanceId, false);
           };
           this.eventSources.set(instanceId, eventSource);
         } catch (error) {
           console.error(`连接失败 (${username}/${instanceId}):`, error);
+          updateServerCard(null, instanceId, false);
         }
       }
       disconnectAll() {
         this.eventSources.forEach(es => es.close());
         this.eventSources.clear();
       }
     const serverStatus = new Map();
     async function initialize() {
+      await getUsernames();
       const instances = await fetchInstances();
       instances.forEach(instance => {
         renderInstanceCard(instance);
         if (instance.status.toLowerCase() === 'running') {
           metricsManager.connect(instance.repo_id, instance.owner);
         }
       });
       updateSummary();
       }
       const userServers = userGroup.querySelector('.user-servers');
       const cardId = `instance-${instanceId}`;
       let card = document.getElementById(cardId);
       if (!card) {
         card = document.createElement('div');
         card.id = cardId;
         card.className = 'server-card';
               <div class="metric-value download">N/A</div>
             </div>
           </div>
+          <div class="action-buttons" style="display: none;">
             <button class="action-button" onclick="restartSpace('${instance.repo_id}')">重启</button>
             <button class="action-button" onclick="rebuildSpace('${instance.repo_id}')">重建</button>
           </div>
         `;
         userServers.appendChild(card);
       }
       const statusDot = card.querySelector('.status-dot');
       const initialStatus = instance.status.toLowerCase();
       if (initialStatus === 'running') {
     }
     function updateServerCard(data, instanceId, isSleep = false) {
       const cardId = `instance-${instanceId}`;
       let card = document.getElementById(cardId);
       const instance = instanceMap.get(instanceId);
       if (!card && instance) {
         renderInstanceCard(instance);
         card = document.getElementById(cardId);
       }
       if (card) {
         const statusDot = card.querySelector('.status-dot');
         let upload = 'N/A', download = 'N/A', cpuUsage = 'N/A', memoryUsage = 'N/A';
         let isOnline = false;
           statusDot.className = 'status-dot status-online';
           isOnline = true;
           isSleep = false;
         } else {
           const currentStatus = instance?.status.toLowerCase() || 'unknown';
           if (currentStatus === 'running') {
             statusDot.className = 'status-dot status-online';
             isOnline = false;
             isSleep = false;
           }
         }
         card.querySelector('.cpu-usage').textContent = cpuUsage;
         serverStatus.set(instanceId, { lastSeen: Date.now(), isOnline, isSleep, data: data || null, status: instance?.status || 'unknown' });
         updateSummary();
       }
     }
     async function restartSpace(repoId) {
       try {
         const encodedRepoId = encodeURIComponent(repoId);
         const response = await fetch(`/api/proxy/restart/${encodedRepoId}`, { method: 'POST' });
         const result = await response.json();
     async function rebuildSpace(repoId) {
       try {
         const encodedRepoId = encodeURIComponent(repoId);
         const response = await fetch(`/api/proxy/rebuild/${encodedRepoId}`, { method: 'POST' });
         const result = await response.json();
       let totalDownload = 0;
       serverStatus.forEach((status, instanceId) => {
         const isRecentlyOnline = status.isOnline || status.status.toLowerCase() === 'running';
         if (isRecentlyOnline) {
           online++;