fix(hub): improve monitor host status bar layout and document psutil setup

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-13 14:10:00 +08:00
parent 1fd0003fc8
commit a89b446d74
5 changed files with 169 additions and 101 deletions
+37 -17
View File
@@ -62,30 +62,50 @@
<h1><span class="head-tag">MON</span> 监控区</h1>
</div>
<div id="host-status-bar" class="host-status-bar hidden" aria-label="服务器运行状态" aria-live="polite">
<div class="host-status-head">
<span class="host-status-dot ok" id="host-status-dot" aria-hidden="true"></span>
<span class="host-status-name" id="host-status-name">服务器</span>
<span class="host-status-uptime" id="host-status-uptime"></span>
<div class="host-status-top">
<div class="host-status-head">
<span class="host-status-dot ok" id="host-status-dot" aria-hidden="true"></span>
<span class="host-status-name" id="host-status-name" title="">服务器</span>
</div>
<div class="host-status-meta">
<span class="host-status-uptime" id="host-status-uptime"></span>
<span class="host-status-updated" id="host-status-updated"></span>
</div>
</div>
<div class="host-status-metrics">
<div class="host-metric" id="host-metric-cpu">
<span class="host-metric-label">CPU</span>
<div class="host-metric-card" id="host-metric-cpu">
<div class="host-metric-head">
<span class="host-metric-label">CPU</span>
<span class="host-metric-val" id="host-cpu-val"></span>
</div>
<div class="host-metric-bar"><span class="host-metric-fill" id="host-cpu-fill"></span></div>
<span class="host-metric-val" id="host-cpu-val"></span>
<span class="host-metric-sub" id="host-cpu-sub"></span>
</div>
<div class="host-metric" id="host-metric-mem">
<span class="host-metric-label">内存</span>
<div class="host-metric-card" id="host-metric-mem">
<div class="host-metric-head">
<span class="host-metric-label">内存</span>
<span class="host-metric-val" id="host-mem-val"></span>
</div>
<div class="host-metric-bar"><span class="host-metric-fill" id="host-mem-fill"></span></div>
<span class="host-metric-val" id="host-mem-val"></span>
<span class="host-metric-sub" id="host-mem-sub"></span>
</div>
<div class="host-metric" id="host-metric-disk">
<span class="host-metric-label">硬盘</span>
<div class="host-metric-card" id="host-metric-disk">
<div class="host-metric-head">
<span class="host-metric-label">硬盘</span>
<span class="host-metric-val" id="host-disk-val"></span>
</div>
<div class="host-metric-bar"><span class="host-metric-fill" id="host-disk-fill"></span></div>
<span class="host-metric-val" id="host-disk-val"></span>
<span class="host-metric-sub" id="host-disk-sub"></span>
</div>
<div class="host-metric host-metric-net" id="host-metric-net">
<span class="host-metric-label">网络</span>
<span class="host-metric-val" id="host-net-val"></span>
<div class="host-metric-card host-metric-card-net" id="host-metric-net">
<div class="host-metric-head">
<span class="host-metric-label">网络</span>
<span class="host-metric-val host-metric-val-net" id="host-net-val">实时</span>
</div>
<div class="host-net-lines">
<span class="host-net-line" id="host-net-up">↑ —</span>
<span class="host-net-line" id="host-net-down">↓ —</span>
</div>
</div>
</div>
</div>
@@ -628,6 +648,6 @@
<script src="/assets/dashboard.js?v=20260612-dash-monitor-count"></script>
<script src="/assets/ai_review_render.js?v=3"></script>
<script src="/assets/time_close_ui.js?v=2"></script>
<script src="/assets/app.js?v=20260612-host-status"></script>
<script src="/assets/app.js?v=20260613-host-status-layout"></script>
</body>
</html>