# 变更提案: 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 实时更新反馈
- **氛围**: 维持当前深色科技感卡片和柔和描边，不改变网络模块的视觉语言

### 技术约束
- **可访问性**: 标题、图例、上下行标签仍需完整可读，不因压缩而丢失语义
- **响应式**: 不破坏现有容器查询体系，但网络模块不再依赖宽度阈值切换双列