diff --git a/apps/vue/src/components/FlowDesign/index.ts b/apps/vue/src/components/FlowDesign/index.ts
new file mode 100644
index 000000000..ef42f5bcd
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/index.ts
@@ -0,0 +1,3 @@
+import ProcessDesign from './src/components/ProcessDesign.vue';
+
+export { ProcessDesign };
diff --git a/apps/vue/src/components/FlowDesign/src/components/Ellipsis.vue b/apps/vue/src/components/FlowDesign/src/components/Ellipsis.vue
new file mode 100644
index 000000000..07b09746c
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/src/components/Ellipsis.vue
@@ -0,0 +1,45 @@
+<template>
+  <div
+    :class="{'line': row === 1, 'lines': row > 1}"
+    :title="hoverTip ? content: ''"
+    :style="{'--row':row}"
+  >
+    <slot name="pre"></slot>
+    {{ content }}
+  </div>
+</template>
+
+<script setup lang="ts">
+
+  defineProps({
+    row: {
+      type: Number,
+      default: 1
+    },
+    hoverTip:{
+      type: Boolean,
+      default: false
+    },
+    content:{
+      type: String,
+      default: ''
+    }
+  });
+
+</script>
+
+<style lang="less" scoped>
+  .line{
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .lines{
+    display: -webkit-box;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: var(--row);
+    -webkit-box-orient: vertical;
+  }
+</style>
diff --git a/apps/vue/src/components/FlowDesign/src/components/InsertButton.vue b/apps/vue/src/components/FlowDesign/src/components/InsertButton.vue
new file mode 100644
index 000000000..81075cf65
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/src/components/InsertButton.vue
@@ -0,0 +1,115 @@
+<template>
+  <Popover placement="bottomLeft" title="添加流程节点" width="350" trigger="click">
+    <template #content>
+      <div class="node-select">
+        <div @click="addApprovalNode">
+          <CheckOutlined class="icon" style="color:rgb(255, 148, 62);" />
+          <span>审批人</span>
+        </div>
+        <div @click="addCcNode">
+          <SendOutlined class="icon" style="color:rgb(50, 150, 250);" />
+          <span>抄送人</span>
+        </div>
+        <div @click="addConditionsNode">
+          <ShareAltOutlined class="icon" style="color:rgb(21, 188, 131);" />
+          <span>条件分支</span>
+        </div>
+        <div @click="addConcurrentsNode">
+          <ThunderboltOutlined class="icon" style="color:#718dff;" />
+          <span>并行分支</span>
+        </div>
+        <div @click="addDelayNode">
+          <ClockCircleOutlined class="icon" style="color:#f25643;" />
+          <span>延迟等待</span>
+        </div>
+        <div @click="addTriggerNode">
+          <SettingOutlined class="icon" style="color:#15BC83;" />
+          <span>触发器</span>
+        </div>
+      </div>
+    </template>
+    <Button type="primary" size="small" shape="circle">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+    </Button>
+  </Popover>
+</template>
+
+<script lang="ts" setup>
+  //import { computed } from 'vue';
+  import { Button, Popover } from 'ant-design-vue';
+  import {
+    CheckOutlined,
+    SendOutlined,
+    ShareAltOutlined,
+    ThunderboltOutlined,
+    ClockCircleOutlined,
+    SettingOutlined,
+    PlusOutlined,
+  } from '@ant-design/icons-vue';
+  //import { useFlowStoreWithOut } from '/@/store/modules/flow';
+
+  const emits = defineEmits(['insertNode']);
+
+  //const flowStore = useFlowStoreWithOut();
+
+  // const selectedNode = computed(() => {
+  //   return flowStore.selectedNode;
+  // });
+
+  function addApprovalNode() {
+    emits('insertNode', "APPROVAL");
+  }
+
+  function addCcNode() {
+    emits('insertNode', "CC");
+  }
+
+  function addDelayNode() {
+    emits('insertNode', "DELAY");
+  }
+
+  function addConditionsNode() {
+    emits('insertNode', "CONDITIONS");
+  }
+
+  function addConcurrentsNode() {
+    emits('insertNode', "CONCURRENTS");
+  }
+
+  function addTriggerNode() {
+    emits('insertNode', "TRIGGER");
+  }
+</script>
+
+<style lang="less" scoped>
+.node-select{
+  div{
+    display: inline-block;
+    margin: 5px 5px;
+    cursor: pointer;
+    padding: 10px 15px;
+    border: 1px solid #F8F9F9;
+    background-color: #F8F9F9;
+    border-radius: 10px;
+    width: 130px;
+    position: relative;
+    span{
+      position: absolute;
+      left: 65px;
+      top: 18px;
+    }
+    &:hover{
+      background-color: #fff;
+      box-shadow: 0 0 8px 2px #d6d6d6;
+    }
+    icon{
+      font-size: 25px;
+      padding: 5px;
+      border: 1px solid #dedfdf;
+      border-radius: 14px;
+    }
+  }
+}
+</style>
diff --git a/apps/vue/src/components/FlowDesign/src/components/OrgItems.vue b/apps/vue/src/components/FlowDesign/src/components/OrgItems.vue
new file mode 100644
index 000000000..c9cd382e7
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/src/components/OrgItems.vue
@@ -0,0 +1,45 @@
+<template>
+   <div style="margin-top: 10px">
+    <template v-for="(org, index) in _value" >
+      <Tag class="org-item" closable @close="removeOrgItem(index)">
+        <template #icon>
+          <InfoOutlined v-if="org.type !== 'dept'" />
+        </template>
+        {{ org.name }}
+      </Tag>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { Tag } from 'ant-design-vue';
+  import { InfoOutlined } from '@ant-design/icons-vue';
+
+  const emits = defineEmits(['input']);
+  const props = defineProps({
+    value: {
+      type: Array as PropType<any[]>,
+      default: () => {
+        return []
+      }
+    },
+  });
+
+  const _value = computed({
+    get: () => props.value,
+    set: (val) => {
+      emits('input', val);
+    },
+  });
+
+  function removeOrgItem(index) {
+    _value.value.splice(index, 1)
+  }
+</script>
+
+<style scoped>
+  .org-item{
+    margin: 5px;
+  }
+</style>
\ No newline at end of file
diff --git a/apps/vue/src/components/FlowDesign/src/components/ProcessDesign.vue b/apps/vue/src/components/FlowDesign/src/components/ProcessDesign.vue
new file mode 100644
index 000000000..41a453817
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/src/components/ProcessDesign.vue
@@ -0,0 +1,141 @@
+<template>
+   <Layout class="main">
+    <div class="scale">
+      <Button class="button" size="small" @click="state.scale += 10" :disabled="state.scale >= 150" shape="circle">
+        <template #icon>
+          <PlusOutlined />
+        </template>
+      </Button>
+      <span>{{ state.scale }}%</span>
+      <Button class="button" size="small" @click="state.scale -= 10" :disabled="state.scale <= 40" shape="circle">
+        <template #icon>
+          <MinusOutlined />
+        </template>
+      </Button>
+     <!-- <Button @click="validate">校验流程</Button> -->
+    </div>
+    <div class="design" :style="'transform: scale('+ state.scale / 100 +');'">
+      <ProcessTree ref="processTreeRef" @selectedNode="nodeSelected"/>
+    </div>
+    <Drawer
+      :title="selectedNode.name"
+      :visible="state.showConfig"
+      destroy-on-close
+      @close="() => state.showConfig = false"
+    >
+      <div slot="title">
+        <Input
+          v-model="selectedNode.name"
+          size="small"
+          v-show="state.showInput"
+          style="width: 300px"
+          @blur="state.showInput = false"
+        >
+        </Input>
+      </div>
+      <div class="node-config-content">
+      </div>
+    </Drawer>
+  </Layout>
+</template>
+
+<script setup lang="ts">
+  import { computed, reactive, ref, unref, onMounted } from 'vue';
+  import { Button, Drawer, Input, Layout } from 'ant-design-vue';
+  import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
+  import { useFlowStoreWithOut } from '/@/store/modules/flow';
+  import ProcessTree from './process/ProcessTree.vue';
+
+  const flowStore = useFlowStoreWithOut();
+  const state = reactive({
+    scale: 100,
+    selected: {} as any,
+    showInput: false,
+    showConfig: false,
+  });
+  const processTreeRef = ref<any>();
+  const selectedNode = computed(() => flowStore.selectedNode);
+
+  onMounted(loadInitFrom);
+
+  function loadInitFrom() {
+    flowStore.loadForm({
+      formId: null,
+      formName: "未命名表单",
+      logo: {
+        icon: "home",
+        background: "#1e90ff"
+      },
+      settings: {
+        commiter: [],
+        admin: [],
+        sign: false,
+        notify: {
+          types: ["APP"],
+          title: "消息通知标题"
+        }
+      },
+      groupId: undefined,
+      formItems:[],
+      process: {
+        id: "root",
+        parentId: null,
+        type: "ROOT",
+        name: "发起人",
+        desc: "任何人",
+        props: {
+          assignedUser: [],
+          formPerms: []
+        },
+        children: {}
+      },
+      remark: "备注说明"
+    });
+  }
+
+  function validate(){
+    const processTree = unref(processTreeRef);
+    return processTree?.validateProcess()
+  }
+
+  function nodeSelected(node){
+    console.log('配置节点', node)
+    state.showConfig = true
+  }
+</script>
+
+<style lang="less" scoped>
+  .main {
+    background: white;
+    height: 100%;
+  }
+  .design {
+    margin-top: 100px;
+    display: flex;
+    transform-origin: 50% 0px 0px;
+  }
+
+  .scale {
+    z-index: 999;
+    position: fixed;
+    top: 80px;
+    right: 40px;
+
+    .button {
+      margin: 0 10px;
+    }
+
+    span {
+      font-size: 15px;
+      color: #7a7a7a;
+    }
+  }
+
+  .node-config-content{
+    padding: 0 20px 20px;
+  }
+
+  :deep(.el-drawer__body){
+    overflow-y: auto;
+  }
+</style>
\ No newline at end of file
diff --git a/apps/vue/src/components/FlowDesign/src/components/config/NodeConfig.vue b/apps/vue/src/components/FlowDesign/src/components/config/NodeConfig.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/vue/src/components/FlowDesign/src/components/config/RootNodeConfig.vue b/apps/vue/src/components/FlowDesign/src/components/config/RootNodeConfig.vue
new file mode 100644
index 000000000..d796fc516
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/src/components/config/RootNodeConfig.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <p class="desc">选择能发起该审批的人员/部门，不选则默认开放给所有人</p>
+    <Button size="small" @click="selectOrg" type="primary" round>请选择</Button>
+    <OrgItems v-model="select"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, reactive } from 'vue';
+  import { Button } from 'ant-design-vue';
+  import OrgItems from "../OrgItems.vue";
+
+  const props = defineProps({
+    config:{
+      type: Object,
+      default: ()=>{
+        return {}
+      }
+    },
+  });
+  const select = computed(() => {
+    return props.config.assignedUser;
+  });
+  const state = reactive({
+    showOrgSelect: false,
+  });
+
+  function selectOrg() {
+    console.log(selectOrg);
+  }
+
+  function selected(sel: any) {
+    select.value.length = 0;
+    select.value.forEach(val => sel.push(val));
+  }
+
+  function removeOrgItem(index: number){
+    select.value.splice(index, 1);
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/apps/vue/src/components/FlowDesign/src/components/config/TriggerNodeConfig.vue b/apps/vue/src/components/FlowDesign/src/components/config/TriggerNodeConfig.vue
new file mode 100644
index 000000000..82545dd8e
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/src/components/config/TriggerNodeConfig.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <Form label-position="top" label-width="90px">
+      <FormItem label="选择触发的动作" prop="text" class="user-type">
+        <RadioGroup v-model="config.type">
+          <Radio label="WEBHOOK">发送网络请求</Radio>
+          <Radio label="EMAIL">发送邮件</Radio>
+        </RadioGroup>
+      </FormItem>
+      <div v-if="config.type === 'WEBHOOK'">
+        <FormItem label="请求地址" prop="text">
+          <Input placeholder="请输入URL地址" size="middle" v-model="config.http.url" >
+            <Select v-model="config.http.method" style="width: 85px;" slot="prepend" placeholder="URL">
+              <Option label="GET" value="GET"></Option>
+              <Option label="POST" value="POST"></Option>
+              <Option label="PUT" value="PUT"></Option>
+              <Option label="DELETE" value="DELETE"></Option>
+            </Select>
+          </Input>
+        </FormItem>
+        <FormItem label="Header请求头" prop="text">
+          <div slot="label">
+            <span style="margin-right: 10px">Header请求头</span>
+            <Button type="text" @click="addItem(config.http.headers)"> + 添加</Button>
+          </div>
+          <div v-for="(header, index) in config.http.headers" :key="header.name">
+            - <Input placeholder="参数名" size="small" style="width: 100px;" v-model="header.name" />
+            <RadioGroup size="small" style="margin: 0 5px;" v-model="header.isField">
+              <RadioButton :label="true">表单</RadioButton>
+              <RadioButton :label="false">固定</RadioButton>
+            </RadioGroup>
+            <Select v-if="header.isField" style="width: 180px;" v-model="header.value" size="small" placeholder="请选择表单字段">
+              <Option v-for="form in forms" :key="form.id" :label="form.title" :value="form.title"></Option>
+            </Select>
+            <Input v-else placeholder="请设置字段值" size="small" v-model="header.value" style="width: 180px;"/>
+            <DeleteOutlined @click="delItem(config.http.headers, index)" style="margin-left: 5px; color: #c75450; cursor: pointer"/>
+          </div>
+        </FormItem>
+        <FormItem label="Header请求参数" prop="text">
+          <div slot="label">
+            <span style="margin-right: 10px">Header请求参数   </span>
+            <Button style="margin-right: 20px" type="text" @click="addItem(config.http.params)">  + 添加</Button>
+            <span>参数类型 - </span>
+            <RadioGroup size="small" style="margin: 0 5px;" v-model="config.http.contentType">
+              <RadioButton label="JSON">json</RadioButton>
+              <RadioButton label="FORM">form</RadioButton>
+            </RadioGroup>
+          </div>
+          <div v-for="(param, index) in config.http.params" :key="param.name">
+            - <Input placeholder="参数名" size="small" style="width: 100px;" v-model="param.name" />
+            <RadioGroup size="small" style="margin: 0 5px;" v-model="param.isField">
+              <RadioButton :label="true">表单</RadioButton>
+              <RadioButton :label="false">固定</RadioButton>
+            </RadioGroup>
+            <Select v-if="param.isField" style="width: 180px;" v-model="param.value" size="small" placeholder="请选择表单字段">
+              <Option v-for="form in forms" :key="form.id" :label="form.title" :value="form.title"></Option>
+            </Select>
+            <Input v-else placeholder="请设置字段值" size="small" v-model="param.value" style="width: 180px;"/>
+            <DeleteOutlined @click="delItem(config.http.params, index)" style="margin-left: 5px; color: #c75450; cursor: pointer"/>
+          </div>
+          <div>
+
+          </div>
+        </FormItem>
+        <FormItem label="请求结果处理" prop="text">
+          <div slot="label">
+            <span>请求结果处理</span>
+            <span style="margin-left: 20px">自定义脚本: </span>
+            <Switch v-model="config.http.handlerByScript"></Switch>
+          </div>
+          <span class="item-desc" v-if="config.http.handlerByScript">
+          👉 返回值为 ture 则流程通过，为 false 则流程将被驳回
+          <div>支持函数
+            <span style="color: dodgerblue">setFormByName(
+              <span style="color: #939494">'表单字段名', '表单字段值'</span>
+              )</span>
+            可改表单数据
+          </div>
+        </span>
+          <span class="item-desc" v-else>👉 无论请求结果如何，均通过</span>
+          <div v-if="config.http.handlerByScript">
+            <div>
+              <span>请求成功😀：</span>
+              <Textarea v-model="config.http.success" :rows="3"></Textarea>
+            </div>
+            <div>
+              <span>请求失败😥：</span>
+              <Textarea v-model="config.http.fail" :rows="3"></Textarea>
+            </div>
+          </div>
+        </FormItem>
+      </div>
+      <div v-else-if="config.type === 'EMAIL'">
+        <FormItem label="邮件主题" prop="text">
+          <Input placeholder="请输入邮件主题" size="middle" v-model="config.email.subject" />
+        </FormItem>
+        <FormItem label="收件方" prop="text">
+          <Select size="small" style="width: 100%;" v-model="config.email.to" filterable multiple allow-create default-first-option placeholder="请输入收件人">
+            <Option v-for="item in config.email.to" :key="item" :label="item" :value="item"></Option>
+          </Select>
+        </FormItem>
+        <FormItem label="邮件正文" prop="text">
+          <Textarea v-model="config.email.content" :rows="4" placeholder="邮件内容，支持变量提取表单数据 ${表单字段名} "></Textarea>
+        </FormItem>
+      </div>
+    </Form>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, reactive, toRefs } from 'vue';
+  import { Button, Form, Input, Select, Switch, Textarea, Radio } from 'ant-design-vue';
+  import { DeleteOutlined } from '@ant-design/icons-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useFlowStoreWithOut } from '/@/store/modules/flow';
+
+  const FormItem = Form.Item;
+  const Option = Select.Option;
+  const RadioGroup = Radio.Group;
+  const RadioButton = Radio.Button;
+
+  const flowStore = useFlowStoreWithOut();
+  
+  defineProps({
+    config:{
+      type: Object,
+      default: ()=>{
+        return {}
+      }
+    },
+  });
+  const forms = computed(() => {
+    return flowStore.design.formItems || [];
+  });
+  const state = reactive({
+    cmOptions:{
+      tabSize: 4, // tab
+      indentUnit: 4,
+      styleActiveLine: true, // 高亮选中行
+      lineNumbers: true, // 显示行号
+      styleSelectedText: true,
+      line: true,
+      foldGutter: true, // 块槽
+      gutters: ['CodeMirror-linenumbers', "lock", "warn"],
+      highlightSelectionMatches: { showToken: /w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
+      mode:'javascript',
+      // hint.js options
+      hintOptions: {
+        // 当匹配只有一项的时候是否自动补全
+        completeSingle: false
+      },
+      // 快捷键 可提供三种模式 sublime、emacs、vim
+      keyMap: 'sublime',
+      matchBrackets: true,
+      showCursorWhenSelecting: false,
+      // scrollbarStyle:null,
+      // readOnly:true,  //是否只读
+      theme: 'material', // 主题 material
+      extraKeys: { 'Ctrl': 'autocomplete' }, // 可以用于为编辑器指定额外的键绑定，以及keyMap定义的键绑定
+      lastLineBefore:0
+    }
+  });
+  const { createMessage } = useMessage();
+
+  function addItem(items: any){
+    if (items.length > 0 && (items[items.length - 1].name.trim() === ''
+        || items[items.length - 1].value.trim() === '')) {
+      createMessage.warning("请完善之前项后在添加");
+      return;
+    }
+    items.push({name: '', value: '', isField: true});
+  }
+
+  function delItem(items: any, index: number){
+    items.splice(index, 1);
+  }
+
+  defineExpose({
+    ...toRefs(state),
+  });
+</script>
+
+<style lang="less" scoped>
+  .item-desc{
+    color: #939494;
+  }
+</style>
diff --git a/apps/vue/src/components/FlowDesign/src/components/nodes/ApprovalNode.vue b/apps/vue/src/components/FlowDesign/src/components/nodes/ApprovalNode.vue
new file mode 100644
index 000000000..c742ef498
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/src/components/nodes/ApprovalNode.vue
@@ -0,0 +1,161 @@
+<template>
+  <Node
+    :title="config.name"
+    :show-error="state.showError"
+    :content="content"
+    :error-info="state.errorInfo"
+    @selected="$emit('selected')"
+    @delNode="$emit('delNode')"
+    @insertNode="type => $emit('insertNode', type)"
+    placeholder="请设置审批人"
+    header-bgc="#ff943e"
+  >
+    <template #headerIcon>
+      <UserOutlined />
+    </template>
+  </Node>
+</template>
+
+<script setup lang="ts">
+  import { computed, reactive } from 'vue';
+  import { UserOutlined } from '@ant-design/icons-vue';
+  import { useFlowStoreWithOut } from '/@/store/modules/flow';
+  import Node from './Node.vue';
+
+  defineEmits(['delNode', 'insertNode', 'selected']);
+  const props = defineProps({
+    config:{
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+  });
+  const content = computed(() => {
+    console.log('props', props);
+    const config = props.config.props;
+    switch (config.assignedType) {
+      case "ASSIGN_USER":
+        if (config.assignedUser.length > 0) {
+          let texts: string[] = [];
+          config.assignedUser.forEach(org => texts.push(org.name));
+          return String(texts).replaceAll(',', '、');
+        } else {
+          return '请指定审批人';
+        }
+      case "SELF":
+        return '发起人自己';
+      case "SELF_SELECT":
+        return config.selfSelect.multiple ? '发起人自选多人':'发起人自选一人';
+      case "LEADER_TOP":
+        return '多级主管依次审批';
+      case "LEADER":
+        return config.leader.level > 1 ? '发起人的第 ' + config.leader.level + ' 级主管' : '发起人的直接主管';
+      case "FORM_USER":
+        if (!config.formUser || config.formUser === '') {
+          return '表单内联系人（未选择）';
+        } else {
+          let text = getFormItemById(config.formUser);
+          if (text && text.title) {
+            return `表单（${text.title}）内的人员`;
+          }else {
+            return '该表单已被移除😥';
+          }
+        }
+      case "ROLE":
+        if (config.role.length > 0) {
+          return String(config.role).replaceAll(',', '、');
+        } else {
+          return '指定角色（未设置）';
+        }
+        default: return '未知设置项😥';
+    }
+  });
+  const state = reactive({
+    showError: false,
+    errorInfo: '',
+    validate: {} as any,
+  });
+  const flowStore = useFlowStoreWithOut();
+
+  function getFormItemById(id: any) {
+    return flowStore.design.formItems.find(item => item.id === id);
+  }
+
+  function validate(err: string[]) {
+    try {
+      return state.showError = !state.validate[`validate_${props.config.props.assignedType}`](err);
+    } catch (e) {
+      return true;
+    }
+  }
+
+  function validate_ASSIGN_USER(err: string[]) {
+    if (props.config.props.assignedUser.length > 0) {
+      return true;
+    } else {
+      state.errorInfo = '请指定审批人员';
+      err.push(`${props.config.name} 未指定审批人员`);
+      return false;
+    }
+  }
+
+  function validate_SELF_SELECT(err: string[]) {
+    console.log(err);
+    return true;
+  }
+
+  function validate_LEADER_TOP(err: string[]) {
+    console.log(err);
+    return true;
+  }
+
+  function validate_LEADER(err: string[]) {
+    console.log(err);
+    return true;
+  }
+
+  function validate_ROLE(err: string[]) {
+    if (props.config.props.role.length <= 0) {
+      state.errorInfo = '请指定负责审批的系统角色';
+      err.push(`${props.config.name} 未指定审批角色`);
+      return false;
+    }
+    return true;
+  }
+
+  function validate_SELF(err: string[]) {
+    console.log(err);
+    return true;
+  }
+
+  function validate_FORM_USER(err: string[]) {
+    if (props.config.props.formUser === '') {
+      state.errorInfo = '请指定表单中的人员组件';
+      err.push(`${props.config.name} 审批人为表单中人员，但未指定`);
+      return false;
+    }
+    return true;
+  }
+
+  function validate_REFUSE(err: string[]){
+    console.log(err);
+    return true;
+  }
+
+  defineExpose({
+    validate,
+    validate_ASSIGN_USER,
+    validate_SELF_SELECT,
+    validate_LEADER_TOP,
+    validate_LEADER,
+    validate_ROLE,
+    validate_SELF,
+    validate_FORM_USER,
+    validate_REFUSE,
+  });
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/apps/vue/src/components/FlowDesign/src/components/nodes/CcNode.vue b/apps/vue/src/components/FlowDesign/src/components/nodes/CcNode.vue
new file mode 100644
index 000000000..4bb292bd7
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/src/components/nodes/CcNode.vue
@@ -0,0 +1,76 @@
+<template>
+  <Node
+    :title="config.name"
+    :show-error="state.showError"
+    :content="content"
+    :error-info="state.errorInfo"
+    @selected="$emit('selected')"
+    @delNode="$emit('delNode')"
+    @insertNode="type => $emit('insertNode', type)"
+    placeholder="请设置抄送人"
+    header-bgc="#3296fa"
+  >
+    <template #headerIcon>
+      <SettingOutlined />
+    </template>
+  </Node>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'CC',
+  };
+</script>
+
+<script setup lang="ts">
+  import { computed, reactive } from 'vue';
+  import { SettingOutlined } from '@ant-design/icons-vue';
+  import Node from './Node.vue';
+
+  defineEmits(['delNode', 'insertNode', 'selected']);
+  const props = defineProps({
+    config:{
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+  });
+  const content = computed(() => {
+    if (props.config.props.shouldAdd){
+      return '由发起人指定';
+    }else if (props.config.props.assignedUser.length > 0) {
+      let texts: string[] = [];
+      props.config.props.assignedUser.forEach(org => texts.push(org.name));
+      return String(texts).replaceAll(',', '、');
+    } else {
+      return undefined;
+    }
+  });
+  const state = reactive({
+    showError: false,
+    errorInfo: '',
+  });
+   //校验数据配置的合法性
+  function validate(err: string[]){
+    state.showError = false;
+    if (props.config.props.shouldAdd) {
+      state.showError = false;
+    } else if(props.config.props.assignedUser.length === 0) {
+      state.showError = true;
+      state.errorInfo = '请选择需要抄送的人员';
+    }
+    if (state.showError) {
+      err.push(`抄送节点 ${props.config.name} 未设置抄送人`);
+    }
+    return !state.showError;
+  }
+
+  defineExpose({
+    validate,
+  });
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/apps/vue/src/components/FlowDesign/src/components/nodes/ConcurrentNode.vue b/apps/vue/src/components/FlowDesign/src/components/nodes/ConcurrentNode.vue
new file mode 100644
index 000000000..9233d1559
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/src/components/nodes/ConcurrentNode.vue
@@ -0,0 +1,184 @@
+<template>
+  <div class="node">
+    <div class="node-body" @click="$emit('selected')">
+      <div class="node-body-left" @click.stop="$emit('leftMove')" v-if="level > 1">
+        <LeftOutlined />
+      </div>
+      <div class="node-body-main">
+        <div class="node-body-main-header">
+          <span class="title">
+            <SettingOutlined />
+            <Ellipsis class="name" hover-tip :content="config.name ? config.name:('并行任务' + level)"/>
+          </span>
+          <span class="option">
+            <Tooltip effect="dark" content="复制分支" placement="top">
+              <CopyOutlined @click="$emit('copy')" />
+            </Tooltip>
+            <CloseOutlined @click.stop="$emit('delNode')" />
+          </span>
+        </div>
+        <div class="node-body-main-content">
+          <span>并行任务（同时进行）</span>
+        </div>
+      </div>
+      <div class="node-body-right" @click.stop="$emit('rightMove')" v-if="level < size">
+        <RightOutlined />
+      </div>
+    </div>
+    <div class="node-footer">
+      <div class="btn">
+        <InsertButton @insertNode="type => $emit('insertNode', type)"></InsertButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'Concurrent',
+  };
+</script>
+
+<script setup lang="ts">
+  import { Tooltip } from 'ant-design-vue';
+  import { LeftOutlined, RightOutlined, CloseOutlined, CopyOutlined, SettingOutlined } from '@ant-design/icons-vue';
+  import Ellipsis from '../Ellipsis.vue';
+  import InsertButton from '../InsertButton.vue'
+
+  defineEmits(['delNode', 'insertNode', 'leftMove', 'rightMove', 'selected']);
+  defineProps({
+    config:{
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    level:{
+      type: Number,
+      default: 1
+    },
+    //条件数
+    size:{
+      type: Number,
+      default: 0
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .node{
+    padding: 30px 55px 0;
+    width: 330px;
+    .node-body{
+      overflow: hidden;
+      cursor: pointer;
+      min-height: 80px;
+      max-height: 120px;
+      position: relative;
+      border-radius: 5px;
+      background-color: white;
+      box-shadow: 0px 0px 5px 0px #d8d8d8;
+      &:hover{
+        .node-body-left, .node-body-right{
+          i{
+            display: block !important;
+          }
+        }
+        .node-body-main {
+          .option{
+            display: inline-block !important;
+          }
+        }
+        box-shadow: 0px 0px 3px 0px @primary-color;
+      }
+      .node-body-left, .node-body-right{
+        display: flex;
+        align-items: center;
+        position: absolute;
+        height: 100%;
+        i{
+          display: none;
+        }
+        &:hover{
+          background-color: #ececec;
+        }
+      }
+      .node-body-left{
+        left: 0;
+      }
+      .node-body-right{
+        right: 0;
+      }
+      .node-body-main {
+        position: absolute;
+        width: 188px;
+        left: 17px;
+        display: inline-block;
+
+        .node-body-main-header{
+          padding: 10px 0px 5px;
+          font-size: xx-small;
+          position: relative;
+          .title{
+            color: #718dff;
+            .name{
+              display: inline-block;
+              height: 14px;
+              width: 130px;
+              margin-left: 2px;
+            }
+          }
+          .option{
+            position: absolute;
+            right: 0;
+            display: none;
+            font-size: medium;
+            i{
+              color: #888888;
+              padding: 0 3px;
+            }
+          }
+        }
+        .node-body-main-content {
+          padding: 6px;
+          color: #656363;
+          font-size: 14px;
+
+          i {
+            position: absolute;
+            top: 55%;
+            right: 10px;
+            font-size: medium;
+          }
+        }
+      }
+    }
+
+    .node-footer{
+      position: relative;
+      .btn{
+        width: 100%;
+        display: flex;
+        height: 70px;
+        padding: 20px 0 32px;
+        justify-content: center;
+      }
+      :deep(.a-button) {
+        height: 32px;
+      }
+      &::before{
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: -1;
+        margin: auto;
+        width: 2px;
+        height: 100%;
+        background-color: #CACACA;
+      }
+    }
+  }
+</style>
diff --git a/apps/vue/src/components/FlowDesign/src/components/nodes/ConditionNode.vue b/apps/vue/src/components/FlowDesign/src/components/nodes/ConditionNode.vue
new file mode 100644
index 000000000..a6f21f304
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/src/components/nodes/ConditionNode.vue
@@ -0,0 +1,330 @@
+<template>
+   <div :class="{'node': true, 'node-error-state': state.showError}">
+    <div :class="{'node-body': true, 'error': state.showError}">
+      <div class="node-body-left" @click="$emit('leftMove')" v-if="level > 1">
+        <LeftOutlined />
+      </div>
+      <div class="node-body-main" @click="$emit('selected')">
+        <div class="node-body-main-header">
+          <Ellipsis class="title" hover-tip :content="config.name ? config.name : ('条件' + level)"/>
+          <span class="level">优先级{{ level }}</span>
+          <span class="option">
+            <Tooltip effect="dark" content="复制条件" placement="top">
+              <CopyOutlined @click.stop="$emit('copy')" />
+            </Tooltip>
+            <CloseOutlined class="icon-close" @click.stop="$emit('delNode')" />
+          </span>
+        </div>
+        <div class="node-body-main-content">
+          <span class="placeholder" v-if="(content || '').trim() === ''">{{ state.placeholder }}</span>
+          <Ellipsis hoverTip :row="4" :content="content" v-else/>
+        </div>
+      </div>
+      <div class="node-body-right" @click="$emit('rightMove')" v-if="level < size">
+        <RightOutlined />
+      </div>
+      <div class="node-error" v-if="state.showError">
+        <Tooltip effect="dark" :content="state.errorInfo" placement="top">
+          <WarningOutlined />
+        </Tooltip>
+      </div>
+    </div>
+    <div class="node-footer">
+      <div class="btn">
+        <InsertButton @insertNode="type => $emit('insertNode', type)"></InsertButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'Condition',
+  };
+</script>
+
+<script setup lang="ts">
+  import { computed, reactive } from 'vue';
+  import { Tooltip } from 'ant-design-vue';
+  import { RightOutlined, CloseOutlined, CopyOutlined, LeftOutlined, WarningOutlined } from '@ant-design/icons-vue';
+  import Ellipsis from '../Ellipsis.vue';
+  import InsertButton from '../InsertButton.vue'
+
+  defineEmits(['delNode', 'insertNode', 'leftMove', 'rightMove', 'selected']);
+  const props = defineProps({
+    config: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    //索引位置
+    level: {
+      type: Number,
+      default: 1
+    },
+    //条件数
+    size: {
+      type: Number,
+      default: 0
+    },
+  });
+  const content = computed(() => {
+    console.log('props', props);
+    const groups = props.config.props.groups;
+    let confitions: string[] = [];
+    groups.forEach(group => {
+      let subConditions: string[] = [];
+      group.conditions.forEach(subCondition => {
+        let subConditionStr = '';
+        switch (subCondition.valueType) {
+          case 'dept':
+          case 'user':
+            subConditionStr = `${subCondition.title}属于[${String(subCondition.value.map(u => u.name)).replaceAll(',', '. ')}]之一`;
+            break;
+          case 'number':
+          case 'string':
+            subConditionStr = getOrdinaryConditionContent(subCondition);
+            break;
+        }
+        subConditions.push(subConditionStr);
+      })
+      //根据子条件关系构建描述
+      let subConditionsStr = String(subConditions)
+          .replaceAll(',', subConditions.length > 1 ?
+              (group.groupType === 'AND' ? ') 且 (' : ') 或 (') :
+              (group.groupType === 'AND' ? ' 且 ' : ' 或 '))
+      confitions.push(subConditions.length > 1 ? `(${subConditionsStr})` : subConditionsStr);
+    })
+    //构建最终描述
+    return String(confitions).replaceAll(',', (props.config.props.groupsType === 'AND' ? ' 且 ' : ' 或 '));
+  });
+  const state = reactive({
+    groupNames: [] as string[],
+    placeholder: '请设置条件',
+    errorInfo: '',
+    showError: false
+  });
+
+  function getDefault(val, df) {
+    return val && val !== '' ? val : df;
+  }
+
+  function getOrdinaryConditionContent(subCondition: any) {
+    switch (subCondition.compare) {
+      case 'IN':
+        return `${subCondition.title}为[${String(subCondition.value).replaceAll(',', '、')}]中之一`;
+      case 'B':
+        return `${subCondition.value[0]} < ${subCondition.title} < ${subCondition.value[1]}`;
+      case 'AB':
+        return `${subCondition.value[0]} ≤ ${subCondition.title} < ${subCondition.value[1]}`;
+      case 'BA':
+        return `${subCondition.value[0]} < ${subCondition.title} ≤ ${subCondition.value[1]}`;
+      case 'ABA':
+        return `${subCondition.value[0]} ≤ ${subCondition.title} ≤ ${subCondition.value[1]}`;
+      case '<=':
+        return `${subCondition.title} ≤ ${getDefault(subCondition.value[0], ' ?')}`;
+      case '>=':
+        return `${subCondition.title} ≥ ${getDefault(subCondition.value[0], ' ?')}`;
+      default:
+        return `${subCondition.title}${subCondition.compare}${getDefault(subCondition.value[0], ' ?')}`;
+    }
+  }
+
+  function validate(err: string[]) {
+    const thatProps = props.config.props;
+    if (thatProps.groups.length <= 0) {
+      state.showError = true;
+      state.errorInfo = '请设置分支条件';
+      err.push(`${props.config.name} 未设置条件`);
+    }else {
+      for (let i = 0; i < thatProps.groups.length; i++) {
+        if (thatProps.groups[i].cids.length === 0) {
+          state.showError = true;
+          state.errorInfo = `请设置条件组${thatProps.groupNames[i]}内的条件`;
+          err.push(`条件 ${props.config.name} 条件组${thatProps.groupNames[i]}内未设置条件`);
+          break;
+        }else {
+          let conditions = thatProps.groups[i].conditions;
+          for (let ci = 0; ci < conditions.length; ci++) {
+            let subc = conditions[ci];
+            if (subc.value.length === 0) {
+              state.showError = true;
+            } else {
+              state.showError = false;
+            }
+            if (state.showError) {
+              state.errorInfo = `请完善条件组${thatProps.groupNames[i]}内的${subc.title}条件`;
+              err.push(`条件 ${props.config.name} 条件组${thatProps.groupNames[i]}内${subc.title}条件未完善`);
+              return false;
+            }
+          }
+        }
+      }
+    }
+    return !state.showError;
+  }
+
+  defineExpose({
+    validate,
+  });
+</script>
+
+<style lang="less" scoped>
+  .node-error-state {
+    .node-body {
+      box-shadow: 0px 0px 5px 0px #F56C6C !important;
+    }
+  }
+
+  .node {
+    padding: 30px 55px 0;
+    width: 330px;
+    .node-body {
+      cursor: pointer;
+      min-height: 80px;
+      max-height: 120px;
+      position: relative;
+      border-radius: 5px;
+      background-color: white;
+      box-shadow: 0px 0px 5px 0px #d8d8d8;
+
+      &:hover {
+        .node-body-left, .node-body-right {
+          i {
+            display: block !important;
+          }
+        }
+
+        .node-body-main {
+          .level {
+            display: none !important;
+          }
+
+          .option {
+            display: inline-block !important;
+          }
+        }
+
+        box-shadow: 0px 0px 3px 0px @primary-color;
+      }
+
+      .node-body-left, .node-body-right {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        height: 100%;
+
+        i {
+          display: none;
+        }
+
+        &:hover {
+          background-color: #ececec;
+        }
+      }
+
+      .node-body-left {
+        left: 0;
+      }
+
+      .node-body-right {
+        right: 0;
+        top: 0;
+      }
+
+      .node-body-main {
+        position: absolute;
+        width: 188px;
+        margin-left: 17px;
+        display: inline-block;
+
+        .node-body-main-header {
+          padding: 10px 0px 5px;
+          font-size: xx-small;
+          position: relative;
+
+          .title {
+            color: #15bca3;
+            display: inline-block;
+            height: 14px;
+            width: 125px;
+          }
+
+          .level {
+            position: absolute;
+            right: 15px;
+            color: #888888;
+          }
+
+          .option {
+            position: absolute;
+            right: 0;
+            display: none;
+            font-size: medium;
+
+            i {
+              color: #888888;
+              padding: 0 3px;
+            }
+          }
+        }
+
+        .node-body-main-content {
+          padding: 6px;
+          color: #656363;
+          font-size: 14px;
+
+          i {
+            position: absolute;
+            top: 55%;
+            right: 10px;
+            font-size: medium;
+          }
+
+          .placeholder {
+            color: #8c8c8c;
+          }
+        }
+      }
+
+      .node-error {
+        position: absolute;
+        right: -40px;
+        top: 20px;
+        font-size: 25px;
+        color: #F56C6C;
+      }
+    }
+
+    .node-footer {
+      position: relative;
+
+      .btn {
+        width: 100%;
+        display: flex;
+        height: 70px;
+        padding: 20px 0 32px;
+        justify-content: center;
+      }
+
+      :deep(.a-button) {
+        height: 32px;
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: -1;
+        margin: auto;
+        width: 2px;
+        height: 100%;
+        background-color: #CACACA;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/apps/vue/src/components/FlowDesign/src/components/nodes/DelayNode.vue b/apps/vue/src/components/FlowDesign/src/components/nodes/DelayNode.vue
new file mode 100644
index 000000000..013f46005
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/src/components/nodes/DelayNode.vue
@@ -0,0 +1,94 @@
+<template>
+  <Node
+    :title="config.name"
+    :show-error="state.showError"
+    :content="content"
+    :error-info="state.errorInfo"
+    @selected="$emit('selected')"
+    @delNode="$emit('delNode')"
+    @insertNode="type => $emit('insertNode', type)"
+    placeholder="请设置延时时间"
+    header-bgc="#f25643"
+  >
+    <template #headerIcon>
+      <ClockCircleOutlined />
+    </template>
+  </Node>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'Delay',
+  };
+</script>
+
+<script setup lang="ts">
+  import { computed, reactive} from 'vue';
+  import { ClockCircleOutlined } from '@ant-design/icons-vue';
+  import Node from './Node.vue';
+
+  defineEmits(['delNode', 'insertNode', 'selected']);
+  const props = defineProps({
+    config:{
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+  });
+  const state = reactive({
+    showError: false,
+    errorInfo: '',
+  });
+
+  const content = computed(() => {
+    if (props.config.props.type === 'FIXED') {
+      return `等待 ${props.config.props.time} ${getName(props.config.props.unit)}`
+    } else if (props.config.props.type === 'AUTO') {
+      return `至当天 ${props.config.props.dateTime}`
+    } else {
+      return undefined;
+    }
+  });
+
+  function getName(unit: string){
+    switch (unit){
+      case 'D': return '天';
+      case 'H': return '小时';
+      case 'M': return '分钟';
+      default: return '未知';
+    }
+  }
+
+  function validate(err: string[]){
+    state.showError = false;
+    try {
+      if (props.config.props.type === "AUTO") {
+        if ((props.config.props.dateTime || "") === "") {
+          state.showError = true;
+          state.errorInfo = "请选择时间点";
+        }
+      } else {
+        if (props.config.props.time <= 0) {
+          state.showError = true;
+          state.errorInfo = "请设置延时时长";
+        }
+      }
+    } catch (e) {
+      state.showError = true;
+      state.errorInfo = "配置出现问题";
+    }
+    if (state.showError) {
+      err.push(`${props.config.name} 未设置延时规则`);
+    }
+    return !state.showError;
+  }
+
+  defineExpose({
+    validate,
+  });
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/apps/vue/src/components/FlowDesign/src/components/nodes/EmptyNode.vue b/apps/vue/src/components/FlowDesign/src/components/nodes/EmptyNode.vue
new file mode 100644
index 000000000..bb9c4b382
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/src/components/nodes/EmptyNode.vue
@@ -0,0 +1,19 @@
+<template>
+  <Node :show="false" @insertNode="type => $emit('insertNode', type)"/>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'Empty',
+  };
+</script>
+
+<script setup lang="ts">
+  import Node from './Node.vue';
+
+  defineEmits(['insertNode']);
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/apps/vue/src/components/FlowDesign/src/components/nodes/Node.vue b/apps/vue/src/components/FlowDesign/src/components/nodes/Node.vue
new file mode 100644
index 000000000..999826c3d
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/src/components/nodes/Node.vue
@@ -0,0 +1,191 @@
+<template>
+  <div :class="{'node': true, 'root': isRoot || !show, 'node-error-state': showError}">
+    <div v-if="show" @click="$emit('selected')" :class="{'node-body': true, 'error': showError}" >
+      <div>
+        <div class="node-body-header" :style="{'background-color': headerBgc}">
+          <div style="margin-right: 5px">
+            <slot name="headerIcon"></slot>
+          </div>
+          <Ellipsis class="name" hover-tip :content="title"/>
+          <CloseOutlined v-if="!isRoot" class="icon-close" style="float:right;" @click="$emit('delNode')" />
+        </div>
+        <div class="node-body-content">
+          <slot name="leftIcon"></slot>
+          <span class="placeholder" v-if="(content || '').trim() === ''">{{placeholder}}</span>
+          <Ellipsis :row="3" :content="content" v-else/>
+          <RightOutlined class="i" />
+        </div>
+        <div class="node-error" v-if="showError">
+          <Tooltip effect="dark" :content="errorInfo" placement="top">
+            <WarningOutlined />
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+    <div class="node-footer">
+      <div class="btn">
+        <InsertButton @insertNode="type => $emit('insertNode', type)"></InsertButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Tooltip } from 'ant-design-vue';
+  import { RightOutlined, CloseOutlined, WarningOutlined } from '@ant-design/icons-vue';
+  import Ellipsis from '../Ellipsis.vue';
+  import InsertButton from '../InsertButton.vue';
+
+  defineEmits(['delNode', 'insertNode', 'selected']);
+  defineProps({
+    //是否为根节点
+    isRoot: {
+      type: Boolean,
+      default: false
+    },
+    //是否显示节点体
+    show: {
+      type: Boolean,
+      default: true
+    },
+    //节点内容区域文字
+    content: {
+      type: String,
+      default: '',
+    },
+    title:{
+      type: String,
+      default: '标题'
+    },
+    placeholder:{
+      type: String,
+      default: '请设置'
+    },
+    //头部背景色
+    headerBgc:{
+      type: String,
+      default: '#576a95'
+    },
+    //是否显示错误状态
+    showError:{
+      type: Boolean,
+      default: false
+    },
+    errorInfo:{
+      type: String,
+      default: '无信息'
+    },
+  });
+
+</script>
+
+<style lang="less" scoped>
+  .root{
+    &:before{
+      display: none !important;
+    }
+  }
+  .node-error-state{
+    .node-body{
+      box-shadow: 0px 0px 5px 0px #F56C6C !important;
+    }
+  }
+  .node{
+    padding: 0 10px;
+    //width: 220px;
+    position: relative;
+    &:before{
+      content: '';
+      position: absolute;
+      top: -12px;
+      left: 50%;
+      -webkit-transform: translateX(-50%);
+      transform: translateX(-50%);
+      width: 0;
+      border-style: solid;
+      border-width: 8px 6px 4px;
+      border-color: #CACACA transparent transparent;
+      background: #F5F5F7;
+    }
+    .node-body{
+      cursor: pointer;
+      max-height: 120px;
+      position: relative;
+      border-radius: 5px;
+      background-color: white;
+      box-shadow: 0px 0px 5px 0px #d8d8d8;
+      &:hover{
+        box-shadow: 0px 0px 3px 0px @primary-color;
+        .node-body-header {
+          .icon-close {
+            display: inline;
+            font-size: medium;
+          }
+        }
+      }
+      .node-body-header{
+        display: flex;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        padding: 5px 15px;
+        color: white;
+        font-size: xx-small;
+        .icon-close{
+          display: none;
+        }
+        .name{
+          height: 14px;
+          width: 150px;
+          display: inline-block
+        }
+      }
+      .node-body-content{
+        padding: 18px;
+        color: #656363;
+        font-size: 14px;
+        .i{
+          position: absolute;
+          top: 55%;
+          right: 5px;
+          font-size: medium;
+        }
+        .placeholder{
+          color: #8c8c8c;
+        }
+      }
+      .node-error{
+        position: absolute;
+        right: -40px;
+        top: 20px;
+        font-size: 25px;
+        color: #F56C6C;
+      }
+    }
+
+    .node-footer{
+      position: relative;
+      .btn{
+        width: 100%;
+        display: flex;
+        padding: 20px 0 32px;
+        justify-content: center;
+      }
+      :deep(.a-button) {
+        height: 32px;
+      }
+      &::before{
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: -1;
+        margin: auto;
+        width: 2px;
+        height: 100%;
+        background-color: #CACACA;
+      }
+    }
+  }
+</style>
diff --git a/apps/vue/src/components/FlowDesign/src/components/nodes/RootNode.vue b/apps/vue/src/components/FlowDesign/src/components/nodes/RootNode.vue
new file mode 100644
index 000000000..b3d5fd59a
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/src/components/nodes/RootNode.vue
@@ -0,0 +1,52 @@
+<template>
+  <Node
+    title="发起人"
+    :is-root="true"
+    :content="content"
+    @selected="$emit('selected')"
+    @insertNode="type => $emit('insertNode', type)"
+    placeholder="所有人"
+    header-bgc="#576a95"
+    header-icon="el-icon-user-solid"
+  >
+    <template #headerIcon>
+      <HomeOutlined />
+    </template>
+  </Node>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'root',
+  };
+</script>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { HomeOutlined } from '@ant-design/icons-vue';
+  import Node from './Node.vue';
+  
+  defineEmits(['insertNode', 'selected']);
+  const props = defineProps({
+    config:{
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  });
+
+  const content = computed(() => {
+    if (props.config.props?.assignedUser?.length > 0) {
+      let texts: any[] = [];
+      props.config.props.assignedUser.forEach(org => texts.push(org.name));
+      return String(texts).replaceAll(',', '、');
+    } else {
+      return '所有人';
+    }
+  });
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/apps/vue/src/components/FlowDesign/src/components/nodes/TriggerNode.vue b/apps/vue/src/components/FlowDesign/src/components/nodes/TriggerNode.vue
new file mode 100644
index 000000000..900f46441
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/src/components/nodes/TriggerNode.vue
@@ -0,0 +1,79 @@
+<template>
+  <Node
+    :title="config.name"
+    :show-error="state.showError"
+    :error-info="state.errorInfo"
+    @selected="$emit('selected')"
+    @delNode="$emit('delNode')"
+    @insertNode="type => $emit('insertNode', type)"
+    placeholder="请设置触发器"
+    header-bgc="#47bc82"
+  >
+    <template #headerIcon>
+      <SettingOutlined />
+    </template>
+  </Node>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'Trigger',
+  };
+</script>
+
+<script setup lang="ts">
+  import { computed, reactive } from 'vue';
+  import { SettingOutlined } from '@ant-design/icons-vue';
+  import { isNullOrWhiteSpace } from '/@/utils/strings';
+  import Node from './Node.vue';
+
+  defineEmits(['delNode', 'insertNode', 'selected']);
+  const props = defineProps({
+    config:{
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+  });
+
+  computed(() => props.config);
+
+  const state = reactive({
+    showError: false,
+    errorInfo: '',
+  });
+
+  function validate(err: string[]) {
+    state.showError = false;
+    if (props.config.props.type === 'WEBHOOK') {
+      if(!isNullOrWhiteSpace(props.config.props.http.url)) {
+        state.showError = false;
+      } else {
+        state.showError = true;
+        state.errorInfo = '请设置WEBHOOK的URL地址';
+      }
+    } else if(props.config.props.type === 'EMAIL') {
+      if (isNullOrWhiteSpace(props.config.props.email.subject)
+          || props.config.props.email.to.length === 0
+          || isNullOrWhiteSpace(props.config.props.email.content)) {
+        state.showError = true;
+        state.errorInfo = '请设置邮件发送配置';
+      } else {
+        state.showError = false;
+      }
+    }
+    if (state.showError){
+      err.push(`${props.config.name} 触发动作未设置完善`);
+    }
+    return !state.showError;
+  }
+
+  defineExpose({
+    validate,
+  });
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/apps/vue/src/components/FlowDesign/src/components/process/DefaultNodeProps.ts b/apps/vue/src/components/FlowDesign/src/components/process/DefaultNodeProps.ts
new file mode 100644
index 000000000..a56c95657
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/src/components/process/DefaultNodeProps.ts
@@ -0,0 +1,112 @@
+//审批节点默认属性
+export const APPROVAL_PROPS = {
+  assignedType: "ASSIGN_USER",
+  mode: "AND",
+  sign: false,
+  nobody: {
+    handler: "TO_PASS",
+    assignedUser:[]
+  },
+  timeLimit:{
+    timeout:{
+      unit: "H",
+      value: 0
+    },
+    handler:{
+      type: "REFUSE",
+      notify:{
+        once: true,
+        hour: 1
+      }
+    }
+  },
+  assignedUser:[],
+  formPerms:[],
+  selfSelect: {
+    multiple: false
+  },
+  leaderTop: {
+    endCondition: "TOP",
+    endLevel: 1,
+  },
+  leader:{
+    level: 1
+  },
+  role:[],
+  refuse: {
+    type: 'TO_END', //驳回规则 TO_END  TO_NODE  TO_BEFORE
+    target: '' //驳回到指定ID的节点
+  },
+  formUser: ''
+}
+
+//根节点默认属性
+export const ROOT_PROPS = {
+  assignedUser: [],
+  formPerms:[]
+}
+
+//条件节点默认属性
+export const CONDITION_PROPS = {
+  groupsType:"OR", //条件组逻辑关系 OR、AND
+  groups:[
+    {
+      groupType:"AND", //条件组内条件关系 OR、AND
+      cids:[], //条件ID集合
+      conditions:[] //组内子条件
+    }
+  ],
+  expression: "" //自定义表达式，灵活构建逻辑关系
+}
+
+//抄送节点默认属性
+export const CC_PROPS = {
+  shouldAdd: false,
+  assignedUser: [],
+  formPerms:[]
+}
+
+//触发器节点默认属性
+export const TRIGGER_PROPS = {
+  type: 'WEBHOOK',
+  http:{
+    method: 'GET', //请求方法 支持GET/POST
+    url: '', //URL地址，可以直接带参数
+    headers: [ //http header
+      {
+        name: '',
+        isField: true,
+        value: '' //支持表达式 ${xxx} xxx为表单字段名称
+      }
+    ],
+    contentType: 'FORM', //请求参数类型
+    params:[ //请求参数
+      {
+        name: '',
+        isField: true, //是表单字段还是自定义
+        value: '' //支持表达式 ${xxx} xxx为表单字段名称
+      }
+    ],
+    retry: 1,
+    handlerByScript: false,
+    success: 'function handlerOk(res) {\n  return true;\n}',
+    fail: 'function handlerFail(res) {\n  return true;\n}'
+  },
+  email:{
+    subject: '',
+    to: [],
+    content: ''
+  }
+}
+
+//延时节点默认属性
+export const DELAY_PROPS = {
+  type: "FIXED", //延时类型 FIXED:到达当前节点后延时固定时长 、AUTO:延时到 dateTime设置的时间
+  time: 0, //延时时间
+  unit: "M", //时间单位 D天 H小时 M分钟
+  dateTime: "" //如果当天没有超过设置的此时间点，就延时到这个指定的时间，到了就直接跳过不延时
+}
+
+export default {
+  APPROVAL_PROPS, CC_PROPS, DELAY_PROPS, CONDITION_PROPS, ROOT_PROPS, TRIGGER_PROPS
+}
diff --git a/apps/vue/src/components/FlowDesign/src/components/process/ProcessTree.vue b/apps/vue/src/components/FlowDesign/src/components/process/ProcessTree.vue
new file mode 100644
index 000000000..03f95c0df
--- /dev/null
+++ b/apps/vue/src/components/FlowDesign/src/components/process/ProcessTree.vue
@@ -0,0 +1,541 @@
+<script lang="ts">
+  import { computed, defineComponent, reactive, ref, unref, h, resolveComponent, getCurrentInstance } from 'vue';
+  import { Button } from 'ant-design-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useFlowStoreWithOut } from '/@/store/modules/flow';
+  //导入所有节点组件
+  import Approval from '../nodes/ApprovalNode.vue';
+  import Cc from '../nodes/CcNode.vue';
+  import Concurrent from '../nodes/ConcurrentNode.vue';
+  import Condition from '../nodes/ConditionNode.vue';
+  import Trigger from '../nodes/TriggerNode.vue';
+  import Delay from '../nodes/DelayNode.vue';
+  import Empty from '../nodes/EmptyNode.vue';
+  import Root from '../nodes/RootNode.vue';
+  import Node from '../nodes/Node.vue';
+
+  import DefaultProps from "./DefaultNodeProps";
+  import { cloneDeep } from 'lodash-es';
+
+  export default defineComponent({
+    name: 'ProcessTree',
+    components: {
+      Approval,
+      Cc,
+      Concurrent,
+      Condition,
+      Trigger,
+      Delay,
+      Empty,
+      Root,
+      Node,
+    },
+    emits: ['selectedNode'],
+    setup: (_, { emit, expose }) => {
+      const instance = getCurrentInstance();
+
+      const { createMessage } = useMessage();
+      const flowStore = useFlowStoreWithOut();
+      const nodeMap = computed(() => {
+        return flowStore.nodeMap;
+      });
+      const dom = computed(() => {
+        return flowStore.design.process;
+      });
+      const state = reactive({
+        valid: true,
+      });
+      const rootRef = ref<any>();
+
+      function getDomTree(node) {
+        toMapping(node);
+        if (isPrimaryNode(node)){
+          //普通业务节点
+          let childDoms = getDomTree(node.children)
+          decodeAppendDom(node, childDoms)
+          return [h('div', {'class':{'primary-node': true}}, { default: () => childDoms })];
+        } else if (isBranchNode(node)){
+          let index = 0;
+          //遍历分支节点，包含并行及条件节点
+          let branchItems = node.branchs.map(branchNode => {
+            //处理每个分支内子节点
+            toMapping(branchNode);
+            let childDoms = getDomTree(branchNode.children)
+            decodeAppendDom(branchNode, childDoms, {level: index + 1, size: node.branchs.length})
+            //插入4条横线，遮挡掉条件节点左右半边线条
+            insertCoverLine(index, childDoms, node.branchs)
+            //遍历子分支尾部分支
+            index++;
+            return h('div', {'class':{'branch-node-item': true}}, { default: () => childDoms });
+          })
+          //插入添加分支/条件的按钮
+          branchItems.unshift(
+            h(
+              'div',
+              {'class':{'add-branch-btn': true}},
+              { default: () => [
+                h(
+                  Button,
+                  {
+                    'class':{'add-branch-btn-el': true},
+                    size: 'small',
+                    shape : 'round',
+                    onClick: () => addBranchNode(node),
+                    innerHTML: `添加${isConditionNode(node)?'条件':'分支'}`,
+                  },
+                  { default: () => [] })
+              ]}));
+          let bchDom = [h('div', {'class':{'branch-node': true}}, { default: () => branchItems })]
+          //继续遍历分支后的节点
+          let afterChildDoms = getDomTree(node.children)
+          return [h('div', {}, { default: () => [bchDom, afterChildDoms] })]
+        }else if (isEmptyNode(node)){
+          //空节点，存在于分支尾部
+          let childDoms = getDomTree(node.children)
+          decodeAppendDom(node, childDoms)
+          return [h('div', {'class':{'empty-node': true}}, { default: () => childDoms })];
+        }else {
+          //遍历到了末端，无子节点
+          return [];
+        }
+      }
+
+      //解码渲染的时候插入dom到同级
+      function decodeAppendDom(node, dom, props = {} as any){
+        console.log('decodeAppendDom', node);
+        props.config = node
+        const component = resolveComponent(node.type.toLowerCase());
+        dom?.unshift(h(component, {
+          ...props,
+          ref: node.id,
+          key: node.id,
+          //定义事件，插入节点，删除节点，选中节点，复制/移动
+          onInsertNode: (type) => insertNode(type, node),
+          onDelNode: () => delNode(node),
+          onSelected: () => selectNode(node),
+          onCopy: () => copyBranch(node),
+          onLeftMove: () => branchMove(node, -1),
+          onRightMove: () => branchMove(node, 1),
+        }))
+      }
+
+      //id映射到map，用来向上遍历
+      function toMapping(node){
+        if (node && node.id){
+          //console.log("node=> " + node.id + " name:" + node.name + " type:" + node.type)
+          nodeMap.value.set(node.id, node)
+        }
+      }
+
+      function insertCoverLine(index, doms, branchs){
+        if (index === 0){
+          //最左侧分支
+          doms.unshift(h('div', {'class':{'line-top-left': true}}, { default: () => [] }))
+          doms.unshift(h('div', {'class':{'line-bot-left': true}}, { default: () => [] }))
+        } else if (index === branchs.length - 1){
+          //最右侧分支
+          doms.unshift(h('div', {'class':{'line-top-right': true}}, { default: () => [] }))
+          doms.unshift(h('div', {'class':{'line-bot-right': true}}, { default: () => [] }))
+        }
+      }
+
+      function copyBranch(node) {
+        let parentNode = nodeMap.value.get(node.parentId);
+        let branchNode = cloneDeep(node);
+        branchNode.name = branchNode.name + '-copy';
+        forEachNode(parentNode, branchNode, (parent, node) => {
+          let id = getRandomId()
+          console.log(node, '新id =>'+ id, '老nodeId:' + node.id )
+          node.id = id
+          node.parentId = parent.id
+        })
+        parentNode.branchs.splice(parentNode.branchs.indexOf(node), 0, branchNode)
+        instance?.proxy?.$forceUpdate();
+      }
+
+      function branchMove(node, offset){
+        let parentNode = nodeMap.value.get(node.parentId)
+        let index = parentNode.branchs.indexOf(node)
+        let branch = parentNode.branchs[index + offset]
+        parentNode.branchs[index + offset] = parentNode.branchs[index]
+        parentNode.branchs[index] = branch
+        instance?.proxy?.$forceUpdate();
+      }
+
+      //判断是否为主要业务节点
+      function isPrimaryNode(node){
+        return node &&
+            (node.type === 'ROOT' || node.type === 'APPROVAL'
+            || node.type === 'CC' || node.type === 'DELAY'
+                || node.type === 'TRIGGER');
+      }
+
+      function isBranchNode(node){
+        return node && (node.type === 'CONDITIONS' || node.type === 'CONCURRENTS');
+      }
+
+      function isEmptyNode(node){
+        return node && (node.type === 'EMPTY')
+      }
+
+      //是分支节点
+      function isConditionNode(node){
+        return node.type === 'CONDITIONS';
+      }
+
+      //是分支节点
+      function isBranchSubNode(node){
+        return node && (node.type === 'CONDITION' || node.type === 'CONCURRENT');
+      }
+
+      function isConcurrentNode(node){
+        return node.type === 'CONCURRENTS'
+      }
+
+      function getRandomId(){
+        return `node_${new Date().getTime().toString().substring(5)}${Math.round(Math.random()*9000+1000)}`
+      }
+
+      //选中一个节点
+      function selectNode(node){
+        flowStore.selectNode(node);
+        emit('selectedNode', node)
+      }
+
+      //处理节点插入逻辑
+      function insertNode(type, parentNode){
+        console.log('insertNode', type, parentNode);
+        const rootEl = unref(rootRef);
+        rootEl?.click()
+        //缓存一下后面的节点
+        let afterNode = parentNode.children
+        //插入新节点
+        parentNode.children = {
+          id: getRandomId(),
+          parentId: parentNode.id,
+          props: {},
+          type: type,
+        }
+        switch (type){
+          case 'APPROVAL': insertApprovalNode(parentNode); break;
+          case 'CC': insertCcNode(parentNode); break;
+          case 'DELAY': insertDelayNode(parentNode); break;
+          case 'TRIGGER': insertTriggerNode(parentNode); break;
+          case 'CONDITIONS': insertConditionsNode(parentNode); break;
+          case 'CONCURRENTS': insertConcurrentsNode(parentNode); break;
+          default: break;
+        }
+        //拼接后续节点
+        if (isBranchNode({type: type})){
+          if (afterNode && afterNode.id){
+            afterNode.parentId = parentNode.children.children.id
+          }
+          parentNode.children.children.children = afterNode;
+        } else {
+          if (afterNode && afterNode.id){
+            afterNode.parentId = parentNode.children.id
+          }
+          parentNode.children.children = afterNode;
+        }
+        instance?.proxy?.$forceUpdate();
+      }
+
+      function insertApprovalNode(parentNode){
+        parentNode.children.name = '审批人';
+        parentNode.children.props = cloneDeep(DefaultProps.APPROVAL_PROPS);
+        console.log('parentNode', parentNode);
+      }
+
+      function insertCcNode(parentNode){
+        parentNode.children.name = '抄送人';
+        parentNode.children.props = cloneDeep(DefaultProps.CC_PROPS);
+      }
+
+      function insertDelayNode(parentNode){
+        parentNode.children.name = '延时处理';
+        parentNode.children.props = cloneDeep(DefaultProps.DELAY_PROPS);
+      }
+
+      function insertTriggerNode(parentNode){
+        parentNode.children.name = '触发器';
+        parentNode.children.props = cloneDeep(DefaultProps.TRIGGER_PROPS);
+      }
+
+      function insertConditionsNode(parentNode){
+        parentNode.children.name = '条件分支';
+        parentNode.children.children = {
+          id: getRandomId(),
+          parentId: parentNode.children.id,
+          type: "EMPTY"
+        };
+        parentNode.children.branchs = [
+          {
+            id: getRandomId(),
+            parentId: parentNode.children.id,
+            type: "CONDITION",
+            props: cloneDeep(DefaultProps.CONDITION_PROPS),
+            name: "条件1",
+            children:{}
+          },{
+            id: getRandomId(),
+            parentId: parentNode.children.id,
+            type: "CONDITION",
+            props: cloneDeep(DefaultProps.CONDITION_PROPS),
+            name: "条件2",
+            children:{}
+          }
+        ];
+      }
+
+      function insertConcurrentsNode(parentNode){
+        parentNode.children.name = '并行分支';
+        parentNode.children.children = {
+          id: getRandomId(),
+          parentId: parentNode.children.id,
+          type: "EMPTY"
+        };
+        parentNode.children.branchs = [
+          {
+            id: getRandomId(),
+            name: "分支1",
+            parentId: parentNode.children.id,
+            type: "CONCURRENT",
+            props: {},
+            children:{}
+          },{
+            id: getRandomId(),
+            name: "分支2",
+            parentId: parentNode.children.id,
+            type: "CONCURRENT",
+            props: {},
+            children:{}
+          }
+        ];
+      }
+
+      function getBranchEndNode(conditionNode){
+        if (!conditionNode.children || !conditionNode.children.id){
+          return conditionNode;
+        }
+        return getBranchEndNode(conditionNode.children);
+      }
+
+      function addBranchNode(node){
+        if (node.branchs.length < 8){
+          node.branchs.push({
+            id: getRandomId(),
+            parentId: node.id,
+            name: (isConditionNode(node) ? '条件':'分支') + (node.branchs.length + 1),
+            props: isConditionNode(node) ? cloneDeep(DefaultProps.CONDITION_PROPS):{},
+            type: isConditionNode(node) ? "CONDITION":"CONCURRENT",
+            children:{}
+          })
+        } else {
+          createMessage.warning("最多只能添加 8 项😥");
+        }
+      }
+
+      //删除当前节点
+      function delNode(node){
+        console.log("删除节点", node);
+        //获取该节点的父节点
+        let parentNode = nodeMap.value.get(node.parentId)
+        if (parentNode){
+          //判断该节点的父节点是不是分支节点
+          if (isBranchNode(parentNode)){
+            //移除该分支
+            parentNode.branchs.splice(parentNode.branchs.indexOf(node), 1)
+            //处理只剩1个分支的情况
+            if (parentNode.branchs.length < 2){
+              //获取条件组的父节点
+              let ppNode = nodeMap.value.get(parentNode.parentId)
+              //判断唯一分支是否存在业务节点
+              if (parentNode.branchs[0].children && parentNode.branchs[0].children.id){
+                //将剩下的唯一分支头部合并到主干
+                ppNode.children = parentNode.branchs[0].children
+                ppNode.children.parentId = ppNode.id
+                //搜索唯一分支末端最后一个节点
+                let endNode = getBranchEndNode(parentNode.branchs[0])
+                //后续节点进行拼接, 这里要取EMPTY后的节点
+                endNode.children = parentNode.children.children
+                if (endNode.children && endNode.children.id){
+                  endNode.children.parentId = endNode.id
+                }
+              }else {
+                //直接合并分支后面的节点，这里要取EMPTY后的节点
+                ppNode.children = parentNode.children.children
+                if (ppNode.children && ppNode.children.id){
+                  ppNode.children.parentId = ppNode.id
+                }
+              }
+            }
+          }else {
+            //不是的话就直接删除
+            if (node.children && node.children.id) {
+              node.children.parentId = parentNode.id
+            }
+            parentNode.children = node.children
+          }
+          instance?.proxy?.$forceUpdate();
+        } else {
+          createMessage.warning("出现错误，找不到上级节点😥")
+        }
+      }
+
+      function validateProcess(){
+        state.valid = true
+        let err = []
+        validate(err, dom.value)
+        return err
+      }
+
+      function validateNode(err, node){
+        const nodeRef = instance?.refs[node.id] as unknown as any;
+        if (nodeRef?.validate){
+          state.valid = nodeRef.validate(err)
+        }
+      }
+
+      //更新指定节点的dom
+      function nodeDomUpdate(node){
+        const nodeRef = instance?.refs[node.id] as unknown as any;
+        nodeRef?.$forceUpdate()
+      }
+
+      //给定一个起始节点，遍历内部所有节点
+      function forEachNode(parent, node, callback){
+        if (isBranchNode(node)){
+          callback(parent, node)
+          forEachNode(node, node.children, callback)
+          node.branchs.map(branchNode => {
+            callback(node, branchNode)
+            forEachNode(branchNode, branchNode.children, callback)
+          })
+        } else if (isPrimaryNode(node) || isEmptyNode(node) || isBranchSubNode(node)){
+          callback(parent, node)
+          forEachNode(node, node.children, callback)
+        }
+      }
+
+      //校验所有节点设置
+      function validate(err, node){
+        if (isPrimaryNode(node)){
+          validateNode(err, node)
+          validate(err, node.children)
+        } else if (isBranchNode(node)){
+          //校验每个分支
+          node.branchs.map(branchNode => {
+            //校验条件节点
+            validateNode(err, branchNode)
+            //校验条件节点后面的节点
+            validate(err, branchNode.children)
+          })
+          validate(err, node.children)
+        } else if (isEmptyNode(node)){
+          validate(err, node.children)
+        }
+      }
+
+      expose({
+        validateProcess,
+      });
+
+      return () => {
+        nodeMap.value.clear();
+        let processTrees = getDomTree(dom.value);
+        //插入末端节点
+        processTrees.push(
+          h('div', 
+            {style:{'text-align': 'center'}},
+            { default: () => [h('div', {class:{'process-end': true}, innerHTML:'流程结束'})]}
+          ));
+        return h('div', {class:{'_root': true}, ref: rootRef}, { default: () => processTrees });
+      }
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  ._root{
+    margin: 0 auto;
+  }
+  .process-end{
+    width: 100px;
+    margin: 0 auto;
+    margin-bottom: 20px;
+    border-radius: 15px;
+    padding: 5px 10px;
+    font-size: small;
+    color: #747474;
+    background-color: #f2f2f2;
+    box-shadow: 0 0 10px 0 #bcbcbc;
+  }
+  .primary-node{
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  }
+  .branch-node{
+    display: flex;
+    justify-content: center;
+    /*border-top: 2px solid #cccccc;
+    border-bottom: 2px solid #cccccc;*/
+  }
+  .branch-node-item{
+    position: relative;
+    display: flex;
+    background: white;
+    flex-direction: column;
+    align-items: center;
+    border-top: 2px solid #cccccc;
+    border-bottom: 2px solid #cccccc;
+    &:before{
+      content: "";
+      position: absolute;
+      top: 0;
+      left: calc(50% - 1px);
+      margin: auto;
+      width: 2px;
+      height: 100%;
+      background-color: #CACACA;
+    }
+    .line-top-left, .line-top-right, .line-bot-left, .line-bot-right{
+      position: absolute;
+      width: 50%;
+      height: 4px;
+      background-color: white;
+    }
+    .line-top-left{
+      top: -2px;
+      left: -1px;
+    }
+    .line-top-right{
+      top: -2px;
+      right: -1px;
+    }
+    .line-bot-left{
+      bottom: -2px;
+      left: -1px;
+    }
+    .line-bot-right{
+      bottom: -2px;
+      right: -1px;
+    }
+  }
+  .add-branch-btn{
+    position: absolute;
+    width: 80px;
+    .add-branch-btn-el{
+      z-index: 999;
+      position: absolute;
+      top: -15px;
+    }
+  }
+
+  .empty-node{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+</style>