feat(frontend): revamp monitor cards and process table
Add a dedicated CPU history chart with per-core live indicators, switch the network block to a vertical stack with a tighter height cap, and lift process counts into header pills. Also make the process list columns sortable, add spacing around the close button, and extend backend CPU sampling to include per-core usage data.
This commit is contained in:
yinjianm
+1
@@ -0,0 +1 @@
|
||||
{"status":"completed","completed":4,"failed":0,"pending":0,"total":4,"done":4,"percent":100,"current":"网络模块上下堆叠与 350px 高度约束已完成，待归档方案包","updated_at":"2026-04-19 04:04:00"}
|
||||
+109
@@ -0,0 +1,109 @@
|
||||
# 变更提案: status-monitor-network-vertical-stack
|
||||
|
||||
## 元信息
|
||||
```yaml
|
||||
类型: 修复增强
|
||||
方案类型: implementation
|
||||
优先级: P2
|
||||
状态: 已完成
|
||||
状态说明: 网络模块已固定为上下堆叠，并通过样式压缩将总高度限制在 350px 以内
|
||||
创建: 2026-04-19
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 1. 需求
|
||||
|
||||
### 背景
|
||||
当前状态监控中的网络模块在大多数宽度下采用“左侧网络历史图 + 右侧网络统计表”的横向布局。用户明确要求这两块不再左右并排，而是始终改为上下排列；同时新增硬性约束，整个网络模块的总高度不能超过 `350px`，以免在右侧状态监控栏里挤占过多纵向空间。
|
||||
|
||||
### 目标
|
||||
- 让网络历史图和网络统计表在所有宽度下都改为上下堆叠。
|
||||
- 将网络模块总高度控制在 `350px` 以内。
|
||||
- 保持现有图表、接口名、上下行统计内容与主题风格不变，只调整布局和密度。
|
||||
|
||||
### 约束条件
|
||||
```yaml
|
||||
范围约束: 只调整 packages/frontend/src/components/StatusMonitor.vue 与 StatusMonitorNetworkHistoryChart.vue 及相关知识库记录
|
||||
布局约束: 不再保留大宽度横向并排分栏，网络模块始终单列堆叠
|
||||
高度约束: 网络模块整体高度必须 <= 350px
|
||||
验证约束: 当前项目存在登录态依赖，不使用 Playwright 做页面验收，改为构建与代码级布局审查
|
||||
兼容约束: 保持现有网络接口名、上下行图例、统计字段与容器查询响应式体系
|
||||
```
|
||||
|
||||
### 验收标准
|
||||
- [x] 网络历史图与网络统计表在所有宽度下都按上下顺序展示
|
||||
- [x] 网络模块总高度被显式限制在 `350px` 以内
|
||||
- [x] 图表 canvas 和统计表间距同步压缩，避免堆叠后出现纵向溢出
|
||||
- [x] 前端构建通过，frontend 模块文档与归档记录同步更新
|
||||
|
||||
---
|
||||
|
||||
## 2. 方案
|
||||
|
||||
### 技术方案
|
||||
将 `StatusMonitor.vue` 中网络模块的 `.module-split--network` 从双列 grid 改为单列 grid，并为 `.monitor-module--network` 增加 `max-height: 350px` 与更紧凑的 gap。同步压缩网络图和网络表的垂直占用：降低 `StatusMonitorNetworkHistoryChart.vue` 中 canvas 的固定高度，收紧 header 与 legend 间距；在 `StatusMonitor.vue` 中缩小 `network-table`、`network-stat-stack` 与 `network-stat` 的 padding/gap，让堆叠后的两块内容能稳定落在总高度约束内。
|
||||
|
||||
### 影响范围
|
||||
```yaml
|
||||
涉及模块:
|
||||
- frontend: StatusMonitor.vue
|
||||
- frontend: StatusMonitorNetworkHistoryChart.vue
|
||||
- frontend: .helloagents/modules/frontend.md
|
||||
预计变更文件: 5-7
|
||||
```
|
||||
|
||||
### 风险评估
|
||||
| 风险 | 等级 | 应对 |
|
||||
|------|------|------|
|
||||
| 图表高度压缩过多后可读性下降 | 中 | 只收缩到能满足 350px 的最小必要值，保留标题、图例和折线区的基本层级 |
|
||||
| 单列堆叠后网络表在窄栏里仍可能被内部 padding 撑高 | 低 | 同步压缩 `network-table` 和 `network-stat` 的 gap/padding，而不是只改父容器方向 |
|
||||
| 仅用代码级验收可能遗漏运行态细节 | 低 | 在方案包和最终结果中明确标注本次未走 Playwright，建议在登录态环境做人工目视补验 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 技术设计（可选）
|
||||
|
||||
> N/A，本次不涉及架构、API 或数据模型变更。
|
||||
|
||||
---
|
||||
|
||||
## 4. 核心场景
|
||||
|
||||
### 场景: 网络模块固定上下堆叠
|
||||
**模块**: frontend
|
||||
**条件**: 用户在 `/workspace` 右侧状态监控面板查看网络模块
|
||||
**行为**: 网络历史图先显示在上方，网络统计表显示在下方，不再根据宽度切回左右双列
|
||||
**结果**: 网络模块信息阅读顺序变为自上而下，符合用户期望
|
||||
|
||||
### 场景: 网络模块高度受控
|
||||
**模块**: frontend
|
||||
**条件**: 状态监控右侧栏按常规窄栏宽度渲染网络模块
|
||||
**行为**: 图表高度、卡片间距和统计项内边距同时收紧，使整个网络模块保持在 350px 以内
|
||||
**结果**: 网络模块不会因改成竖排而明显拉长整列布局
|
||||
|
||||
---
|
||||
|
||||
## 5. 技术决策
|
||||
|
||||
> 本方案不涉及新的长期技术决策；沿用现有状态监控组件拆分与容器查询体系。
|
||||
|
||||
---
|
||||
|
||||
## 6. 成果设计
|
||||
|
||||
### 设计方向
|
||||
- **美学基调**: 保持现有深色服务器监控面板风格，但把网络模块收紧为更紧凑的“上图下表”信息块，强调纵向节奏感
|
||||
- **记忆点**: 网络模块被压成一张纵向卡片，上方是折线历史，下方是双行上下行统计，整体更像窄屏监控屏的小组件
|
||||
- **参考**: 当前 `StatusMonitor.vue` 右侧监控栏和现有网络模块视觉体系
|
||||
|
||||
### 视觉要素
|
||||
- **配色**: 保留现有蓝色下行、绿色上行以及深色玻璃卡片背景
|
||||
- **字体**: 沿用当前模块内的 monospace 数值与默认界面字重层级
|
||||
- **布局**: 父容器改为单列堆叠，图表区高度收紧，表格区用更小 gap 和 padding 承接
|
||||
- **动效**: 不新增动画，保留现有 Chart.js 实时更新反馈
|
||||
- **氛围**: 维持当前深色科技感卡片和柔和描边，不改变网络模块的视觉语言
|
||||
|
||||
### 技术约束
|
||||
- **可访问性**: 标题、图例、上下行标签仍需完整可读，不因压缩而丢失语义
|
||||
- **响应式**: 不破坏现有容器查询体系，但网络模块不再依赖宽度阈值切换双列
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
# 任务清单: status-monitor-network-vertical-stack
|
||||
|
||||
> **@status:** completed | 2026-04-19 04:03
|
||||
|
||||
```yaml
|
||||
@feature: status-monitor-network-vertical-stack
|
||||
@created: 2026-04-19
|
||||
@status: completed
|
||||
@mode: R2
|
||||
```
|
||||
|
||||
## 进度概览
|
||||
|
||||
| 完成 | 失败 | 跳过 | 总数 |
|
||||
|------|------|------|------|
|
||||
| 4 | 0 | 0 | 4 |
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### 1. 方案与约束确认
|
||||
|
||||
- [√] 1.1 创建网络模块上下堆叠方案包并锁定“总高度 <= 350px”约束 | depends_on: []
|
||||
|
||||
### 2. 网络模块布局调整
|
||||
|
||||
- [√] 2.1 将网络模块父容器改为固定上下堆叠，不再保留左右双列布局 | depends_on: [1.1]
|
||||
- [√] 2.2 压缩图表和网络表内部高度占用，使网络模块总高度不超过 350px | depends_on: [2.1]
|
||||
|
||||
### 3. 验证与同步
|
||||
|
||||
- [√] 3.1 运行前端构建并同步 frontend 模块文档、CHANGELOG 与归档记录 | depends_on: [2.2]
|
||||
|
||||
---
|
||||
|
||||
## 执行日志
|
||||
|
||||
| 时间 | 任务 | 状态 | 备注 |
|
||||
|------|------|------|------|
|
||||
| 2026-04-19 03:58 | 1.1 | 完成 | 创建 implementation 方案包，范围锁定为网络模块上下堆叠与 350px 高度约束 |
|
||||
| 2026-04-19 04:02 | 2.1 | 完成 | `.module-split--network` 改为固定单列堆叠，不再按宽度切回双列 |
|
||||
| 2026-04-19 04:03 | 2.2 | 完成 | 为网络模块增加 `max-height: 350px`，并同步压缩图表 canvas 与网络表间距 |
|
||||
| 2026-04-19 04:04 | 3.1 | 完成 | `npm run build --workspace @nexus-terminal/frontend` 通过；本次按用户要求未使用 Playwright |
|
||||
|
||||
---
|
||||
|
||||
## 执行备注
|
||||
|
||||
> 用户已确认网络图表和统计表在所有宽度下都要改为上下堆叠，并新增“网络模块总高度不超过 350px”的硬性限制。当前项目存在登录态依赖，本次不使用 Playwright 作为验收手段，运行态效果建议在有登录态的环境中人工补验一次。
|
||||
Reference in New Issue
Block a user