feat: 页面顶部环境徽标(防混库第 4 层)
启动日志和横幅只在日志里;用户在界面上操作时也该一眼看出连的是哪个库。 生产显示红底 'PROD · <库名@主机/库>',开发显示灰底 'DEV',鼠标悬停给出完整目标。 环境信息由 core/db_config.env_badge() 提供(不含密码),web_server 注入 Jinja 全局。
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user