# 执行计划 - 修复执行机资源图表显示太窄

> **关联问题文档**: `_问题处理_执行机资源图表显示太窄.md`
> **创建日期**: 2026-08-21
> **预计总工时**: 0.5 天
> **修复类型**: 前端 UI 布局修复（无后端改动）

---

## 一、执行概述

本计划将「执行机资源图表显示太窄」问题分 2 个 Phase 修复：

1. **Phase 1**：三个页面的资源图表布局改为全宽堆叠（0.5 天）
2. **Phase 2**：构建验证 + 回归 + 文档更新（与 Phase 1 同日完成）

---

## 二、任务分解

### Phase 1：布局修复

**目标**：将资源趋势图从「左右并排（span 12）窄图」改为「上下堆叠（span 24）全宽图」。

| # | 任务 | 关键文件 | 验收标准 |
|---|------|---------|---------|
| 1.1 | MonitorPanel.vue 资源区块布局改造 | `frontend/src/views/performance/MonitorPanel.vue` | CPU&内存 + 网络各占全宽（span 24）上下堆叠，高度 280px |
| 1.2 | BatchMonitor.vue 资源区块布局改造 | `frontend/src/views/performance/BatchMonitor.vue` | 同上 |
| 1.3 | ReportPanel.vue 资源区块布局改造 | `frontend/src/views/performance/ReportPanel.vue` | 同上 |

**验收方式**：浏览器打开监控页/批量监控页/报告页，展开资源区块，确认两图全宽堆叠。

---

### Phase 2：构建验证 + 回归 + 文档

**目标**：验证修改无编译错误、功能不回归，并同步文档。

| # | 任务 | 关键文件 | 验收标准 |
|---|------|---------|---------|
| 2.1 | 前端构建验证 | `frontend/` | `npm run build` 无错误 |
| 2.2 | 功能回归 | MonitorPanel / BatchMonitor / ReportPanel | 折叠展开正常、无数据隐藏正常、图表渲染正常 |
| 2.3 | 更新 HANDOFF 文档 | `HANDOFF_性能测试.md` | 记录本次修复 |

**验收方式**：构建通过，手动回归通过。

---

## 三、验收标准总览

| 验收项 | 对应 Phase |
|--------|-----------|
| 监控页资源图全宽堆叠 | Phase 1 |
| 批量监控页资源图全宽堆叠 | Phase 1 |
| 报告页资源图全宽堆叠 | Phase 1 |
| npm run build 通过 | Phase 2 |
| 功能无回归 | Phase 2 |

---

## 四、关键实现细节

### 4.1 MonitorPanel.vue 修改点

**现状**（第 171-184 行）：

```html
<!-- 资源趋势图 -->
<el-row :gutter="12">
  <el-col :span="12">
    <el-card shadow="never" class="chart-card">
      <template #header><span>CPU &amp; 内存趋势 CPU / Memory</span></template>
      <div ref="resourceChartRef" class="chart-sm" />
    </el-card>
  </el-col>
  <el-col :span="12">
    <el-card shadow="never" class="chart-card">
      <template #header><span>网络趋势 Network（发送 / 接收 KB/s）</span></template>
      <div ref="networkChartRef" class="chart-sm" />
    </el-card>
  </el-col>
</el-row>
```

**改为**：

```html
<!-- 资源趋势图（全宽堆叠） -->
<el-card shadow="never" class="chart-card">
  <template #header><span>CPU &amp; 内存趋势 CPU / Memory</span></template>
  <div ref="resourceChartRef" class="chart" />
</el-card>
<el-card shadow="never" class="chart-card">
  <template #header><span>网络趋势 Network（发送 / 接收 KB/s）</span></template>
  <div ref="networkChartRef" class="chart" />
</el-card>
```

> 说明：移除 `el-row/el-col` 包裹即可实现全宽；`chart-sm`（220px）改为 `chart`（280px），与主趋势图高度一致。

### 4.2 BatchMonitor.vue 修改点

同 MonitorPanel.vue（第 249-262 行），结构完全相同，同样改为全宽堆叠 + `chart` 类。

### 4.3 ReportPanel.vue 修改点

**现状**（第 322-335 行）：

```html
<el-row :gutter="12">
  <el-col :span="12">
    <el-card shadow="never" class="chart-card">
      <template #header><span>CPU &amp; 内存趋势 CPU / Memory</span></template>
      <div ref="resourceChartRef" class="chart" />
    </el-card>
  </el-col>
  <el-col :span="12">
    <el-card shadow="never" class="chart-card">
      <template #header><span>网络趋势 Network（发送 / 接收 KB/s）</span></template>
      <div ref="networkChartRef" class="chart" />
    </el-card>
  </el-col>
</el-row>
```

**改为**：移除 `el-row/el-col` 包裹，两个 `el-card` 直接堆叠（`.chart-card` 自带 margin-bottom 12px）。

---

## 五、测试计划

### 手动测试
1. 监控页：展开「执行机资源」折叠面板 → 两图全宽堆叠，高度 280px
2. 批量监控页：同上
3. 报告页：加载含 resourceSummary 的报告 → 资源区块两图全宽堆叠
4. 无 resource 数据的任务 → 资源区块隐藏，不报错
5. 折叠面板默认折叠 → 点击展开正常

### 前端构建
```bash
cd frontend && npm run build
```

---

## 六、风险评估

| 风险 | 影响 | 缓解措施 |
|------|------|---------|
| 修改影响图表初始化逻辑 | 图表无法渲染 | 仅改模板布局与样式类，不动 JS 初始化逻辑 |
| 各页面结构差异 | 遗漏某页 | 三个文件逐一对比确认，全部覆盖 |
| 高度增加页面变长 | 滚动增加 | 可接受，资源区块默认折叠不影响主视图 |

---

## 七、后续工作

- [ ] 实施完成后更新 CLAUDE.md 当前进度
- [ ] 更新 HANDOFF_性能测试.md 交接文档
- [ ] Git 提交（Conventional Commits）

---

## 八、附录

### 修改文件清单

| 文件 | 操作 | 修改点 |
|------|------|--------|
| `frontend/src/views/performance/MonitorPanel.vue` | 修改 | 资源趋势图 span12 并排 → 全宽堆叠；chart-sm → chart |
| `frontend/src/views/performance/BatchMonitor.vue` | 修改 | 同上 |
| `frontend/src/views/performance/ReportPanel.vue` | 修改 | 资源趋势图 span12 并排 → 全宽堆叠 |
| `Docs/PRD/性能测试/问题处理/_问题处理_执行机资源图表显示太窄.md` | 新建 | 问题处理文档（本文档前置） |

---

*本文档为执行机资源图表过窄问题的修复执行计划。*