feat: 页面顶部环境徽标(防混库第 4 层)

启动日志和横幅只在日志里;用户在界面上操作时也该一眼看出连的是哪个库。
生产显示红底 'PROD · <库名@主机/库>',开发显示灰底 'DEV',鼠标悬停给出完整目标。
环境信息由 core/db_config.env_badge() 提供(不含密码),web_server 注入 Jinja 全局。
This commit is contained in:
2026-09-13 10:38:13 +08:00
parent 429aaf6283
commit f5fc96c300
4 changed files with 32 additions and 2 deletions
+8
View File
@@ -46,6 +46,8 @@ body{background:var(--bg);font-family:var(--body);color:var(--text);font-size:14
.brand-dot{width:9px;height:9px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 0 rgba(15,118,110,.6);animation:brandPulse 2.4s infinite}
@keyframes brandPulse{0%{box-shadow:0 0 0 0 rgba(15,118,110,.45)}70%{box-shadow:0 0 0 8px rgba(15,118,110,0)}100%{box-shadow:0 0 0 0 rgba(15,118,110,0)}}
.navbar .tabs{display:flex;gap:2px;flex:1;align-self:stretch}
.env-badge{margin-right:18px;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:700;letter-spacing:.5px;background:#2b3038;color:#9aa3af;border:1px solid #3a4048;white-space:nowrap}
.env-badge-prod{background:#4a1519;color:#ff9b9b;border-color:#8a2b31}
.navbar .tab{position:relative;padding:0 18px;color:#9aa3af;font-size:14px;font-weight:500;cursor:pointer;border:none;background:none;transition:color .15s;letter-spacing:.2px}
.navbar .tab::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:var(--primary);transform:scaleX(0);transition:transform .18s}
.navbar .tab:hover{color:#e5e7eb}
@@ -392,6 +394,12 @@ body{background:var(--bg);font-family:var(--body);color:var(--text);font-size:14
<!-- 顶部导航 -->
<nav class="navbar">
<div class="brand"><span class="brand-dot"></span>设备自动化后台</div>
{% if db_env %}
<span class="env-badge{% if db_env.is_prod %} env-badge-prod{% endif %}"
title="数据库目标:{{ db_env.target }}({{ db_env.backend }})">
{% if db_env.is_prod %}PROD · {{ db_env.target }}{% else %}{{ db_env.env|upper }}{% endif %}
</span>
{% endif %}
<div class="tabs">
<button class="tab active" data-tab="monitor" onclick="showTab('monitor')">监控</button>
<button class="tab" data-tab="tasks" onclick="showTab('tasks')">任务</button>