名称: dyad:pr-screencast 描述: 使用截图记录此Pull Request关键功能的视觉演示，并作为新评论添加到PR中。

PR屏幕录制

使用截图记录此Pull Request关键功能的视觉演示，并作为新评论添加到PR中。

重要提示: 此技能应尽可能自主完成所有步骤。对于文件写入、bash命令或GitHub操作的权限提示，应正常接受——不要视为阻碍。

参数

$ARGUMENTS: (可选) PR编号或URL。如果未提供，将使用与当前分支关联的PR。

任务跟踪

必须使用TodoWrite工具跟踪进度。 开始时，为以下每个步骤创建任务。开始时将任务标记为in_progress，完成时标记为completed。这确保完成所有步骤。

说明

确定PR:

如果提供了$ARGUMENTS，将其用作PR编号或URL。

否则，获取当前分支的PR：
```
gh pr view --json number,title,body,files,headRefOid -q '.number'
```
如果当前分支没有PR，报告错误并停止。
分析PR是否用户面向:

获取PR详细信息，包括更改的文件：
```
gh pr view <PR_NUMBER> --json title,body,files,labels
```
如果PR非用户面向，则跳过录制。 PR非用户面向如果：
- 仅更改文档文件(*.md, *.txt, *.rst)
- 仅更改配置文件(*.json, *.yaml, *.yml, *.toml, *.config.*)
- 仅更改测试文件(*test*, *spec*, *tests*)
- 仅更改CI/CD文件(.github/*, .circleci/*等)
- 仅更改类型定义(*.d.ts)
- 有标签如"refactor"、“chore”、“docs”、“ci”、“internal”、“dependencies”
- 标题/正文表明是重构、内部变更或非用户面向工作
如果PR非用户面向，发布简短评论解释跳过屏幕录制的原因：
```
gh pr comment <PR_NUMBER> --body "$(cat <<'EOF'
## 屏幕录制已跳过

此PR似乎是非用户面向的变更（重构、文档、测试或内部变更），因此未录制屏幕录制。

---
*由`/dyad:pr-screencast`自动执行*
EOF
)"
```
然后停止。
识别要演示的关键功能:

分析PR以理解：
- 添加/更改了哪些UI组件或功能？
- 什么用户操作触发该功能？
- 预期的视觉结果是什么？
读取更改的文件以理解：
- 哪些组件受影响
- 涉及哪些用户交互
- 应演示哪些视觉变化
制定屏幕录制应显示的计划：
- 初始状态（截图1）
- 用户操作
- 结果状态（截图2-3）

创建Playwright屏幕录制脚本:

在e2e-tests/screencast-demo.spec.ts创建新文件，拍摄多个截图以讲述视觉故事：

import { expect } from "@playwright/test";
import { test } from "./helpers/fixtures";
import * as fs from "fs";
import * as path from "path";

test.describe.configure({ mode: "serial" });

test("PR演示屏幕录制", async ({ electronApp, po }) => {
  // 确保截图目录存在
  const screenshotDir = path.join(__dirname, "screencast-screenshots");
  if (!fs.existsSync(screenshotDir)) {
    fs.mkdirSync(screenshotDir, { recursive: true });
  }

  const page = await electronApp.firstWindow();

  // 为演示设置应用
  await po.setUp({ autoApprove: true });

  // 如果需要，导入或创建测试应用
  await po.importApp("minimal");

  // 等待应用就绪
  await page.waitForTimeout(1000);

  // === 步骤1: 捕获初始状态 ===
  await page.screenshot({
    path: path.join(screenshotDir, "01-initial-state.png"),
    fullPage: false,
  });

  // === 步骤2: 导航到功能/执行操作 ===
  // TODO: 替换为此PR的实际导航/交互
  // 示例: await po.goToSettingsTab();
  await page.waitForTimeout(500);

  await page.screenshot({
    path: path.join(screenshotDir, "02-during-action.png"),
    fullPage: false,
  });

  // === 步骤3: 显示结果 ===
  // TODO: 替换为实际结果状态
  await page.waitForTimeout(500);

  await page.screenshot({
    path: path.join(screenshotDir, "03-final-result.png"),
    fullPage: false,
  });

  // 验证最终截图存在以确保所有步骤完成
  expect(
    fs.existsSync(path.join(screenshotDir, "03-final-result.png")),
  ).toBe(true);
});

根据演示的功能自定义脚本:

使用e2e-tests/helpers/page-objects/PageObject.ts中的PageObject方法
使用稳定选择器(data-testid, role, text)
在操作之间添加适当等待(500-1000ms)以使截图清晰
捕获2-4张截图显示功能进展

构建应用:

录制前必须构建应用：
```
npm run build
```
运行屏幕录制测试:

运行测试以捕获截图：
```
PLAYWRIGHT_HTML_OPEN=never npx playwright test e2e-tests/screencast-demo.spec.ts --timeout=120000 --reporter=list
```
如果测试失败，读取错误输出，修复脚本，并重试（最多3次）。如果3次后仍失败，在PR上发布评论表示无法捕获屏幕录制并报告错误。常见问题：
- 缺失选择器 - 检查组件实现
- 时序问题 - 添加更多waitForTimeout调用
- 导入应用问题 - 尝试不同测试应用或从头创建
验证截图是否捕获:

检查截图是否存在：
```
ls -la e2e-tests/screencast-screenshots/
```
应看到2-4个PNG文件。如果没有，检查测试输出错误。

上传截图到GitHub:

上传截图到assets分支，以便在PR评论中引用。

# 获取仓库信息
REPO=$(gh repo view --json nameWithOwner -q '.nameWithOwner')
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
ASSET_DIR="pr-screencasts/pr-<PR_NUMBER>-$TIMESTAMP"

# 创建或更新assets分支
git fetch origin assets:assets 2>/dev/null || git checkout --orphan assets

# 切换到assets分支，保留工作目录
git stash --include-untracked
git checkout assets 2>/dev/null || (git checkout --orphan assets && git rm -rf . 2>/dev/null || true)

# 创建目录并复制截图
mkdir -p "$ASSET_DIR"
git stash pop 2>/dev/null || true
cp e2e-tests/screencast-screenshots/*.png "$ASSET_DIR/"

# 提交并推送
git add "$ASSET_DIR"
git commit -m "为PR #<PR_NUMBER>添加屏幕录制资源"
git push origin assets

# 切换回原始分支
git checkout -
git stash pop 2>/dev/null || true

截图可访问于：

https://raw.githubusercontent.com/<REPO>/assets/<ASSET_DIR>/<filename>.png

后备方案: 如果上传失败，使用文本描述 如果上传无效，用文本格式描述截图。

发布评论到PR:

创建包含演示的PR评论：

gh pr comment <PR_NUMBER> --body "$(cat <<'EOF'
## 功能演示

### 此PR的作用
<基于分析的简要功能描述>

### 视觉演练

**步骤1: 初始状态**
<截图1描述 - 或嵌入图片如果已上传>

**步骤2: 用户操作**
<用户操作和截图2的描述>

**步骤3: 结果**
<最终结果和截图3的描述>

### 如何手动测试
1. <重现步骤>
2. <预期行为>

---
*由`/dyad:pr-screencast`自动执行*
EOF
)"

重要提示: 不要使用--edit-last或修改现有评论。始终创建新评论。

清理Playwright脚本和资源:

删除临时屏幕录制脚本和截图：

rm -f e2e-tests/screencast-demo.spec.ts
rm -rf e2e-tests/screencast-screenshots/

同时清理任何测试结果：

rm -rf test-results/screencast-demo*

总结结果:

向用户报告：
- PR是否被确定为用户面向
- 演示了什么功能（如果适用）
- 捕获了多少截图
- 链接到PR评论
- 录制过程中遇到的任何问题