Spaces:

ACRoot
/

Dashboard

Paused

App Files Files Community

Solvaxis commited on Apr 28, 2025

Commit

af4f86e

1 Parent(s): b2ba14f

Add application file

Browse files

Files changed (5) hide show

Dockerfile +21 -0
README.md +3 -0
package.json +15 -0
public/index.html +1764 -0
server.js +754 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,21 @@

+FROM node:18-alpine
+WORKDIR /app
+# 安装依赖
+COPY package.json .
+RUN npm install --production
+# 复制代码
+COPY . .
+# 暴露端口
+EXPOSE 8080
+# 设置环境变量（可以通过 docker run -e 覆盖）
+ENV PORT=8080
+ENV HF_USER=""
+ENV API_KEY="your_api_key_here"
+# 启动应用
+CMD ["npm", "start"]

README.md CHANGED Viewed

@@ -5,6 +5,9 @@ colorFrom: gray
 colorTo: green
 sdk: docker
 pinned: false
 ---
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 colorTo: green
 sdk: docker
 pinned: false
+license: apache-2.0
+app_port: 8080
+short_description: HF Space Manager
 ---
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

package.json ADDED Viewed

	@@ -0,0 +1,15 @@

+{
+  "name": "hf-space-manager",
+  "version": "1.0.0",
+  "description": "HuggingFace instance manager dashboard",
+  "main": "server.js",
+  "dependencies": {
+    "express": "^4.18.2",
+    "axios": "^1.6.2"
+  },
+  "scripts": {
+    "start": "node server.js"
+  },
+  "author": "",
+  "license": "MIT"
+}

public/index.html ADDED Viewed

	@@ -0,0 +1,1764 @@

+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>HF Space Manager</title>
+  <!-- 引入 Chart.js CDN -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+  <!-- 引入科技感字体 Orbitron -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    body {
+      font-family: 'Orbitron', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      background: var(--background-color);
+      color: var(--text-color);
+      padding: 20px;
+      min-height: 100vh;
+      background-image: radial-gradient(rgba(0, 212, 255, 0.1) 1px, transparent 1px), radial-gradient(rgba(255, 0, 255, 0.1) 1px, transparent 1px);
+      background-size: 40px 40px;
+      background-position: 0 0, 20px 20px;
+    }
+    :root {
+      /* 深色模式变量（默认且唯一） */
+      --background-color: #0A0A1E;
+      --text-color: #E0E0FF;
+      --secondary-text: #A0A0CC;
+      --card-background: rgba(20, 20, 40, 0.7);
+      --card-border: rgba(0, 212, 255, 0.3);
+      --metric-background: rgba(30, 30, 50, 0.6);
+      --metric-border: rgba(0, 212, 255, 0.2);
+      --metric-hover: rgba(40, 40, 70, 0.8);
+      --label-color: #A0A0CC;
+      --action-button-bg: rgba(0, 212, 255, 0.2);
+      --action-button-hover: rgba(0, 212, 255, 0.4);
+      --accent-color: #00D4FF;
+      --neon-pink: #FF00FF;
+      --neon-green: #00FFAA;
+    }
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 0 15px;
+    }
+    .overview {
+      background: var(--card-background);
+      border-radius: 8px;
+      padding: 20px;
+      margin-bottom: 25px;
+      border: 1px solid var(--card-border);
+      box-shadow: 0 0 10px rgba(0, 212, 255, 0.3), inset 0 0 2px rgba(0, 212, 255, 0.5);
+      transition: background 0.3s ease, border 0.3s ease;
+    }
+    .overview-title {
+      font-size: 18px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 16px;
+      color: var(--accent-color);
+      text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+    }
+    #summary {
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      gap: 12px;
+    }
+    #summary div {
+      background: var(--metric-background);
+      padding: 14px;
+      border-radius: 6px;
+      border: 1px solid var(--metric-border);
+      transition: background 0.3s ease;
+      box-shadow: inset 0 0 3px rgba(0, 212, 255, 0.3);
+    }
+    #summary div {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--secondary-text);
+    }
+    #summary span {
+      display: block;
+      font-size: 22px;
+      font-weight: 700;
+      margin-top: 6px;
+      color: var(--text-color);
+      text-shadow: 0 0 3px rgba(0, 212, 255, 0.3);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .stats-container {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 24px;
+      margin-top: 20px;
+    }
+    .user-group {
+      background: var(--card-background);
+      border-radius: 8px;
+      border: 1px solid var(--card-border);
+      overflow: hidden;
+      box-shadow: 0 0 8px rgba(0, 212, 255, 0.2);
+      transition: background 0.3s ease, border 0.3s ease;
+    }
+    .user-group summary {
+      padding: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      color: var(--accent-color);
+      background: var(--metric-background);
+      transition: background 0.2s ease;
+      text-shadow: 0 0 4px rgba(0, 212, 255, 0.4);
+    }
+    .user-group summary:hover {
+      background: var(--metric-hover);
+      box-shadow: inset 0 0 5px rgba(0, 212, 255, 0.5);
+    }
+    .user-group summary::-webkit-details-marker {
+      color: var(--accent-color);
+    }
+    .user-servers {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 16px;
+      padding: 16px;
+    }
+    .server-card {
+      background: var(--metric-background);
+      border-radius: 6px;
+      padding: 16px;
+      border: 1px solid var(--metric-border);
+      transition: background 0.2s ease, box-shadow 0.2s ease;
+      min-height: 150px;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 0 5px rgba(0, 212, 255, 0.2);
+      position: relative;
+      overflow: hidden;
+    }
+    .server-card.not-logged-in {
+      min-height: 120px;
+    }
+    .server-card:hover {
+      background: var(--metric-hover);
+      box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
+    }
+    .server-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background: linear-gradient(90deg, var(--accent-color), var(--neon-pink));
+      opacity: 0.7;
+    }
+    .server-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+      font-size: 14px;
+    }
+    .server-name {
+      display: flex;
+      align-items: center;
+      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;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
+      font-weight: 500;
+      color: var(--accent-color);
+      text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
+    }
+    .server-flag {
+      width: 20px;
+      height: 20px;
+      border-radius: 6px;
+      flex-shrink: 0;
+      filter: drop-shadow(0 0 3px rgba(0, 212, 255, 0.3));
+    }
+    .metric-grid {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 10px;
+      margin-top: 12px;
+    }
+    .metric-item {
+      background: var(--card-background);
+      padding: 10px;
+      border-radius: 4px;
+      border: 1px solid var(--metric-border);
+      transition: background 0.2s ease;
+      overflow: hidden;
+      box-shadow: inset 0 0 3px rgba(0, 212, 255, 0.2);
+    }
+    .metric-item:hover {
+      background: var(--metric-hover);
+      box-shadow: inset 0 0 5px rgba(0, 212, 255, 0.4);
+    }
+    .metric-label {
+      color: var(--label-color);
+      font-size: 12px;
+      margin-bottom: 4px;
+      white-space: nowrap;
+    }
+    .metric-value {
+      font-size: 14px;
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
+      color: var(--text-color);
+      text-shadow: 0 0 2px rgba(0, 212, 255, 0.3);
+    }
+    /* 新增信息块样式 */
+    .info-block {
+      background: var(--card-background);
+      padding: 10px;
+      border-radius: 4px;
+      border: 1px solid var(--metric-border);
+      margin-top: 12px;
+      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);
+      box-shadow: inset 0 0 5px rgba(0, 212, 255, 0.4);
+    }
+    .info-item {
+      margin-bottom: 6px;
+    }
+    .info-item:last-child {
+      margin-bottom: 0;
+    }
+    .info-label {
+      color: var(--label-color);
+      font-size: 12px;
+      margin-bottom: 4px;
+      white-space: nowrap;
+    }
+    .info-value {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--text-color);
+      text-shadow: 0 0 2px rgba(0, 212, 255, 0.3);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      line-clamp: 2;
+    }
+    .status-dot {
+      display: inline-block;
+      border-radius: 50%;
+      animation: pulse 2s infinite;
+      width: 10px;
+      height: 10px;
+      flex-shrink: 0;
+    }
+    .status-online {
+      background-color: var(--neon-green);
+      color: var(--neon-green);
+      box-shadow: 0 0 8px rgba(0, 255, 170, 0.6);
+    }
+    .status-offline {
+      background-color: #ff3b30;
+      color: #ff3b30;
+      box-shadow: 0 0 8px rgba(255, 59, 48, 0.6);
+    }
+    .status-sleep {
+      background-color: var(--neon-pink);
+      color: var(--neon-pink);
+      box-shadow: 0 0 8px rgba(255, 0, 255, 0.6);
+      animation: none;
+    }
+    .action-buttons {
+      display: flex;
+      gap: 10px;
+      margin-top: 12px;
+    }
+    .action-button {
+      background: var(--action-button-bg);
+      color: var(--accent-color);
+      border: none;
+      padding: 8px 14px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      transition: background 0.2s ease, box-shadow 0.2s ease;
+      text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
+      position: relative;
+      overflow: hidden;
+    }
+    .action-button:hover {
+      background: var(--action-button-hover);
+      box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+    }
+    .action-button::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 200%;
+      height: 200%;
+      background: radial-gradient(circle, rgba(0, 212, 255, 0.2) 0%, transparent 70%);
+      transform: translate(-50%, -50%);
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+    .action-button:hover::after {
+      opacity: 1;
+    }
+    .network-stats {
+      background: var(--metric-background);
+      border: 1px solid var(--metric-border);
+      margin-top: 20px;
+      padding: 16px;
+      border-radius: 6px;
+      transition: background 0.3s ease;
+      box-shadow: 0 0 5px rgba(0, 212, 255, 0.2);
+    }
+    .network-item {
+      font-size: 14px;
+      color: var(--secondary-text);
+    }
+    @keyframes pulse {
+      0% { box-shadow: 0 0 0 0 rgba(0, 255, 170, 0.6); }
+      70% { box-shadow: 0 0 0 8px rgba(0, 255, 170, 0); }
+      100% { box-shadow: 0 0 0 0 rgba(0, 255, 170, 0); }
+    }
+    @media (max-width: 900px) {
+      #summary {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 10px;
+      }
+      #summary div {
+        padding: 10px;
+      }
+      #summary span {
+        font-size: 20px;
+      }
+      .metric-grid {
+        grid-template-columns: repeat(3, 1fr); /* 与系统概览同步，变为3列 */
+        gap: 8px;
+      }
+      .metric-item {
+        padding: 8px;
+      }
+      .metric-value {
+        font-size: 13px;
+      }
+      .info-block {
+        padding: 8px;
+      }
+      .info-value {
+        font-size: 13px;
+      }
+    }
+    @media (max-width: 600px) {
+      #summary {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 8px;
+      }
+      #summary div {
+        padding: 8px;
+      }
+      #summary span {
+        font-size: 18px;
+      }
+      .user-servers {
+        grid-template-columns: 1fr !important;
+      }
+      .metric-grid {
+        grid-template-columns: repeat(2, 1fr); /* 与系统概览同步，变为2列 */
+        gap: 8px;
+      }
+      .metric-item {
+        padding: 6px;
+      }
+      .metric-value {
+        font-size: 13px;
+      }
+      .server-header {
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+      .container {
+        padding: 0 10px;
+      }
+      .overview {
+        padding: 16px;
+        margin-bottom: 20px;
+      }
+      .info-block {
+        padding: 6px;
+      }
+      .info-value {
+        font-size: 12px;
+        -webkit-line-clamp: 1;
+        line-clamp: 1;
+      }
+    }
+    @media (max-width: 400px) {
+      #summary {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 6px;
+      }
+      #summary div {
+        padding: 6px;
+      }
+      #summary span {
+        font-size: 16px;
+      }
+      .metric-grid {
+        grid-template-columns: repeat(2, 1fr); /* 保持2列，进一步优化间距和字体 */
+        gap: 6px;
+      }
+      .metric-item {
+        padding: 5px;
+      }
+      .metric-value {
+        font-size: 12px;
+      }
+      .info-block {
+        padding: 5px;
+      }
+      .info-value {
+        font-size: 11px;
+      }
+    }
+    .login-overlay, .confirm-overlay, .loading-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(10, 10, 30, 0.7);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+      display: none;
+    }
+    .login-box, .confirm-box {
+      background: var(--card-background);
+      padding: 24px;
+      border-radius: 8px;
+      border: 1px solid var(--card-border);
+      width: 320px;
+      text-align: center;
+      box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
+      position: relative;
+    }
+    .login-box::before, .confirm-box::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 3px;
+      background: linear-gradient(90deg, var(--accent-color), var(--neon-pink));
+    }
+    .login-box h2, .confirm-box h2 {
+      margin-bottom: 20px;
+      color: var(--accent-color);
+      font-size: 18px;
+      font-weight: 600;
+      text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+    }
+    .login-box input {
+      width: 100%;
+      padding: 12px 16px;
+      margin: 12px 0;
+      border: 1px solid var(--metric-border);
+      border-radius: 6px;
+      background: var(--metric-background);
+      color: var(--text-color);
+      font-size: 16px;
+      transition: border 0.2s ease, box-shadow 0.2s ease;
+    }
+    .login-box input:focus {
+      border-color: var(--accent-color);
+      box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
+      outline: none;
+    }
+    .login-box button, .confirm-box button {
+      width: 48%;
+      padding: 12px;
+      background: var(--action-button-bg);
+      border: none;
+      border-radius: 6px;
+      color: var(--accent-color);
+      cursor: pointer;
+      font-size: 16px;
+      font-weight: 500;
+      transition: background 0.2s ease, box-shadow 0.2s ease;
+      margin: 10px 1%;
+      text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
+    }
+    .login-box button:hover, .confirm-box button:hover {
+      background: var(--action-button-hover);
+      box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+    }
+    .login-box button:last-child, .confirm-box button:last-child {
+      background: transparent;
+      color: var(--neon-pink);
+    }
+    .login-box button:last-child:hover, .confirm-box button:last-child:hover {
+      background: rgba(255, 0, 255, 0.1);
+      box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
+    }
+    .login-error {
+      color: #ff3b30;
+      margin-top: 12px;
+      font-size: 14px;
+      text-shadow: 0 0 3px rgba(255, 59, 48, 0.5);
+    }
+    .login-button, .logout-button {
+      background: var(--action-button-bg);
+      border: none;
+      color: var(--accent-color);
+      padding: 8px 16px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      transition: background 0.2s ease, box-shadow 0.2s ease;
+      text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
+    }
+    .login-button:hover, .logout-button:hover {
+      background: var(--action-button-hover);
+      box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
+    }
+    .header-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+    .auth-buttons {
+      display: flex;
+      gap: 10px;
+    }
+    /* 加载状态指示器样式 */
+    .loader {
+      border: 5px solid transparent;
+      border-top: 5px solid var(--accent-color);
+      border-radius: 50%;
+      width: 50px;
+      height: 50px;
+      animation: spin 1s linear infinite;
+      box-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
+    }
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    /* 优化后的过滤与排序控件样式 */
+    .filter-sort-panel {
+      background: var(--card-background);
+      border: 1px solid var(--card-border);
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 20px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      align-items: center;
+      box-shadow: 0 0 8px rgba(0, 212, 255, 0.2);
+      transition: background 0.3s ease;
+    }
+    .filter-sort-group {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 14px;
+      color: var(--text-color);
+      min-width: 200px;
+    }
+    .filter-sort-group label {
+      white-space: nowrap;
+      color: var(--secondary-text);
+      font-weight: 500;
+      text-shadow: 0 0 2px rgba(0, 212, 255, 0.3);
+    }
+    .filter-sort-group select {
+      flex: 1;
+      background: var(--metric-background);
+      border: 1px solid var(--metric-border);
+      color: var(--text-color);
+      padding: 10px 14px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      transition: background 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
+      outline: none;
+      appearance: none;
+      background-image: url("data:image/svg+xml;utf8,<svg fill='%2300D4FF' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+      background-repeat: no-repeat;
+      background-position: right 10px center;
+      padding-right: 36px;
+      text-shadow: 0 0 2px rgba(0, 212, 255, 0.3);
+    }
+    .filter-sort-group select:hover {
+      background-color: var(--metric-hover);
+      box-shadow: 0 0 6px rgba(0, 212, 255, 0.4);
+    }
+    .filter-sort-group select:focus {
+      border-color: var(--accent-color);
+      box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
+    }
+    .refresh-button {
+      background: var(--action-button-bg);
+      border: none;
+      color: var(--accent-color);
+      padding: 8px 16px; /* 与 .chart-toggle-button 一致 */
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      transition: background 0.2s ease, box-shadow 0.2s ease;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
+    }
+    .refresh-button:hover {
+      background: var(--action-button-hover);
+      box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+    }
+    .refresh-icon {
+      width: 16px;
+      height: 16px;
+      fill: var(--accent-color);
+    }
+    @media (max-width: 600px) {
+      .filter-sort-group {
+        min-width: 100%;
+      }
+      .filter-sort-panel {
+        gap: 14px;
+        padding: 14px;
+      }
+    }
+    /* 图表相关样式 */
+    .chart-container {
+      display: none;
+      margin-top: 16px;
+      background: var(--card-background);
+      border: 1px solid var(--card-border);
+      border-radius: 6px;
+      padding: 12px;
+      height: 300px;
+      transition: background 0.3s ease;
+      box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
+    }
+    .chart-toggle-button {
+      background: var(--action-button-bg);
+      color: var(--accent-color);
+      border: none;
+      padding: 8px 16px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      transition: background 0.2s ease, box-shadow 0.2s ease;
+      margin-left: auto;
+      white-space: nowrap;
+      text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
+    }
+    .chart-toggle-button:hover {
+      background: var(--action-button-hover);
+      box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
+    }
+    .expanded .chart-container {
+      display: block;
+    }
+    canvas {
+      width: 100% !important;
+      height: auto !important;
+    }
+    @media (max-width: 600px) {
+      .chart-container {
+        height: 250px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="overview">
+      <div class="header-container">
+        <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>
+        </div>
+      </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="totalUpload">0 B/s</span></div>
+        <div>总下载: <span id="totalDownload">0 B/s</span></div>
+      </div>
+    </div>
+    <!-- 优化后的过滤与排序面板 -->
+    <div class="filter-sort-panel">
+      <div class="filter-sort-group">
+        <label for="statusFilter">过滤状态:</label>
+        <select id="statusFilter" onchange="applyFiltersAndSort()">
+          <option value="all">全部状态</option>
+          <option value="running">运行中</option>
+          <option value="sleeping">休眠中</option>
+          <option value="stopped">已停止</option>
+        </select>
+      </div>
+      <div class="filter-sort-group">
+        <label for="userFilter">过滤用户:</label>
+        <select id="userFilter" onchange="applyFiltersAndSort()">
+          <option value="all">全部用户</option>
+        </select>
+      </div>
+      <div class="filter-sort-group">
+        <label for="sortBy">排序方式:</label>
+        <select id="sortBy" onchange="applyFiltersAndSort()">
+          <option value="name-asc">名称 (A-Z)</option>
+          <option value="name-desc">名称 (Z-A)</option>
+          <option value="status-asc">状态 (运行-停止)</option>
+          <option value="status-desc">状态 (停止-运行)</option>
+        </select>
+      </div>
+      <button class="refresh-button" onclick="refreshData()">
+        <svg class="refresh-icon" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
+        </svg>
+        刷新数据
+      </button>
+    </div>
+    <div id="servers" class="stats-container">
+    </div>
+  </div>
+  <!-- 登录弹窗 -->
+  <div id="loginOverlay" class="login-overlay">
+    <div class="login-box">
+      <h2>登录</h2>
+      <input type="text" id="username" placeholder="用户名" aria-label="用户名">
+      <input type="password" id="password" placeholder="密码" aria-label="密码">
+      <div style="display: flex; justify-content: center; gap: 10px; margin-top: 20px;">
+        <button onclick="login()">登录</button>
+        <button onclick="hideLoginForm()">取消</button>
+      </div>
+      <div id="loginError" class="login-error" style="display: none;"></div>
+    </div>
+  </div>
+  <!-- 确认弹窗 -->
+  <div id="confirmOverlay" class="confirm-overlay">
+    <div class="confirm-box">
+      <h2 id="confirmTitle">确认操作</h2>
+      <p id="confirmMessage" style="margin-bottom: 20px; color: var(--text-color);"></p>
+      <button onclick="confirmAction()">确认</button>
+      <button onclick="cancelAction()">取消</button>
+    </div>
+  </div>
+  <!-- 加载状态覆盖层 -->
+  <div id="loadingOverlay" class="loading-overlay">
+    <div class="loader"></div>
+  </div>
+  <script>
+    // 全局变量，表示当前是否已登录
+    let isLoggedIn = false;
+    // 加载状态控制函数
+    function showLoading() {
+      document.getElementById('loadingOverlay').style.display = 'flex';
+    }
+    function hideLoading() {
+      document.getElementById('loadingOverlay').style.display = 'none';
+    }
+    // 登录状态管理
+    function checkLoginStatus() {
+      const token = localStorage.getItem('authToken');
+      const loginButton = document.getElementById('loginButton');
+      const logoutButton = document.getElementById('logoutButton');
+      if (token) {
+        console.log('本地存储中找到 token，尝试验证:', token.slice(0, 8) + '...');
+        showLoading();
+        return fetch('/api/verify-token', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ token })
+        })
+        .then(response => response.json())
+        .then(data => {
+          hideLoading();
+          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);
+          }
+          return data.success;
+        })
+        .catch(error => {
+          hideLoading();
+          console.error('验证 token 失败，清除本地存储:', error);
+          localStorage.removeItem('authToken');
+          isLoggedIn = false;
+          loginButton.style.display = 'block';
+          logoutButton.style.display = 'none';
+          updateActionButtons(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() {
+      document.getElementById('loginOverlay').style.display = 'flex';
+      document.getElementById('username').value = '';
+      document.getElementById('password').value = '';
+      document.getElementById('loginError').style.display = 'none';
+      document.getElementById('username').focus();
+    }
+    function hideLoginForm() {
+      document.getElementById('loginOverlay').style.display = 'none';
+    }
+    function login() {
+      const username = document.getElementById('username').value;
+      const password = document.getElementById('password').value;
+      const loginError = document.getElementById('loginError');
+      showLoading();
+      fetch('/api/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ username, password })
+      })
+      .then(response => response.json())
+      .then(data => {
+        hideLoading();
+        if (data.success) {
+          console.log('登录成功，保存 token');
+          localStorage.setItem('authToken', data.token);
+          isLoggedIn = true;
+          hideLoginForm();
+          document.getElementById('loginButton').style.display = 'none';
+          document.getElementById('logoutButton').style.display = 'block';
+          updateActionButtons(true);
+          refreshData(); // 登录成功后刷新数据以显示所有实例包括 private
+        } else {
+          console.log('登录失败:', data.message);
+          loginError.textContent = data.message || '登录失败';
+          loginError.style.display = 'block';
+        }
+      })
+      .catch(error => {
+        hideLoading();
+        console.error('登录请求失败:', error);
+        loginError.textContent = '登录请求失败，请稍后重试';
+        loginError.style.display = 'block';
+      });
+    }
+    function logout() {
+      const token = localStorage.getItem('authToken');
+      if (token) {
+        showLoading();
+        fetch('/api/logout', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ token })
+        })
+        .then(response => response.json())
+        .then(data => {
+          hideLoading();
+          console.log('登出成功，清除 token');
+          localStorage.removeItem('authToken');
+          isLoggedIn = false;
+          document.getElementById('loginButton').style.display = 'block';
+          document.getElementById('logoutButton').style.display = 'none';
+          updateActionButtons(false);
+          refreshData(); // 登出后刷新数据以隐藏 private 实例
+        })
+        .catch(error => {
+          hideLoading();
+          console.error('登出失败，但仍清除 token:', error);
+          localStorage.removeItem('authToken');
+          isLoggedIn = false;
+          document.getElementById('loginButton').style.display = 'block';
+          document.getElementById('logoutButton').style.display = 'none';
+          updateActionButtons(false);
+          refreshData(); // 登出后刷新数据以隐藏 private 实例
+        });
+      } else {
+        console.log('本地无 token，直接设置为未登录');
+        isLoggedIn = false;
+        document.getElementById('loginButton').style.display = 'block';
+        document.getElementById('logoutButton').style.display = 'none';
+        updateActionButtons(false);
+        refreshData(); // 登出后刷新数据以隐藏 private 实例
+      }
+    }
+    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 = loggedIn ? 'flex' : 'none';
+        }
+        // 动态添加或去除 not-logged-in 类以调整卡片高度
+        if (loggedIn) {
+          card.classList.remove('not-logged-in');
+        } else {
+          card.classList.add('not-logged-in');
+        }
+        // 确保图表切换按钮总是可见，不管是否登录
+        const chartToggleButton = card.querySelector('.chart-toggle-button');
+        if (chartToggleButton) {
+          chartToggleButton.style.display = 'inline-block';
+        }
+      });
+    }
+    // 使用 window.onload 确保页面完全加载后检查登录状态
+    window.onload = async function() {
+      console.log('页面加载完成，开始检查登录状态');
+      await checkLoginStatus();
+      console.log('登录状态检查完成，初始化数据');
+      await initialize();
+    };
+    // 二次确认弹窗逻辑
+    let pendingAction = null;
+    let pendingRepoId = null;
+    function showConfirmDialog(action, repoId, title, message) {
+      pendingAction = action;
+      pendingRepoId = repoId;
+      document.getElementById('confirmTitle').textContent = title;
+      document.getElementById('confirmMessage').textContent = message;
+      document.getElementById('confirmOverlay').style.display = 'flex';
+    }
+    function confirmAction() {
+      if (pendingAction === 'restart') {
+        restartSpace(pendingRepoId);
+      } else if (pendingAction === 'rebuild') {
+        rebuildSpace(pendingRepoId);
+      }
+      cancelAction();
+    }
+    function cancelAction() {
+      pendingAction = null;
+      pendingRepoId = null;
+      document.getElementById('confirmOverlay').style.display = 'none';
+    }
+    async function getUsernames() {
+      try {
+        showLoading();
+        const token = localStorage.getItem('authToken');
+        const headers = {};
+        if (token) {
+          headers['Authorization'] = `Bearer ${token}`;
+          console.log('getUsernames 请求中附加 Token:', token.slice(0, 8) + '...');
+        }
+        const response = await fetch('/api/config', { headers });
+        const config = await response.json();
+        hideLoading();
+        const usernamesList = config.usernames ? config.usernames.split(',').map(name => name.trim()).filter(name => name) : [];
+        document.getElementById('totalUsers').textContent = usernamesList.length;
+        // 更新用户过滤下拉菜单
+        const userFilter = document.getElementById('userFilter');
+        userFilter.innerHTML = '<option value="all">全部用户</option>';
+        usernamesList.forEach(username => {
+          const option = document.createElement('option');
+          option.value = username;
+          option.textContent = username;
+          userFilter.appendChild(option);
+        });
+        return usernamesList;
+      } catch (error) {
+        hideLoading();
+        console.error('Failed to fetch usernames:', error);
+        document.getElementById('totalUsers').textContent = 0;
+        return [];
+      }
+    }
+    async function fetchInstances() {
+      try {
+        showLoading();
+        const token = localStorage.getItem('authToken');
+        const headers = {};
+        if (token) {
+          headers['Authorization'] = `Bearer ${token}`;
+          console.log('fetchInstances 请求中附加 Token:', token.slice(0, 8) + '...');
+        } else {
+          console.log('无可用 Token，未附加 Authorization 头');
+        }
+        const response = await fetch('/api/proxy/spaces', { headers });
+        const instances = await response.json();
+        console.log('从后端获取的实例列表:', instances);
+        hideLoading();
+        if (instances.length === 0) {
+          alert('未获取到实例数据，可能是网络问题或数据暂不可用。');
+        }
+        return instances;
+      } catch (error) {
+        hideLoading();
+        console.error("获取实例列表失败：", error);
+        alert('获取实例列表失败，请稍后重试。');
+        return [];
+      }
+    }
+    class MetricsStreamManager {
+      constructor() {
+        this.eventSource = null;
+      }
+      connect(subscribedInstances = []) {
+        if (this.eventSource) {
+          this.eventSource.close();
+        }
+        const instancesParam = subscribedInstances.join(',');
+        const token = localStorage.getItem('authToken');
+        // 由于 EventSource 不支持直接设置 Authorization 头，这里通过查询参数传递 token
+        const url = `/api/proxy/live-metrics-stream?instances=${encodeURIComponent(instancesParam)}&token=${encodeURIComponent(token || '')}`;
+        console.log('SSE 连接 URL:', url.split('&token=')[0] + (token ? '&token=... (隐藏)' : '&token=空'));
+        this.eventSource = new EventSource(url);
+        this.eventSource.addEventListener("metric", (event) => {
+          try {
+            const data = JSON.parse(event.data);
+            const { repoId, metrics } = data;
+            updateServerCard(metrics, repoId);
+          } catch (error) {
+            console.error(`解析监控数据失败:`, error);
+          }
+        });
+        this.eventSource.onerror = (error) => {
+          console.error(`SSE 连接错误:`, error);
+          this.eventSource.close();
+          this.eventSource = null;
+          // 可选：尝试重新连接
+          setTimeout(() => this.connect(subscribedInstances), 5000);
+        };
+        console.log(`SSE 连接已建立，订阅实例: ${instancesParam || '无'}`);
+      }
+      disconnect() {
+        if (this.eventSource) {
+          this.eventSource.close();
+          this.eventSource = null;
+          console.log(`SSE 连接已断开`);
+        }
+      }
+    }
+    const metricsStreamManager = new MetricsStreamManager();
+    const instanceMap = new Map();
+    const serverStatus = new Map();
+    let allInstances = []; // 存储所有实例数据，用于过滤和排序
+    const chartInstances = new Map(); // 存储每个实例的图表实例
+    const chartDataBuffer = new Map(); // 存储图表数据缓冲以减少更新频率
+    async function initialize() {
+      await getUsernames();
+      const instances = await fetchInstances();
+      allInstances = instances;
+      renderInstances(allInstances);
+      // 默认只监控状态为 running 的实例
+      const runningInstances = instances
+        .filter(instance => instance.status.toLowerCase() === 'running')
+        .map(instance => instance.repo_id);
+      metricsStreamManager.connect(runningInstances);
+      updateSummary();
+      updateActionButtons(isLoggedIn);
+    }
+    // 手动刷新数据函数
+    async function refreshData() {
+      metricsStreamManager.disconnect();
+      // 销毁所有图表实例
+      chartInstances.forEach(chart => {
+        if (chart) {
+          chart.destroy();
+        }
+      });
+      chartInstances.clear();
+      chartDataBuffer.clear();
+      await initialize();
+      applyFiltersAndSort(); // 确保刷新后重新应用过滤和排序
+    }
+    function renderInstances(instances) {
+      const serversContainer = document.getElementById('servers');
+      serversContainer.innerHTML = ''; // 清空现有内容
+      const userGroups = {};
+      // 按用户分组
+      instances.forEach(instance => {
+        if (!userGroups[instance.owner]) {
+          userGroups[instance.owner] = [];
+        }
+        userGroups[instance.owner].push(instance);
+      });
+      // 渲染每个用户组
+      Object.keys(userGroups).forEach(owner => {
+        let userGroup = document.createElement('details');
+        userGroup.className = 'user-group';
+        userGroup.id = `user-${owner}`;
+        userGroup.setAttribute('open', '');
+        const summary = document.createElement('summary');
+        summary.textContent = `用户: ${owner}`;
+        userGroup.appendChild(summary);
+        const userServers = document.createElement('div');
+        userServers.className = 'user-servers';
+        userGroup.appendChild(userServers);
+        serversContainer.appendChild(userGroup);
+        // 渲染该用户下的实例
+        userGroups[owner].forEach(instance => {
+          renderInstanceCard(instance, userServers);
+        });
+      });
+    }
+    // 图表配置函数
+    function createChart(instanceId) {
+      const canvasId = `chart-${instanceId}`;
+      const canvas = document.getElementById(canvasId);
+      if (!canvas) return null;
+      const gridColor = 'rgba(0, 212, 255, 0.1)';
+      const textColor = '#E0E0FF';
+      const cpuColor = '#00FFAA';
+      const memoryColor = '#00D4FF';
+      const uploadColor = '#FF9500';
+      const downloadColor = '#FF00FF';
+      const ctx = canvas.getContext('2d');
+      const chart = new Chart(ctx, {
+        type: 'line',
+        data: {
+          labels: Array(30).fill(''), // 初始为空标签，最多30个数据点
+          datasets: [
+            {
+              label: 'CPU 使用率 (%)',
+              data: [],
+              borderColor: cpuColor,
+              backgroundColor: 'rgba(0, 255, 170, 0.2)',
+              tension: 0.4,
+              fill: true,
+            },
+            {
+              label: '内存使用率 (%)',
+              data: [],
+              borderColor: memoryColor,
+              backgroundColor: 'rgba(0, 212, 255, 0.2)',
+              tension: 0.4,
+              fill: true,
+            },
+            {
+              label: '上传速度 (KB/s)',
+              data: [],
+              borderColor: uploadColor,
+              backgroundColor: 'rgba(255, 149, 0, 0.2)',
+              tension: 0.4,
+              fill: true,
+            },
+            {
+              label: '下载速度 (KB/s)',
+              data: [],
+              borderColor: downloadColor,
+              backgroundColor: 'rgba(255, 0, 255, 0.2)',
+              tension: 0.4,
+              fill: true,
+            },
+          ]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              labels: {
+                color: textColor,
+                font: { size: 12, family: "'Orbitron', sans-serif" }
+              }
+            },
+            tooltip: {
+              mode: 'index',
+              intersect: false,
+              backgroundColor: 'rgba(20, 20, 40, 0.9)',
+              titleColor: textColor,
+              bodyColor: textColor,
+              padding: 12,
+              boxPadding: 8,
+              borderRadius: 6,
+              borderWidth: 1,
+              borderColor: 'rgba(0, 212, 255, 0.3)'
+            }
+          },
+          scales: {
+            y: {
+              beginAtZero: true,
+              grid: { color: gridColor, drawTicks: false },
+              ticks: {
+                color: textColor,
+                font: { size: 11, family: "'Orbitron', sans-serif" }
+              }
+            },
+            x: {
+              grid: { color: gridColor, drawTicks: false },
+              ticks: {
+                color: textColor,
+                font: { size: 11, family: "'Orbitron', sans-serif" },
+                maxRotation: 0,
+                minRotation: 0,
+                autoSkip: true,
+                autoSkipPadding: 10
+              }
+            }
+          },
+          elements: {
+            point: {
+              radius: 0, // 隐藏数据点
+              hitRadius: 5 // 确保悬停仍有效
+            },
+            line: {
+              borderWidth: 2
+            }
+          },
+          animation: false // 禁用图表动画，减少性能开销
+        }
+      });
+      chartInstances.set(instanceId, chart);
+      return chart;
+    }
+    // 更新图表数据，带有缓冲机制减少更新频率
+    function updateChart(instanceId, data) {
+      let buffer = chartDataBuffer.get(instanceId) || { data: [], count: 0 };
+      buffer.data.push(data);
+      buffer.count++;
+      if (buffer.count < 2) { // 每 2 次数据更新才渲染一次
+        chartDataBuffer.set(instanceId, buffer);
+        return;
+      }
+      let chart = chartInstances.get(instanceId);
+      if (!chart) {
+        chart = createChart(instanceId);
+        if (!chart) return;
+      }
+      // 获取当前数据集
+      const cpuData = chart.data.datasets[0].data;
+      const memoryData = chart.data.datasets[1].data;
+      const uploadData = chart.data.datasets[2].data;
+      const downloadData = chart.data.datasets[3].data;
+      // 追加最新数据
+      const latestData = buffer.data[buffer.data.length - 1];
+      cpuData.push(latestData.cpu_usage_pct);
+      memoryData.push(((latestData.memory_used_bytes / latestData.memory_total_bytes) * 100).toFixed(2));
+      uploadData.push((latestData.tx_bps / 1024).toFixed(2)); // 转换为 KB/s
+      downloadData.push((latestData.rx_bps / 1024).toFixed(2)); // 转换为 KB/s
+      // 限制数据点数量为 30 个
+      if (cpuData.length > 30) {
+        cpuData.shift();
+        memoryData.shift();
+        uploadData.shift();
+        downloadData.shift();
+      }
+      // 更新图表
+      chart.update();
+      // 清空缓冲
+      chartDataBuffer.set(instanceId, { data: [], count: 0 });
+    }
+    // 计算相对时间的辅助函数
+    function formatRelativeTime(dateStr) {
+      if (!dateStr) return '未知时间';
+      try {
+        const date = new Date(dateStr);
+        const now = new Date();
+        const diffMs = now - date;
+        const diffSecs = Math.floor(diffMs / 1000);
+        const diffMins = Math.floor(diffSecs / 60);
+        const diffHrs = Math.floor(diffMins / 60);
+        const diffDays = Math.floor(diffHrs / 24);
+        if (diffDays > 7) {
+          return date.toLocaleDateString(); // 超过7天显示日期
+        } else if (diffDays > 0) {
+          return `${diffDays}天前`;
+        } else if (diffHrs > 0) {
+          return `${diffHrs}小时前`;
+        } else if (diffMins > 0) {
+          return `${diffMins}分钟前`;
+        } else {
+          return '刚刚';
+        }
+      } catch (error) {
+        console.error('时间格式化失败:', error);
+        return '未知时间';
+      }
+    }
+    // 切换信息块显示/隐藏的函数
+    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);
+      const cardId = `instance-${instanceId}`;
+      let card = document.getElementById(cardId);
+      if (!card) {
+        card = document.createElement('div');
+        card.id = cardId;
+        card.className = 'server-card';
+        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 实例
+        // 处理 short_description，默认值“暂无描述”
+        const description = instance.short_description && instance.short_description.trim() ? instance.short_description : 'N/A';
+        // 处理 last_modified，格式化为相对时间
+        const lastModified = formatRelativeTime(instance.last_modified);
+        card.innerHTML = `
+          <div class="server-header">
+            <div class="server-name" onclick="toggleInfoBlock('${instanceId}')">
+              <div class="status-dot status-sleep"></div>
+              ${iconSvg}
+              <div>${instance.name}</div>
+            </div>
+            <div>
+              <button class="chart-toggle-button" onclick="toggleChart('${instanceId}')">查看图表</button>
+            </div>
+          </div>
+          <div class="metric-grid">
+            <div class="metric-item">
+              <div class="metric-label">状态</div>
+              <div class="metric-value status">${instance.status}</div>
+            </div>
+            <div class="metric-item">
+              <div class="metric-label">CPU</div>
+              <div class="metric-value cpu-usage">N/A</div>
+            </div>
+            <div class="metric-item">
+              <div class="metric-label">内存</div>
+              <div class="metric-value memory-usage">N/A</div>
+            </div>
+            <div class="metric-item">
+              <div class="metric-label">上传</div>
+              <div class="metric-value upload">N/A</div>
+            </div>
+            <div class="metric-item">
+              <div class="metric-label">下载</div>
+              <div class="metric-value download">N/A</div>
+            </div>
+          </div>
+          <div class="info-block">
+            <div class="info-item">
+              <div class="info-label">描述</div>
+              <div class="info-value" title="${description}">${description}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">最近更新</div>
+              <div class="info-value">${lastModified}</div>
+            </div>
+          </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>
+          <div class="chart-container" id="chart-container-${instanceId}">
+            <canvas id="chart-${instanceId}"></canvas>
+          </div>
+        `;
+        container.appendChild(card);
+      }
+      const statusDot = card.querySelector('.status-dot');
+      const initialStatus = instance.status.toLowerCase();
+      if (initialStatus === 'running') {
+        statusDot.className = 'status-dot status-online';
+      } else if (initialStatus === 'sleeping') {
+        statusDot.className = 'status-dot status-sleep';
+      } else {
+        statusDot.className = 'status-dot status-offline';
+      }
+      serverStatus.set(instanceId, { lastSeen: Date.now(), isOnline: initialStatus === 'running', isSleep: initialStatus === 'sleeping', data: null, status: instance.status });
+    }
+    // 切换图表显示/隐藏
+    function toggleChart(instanceId) {
+      const card = document.getElementById(`instance-${instanceId}`);
+      const chartContainer = document.getElementById(`chart-container-${instanceId}`);
+      const toggleButton = card.querySelector('.chart-toggle-button');
+      if (!card || !chartContainer) return;
+      if (card.classList.contains('expanded')) {
+        card.classList.remove('expanded');
+        toggleButton.textContent = '查看图表';
+      } else {
+        card.classList.add('expanded');
+        toggleButton.textContent = '收起图表';
+        // 如果图表未初始化，则创建
+        if (!chartInstances.has(instanceId)) {
+          createChart(instanceId);
+        }
+      }
+    }
+    function updateServerCard(data, instanceId, isSleep = false) {
+      const cardId = `instance-${instanceId}`;
+      let card = document.getElementById(cardId);
+      const instance = instanceMap.get(instanceId);
+      if (!card && instance) {
+        // 如果卡片不存在，但实例存在，说明可能被过滤掉了，不渲染
+        return;
+      }
+      if (card) {
+        const statusDot = card.querySelector('.status-dot');
+        let upload = 'N/A', download = 'N/A', cpuUsage = 'N/A', memoryUsage = 'N/A';
+        let isOnline = false;
+        if (data) {
+          cpuUsage = `${data.cpu_usage_pct}%`;
+          memoryUsage = `${((data.memory_used_bytes / data.memory_total_bytes) * 100).toFixed(2)}%`;
+          upload = `${formatBytes(data.tx_bps)}/s`;
+          download = `${formatBytes(data.rx_bps)}/s`;
+          statusDot.className = 'status-dot status-online';
+          isOnline = true;
+          isSleep = false;
+          // 更新图表数据
+          updateChart(instanceId, data);
+        } else {
+          const currentStatus = instance?.status.toLowerCase() || 'unknown';
+          if (currentStatus === 'running') {
+            statusDot.className = 'status-dot status-online';
+            isOnline = true;
+            isSleep = false;
+          } else if (currentStatus === 'sleeping') {
+            statusDot.className = 'status-dot status-sleep';
+            isOnline = false;
+            isSleep = true;
+          } else {
+            statusDot.className = 'status-dot status-offline';
+            isOnline = false;
+            isSleep = false;
+          }
+        }
+        card.querySelector('.cpu-usage').textContent = cpuUsage;
+        card.querySelector('.memory-usage').textContent = memoryUsage;
+        card.querySelector('.upload').textContent = upload;
+        card.querySelector('.download').textContent = download;
+        serverStatus.set(instanceId, { lastSeen: Date.now(), isOnline, isSleep, data: data || null, status: instance?.status || 'unknown' });
+        updateSummary();
+      }
+    }
+    async function restartSpace(repoId) {
+      try {
+        const token = localStorage.getItem('authToken');
+        if (!token || !isLoggedIn) {
+          alert('请先登录以执行此操作');
+          showLoginForm();
+          return;
+        }
+        showLoading();
+        const encodedRepoId = encodeURIComponent(repoId);
+        const response = await fetch(`/api/proxy/restart/${encodedRepoId}`, {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${token}`
+          }
+        });
+        const result = await response.json();
+        hideLoading();
+        if (result.success) {
+          alert(`重启成功: ${repoId}`);
+          // 操作成功后立即刷新数据
+          refreshData();
+        } else {
+          if (response.status === 401) {
+            alert('登录已过期，请重新登录');
+            localStorage.removeItem('authToken');
+            isLoggedIn = false;
+            document.getElementById('loginButton').style.display = 'block';
+            document.getElementById('logoutButton').style.display = 'none';
+            updateActionButtons(false);
+            showLoginForm();
+          } else {
+            alert(`重启失败: ${result.error || '未知错误'}`);
+            console.error(`重启失败 (${repoId}):`, result.error, result.details);
+          }
+        }
+      } catch (error) {
+        hideLoading();
+        console.error(`重启失败 (${repoId}):`, error);
+        alert(`重启失败: ${error.message}`);
+      }
+    }
+    async function rebuildSpace(repoId) {
+      try {
+        const token = localStorage.getItem('authToken');
+        if (!token || !isLoggedIn) {
+          alert('请先登录以执行此操作');
+          showLoginForm();
+          return;
+        }
+        showLoading();
+        const encodedRepoId = encodeURIComponent(repoId);
+        const response = await fetch(`/api/proxy/rebuild/${encodedRepoId}`, {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${token}`
+          }
+        });
+        const result = await response.json();
+        hideLoading();
+        if (result.success) {
+          alert(`重建成功: ${repoId}`);
+          // 操作成功后立即刷新数据
+          refreshData();
+        } else {
+          if (response.status === 401) {
+            alert('登录已过期，请重新登录');
+            localStorage.removeItem('authToken');
+            isLoggedIn = false;
+            document.getElementById('loginButton').style.display = 'block';
+            document.getElementById('logoutButton').style.display = 'none';
+            updateActionButtons(false);
+            showLoginForm();
+          } else {
+            alert(`重建失败: ${result.error || '未知错误'}`);
+            console.error(`重建失败 (${repoId}):`, result.error, result.details);
+          }
+        }
+      } catch (error) {
+        hideLoading();
+        console.error(`重建失败 (${repoId}):`, error);
+        alert(`重建失败: ${error.message}`);
+      }
+    }
+    function updateSummary() {
+      let online = 0;
+      let offline = 0;
+      let totalUpload = 0;
+      let totalDownload = 0;
+      serverStatus.forEach((status, instanceId) => {
+        const isRecentlyOnline = status.isOnline || status.status.toLowerCase() === 'running';
+        if (isRecentlyOnline) {
+          online++;
+          if (status.data) {
+            totalUpload += parseFloat(status.data.tx_bps) || 0;
+            totalDownload += parseFloat(status.data.rx_bps) || 0;
+          }
+        } else {
+          offline++;
+        }
+      });
+      document.getElementById('totalServers').textContent = serverStatus.size;
+      document.getElementById('onlineServers').textContent = online;
+      document.getElementById('offlineServers').textContent = offline;
+      document.getElementById('totalUpload').textContent = `${formatBytes(totalUpload)}/s`;
+      document.getElementById('totalDownload').textContent = `${formatBytes(totalDownload)}/s`;
+    }
+    function formatBytes(bytes) {
+      if (bytes === 0) return '0 B';
+      const k = 1024;
+      const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+    setInterval(updateSummary, 5000);
+    setInterval(async () => {
+      metricsStreamManager.disconnect();
+      await initialize();
+    }, 300000);
+    // 应用过滤和排序
+    function applyFiltersAndSort() {
+      const statusFilter = document.getElementById('statusFilter').value;
+      const userFilter = document.getElementById('userFilter').value;
+      const sortBy = document.getElementById('sortBy').value;
+      // 过滤实例
+      let filteredInstances = allInstances;
+      if (statusFilter !== 'all') {
+        filteredInstances = filteredInstances.filter(instance => instance.status.toLowerCase() === statusFilter);
+      }
+      if (userFilter !== 'all') {
+        filteredInstances = filteredInstances.filter(instance => instance.owner === userFilter);
+      }
+      // 排序实例
+      filteredInstances.sort((a, b) => {
+        if (sortBy === 'name-asc') {
+          return a.name.localeCompare(b.name);
+        } else if (sortBy === 'name-desc') {
+          return b.name.localeCompare(a.name);
+        } else if (sortBy === 'status-asc') {
+          const statusOrder = { 'running': 0, 'sleeping': 1, 'stopped': 2 };
+          return statusOrder[a.status.toLowerCase()] - statusOrder[b.status.toLowerCase()];
+        } else if (sortBy === 'status-desc') {
+          const statusOrder = { 'running': 2, 'sleeping': 1, 'stopped': 0 };
+          return statusOrder[a.status.toLowerCase()] - statusOrder[b.status.toLowerCase()];
+        }
+        return 0;
+      });
+      // 重新渲染过滤和排序后的实例
+      instanceMap.clear();
+      serverStatus.clear();
+      metricsStreamManager.disconnect();
+      // 销毁现有图表实例
+      chartInstances.forEach(chart => {
+        if (chart) {
+          chart.destroy();
+        }
+      });
+      chartInstances.clear();
+      chartDataBuffer.clear();
+      renderInstances(filteredInstances);
+      // 默认监控状态为 running 的实例
+      const runningInstances = filteredInstances
+        .filter(instance => instance.status.toLowerCase() === 'running')
+        .map(instance => instance.repo_id);
+      metricsStreamManager.connect(runningInstances);
+      updateSummary();
+      updateActionButtons(isLoggedIn);
+    }
+    // 新增函数：在新标签页中打开实例的URL
+    function viewInstance(url) {
+      window.open(url, '_blank');
+    }
+    // 新增函数：在新标签页中打开实例的管理页面
+    function manageInstance(repoId) {
+      const manageUrl = `https://huggingface.co/spaces/${repoId}`;
+      window.open(manageUrl, '_blank');
+    }
+  </script>
+</body>
+</html>

server.js ADDED Viewed

	@@ -0,0 +1,754 @@

+const express = require('express');
+const path = require('path');
+const axios = require('axios');
+const crypto = require('crypto');
+const app = express();
+const port = process.env.PORT || 8080;
+// 启用 JSON 和 URL-encoded 请求解析
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+// 从环境变量获取 HuggingFace 用户名和对应的 API Token 映射
+const userTokenMapping = {};
+const usernames = [];
+const hfUserConfig = process.env.HF_USER || '';
+if (hfUserConfig) {
+  hfUserConfig.split(',').forEach(pair => {
+    const parts = pair.split(':').map(part => part.trim());
+    const username = parts[0];
+    const token = parts[1] || '';
+    if (username) {
+      usernames.push(username);
+      if (token) {
+        userTokenMapping[username] = token;
+      }
+    }
+  });
+}
+// 从环境变量获取登录凭据
+const ADMIN_USERNAME = process.env.USER_NAME || 'admin';
+const ADMIN_PASSWORD = process.env.USER_PASSWORD || 'password';
+// 从环境变量获取是否在未登录时展示 private 实例的配置，默认值为 false
+const SHOW_PRIVATE = process.env.SHOW_PRIVATE === 'true';
+console.log(`SHOW_PRIVATE 配置: ${SHOW_PRIVATE ? '未登录时展示 private 实例' : '未登录时隐藏 private 实例'}`);
+// 存储会话 token 的简单内存数据库（生产环境中应使用数据库或 Redis）
+const sessions = new Map();
+const SESSION_TIMEOUT = 24 * 60 * 60 * 1000; // 24小时超时
+// 缓存管理
+class SpaceCache {
+  constructor() {
+    this.spaces = {};
+    this.lastUpdate = null;
+  }
+  updateAll(spacesData) {
+    this.spaces = spacesData.reduce((acc, space) => ({ ...acc, [space.repo_id]: space }), {});
+    this.lastUpdate = Date.now();
+  }
+  getAll() {
+    return Object.values(this.spaces);
+  }
+  isExpired(expireMinutes = 5) {
+    if (!this.lastUpdate) return true;
+    return (Date.now() - this.lastUpdate) > (expireMinutes * 60 * 1000);
+  }
+  invalidate() {
+    this.lastUpdate = null;
+  }
+}
+const spaceCache = new SpaceCache();
+// 用于获取 Spaces 数据的函数，带有重试机制
+async function fetchSpacesWithRetry(username, token, maxRetries = 3, retryDelay = 2000) {
+  let retries = 0;
+  while (retries < maxRetries) {
+    try {
+      // 仅在 token 存在时添加 Authorization 头
+      const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
+      const response = await axios.get(`https://huggingface.co/api/spaces?author=${username}`, {
+        headers,
+        timeout: 10000 // 设置 10 秒超时
+      });
+      const spaces = response.data;
+      console.log(`获取到 ${spaces.length} 个 Spaces for ${username} (尝试 ${retries + 1}/${maxRetries})，使用 ${token ? 'Token 认证' : '无认证'}`);
+      return spaces;
+    } catch (error) {
+      retries++;
+      let errorDetail = error.message;
+      if (error.response) {
+        errorDetail += `, HTTP Status: ${error.response.status}`;
+      } else if (error.request) {
+        errorDetail += ', No response received (possible network issue)';
+      }
+      console.error(`获取 Spaces 列表失败 for ${username} (尝试 ${retries}/${maxRetries}): ${errorDetail}，使用 ${token ? 'Token 认证' : '无认证'}`);
+      if (retries < maxRetries) {
+        console.log(`等待 ${retryDelay/1000} 秒后重试...`);
+        await new Promise(resolve => setTimeout(resolve, retryDelay));
+      } else {
+        console.error(`达到最大重试次数 (${maxRetries})，放弃重试 for ${username}`);
+        return [];
+      }
+    }
+  }
+  return [];
+}
+// 提供静态文件（前端文件）
+app.use(express.static(path.join(__dirname, 'public')));
+// 提供配置信息的 API 接口
+app.get('/api/config', (req, res) => {
+  res.json({ usernames: usernames.join(',') });
+});
+// 登录 API 接口
+app.post('/api/login', (req, res) => {
+  const { username, password } = req.body;
+  if (username === ADMIN_USERNAME && password === ADMIN_PASSWORD) {
+    // 生成一个随机 token 作为会话标识
+    const token = crypto.randomBytes(16).toString('hex');
+    const expiresAt = Date.now() + SESSION_TIMEOUT;
+    sessions.set(token, { username, expiresAt });
+    console.log(`用户 ${username} 登录成功，生成 token: ${token.slice(0, 8)}...`);
+    res.json({ success: true, token });
+  } else {
+    console.log(`用户 ${username} 登录失败，凭据无效`);
+    res.status(401).json({ success: false, message: '用户名或密码错误' });
+  }
+});
+// 验证登录状态 API 接口
+app.post('/api/verify-token', (req, res) => {
+  const { token } = req.body;
+  const session = sessions.get(token);
+  if (session && session.expiresAt > Date.now()) {
+    res.json({ success: true, message: 'Token 有效' });
+  } else {
+    if (session) {
+      sessions.delete(token); // 删除过期的 token
+      console.log(`Token ${token.slice(0, 8)}... 已过期，已删除`);
+    }
+    res.status(401).json({ success: false, message: 'Token 无效或已过期' });
+  }
+});
+// 登出 API 接口
+app.post('/api/logout', (req, res) => {
+  const { token } = req.body;
+  sessions.delete(token);
+  console.log(`Token ${token.slice(0, 8)}... 已手动登出`);
+  res.json({ success: true, message: '登出成功' });
+});
+// 中间件：验证请求中的 token
+const authenticateToken = (req, res, next) => {
+  const authHeader = req.headers['authorization'];
+  if (!authHeader || !authHeader.startsWith('Bearer ')) {
+    return res.status(401).json({ error: '未提供有效的认证令牌' });
+  }
+  const token = authHeader.split(' ')[1];
+  const session = sessions.get(token);
+  if (session && session.expiresAt > Date.now()) {
+    req.session = session;
+    next();
+  } else {
+    if (session) {
+      sessions.delete(token); // 删除过期的 token
+      console.log(`Token ${token.slice(0, 8)}... 已过期，拒绝访问`);
+    }
+    return res.status(401).json({ error: '认证令牌无效或已过期' });
+  }
+};
+// 获取所有 spaces 列表（包括私有）
+app.get('/api/proxy/spaces', async (req, res) => {
+  try {
+    // 检查是否登录
+    let isAuthenticated = false;
+    const authHeader = req.headers['authorization'];
+    if (authHeader && authHeader.startsWith('Bearer ')) {
+      const token = authHeader.split(' ')[1];
+      const session = sessions.get(token);
+      if (session && session.expiresAt > Date.now()) {
+        isAuthenticated = true;
+        console.log(`用户已登录，Token: ${token.slice(0, 8)}...`);
+      } else {
+        if (session) {
+          sessions.delete(token); // 删除过期的 token
+          console.log(`Token ${token.slice(0, 8)}... 已过期，拒绝访问`);
+        }
+        console.log('用户认证失败，无有效 Token');
+      }
+    } else {
+      console.log('用户未提供认证令牌');
+    }
+    // 如果缓存为空或已过期，强制重新获取数据
+    const cachedSpaces = spaceCache.getAll();
+    if (cachedSpaces.length === 0 || spaceCache.isExpired()) {
+      console.log(cachedSpaces.length === 0 ? '缓存为空，强制重新获取数据' : '缓存已过期，重新获取数据');
+      const allSpaces = [];
+      for (const username of usernames) {
+        const token = userTokenMapping[username];
+        if (!token) {
+          console.warn(`用户 ${username} 没有配置 API Token，将尝试无认证访问公开数据`);
+        }
+        try {
+          const spaces = await fetchSpacesWithRetry(username, token);
+          for (const space of spaces) {
+            try {
+              // 仅在 token 存在时添加 Authorization 头
+              const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
+              const spaceInfoResponse = await axios.get(`https://huggingface.co/api/spaces/${space.id}`, { headers });
+              const spaceInfo = spaceInfoResponse.data;
+              const spaceRuntime = spaceInfo.runtime || {};
+              allSpaces.push({
+                repo_id: spaceInfo.id,
+                name: spaceInfo.cardData?.title || spaceInfo.id.split('/')[1],
+                owner: spaceInfo.author,
+                username: username,
+                url: `https://${spaceInfo.author}-${spaceInfo.id.split('/')[1]}.hf.space`,
+                status: spaceRuntime.stage || 'unknown',
+                last_modified: spaceInfo.lastModified || 'unknown',
+                created_at: spaceInfo.createdAt || 'unknown',
+                sdk: spaceInfo.sdk || 'unknown',
+                tags: spaceInfo.tags || [],
+                private: spaceInfo.private || false,
+                app_port: spaceInfo.cardData?.app_port || 'unknown',
+                short_description: spaceInfo.cardData?.short_description || '' // 新增字段，确保为空时返回空字符串
+              });
+            } catch (error) {
+              console.error(`处理 Space ${space.id} 失败:`, error.message, `使用 ${token ? 'Token 认证' : '无认证'}`);
+            }
+          }
+        } catch (error) {
+          console.error(`获取 Spaces 列表失败 for ${username}:`, error.message, `使用 ${token ? 'Token 认证' : '无认证'}`);
+        }
+      }
+      allSpaces.sort((a, b) => a.name.localeCompare(b.name));
+      spaceCache.updateAll(allSpaces);
+      console.log(`总共获取到 ${allSpaces.length} 个 Spaces`);
+      const safeSpaces = allSpaces.map(space => {
+        const { token, ...safeSpace } = space;
+        return safeSpace;
+      });
+      if (isAuthenticated) {
+        console.log('用户已登录，返回所有实例（包括 private）');
+        res.json(safeSpaces);
+      } else if (SHOW_PRIVATE) {
+        console.log('用户未登录，但 SHOW_PRIVATE 为 true，返回所有实例');
+        res.json(safeSpaces);
+      } else {
+        console.log('用户未登录，SHOW_PRIVATE 为 false，过滤 private 实例');
+        res.json(safeSpaces.filter(space => !space.private));
+      }
+    } else {
+      console.log('从缓存获取 Spaces 数据');
+      const safeSpaces = cachedSpaces.map(space => {
+        const { token, ...safeSpace } = space;
+        return safeSpace;
+      });
+      if (isAuthenticated) {
+        console.log('用户已登录，返回所有缓存实例（包括 private）');
+        return res.json(safeSpaces);
+      } else if (SHOW_PRIVATE) {
+        console.log('用户未登录，但 SHOW_PRIVATE 为 true，返回所有缓存实例');
+        return res.json(safeSpaces);
+      } else {
+        console.log('用户未登录，SHOW_PRIVATE 为 false，过滤 private 实例');
+        return res.json(safeSpaces.filter(space => !space.private));
+      }
+    }
+  } catch (error) {
+    console.error(`代理获取 spaces 列表失败:`, error.message);
+    res.status(500).json({ error: '获取 spaces 列表失败', details: error.message });
+  }
+});
+// 代理重启 Space（需要认证）
+app.post('/api/proxy/restart/:repoId(*)', authenticateToken, async (req, res) => {
+  try {
+    const { repoId } = req.params;
+    console.log(`尝试重启 Space: ${repoId}`);
+    const spaces = spaceCache.getAll();
+    const space = spaces.find(s => s.repo_id === repoId);
+    if (!space || !userTokenMapping[space.username]) {
+      console.error(`Space ${repoId} 未找到或无 Token 配置`);
+      return res.status(404).json({ error: 'Space 未找到或无 Token 配置' });
+    }
+    const headers = { 'Authorization': `Bearer ${userTokenMapping[space.username]}`, 'Content-Type': 'application/json' };
+    const response = await axios.post(`https://huggingface.co/api/spaces/${repoId}/restart`, {}, { headers });
+    console.log(`重启 Space ${repoId} 成功，状态码: ${response.status}`);
+    res.json({ success: true, message: `Space ${repoId} 重启成功` });
+  } catch (error) {
+    console.error(`重启 space 失败 (${req.params.repoId}):`, error.message);
+    if (error.response) {
+      console.error(`状态码: ${error.response.status}, 响应数据:`, error.response.data);
+      res.status(error.response.status || 500).json({ error: '重启 space 失败', details: error.response.data?.message || error.message });
+    } else {
+      res.status(500).json({ error: '重启 space 失败', details: error.message });
+    }
+  }
+});
+// 代理重建 Space（需要认证）
+app.post('/api/proxy/rebuild/:repoId(*)', authenticateToken, async (req, res) => {
+  try {
+    const { repoId } = req.params;
+    console.log(`尝试重建 Space: ${repoId}`);
+    const spaces = spaceCache.getAll();
+    const space = spaces.find(s => s.repo_id === repoId);
+    if (!space || !userTokenMapping[space.username]) {
+      console.error(`Space ${repoId} 未找到或无 Token 配置`);
+      return res.status(404).json({ error: 'Space 未找到或无 Token 配置' });
+    }
+    const headers = { 'Authorization': `Bearer ${userTokenMapping[space.username]}`, 'Content-Type': 'application/json' };
+    // 将 factory_reboot 参数作为查询参数传递，而非请求体
+    const response = await axios.post(
+      `https://huggingface.co/api/spaces/${repoId}/restart?factory=true`,
+      {},
+      { headers }
+    );
+    console.log(`重建 Space ${repoId} 成功，状态码: ${response.status}`);
+    res.json({ success: true, message: `Space ${repoId} 重建成功` });
+  } catch (error) {
+    console.error(`重建 space 失败 (${req.params.repoId}):`, error.message);
+    if (error.response) {
+      console.error(`状态码: ${error.response.status}, 响应数据:`, error.response.data);
+      res.status(error.response.status || 500).json({ error: '重建 space 失败', details: error.response.data?.message || error.message });
+    } else {
+      res.status(500).json({ error: '重建 space 失败', details: error.message });
+    }
+  }
+});
+// 外部 API 服务（类似于 Flask 的 /api/v1）
+app.get('/api/v1/info/:token', async (req, res) => {
+  try {
+    const { token } = req.params;
+    const authHeader = req.headers.authorization;
+    if (!authHeader || !authHeader.startsWith('Bearer ') || authHeader.split(' ')[1] !== process.env.API_KEY) {
+      return res.status(401).json({ error: '无效的 API 密钥' });
+    }
+    const headers = { 'Authorization': `Bearer ${token}` };
+    const userInfoResponse = await axios.get('https://huggingface.co/api/whoami-v2', { headers });
+    const username = userInfoResponse.data.name;
+    const spacesResponse = await axios.get(`https://huggingface.co/api/spaces?author=${username}`, { headers });
+    const spaces = spacesResponse.data;
+    const spaceList = [];
+    for (const space of spaces) {
+      try {
+        const spaceInfoResponse = await axios.get(`https://huggingface.co/api/spaces/${space.id}`, { headers });
+        spaceList.push(spaceInfoResponse.data.id);
+      } catch (error) {
+        console.error(`获取 Space 信息失败 (${space.id}):`, error.message);
+      }
+    }
+    res.json({ spaces: spaceList, total: spaceList.length });
+  } catch (error) {
+    console.error(`获取 spaces 列表失败 (外部 API):`, error.message);
+    res.status(500).json({ error: error.message });
+  }
+});
+app.get('/api/v1/info/:token/:spaceId(*)', async (req, res) => {
+  try {
+    const { token, spaceId } = req.params;
+    const authHeader = req.headers.authorization;
+    if (!authHeader || !authHeader.startsWith('Bearer ') || authHeader.split(' ')[1] !== process.env.API_KEY) {
+      return res.status(401).json({ error: '无效的 API 密钥' });
+    }
+    const headers = { 'Authorization': `Bearer ${token}` };
+    const spaceInfoResponse = await axios.get(`https://huggingface.co/api/spaces/${spaceId}`, { headers });
+    const spaceInfo = spaceInfoResponse.data;
+    const spaceRuntime = spaceInfo.runtime || {};
+    res.json({
+      id: spaceInfo.id,
+      status: spaceRuntime.stage || 'unknown',
+      last_modified: spaceInfo.lastModified || null,
+      created_at: spaceInfo.createdAt || null,
+      sdk: spaceInfo.sdk || 'unknown',
+      tags: spaceInfo.tags || [],
+      private: spaceInfo.private || false
+    });
+  } catch (error) {
+    console.error(`获取 space 信息失败 (外部 API):`, error.message);
+    res.status(error.response?.status || 404).json({ error: error.message });
+  }
+});
+app.post('/api/v1/action/:token/:spaceId(*)/restart', async (req, res) => {
+  try {
+    const { token, spaceId } = req.params;
+    const authHeader = req.headers.authorization;
+    if (!authHeader || !authHeader.startsWith('Bearer ') || authHeader.split(' ')[1] !== process.env.API_KEY) {
+      return res.status(401).json({ error: '无效的 API 密钥' });
+    }
+    const headers = { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' };
+    await axios.post(`https://huggingface.co/api/spaces/${spaceId}/restart`, {}, { headers });
+    res.json({ success: true, message: `Space ${spaceId} 重启成功` });
+  } catch (error) {
+    console.error(`重启 space 失败 (外部 API):`, error.message);
+    res.status(error.response?.status || 500).json({ success: false, error: error.message });
+  }
+});
+app.post('/api/v1/action/:token/:spaceId(*)/rebuild', async (req, res) => {
+  try {
+    const { token, spaceId } = req.params;
+    const authHeader = req.headers.authorization;
+    if (!authHeader || !authHeader.startsWith('Bearer ') || authHeader.split(' ')[1] !== process.env.API_KEY) {
+      return res.status(401).json({ error: '无效的 API 密钥' });
+    }
+    const headers = { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' };
+    console.log(`外部 API 发送重建请求，spaceId: ${spaceId}`);
+    // 将 factory_reboot 参数作为查询参数传递，而非请求体
+    const response = await axios.post(
+      `https://huggingface.co/api/spaces/${spaceId}/restart?factory=true`,
+      {},
+      { headers }
+    );
+    console.log(`外部 API 重建 Space ${spaceId} 成功，状态码: ${response.status}`);
+    res.json({ success: true, message: `Space ${spaceId} 重建成功` });
+  } catch (error) {
+    console.error(`重建 space 失败 (外部 API):`, error.message);
+    if (error.response) {
+      console.error(`状态码: ${error.response.status}, 响应数据:`, error.response.data);
+      res.status(error.response.status || 500).json({ success: false, error: error.response.data?.message || error.message });
+    } else {
+      res.status(500).json({ success: false, error: error.message });
+    }
+  }
+});
+// 监控数据管理类
+class MetricsConnectionManager {
+  constructor() {
+    this.connections = new Map(); // 存储 HuggingFace API 的监控连接
+    this.clients = new Map(); // 存储前端客户端的 SSE 连接
+    this.instanceData = new Map(); // 存储每个实例的最新监控数据
+  }
+  // 建立到 HuggingFace API 的监控连接
+  async connectToInstance(repoId, username, token) {
+    if (this.connections.has(repoId)) {
+      return this.connections.get(repoId);
+    }
+    const instanceId = repoId.split('/')[1];
+    const url = `https://api.hf.space/v1/${username}/${instanceId}/live-metrics/sse`;
+    // 仅在 token 存在且非空时添加 Authorization 头
+    const headers = token ? {
+      'Authorization': `Bearer ${token}`,
+      'Accept': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive'
+    } : {
+      'Accept': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive'
+    };
+    try {
+      const response = await axios({
+        method: 'get',
+        url,
+        headers,
+        responseType: 'stream',
+        timeout: 10000
+      });
+      const stream = response.data;
+      stream.on('data', (chunk) => {
+        const chunkStr = chunk.toString();
+        if (chunkStr.includes('event: metric')) {
+          const dataMatch = chunkStr.match(/data: (.*)/);
+          if (dataMatch && dataMatch[1]) {
+            try {
+              const metrics = JSON.parse(dataMatch[1]);
+              this.instanceData.set(repoId, metrics);
+              // 推送给所有订阅了该实例的客户端
+              this.clients.forEach((clientRes, clientId) => {
+                if (clientRes.subscribedInstances && clientRes.subscribedInstances.includes(repoId)) {
+                  clientRes.write(`event: metric\n`);
+                  clientRes.write(`data: ${JSON.stringify({ repoId, metrics })}\n\n`);
+                }
+              });
+            } catch (error) {
+              console.error(`解析监控数据失败 (${repoId}):`, error.message);
+            }
+          }
+        }
+      });
+      stream.on('error', (error) => {
+        console.error(`监控连接错误 (${repoId}):`, error.message);
+        this.connections.delete(repoId);
+        this.instanceData.delete(repoId);
+      });
+      stream.on('end', () => {
+        console.log(`监控连接结束 (${repoId})`);
+        this.connections.delete(repoId);
+        this.instanceData.delete(repoId);
+      });
+      this.connections.set(repoId, stream);
+      console.log(`已建立监控连接 (${repoId})，使用 ${token ? 'Token 认证' : '无认证'}`);
+      return stream;
+    } catch (error) {
+      console.error(`无法连接到监控端点 (${repoId}):`, error.message);
+      this.connections.delete(repoId);
+      return null;
+    }
+  }
+  // 注册前端客户端的 SSE 连接
+  registerClient(clientId, res, subscribedInstances) {
+    res.subscribedInstances = subscribedInstances || [];
+    this.clients.set(clientId, res);
+    console.log(`客户端 ${clientId} 注册，订阅实例: ${res.subscribedInstances.join(', ') || '无'}`);
+    // 首次连接时，推送已缓存的最新数据
+    res.subscribedInstances.forEach(repoId => {
+      if (this.instanceData.has(repoId)) {
+        const metrics = this.instanceData.get(repoId);
+        res.write(`event: metric\n`);
+        res.write(`data: ${JSON.stringify({ repoId, metrics })}\n\n`);
+      }
+    });
+  }
+  // 客户端断开连接
+  unregisterClient(clientId) {
+    this.clients.delete(clientId);
+    console.log(`客户端 ${clientId} 断开连接`);
+    this.cleanupConnections();
+  }
+  // 更新客户端订阅的实例列表
+  updateClientSubscriptions(clientId, subscribedInstances) {
+    const clientRes = this.clients.get(clientId);
+    if (clientRes) {
+      clientRes.subscribedInstances = subscribedInstances || [];
+      console.log(`客户端 ${clientId} 更新订阅: ${clientRes.subscribedInstances.join(', ') || '无'}`);
+      // 更新后推送最新的缓存数据
+      subscribedInstances.forEach(repoId => {
+        if (this.instanceData.has(repoId)) {
+          const metrics = this.instanceData.get(repoId);
+          clientRes.write(`event: metric\n`);
+          clientRes.write(`data: ${JSON.stringify({ repoId, metrics })}\n\n`);
+        }
+      });
+    }
+    this.cleanupConnections();
+  }
+  // 清理未被任何客户端订阅的连接
+  cleanupConnections() {
+    const subscribedRepoIds = new Set();
+    this.clients.forEach(clientRes => {
+      clientRes.subscribedInstances.forEach(repoId => subscribedRepoIds.add(repoId));
+    });
+    const toRemove = [];
+    this.connections.forEach((stream, repoId) => {
+      if (!subscribedRepoIds.has(repoId)) {
+        toRemove.push(repoId);
+        stream.destroy();
+        console.log(`清理未订阅的监控连接 (${repoId})`);
+      }
+    });
+    toRemove.forEach(repoId => {
+      this.connections.delete(repoId);
+      this.instanceData.delete(repoId);
+    });
+  }
+}
+const metricsManager = new MetricsConnectionManager();
+// 新增统一监控数据的SSE端点
+app.get('/api/proxy/live-metrics-stream', (req, res) => {
+  // 设置 SSE 所需的响应头
+  res.set({
+    'Content-Type': 'text/event-stream',
+    'Cache-Control': 'no-cache',
+    'Connection': 'keep-alive'
+  });
+  // 生成唯一的客户端ID
+  const clientId = crypto.randomBytes(8).toString('hex');
+  // 获取查询参数中的实例列表和 token
+  const instancesParam = req.query.instances || '';
+  const token = req.query.token || '';
+  const subscribedInstances = instancesParam.split(',').filter(id => id.trim() !== '');
+  // 检查登录状态
+  let isAuthenticated = false;
+  if (token) {
+    const session = sessions.get(token);
+    if (session && session.expiresAt > Date.now()) {
+      isAuthenticated = true;
+      console.log(`SSE 用户已登录，Token: ${token.slice(0, 8)}...`);
+    } else {
+      if (session) {
+        sessions.delete(token);
+        console.log(`SSE Token ${token.slice(0, 8)}... 已过期，拒绝访问`);
+      }
+      console.log('SSE 用户认证失败，无有效 Token');
+    }
+  } else {
+    console.log('SSE 用户未提供认证令牌');
+  }
+  // 注册客户端
+  metricsManager.registerClient(clientId, res, subscribedInstances);
+  // 根据订阅列表建立监控连接
+  const spaces = spaceCache.getAll();
+  subscribedInstances.forEach(repoId => {
+    const space = spaces.find(s => s.repo_id === repoId);
+    if (space) {
+      const username = space.username;
+      const token = userTokenMapping[username] || '';
+      metricsManager.connectToInstance(repoId, username, token);
+    }
+  });
+  // 监听客户端断开连接
+  req.on('close', () => {
+    metricsManager.unregisterClient(clientId);
+    console.log(`客户端 ${clientId} 断开 SSE 连接`);
+  });
+});
+// 新增接口：更新客户端订阅的实例列表
+app.post('/api/proxy/update-subscriptions', (req, res) => {
+  const { clientId, instances } = req.body;
+  if (!clientId || !instances || !Array.isArray(instances)) {
+    return res.status(400).json({ error: '缺少 clientId 或 instances 参数' });
+  }
+  metricsManager.updateClientSubscriptions(clientId, instances);
+  // 根据新订阅列表建立监控连接
+  const spaces = spaceCache.getAll();
+  instances.forEach(repoId => {
+    const space = spaces.find(s => s.repo_id === repoId);
+    if (space) {
+      const username = space.username;
+      const token = userTokenMapping[username] || '';
+      metricsManager.connectToInstance(repoId, username, token);
+    }
+  });
+  res.json({ success: true, message: '订阅列表已更新' });
+});
+// 处理其他请求，重定向到 index.html
+app.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname, 'public', 'index.html'));
+});
+// 定期清理过期的会话
+setInterval(() => {
+  const now = Date.now();
+  for (const [token, session] of sessions.entries()) {
+    if (session.expiresAt < now) {
+      sessions.delete(token);
+      console.log(`Token ${token.slice(0, 8)}... 已过期，自动清理`);
+    }
+  }
+}, 60 * 60 * 1000); // 每小时清理一次
+// 定时刷新缓存任务
+const REFRESH_INTERVAL = 5 * 60 * 1000; // 每 5 分钟检查一次
+async function refreshSpacesCachePeriodically() {
+  console.log('启动定时刷新缓存任务...');
+  setInterval(async () => {
+    try {
+      const cachedSpaces = spaceCache.getAll();
+      if (spaceCache.isExpired() || cachedSpaces.length === 0) {
+        console.log('定时任务：缓存已过期或为空，重新获取 Spaces 数据');
+        const allSpaces = [];
+        for (const username of usernames) {
+          const token = userTokenMapping[username];
+          if (!token) {
+            console.warn(`用户 ${username} 没有配置 API Token，将尝试无认证访问公开数据`);
+          }
+          try {
+            const spaces = await fetchSpacesWithRetry(username, token);
+            for (const space of spaces) {
+              try {
+                const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
+                const spaceInfoResponse = await axios.get(`https://huggingface.co/api/spaces/${space.id}`, { headers });
+                const spaceInfo = spaceInfoResponse.data;
+                const spaceRuntime = spaceInfo.runtime || {};
+                allSpaces.push({
+                  repo_id: spaceInfo.id,
+                  name: spaceInfo.cardData?.title || spaceInfo.id.split('/')[1],
+                  owner: spaceInfo.author,
+                  username: username,
+                  url: `https://${spaceInfo.author}-${spaceInfo.id.split('/')[1]}.hf.space`,
+                  status: spaceRuntime.stage || 'unknown',
+                  last_modified: spaceInfo.lastModified || 'unknown',
+                  created_at: spaceInfo.createdAt || 'unknown',
+                  sdk: spaceInfo.sdk || 'unknown',
+                  tags: spaceInfo.tags || [],
+                  private: spaceInfo.private || false,
+                  app_port: spaceInfo.cardData?.app_port || 'unknown',
+                  short_description: spaceInfo.cardData?.short_description || '' // 新增字段，确保为空时返回空字符串
+                });
+              } catch (error) {
+                console.error(`处理 Space ${space.id} 失败:`, error.message);
+              }
+            }
+          } catch (error) {
+            console.error(`获取 Spaces 列表失败 for ${username}:`, error.message);
+          }
+        }
+        allSpaces.sort((a, b) => a.name.localeCompare(b.name));
+        spaceCache.updateAll(allSpaces);
+        console.log(`定时任务：总共获取到 ${allSpaces.length} 个 Spaces，缓存已更新`);
+      } else {
+        console.log('定时任务：缓存有效且不为空，无需更新');
+      }
+    } catch (error) {
+      console.error('定时任务：刷新缓存失败:', error.message);
+    }
+  }, REFRESH_INTERVAL);
+}
+app.listen(port, () => {
+  console.log(`Server running on port ${port}`);
+  console.log(`User configurations:`, usernames.map(user => `${user}: ${userTokenMapping[user] ? 'Token Configured' : 'No Token'}`).join(', ') || 'None');
+  console.log(`Admin login enabled: Username=${ADMIN_USERNAME}, Password=${ADMIN_PASSWORD ? 'Configured' : 'Not Configured'}`);
+  refreshSpacesCachePeriodically(); // 启动定时任务
+});