From aad6b84eb9df27f769d314412d32c150258b2dba Mon Sep 17 00:00:00 2001 From: yinjianm Date: Sun, 19 Apr 2026 05:33:33 +0800 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E4=BC=98=E5=8C=96=E7=8A=B6?= =?UTF-8?q?=E6=80=81=E7=9B=91=E6=8E=A7=20CPU=20=E6=A6=82=E8=A7=88=E5=B1=95?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将默认 CPU 卡从逐核心条卡改为总 CPU 历史曲线加紧凑摘要， 并通过核心详情弹层查看全部核心，避免多核机器下侧栏过高。 --- .helloagents/CHANGELOG.md | 3 ++ .../.status.json | 13 +++++ .../proposal.md | 0 .../tasks.md | 52 +++++++++++++++++++ .helloagents/archive/_index.md | 1 + .helloagents/modules/frontend.md | 4 +- .../tasks.md | 48 ----------------- .../frontend/src/components/StatusMonitor.vue | 8 --- 8 files changed, 71 insertions(+), 58 deletions(-) create mode 100644 .helloagents/archive/2026-04/202604190520_status-monitor-cpu-summary-modal/.status.json rename .helloagents/{plan => archive/2026-04}/202604190520_status-monitor-cpu-summary-modal/proposal.md (100%) create mode 100644 .helloagents/archive/2026-04/202604190520_status-monitor-cpu-summary-modal/tasks.md delete mode 100644 .helloagents/plan/202604190520_status-monitor-cpu-summary-modal/tasks.md diff --git a/.helloagents/CHANGELOG.md b/.helloagents/CHANGELOG.md index 29b9c2f..fb52feb 100644 --- a/.helloagents/CHANGELOG.md +++ b/.helloagents/CHANGELOG.md @@ -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 diff --git a/.helloagents/archive/2026-04/202604190520_status-monitor-cpu-summary-modal/.status.json b/.helloagents/archive/2026-04/202604190520_status-monitor-cpu-summary-modal/.status.json new file mode 100644 index 0000000..9c9514a --- /dev/null +++ b/.helloagents/archive/2026-04/202604190520_status-monitor-cpu-summary-modal/.status.json @@ -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" +} diff --git a/.helloagents/plan/202604190520_status-monitor-cpu-summary-modal/proposal.md b/.helloagents/archive/2026-04/202604190520_status-monitor-cpu-summary-modal/proposal.md similarity index 100% rename from .helloagents/plan/202604190520_status-monitor-cpu-summary-modal/proposal.md rename to .helloagents/archive/2026-04/202604190520_status-monitor-cpu-summary-modal/proposal.md diff --git a/.helloagents/archive/2026-04/202604190520_status-monitor-cpu-summary-modal/tasks.md b/.helloagents/archive/2026-04/202604190520_status-monitor-cpu-summary-modal/tasks.md new file mode 100644 index 0000000..4172aa0 --- /dev/null +++ b/.helloagents/archive/2026-04/202604190520_status-monitor-cpu-summary-modal/tasks.md @@ -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 卡高度失控的问题，不修改后端数据来源。 diff --git a/.helloagents/archive/_index.md b/.helloagents/archive/_index.md index 1c84cd1..b9491d7 100644 --- a/.helloagents/archive/_index.md +++ b/.helloagents/archive/_index.md @@ -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 | ✅完成 | diff --git a/.helloagents/modules/frontend.md b/.helloagents/modules/frontend.md index b1a867c..03342c7 100644 --- a/.helloagents/modules/frontend.md +++ b/.helloagents/modules/frontend.md @@ -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 的快捷指令视图中浏览分组或扁平命令列表，且当前未启用搜索过滤。 diff --git a/.helloagents/plan/202604190520_status-monitor-cpu-summary-modal/tasks.md b/.helloagents/plan/202604190520_status-monitor-cpu-summary-modal/tasks.md deleted file mode 100644 index 1f5e649..0000000 --- a/.helloagents/plan/202604190520_status-monitor-cpu-summary-modal/tasks.md +++ /dev/null @@ -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 卡高度失控的问题，不修改后端数据来源。 diff --git a/packages/frontend/src/components/StatusMonitor.vue b/packages/frontend/src/components/StatusMonitor.vue index e32580a..8bc8947 100644 --- a/packages/frontend/src/components/StatusMonitor.vue +++ b/packages/frontend/src/components/StatusMonitor.vue @@ -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,