创建&编辑流程页面

目前该页面由5大部分组成，其中第1、4、5部分的内容可以收起来，为画布（第3部分）增加操作空间。

侧边节点操作栏（第一部分）

• 支持编辑流程名称，流程备注，流程分组；如果没有编辑的话，流程名称默认是RPA_{当前时间戳}。
• 支持点击“+”或者拖拽节点，生成节点至画布（第三部分）。
• 节点相关功能介绍，看后续。

功能区（第二部分）

1. 搜索：支持搜索关键字，在画布中的表现是，节点会呈现高亮，通过连续按下键盘enter键，寻找下一个节点（可循环）
2. 撤销/回退：保留用户操作节点和线的操作（新增、删除），最多保存100步。
3. 自动对齐：自动对齐是根据dagre算法实现的，支持dagre自带的3种排列方式，外加一种按顺序从上到下的排列方式，连续点击可切换排列方式。
4. 组合节点：
   1. 当没有选择的节点时，点击组合节点按钮，会自动将有连续3个及以上的单进单出的节点（开始节点、if条件、循环节点、含有错误处理节点除外），放进一个组合节点里面，保留连线规则；
   2. 如果用户有选择3个及以上的节点时，并且选择的节点里面只有单进单出的节点，点击该按钮后，会自动将他们放在一个组合节点内，无视连线规则；
5. 导入流程
   1. 支持填写旧RPA流程的导出JSON数据，转换成RPA Plus的流程数据。
   2. 支持导入新的RPA流程文件。
6. 任务设置

   设置项	说明
   异常	中断：当某个节点运行出现异常的时候，停止执行后面的步骤。 跳过：当某个节点运行出现异常的时候，跳过异常的步骤，继续执行后面的步骤。 我们的单个节点可以单独设置异常处理方式，也可以不设置；【任务设置】里面的异常处理项是针对所有没有单独设置异常处理的节点生效的，即默认的处理方式。
   任务完成	清除标签：该RPA任务流程，如果有执行打开某个网页标签，如标签A。那么下次手动打开该浏览器，不会出现标签A。  保存标签：该RPA任务流程，如果有执行打开某个网页标签，如标签A。那么下次手动打开该浏览器，则会出现标签A。 关闭浏览器：浏览器执行完该任务流程，则自动关闭浏览器 。 保留浏览器：浏览器执行完该任务流程，不会自动关闭浏览器。
   无头浏览器	开启即使用没有图形用户界面的浏览器。
   禁用填充账密	勾选此项，遇到登录界面，不自动填充账号与密码。如图所示：
   允许保存密码	勾选此项，允许展示是否保存密码的界面。如图所示：
   关闭时清除缓存	勾选此项，则在RPA任务执行完，关闭浏览器的时候，删除该账号的本地缓存文件。
   任务超时	设置一个时间，当多少秒没执行完流程，则RPA流程自动结束，设置0即禁用此功能。
   延迟执行	设置一个时间，这个任务会延长多少分钟执行，此时任务是开始运行状态。
   启动参数	参考网站：https://peter.sh/experiments/chromium-command-line-switches/

7. 调试日志：当任务开始调试时，会自动调出调试日志区域（第4部分），点击该按钮也可以开启/关闭调试日志区域（第4部分）。
8. 调试按钮：
   1. 首次调试，会跳一个弹窗选择调试的环境信息。
   2. 后续再次调试，会记住上一次的调试环境，直接使用上一次的调试环境，无须重复选择；当然也是支持更换调试环境的。
   3. 此处调试，是从【开始节点】开始，按照连线顺序一次执行节点内容。
   4. 我们每个节点也是有单独的调试按钮，可以做到按需调试的功能，不用每次都从头开始执行，详细内容可见画布区域（第3部分）介绍。
9. 保存：
   1. 点击保存按钮，将保存流程并自动返回流程管理页面。
   2. 可以使用快捷键Ctrl + S 或者Cmd + S保存流程，这个保存不会返回到流程管理页面。

画布区（第三部分）

画布区域是由节点、连线、画布、右下角的地图组成。

节点介绍

节点通过连接桩分类：我们一共有6种形状的节点。

1. 单输出节点：开始流程
2. 单输入节点：关闭浏览器
3. 一输入两输出节点：IF条件
4. 两输入两输出节点：For循环元素、For循环次数、For循环数据、While循环、启动新浏览器
5. 拥有异常捕获功能的节点，会在原有的基础上多一个输出连接桩
6. 单输入单输出节点：除了上述的节点之外都是这种节点，特点只有一个输入输出

节点功能介绍

功能（编号）	说明	功能范围
（1）调试/停止调试	点击此按钮，流程将从点击位置开始执行流程。 注意：如果在后面的流程节点，用到了前方的流程节点的变量，那么这个变量将不生效（全局变量除外）	所有节点均有此功能
（2）删除节点	点击此按钮，将删除该节点。 选中节点使用delete键，也可删除。	开始节点除外的所有节点均有此功能
（3）复制节点	点击此按钮，将在下方生成一个一模一样的节点。 选中节点，使用Ctrl/Cmd + C 和 Ctrl/Cmd + V快捷键复制粘贴该节点	开始节点除外的所有节点均有此功能
（4）异常处理方式	点击之后，会出现选择处理方式的弹窗： 选择执行其他操作选项时，就会出现异常处理的连接桩； 其他选项的功能介绍，参考：功能区（第2部分）-> 任务设置 -> 异常模块	开始节点除外的所有节点均有此功能
（5）移动节点至分组	长按此处，拖拽到组合节点的（9）号位置，拖拽进入组合节点。	只有单进单出的节点才有这个功能
（6）是否禁用节点	禁用节点的话，此节点和该节点关联的连线都会置灰，在流程运行的时候会自动跳过这个节点的功能。	开始节点除外的所有节点均有此功能
（7）单击编辑节点	点击节点本身，会有编辑内容弹窗出现	可编辑的节点用户此功能
（8）解散组合节点	解散这个组合节点，会按顺序生成连线，如果组合节点和外界有连线，则也会相连起来	组合节点
（9）将节点移动至此进入组合节点	长按节点的（5）号位置，拖拽至此处，将节点拖进组合节点	组合节点

节点颜色的介绍

我们的节点有3种边框颜色：

1. 蓝色：通常代表这个节点被选中或者激活
   1. 激活的节点会有编辑框弹出，激活的节点同时只有一个节点被激活
   2. 选中的节点一般拖拽节点或者通过Cmd/Ctrl + 点击节点选中，选中的节点可以有多个节点被选中，还可以通过Shift + 鼠标长按拖拽，框选一块区域的节点
2. 橙色：通常代表这个节点被搜索条件命中
3. 红色：通常代表这个节点里面有编辑项填写有误或者必填项没有填写

连线介绍

我们一共有三种连线方式：

1. 节点禁用，和禁用的节点相关的连线时一种灰色的虚线。
2. 普通连线，正常的连线是蓝色的实线。
3. 异常处理，从节点处理异常情况连出来的是红色的虚线。

• 连线大约在连接桩附近50px范围可以自动吸附到节点上面
• 双击连线，即可删除此条连线

其他功能介绍

• 支持多选（Cmd/Ctrl + 鼠标点击）节点，批量复制/粘贴（Ctrl + C / Ctrl + V）
• 支持框选（Shift + 鼠标长按拖拽）节点，批量复制/粘贴
• 多选之后支持delete批量删除
• 多选之后支持批量移动
• 多选之后支持点击组合节点，将选择的符合组合的节点（详细可看功能区的组合节点），组合在一个

调试日志（第四部分）

• 调试日志支持实时更新
• 上一次任务执行结束之后，点开日志区域，查看的是上一次调试日志的结果

节点内容填写（第五部分）

具体的节点介绍，后续章节将会一一介绍。