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

## 元信息
```yaml
类型: 优化
方案类型: implementation
优先级: P2
状态: 草案
创建: 2026-04-19
```

---

## 1. 需求

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

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

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

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

---

## 2. 方案

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

### 影响范围
```yaml
涉及模块:
  - 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 开合方式，不增加复杂动画。
- **氛围**: 保持运维控制台感，重点是压缩默认卡噪音而不是增加装饰。

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