流程控制-01-vue3项目创建
项目创建
npm create vite@latest flow-control-demo -- --template vue
npm install
npm run devhttp://localhost:5173/ 可以查看效果
页面需求
帮我实现一个简易版本的测试平台前端 vue3，支持循环控制，循环/if 等。
每个步骤，支持定义左侧改为真正的树形多层嵌套结构，点击后右侧可以自定义名称，设置对应的基本信息（保存后生效）。
左侧树支持右键：新增、删除、复制、上下移动。
支持类型包含循环控制，脚本，http，整体保存后是一个 json 结构，方便后端执行处理。
给出页面好看的 vue3 实现
要求
尽可能的组件化
页面大气
vue3+elementui
按照页面分类，一个个 vue 页面分别给出
支持的类型有哪些
左侧初始化默认有一个根节点ROOT，只允许创建子节点。点击根节点，右侧有对应的变量信息。
流程控制节点也可以新建子节点。
新建子节点支持的类型有：
1）流程控制：并发循环，串行循环，IF /ELSE IF /ELSE 、finally、tryException
2）远程调用：http（类似 postman 的参数能力）、rpc、kafka
3) 脚本处理：shell 脚本、python 脚本、groovy 脚本
4) 数据加载：SQL、Redis、文件解析
5) 报告模块：调用 email/sms
6）文件模块：scp 复制文件，本地上传文件
要求：
a. 每个模块，涉及到机器登录权限的，允许用户输入选择执行账户。
b. 每个步骤，支持指定超时时间
c. 每个步骤，支持断言
d. 每个步骤，支持使用变量，输出变量
e. 每个子节点步骤，支持复制、删除、上移、下移、拖拽移动。每个步骤，都支持输入步骤名，右侧页面保存后，在菜单左侧同步更新。
f. 每个不同的类型，都实现对应的 vue 组件，方便后续维护拓展。
【优化1】
- 默认有一个根节点ROOT，只允许创建子节点。点击根节点，右侧有对应的变量信息。
变量名 变量值 变量备注，默认只有一行，允许用户修改/增加/删除
支持保存+导出整体的 json。
其他子步骤，保存统一放在最上方右侧。为每一种子步骤添加合适的 meoji logo，左侧保存后同步显示，方便查看。样式尽可能好看。
label 和输入框最好是一行，如何是内容比较多，用 textarea。样式要好看。
不同的子步骤，子页面样式是不同的，你也根据这些实际的情况做一下区分。在左侧树，右键的时候就可以直接选择类型。
以数据加载为例，用户可以输入数据库的基本链接信息（url/username/password/驱动）,执行SQL、结果断言。
【优化2】
- 左侧树，新建子步骤选择的时候，按照分类，做成二级菜单。全部同一级别，太长了。
- ROOT 节点，右键时只允许新建子步骤。点击 ROOT 右侧是变量设置，ROOT 界面不需要说明信息。ROOT 右侧需要保存，导出JSON，导入JSON。
点击导入JSON，可以根据JSON初始化整棵树+右侧基本信息。 - 导出 JSON 只需要 root 页面右侧有。
- 复制节点，调整为复制。复制、上移、下移、删除添加合适的 emoji logo。
- 只有 root 节点和流程控制节点允许有右键新建子步骤，其他节点右键只有复制、上移、下移、删除的基础操作。
- 涉及到SQL脚本、其他编程脚本输入框，使用黑色，更酷炫。
- 左侧树支持拖拽移动到合适的树位置，提升用户体验