diff --git a/dolphinscheduler-ui-next/src/router/modules/projects.ts b/dolphinscheduler-ui-next/src/router/modules/projects.ts
index b780a75af..68818b8b9 100644
--- a/dolphinscheduler-ui-next/src/router/modules/projects.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/projects.ts
@@ -56,7 +56,15 @@ export default {
       }
     },
     {
-      path: '/projects/:projectCode/workflow/definitions/create',
+      path: '/projects/:projectCode/workflow-definitions',
+      name: 'workflow-definition-list',
+      component: components['workflow-definition-list'],
+      meta: {
+        title: '工作流定义'
+      }
+    },
+    {
+      path: '/projects/:projectCode/workflow-definitions/create',
       name: 'workflow-definition-create',
       component: components['workflow-definition-create'],
       meta: {
@@ -64,12 +72,44 @@ export default {
       }
     },
     {
-      path: '/projects/:projectCode/workflow/definitions/:code',
+      path: '/projects/:projectCode/workflow-definitions/:code',
       name: 'workflow-definition-details',
       component: components['workflow-definition-details'],
       meta: {
         title: '工作流定义详情'
       }
+    },
+    {
+      path: '/projects/:projectCode/workflow-instances',
+      name: 'workflow-instance-list',
+      component: components['workflow-instance-list'],
+      meta: {
+        title: '工作流实例'
+      }
+    },
+    {
+      path: '/projects/:projectCode/workflow-instances/:id',
+      name: 'workflow-instance-details',
+      component: components['workflow-instance-details'],
+      meta: {
+        title: '工作流实例详情'
+      }
+    },
+    {
+      path: '/projects/:projectCode/task-instances',
+      name: 'task-instance-list',
+      component: components['task-instance-list'],
+      meta: {
+        title: '任务实例'
+      }
+    },
+    {
+      path: '/projects/:projectCode/task-definitions',
+      name: 'task-definition-list',
+      component: components['task-definition-list'],
+      meta: {
+        title: '任务定义'
+      }
     }
   ]
 }
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/hook-demo.ts b/dolphinscheduler-ui-next/src/views/projects/task-definition-list/task-definition-list.tsx
similarity index 66%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/hook-demo.ts
rename to dolphinscheduler-ui-next/src/views/projects/task-definition-list/task-definition-list.tsx
index 73cd46566..c14060b52 100644
--- a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/hook-demo.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/task-definition-list/task-definition-list.tsx
@@ -15,22 +15,11 @@
  * limitations under the License.
  */
 
-import { ref, onMounted, Ref, onUnmounted } from 'vue'
+import { defineComponent } from 'vue'
 
-interface Options {
-  // readonly: Ref<boolean>;
-  // canvas: Ref<HTMLElement | undefined>;
-}
-
-/**
- * Canvas Init
- * 1. Bind the graph to the dom
- * 2. Redraw when the page is resized
- * 3. Register custom graphics
- */
-export function useCanvasInit(options: Options) {
-  // Whether the graph can be operated
-  const {} = options
-
-  return {}
-}
+export default defineComponent({
+  name: 'TaskDefinitionList',
+  setup() {
+    return () => <div>TaskDefinitionList</div>
+  }
+})
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/task/config.ts b/dolphinscheduler-ui-next/src/views/projects/task-details/config.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/task/config.ts
rename to dolphinscheduler-ui-next/src/views/projects/task-details/config.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/task/task-config.tsx b/dolphinscheduler-ui-next/src/views/projects/task-details/task-config.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/task/task-config.tsx
rename to dolphinscheduler-ui-next/src/views/projects/task-details/task-config.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/index.tsx b/dolphinscheduler-ui-next/src/views/projects/task-instance-list/task-instance-list.tsx
similarity index 92%
rename from dolphinscheduler-ui-next/src/views/projects/dag/index.tsx
rename to dolphinscheduler-ui-next/src/views/projects/task-instance-list/task-instance-list.tsx
index 7b43218c4..86a203d9c 100644
--- a/dolphinscheduler-ui-next/src/views/projects/dag/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/task-instance-list/task-instance-list.tsx
@@ -18,8 +18,8 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'Projects',
+  name: 'TaskInstanceList',
   setup() {
-    return () => <div>Projects</div>
+    return () => <div>TaskInstanceList</div>
   }
 })
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-definition-list.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-definition-list/workflow-definition-list.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-definition-list.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-definition-list/workflow-definition-list.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-canvas.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-canvas.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-canvas.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-canvas.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-config.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-config.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-config.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-config.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-hooks.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-hooks.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-hooks.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-hooks.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-sidebar.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-sidebar.tsx
similarity index 97%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-sidebar.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-sidebar.tsx
index e1ec7d2f7..cd3a0f8da 100644
--- a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-sidebar.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-sidebar.tsx
@@ -18,7 +18,7 @@
 import type { PropType, Ref } from 'vue'
 import type { Dragged } from './dag'
 import { defineComponent, ref, inject } from 'vue'
-import { ALL_TASK_TYPES } from '../task/config'
+import { ALL_TASK_TYPES } from '../task-details/config'
 import { useSidebarDrag } from './dag-hooks'
 import Styles from './dag.module.scss'
 
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-toolbar.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-toolbar.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-toolbar.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-toolbar.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag.module.scss b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag.module.scss
similarity index 54%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag.module.scss
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/dag.module.scss
index 37f4d355a..229836390 100644
--- a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag.module.scss
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag.module.scss
@@ -83,52 +83,52 @@ $toolbarHeight: 50px;
     background-size: 100% 100%;
     margin-right: 10px;
     &.icon-shell {
-      background-image: url("../../../../assets/images/task-icons/shell.png");
+      background-image: url("../../../assets/images/task-icons/shell.png");
     }
     &.icon-sub_process {
-      background-image: url("../../../../assets/images/task-icons/sub_process.png");
+      background-image: url("../../../assets/images/task-icons/sub_process.png");
     }
     &.icon-procedure {
-      background-image: url("../../../../assets/images/task-icons/procedure.png");
+      background-image: url("../../../assets/images/task-icons/procedure.png");
     }
     &.icon-sql {
-      background-image: url("../../../../assets/images/task-icons/sql.png");
+      background-image: url("../../../assets/images/task-icons/sql.png");
     }
     &.icon-flink {
-      background-image: url("../../../../assets/images/task-icons/flink.png");
+      background-image: url("../../../assets/images/task-icons/flink.png");
     }
     &.icon-mr {
-      background-image: url("../../../../assets/images/task-icons/mr.png");
+      background-image: url("../../../assets/images/task-icons/mr.png");
     }
     &.icon-python {
-      background-image: url("../../../../assets/images/task-icons/python.png");
+      background-image: url("../../../assets/images/task-icons/python.png");
     }
     &.icon-dependent {
-      background-image: url("../../../../assets/images/task-icons/dependent.png");
+      background-image: url("../../../assets/images/task-icons/dependent.png");
     }
     &.icon-http {
-      background-image: url("../../../../assets/images/task-icons/http.png");
+      background-image: url("../../../assets/images/task-icons/http.png");
     }
     &.icon-datax {
-      background-image: url("../../../../assets/images/task-icons/datax.png");
+      background-image: url("../../../assets/images/task-icons/datax.png");
     }
     &.icon-pigeon {
-      background-image: url("../../../../assets/images/task-icons/pigeon.png");
+      background-image: url("../../../assets/images/task-icons/pigeon.png");
     }
     &.icon-sqoop {
-      background-image: url("../../../../assets/images/task-icons/sqoop.png");
+      background-image: url("../../../assets/images/task-icons/sqoop.png");
     }
     &.icon-conditions {
-      background-image: url("../../../../assets/images/task-icons/conditions.png");
+      background-image: url("../../../assets/images/task-icons/conditions.png");
     }
     &.icon-seatunnel {
-      background-image: url("../../../../assets/images/task-icons/seatunnel.png");
+      background-image: url("../../../assets/images/task-icons/seatunnel.png");
     }
     &.icon-spark {
-      background-image: url("../../../../assets/images/task-icons/spark.png");
+      background-image: url("../../../assets/images/task-icons/spark.png");
     }
     &.icon-switch {
-      background-image: url("../../../../assets/images/task-icons/switch.png");
+      background-image: url("../../../assets/images/task-icons/switch.png");
     }
   }
 
@@ -138,52 +138,52 @@ $toolbarHeight: 50px;
     background-color: $blueBg;
     .sidebar-icon {
       &.icon-shell {
-        background-image: url("../../../../assets/images/task-icons/shell_hover.png");
+        background-image: url("../../../assets/images/task-icons/shell_hover.png");
       }
       &.icon-sub_process {
-        background-image: url("../../../../assets/images/task-icons/sub_process_hover.png");
+        background-image: url("../../../assets/images/task-icons/sub_process_hover.png");
       }
       &.icon-procedure {
-        background-image: url("../../../../assets/images/task-icons/procedure_hover.png");
+        background-image: url("../../../assets/images/task-icons/procedure_hover.png");
       }
       &.icon-sql {
-        background-image: url("../../../../assets/images/task-icons/sql_hover.png");
+        background-image: url("../../../assets/images/task-icons/sql_hover.png");
       }
       &.icon-flink {
-        background-image: url("../../../../assets/images/task-icons/flink_hover.png");
+        background-image: url("../../../assets/images/task-icons/flink_hover.png");
       }
       &.icon-mr {
-        background-image: url("../../../../assets/images/task-icons/mr_hover.png");
+        background-image: url("../../../assets/images/task-icons/mr_hover.png");
       }
       &.icon-python {
-        background-image: url("../../../../assets/images/task-icons/python_hover.png");
+        background-image: url("../../../assets/images/task-icons/python_hover.png");
       }
       &.icon-dependent {
-        background-image: url("../../../../assets/images/task-icons/dependent_hover.png");
+        background-image: url("../../../assets/images/task-icons/dependent_hover.png");
       }
       &.icon-http {
-        background-image: url("../../../../assets/images/task-icons/http_hover.png");
+        background-image: url("../../../assets/images/task-icons/http_hover.png");
       }
       &.icon-datax {
-        background-image: url("../../../../assets/images/task-icons/datax_hover.png");
+        background-image: url("../../../assets/images/task-icons/datax_hover.png");
       }
       &.icon-pigeon {
-        background-image: url("../../../../assets/images/task-icons/pigeon_hover.png");
+        background-image: url("../../../assets/images/task-icons/pigeon_hover.png");
       }
       &.icon-sqoop {
-        background-image: url("../../../../assets/images/task-icons/sqoop_hover.png");
+        background-image: url("../../../assets/images/task-icons/sqoop_hover.png");
       }
       &.icon-conditions {
-        background-image: url("../../../../assets/images/task-icons/conditions_hover.png");
+        background-image: url("../../../assets/images/task-icons/conditions_hover.png");
       }
       &.icon-seatunnel {
-        background-image: url("../../../../assets/images/task-icons/seatunnel_hover.png");
+        background-image: url("../../../assets/images/task-icons/seatunnel_hover.png");
       }
       &.icon-spark {
-        background-image: url("../../../../assets/images/task-icons/spark_hover.png");
+        background-image: url("../../../assets/images/task-icons/spark_hover.png");
       }
       &.icon-switch {
-        background-image: url("../../../../assets/images/task-icons/switch_hover.png");
+        background-image: url("../../../assets/images/task-icons/switch_hover.png");
       }
     }
   }
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/dag.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-canvas-drop.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-canvas-drop.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-canvas-drop.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/use-canvas-drop.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-canvas-init.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-canvas-init.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-canvas-init.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/use-canvas-init.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-cell-active.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-cell-active.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-cell-active.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/use-cell-active.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-graph-operations.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-graph-operations.ts
similarity index 98%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-graph-operations.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/use-graph-operations.ts
index a3127d8f1..809e4dc5a 100644
--- a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-graph-operations.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-graph-operations.ts
@@ -18,7 +18,7 @@
 import type { Ref } from 'vue'
 import type { Node, Graph, Edge } from '@antv/x6'
 import { X6_NODE_NAME, X6_EDGE_NAME } from './dag-config'
-import { ALL_TASK_TYPES } from '../task/config'
+import { ALL_TASK_TYPES } from '../task-details/config'
 import utils from '@/utils'
 
 interface Options {
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-node-search.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-node-search.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-node-search.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/use-node-search.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-sidebar-drag.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-sidebar-drag.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-sidebar-drag.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/use-sidebar-drag.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-definition-create.module.scss b/dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-create.module.scss
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-definition-create.module.scss
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-create.module.scss
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-definition-create.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-create.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-definition-create.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-create.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-definition-details.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-details.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-definition-details.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-details.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-instance-details.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-instance-details.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-instance-details.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-instance-details.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/x6-style.scss b/dolphinscheduler-ui-next/src/views/projects/workflow-details/x6-style.scss
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/x6-style.scss
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/x6-style.scss
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-instance-list.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-instance-list/workflow-instance-list.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-instance-list.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-instance-list/workflow-instance-list.tsx