feat(workspace): enhance status cards and terminal groups

add memory and disk monitoring cards with richer server metrics and localized labels in the workspace status panel group ssh terminal tabs by server with per-group add actions to make multi-terminal relationships clearer sync helloagents archive and module documentation for the completed workspace updates
2026-03-25 22:58:27 +08:00
parent d730d06c5e
commit 7af8812e26
23 changed files with 1644 additions and 839 deletions
@@ -0,0 +1,79 @@
+# 变更提案: server-status-memory-disk-cards
+
+## 元信息
+```yaml
+类型: 功能增强
+方案类型: implementation
+优先级: P1
+状态: 已完成
+状态说明: 已按参考图补齐服务器状态中的内存卡片和磁盘卡片，并接入真实监控数据
+创建: 2026-03-25
+完成: 2026-03-25
+```
+
+---
+
+## 1. 需求
+### 背景
+当前服务器状态面板原本只有 CPU、内存、Swap、磁盘进度条，以及 CPU / 网络速度折线图，无法承载参考图中的内存细分项、磁盘设备信息和读写速率展示。
+
+### 目标
+- 新增参考图风格的内存监控卡片，展示总量、已用、缓存、空闲和环形占比。
+- 新增参考图风格的磁盘监控卡片，展示设备名、文件系统类型、读写速率以及挂载点/大小/可用/已用率。
+- 保留现有 CPU / 网络曲线和基础状态信息。
+
+### 约束条件
+```yaml
+范围约束:
+  - packages/backend/src/services/status-monitor.service.ts
+  - packages/frontend/src/components/StatusMonitor.vue
+  - packages/frontend/src/types/server.types.ts
+  - packages/frontend/src/locales/{zh-CN,en-US,ja-JP}.json
+兼容约束:
+  - 不新增第三方依赖
+  - 保留现有 StatusCharts.vue 的 CPU / 网络曲线
+数据约束:
+  - 新增 memFree、memCached
+  - 新增 diskAvailable、diskMountPoint、diskFsType、diskDevice、diskReadRate、diskWriteRate
+```
+
+### 验收标准
+- [x] 状态面板出现参考图风格的内存卡片并展示总量、已用、缓存、空闲
+- [x] 状态面板出现参考图风格的磁盘卡片并展示设备、类型、读写速率、挂载点、大小、可用、已用率
+- [x] 新字段来自实时状态采集链路
+- [x] 前端构建通过
+- [x] 后端 TypeScript 构建通过
+
+---
+
+## 2. 方案
+
+### 技术方案
+- 后端重构 `StatusMonitorService`，在现有 SSH 轮询链路中补齐 `free`、`df`、`findmnt` 与 `/proc/diskstats` 的解析。
+- 前端在 `StatusMonitor.vue` 中以卡片替代简单内存/磁盘进度行，内存使用 CSS 环形图，磁盘使用竖向容量条与明细表格。
+- 新增多语言键值用于内存/磁盘卡片标题、统计标签和表头。
+
+### 影响范围
+```yaml
+涉及模块:
+  - frontend
+  - backend
+变更文件:
+  - packages/backend/src/services/status-monitor.service.ts
+  - packages/frontend/src/components/StatusMonitor.vue
+  - packages/frontend/src/types/server.types.ts
+  - packages/frontend/src/locales/zh-CN.json
+  - packages/frontend/src/locales/en-US.json
+  - packages/frontend/src/locales/ja-JP.json
+```
+
+### 风险评估
+| 风险 | 等级 | 应对 |
+|------|------|------|
+| Linux 不同发行版的 `free` / `df` / `findmnt` 输出格式差异 | 中 | 采用多层回退解析，失败字段返回 `undefined` |
+| 根挂载点对应设备可能是分区或 mapper 设备 | 中 | 优先规整到块设备名，无法精确匹配时 I/O 速率回退为 0 |
+| 卡片信息较多可能挤压原状态布局 | 低 | 采用纵向卡片堆叠并保留现有图表区域 |
+
+### 技术决策
+- `server-status-memory-disk-cards#D001`: 采用卡片化监控视图，而不是继续在折线图区域追加内存/磁盘折线图。
+- `server-status-memory-disk-cards#D002`: 磁盘读写速率基于 `/proc/diskstats` 计算，不引入 `iostat` 等额外依赖。
@@ -0,0 +1,50 @@
+# 任务清单: server-status-memory-disk-cards
+
+```yaml
+@feature: server-status-memory-disk-cards
+@created: 2026-03-25
+@status: completed
+@mode: R3
+```
+
+## 进度概览
+
+| 完成 | 失败 | 跳过 | 总数 |
+|------|------|------|------|
+| 6 | 0 | 0 | 6 |
+
+---
+
+## 任务列表
+
+### 1. 方案与范围确认
+- [√] 1.1 创建服务器状态卡片增强方案包，并锁定为内存卡片、磁盘卡片与实时字段扩展 | depends_on: []
+
+### 2. 后端状态采集扩展
+- [√] 2.1 在 `status-monitor.service.ts` 中补齐内存细分字段 `memFree` / `memCached` | depends_on: [1.1]
+- [√] 2.2 在 `status-monitor.service.ts` 中补齐磁盘字段 `diskAvailable` / `diskMountPoint` / `diskFsType` / `diskDevice` / `diskReadRate` / `diskWriteRate` | depends_on: [2.1]
+
+### 3. 前端状态模型与界面实现
+- [√] 3.1 扩展前端 `ServerStatus` 类型与状态监控数据接收链路 | depends_on: [2.2]
+- [√] 3.2 在 `StatusMonitor.vue` 中实现参考图风格的内存卡片与磁盘卡片，并保留现有 CPU / 网络图表 | depends_on: [3.1]
+- [√] 3.3 补齐多语言文案并处理缺省值显示 | depends_on: [3.2]
+
+### 4. 验证与知识库同步
+- [√] 4.1 运行前后端构建验证，并同步 `.helloagents` 变更记录 | depends_on: [3.3]
+
+---
+
+## 执行日志
+
+| 时间 | 任务 | 状态 | 备注 |
+|------|------|------|------|
+| 2026-03-25 22:00 | 1.1 | 完成 | 创建 implementation 方案包，确定采用参考图卡片化改造 |
+| 2026-03-25 22:18 | 2.1 | 完成 | 后端补齐内存缓存/空闲字段并统一状态采集结构 |
+| 2026-03-25 22:24 | 2.2 | 完成 | 后端补齐磁盘可用量、挂载点、类型、设备名与 I/O 速率 |
+| 2026-03-25 22:29 | 3.1 | 完成 | 前端 `ServerStatus` 类型补齐新增字段 |
+| 2026-03-25 22:33 | 3.2 | 完成 | `StatusMonitor.vue` 改为内存/磁盘卡片布局并保留现有 CPU/网络图表 |
+| 2026-03-25 22:37 | 3.3 / 4.1 | 完成 | 补齐中英日文案，前端 `npm run build` 与后端 `npm run build` 通过 |
+
+## 执行备注
+- 参考图中的内存/磁盘样式已落到状态监控面板主区域。
+- 磁盘元数据存在远端系统差异时，前端会以 `N/A` 或 0 速率优雅降级显示。