# 前端 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. 相关文档

- [工作流编排](workflow_authoring.md) - YAML 编写指南