feat(frontend): 优化状态监控默认概览布局

将 CPU 和网络的历史图表直接整合进默认概览,保留常驻资源卡片,
并移除底部重复的图表区,减少侧栏中的重复信息。
This commit is contained in:
yinjianm
2026-04-19 04:54:56 +08:00
parent d300566f89
commit 30cc596ed8
3 changed files with 152 additions and 11 deletions
+2 -2
View File
@@ -2,9 +2,9 @@
## [Unreleased]
- **[frontend]**: 除状态监控默认视图中的 CPU 使用率卡与网络速度卡,保留内存 / 磁盘 / 进程管理作为常驻概览,减少右侧窄栏中的重复信息 — by yinjianm
- **[frontend]**: 除状态监控底部重复的 CPU / 网络 `chart-panel` 图表区,保留默认概览中的 CPU 与网络卡片,只收掉重复展示 — by yinjianm
- 类型: 快速修改(无方案包)
- 文件: packages/frontend/src/components/StatusMonitor.vue:60-168,276-280,282-325
- 文件: packages/frontend/src/components/StatusMonitor.vue:184-189
- **[frontend]**: 将状态监控中的 CPU 卡片升级为总 CPU `canvas` 历史图 + 每核心实时条卡,并在极窄侧栏下自动切换为单列布局 — by yinjianm
- 方案: [202604190351_status-monitor-cpu-total-and-per-core](archive/2026-04/202604190351_status-monitor-cpu-total-and-per-core/)
+2 -2
View File
@@ -58,8 +58,8 @@
### 状态监控卡片
**条件**: 用户在 `/workspace` 右侧状态监控面板查看服务器资源状态。
**行为**: `StatusMonitor.vue` 当前已从通用卡片栅格重排为更接近参考图的窄屏监控结构:顶部改为成对的信息条;默认概览区当前仅保留内存、磁盘和进程管理三个常驻模块,不再默认展示 CPU 使用率卡与网络速度卡,以减少右侧窄栏里的重复信息密度。其中内存卡片会在容器宽度大于等于 250px 时维持环形概览与统计块的高密度横向布局,仅在低于 250px 时切为手机式竖排;磁盘模块继续展示设备视觉块与紧凑磁盘摘要;默认视图底部继续保留“进程管理”概览与高占用进程预览,并通过“查看全部”打开 `ProcessManagerModal.vue`。其中进程统计当前已整体收纳到模块标题区右侧的一组 `monitor-module__pill` 胶囊中,统一展示“总数 / 运行中 / 休眠中”,不再额外保留独立摘要行,以减少默认卡片的纵向占用。该 modal 继续采用深色控制台式表格布局,支持搜索 PID / 用户 / 命令、自动刷新、手动刷新,以及对单个进程执行“结束”或“强制结束”操作,并通过当前活动 SSH 会话的 `wsManager` 与后端 `process:list` / `process:signal` 消息交互;当前还支持点击 `PID / USER / STATE / CPU / MEM / START / COMMAND` 表头做本地升降序排序,并为激活列显示方向标记,同时给右上角关闭按钮预留了独立安全区,避免与刷新区过近。
**结果**: 前端状态监控形成了“更贴近参考图的默认小屏监控 + 独立进程管理页”的双层结构:默认面板保持了侧栏内更紧凑的三块常驻概览,不再重复显示 CPU 和网络卡片;完整进程管理继续独立存在,不挤占侧栏本体;进入进程管理详细视图后,也能更快按字段维度筛查进程。
**行为**: `StatusMonitor.vue` 当前已从通用卡片栅格重排为更接近参考图的窄屏监控结构:顶部改为成对的信息条;默认概览区继续保留 CPU、内存、网络、磁盘和进程管理五块常驻模块,其中 CPU 卡片使用 `StatusMonitorCpuHistoryChart.vue` 展示总 CPU 历史曲线,并以紧凑网格展示每个核心的实时条卡;网络卡片继续使用 `StatusMonitorNetworkHistoryChart.vue` 展示最近网络历史,并保留下方统计表。为避免与默认概览重复,底部独立 `StatusCharts.vue` 图表区不再挂载。内存卡片会在容器宽度大于等于 250px 时维持环形概览与统计块的高密度横向布局,仅在低于 250px 时切为手机式竖排;磁盘模块继续展示设备视觉块与紧凑磁盘摘要;默认视图底部继续保留“进程管理”概览与高占用进程预览,并通过“查看全部”打开 `ProcessManagerModal.vue`。其中进程统计当前已整体收纳到模块标题区右侧的一组 `monitor-module__pill` 胶囊中,统一展示“总数 / 运行中 / 休眠中”,不再额外保留独立摘要行,以减少默认卡片的纵向占用。该 modal 继续采用深色控制台式表格布局,支持搜索 PID / 用户 / 命令、自动刷新、手动刷新,以及对单个进程执行“结束”或“强制结束”操作,并通过当前活动 SSH 会话的 `wsManager` 与后端 `process:list` / `process:signal` 消息交互;当前还支持点击 `PID / USER / STATE / CPU / MEM / START / COMMAND` 表头做本地升降序排序,并为激活列显示方向标记,同时给右上角关闭按钮预留了独立安全区,避免与刷新区过近。
**结果**: 前端状态监控形成了“更贴近参考图的默认小屏监控 + 独立进程管理页”的双层结构:默认面板保留 CPU 和网络等常驻概览卡,同时移除了底部重复图表区,减少重复信息;完整进程管理继续独立存在,不挤占侧栏本体;进入进程管理详细视图后,也能更快按字段维度筛查进程。
### 快捷指令拖拽排序
**条件**: 用户在 Workbench 的快捷指令视图中浏览分组或扁平命令列表,且当前未启用搜索过滤。