style(risk): polish account status badge for light and dark themes

Extract shared account_risk_badge.css with theme-aware contrast, dot indicator, and hub/instance layout fixes.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-17 17:37:32 +08:00
parent e307eef690
commit 850ffcd7d2
10 changed files with 159 additions and 56 deletions
+5 -29
View File
@@ -596,35 +596,6 @@ button:disabled {
flex-wrap: wrap;
}
.risk-status-badge {
font-size: 0.72rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid transparent;
white-space: nowrap;
}
.risk-status-normal {
color: #b8f5d0;
background: #14241e;
border-color: #2d6a4f;
}
.risk-status-freeze_1h {
color: #ffd89a;
background: #2a2210;
border-color: #8a6a20;
}
.risk-status-freeze_4h {
color: #ffb4a0;
background: #2a1410;
border-color: #8a4020;
}
.risk-status-freeze_daily {
color: #ffb0c8;
background: #2a1020;
border-color: #8a3050;
}
.status-dot {
width: 8px;
height: 8px;
@@ -962,6 +933,7 @@ html[data-theme="light"] .host-metric-bar {
align-items: center;
gap: 8px;
min-width: 0;
flex-wrap: wrap;
}
.hub-tile-name {
@@ -1024,6 +996,10 @@ html[data-theme="light"] .host-metric-bar {
font-weight: 600;
letter-spacing: 0.05em;
margin: 0 0 4px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.card-sub {
+4 -3
View File
@@ -513,7 +513,7 @@
const st = riskStatus.status || "normal";
const label = esc(riskStatus.status_label || "正常");
const title = esc(riskStatus.reason || "");
return `<span class="risk-status-badge risk-status-${esc(st)}" title="${title}">${label}</span>`;
return `<span class="risk-status-badge risk-status-${esc(st)}" role="status" title="${title}">${label}</span>`;
}
function fmt(n, d) {
@@ -3248,7 +3248,8 @@
<div class="hub-tile-body card-expand-zone" title="点击进入全屏详情">
<div class="hub-tile-top">
<span class="status-dot ${dotCls}" aria-hidden="true"></span>
<span class="hub-tile-name">${esc(row.name)}${formatRiskStatusBadge(hm.risk_status)}</span>
<span class="hub-tile-name">${esc(row.name)}</span>
${formatRiskStatusBadge(hm.risk_status)}
</div>
${
showAccountPnlPref()
@@ -3301,7 +3302,7 @@
<div>
<div class="card-title-row">
<span class="status-dot ${dotCls}" title="${online ? "在线" : "离线"}"></span>
<div class="card-title">${esc(row.name)}${formatRiskStatusBadge(hm.risk_status)}</div>
<div class="card-title"><span>${esc(row.name)}</span>${formatRiskStatusBadge(hm.risk_status)}</div>
</div>
<div class="card-sub">${esc(flaskOpen || "")}</div>
</div>
+1
View File
@@ -16,6 +16,7 @@
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
<noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
<link rel="stylesheet" href="/assets/app.css?v=20260613-host-status-tone" />
<link rel="stylesheet" href="/assets/account_risk_badge.css?v=1" />
<link rel="stylesheet" href="/assets/dashboard.css?v=20260612-dash-monitor-count" />
</head>
<body>