Doni/safesight-control
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add standard/expert mode toggle for sidebar menu

Browse Source 
- Add mode toggle switch at sidebar bottom (标准/专家)
- Hide complex system config items in standard mode
- Remove '主模块' nav section header
- Persist mode selection in localStorage
This commit is contained in:
tian 2026-07-17 11:46:29 +08:00
parent ccde3aeea6
commit aa76607092
2 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
internal/web/ui/assets/style.css
View File

@ -432,4 +432,16 @@ pre{margin-top:12px;padding:12px;border-radius:var(--radius);border:1px solid va
.assignment-board-grid{grid-template-columns:1fr}
}
.sidebar-footer{margin-top:auto;padding:16px 8px 0;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:var(--sidebar-muted);line-height:1.6;text-align:center}
.sidebar-footer{margin-top:auto;padding:16px 8px 0;font-size:11px;color:var(--sidebar-muted);line-height:1.6;text-align:center}
.sidebar-footer .mode-toggle{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 10px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;cursor:pointer;user-select:none}
.sidebar-footer .mode-toggle:hover{background:var(--sidebar-hover)}
.mode-label{font-size:11px;font-weight:500;transition:color .16s ease}
.mode-label-left{color:var(--sidebar-text)}
.mode-label-right{color:var(--sidebar-muted)}
body[data-mode=expert] .mode-label-left{color:var(--sidebar-muted)}
body[data-mode=expert] .mode-label-right{color:var(--sidebar-text)}
.mode-track{position:relative;width:36px;height:20px;border-radius:10px;background:var(--surface-strong);border:1px solid var(--border);transition:background .16s ease,border-color .16s ease;flex-shrink:0}
body[data-mode=expert] .mode-track{background:var(--primary-strong);border-color:var(--primary)}
.mode-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--sidebar-text);transition:transform .16s ease}
body[data-mode=expert] .mode-thumb{transform:translateX(16px)}
body:not([data-mode=expert]) .expert-only{display:none}

34
internal/web/ui/templates/layout.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{.Title}}</title>
<link rel="stylesheet" href="/ui/assets/vendor/tabler.min.css" />
<link rel="stylesheet" href="/ui/assets/style.css?v=20260508-ia06" />
<link rel="stylesheet" href="/ui/assets/style.css?v=20260508-ia07" />
<link rel="stylesheet" href="/ui/assets/graph_editor.css?v=20260429-ia01" />
</head>
<body data-theme="blue-dark">
@ -19,7 +19,6 @@
</div>
</div>
<nav class="side-nav" aria-label="主导航">
<div class="nav-section">主模块</div>
<a href="/ui/dashboard"><span class="nav-icon">{{icon "overview"}}</span><span>总览</span></a>
<a href="/ui/console"><span class="nav-icon">{{icon "apply"}}</span><span>管控台</span></a>
<a href="/ui/alarms"><span class="nav-icon">{{icon "bell"}}</span><span>告警中心</span></a>
@ -35,16 +34,21 @@
<a class="nav-subitem" href="/ui/system"><span class="nav-icon nav-subicon">{{icon "heartbeat"}}</span><span>系统状态</span></a>
<a class="nav-subitem" href="/ui/diagnostics"><span class="nav-icon nav-subicon">{{icon "logs"}}</span><span>日志审计</span></a>
<a class="nav-subitem" href="/ui/tasks"><span class="nav-icon nav-subicon">{{icon "task"}}</span><span>任务中心</span></a>
<a class="nav-subitem" href="/ui/scene-templates"><span class="nav-icon nav-subicon">{{icon "profile"}}</span><span>场景管理</span></a>
<a class="nav-subitem" href="/ui/recognition-units"><span class="nav-icon nav-subicon">{{icon "device"}}</span><span>视频通道</span></a>
<a class="nav-subitem" href="/ui/device-assignments"><span class="nav-icon nav-subicon">{{icon "apply"}}</span><span>通道部署</span></a>
<a class="nav-subitem" href="/ui/assets"><span class="nav-icon nav-subicon">{{icon "assets"}}</span><span>配置中心</span></a>
<a class="nav-subitem" href="/ui/models"><span class="nav-icon nav-subicon">{{icon "assets"}}</span><span>模型管理</span></a>
<a class="nav-subitem" href="/ui/resources"><span class="nav-icon nav-subicon">{{icon "template"}}</span><span>资源管理</span></a>
<a class="nav-subitem expert-only" href="/ui/scene-templates"><span class="nav-icon nav-subicon">{{icon "profile"}}</span><span>场景管理</span></a>
<a class="nav-subitem expert-only" href="/ui/recognition-units"><span class="nav-icon nav-subicon">{{icon "device"}}</span><span>视频通道</span></a>
<a class="nav-subitem expert-only" href="/ui/device-assignments"><span class="nav-icon nav-subicon">{{icon "apply"}}</span><span>通道部署</span></a>
<a class="nav-subitem expert-only" href="/ui/assets"><span class="nav-icon nav-subicon">{{icon "assets"}}</span><span>配置中心</span></a>
<a class="nav-subitem expert-only" href="/ui/models"><span class="nav-icon nav-subicon">{{icon "assets"}}</span><span>模型管理</span></a>
<a class="nav-subitem expert-only" href="/ui/resources"><span class="nav-icon nav-subicon">{{icon "template"}}</span><span>资源管理</span></a>
</div>
</details>
</nav>
<div class="sidebar-footer">
<div class="mode-toggle" id="mode-toggle" role="switch" tabindex="0" aria-label="切换操作模式">
<span class="mode-label mode-label-left">标准</span>
<span class="mode-track"><span class="mode-thumb"></span></span>
<span class="mode-label mode-label-right">专家</span>
</div>
<div>北京泰奥理科技有限公司</div>
<div>&copy; {{.Year}} V{{.Version}}</div>
</div>
@ -342,6 +346,20 @@
}
}
var modeKey = "safesight-mode";
function applyMode(mode, persist) {
var nextMode = mode === "expert" ? "expert" : "standard";
document.body.setAttribute("data-mode", nextMode);
if (persist) {
localStorage.setItem(modeKey, nextMode);
}
}
applyMode(localStorage.getItem(modeKey) || "standard", false);
document.getElementById("mode-toggle").addEventListener("click", function () {
var current = document.body.getAttribute("data-mode") || "standard";
applyMode(current === "expert" ? "standard" : "expert", true);
});
})();
</script>
</body>