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

feat: progress bars with color coding for device metrics

Browse Source
This commit is contained in:
tian 2026-05-08 20:13:12 +08:00
parent 87e1132a9f
commit f0465049f2
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
internal/web/ui/templates/dashboard.html
View File

@ -31,11 +31,14 @@
<div id="metrics-body" style="display:flex;flex-wrap:wrap;gap:12px">
{{range .DeviceMetrics}}
<div style="padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-soft);min-width:160px">
<div style="font-weight:500;font-size:12px;margin-bottom:4px">{{.Name}}</div>
<div style="display:flex;gap:12px;font-size:11px">
<span>CPU <strong>{{printf "%.0f%%" .CPU}}</strong></span>
<span>内存 <strong>{{printf "%.0f%%" .Mem}}</strong></span>
<span>NPU <strong>{{printf "%.0f%%" .NPU}}</strong></span>
<div style="font-weight:500;font-size:12px;margin-bottom:8px">{{.Name}}</div>
<div style="display:flex;flex-direction:column;gap:4px;font-size:11px">
<div><span style="display:inline-block;width:32px">CPU</span> {{printf "%.0f%%" .CPU}}</div>
<div style="height:4px;background:var(--surface-soft);border-radius:2px;margin-bottom:2px"><div style="height:100%;border-radius:2px;width:{{printf "%.0f%%" .CPU}};background:{{if gt .CPU 80.0}}var(--danger-soft-text){{else if gt .CPU 50.0}}var(--amber){{else}}var(--green){{end}}"></div></div>
<div><span style="display:inline-block;width:32px">内存</span> {{printf "%.0f%%" .Mem}}</div>
<div style="height:4px;background:var(--surface-soft);border-radius:2px;margin-bottom:2px"><div style="height:100%;border-radius:2px;width:{{printf "%.0f%%" .Mem}};background:{{if gt .Mem 80.0}}var(--danger-soft-text){{else if gt .Mem 50.0}}var(--amber){{else}}var(--green){{end}}"></div></div>
<div><span style="display:inline-block;width:32px">NPU</span> {{printf "%.0f%%" .NPU}}</div>
<div style="height:4px;background:var(--surface-soft);border-radius:2px"><div style="height:100%;border-radius:2px;width:{{printf "%.0f%%" .NPU}};background:{{if gt .NPU 80.0}}var(--danger-soft-text){{else if gt .NPU 50.0}}var(--amber){{else}}var(--green){{end}}"></div></div>
</div>
</div>
{{else}}