114 lines
7.9 KiB
HTML
114 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" data-theme="light">
|
|
<head><meta charset="UTF-8"><title>PCCS 算力中心集群系统</title>
|
|
<style>
|
|
:root,[data-theme="light"]{--bg:#f8fafc;--card-bg:#fff;--text:#1e293b;--text2:#64748b;--text3:#94a3b8;--border:#e2e8f0;--header-bg:#fff;--sidebar-bg:#0f172a;--sidebar-text:#94a3b8;--sidebar-hover:#1e293b;--sidebar-active:#e2e8f0;--primary:#2563eb;--primary-light:#dbeafe}
|
|
[data-theme="dark"]{--bg:#0f172a;--card-bg:#1e293b;--text:#e2e8f0;--text2:#94a3b8;--text3:#64748b;--border:#334155;--header-bg:#1e293b;--sidebar-bg:#020617;--sidebar-text:#64748b;--sidebar-hover:#1e293b;--sidebar-active:#e2e8f0;--primary:#3b82f6;--primary-light:#1e3a5f}
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{font-family:system-ui;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column}
|
|
.header{background:var(--header-bg);border-bottom:1px solid var(--border);padding:0 24px;height:48px;display:flex;align-items:center;flex-shrink:0}
|
|
.header .brand{display:flex;align-items:center;gap:10px}
|
|
.header .brand .logo{font-size:1.2rem;font-weight:700;color:var(--text)}
|
|
.header .brand .sub{font-size:.8rem;color:var(--text3)}
|
|
.header .spacer{flex:1}
|
|
.header .ctl{display:flex;align-items:center;gap:8px}
|
|
.header .ctl button{background:var(--card-bg);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:.8rem;cursor:pointer;color:var(--text2)}
|
|
.header .ctl button:hover{background:var(--primary-light)}
|
|
.main{display:flex;flex:1;overflow:hidden}
|
|
.sidebar{width:220px;background:var(--sidebar-bg);flex-shrink:0;overflow:auto;padding:16px 0}
|
|
.sidebar .nav-title{font-size:.7rem;color:#475569;padding:4px 16px 8px;font-weight:700}
|
|
.sidebar a{display:block;padding:8px 16px;color:var(--sidebar-text);text-decoration:none;font-size:.9rem}
|
|
.sidebar a:hover{color:var(--sidebar-active);background:var(--sidebar-hover)}
|
|
.content{flex:1;overflow:auto;padding:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-content:start}
|
|
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:20px}
|
|
.card h3{margin:0 0 8px;font-size:1rem}
|
|
.card p{margin:0 0 12px;font-size:.85rem;color:var(--text2)}
|
|
.card a{color:var(--primary);text-decoration:none;font-weight:600;display:inline-block;margin-right:16px}
|
|
.footer{text-align:center;padding:12px;font-size:.75rem;color:var(--text3);border-top:1px solid var(--border)}
|
|
/* Modal */
|
|
.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1000;justify-content:center;align-items:center}
|
|
.modal-overlay.show{display:flex}
|
|
.modal{background:var(--card-bg);border-radius:12px;width:400px;max-width:90vw;box-shadow:0 20px 60px rgba(0,0,0,.3)}
|
|
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
|
|
.modal-header h3{margin:0;font-size:1rem}
|
|
.modal-close{background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--text2)}
|
|
.modal-body{padding:20px}
|
|
.form-group{margin-bottom:12px}
|
|
.form-group label{display:block;font-size:.85rem;color:var(--text2);margin-bottom:4px}
|
|
.form-group input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:.9rem;background:var(--bg);color:var(--text);box-sizing:border-box}
|
|
.btn{display:inline-block;padding:10px 16px;border:none;border-radius:8px;font-size:.9rem;cursor:pointer;font-weight:600}
|
|
.btn-primary{background:var(--primary);color:#fff;width:100%}
|
|
.btn-primary:hover{opacity:.9}
|
|
.tab-bar{display:flex;border-bottom:1px solid var(--border);margin-bottom:16px}
|
|
.tab{flex:1;text-align:center;padding:8px;cursor:pointer;font-size:.9rem;color:var(--text2);border-bottom:2px solid transparent}
|
|
.tab.active{color:var(--primary);border-bottom-color:var(--primary)}
|
|
.msg{margin-top:12px;font-size:.85rem;text-align:center;color:#dc2626}
|
|
</style></head>
|
|
<body>
|
|
<div class="header">
|
|
<div class="brand"><span class="logo">PCCS</span><span class="sub">算力中心集群系统</span></div>
|
|
<div class="spacer"></div>
|
|
<div class="ctl">
|
|
<button onclick="toggleTheme()" id="btn-theme">🌓</button>
|
|
<button id="btn-lang">🌐 中文</button>
|
|
<button id="btn-login" onclick="showLogin()">👤 登录</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="login-modal">
|
|
<div class="modal">
|
|
<div class="modal-header"><h3 id="modal-title">登录</h3><button class="modal-close" onclick="closeLogin()">✕</button></div>
|
|
<div class="modal-body">
|
|
<div class="form-group"><label>用户名</label><input type="text" id="login-user" placeholder="用户名" autofocus></div>
|
|
<div class="form-group"><label>密码</label><input type="password" id="login-pass" placeholder="密码"></div>
|
|
<button class="btn btn-primary" onclick="doLogin()">登录</button>
|
|
<p class="msg" id="login-msg"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main">
|
|
<div class="sidebar">
|
|
<div class="nav-title">主导航</div>
|
|
<a href="/">📊 概览</a>
|
|
<a href="/pcpool/compute_pool_list/index.ui">📦 算力池列表</a>
|
|
<a href="/pcpool/compute_node_list/index.ui">📦 算力节点</a>
|
|
<a href="/pcc/cluster_list/index.ui">🖥 集群列表</a>
|
|
<a href="/pcc/cluster_node_list/index.ui">🖥 节点分配</a>
|
|
<a href="/storage_mgr/storage_server_list/index.ui">💾 存储服务器</a>
|
|
<a href="/storage_mgr/storage_export_list/index.ui">💾 存储导出</a>
|
|
<a href="/storage_mgr/storage_mount_list/index.ui">💾 存储挂载</a>
|
|
<a href="/image_mgr/mirror_source_list/index.ui">🏗 镜像源</a>
|
|
<a href="/image_mgr/image_registry_list/index.ui">🏗 镜像仓库</a>
|
|
<a href="/image_mgr/container_image_list/index.ui">🏗 容器镜像</a>
|
|
</div>
|
|
<div class="content">
|
|
<div class="card"><h3>📦 算力池管理</h3><p>节点池创建、节点注册、资源分配、心跳监控</p><a href="/pcpool/compute_pool_list/index.ui">算力池列表 →</a><a href="/pcpool/compute_node_list/index.ui">节点列表 →</a></div>
|
|
<div class="card"><h3>🖥 集群管理</h3><p>K8s/Slurm/Ray 集群部署、节点增减、状态监控</p><a href="/pcc/cluster_list/index.ui">集群列表 →</a><a href="/pcc/cluster_node_list/index.ui">节点分配 →</a></div>
|
|
<div class="card"><h3>💾 存储管理</h3><p>NFS 共享存储服务器、导出路径、节点挂载</p><a href="/storage_mgr/storage_server_list/index.ui">服务器 →</a><a href="/storage_mgr/storage_export_list/index.ui">导出 →</a><a href="/storage_mgr/storage_mount_list/index.ui">挂载 →</a></div>
|
|
<div class="card"><h3>🏗 镜像管理</h3><p>国内镜像源、本地仓库部署、镜像导入/同步</p><a href="/image_mgr/mirror_source_list/index.ui">镜像源 →</a><a href="/image_mgr/image_registry_list/index.ui">仓库 →</a><a href="/image_mgr/container_image_list/index.ui">镜像 →</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">pccs v0.1 · pccs.opencomputing.cn:9180</div>
|
|
<script>
|
|
var theme=localStorage.getItem('pccs-theme')||'light';
|
|
document.documentElement.setAttribute('data-theme',theme);
|
|
function toggleTheme(){theme=theme==='light'?'dark':'light';document.documentElement.setAttribute('data-theme',theme);localStorage.setItem('pccs-theme',theme)}
|
|
function showLogin(){document.getElementById('login-modal').classList.add('show');document.getElementById('login-user').focus()}
|
|
function closeLogin(){document.getElementById('login-modal').classList.remove('show')}
|
|
async function doLogin(){
|
|
var u=document.getElementById('login-user').value;
|
|
var p=document.getElementById('login-pass').value;
|
|
if(!u||!p){document.getElementById('login-msg').textContent='请输入用户名和密码';return}
|
|
var fd=new FormData();fd.append('username',u);fd.append('password',p);
|
|
try{
|
|
var r=await fetch('/pccs/api/login.dspy',{method:'POST',body:fd});
|
|
var d=await r.json();
|
|
if(d.status==='ok'){closeLogin();document.getElementById('login-msg').textContent=''}
|
|
else document.getElementById('login-msg').textContent=d.message||'登录失败'
|
|
}catch(e){document.getElementById('login-msg').textContent='网络错误'}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|