自动截屏 Skill

自动运行项目并对主要功能页面进行全屏截屏，保存到 /docs/screenshots 目录。

前置条件

1. 前端服务已启动（http://localhost:3000）
2. 安装 Playwright（首次使用需安装）

执行流程

步骤 1：检查前端服务

# 如果前端服务未启动，先启动
cd frontend && pnpm dev

步骤 2：安装依赖（首次使用，在 frontend 目录）

cd frontend

# 安装 Playwright（如果尚未安装）
pnpm add -D playwright

# 安装浏览器（首次使用）
npx playwright install chromium

步骤 3：运行截屏脚本（在 frontend 目录）

cd frontend
npx tsx scripts/screenshot.ts

截屏页面列表

输出文件

docs/
├── screenshots/
│   ├── landing-page.png
│   ├── chat-interface.png
│   ├── admin-dashboard.png
│   └── ...
└── SCREENSHOTS.md          # 截图索引文件

配置选项

可在 scripts/screenshot.ts 中修改：

const CONFIG = {
  baseUrl: 'http://localhost:3000',  // 服务地址
  outputDir: './docs/screenshots',    // 输出目录
  viewport: { width: 1920, height: 1080 },  // 视口大小
  timeout: 30000,  // 超时时间
};

添加新页面

在 PAGES 数组中添加：

{ path: '/admin/new-page', name: 'new-page', description: '新页面描述' },

注意事项

1. 需要登录的页面：脚本目前不处理登录状态，如需截取需要登录的页面，需要修改脚本添加登录逻辑
2. 动态内容：脚本会等待页面加载完成，但动态加载的数据可能显示为空
3. 深色模式：默认使用系统主题，如需指定可在脚本中添加主题切换逻辑