🎨 Web UI 完整指南¶

概述¶

Sloth Runner 的 Web UI 是一个现代、响应式和直观的界面，用于管理工作流、代理、钩子、事件和监控。使用 Bootstrap 5、Chart.js 和 WebSocket 构建，提供实时更新。

访问 URL： http://localhost:8080（默认端口）

🚀 启动 Web UI¶

# 方法 1：ui 命令
sloth-runner ui --port 8080

# 方法 2：使用特定绑定
sloth-runner ui --port 8080 --bind 0.0.0.0

# 方法 3：使用环境变量
export SLOTH_RUNNER_UI_PORT=8080
sloth-runner ui

📱 页面和功能¶

1. 🏠 主仪表板 (`/`)¶

功能：

系统概览 - 显示主要统计的卡片
工作流总数
活动/非活动代理总数
最近执行
成功率
交互式图表（Chart.js）
每日执行数（最近 7 天）
成功 vs 失败率
代理资源使用情况
工作流分布
实时活动流
工作流开始/完成
代理连接/断开
系统事件
通过 WebSocket 更新
快速操作（浮动按钮）
执行工作流
创建新工作流
查看代理
设置

现代功能： - 🎨 深色/浅色模式（自动切换） - 📊 响应式图表 - 🔄 每 30 秒自动刷新 - 🎯 平滑动画（淡入、悬停效果） - 📱 移动优先设计

2. 🤖 代理管理 (`/agents`)¶

功能：

代理卡片¶

每个代理显示在一个现代卡片中，包含：

可视状态
🟢 在线（绿色脉冲动画）
🔴 离线（灰色）
🟡 连接中（黄色）
实时指标
CPU 使用率（%）- 动画进度图
内存使用率（%）- 动画进度图
磁盘使用率（%）- 动画进度图
负载平均值 - 基于 CPU 核心转换为 %
代理信息
名称和地址
代理版本
运行时间格式化（天/小时/分钟/秒）
注册日期
最后心跳
迷你图（趋势迷你图）
过去 24 小时的 CPU 使用率
过去 24 小时的内存使用率
使用 Canvas API 渲染
操作按钮
📊 仪表板 - 转到代理仪表板
ℹ️ 详情 - 完整详情模态框
📄 日志 - 查看代理日志
🔄 重启 - 重启代理（仅在线时）

一般统计¶

代理总数
活动代理
非活动代理
运行时间率（%）

高级功能¶

自动刷新 - 每 10 秒更新列表
WebSocket - 代理连接/断开时的实时通知
过滤器 - 按状态过滤（全部/活动/非活动）
搜索 - 按名称搜索代理
响应式网格 - 卡片自动重新排列
骨架加载器 - 专业的加载状态

布局：

┌─────────────────────────────────────────┐
│  📊 统计卡片                             │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐  │
│  │总数  │ │活动  │ │非活动│ │运行率│  │
│  └──────┘ └──────┘ └──────┘ └──────┘  │
├─────────────────────────────────────────┤
│  🤖 代理卡片                             │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐  │
│  │代理 1   │ │代理 2   │ │代理 3   │  │
│  │🟢 80%   │ │🟢 45%   │ │🔴 N/A   │  │
│  │[图表]   │ │[图表]   │ │[图表]   │  │
│  │[按钮]   │ │[按钮]   │ │[按钮]   │  │
│  └─────────┘ └─────────┘ └─────────┘  │
└─────────────────────────────────────────┘

3. 🎛️ 代理控制 (`/agent-control`)¶

功能：

用于每个代理详细控制的专用页面。

代理列表 带扩展卡片
详细指标
CPU 核心、负载平均值
内存总量/已用/可用
磁盘总量/已用/可用
网络接口
详细运行时间
控制操作
启动/停止/重启代理
更新代理版本
检查模块
远程运行命令
查看日志
仪表图（圆形图表）
CPU 使用率
内存使用率
磁盘使用率
基于阈值的动态颜色

颜色阈值： - 🟢 绿色：0-40% - 🔵 蓝色：40-70% - 🟡 黄色：70-90% - 🔴 红色：90-100%

4. 📊 代理仪表板 (`/agent-dashboard`)¶

功能：

每个代理的单独仪表板，带高级指标。

时间序列图表（Chart.js）
CPU 使用率随时间变化（折线图）
内存使用率随时间变化（面积图）
磁盘 I/O（柱状图）
网络流量（折线图）
系统信息
操作系统名称、版本、内核
CPU 型号、核心数、架构
总内存、交换空间
挂载的文件系统
进程列表
按 CPU 排序的顶级进程
按内存排序的顶级进程
实时更新
实时日志
代理日志流
按级别过滤（debug/info/warn/error）
自动滚动
下载日志
时间范围选择器
最近 1 小时
最近 6 小时
最近 24 小时
最近 7 天
自定义范围

5. 📝 工作流 (`/workflows`)¶

功能：

工作流列表¶

工作流卡片 包含：
名称和描述
标签/标记
最后执行
成功率
按钮：运行、编辑、删除
过滤器
按标签
按状态（活动/非活动）
按执行频率
搜索 - 按名称/描述搜索

工作流编辑器¶

编辑器功能：

专业代码编辑器
YAML/Sloth DSL 语法高亮
行号
自动缩进
括号匹配
关键字：tasks、name、exec、delegate_to 等
自定义颜色（Sloth 主题）
键盘快捷键
Tab - 缩进（2 个空格）
Shift+Tab - 取消缩进
Ctrl+S / Cmd+S - 保存
Shift+Alt+F - 格式化
模板
基本工作流
多任务工作流
分布式工作流（带 delegate_to）
Docker 部署
完整示例工作流
实时验证
语法检查
Linting
内联警告和错误
预览
可视化工作流结构
任务间依赖关系
使用的变量

语法高亮示例：

# 关键字为紫色
tasks:
  - name: 部署应用          # 字符串为绿色
    exec:
      script: |                # 管道符为橙色
        pkg.install("nginx")   # 函数为蓝色
        # 注释为灰色
    delegate_to: web-01        # 键为浅蓝色

6. ⚡ 执行 (`/executions`)¶

功能：

工作流执行的完整历史记录。

执行列表 包含：
工作流名称
状态（成功/失败/运行中）
开始/完成时间
持续时间
触发者（用户/计划/钩子）
代理名称（如果委托）
高级过滤器
按状态
按工作流
按代理
按日期/时间
按用户
执行详情
完整输出
结构化日志
任务明细
使用的变量
性能指标
操作
重新运行工作流
下载日志
分享执行（链接）
与之前比较
状态指示器
🟢 成功（绿色）
🔴 失败（红色）
🟡 运行中（黄色带旋转器）
⏸️ 暂停（灰色）

7. 🎣 钩子 (`/hooks`)¶

功能：

完整的钩子（事件处理程序）管理。

钩子列表
钩子名称
事件类型
脚本路径
优先级
启用/禁用状态
最后触发
事件类型
workflow.started
workflow.completed
workflow.failed
task.started
task.completed
task.failed
agent.connected
agent.disconnected
创建/编辑钩子
表单字段：
- 名称
- 事件类型（下拉菜单）
- 脚本（代码编辑器）
- 优先级（0-100）
- 启用（切换）
Lua/Bash 语法高亮
验证
测试钩子
使用测试负载进行试运行
查看输出而不执行操作
调试模式
钩子历史
触发时间
接收的负载
脚本输出
成功/失败

8. 📡 事件 (`/events`)¶

功能：

实时监控系统事件。

事件流
时间戳
事件类型
来源（工作流/代理/系统）
详情/负载
状态
WebSocket 流
事件实时显示
声音通知（可选）
桌面通知（可选）
过滤器
按事件类型
按来源
按状态
按时间范围
导出事件
JSON
CSV
日志格式
统计
每小时事件数
按类型分类的事件
顶级来源

9. 📅 调度器 (`/scheduler`)¶

功能：

工作流调度（类似 cron）。

已调度作业
作业名称
关联的工作流
Cron 表达式
下次运行时间
最后运行状态
启用/禁用
创建作业
表单包含：
- 名称
- 工作流（下拉菜单）
- 调度（cron 或可视化构建器）
- 变量
- 通知（成功/失败时）
可视化 cron 构建器
分钟/小时/天/月选择器
预览："每天凌晨 3:00 运行"
常用模板：
- 每小时
- 每天午夜
- 每周一上午 9 点
- 自定义
执行历史
按调度作业
成功率
平均持续时间

10. 📄 日志 (`/logs`)¶

功能：

集中式日志查看。

高级过滤器
按级别（debug/info/warn/error）
按来源（代理/工作流/系统）
按时间范围
按文本（搜索）
实时跟踪
实时流
自动滚动
暂停/恢复
高亮模式
结构化日志
JSON 格式
可展开字段
语法高亮
导出
下载为 .log
复制到剪贴板
分享链接
带颜色的日志级别
🔵 DEBUG（蓝色）
🟢 INFO（绿色）
🟡 WARN（黄色）
🔴 ERROR（红色）

11. 🖥️ 交互式终端 (`/terminal`)¶

功能：

用于远程代理的 Web 终端。

xterm.js - 完整终端
类 SSH 体验
多会话（标签页）
命令历史（↑↓ 箭头）
自动补全（Tab）
复制/粘贴（Ctrl+Shift+C/V）
主题 - Solarized、Monokai、Dracula 等

特殊命令： - .clear - 清除终端 - .exit - 关闭会话 - .upload <file> - 上传文件 - .download <file> - 下载文件

12. 📦 保存的 Sloth (`/sloths`)¶

功能：

保存的工作流仓库。

Sloth 列表
名称
描述
标签
创建/更新日期
活动/非活动状态
使用次数
操作
运行 sloth
编辑内容
克隆 sloth
导出（YAML）
删除
激活/停用
标签管理
创建标签
为标签着色
按标签过滤
版本控制
查看版本历史
比较版本（差异）
恢复以前的版本

13. ⚙️ 设置 (`/settings`)¶

功能：

一般设置¶

服务器信息
主服务器地址
gRPC 端口
Web UI 端口
数据库路径
偏好设置
主题（浅色/深色/自动）
语言（en/pt/zh）
时区
日期格式

通知¶

电子邮件设置
SMTP 主机、端口
用户名/密码
发件人地址
Slack 集成
Webhook URL
默认频道
提及
Telegram/Discord
Bot 令牌
聊天 ID / Webhook

安全¶

身份验证
启用/禁用认证
用户管理
API 令牌
TLS/SSL
启用 HTTPS
证书上传
自动续订（Let's Encrypt）

数据库¶

备份设置
自动备份启用
备份计划
保留策略
维护
清理数据库
查看统计
清除旧数据

🎨 现代视觉功能¶

深色模式 / 浅色模式¶

自动检测 基于系统偏好 + 手动切换

主题：

/* 浅色模式 */
--bg-primary: #ffffff
--text-primary: #212529
--accent: #4F46E5

/* 深色模式 */
--bg-primary: #1a1d23
--text-primary: #e9ecef
--accent: #818CF8

切换： 导航栏中的按钮，带图标 ☀️（浅色）/ 🌙（深色）

动画和过渡¶

淡入加载页面时
悬停效果 在卡片和按钮上
脉冲动画 在状态指示器上
骨架加载器 加载期间
平滑滚动
涟漪效果 在按钮上（Material Design）
页面过渡 平滑

毛玻璃效果¶

带毛玻璃效果的卡片：

.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Toast / 通知¶

现代通知系统：

类型：
ℹ️ 信息（蓝色）
✅ 成功（绿色）
⚠️ 警告（黄色）
❌ 错误（红色）
⏳ 加载中（带旋转器）
位置：
右上角（默认）
左上角
右下角
左下角
居中
功能：
自动关闭（可配置）
关闭按钮
进度条
操作按钮
堆叠多个 toast

五彩纸屑效果¶

特殊事件的五彩纸屑效果：

✅ 工作流成功完成
🤖 新代理已连接
🎯 达成里程碑
🎉 部署完成

confetti.burst({
    particleCount: 100,
    spread: 70,
    origin: { y: 0.6 }
});

拖放¶

重新排序任务 在工作流中
上传文件（拖放区）
重新组织仪表板 小部件

⌨️ 命令面板 (Ctrl+Shift+P)¶

快速访问所有操作：

🔍 搜索命令...

> 运行工作流
> 查看代理
> 创建工作流
> 打开终端
> 查看日志
> 设置
> 切换深色模式
> 导出数据
...

功能： - 模糊搜索 - 键盘导航（↑↓ Enter） - 最近的命令 - 可见的快捷键 - 上下文感知（根据当前页面显示操作）

📊 图表和可视化¶

Chart.js 组件¶

图表类型：

折线图 - 时间指标
柱状图 - 比较
环形图 - 分布
面积图 - 趋势
迷你图 - 内联迷你图

功能： - 响应式 - 交互式工具提示 - 图例 - 缩放/平移 - 导出为 PNG - 深色/浅色主题

🔄 WebSocket 实时更新¶

WebSocket 连接用于实时更新：

实时事件： - 代理连接/断开 - 工作流开始/完成 - 新日志 - 系统警报 - 指标更新

URL： ws://localhost:8080/ws

自动重连 如果连接断开

📱 移动响应式¶

移动优先设计：

断点：
移动设备：< 768px
平板：768px - 1024px
桌面：> 1024px
移动功能：
汉堡菜单
触摸友好按钮
滑动手势
简化图表
底部导航

🔐 身份验证（可选）¶

登录页面 如果启用认证：

用户名/密码
记住我
忘记密码
OAuth（GitHub、Google 等）

JWT 令牌 用于 API

角色： - Admin - 完全访问 - Operator - 执行工作流 - Viewer - 仅查看

🛠️ 开发者工具¶

API 浏览器¶

探索和测试 REST API：

GET  /api/v1/agents
GET  /api/v1/agents/:name
POST /api/v1/workflows/run
GET  /api/v1/executions
...

功能： - 在浏览器中试用 - 请求/响应示例 - 认证标头 - cURL 示例

日志浏览器¶

浏览系统日志：

服务器日志
代理日志
应用日志
审计日志

🎓 快速指南¶

快速入门导览¶

为新用户提供的交互式导览：

欢迎 → 代理页面
创建第一个工作流
运行工作流
查看执行结果
设置通知

功能： - 带提示的工具提示 - 高亮元素 - 跳过/下一步按钮 - 不再显示（cookie）

💡 使用提示¶

键盘快捷键¶

全局：
Ctrl+Shift+P  - 命令面板
Ctrl+K        - 搜索
Ctrl+/        - 帮助
Esc           - 关闭模态框

编辑器：
Ctrl+S        - 保存
Ctrl+F        - 查找
Ctrl+Z        - 撤销
Ctrl+Y        - 重做

书签¶

保存重要页面：

仪表板：          /
我的工作流：      /workflows
活动执行：        /executions?status=running
代理指标：        /agent-dashboard

浏览器扩展¶

可用： - Chrome 扩展 - 快速访问 - Firefox 附加组件

🔧 自定义¶

自定义 CSS¶

在设置中添加自定义 CSS：

/* 自定义主题 */
:root {
    --primary-color: #FF6B6B;
    --accent-color: #4ECDC4;
}

自定义小部件¶

为仪表板创建自定义小部件：

自定义图表
外部集成
Iframe 嵌入

📚 下一步¶

🐛 故障排除¶

Web UI 无法加载¶

# 检查服务器是否正在运行
lsof -i :8080

# 查看日志
sloth-runner ui --port 8080 --verbose

# 清除浏览器缓存
Ctrl+Shift+Del

WebSocket 无法连接¶

# 检查防火墙
sudo ufw allow 8080

# 测试连接
wscat -c ws://localhost:8080/ws

指标未显示¶

# 检查代理是否发送指标
sloth-runner agent metrics <agent-name>

# 重启代理
sloth-runner agent restart <agent-name>

最后更新： 2025-10-07

构建技术： Bootstrap 5、Chart.js、xterm.js、WebSockets、Canvas API

🎨 Web UI 完整指南¶

概述¶

🚀 启动 Web UI¶

📱 页面和功能¶

1. 🏠 主仪表板 (/)¶

2. 🤖 代理管理 (/agents)¶

代理卡片¶

一般统计¶

高级功能¶

3. 🎛️ 代理控制 (/agent-control)¶

4. 📊 代理仪表板 (/agent-dashboard)¶

5. 📝 工作流 (/workflows)¶

工作流列表¶

工作流编辑器¶

6. ⚡ 执行 (/executions)¶

7. 🎣 钩子 (/hooks)¶

8. 📡 事件 (/events)¶

9. 📅 调度器 (/scheduler)¶

10. 📄 日志 (/logs)¶

11. 🖥️ 交互式终端 (/terminal)¶

12. 📦 保存的 Sloth (/sloths)¶

13. ⚙️ 设置 (/settings)¶

一般设置¶

通知¶

安全¶

数据库¶

🎨 现代视觉功能¶

深色模式 / 浅色模式¶

动画和过渡¶

毛玻璃效果¶

Toast / 通知¶

五彩纸屑效果¶

拖放¶

⌨️ 命令面板 (Ctrl+Shift+P)¶

📊 图表和可视化¶

Chart.js 组件¶

🔄 WebSocket 实时更新¶

📱 移动响应式¶

🔐 身份验证（可选）¶

🛠️ 开发者工具¶

API 浏览器¶

日志浏览器¶

🎓 快速指南¶

快速入门导览¶

💡 使用提示¶

键盘快捷键¶

书签¶

浏览器扩展¶

🔧 自定义¶

自定义 CSS¶

自定义小部件¶

📚 下一步¶

🐛 故障排除¶

Web UI 无法加载¶

WebSocket 无法连接¶

指标未显示¶

1. 🏠 主仪表板 (`/`)¶

2. 🤖 代理管理 (`/agents`)¶

3. 🎛️ 代理控制 (`/agent-control`)¶

4. 📊 代理仪表板 (`/agent-dashboard`)¶

5. 📝 工作流 (`/workflows`)¶

6. ⚡ 执行 (`/executions`)¶

7. 🎣 钩子 (`/hooks`)¶

8. 📡 事件 (`/events`)¶

9. 📅 调度器 (`/scheduler`)¶

10. 📄 日志 (`/logs`)¶

11. 🖥️ 交互式终端 (`/terminal`)¶

12. 📦 保存的 Sloth (`/sloths`)¶

13. ⚙️ 设置 (`/settings`)¶