Skill: zzh19701008/dashboard-screenshot (version 1.0.0)

# 📊 OpenClaw 仪表盘截图技能 **创建时间：** 2026-03-28 **最后更新：** 2026-03-28 **技能位置：** `~/.openclaw/workspace/skills/dashboard-screenshot/SKILL.md` --- ## 🎯 触发词 - "查看仪表盘" - "仪表盘状态" - "OpenClaw 仪表盘" - "机器人状态" - "dashboard" - "截图仪表盘" - "检查仪表盘并发送截图" --- ## 🔧 工作流程 ### 步骤 1：检查服务是否运行 ```bash curl -s -o /dev/null -w "%{http_code}" http://localhost:3000 2>/dev/null ``` **说明：** - 检查端口 3000 是否响应 - 返回 `200` → 服务已运行，跳至步骤 3 - 返回其他或未响应 → 继续步骤 2 --- ### 步骤 2：启动仪表盘服务（如未运行） ```bash cd ~/.openclaw/OpenClaw-bot-review && npm run dev ``` **说明：** - 后台运行服务 - 等待 8 秒确保服务完全启动 **工具调用：** ```json { "exec": { "command": "cd ~/.openclaw/OpenClaw-bot-review && npm run dev", "background": true, "yieldMs": 8000 } } ``` --- ### 步骤 3：打开浏览器 **工具调用：** ```json { "action": "open", "url": "http://localhost:3000" } ``` **说明：** - 打开仪表盘页面 - 获取 `targetId` 用于后续操作 --- ### 步骤 4：等待页面加载 **工具调用：** ```json { "action": "snapshot", "targetId": "<targetId>", "timeoutMs": 5000 } ``` **说明：** - 检查页面是否加载完成 - 确认显示机器人卡片、统计信息等 --- ### 步骤 5：截取完整页面 **工具调用：** ```json { "action": "screenshot", "targetId": "<targetId>", "fullPage": true, "type": "png" } ``` **说明：** - 截取完整滚动页面 - 截图自动保存到 `~/.openclaw/media/browser/<uuid>.png` --- ### 步骤 6：发送截图给用户 **说明：** - 通过 QQbot 发送截图 - 附带关键状态说明（机器人状态、Token 用量、定时任务等） --- ## 📁 关键路径 | 项目 | 路径 | |------|------| | 技能文档 | `~/.openclaw/workspace/skills/dashboard-screenshot/SKILL.md` | | 项目目录 | `~/.openclaw/OpenClaw-bot-review/` | | package.json | `~/.openclaw/OpenClaw-bot-review/package.json` | | 截图保存 | `~/.openclaw/media/browser/<uuid>.png` | --- ## ⚠️ 注意事项 1. **服务自启动** - 如果端口 3000 未响应，自动执行 `npm run dev` 2. **等待时间** - 启动后等待 8 秒确保服务完全就绪 3. **页面加载** - 使用 snapshot 确认页面加载完成再截图 4. **完整页面** - 使用 `fullPage: true` 截取全部内容 5. **后台运行** - npm dev 进程后台运行，不阻塞后续操作 6. **浏览器状态** - 如果浏览器未打开或卡死，先重启浏览器 7. **错误处理** - 如果任何步骤失败，给出明确错误提示 --- ## ✅ 成功标准 - [ ] 端口检查通过或成功启动服务 - [ ] 浏览器成功打开且无错误 - [ ] 页面加载完成（snapshot 确认） - [ ] 截图成功保存（返回 image data） - [ ] 消息发送成功（无 error） - [ ] 状态说明清晰完整 --- ## 🐛 已知问题 1. **网络问题** - 如果 clawhub 无法访问，无法通过 CLI 安装 2. **浏览器超时** - 如果页面加载缓慢，可能需要调整 timeoutMs 3. **端口占用** - 如果 3000 端口被占用，需要先清理 --- ## 📊 响应模板 ``` 📸 **OpenClaw 仪表盘截图完成！** ## 📊 仪表盘关键信息 **🤖 机器人状态：** - **呆黄 (main)** - {状态} - 模型：{模型名称} ✅ - 平台：{平台列表} - 会话数：{数量} | 消息数：{数量} | Token: {用量} - 最近活跃：{时间} | 平均响应：{时间} - **小黄 (xiaohuang)** - {状态} - 模型：{模型名称} {状态} - 平台：{平台列表} - 会话数：{数量} | 消息数：{数量} | Token: {用量} - 最近活跃：{时间} | 平均响应：{时间} **⏰ 定时任务：** - {任务列表摘要} **📈 全局统计：** - 总 Input Token：{数量} - 总 Output Token：{数量} - 总消息数：{数量} **🦞 Gateway：** {状态} - 更新于：{时间} --- Dashboard 已成功启动在 `http://localhost:3000`！🫡 ``` --- _此技能由呆黄创建并维护_ _最后更新：2026-03-28_

path: TOOLS.md
content: # 📸 Dashboard Screenshot Skill Tools

## Overview
This skill provides automated OpenClaw dashboard screenshot capture and status reporting.

---

## 🔧 Tool Configuration

### 1. Check Service Status
```bash
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000 2>/dev/null
```
**Expected output:** `200` if running

### 2. Start Service (if needed)
```bash
cd ~/.openclaw/OpenClaw-bot-review && npm run dev
```
**Flags:**
- `background: true` - Run in background
- `yieldMs: 8000` - Wait 8 seconds for service startup

### 3. Open Browser
```json
{
  "action": "open",
  "url": "http://localhost:3000"
}
```
**Returns:** `targetId` for subsequent operations

### 4. Wait for Page Load
```json
{
  "action": "snapshot",
  "targetId": "<targetId>",
  "timeoutMs": 5000
}
```
**Verification:**
- Check for "OPENCLAW BOT DASHBOARD" title
- Verify robot cards are visible
- Confirm navigation menu is present

### 5. Capture Full Page
```json
{
  "action": "screenshot",
  "targetId": "<targetId>",
  "fullPage": true,
  "type": "png"
}
```
**Key settings:**
- `fullPage: true` - Capture entire scrollable page
- `type: "png"` - PNG format for quality
- **Auto-saves to:** `~/.openclaw/media/browser/<uuid>.png`

### 6. Send to User
```json
{
  "action": "send",
  "channel": "qqbot",
  "target": "90A776272DF32E657A3242BADFAC5662",
  "media": "~/.openclaw/media/browser/<uuid>.png"
}
```
**Includes:**
- Screenshot image
- Status summary text

---

## 📊 Status Summary Structure

### Robot Cards (每个机器人)
```
呆黄 (main)
├── 状态：空闲/工作中/在线
├── 模型：qwen3.5-plus (api_key) ✅
├── 平台：飞书、Discord、iMessage、QQBot、微信
├── 会话数：19 | 消息数：688 | Token: 23.0k
├── 最近活跃：23 分钟前
└── 平均响应：70.4s ⬆️
```

### Agent Tasks
```
📋 Agent 任务追踪
├── xiaohuang - 执行中
│   ├── 无进行中的子任务
│   └── 无定时任务活动
└── 时间：13:30
```

### Global Stats
```
📈 全局统计趋势
├── 总 Input Token：144.1k
├── 总 Output Token：3.7k
├── 总消息数：731
└── Token 消耗趋势：[图表]
```

### Gateway Health
```
🦞 Gateway 运行正常 ✅
更新于：13:30:56
刷新频率：10 秒
```

---

## 🎯 Trigger Keywords (in SKILL.md)
- "查看仪表盘"
- "dashboard"
- "仪表盘状态"
- "机器人状态"
- "截图仪表盘"

---

## ⚠️ Important Notes

1. **Port 3000** - Default dashboard port
2. **8s wait** - Gives service time to fully initialize
3. **fullPage=true** - Essential for capturing all scrollable content
4. **Background npm** - Prevents blocking subsequent operations
5. **Error handling** - Each step has fallback logic
6. **Browser cleanup** - Close browser after screenshot to free resources

---

## 📁 File Paths

| Resource | Path |
|----------|------|
| Project root | `~/.openclaw/OpenClaw-bot-review/` |
| Config | `package.json` |
| Screenshot output | `~/.openclaw/media/browser/<uuid>.png` |
| Skill definition | `~/.openclaw/workspace/skills/dashboard-screenshot/` |

---

## 🔒 Prerequisites

- OpenClaw Gateway running (port 18789)
- Dashboard app installed (`~/.openclaw/OpenClaw-bot-review/`)
- Browser available (OpenClaw browser or user browser)
- QQBot channel connected
- Port 3000 available (or willing to change)

---

## 🚀 Usage Example

**User says:** "查看仪表盘" or "dashboard"

**Agent responds with:**
1. Progress updates (optional)
2. Complete dashboard screenshot
3. Key statistics summary
4. Confirmation message

---

## 🐛 Troubleshooting

| Issue | Solution |
|-------|----------|
| Port 3000 busy | Kill process or use different port |
| Browser timeout | Increase `timeoutMs` or check browser status |
| Screenshot not saving | Check write permissions to media folder |
| Message not sent | Verify QQBot channel connection |
| Dashboard crashed | Check npm error logs, verify Node.js version |

---

## 📈 Future Improvements

- [ ] Add port configuration option
- [ ] Support multiple robots in one screenshot
- [ ] Add filtering options (show only specific robot)
- [ ] Generate PDF report alongside screenshot
- [ ] Add trend analysis overlay
- [ ] Support WebSocket push updates

---

*Last updated: 2026-03-28*


Security scan verdicts — ClawScan: suspicious | static analysis: clean | VirusTotal: malicious | SkillSpector: suspicious (MEDIUM)