style: restore system page, service status with info-list and inline color

This commit is contained in:
tian 2026-05-06 16:33:39 +08:00
parent 8cecdd32d4
commit e4e4edd31b

View File

@ -26,9 +26,9 @@
<div class="detail-grid"> <div class="detail-grid">
<div class="card"> <div class="card">
<h2 class="title-with-icon">{{icon "heartbeat"}}<span>服务状态</span></h2> <h2 class="title-with-icon">{{icon "heartbeat"}}<span>服务状态</span></h2>
<div style="display:flex;gap:24px;margin-top:8px"> <div class="info-list compact-list">
<div><span class="muted small">管理后台</span> <span class="pill" id="svc-status">检测中…</span></div> <div><span>管理后台</span><strong id="svc-status">检测中…</strong></div>
<div><span class="muted small">接口状态</span> <span class="pill" id="api-status">检测中…</span></div> <div><span>接口状态</span><strong id="api-status">检测中…</strong></div>
</div> </div>
<div class="actions" style="margin-top:12px"> <div class="actions" style="margin-top:12px">
<button class="btn ghost" type="button" id="btn-refresh">刷新</button> <button class="btn ghost" type="button" id="btn-refresh">刷新</button>
@ -43,39 +43,39 @@
function check() { function check() {
svcEl.textContent = "检测中…"; svcEl.textContent = "检测中…";
svcEl.className = "pill"; svcEl.style.color = "";
apiEl.textContent = "检测中…"; apiEl.textContent = "检测中…";
apiEl.className = "pill"; apiEl.style.color = "";
fetch("/health") fetch("/health")
.then(function(r) { return r.text(); }) .then(function(r) { return r.text(); })
.then(function(t) { .then(function(t) {
if (t.indexOf("ok") !== -1) { if (t.indexOf("ok") !== -1) {
svcEl.textContent = "运行正常"; svcEl.textContent = "运行正常";
svcEl.className = "pill ok"; svcEl.style.color = "var(--green)";
} else { } else {
svcEl.textContent = "异常"; svcEl.textContent = "异常";
svcEl.className = "pill bad"; svcEl.style.color = "var(--danger-soft-text)";
} }
}) })
.catch(function() { .catch(function() {
svcEl.textContent = "无法连接"; svcEl.textContent = "无法连接";
svcEl.className = "pill bad"; svcEl.style.color = "var(--danger-soft-text)";
}); });
fetch("/openapi.json") fetch("/openapi.json")
.then(function(r) { .then(function(r) {
if (r.ok) { if (r.ok) {
apiEl.textContent = "正常"; apiEl.textContent = "正常";
apiEl.className = "pill ok"; apiEl.style.color = "var(--green)";
} else { } else {
apiEl.textContent = "异常 (" + r.status + ")"; apiEl.textContent = "异常 (" + r.status + ")";
apiEl.className = "pill bad"; apiEl.style.color = "var(--danger-soft-text)";
} }
}) })
.catch(function() { .catch(function() {
apiEl.textContent = "无法连接"; apiEl.textContent = "无法连接";
apiEl.className = "pill bad"; apiEl.style.color = "var(--danger-soft-text)";
}); });
} }