qinglong icon indicating copy to clipboard operation
qinglong copied to clipboard
verified publisher icon whyour

Add Scenario Mode: Complete visual workflow automation system with flowgram.ai

Open whyour opened this issue 1 month ago • 0 comments

Clear and concise description of the problem

🎨 工作流编辑，工作流的操作和数据编辑都在画布内

1. 独立的工作流编辑器模态框

  • 创建新的 WorkflowEditorModal 组件，与场景创建/编辑完全解耦
  • 场景列表页面新增"编辑工作流"按钮
  • 创建/编辑场景时，工作流编辑在单独的全屏模态框中进行

2. Flowgram 风格的布局 (参考官方 Demo)

左侧画布区域:

  • 展示工作流的小节点卡片
  • 节点以紧凑的卡片形式显示
  • 显示节点图标、标签和类型
  • 支持点击选中节点

右侧编辑面板:

  • 点击节点后，右侧显示详细的编辑表单
  • 表单包含节点的所有配置选项
  • 动态表单根据节点类型变化
  • 固定宽度 400px，高度自适应

底部工具栏: (参考官方 Demo)

  • 快速添加各类节点按钮
  • 验证工作流按钮
  • 保存和关闭按钮

3. 数据流改进

场景列表页
  ↓
点击"新建场景" → 打开场景信息表单 (名称、描述等)
  ↓
点击"编辑工作流" → 打开独立的工作流编辑器
  ↓
在画布中添加和配置节点
  ↓
点击节点 → 右侧显示详细配置面板
  ↓
保存 → 更新场景的 workflowGraph
  ↓
提交场景 → 调用后端 API

🎨 UI 设计 (UI Design)

画布区域 (左侧):

┌─────────────────────────────┐
│  [工具栏: 添加节点按钮...]   │
├─────────────────────────────┤
│                             │
│   ┌──────┐  ┌──────┐       │
│   │ 节点1 │  │ 节点2 │       │
│   └──────┘  └──────┘       │
│                             │
│   ┌──────┐                 │
│   │ 节点3 │                 │
│   └──────┘                 │
│                             │
└─────────────────────────────┘

编辑面板 (右侧):

┌──────────────────┐
│   节点配置        │
├──────────────────┤
│                  │
│  [标签]          │
│  [类型选择]      │
│  [参数1]         │
│  [参数2]         │
│  ...            │
│                  │
│  [保存] [删除]   │
│                  │
└──────────────────┘

🔧 技术细节 (Technical Details)

新的布局结构:

  • 使用 flex 布局：左侧自适应，右侧固定 400px
  • 左侧最小宽度: 600px
  • 右侧固定宽度: 400px
  • 全屏模态框: width: 95vw, height: 90vh

状态管理:

  • selectedNodeId: 当前选中的节点 ID
  • localGraph: 本地工作流图状态
  • 编辑后通过 onOk 回调返回更新的图

📝 用户体验改进 (UX Improvements)

之后:

  • ✅ 独立的全屏工作流编辑器
  • ✅ 左侧画布清晰展示所有节点
  • ✅ 右侧专注于节点编辑
  • ✅ 更符合 Flowgram 官方 Demo 的设计理念
  • ✅ 更好的视觉层次和信息组织

🎯 参考设计 (Reference Design)

基于 Flowgram 官方 Demo: https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-free-layout

实现了类似的:

  • 左右分栏布局
  • 小节点卡片展示
  • 右侧详细编辑面板
  • 清晰的视觉层次
Original prompt

This section details on the original issue you should resolve

动态执行脚本（如变量监听、API响应触发、脚本错误回调等），建议新增「场景模式」功能，将面板升级自动化运维中枢。

Suggested solution

增加多样化触发器 变量监听：支持环境变量/配置文件变更监听 Webhook触发器：开放API端点接收外部触发 任务状态触发器：基于其他任务的成功/失败状态触发 时间触发器：增强现有cron表达式，支持秒级精度 系统事件：磁盘空间/内存占用等硬件指标触发

动态响应机制 多条件嵌套：支持AND/OR逻辑的条件组合 延时执行：设置触发后的延迟执行时间 失败熔断：连续失败N次后自动禁用任务 自适应重试：根据错误类型配置重试策略

Alternative

No response

Additional context

No response

Validations

  • [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.</issue_description>

Comments on the Issue (you are @copilot in this section)

Suggested solution

🎨 工作流编辑，工作流的操作和数据编辑都在画布内

1. 独立的工作流编辑器模态框

  • 创建新的 WorkflowEditorModal 组件，与场景创建/编辑完全解耦
  • 场景列表页面新增"编辑工作流"按钮
  • 创建/编辑场景时，工作流编辑在单独的全屏模态框中进行

2. Flowgram 风格的布局 (参考官方 Demo)

左侧画布区域:

  • 展示工作流的小节点卡片
  • 节点以紧凑的卡片形式显示
  • 显示节点图标、标签和类型
  • 支持点击选中节点

右侧编辑面板:

  • 点击节点后，右侧显示详细的编辑表单
  • 表单包含节点的所有配置选项
  • 动态表单根据节点类型变化
  • 固定宽度 400px，高度自适应

底部工具栏: (参考官方 Demo)

  • 快速添加各类节点按钮
  • 验证工作流按钮
  • 保存和关闭按钮

3. 数据流改进

场景列表页
  ↓
点击"新建场景" → 打开场景信息表单 (名称、描述等)
  ↓
点击"编辑工作流" → 打开独立的工作流编辑器
  ↓
在画布中添加和配置节点
  ↓
点击节点 → 右侧显示详细配置面板
  ↓
保存 → 更新场景的 workflowGraph
  ↓
提交场景 → 调用后端 API

🎨 UI 设计 (UI Design)

画布区域 (左侧):

┌─────────────────────────────┐
│  [工具栏: 添加节点按钮...]   │
├─────────────────────────────┤
│                             │
│   ┌──────┐  ┌──────┐       │
│   │ 节点1 │  │ 节点2 │       │
│   └──────┘  └──────┘       │
│                             │
│   ┌──────┐                 │
│   │ 节点3 │                 │
│   └──────┘                 │
│                             │
└─────────────────────────────┘

编辑面板 (右侧):

┌──────────────────┐
│   节点配置        │
├──────────────────┤
│                  │
│  [标签]          │
│  [类型选择]      │
│  [参数1]         │
│  [参数2]         │
│  ...            │
│                  │
│  [保存] [删除]   │
│                  │
└──────────────────┘

🔧 技术细节 (Technical Details)

新的布局结构:

  • 使用 flex 布局：左侧自适应，右侧固定 400px
  • 左侧最小宽度: 600px
  • 右侧固定宽度: 400px
  • 全屏模态框: width: 95vw, height: 90vh

状态管理:

  • selectedNodeId: 当前选中的节点 ID
  • localGraph: 本地工作流图状态
  • 编辑后通过 onOk 回调返回更新的图

📝 用户体验改进 (UX Improvements)

之后:

  • ✅ 独立的全屏工作流编辑器
  • ✅ 左侧画布清晰展示所有节点
  • ✅ 右侧专注于节点编辑
  • ✅ 更符合 Flowgram 官方 Demo 的设计理念
  • ✅ 更好的视觉层次和信息组织

🎯 参考设计 (Reference Design)

基于 Flowgram 官方 Demo: https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-free-layout

实现了类似的:

  • 左右分栏布局
  • 小节点卡片展示
  • 右侧详细编辑面板
  • 清晰的视觉层次
Original prompt

This section details on the original issue you should resolve

动态执行脚本（如变量监听、API响应触发、脚本错误回调等），建议新增「场景模式」功能，将面板升级自动化运维中枢。

Suggested solution

增加多样化触发器 变量监听：支持环境变量/配置文件变更监听 Webhook触发器：开放API端点接收外部触发 任务状态触发器：基于其他任务的成功/失败状态触发 时间触发器：增强现有cron表达式，支持秒级精度 系统事件：磁盘空间/内存占用等硬件指标触发

动态响应机制 多条件嵌套：支持AND/OR逻辑的条件组合 延时执行：设置触发后的延迟执行时间 失败熔断：连续失败N次后自动禁用任务 自适应重试：根据错误类型配置重试策略

Alternative

No response

Additional context

No response

Validations

  • [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.</issue_description>

Comments on the Issue (you are @copilot in this section)

Alternative

No response

Additional context

No response

Validations

  • [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

whyour avatar Nov 23 '25 05:11 whyour