nexus-terminal/.helloagents/plan/202604190520_status-monitor-cpu-summary-modal/proposal.md at d15e9d01f19ed8c9ff6deff8a3f1c3fa3d39705a

Files

T

yinjianm d15e9d01f1 feat(frontend): 精简状态监控标题冗余

移除 CPU 和网络模块标题区重复的主标题，保留 eyebrow 标签，
减少默认概览卡片的视觉冗余，保持状态监控布局更简洁。

2026-04-19 05:22:16 +08:00

5.0 KiB

Raw Blame History

元信息

类型: 优化
方案类型: implementation
优先级: P2
状态: 草案
创建: 2026-04-19

1. 需求

背景

工作区右侧状态监控默认 CPU 卡目前在总 CPU 历史图下直接渲染每个核心的条卡。该方案在 1 核机器上信息重复，在多核机器上又会迅速拉高卡片高度，不适合右侧窄栏中的默认概览区。

目标

将默认 CPU 卡改为“总图 + 紧凑摘要”模式。
在默认 CPU 卡中保留总 CPU 历史图，但移除逐核心条卡列表。
提供一个单独的 CPU 核心详情弹层，在需要时展示全部核心明细。

约束条件

时间约束: 本次仅调整前端状态监控相关组件
性能约束: 不新增后端接口，复用现有 cpuCores 与 cpuCorePercents 数据
兼容性约束: 保持 StatusMonitor 深色监控视觉体系与现有布局宽度约束
业务约束: 不影响现有进程管理 modal、内存/磁盘/网络默认概览逻辑

验收标准

默认 CPU 卡不再展示完整逐核心条卡列表。
默认 CPU 卡展示总览摘要，至少包含核心数、最忙核心和平均占用。
用户可在 CPU 卡中打开单独的核心详情弹层查看全部核心明细。
多核场景下默认 CPU 卡高度不再随核心数线性增长。
前端构建通过。

2. 方案

技术方案

在 StatusMonitor.vue 中将 CPU 默认卡从“总图 + per-core 列表”改为“总图 + 摘要胶囊/摘要行 + 查看核心入口”。
新增 StatusMonitorCpuCoreModal.vue 承载 per-core 详情，复用现有 cpuCorePercents 数据计算排序和展示。
默认摘要从当前 cpuCoreItems 派生，提取核心数、最忙核心、平均占用等概览信息。
详情弹层展示全部核心明细，避免默认右栏承载全部 per-core 列表。

影响范围

涉及模块:
  - frontend: 调整 StatusMonitor.vue 的 CPU 模块结构与交互
  - frontend: 新增 CPU 核心详情弹层组件
预计变更文件: 4

风险评估

风险	等级	应对
新增弹层后与现有右栏交互节奏不一致	低	复用现有 modal 视觉与关闭行为
摘要算法在 1 核或缺失数据时显示不自然	低	对 0/1 核场景做专门降级逻辑

3. 技术设计（可选）

本次不涉及后端接口和数据模型变更，N/A。

4. 核心场景

场景: 默认 CPU 卡仅展示概览

模块: frontend
条件: 用户进入 /workspace，右侧状态监控正常收到 CPU 数据。
行为: 默认 CPU 卡只显示总 CPU 历史图和紧凑摘要，不直接展示全部核心条卡。
结果: CPU 卡高度稳定，1 核与多核场景都保持合理。

场景: 查看全部 CPU 核心明细

模块: frontend
条件: 用户点击 CPU 卡中的详情入口。
行为: 打开单独的 CPU 核心详情弹层，展示所有核心的实时占用与排序。
结果: 用户既能保持默认概览简洁，也能在需要时查看全量 per-core 信息。

5. 技术决策

status-monitor-cpu-summary-modal#D001: 默认 CPU 卡采用概览 + 弹层明细的分层展示

日期: 2026-04-19
状态: 已采纳
背景: per-core 条卡直接铺在默认右栏中，不适合多核机器，也会在单核机器上造成信息重复。
选项分析:

选项	优点	缺点
A: 保留默认 per-core 条卡	开发量最小	多核高度失控，1 核信息重复
B: 默认概览 + 弹层明细	右栏稳定、层级清晰	需要新增弹层组件
C: 默认仅总 CPU，不提供 per-core	最简洁	用户失去查看 per-core 的快捷入口
决策: 选择方案 B
理由: 兼顾默认概览密度和全量数据可访问性，是多核场景下最稳的结构。
影响: 影响 `StatusMonitor.vue` 的 CPU 模块和新增 CPU 核心详情弹层。

6. 成果设计

设计方向

美学基调: 延续现有深色监控面板风格，减少默认卡中的重复噪音，让 CPU 信息更像运维概览而不是完整诊断页。
记忆点: 默认 CPU 卡从“很多核心条卡”收敛为“总览摘要 + 单独入口”。
参考: 复用当前状态监控卡片、胶囊和 modal 的现有视觉语言。

视觉要素

配色: 沿用当前 CPU 蓝色曲线和深色面板背景，不额外引入新主色。
字体: 沿用现有监控字体栈和数值样式。
布局: 顶部总 CPU 图保持不变，下方改为摘要信息与“查看核心”入口。
动效: 弹层沿用现有 modal 开合方式，不增加复杂动画。
氛围: 保持运维控制台感，重点是压缩默认卡噪音而不是增加装饰。

技术约束

可访问性: 详情入口需要明确文案，不用纯图标表达。
响应式: 默认卡在窄栏宽度下仍要保持单屏可读，详情弹层承担全量信息。

5.0 KiB Raw Blame History

变更提案: status-monitor-cpu-summary-modal

元信息