# PRD 需求文档 - 步骤详情截图默认展开

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

---

## 一、需求背景

### 1.1 问题描述

执行中心查看步骤详情时，每个步骤的截图需要手动点击"截图"按钮才能展开显示。用户查看步骤详情的主要目的就是看截图和错误信息，每次都要额外点击一次才能看到截图，操作不够流畅。

**当前交互流程**：
1. 点击"查看步骤" → 弹出步骤详情弹窗
2. 看到步骤列表，截图按钮可见
3. **再点击"截图"按钮** → 截图才展开显示
4. 点击"截图"按钮 → 截图收起

### 1.2 目标

步骤详情弹窗打开时，**有截图的步骤默认展开截图预览**，省去手动点击展开的操作。截图按钮保留，用于收起/展开切换。

**期望交互流程**：
1. 点击"查看步骤" → 弹出步骤详情弹窗
2. 有截图的步骤**自动展示截图预览**，无需额外点击
3. 点击"截图"按钮 → 收起截图；再点 → 重新展开

---

## 二、功能需求

### 2.1 截图默认展开

**改动位置**：`frontend/src/components/StepDetailPanel.vue`

**当前逻辑**（第 161 行）：

```typescript
const viewingScreenshot = ref<string | null>(null)
```

`viewingScreenshot` 初始为 `null`，所有截图默认不显示。点击"截图"按钮时切换为对应截图路径才显示。

**改为**：初始化时，将所有有截图的步骤的截图路径收集起来，使截图默认展开。

### 2.2 截图按钮行为

截图按钮保留，功能从"展开截图"变为"收起/展开切换"：
- 截图已展开时点击 → 收起
- 截图已收起时点击 → 展开

当前 `viewScreenshot` 方法已支持切换逻辑（第 227-233 行），无需修改。

### 2.3 日志和错误详情

日志和错误详情**保持当前行为**（默认收起，手动点击展开），因为：
- 截图是步骤执行结果最直观的展示，用户最常查看
- 日志和错误信息文本较长，默认展开会导致页面过长
- 错误详情只在失败步骤出现，按需查看更合理

---

## 三、影响分析

| 层级 | 文件 | 改动 | 影响 |
|------|------|------|------|
| 前端 | `StepDetailPanel.vue` | `viewingScreenshot` 初始值计算 | 截图默认展开 |
| 后端 | — | 无 | — |
| 数据库 | — | 无 | — |

### 边界场景

| 场景 | 处理方式 |
|------|----------|
| 步骤无截图 | 不显示截图区域，与当前行为一致 |
| 步骤有截图 | 默认展开截图预览 |
| 多个步骤都有截图 | 所有截图都默认展开 |
| 截图加载失败 | 显示"截图加载失败"占位，与当前行为一致 |
| 点击截图按钮收起后再展开 | 正常切换，与当前行为一致 |

---

## 四、验收标准

| 测试项 | 预期结果 |
|--------|----------|
| 打开步骤详情弹窗，有截图的步骤 | 截图预览默认展开显示 |
| 打开步骤详情弹窗，无截图的步骤 | 不显示截图区域，无变化 |
| 点击"截图"按钮（截图已展开） | 截图收起 |
| 再次点击"截图"按钮（截图已收起） | 截图重新展开 |
| 日志按钮行为 | 默认收起，点击展开，无变化 |
| 错误详情按钮行为 | 默认收起，点击展开，无变化 |
| 多步骤都有截图 | 所有截图默认展开 |

---

## 五、相关文档

- `frontend/src/components/StepDetailPanel.vue` — 步骤详情组件（改动点）
- `frontend/src/views/Execution.vue` — 执行中心页面（调用方）

---

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