Files

T

yinjianm 41f237c15d 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.

2026-04-19 04:18:33 +08:00

4.6 KiB

Raw Permalink Blame History

变更提案: process-total-pill-display

元信息

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

1. 需求

背景

工作区右侧状态监控中的“进程管理”模块当前把“总数 / 运行中 / 休眠中”都放在独立摘要行里展示，其中“总数”作为单独卡片占用了一行摘要位。用户希望“总数”像现有 monitor-module__pill 一样以内联小胶囊显示，并挂在模块标题区域，减少纵向占用，让默认监控卡片更紧凑。

目标

将“总数”从 process-summary-strip 中移出。
在“进程管理”标题区右侧新增与现有监控胶囊一致的小显示。
保持“运行中 / 休眠中”摘要和高占用进程预览逻辑不变。

约束条件

时间约束: 本次仅做局部前端样式与模板调整
性能约束: 不新增数据请求，不改变状态监控刷新频率
兼容性约束: 继续复用现有 StatusMonitor 深色监控视觉体系
业务约束: 不修改进程统计来源和 process manager modal 行为

验收标准

“总数”不再以独立 process-summary-item 单独占一行显示。
“总数”在“进程管理”模块标题右侧以内联胶囊展示，视觉风格与现有 monitor-module__pill 一致。
“运行中 / 休眠中”摘要仍正常显示，进程预览列表不受影响。
前端构建通过。

2. 方案

技术方案

在 packages/frontend/src/components/StatusMonitor.vue 中拆分进程摘要数据：

新增一个仅供标题区展示的总数文案或值。
将 processSummaryItems 缩减为“运行中 / 休眠中”两项。
在 monitor-module--process 的标题区追加一个 monitor-module__pill 样式节点，用于显示总数。
视需要微调标题区布局与摘要区网格列数，保证小宽度下仍然稳定。

影响范围

涉及模块:
  - frontend: 调整 StatusMonitor.vue 的模板、计算属性和局部样式
预计变更文件: 1

风险评估

风险	等级	应对
标题区新增胶囊后在窄宽度下换行异常	低	复用现有 heading 布局并补充最小样式约束
摘要区列数变化导致视觉密度失衡	低	同步调整 `process-summary-strip` 的网格列定义

3. 技术设计（可选）

本次不涉及架构变更、API 设计或数据模型变更，N/A。

4. 核心场景

场景: 默认监控卡片中查看进程管理摘要

模块: frontend
条件: 用户已进入 /workspace，右侧状态监控卡片正常渲染进程统计。
行为: “总数”以内联胶囊形式显示在“进程管理”标题右侧，摘要区仅保留“运行中 / 休眠中”。
结果: 模块纵向占用更紧凑，摘要信息层级更清晰。

5. 技术决策

process-total-pill-display#D001: 将“总数”提升为标题区状态胶囊

日期: 2026-04-19
状态: 已采纳
背景: “总数”属于模块级总览指标，相比“运行中 / 休眠中”更适合作为标题区状态而不是并列摘要项。
选项分析:

选项	优点	缺点
A: 保持在摘要区	改动最小	继续占用摘要行，层级不突出
B: 提升到标题区胶囊	更紧凑，和现有监控胶囊风格一致	需要调整标题区模板与布局
决策: 选择方案 B
理由: 更符合该指标的总览属性，也与用户明确指定的位置一致。
影响: 影响 `StatusMonitor.vue` 内进程管理模块的标题区和摘要区布局。

6. 成果设计

设计方向

美学基调: 延续现有深色终端监控卡片风格，在不改变整体主题的前提下压缩信息层级。
记忆点: “进程总数”从块级摘要变成标题区状态胶囊，信息更像实时监控标签而不是表格式统计。
参考: 直接复用当前组件内已存在的 monitor-module__pill 视觉语言。

视觉要素

配色: 继续使用现有绿色轻发光胶囊配色。
字体: 沿用组件现有无衬线监控字体栈，不引入新字体。
布局: 标题区左侧保留标题文案，右侧增加总数胶囊；摘要区缩减为两列。
动效: N/A，本次不新增动画。
氛围: 保持控制台式深色监控观感，不做主题偏移。

技术约束

可访问性: 保持文本可读性，不用纯图标替代文字。
响应式: 标题区在窄容器下允许自然换行但不应破坏内容顺序。

4.6 KiB Raw Permalink Blame History