fix(observability): polish topbar alert indicator
All checks were successful
CD Pipeline / deploy (push) Successful in 1m33s

This commit is contained in:
OoO
2026-05-05 21:52:45 +08:00
parent 422137efa8
commit d93ad659ba
3 changed files with 71 additions and 13 deletions

View File

@@ -123,6 +123,36 @@
opacity: 0.68;
font-size: 0.68rem;
}
.momo-obs-link {
position: relative;
text-decoration: none;
}
.momo-obs-link.is-alert {
color: #c96442;
box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.12);
}
.momo-obs-badge {
position: absolute;
top: -0.22rem;
right: -0.22rem;
min-width: 1.05rem;
height: 1.05rem;
padding: 0 0.28rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 248, 238, 0.86);
background: linear-gradient(135deg, #d76a45, #9d4a32);
color: #fff8ee;
box-shadow: 0 8px 18px rgba(132, 58, 34, 0.26);
font-size: 0.62rem;
line-height: 1;
font-weight: 900;
}
.momo-obs-badge[hidden] {
display: none;
}
</style>
{% set _scheduler = scheduler_stats|default({}) %}
{% set _momo_runs = _scheduler.get('momo_task', []) if _scheduler is mapping else [] %}

View File

@@ -59,14 +59,9 @@
</div>
{% endif %}
<a class="momo-icon-button" href="/observability/overview" title="AI 觀測台" id="momo-obs-link"
style="text-decoration: none; position: relative;">
<a class="momo-icon-button momo-obs-link" href="/observability/overview" title="AI 觀測台" id="momo-obs-link">
<i class="fas fa-satellite-dish"></i>
<span id="momo-obs-badge"
style="display: none; position: absolute; top: -2px; right: -2px;
background: #dc3545; color: white; border-radius: 50%;
font-size: 0.6em; padding: 2px 5px; min-width: 16px;
text-align: center; line-height: 1;"></span>
<span id="momo-obs-badge" class="momo-obs-badge" hidden></span>
</a>
<button class="momo-icon-button" type="button" title="說明">
<i class="fas fa-circle-question"></i>
@@ -360,11 +355,11 @@
link.title = d.tooltip || 'AI 觀測台';
if (d.alert_count > 0) {
badge.textContent = d.alert_count;
badge.style.display = 'inline-block';
link.style.color = '#dc3545';
badge.hidden = false;
link.classList.add('is-alert');
} else {
badge.style.display = 'none';
link.style.color = '';
badge.hidden = true;
link.classList.remove('is-alert');
}
} catch (e) { /* silent */ }
}