Update public/index.html

public/index.html

@@ -630,7 +630,63 @@
     .loading-text {
       font-size: 0.9375rem;
     }
-    
+    	.instance-url {
+	  display: flex;
+	  align-items: center;
+	  background: var(--network-background);
+	  border-radius: var(--border-radius-sm);
+	  padding: 10px 12px;
+	  margin: 15px 0;
+	  font-size: 0.875rem;
+	  border: 1px solid var(--metric-border);
+	  overflow: hidden;
+	}
+	.url-link {
+	  color: var(--primary-color);
+	  text-decoration: none;
+	  white-space: nowrap;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  flex: 1;
+	  display: flex;
+	  align-items: center;
+	  gap: 6px;
+	}
+	.url-link:hover {
+	  text-decoration: underline;
+	}
+	.btn-icon {
+	  background: transparent;
+	  border: none;
+	  color: var(--secondary-text);
+	  width: 28px;
+	  height: 28px;
+	  border-radius: 4px;
+	  display: flex;
+	  align-items: center;
+	  justify-content: center;
+	  cursor: pointer;
+	  transition: all var(--transition-fast);
+	}
+	.btn-icon:hover {
+	  background: var(--action-button-bg);
+	  color: var(--text-color);
+	}
+	.instance-info {
+	  margin-bottom: 15px;
+	  font-size: 0.8125rem;
+	  color: var(--secondary-text);
+	}
+	.info-item {
+	  display: flex;
+	  align-items: center;
+	  gap: 6px;
+	}
+	.info-item i {
+	  font-size: 0.9375rem;
+	  opacity: 0.8;
+	}
+
     /* 动画 */
     @keyframes fadeIn {
       from { opacity: 0; transform: translateY(20px); }
@@ -752,6 +808,10 @@
         min-width: 0;
         padding: 8px 10px;
       }
+      .instance-url {
+        padding: 8px 10px;
+        font-size: 0.8125rem;
+      }
     }
   </style>
 </head>
@@ -1218,17 +1278,40 @@
     }
     
     // 获取实例列表
-    async function fetchInstances() {
-      try {
-        const response = await fetch('/api/proxy/spaces');
-        const instances = await response.json();
-        return instances;
-      } catch (error) {
-        console.error("获取实例列表失败：", error);
-        showToast('获取实例列表失败，请刷新页面重试', 'error');
-        return [];
-      }
-    }
+	async function fetchInstances() {
+	  try {
+		const response = await fetch('/api/proxy/spaces');
+		const instances = await response.json();
+		
+		// 过滤掉敏感信息
+		return instances.map(instance => {
+		  // 创建一个新对象，只包含需要的字段
+		  const safeInstance = {
+			repo_id: instance.repo_id,
+			name: instance.name,
+			owner: instance.owner,
+			username: instance.username,
+			url: instance.url,
+			status: instance.status,
+			last_modified: instance.last_modified,
+			created_at: instance.created_at,
+			sdk: instance.sdk,
+			tags: instance.tags,
+			private: instance.private,
+			app_port: instance.app_port
+		  };
+		  
+		  // 确保删除任何敏感字段
+		  delete safeInstance.token;
+		  
+		  return safeInstance;
+		});
+	  } catch (error) {
+		console.error("获取实例列表失败：", error);
+		showToast('获取实例列表失败，请刷新页面重试', 'error');
+		return [];
+	  }
+	}
     
     // 指标管理器
     class MetricsManager {
@@ -1386,91 +1469,120 @@
     }
     
     // 创建服务器卡片
-    function createServerCard(instance) {
-      const instanceId = instance.repo_id;
-      instanceMap.set(instanceId, instance);
-      
-      // 创建卡片元素
-      const card = document.createElement('div');
-      card.id = `instance-${instanceId}`;
-      card.className = 'server-card';
-      
-      // 设置状态样式
-      let statusClass = 'status-offline';
-      let statusText = '离线';
-      
-      if (instance.status.toLowerCase() === 'running') {
-        statusClass = 'status-online';
-        statusText = '在线';
-      } else if (instance.status.toLowerCase() === 'sleeping') {
-        statusClass = 'status-sleep';
-        statusText = '休眠';
-      }
-      
-      // 设置卡片内容
-      card.innerHTML = `
-        <div class="server-header">
-          <div class="server-name">
-            <i class="ri-server-line"></i>
-            <div>
-              ${instance.name}
-              <div class="server-id">${instance.repo_id}</div>
-            </div>
-          </div>
-          <div class="status-indicator">
-            <span class="status-dot ${statusClass}"></span>
-            <span>${statusText}</span>
-          </div>
-        </div>
-        
-        <div class="metric-grid">
-          <div class="metric-item">
-            <div class="metric-label">
-              <i class="ri-cpu-line"></i> CPU
-            </div>
-            <div class="metric-value cpu-usage">N/A</div>
-          </div>
-          <div class="metric-item">
-            <div class="metric-label">
-              <i class="ri-hard-drive-2-line"></i> 内存
-            </div>
-            <div class="metric-value memory-usage">N/A</div>
-          </div>
-          <div class="metric-item">
-            <div class="metric-label">
-              <i class="ri-upload-2-line"></i> 上传
-            </div>
-            <div class="metric-value upload">N/A</div>
-          </div>
-          <div class="metric-item">
-            <div class="metric-label">
-              <i class="ri-download-2-line"></i> 下载
-            </div>
-            <div class="metric-value download">N/A</div>
-          </div>
-        </div>
-        
-        <div class="action-buttons" style="display: ${isLoggedIn ? 'flex' : 'none'};">
-          <button class="btn" onclick="showConfirmDialog('restart', '${instance.repo_id}', '确认重启', '您确定要重启实例 ${instance.name} (${instance.repo_id}) 吗？')">
-            <i class="ri-restart-line"></i> 重启
-          </button>
-          <button class="btn" onclick="showConfirmDialog('rebuild', '${instance.repo_id}', '确认重建', '您确定要重建实例 ${instance.name} (${instance.repo_id}) 吗？这将重新构建整个实例。')">
-            <i class="ri-building-line"></i> 重建
-          </button>
-        </div>
-      `;
-      
-      // 记录服务器状态
-      serverStatus.set(instanceId, { 
-        lastSeen: Date.now(), 
-        isOnline: instance.status.toLowerCase() === 'running', 
-        isSleep: instance.status.toLowerCase() === 'sleeping', 
-        data: null, 
-        status: instance.status 
-      });
-      
-      return card;
-    }
+	function createServerCard(instance) {
+	  const instanceId = instance.repo_id;
+	  
+	  // 存储安全的实例信息（确保不包含token）
+	  const safeInstance = {...instance};
+	  delete safeInstance.token;
+	  instanceMap.set(instanceId, safeInstance);
+	  
+	  // 创建卡片元素
+	  const card = document.createElement('div');
+	  card.id = `instance-${instanceId}`;
+	  card.className = 'server-card';
+	  
+	  // 设置状态样式
+	  let statusClass = 'status-offline';
+	  let statusText = '离线';
+	  
+	  if (instance.status.toLowerCase() === 'running') {
+		statusClass = 'status-online';
+		statusText = '在线';
+	  } else if (instance.status.toLowerCase() === 'sleeping') {
+		statusClass = 'status-sleep';
+		statusText = '休眠';
+	  }
+	  
+	  // 格式化最后修改时间
+	  const lastModified = new Date(instance.last_modified).toLocaleString('zh-CN', {
+		year: 'numeric',
+		month: '2-digit',
+		day: '2-digit',
+		hour: '2-digit',
+		minute: '2-digit'
+	  });
+	  
+	  // 设置卡片内容
+	  card.innerHTML = `
+		<div class="server-header">
+		  <div class="server-name">
+			<i class="ri-server-line"></i>
+			<div>
+			  ${instance.name}
+			  <div class="server-id">${instance.repo_id}</div>
+			</div>
+		  </div>
+		  <div class="status-indicator">
+			<span class="status-dot ${statusClass}"></span>
+			<span>${statusText}</span>
+		  </div>
+		</div>
+		
+		<div class="instance-url">
+		  <a href="${instance.url}" target="_blank" class="url-link">
+			<i class="ri-external-link-line"></i> ${instance.url}
+		  </a>
+		  <button class="btn-icon copy-url" onclick="copyToClipboard('${instance.url}')" title="复制URL">
+			<i class="ri-file-copy-line"></i>
+		  </button>
+		</div>
+		
+		<div class="instance-info">
+		  <div class="info-item">
+			<i class="ri-time-line"></i> 最后更新: ${lastModified}
+		  </div>
+		</div>
+		
+		<div class="metric-grid">
+		  <div class="metric-item">
+			<div class="metric-label">
+			  <i class="ri-cpu-line"></i> CPU
+			</div>
+			<div class="metric-value cpu-usage">N/A</div>
+		  </div>
+		  <div class="metric-item">
+			<div class="metric-label">
+			  <i class="ri-hard-drive-2-line"></i> 内存
+			</div>
+			<div class="metric-value memory-usage">N/A</div>
+		  </div>
+		  <div class="metric-item">
+			<div class="metric-label">
+			  <i class="ri-upload-2-line"></i> 上传
+			</div>
+			<div class="metric-value upload">N/A</div>
+		  </div>
+		  <div class="metric-item">
+			<div class="metric-label">
+			  <i class="ri-download-2-line"></i> 下载
+			</div>
+			<div class="metric-value download">N/A</div>
+		  </div>
+		</div>
+		
+		<div class="action-buttons" style="display: ${isLoggedIn ? 'flex' : 'none'};">
+		  <button class="btn" onclick="showConfirmDialog('restart', '${instance.repo_id}', '确认重启', '您确定要重启实例 ${instance.name} (${instance.repo_id}) 吗？')">
+			<i class="ri-restart-line"></i> 重启
+		  </button>
+		  <button class="btn" onclick="showConfirmDialog('rebuild', '${instance.repo_id}', '确认重建', '您确定要重建实例 ${instance.name} (${instance.repo_id}) 吗？这将重新构建整个实例。')">
+			<i class="ri-building-line"></i> 重建
+		  </button>
+		</div>
+	  `;
+	  
+	  // 记录服务器状态
+	  serverStatus.set(instanceId, { 
+		lastSeen: Date.now(), 
+		isOnline: instance.status.toLowerCase() === 'running', 
+		isSleep: instance.status.toLowerCase() === 'sleeping', 
+		data: null, 
+		status: instance.status 
+	  });
+	  
+	  return card;
+	}
+
     
     // 更新服务器卡片
     function updateServerCard(data, instanceId, isSleep = false) {
@@ -1678,6 +1790,16 @@
       document.getElementById('totalDownload').textContent = `${formatBytes(totalDownload)}/s`;
     }
     
+	// 添加在 updateSummary 函数之后
+	function copyToClipboard(text) {
+	  navigator.clipboard.writeText(text).then(() => {
+		showToast('URL已复制到剪贴板', 'success');
+	  }).catch(err => {
+		console.error('复制失败:', err);
+		showToast('复制失败，请手动复制', 'error');
+	  });
+	}
+    
     // 格式化字节数
     function formatBytes(bytes) {
       if (bytes === 0) return '0 B';