feat(frontend): 精简状态监控标题冗余
移除 CPU 和网络模块标题区重复的主标题，保留 eyebrow 标签， 减少默认概览卡片的视觉冗余，保持状态监控布局更简洁。
This commit is contained in:
yinjianm
@@ -0,0 +1,121 @@
|
||||
# 变更提案: 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 开合方式，不增加复杂动画。
|
||||
- **氛围**: 保持运维控制台感，重点是压缩默认卡噪音而不是增加装饰。
|
||||
|
||||
### 技术约束
|
||||
- **可访问性**: 详情入口需要明确文案，不用纯图标表达。
|
||||
- **响应式**: 默认卡在窄栏宽度下仍要保持单屏可读，详情弹层承担全量信息。
|
||||
@@ -0,0 +1,48 @@
|
||||
# 任务清单: 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 卡高度失控的问题，不修改后端数据来源。
|
||||
Reference in New Issue
Block a user