fix(frontend): redraw status charts on container resize in narrow sidebar

observe the chart host width and force cpu/network chart remount when the
sidebar width changes, preventing stale canvas dimensions after layout
compression.

add min-width/width constraints on chart containers and canvas to keep chart
rendering bounded to the current panel width, improving responsiveness in
tight layouts.

archive the completed layout-parity proposal/tasks and sync changelog/module
records to reflect the delivered frontend updates.
This commit is contained in:
yinjianm
2026-04-16 00:47:25 +08:00
parent a28822ec79
commit 34d6c3f499
8 changed files with 260 additions and 172 deletions
+2 -2
View File
@@ -58,6 +58,6 @@
### 状态监控卡片
**条件**: 用户在 `/workspace` 右侧状态监控面板查看服务器资源状态。
**行为**: `StatusMonitor.vue` 当前继续向“服务器监控小屏”风格收紧:默认视图在顶部信息区之外,补充了服务器时区和运行时间,并新增“进程管理”概览卡片,直接展示总进程数、运行中、休眠中以及若干高占用进程预览;点击“查看全部”后会打开新的 `ProcessManagerModal.vue`。该 modal 采用深色控制台式表格布局,支持搜索 PID / 用户 / 命令、自动刷新、手动刷新,以及对单个进程执行“结束”或“强制结束”操作,并通过当前活动 SSH 会话的 `wsManager` 与后端 `process:list` / `process:signal` 消息交互。
**结果**: 前端状态监控形成了“默认小屏概览 + 独立进程管理页”的双层结构:默认面板更贴近用户参考图,而完整进程管理又不会挤占侧栏监控本体。
**行为**: `StatusMonitor.vue` 当前已从通用卡片栅格重排为更接近参考图的窄屏监控结构:顶部改为成对的信息条,资源概览改为带编号的紧凑使用率行,内存/网络/磁盘模块都采用明显的左右分区关系,分别展示环形占比+统计堆叠、监控屏风格网络面板+上下行速率堆叠,以及设备视觉块+紧凑磁盘摘要;默认视图底部继续保留“进程管理”概览与高占用进程预览,并通过“查看全部”打开 `ProcessManagerModal.vue`。该 modal 继续采用深色控制台式表格布局,支持搜索 PID / 用户 / 命令、自动刷新、手动刷新,以及对单个进程执行“结束”或“强制结束”操作,并通过当前活动 SSH 会话的 `wsManager` 与后端 `process:list` / `process:signal` 消息交互。
**结果**: 前端状态监控形成了“更贴近参考图的默认小屏监控 + 独立进程管理页”的双层结构:默认面板先解决左右布局和视觉层级问题,而完整进程管理继续独立存在,不挤占侧栏本体。