diff --git a/.helloagents/CHANGELOG.md b/.helloagents/CHANGELOG.md index 0adf402..a871522 100644 --- a/.helloagents/CHANGELOG.md +++ b/.helloagents/CHANGELOG.md @@ -61,6 +61,9 @@ - 方案: [202603250614_terminal-ansi-color-effects](archive/2026-03/202603250614_terminal-ansi-color-effects/) ### 快速修改 +- **[frontend]**: 将状态监控模块区从大断点固定分列改为更高密度的 auto-fit 自适应网格,让内存/网络/磁盘在正常宽度下默认并排,只有非常窄时才回落为单列 — by yinjianm + - 类型: 快速修改(无方案包) + - 文件: packages/frontend/src/components/StatusMonitor.vue - **[frontend]**: 将状态监控顶部的“服务器状态 + 系统信息”从分裂的头部和独立概览块改为单个一体化系统卡,统一容纳 IP、LIVE、系统名、网卡、CPU 核数、CPU 型号、时区和运行时间 — by yinjianm - 类型: 快速修改(无方案包) - 文件: packages/frontend/src/components/StatusMonitor.vue diff --git a/packages/frontend/src/components/StatusMonitor.vue b/packages/frontend/src/components/StatusMonitor.vue index 5ff0d2d..f18ef0a 100644 --- a/packages/frontend/src/components/StatusMonitor.vue +++ b/packages/frontend/src/components/StatusMonitor.vue @@ -848,15 +848,17 @@ const copyIpToClipboard = async (ipAddress: string | null) => { .monitor-module-grid { display: grid; - gap: 12px; + gap: 10px; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); } .monitor-module { display: grid; - gap: 12px; + gap: 10px; min-width: 0; - border-radius: 20px; - padding: 14px; + border-radius: 18px; + padding: 12px; + container-type: inline-size; } .monitor-module__heading { @@ -1474,34 +1476,21 @@ const copyIpToClipboard = async (ipAddress: string | null) => { } } -@container (min-width: 760px) { - .monitor-module-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - +@container (min-width: 420px) { .monitor-module--usage, .monitor-module--process { grid-column: 1 / -1; } } -@container (max-width: 440px) { - .monitor-chip { - max-width: 100%; - } - - .monitor-chip__value, - .usage-lane__helper, - .disk-summary-table__row span { - white-space: normal; - } - - .cpu-module__hero { +@container (max-width: 250px) { + .module-split--memory, + .network-module__hero, + .disk-compact-top { grid-template-columns: 1fr; } - .network-module__hero, - .disk-compact-top { + .memory-stat-stack { grid-template-columns: 1fr; } @@ -1524,6 +1513,22 @@ const copyIpToClipboard = async (ipAddress: string | null) => { } } +@container (max-width: 440px) { + .monitor-chip { + max-width: 100%; + } + + .monitor-chip__value, + .usage-lane__helper, + .disk-summary-table__row span { + white-space: normal; + } + + .cpu-module__hero { + grid-template-columns: 1fr; + } +} + @container (max-width: 360px) { .process-summary-strip { grid-template-columns: 1fr;