[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.
2 years ago · 213bf43ed6
19 changed files with 593 additions and 10 deletions
--- a/dolphinscheduler-ui/package.json
+++ b/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",
--- a/dolphinscheduler-ui/pnpm-lock.yaml
+++ b/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:
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.module.scss
+++ b/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;
+}
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.tsx
+++ b/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 }
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.module.scss
+++ b/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;
+}
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.tsx
+++ b/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 }
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-setting.ts
+++ b/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'
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.module.scss
+++ b/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;
+}
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx
+++ b/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 }
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.module.scss
+++ b/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%;
+}
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx
+++ b/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 }
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-edge.ts
+++ b/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'
+    }
+  }
+}
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-graph.ts
+++ b/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
+    }
+  })
+}
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts
+++ b/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'
+  }
+}
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-resize.ts
+++ b/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)
+}
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-sidebar.ts
+++ b/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 }
+}
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-task-form.ts
+++ b/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'
+      }
+    }
+  ]
+}
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/create/index.tsx
+++ b/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>
    )
  }
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
+++ b/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