[Feature][UI] Create a dynamic task component canvas. (#12577)

* [Feature][UI] Create a dynamic task component canvas.

* [Feature][UI] Create a dynamic task component canvas.

* [Feature][UI] Create a dynamic task component canvas.

* [Feature][UI] Create a dynamic task component canvas.

* [Feature][UI] Create a dynamic task component canvas.

dolphinscheduler-ui/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@antv/layout": "0.1.31",
     "@antv/x6": "^1.34.1",
+    "@antv/x6-vue-shape": "^1.5.3",
     "@vueuse/core": "^9.2.0",
     "axios": "^0.27.2",
     "date-fns": "^2.29.3",

dolphinscheduler-ui/pnpm-lock.yaml

@@ -20,6 +20,7 @@ lockfileVersion: 5.4
 specifiers:
   '@antv/layout': 0.1.31
   '@antv/x6': ^1.34.1
+  '@antv/x6-vue-shape': ^1.5.3
   '@types/js-cookie': ^3.0.2
   '@types/lodash': ^4.14.185
   '@types/node': ^18.7.18
@@ -65,6 +66,7 @@ specifiers:
 dependencies:
   '@antv/layout': 0.1.31
   '@antv/x6': 1.34.1
+  '@antv/x6-vue-shape': 1.5.3_@antv+x6@1.34.1+vue@3.2.39
   '@vueuse/core': 9.2.0_vue@3.2.39
   axios: 0.27.2
   date-fns: 2.29.3
@@ -171,6 +173,21 @@ packages:
       ml-matrix: 6.10.2
     dev: false
 
+  /@antv/x6-vue-shape/1.5.3_@antv+x6@1.34.1+vue@3.2.39:
+    resolution: {integrity: sha512-VnuXd8gE6bONYp4U51n3PxjM1UTuotca51f+hjaMqOy1X+HQf/nAN69oD+Y2wsPDRFZnZcipVol/dLxHS3Fd9w==}
+    peerDependencies:
+      '@antv/x6': '>=1.0.0'
+      '@vue/composition-api': ^1.0.0-rc.6
+      vue: ^2.6.12 || ^3.0.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      '@antv/x6': 1.34.1
+      vue: 3.2.39
+      vue-demi: 0.13.11_vue@3.2.39
+    dev: false
+
   /@antv/x6/1.34.1:
     resolution: {integrity: sha512-4dNE9h//SY5ID8W+9YU5dE58d0+V9lCXlg0CiI6+4jFCud3RfLkPjni1dpmUo+HDWtrQ0wB80o42HLat9+FYZA==}
     dependencies:

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.module.scss

@@ -0,0 +1,34 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+  height: 100%;
+  width: 100%;
+}
+
+.dag-container {
+  height: 100%;
+  width: 100%;
+}
+
+.minimap {
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+  border: dashed 1px #e4e4e4;
+  z-index: 9000;
+}

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.tsx

@@ -0,0 +1,96 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineComponent, ref, onMounted } from 'vue'
+import { Graph } from '@antv/x6'
+import { useDagResize } from './use-dag-resize'
+import { useDagGraph } from './use-dag-graph'
+import { useDagNode } from './use-dag-node'
+import { useDagEdge } from './use-dag-edge'
+import { DagNodeName, DagEdgeName } from './dag-setting'
+import styles from './dag-canvas.module.scss'
+
+const DagCanvas = defineComponent({
+  name: 'DagCanvas',
+  emits: ['drop'],
+  setup(props, context) {
+    const container = ref()
+    const dagContainer = ref()
+    const minimapContainer = ref()
+    const graph = ref<Graph>()
+
+    if (graph.value) {
+      useDagResize(dagContainer.value, graph.value)
+    }
+
+    const initGraph = () => {
+      graph.value = useDagGraph(container.value, minimapContainer.value)
+    }
+
+    const registerNode = () => {
+      Graph.unregisterNode(DagNodeName)
+      Graph.registerNode(DagNodeName, useDagNode())
+    }
+
+    const registerEdge = () => {
+      Graph.unregisterEdge(DagEdgeName)
+      Graph.registerEdge(
+        DagEdgeName,
+        useDagEdge(),
+        true
+      )
+    }
+
+    const handlePreventDefault = (e: DragEvent) => {
+      e.preventDefault()
+    }
+
+    const handleDrop = (e: DragEvent) => {
+      context.emit('drop', e)
+    }
+
+    onMounted(() => {
+      initGraph()
+      registerNode()
+      registerEdge()
+    })
+
+    return {
+      container,
+      'dag-container': dagContainer,
+      minimapContainer,
+      handlePreventDefault,
+      handleDrop
+    }
+  },
+  render() {
+    return(
+      <>
+        <div ref='container' class={styles.container}
+           onDrop={this.handleDrop}
+           onDragenter={this.handlePreventDefault}
+           onDragover={this.handlePreventDefault}
+           onDragleave={this.handlePreventDefault}>
+          <div ref='dag-container' class={styles['dag-container']}/>
+        </div>
+        <div ref='minimapContainer' class={styles.minimap}/>
+      </>
+    )
+  }
+})
+
+export { DagCanvas }

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.module.scss

@@ -0,0 +1,23 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.dag-node {
+  cursor: pointer;
+  height: 20px;
+  width: 100px;
+  border: 1px solid #1890ff;
+}

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.tsx

@@ -0,0 +1,33 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineComponent } from 'vue'
+import styles from './dag-node.module.scss'
+
+const DagNode = defineComponent({
+  name: 'DagNode',
+  setup() {
+
+  },
+  render() {
+    return (
+      <div class={styles['dag-node']}>1111</div>
+    )
+  }
+})
+
+export { DagNode }

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-setting.ts

@@ -0,0 +1,21 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const DagNodeName = 'dag-node'
+export const DagEdgeName = 'dag-edge'
+export const NodeWidth = '200'
+export const NodeHeight = '50'

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.module.scss

@@ -0,0 +1,23 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.task-item {
+  cursor: pointer;
+  height: 20px;
+  width: 100px;
+  border: 1px solid #1890ff;
+}

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx

@@ -0,0 +1,58 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineComponent, onMounted, toRefs } from 'vue'
+import { useSidebar } from './use-sidebar'
+import styles from './dag-sidebar.module.scss'
+
+const DagSidebar = defineComponent({
+  name: 'DagSidebar',
+  emits: ['Dragend'],
+  setup(props, context) {
+    const { variables, getTaskList } = useSidebar()
+
+    const handleDragend = (e: DragEvent, task: any) => {
+      context.emit('Dragend', e, task)
+    }
+
+    onMounted(() => {
+      getTaskList()
+    })
+
+    return {
+      ...toRefs(variables),
+      handleDragend
+    }
+  },
+  render() {
+    return (
+      <div>
+        {
+          this.taskList.map(task => {
+            return (
+              <div class={styles['task-item']} draggable='true' onDragend={(e: DragEvent) => this.handleDragend(e, task)}>
+                {task}
+              </div>
+            )
+          })
+        }
+      </div>
+    )
+  }
+})
+
+export { DagSidebar }

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.module.scss

@@ -0,0 +1,21 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.workflow-dag {
+  display: flex;
+  height: 100%;
+}

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx

@@ -0,0 +1,53 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineComponent } from 'vue'
+import { DagSidebar } from './dag-sidebar'
+import { DagCanvas } from './dag-canvas'
+import styles from './index.module.scss'
+
+const DynamicDag = defineComponent({
+  name: 'DynamicDag',
+  setup() {
+    const handelDragend = () => {
+      //console.log(e, task)
+      //if (readonly.value) {
+      //  e.preventDefault()
+      //  return
+      //}
+      //dragged.value = {
+      //  x: e.offsetX,
+      //  y: e.offsetY,
+      //  type: task
+      //}
+    }
+
+    return {
+      handelDragend
+    }
+  },
+  render() {
+    return (
+      <div class={styles['workflow-dag']}>
+        <DagSidebar onDragend={this.handelDragend} />
+        <DagCanvas />
+      </div>
+    )
+  }
+})
+
+export { DynamicDag }

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-edge.ts

@@ -0,0 +1,30 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function useDagEdge() {
+  return {
+    attrs: {
+      line: {
+        stroke: '#666',
+        strokeWidth: 0.5
+      }
+    },
+    router: {
+      name: 'orth'
+    }
+  }
+}

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-graph.ts

@@ -0,0 +1,35 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Graph } from '@antv/x6'
+
+export function useDagGraph(container: any, minimapContainer: any) {
+  return new Graph({
+    container,
+    scroller: true,
+    grid: {
+      size: 10,
+      visible: true
+    },
+    minimap: {
+      enabled: true,
+      width: 200,
+      height: 120,
+      container: minimapContainer
+    }
+  })
+}

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts

@@ -0,0 +1,22 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function useDagNode() {
+  return {
+    inherit: 'rect'
+  }
+}

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-resize.ts

@@ -0,0 +1,32 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { debounce } from 'lodash'
+import { useResizeObserver } from '@vueuse/core'
+import { Graph } from '@antv/x6'
+
+export function useDagResize(dagContainer: any, graph: Graph) {
+  const resize = debounce(() => {
+    if (dagContainer) {
+      const w = dagContainer.offsetWidth
+      const h = dagContainer.offsetHeight
+      graph.resize(w, h)
+    }
+  }, 200)
+
+  useResizeObserver(dagContainer, resize)
+}

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-sidebar.ts

@@ -0,0 +1,30 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { reactive } from 'vue'
+
+export function useSidebar() {
+  const variables = reactive({
+    taskList: []
+  })
+
+  const getTaskList = () => {
+    variables.taskList = ['shell'] as any
+  }
+
+  return { variables, getTaskList }
+}

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-task-form.ts

@@ -0,0 +1,40 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const useTaskForm = {
+  locales: {
+    zh_CN: {
+      node_name: '节点名称',
+      node_name_tips: '节点名称不能为空'
+    },
+    en_US: {
+      node_name: 'Node Name',
+      node_name_tips: 'Node name cannot be empty'
+    }
+  },
+  items: [
+    {
+      label: 'node_name',
+      type: 'input',
+      field: '',
+      validate: {
+        trigger: ['input', 'blur'],
+        message: 'node_name_tips'
+      }
+    }
+  ]
+}

dolphinscheduler-ui/src/views/projects/workflow/definition/create/index.tsx

@@ -18,6 +18,7 @@
 import { defineComponent } from 'vue'
 import { useMessage } from 'naive-ui'
 import Dag from '../../components/dag'
+import { DynamicDag } from '@/views/projects/workflow/components/dynamic-dag'
 import { useThemeStore } from '@/store/theme/theme'
 import { useRoute, useRouter } from 'vue-router'
 import {
@@ -41,7 +42,6 @@ export default defineComponent({
   name: 'WorkflowDefinitionCreate',
   setup() {
     const theme = useThemeStore()
-
     const message = useMessage()
     const { t } = useI18n()
     const route = useRoute()
@@ -89,7 +89,9 @@ export default defineComponent({
           theme.darkTheme ? Styles['dark'] : Styles['light']
         ]}
       >
-        <Dag projectCode={projectCode} onSave={onSave} />
+        {
+          route.query.dynamic === 'true' ? <DynamicDag /> : <Dag projectCode={projectCode} onSave={onSave} />
+        }
       </div>
     )
   }

dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx

@@ -94,6 +94,16 @@ export default defineComponent({
         path: `/projects/${projectCode}/workflow/definitions/create`
       })
     }
+
+    const createDefinitionDynamic = () => {
+      router.push({
+        path: `/projects/${projectCode}/workflow/definitions/create`,
+        query: {
+          dynamic: 'true'
+        }
+      })
+    }
+
     const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
 
     watch(useI18n().locale, () => {
@@ -110,6 +120,7 @@ export default defineComponent({
       handleSearch,
       handleUpdateList,
       createDefinition,
+      createDefinitionDynamic,
       handleChangePageSize,
       batchDeleteWorkflow,
       batchExportWorkflow,
@@ -137,6 +148,15 @@ export default defineComponent({
               >
                 {t('project.workflow.create_workflow')}
               </NButton>
+              {
+                this.uiSettingStore.getDynamicTask && <NButton
+                  type='warning'
+                  size='small'
+                  onClick={this.createDefinitionDynamic}
+                >
+                  {t('project.workflow.create_workflow_dynamic')}
+                </NButton>
+              }
               <NButton
                 strong
                 secondary
@@ -145,14 +165,6 @@ export default defineComponent({
               >
                 {t('project.workflow.import_workflow')}
               </NButton>
-              {
-                this.uiSettingStore.getDynamicTask && <NButton
-                  size='small'
-                  type='warning'
-                >
-                  {t('project.workflow.create_workflow_dynamic')}
-                </NButton>
-              }
             </NSpace>
             <NSpace>
               <NInput