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

Co-authored-by: Cursor <cursoragent@cursor.com>

manual_trading_hub/static/app.css

@@ -652,11 +652,10 @@ button:disabled {
 
 .host-status-bar {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 10px 16px;
-  margin: 0 0 10px;
-  padding: 10px 12px;
+  flex-direction: column;
+  gap: 12px;
+  margin: 0 0 12px;
+  padding: 12px 14px;
   border-radius: var(--radius);
   border: 1px solid var(--border-soft);
   background: var(--panel);
@@ -667,12 +666,20 @@ button:disabled {
   display: none !important;
 }
 
+.host-status-top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 16px;
+}
+
 .host-status-head {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: 8px;
   min-width: 0;
-  flex: 0 0 auto;
+  flex: 1 1 220px;
 }
 
 .host-status-dot {
@@ -701,36 +708,54 @@ button:disabled {
 .host-status-name {
   font-weight: 600;
   color: var(--text);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.host-status-uptime {
+.host-status-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px 14px;
   color: var(--muted);
   font-size: 11px;
+  flex: 0 1 auto;
+}
+
+.host-status-uptime,
+.host-status-updated {
   white-space: nowrap;
 }
 
 .host-status-metrics {
-  display: flex;
-  flex: 1 1 520px;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 14px;
-  min-width: 0;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
 }
 
-.host-metric {
-  display: grid;
-  grid-template-columns: 42px minmax(72px, 1fr) auto;
-  align-items: center;
+.host-metric-card {
+  display: flex;
+  flex-direction: column;
   gap: 8px;
   min-width: 0;
-  flex: 1 1 180px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--border-soft);
+  background: rgba(0, 0, 0, 0.14);
 }
 
-.host-metric-net {
-  grid-template-columns: 42px auto;
-  flex: 1 1 220px;
+html[data-theme="light"] .host-metric-card {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.host-metric-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
 }
 
 .host-metric-label {
@@ -740,7 +765,7 @@ button:disabled {
 }
 
 .host-metric-bar {
-  height: 6px;
+  height: 7px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.06);
   overflow: hidden;
@@ -771,7 +796,36 @@ html[data-theme="light"] .host-metric-bar {
   color: var(--text);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.host-metric-val-net {
   font-size: 11px;
+  font-weight: 500;
+  color: var(--muted);
+}
+
+.host-metric-sub,
+.host-net-line {
+  color: var(--muted);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.host-net-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+@media (max-width: 1080px) {
+  .host-status-metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 .grid-monitor.grid-monitor-tiles {
@@ -2738,22 +2792,22 @@ body.login-page {
   }
 
   .host-status-bar {
+    gap: 10px;
+    padding: 10px 12px;
+  }
+
+  .host-status-top {
     flex-direction: column;
     align-items: stretch;
-    gap: 8px;
-    padding: 8px 10px;
+  }
+
+  .host-status-meta {
+    justify-content: flex-start;
   }
 
   .host-status-metrics {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 6px;
-  }
-
-  .host-metric,
-  .host-metric-net {
-    flex: 1 1 auto;
-    width: 100%;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 8px;
   }
 
   .card-head {

manual_trading_hub/static/app.js

@@ -112,24 +112,35 @@
   function renderHostStatusBar(data) {
     const bar = document.getElementById("host-status-bar");
     if (!bar) return;
+    const dot = document.getElementById("host-status-dot");
+    const name = document.getElementById("host-status-name");
+    const uptime = document.getElementById("host-status-uptime");
+    const updated = document.getElementById("host-status-updated");
+    const cpuVal = document.getElementById("host-cpu-val");
+    const cpuSub = document.getElementById("host-cpu-sub");
+    const memVal = document.getElementById("host-mem-val");
+    const memSub = document.getElementById("host-mem-sub");
+    const diskVal = document.getElementById("host-disk-val");
+    const diskSub = document.getElementById("host-disk-sub");
+    const netUp = document.getElementById("host-net-up");
+    const netDown = document.getElementById("host-net-down");
     if (!data || !data.ok) {
       bar.classList.remove("hidden");
-      const dot = document.getElementById("host-status-dot");
-      const name = document.getElementById("host-status-name");
-      const uptime = document.getElementById("host-status-uptime");
-      if (dot) {
-        dot.className = "host-status-dot bad";
+      if (dot) dot.className = "host-status-dot bad";
+      if (name) {
+        name.textContent = "服务器";
+        name.title = "";
       }
-      if (name) name.textContent = "服务器";
       if (uptime) uptime.textContent = (data && data.msg) || "状态不可用";
-      const cpuVal = document.getElementById("host-cpu-val");
-      const memVal = document.getElementById("host-mem-val");
-      const diskVal = document.getElementById("host-disk-val");
-      const netVal = document.getElementById("host-net-val");
+      if (updated) updated.textContent = "";
       if (cpuVal) cpuVal.textContent = "—";
+      if (cpuSub) cpuSub.textContent = "";
       if (memVal) memVal.textContent = "—";
+      if (memSub) memSub.textContent = "";
       if (diskVal) diskVal.textContent = "—";
-      if (netVal) netVal.textContent = "—";
+      if (diskSub) diskSub.textContent = "";
+      if (netUp) netUp.textContent = "↑ —";
+      if (netDown) netDown.textContent = "↓ —";
       return;
     }
     bar.classList.remove("hidden");
@@ -145,50 +156,31 @@
     let overall = "ok";
     if (levels.includes("bad")) overall = "bad";
     else if (levels.includes("warn")) overall = "warn";
-    const dot = document.getElementById("host-status-dot");
-    const name = document.getElementById("host-status-name");
-    const uptime = document.getElementById("host-status-uptime");
     if (dot) dot.className = "host-status-dot " + overall;
-    if (name) name.textContent = data.hostname || "服务器";
-    if (uptime) {
-      uptime.textContent =
-        "运行 " +
-        fmtHostUptime(data.uptime_sec) +
-        (data.updated_at ? " · " + data.updated_at : "");
+    const hostname = data.hostname || "服务器";
+    if (name) {
+      name.textContent = hostname;
+      name.title = hostname;
     }
+    if (uptime) uptime.textContent = "运行 " + fmtHostUptime(data.uptime_sec);
+    if (updated) updated.textContent = data.updated_at ? "更新 " + data.updated_at : "";
     setHostMetricBar(document.getElementById("host-cpu-fill"), cpu.percent);
     setHostMetricBar(document.getElementById("host-mem-fill"), mem.percent);
     setHostMetricBar(document.getElementById("host-disk-fill"), disk.percent);
-    const cpuVal = document.getElementById("host-cpu-val");
-    const memVal = document.getElementById("host-mem-val");
-    const diskVal = document.getElementById("host-disk-val");
-    const netVal = document.getElementById("host-net-val");
-    if (cpuVal) {
-      cpuVal.textContent =
-        (cpu.percent != null ? cpu.percent + "%" : "—") +
-        (cpu.count ? " · " + cpu.count + "核" : "");
+    if (cpuVal) cpuVal.textContent = cpu.percent != null ? cpu.percent + "%" : "—";
+    if (cpuSub) cpuSub.textContent = cpu.count ? cpu.count + " 核" : "";
+    if (memVal) memVal.textContent = mem.percent != null ? mem.percent + "%" : "—";
+    if (memSub) {
+      memSub.textContent =
+        fmtHostBytes(mem.used_bytes) + " / " + fmtHostBytes(mem.total_bytes);
     }
-    if (memVal) {
-      memVal.textContent =
-        (mem.percent != null ? mem.percent + "%" : "—") +
-        " · " +
-        fmtHostBytes(mem.used_bytes) +
-        "/" +
-        fmtHostBytes(mem.total_bytes);
-    }
-    if (diskVal) {
-      diskVal.textContent =
-        (disk.percent != null ? disk.percent + "%" : "—") +
-        " · " +
-        fmtHostBytes(disk.used_bytes) +
-        "/" +
-        fmtHostBytes(disk.total_bytes);
-    }
-    if (netVal) {
-      const up = fmtHostBytes(net.sent_rate_bps) + "/s";
-      const down = fmtHostBytes(net.recv_rate_bps) + "/s";
-      netVal.textContent = "↑" + up + " ↓" + down;
+    if (diskVal) diskVal.textContent = disk.percent != null ? disk.percent + "%" : "—";
+    if (diskSub) {
+      diskSub.textContent =
+        fmtHostBytes(disk.used_bytes) + " / " + fmtHostBytes(disk.total_bytes);
     }
+    if (netUp) netUp.textContent = "↑ " + fmtHostBytes(net.sent_rate_bps) + "/s";
+    if (netDown) netDown.textContent = "↓ " + fmtHostBytes(net.recv_rate_bps) + "/s";
   }
 
   async function fetchHostStatus() {

manual_trading_hub/static/index.html

@@ -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>

manual_trading_hub/使用说明.md

@@ -151,6 +151,7 @@ Chrome **桌面快捷方式**图标来自站点 `favicon` / `manifest`（已配
 
 | 功能 | 说明 |
 |------|------|
+| **服务器状态** | 标题下方展示本机 **CPU / 内存 / 硬盘 / 网络**（`GET /api/host/status`，每 5 秒刷新）；四指标分卡片两行排版，主机名过长自动省略；≥75% 黄、≥90% 红。依赖 `manual_trading_hub/.venv` 内 **psutil**（勿用系统 `pip`，见 [部署文档.md](./部署文档.md)）。可选 `HUB_HOST_DISK_PATH` 指定监控磁盘（默认 Linux `/`、Windows 系统盘） |
 | **2×2 主界面** | 四所信息**完整展示**：余额、持仓表、委托/平仓、折叠委托单、下单监控、关键位、趋势/加仓摘要 |
 | **全屏放大** | **点击卡片标题栏**（非按钮区）→ 该所**全屏**：每币种一张实盘风格持仓卡（趋势持仓显示**来源: 趋势回调计划**、**风险%**、**程序监控·止盈价**、**盈亏比**，与实例策略页一致）；独立卡片：**关键位**、**下单监控**、**趋势回调**（单计划 **两列**：左=币种基本信息与 3×2 指标，右=**补仓计划明细**，底=**保本偏移%** 可编辑 + **保本移交** / **结束计划**（中控直接调实例，与 `/strategy` 一致）、快照可用/计划保证金/杠杆）、**顺势加仓** |
 | **委托单折叠** | 仅「委托单」区块默认折叠；展开状态存浏览器本地，**5 秒刷新不重置** |

manual_trading_hub/部署文档.md

@@ -48,12 +48,13 @@ chmod +x scripts/fix_hub_deps.sh scripts/verify_hub_deploy.sh scripts/fix_env_cr
 deactivate                         # 可选；交给 PM2 时不必保持激活
 ```
 
-**依赖说明**：`requirements.txt` 含 **`python-multipart`**（FastAPI 表单解析；旧版若保留下单接口时需要）。当前中控**已移除下单区**，但仍建议安装完整依赖。
+**依赖说明**：`requirements.txt` 含 **`python-multipart`**（FastAPI 表单解析；旧版若保留下单接口时需要）、**`psutil`**（监控区服务器状态条）。当前中控**已移除下单区**，但仍建议安装完整依赖。
 
 说明：
 
-- **安装依赖**：`source .venv/bin/activate` 后用 `pip install` 即可；不写 `activate` 时也可用 **`.venv/bin/pip install -r requirements.txt`**（效果相同）。
+- **安装依赖**：必须在 **`manual_trading_hub/.venv`** 内执行，勿对系统 Python 直接 `pip install`（Debian/Ubuntu 会报 `externally-managed-environment`）。`source .venv/bin/activate` 后用 `pip install` 即可；不写 `activate` 时也可用 **`.venv/bin/pip install -r requirements.txt`**（效果相同）。快捷：`bash scripts/fix_hub_deps.sh`。
 - **PM2 启动**：由 `scripts/run_hub.sh` 固定调用 **`.venv/bin/python`**，**不依赖**你是否在 shell 里激活过 venv。
+- **监控磁盘**：可选环境变量 **`HUB_HOST_DISK_PATH`**（如 `/opt/crypto_monitor`），未设时 Linux 为 `/`、Windows 为系统盘。
 
 子代理也使用 **本目录 `.venv`** 里的 Python（与各策略 Flask 的 venv 可分开）。