# PRD 需求文档 - 执行中心展开结果优化

> **文档类型**: PRD 需求文档
> **创建日期**: 2026-07-14
> **作者**: czj
> **优先级**: P0
> **状态**: 待开发

---

## 一、需求背景

### 1.1 问题描述

在执行中心页面，用户点击执行记录的展开箭头时，下拉框内容不会显示执行结果，需要点击执行名称右侧的【查看结果】按钮后才会显示数据。

### 1.2 影响范围

- **页面**: `frontend/src/views/Execution.vue`
- **组件**: el-table 展开行
- **用户体验**: 操作不一致，用户困惑

### 1.3 预期行为

用户点击展开箭头时，应该自动加载并显示该执行记录的测试结果，无需额外点击【查看结果】按钮。

---

## 二、现状分析

### 2.1 当前代码逻辑

```vue
<!-- Execution.vue 第 109-158 行 -->
<el-table :data="executions" stripe style="width: 100%" v-loading="loading">
  <el-table-column type="expand">
    <template #default="{ row }">
      <div class="expanded-results" v-loading="resultsLoading[row.id]">
        <el-table :data="rowResults[row.id] || []" ...>
          <!-- 结果内容 -->
        </el-table>
      </div>
    </template>
  </el-table-column>
  ...
  <el-table-column label="操作" width="150" fixed="right">
    <template #default="{ row }">
      <el-button @click="toggleExpand(row)">查看结果</el-button>
    </template>
  </el-table-column>
</el-table>
```

### 2.2 问题根因

| 问题点 | 说明 |
|--------|------|
| 展开箭头无事件绑定 | el-table 的 `expand-change` 事件未监听 |
| 数据加载在按钮点击 | `toggleExpand` 只绑定在【查看结果】按钮上 |
| 展开状态无数据源 | `rowResults[row.id]` 在展开时为空 |

### 2.3 相关变量

| 变量名 | 类型 | 用途 |
|--------|------|------|
| `rowResults` | `Record<string, any[]>` | 存储每个执行 ID 的结果列表 |
| `resultsLoading` | `Record<string, boolean>` | 存储每个执行 ID 的加载状态 |
| `toggleExpand` | 函数 | 加载结果数据并填充 rowResults |

---

## 三、解决方案

### 3.1 技术方案

**方案**: 监听 el-table 的 `expand-change` 事件，在展开时自动调用数据加载逻辑。

### 3.2 改动点

| 改动项 | 改动内容 |
|--------|----------|
| el-table | 添加 `@expand-change` 事件监听 |
| 新增方法 | `handleExpandChange(row, expandedRows)` 处理展开事件 |
| 优化体验 | 展开时显示 loading 状态 |

### 3.3 代码变更

```vue
<!-- 改动前 -->
<el-table :data="executions" stripe style="width: 100%" v-loading="loading">
  <el-table-column type="expand">
    ...
  </el-table-column>
</el-table>

<!-- 改动后 -->
<el-table
  :data="executions"
  stripe
  style="width: 100%"
  v-loading="loading"
  @expand-change="handleExpandChange"
>
  <el-table-column type="expand">
    ...
  </el-table-column>
</el-table>
```

```typescript
// 新增方法
const handleExpandChange = async (row: any, expandedRows: any[]) => {
  const isExpanded = expandedRows.some((r: any) => r.id === row.id)

  if (isExpanded && !rowResults.value[row.id]) {
    // 展开且数据未加载时，加载结果
    await loadExecutionResults(row.id)
  }
}

// 抽取加载逻辑为独立方法
const loadExecutionResults = async (executionId: string) => {
  resultsLoading.value[executionId] = true
  try {
    const response = await executionApi.getResults(executionId)
    rowResults.value[executionId] = response.items
  } catch (error: any) {
    ElMessage.error('加载结果失败: ' + error.message)
    rowResults.value[executionId] = []
  } finally {
    resultsLoading.value[executionId] = false
  }
}
```

### 3.4 兼容性考虑

- 【查看结果】按钮保留，但改为仅控制展开/收起状态
- 数据加载统一由 `expand-change` 事件触发
- 已加载的数据保留在 `rowResults` 中，避免重复请求

---

## 四、验收标准

| 测试项 | 预期结果 |
|--------|----------|
| 点击展开箭头 | 自动加载并显示执行结果 |
| 点击【查看结果】按钮 | 展开/收起行，数据已存在则不重复加载 |
| 多次展开/收起 | 数据只加载一次 |
| 加载中状态 | 显示 loading 动画 |
| 加载失败 | 显示错误提示，展开区域显示"暂无执行结果" |

---

## 五、相关文档

- `frontend/src/views/Execution.vue` - 执行中心页面
- `frontend/src/api/executions.ts` - 执行 API 接口
- `backend/app/routers/executions.py` - 后端执行路由
- `backend/app/services/execution_service.py` - 执行服务层

---

*本文档由 Claude Code 生成，遵循项目 PRD 文档规范。*
