|
<!DOCTYPE html> |
|
<html lang="zh"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>HF Space Manager - 控制面板</title> |
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> |
|
<style> |
|
:root { |
|
--primary-color: #00ff9d; |
|
--primary-dark: #00cc7d; |
|
--background-color: #0a0b0f; |
|
--card-background: #12141c; |
|
--text-primary: #ffffff; |
|
--text-secondary: #7f8ea3; |
|
--border-color: #1e2029; |
|
--success-color: #00ff9d; |
|
--warning-color: #ff9d00; |
|
--danger-color: #ff2d55; |
|
--sleeping-color: #00ffff; |
|
} |
|
|
|
* { |
|
margin: 0; |
|
padding: 0; |
|
box-sizing: border-box; |
|
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
|
} |
|
|
|
body { |
|
background-color: var(--background-color); |
|
background-image: |
|
radial-gradient(circle at 10% 20%, rgba(0, 255, 157, 0.03) 0%, transparent 20%), |
|
radial-gradient(circle at 90% 80%, rgba(255, 0, 255, 0.03) 0%, transparent 20%); |
|
min-height: 100vh; |
|
color: var(--text-primary); |
|
} |
|
|
|
.header { |
|
background: rgba(18, 20, 28, 0.95); |
|
backdrop-filter: blur(10px); |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
z-index: 1000; |
|
border-bottom: 1px solid var(--border-color); |
|
} |
|
|
|
.header-content { |
|
max-width: 1400px; |
|
margin: 0 auto; |
|
padding: 1rem 2rem; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
|
|
.nav-section { |
|
display: flex; |
|
align-items: center; |
|
gap: 2rem; |
|
} |
|
|
|
.logo { |
|
font-size: 1.5rem; |
|
font-weight: 600; |
|
color: var(--text-primary); |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
} |
|
|
|
.logo i { |
|
color: var(--primary-color); |
|
text-shadow: 0 0 10px var(--primary-color); |
|
} |
|
|
|
.search-bar { |
|
position: relative; |
|
width: 300px; |
|
} |
|
|
|
.search-bar input { |
|
width: 100%; |
|
padding: 0.5rem 1rem 0.5rem 2.5rem; |
|
background: rgba(255, 255, 255, 0.05); |
|
border: 1px solid var(--border-color); |
|
border-radius: 6px; |
|
color: var(--text-primary); |
|
font-size: 0.9rem; |
|
} |
|
|
|
.search-bar i { |
|
position: absolute; |
|
left: 0.8rem; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
color: var(--text-secondary); |
|
} |
|
|
|
.user-section { |
|
display: flex; |
|
align-items: center; |
|
gap: 1rem; |
|
} |
|
|
|
.theme-toggle { |
|
background: none; |
|
border: none; |
|
color: var(--text-secondary); |
|
cursor: pointer; |
|
padding: 0.5rem; |
|
border-radius: 4px; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.theme-toggle:hover { |
|
color: var(--primary-color); |
|
background: rgba(0, 255, 157, 0.1); |
|
} |
|
|
|
.container { |
|
max-width: 1400px; |
|
margin: 80px auto 0; |
|
padding: 2rem; |
|
} |
|
|
|
.dashboard-header { |
|
margin-bottom: 2rem; |
|
padding: 1.5rem; |
|
background: var(--card-background); |
|
border-radius: 12px; |
|
border: 1px solid var(--border-color); |
|
} |
|
|
|
.stats-grid { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
gap: 1rem; |
|
margin-top: 1rem; |
|
} |
|
|
|
.stat-card { |
|
background: rgba(255, 255, 255, 0.03); |
|
padding: 1.5rem; |
|
border-radius: 8px; |
|
border: 1px solid var(--border-color); |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.stat-card:hover { |
|
transform: translateY(-2px); |
|
border-color: var(--primary-color); |
|
} |
|
|
|
.stat-value { |
|
font-size: 2rem; |
|
font-weight: 600; |
|
margin-bottom: 0.5rem; |
|
color: var(--primary-color); |
|
} |
|
|
|
.stat-label { |
|
color: var(--text-secondary); |
|
font-size: 0.9rem; |
|
text-transform: uppercase; |
|
letter-spacing: 0.5px; |
|
} |
|
|
|
.owner-section { |
|
background: var(--card-background); |
|
border-radius: 12px; |
|
margin-bottom: 2rem; |
|
border: 1px solid var(--border-color); |
|
overflow: hidden; |
|
} |
|
|
|
.owner-header { |
|
padding: 1.5rem; |
|
border-bottom: 1px solid var(--border-color); |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
background: rgba(255, 255, 255, 0.02); |
|
} |
|
|
|
.owner-name { |
|
font-size: 1.25rem; |
|
font-weight: 600; |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
} |
|
|
|
.status-stats { |
|
display: flex; |
|
gap: 1rem; |
|
flex-wrap: wrap; |
|
} |
|
|
|
.status-badge { |
|
padding: 0.25rem 0.75rem; |
|
border-radius: 6px; |
|
font-size: 0.875rem; |
|
font-weight: 500; |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
} |
|
|
|
.space-grid { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); |
|
gap: 1.5rem; |
|
padding: 1.5rem; |
|
} |
|
|
|
.space-card { |
|
background: rgba(255, 255, 255, 0.02); |
|
border-radius: 10px; |
|
border: 1px solid var(--border-color); |
|
overflow: hidden; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.space-card:hover { |
|
transform: translateY(-2px); |
|
border-color: var(--primary-color); |
|
box-shadow: 0 0 20px rgba(0, 255, 157, 0.1); |
|
} |
|
|
|
.space-header { |
|
padding: 1rem; |
|
background: rgba(255, 255, 255, 0.02); |
|
border-bottom: 1px solid var(--border-color); |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
|
|
.space-content { |
|
padding: 1rem; |
|
} |
|
|
|
.space-info { |
|
display: grid; |
|
grid-template-columns: repeat(2, 1fr); |
|
gap: 1rem; |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.info-item { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.25rem; |
|
} |
|
|
|
.info-label { |
|
color: var(--text-secondary); |
|
font-size: 0.8rem; |
|
text-transform: uppercase; |
|
letter-spacing: 0.5px; |
|
} |
|
|
|
.info-value { |
|
color: var(--text-primary); |
|
font-size: 0.9rem; |
|
} |
|
|
|
.space-metrics { |
|
padding: 1rem; |
|
background: rgba(255, 255, 255, 0.02); |
|
border-radius: 8px; |
|
margin-bottom: 1rem; |
|
display: flex; |
|
justify-content: space-around; |
|
} |
|
|
|
.metric-item { |
|
text-align: center; |
|
} |
|
|
|
.metric-value { |
|
font-size: 1.25rem; |
|
font-weight: 600; |
|
color: var(--primary-color); |
|
} |
|
|
|
.metric-label { |
|
font-size: 0.8rem; |
|
color: var(--text-secondary); |
|
} |
|
|
|
.action-buttons { |
|
display: grid; |
|
grid-template-columns: repeat(3, 1fr); |
|
gap: 0.75rem; |
|
padding: 1rem; |
|
background: rgba(0, 0, 0, 0.2); |
|
} |
|
|
|
.action-button { |
|
padding: 0.75rem; |
|
border-radius: 6px; |
|
font-size: 0.9rem; |
|
font-weight: 500; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
gap: 0.5rem; |
|
cursor: pointer; |
|
transition: all 0.3s ease; |
|
border: 1px solid var(--border-color); |
|
background: transparent; |
|
color: var(--text-primary); |
|
text-decoration: none; |
|
} |
|
|
|
.action-button:hover { |
|
border-color: var(--primary-color); |
|
background: rgba(0, 255, 157, 0.1); |
|
} |
|
|
|
.action-button.restart { |
|
border-color: var(--primary-color); |
|
color: var(--primary-color); |
|
} |
|
|
|
.action-button.restart:hover { |
|
background: var(--primary-color); |
|
color: var(--background-color); |
|
} |
|
|
|
.status-RUNNING { |
|
background: rgba(0, 255, 157, 0.1); |
|
border: 1px solid var(--success-color); |
|
color: var(--success-color); |
|
} |
|
|
|
.status-BUILDING { |
|
background: rgba(255, 157, 0, 0.1); |
|
border: 1px solid var(--warning-color); |
|
color: var(--warning-color); |
|
} |
|
|
|
.status-SLEEPING { |
|
background: rgba(0, 255, 255, 0.1); |
|
border: 1px solid var(--sleeping-color); |
|
color: var(--sleeping-color); |
|
} |
|
|
|
.status-STOPPED { |
|
background: rgba(127, 142, 163, 0.1); |
|
border: 1px solid var(--text-secondary); |
|
color: var(--text-secondary); |
|
} |
|
|
|
.status-FAILED { |
|
background: rgba(255, 45, 85, 0.1); |
|
border: 1px solid var(--danger-color); |
|
color: var(--danger-color); |
|
} |
|
|
|
.loading-overlay { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
background: rgba(10, 11, 15, 0.8); |
|
backdrop-filter: blur(5px); |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
z-index: 9999; |
|
} |
|
|
|
.loading-spinner { |
|
position: relative; |
|
width: 60px; |
|
height: 60px; |
|
} |
|
|
|
.loading-spinner::after { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
border-radius: 50%; |
|
border: 3px solid var(--border-color); |
|
border-top-color: var(--primary-color); |
|
animation: spin 1s infinite linear; |
|
} |
|
|
|
@keyframes spin { |
|
to { transform: rotate(360deg); } |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.header-content { |
|
flex-direction: column; |
|
gap: 1rem; |
|
padding: 1rem; |
|
} |
|
|
|
.nav-section { |
|
width: 100%; |
|
flex-direction: column; |
|
gap: 1rem; |
|
} |
|
|
|
.search-bar { |
|
width: 100%; |
|
} |
|
|
|
.container { |
|
padding: 1rem; |
|
} |
|
|
|
.stats-grid { |
|
grid-template-columns: 1fr; |
|
} |
|
|
|
.space-grid { |
|
grid-template-columns: 1fr; |
|
} |
|
|
|
.space-info { |
|
grid-template-columns: 1fr; |
|
} |
|
|
|
.status-stats { |
|
flex-direction: column; |
|
align-items: flex-start; |
|
} |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="loading" class="loading-overlay"> |
|
<div class="loading-spinner"></div> |
|
</div> |
|
|
|
<header class="header"> |
|
<div class="header-content"> |
|
<div class="nav-section"> |
|
<div class="logo"> |
|
<i class="fas fa-server"></i> |
|
HF Space Manager |
|
</div> |
|
<div class="search-bar"> |
|
<i class="fas fa-search"></i> |
|
<input type="text" placeholder="搜索 Spaces..." id="spaceSearch"> |
|
</div> |
|
</div> |
|
<div class="user-section"> |
|
<button class="theme-toggle" title="切换主题"> |
|
<i class="fas fa-moon"></i> |
|
</button> |
|
<a href="/logout" class="action-button"> |
|
<i class="fas fa-sign-out-alt"></i> |
|
退出 |
|
</a> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
<div class="container"> |
|
{% if spaces %} |
|
{% set grouped_spaces = {} %} |
|
{% for space in spaces %} |
|
{% if space.owner not in grouped_spaces %} |
|
{% set _ = grouped_spaces.update({space.owner: []}) %} |
|
{% endif %} |
|
{% set _ = grouped_spaces[space.owner].append(space) %} |
|
{% endfor %} |
|
|
|
<div class="dashboard-header"> |
|
<div class="stats-grid"> |
|
{% set total_spaces = spaces|length %} |
|
{% set running_spaces = spaces|selectattr('status', 'equalto', 'RUNNING')|list|length %} |
|
{% set sleeping_spaces = spaces|selectattr('status', 'equalto', 'SLEEPING')|list|length %} |
|
{% set stopped_spaces = spaces|selectattr('status', 'equalto', 'STOPPED')|list|length %} |
|
{% set failed_spaces = spaces|selectattr('status', 'equalto', 'FAILED')|list|length %} |
|
|
|
<div class="stat-card"> |
|
<div class="stat-value">{{ total_spaces }}</div> |
|
<div class="stat-label">总空间数</div> |
|
</div> |
|
<div class="stat-card"> |
|
<div class="stat-value">{{ running_spaces }}</div> |
|
<div class="stat-label">运行中</div> |
|
</div> |
|
<div class="stat-card"> |
|
<div class="stat-value">{{ sleeping_spaces }}</div> |
|
<div class="stat-label">休眠中</div> |
|
</div> |
|
<div class="stat-card"> |
|
<div class="stat-value">{{ stopped_spaces }}</div> |
|
<div class="stat-label">已停止</div> |
|
</div> |
|
<div class="stat-card"> |
|
<div class="stat-value">{{ failed_spaces }}</div> |
|
<div class="stat-label">运行失败</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
{% for owner, owner_spaces in grouped_spaces.items() %} |
|
{% set running_count = owner_spaces|selectattr('status', 'equalto', 'RUNNING')|list|length %} |
|
{% set building_count = owner_spaces|selectattr('status', 'equalto', 'BUILDING')|list|length %} |
|
{% set sleeping_count = owner_spaces|selectattr('status', 'equalto', 'SLEEPING')|list|length %} |
|
{% set stopped_count = owner_spaces|selectattr('status', 'equalto', 'STOPPED')|list|length %} |
|
{% set failed_count = owner_spaces|selectattr('status', 'equalto', 'FAILED')|list|length %} |
|
|
|
<div class="owner-section"> |
|
<div class="owner-header"> |
|
<div class="owner-name"> |
|
<i class="fas fa-user-circle"></i> |
|
{{ owner }} |
|
</div> |
|
<div class="status-stats"> |
|
<span class="status-badge status-RUNNING"> |
|
<i class="fas fa-play-circle"></i> |
|
运行中: {{ running_count }} |
|
</span> |
|
<span class="status-badge status-SLEEPING"> |
|
<i class="fas fa-moon"></i> |
|
休眠: {{ sleeping_count }} |
|
</span> |
|
<span class="status-badge status-STOPPED"> |
|
<i class="fas fa-stop-circle"></i> |
|
停止: {{ stopped_count }} |
|
</span> |
|
<span class="status-badge status-FAILED"> |
|
<i class="fas fa-exclamation-circle"></i> |
|
失败: {{ failed_count }} |
|
</span> |
|
</div> |
|
</div> |
|
|
|
<div class="space-grid"> |
|
{% for space in owner_spaces %} |
|
<div class="space-card" data-space-id="{{ space.repo_id }}"> |
|
<div class="space-header"> |
|
<div class="space-name"> |
|
<i class="fas fa-cube"></i> |
|
{{ space.name }} |
|
</div> |
|
<span class="status-badge status-{{ space.status }}"> |
|
<i class="fas fa-circle"></i> |
|
{{ space.status }} |
|
</span> |
|
</div> |
|
|
|
<div class="space-content"> |
|
<div class="space-info"> |
|
<div class="info-item"> |
|
<span class="info-label">Space ID</span> |
|
<span class="info-value">{{ space.repo_id }}</span> |
|
</div> |
|
<div class="info-item"> |
|
<span class="info-label">创建时间</span> |
|
<span class="info-value">{{ space.created_at }}</span> |
|
</div> |
|
<div class="info-item"> |
|
<span class="info-label">最后修改</span> |
|
<span class="info-value">{{ space.last_modified }}</span> |
|
</div> |
|
<div class="info-item"> |
|
<span class="info-label">应用端口</span> |
|
<span class="info-value">{{ space.app_port }}</span> |
|
</div> |
|
</div> |
|
|
|
<div class="space-metrics"> |
|
<div class="metric-item"> |
|
<div class="metric-value">{{ space.sdk }}</div> |
|
<div class="metric-label">SDK 版本</div> |
|
</div> |
|
<div class="metric-item"> |
|
<div class="metric-value">{{ '私有' if space.private else '公开' }}</div> |
|
<div class="metric-label">访问权限</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="action-buttons"> |
|
<a href="{{ space.url }}" target="_blank" class="action-button"> |
|
<i class="fas fa-external-link-alt"></i> |
|
查看 |
|
</a> |
|
<button onclick="confirmAction('restart', '{{ space.repo_id }}')" class="action-button restart"> |
|
<i class="fas fa-sync-alt"></i> |
|
重启 |
|
</button> |
|
<button onclick="confirmAction('rebuild', '{{ space.repo_id }}')" class="action-button"> |
|
<i class="fas fa-tools"></i> |
|
重建 |
|
</button> |
|
</div> |
|
</div> |
|
{% endfor %} |
|
</div> |
|
</div> |
|
{% endfor %} |
|
{% else %} |
|
<div class="owner-section"> |
|
<p style="text-align: center; padding: 2rem; color: var(--text-secondary);"> |
|
<i class="fas fa-info-circle"></i> |
|
没有找到任何 Spaces。请确保你的账户中有创建的 Spaces，并且提供的 token 有正确的权限。 |
|
</p> |
|
</div> |
|
{% endif %} |
|
</div> |
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script> |
|
<script> |
|
const socket = io(); |
|
|
|
|
|
window.addEventListener('load', function() { |
|
document.getElementById('loading').style.display = 'none'; |
|
}); |
|
|
|
|
|
document.getElementById('spaceSearch').addEventListener('input', function(e) { |
|
const searchTerm = e.target.value.toLowerCase(); |
|
document.querySelectorAll('.space-card').forEach(card => { |
|
const spaceName = card.querySelector('.space-name').textContent.toLowerCase(); |
|
const spaceId = card.dataset.spaceId.toLowerCase(); |
|
if (spaceName.includes(searchTerm) || spaceId.includes(searchTerm)) { |
|
card.style.display = ''; |
|
} else { |
|
card.style.display = 'none'; |
|
} |
|
}); |
|
}); |
|
|
|
|
|
const themeToggle = document.querySelector('.theme-toggle'); |
|
themeToggle.addEventListener('click', function() { |
|
document.body.classList.toggle('light-theme'); |
|
const icon = this.querySelector('i'); |
|
icon.classList.toggle('fa-sun'); |
|
icon.classList.toggle('fa-moon'); |
|
}); |
|
|
|
|
|
socket.on('connect', () => { |
|
console.log('Connected to server'); |
|
}); |
|
|
|
socket.on('disconnect', () => { |
|
console.log('Disconnected from server'); |
|
}); |
|
|
|
socket.on('spaces_updated', (data) => { |
|
updateSpaceStatuses(); |
|
}); |
|
|
|
document.addEventListener('visibilitychange', function() { |
|
if (document.hidden) { |
|
socket.disconnect(); |
|
} else { |
|
socket.connect(); |
|
} |
|
}); |
|
|
|
function updateSpaceStatuses() { |
|
document.querySelectorAll('.space-card').forEach(card => { |
|
const spaceId = card.dataset.spaceId; |
|
fetch(`/api/space/${spaceId}/status`) |
|
.then(response => response.json()) |
|
.then(data => { |
|
const statusElement = card.querySelector('.status-badge'); |
|
if (statusElement && data.status) { |
|
statusElement.className = `status-badge status-${data.status}`; |
|
statusElement.innerHTML = `<i class="fas fa-circle"></i> ${data.status}`; |
|
} |
|
}) |
|
.catch(error => console.error('Error updating status:', error)); |
|
}); |
|
} |
|
|
|
function confirmAction(action, spaceId) { |
|
const actionText = action === 'restart' ? '重启' : '重建'; |
|
if (confirm(`确定要${actionText} "${spaceId}" 吗？`)) { |
|
document.getElementById('loading').style.display = 'flex'; |
|
window.location.href = `/action/${action}/${spaceId}`; |
|
} |
|
} |
|
|
|
|
|
setInterval(updateSpaceStatuses, 30000); |
|
|
|
|
|
document.querySelectorAll('.space-card').forEach(card => { |
|
card.addEventListener('mouseenter', function() { |
|
this.style.transform = 'translateY(-5px)'; |
|
}); |
|
|
|
card.addEventListener('mouseleave', function() { |
|
this.style.transform = 'translateY(0)'; |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
