feat(frontend): 优化状态监控 CPU 概览展示

将默认 CPU 卡从逐核心条卡改为总 CPU 历史曲线加紧凑摘要，并通过核心详情弹层查看全部核心，避免多核机器下侧栏过高。
2026-04-19 05:33:33 +08:00
parent 8adbbe11e9
commit aad6b84eb9
8 changed files with 71 additions and 58 deletions
@@ -2,6 +2,9 @@

 ## [Unreleased]

+- **[frontend]**: 将状态监控默认 CPU 卡改为“总 CPU 历史图 + 当前/平均/最忙核心紧凑摘要 + 查看全部核心详情弹层”，避免多核机器下侧栏被逐核心条卡撑高 — by yinjianm
+  - 方案: [202604190520_status-monitor-cpu-summary-modal](archive/2026-04/202604190520_status-monitor-cpu-summary-modal/)
+
 - **[frontend]**: 移除状态监控 CPU 与网络模块标题区里重复的主标题 `h5`，只保留 eyebrow 标签，减少卡片标题冗余 — by yinjianm
  - 类型: 快速修改（无方案包）
  - 文件: packages/frontend/src/components/StatusMonitor.vue:61-64,129-132
@@ -0,0 +1,13 @@
+{
+  "status": "completed",
+  "completed": 4,
+  "failed": 0,
+  "skipped": 0,
+  "pending": 0,
+  "uncertain": 0,
+  "total": 4,
+  "done": 4,
+  "percent": 100,
+  "current": "-",
+  "updated_at": "2026-04-19 05:31:25"
+}
@@ -0,0 +1,52 @@
+# 任务清单: status-monitor-cpu-summary-modal
+
+> **@status:** completed | 2026-04-19 05:33
+
+```yaml
+@feature: status-monitor-cpu-summary-modal
+@created: 2026-04-19
+@status: completed
+@mode: R2
+```
+
+## 进度概览
+
+| 完成 | 失败 | 跳过 | 总数 |
+|------|------|------|------|
+| 4 | 0 | 0 | 4 |
+
+---
+
+## 任务列表
+
+### 1. frontend CPU 默认卡改造
+
+- [√] 1.1 在 `packages/frontend/src/components/StatusMonitor.vue` 中将 CPU 默认卡从逐核心条卡改为紧凑摘要
+- [√] 1.2 在 `packages/frontend/src/components/StatusMonitor.vue` 中新增 CPU 核心详情入口并接入弹层状态
+  - 依赖: 1.1
+
+### 2. frontend CPU 详情弹层
+
+- [√] 2.1 新增 `packages/frontend/src/components/StatusMonitorCpuCoreModal.vue`，展示全部核心明细
+  - 依赖: 1.1
+
+### 3. 验证与同步
+
+- [√] 3.1 同步知识库说明与变更日志，并执行前端构建验证
+  - 依赖: 1.2, 2.1
+
+---
+
+## 执行日志
+
+| 时间 | 任务 | 状态 | 备注 |
+|------|------|------|------|
+| 2026-04-19 05:20 | 创建方案包 | 已完成 | `create_package.py` 已生成 proposal/tasks 模板 |
+| 2026-04-19 05:28 | 完成 CPU 默认卡与核心详情弹层 | 已完成 | `StatusMonitor.vue` 改为摘要卡，新增 `StatusMonitorCpuCoreModal.vue` |
+| 2026-04-19 05:31 | 完成构建验证与知识库同步 | 已完成 | `npm --prefix packages/frontend run build` 通过，并更新 `frontend.md` / `CHANGELOG.md` |
+
+---
+
+## 执行备注
+
+> 本次重点是解决多核机器下默认 CPU 卡高度失控的问题，不修改后端数据来源。
@@ -7,6 +7,7 @@

 | 时间戳 | 名称 | 类型 | 涉及模块 | 决策 | 结果 |
 |--------|------|------|---------|------|------|
+| 202604190520 | status-monitor-cpu-summary-modal | - | - | - | ✅完成 |
 | 202604190351 | status-monitor-cpu-total-and-per-core | implementation | frontend, backend | status-monitor-cpu-total-and-per-core#D001 | ✅完成 |
 | 202604190358 | status-monitor-network-vertical-stack | implementation | frontend | - | ✅完成 |
 | 202604190352 | process-manager-table-sort-and-close-spacing | implementation | frontend | process-manager-table-sort-and-close-spacing#D001, process-manager-table-sort-and-close-spacing#D002 | ✅完成 |
@@ -58,8 +58,8 @@

 ### 状态监控卡片
 **条件**: 用户在 `/workspace` 右侧状态监控面板查看服务器资源状态。  
-**行为**: `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 和网络等常驻概览卡，同时移除了底部重复图表区，减少重复信息；完整进程管理继续独立存在，不挤占侧栏本体；进入进程管理详细视图后，也能更快按字段维度筛查进程。
+**行为**: `StatusMonitor.vue` 当前已从通用卡片栅格重排为更接近参考图的窄屏监控结构：顶部改为成对的信息条；默认概览区继续保留 CPU、内存、网络、磁盘和进程管理五块常驻模块，其中 CPU 卡片使用 `StatusMonitorCpuHistoryChart.vue` 展示总 CPU 历史曲线，但默认侧栏不再直接铺开每个核心的实时条卡，而是改为“当前 / 平均 / 最忙核心”的紧凑摘要，并通过新增的 `StatusMonitorCpuCoreModal.vue` 提供“查看核心”入口，在弹层中按当前占用率排序展示全部核心；网络卡片继续使用 `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 和网络等常驻概览卡，同时移除了底部重复图表区；CPU 在多核机器上也不会再被逐核心条卡撑高，详细核心分布则下沉到专门弹层中；完整进程管理继续独立存在，不挤占侧栏本体；进入进程管理详细视图后，也能更快按字段维度筛查进程。

 ### 快捷指令拖拽排序
 **条件**: 用户在 Workbench 的快捷指令视图中浏览分组或扁平命令列表，且当前未启用搜索过滤。  
@@ -1,48 +0,0 @@
-# 任务清单: status-monitor-cpu-summary-modal
-
-```yaml
-@feature: status-monitor-cpu-summary-modal
-@created: 2026-04-19
-@status: in_progress
-@mode: R2
-```
-
-## 进度概览
-
-| 完成 | 失败 | 跳过 | 总数 |
-|------|------|------|------|
-| 0 | 0 | 0 | 4 |
-
---
-
-## 任务列表
-
-### 1. frontend CPU 默认卡改造
-
- [ ] 1.1 在 `packages/frontend/src/components/StatusMonitor.vue` 中将 CPU 默认卡从逐核心条卡改为紧凑摘要
- [ ] 1.2 在 `packages/frontend/src/components/StatusMonitor.vue` 中新增 CPU 核心详情入口并接入弹层状态
-  - 依赖: 1.1
-
-### 2. frontend CPU 详情弹层
-
- [ ] 2.1 新增 `packages/frontend/src/components/StatusMonitorCpuCoreModal.vue`，展示全部核心明细
-  - 依赖: 1.1
-
-### 3. 验证与同步
-
- [ ] 3.1 同步知识库说明与变更日志，并执行前端构建验证
-  - 依赖: 1.2, 2.1
-
---
-
-## 执行日志
-
-| 时间 | 任务 | 状态 | 备注 |
-|------|------|------|------|
-| 2026-04-19 05:20 | 创建方案包 | 已完成 | `create_package.py` 已生成 proposal/tasks 模板 |
-
---
-
-## 执行备注
-
-> 本次重点是解决多核机器下默认 CPU 卡高度失控的问题，不修改后端数据来源。
@@ -1032,10 +1032,6 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
  border-radius: inherit;
 }

-.usage-lane--cpu .usage-lane__fill {
-  background: linear-gradient(90deg, #7dd3fc, #2563eb);
-}
-
 .cpu-summary-panel {
  min-height: 0;
  border-radius: 16px;
@@ -1578,10 +1574,6 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
    grid-template-columns: 1fr;
  }

-  .cpu-core-grid {
-    grid-template-columns: 1fr;
-  }
-
  .network-table__header,
  .network-table__columns,
  .network-stat,