yumoqing/pccs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: homepage with sidebar nav + header bar (user/lang/theme controls)

Browse Source
This commit is contained in:
yumoqing 2026-08-11 17:17:24 +08:00
parent c09324c9ac
commit 0a03a873ee
1 changed files with 56 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
wwwroot/index.html
View File

@ -2,30 +2,66 @@
<html>
<head><meta charset="UTF-8"><title>PCCS 算力中心集群系统</title>
<style>
body{font-family:system-ui;margin:0;background:#f8fafc;color:#1e293b}
.header{background:#fff;border-bottom:1px solid #e2e8f0;padding:16px 24px}
.header h1{font-size:1.3rem;margin:0}
.header span{font-size:.85rem;color:#64748b}
.container{padding:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui;background:#f8fafc;color:#1e293b;min-height:100vh;display:flex;flex-direction:column}
/* 顶栏 */
.header{background:#fff;border-bottom:1px solid #e2e8f0;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:#1e293b}
.header .brand .sub{font-size:.8rem;color:#94a3b8}
.header .spacer{flex:1}
.header .ctl{display:flex;align-items:center;gap:8px}
.header .ctl button{background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;font-size:.8rem;cursor:pointer;color:#64748b}
.header .ctl button:hover{background:#f1f5f9}
/* 主体 */
.main{display:flex;flex:1;overflow:hidden}
.sidebar{width:220px;background:#0f172a;flex-shrink:0;overflow:auto;padding:16px 0}
.sidebar .nav-title{font-size:.7rem;color:#475569;padding:4px 16px 8px;font-weight:700;text-transform:uppercase}
.sidebar a{display:block;padding:8px 16px;color:#94a3b8;text-decoration:none;font-size:.9rem;transition:all .15s}
.sidebar a:hover{color:#e2e8f0;background:#1e293b}
.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:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:20px}
.card h3{margin:0 0 8px;font-size:1rem}
.card p{margin:0;font-size:.85rem;color:#64748b}
.card a{color:#2563eb;text-decoration:none;font-weight:600}
.meta{font-size:.75rem;color:#94a3b8;margin-top:24px;text-align:center}
.card p{margin:0 0 12px;font-size:.85rem;color:#64748b}
.card a{color:#2563eb;text-decoration:none;font-weight:600;display:inline-block;margin-right:16px}
.footer{text-align:center;padding:12px;font-size:.75rem;color:#94a3b8;border-top:1px solid #e2e8f0}
</style></head>
<body>
<div class="header"><h1>PCCS</h1><span>算力中心集群系统</span></div>
<div class="container">
<div class="card"><h3>算力池管理</h3><p>节点池创建、节点注册、资源分配</p>
<a href="/pcpool/compute_pool_list/index.ui">进入 →</a><br>
<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></div>
<div class="card"><h3>存储管理</h3><p>NFS/GlusterFS 共享存储</p>
<a href="/storage_mgr/storage_server_list/index.ui">进入 →</a></div>
<div class="card"><h3>镜像管理</h3><p>容器镜像源配置与仓库部署</p>
<a href="/image_mgr/mirror_source_list/index.ui">进入 →</a></div>
<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="alert('Theme switch WIP')" title="切换主题">🌓</button>
<button onclick="alert('Language switch WIP')" title="切换语言">🌐 中文</button>
<button onclick="location.href='/rbac/userpassword_login.ui'" title="用户登录">👤 登录</button>
</div>
</div>
<div class="meta">pccs v0.1 · pccs.opencomputing.cn:9180</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>
</body>
</html>