web_ui_guide.md

前端 Web UI 快速入门指南

本指南帮助用户快速上手 DevAll Web UI，涵盖主要功能页面和操作流程。

1. 系统入口

启动前后端服务后，访问 http://localhost:5173 进入 Web UI。

2. 主要页面

2.1 首页 (Home)

系统首页，提供快速导航入口。

2.2 工作流列表 (Workflow List)

查看和管理所有可用的工作流 YAML 文件。

功能：

• 浏览 yaml_instance/ 目录下的工作流
• 预览 YAML 配置内容
• 选择工作流进入执行或编辑

2.3 启动页 (Launch View)

工作流执行的主界面，是最常用的页面。

操作流程：

1. 选择工作流：从左侧列表选择要执行的 YAML 文件
2. 上传附件（可选）：点击上传按钮添加文件（如 CSV 数据、图片等）
3. 输入任务提示：在文本框中输入指导工作流执行的提示词
4. 点击 Launch：启动工作流执行

执行期间：

• 节点视图：观察节点状态变化（pending → running → success/failed）
• 输出面板：实时查看执行日志、节点输出上下文和生成的工件（三者共用同一面板）

人工输入：

• 当执行到 human 节点时，界面会显示输入提示
• 填写文本内容或上传附件后提交继续执行

2.4 工作流工作台 (Workflow Workbench)

可视化工作流编辑器。

功能：

• 拖拽式节点编辑
• 节点配置面板
• 边连接与条件设置
• 导出为 YAML 文件

2.5 教程页 (Tutorial)

内置教程，帮助新用户了解系统功能。

3. 常用操作

3.1 运行工作流

1. 进入 Launch View
2. 从左侧选择工作流
3. 输入 Task Prompt（任务提示）
4. 点击 Launch 按钮
5. 观察执行过程，等待完成

3.2 下载运行结果

执行完成后：

1. 点击右侧面板的 Download 按钮
2. 下载完整的 Session 压缩包（含 context.json、附件、日志等）

3.3 人工审阅节点交互

当工作流包含 human 节点时：

1. 执行暂停并显示提示信息
2. 阅读上下文内容
3. 输入审阅意见或操作指令
4. 点击提交继续执行

4. 快捷键

快捷键	功能
Ctrl/Cmd + Enter	提交输入
Esc	关闭弹窗/面板

5. 故障排查

问题	解决方案
页面无法加载	确认前端服务 npm run dev 正常运行
无法连接后端	确认后端服务 uv run python server_main.py 正常运行
工作流列表为空	检查 yaml_instance/ 目录是否有 YAML 文件
执行无响应	检查浏览器开发者工具的 Network/Console 日志
WebSocket 断开	刷新页面重新建立连接

6. 相关文档

• 工作流编排 - YAML 编写指南