diff --git a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
index 689a95bf5f..9c13ac1ab5 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
+++ b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
@@ -87,20 +87,19 @@ export function useDataList() {
         isShowSide: false,
         children: [
           {
-            label: t('menu.workflow_monitoring'),
-            key: 'workflow-monitoring',
+            label: t('menu.project_overview'),
+            key: 'projects-overview',
             icon: renderIcon(FundProjectionScreenOutlined)
           },
-          {
-            label: t('menu.workflow_relation'),
-            key: 'workflow-relation',
-            icon: renderIcon(PartitionOutlined)
-          },
           {
             label: t('menu.workflow'),
             key: 'workflow',
-            icon: renderIcon(SettingOutlined),
+            icon: renderIcon(PartitionOutlined),
             children: [
+              {
+                label: t('menu.workflow_relation'),
+                key: 'workflow-relation'
+              },
               {
                 label: t('menu.workflow_definition'),
                 key: 'workflow-definition'
@@ -108,14 +107,21 @@ export function useDataList() {
               {
                 label: t('menu.workflow_instance'),
                 key: 'workflow-instance'
+              }
+            ]
+          },
+          {
+            label: t('menu.task'),
+            key: 'workflow',
+            icon: renderIcon(SettingOutlined),
+            children: [
+              {
+                label: t('menu.task_definition'),
+                key: 'task-definition'
               },
               {
                 label: t('menu.task_instance'),
                 key: 'task-instance'
-              },
-              {
-                label: t('menu.task_definition'),
-                key: 'task-definition'
               }
             ]
           }
diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index 604b4a4c53..f90db5dc1a 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
@@ -47,11 +47,12 @@ const menu = {
   datasource: 'Datasource',
   monitor: 'Monitor',
   security: 'Security',
-  workflow_monitoring: 'Workflow Monitoring',
+  project_overview: 'Project Overview',
   workflow_relation: 'Workflow Relation',
   workflow: 'Workflow',
   workflow_definition: 'Workflow Definition',
   workflow_instance: 'Workflow Instance',
+  task: 'Task',
   task_instance: 'Task Instance',
   task_definition: 'Task Definition',
   file_manage: 'File Manage',
@@ -319,11 +320,9 @@ const project = {
     cancel: 'Cancel',
     delete_confirm: 'Delete?'
   },
-  workflow_relation: {
-    workflow_relation: 'Workflow Relation'
-  },
-  dag: {
-    createWorkflow: 'Create Workflow',
+  workflow: {
+    workflow_relation: 'Workflow Relation',
+    create_workflow: 'Create Workflow',
     search: 'Search',
     download_png: 'Download PNG',
     fullscreen_open: 'Open Fullscreen',
diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
index dcddd80387..1ee6f60d6e 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
@@ -47,11 +47,12 @@ const menu = {
   datasource: '数据源中心',
   monitor: '监控中心',
   security: '安全中心',
-  workflow_monitoring: '工作流监控',
+  project_overview: '项目概览',
   workflow_relation: '工作流关系',
   workflow: '工作流',
   workflow_definition: '工作流定义',
   workflow_instance: '工作流实例',
+  task: '任务',
   task_instance: '任务实例',
   task_definition: '任务定义',
   file_manage: '文件管理',
@@ -318,11 +319,9 @@ const project = {
     cancel: '取消',
     delete_confirm: '确定删除吗?'
   },
-  workflow_relation: {
-    workflow_relation: '工作流关系'
-  },
-  dag: {
-    createWorkflow: '创建工作流',
+  workflow: {
+    workflow_relation: '工作流关系',
+    create_workflow: '创建工作流',
     search: '搜索',
     download_png: '下载工作流图片',
     fullscreen_open: '全屏',
diff --git a/dolphinscheduler-ui-next/src/router/modules/datasource.ts b/dolphinscheduler-ui-next/src/router/modules/datasource.ts
index 656a77d3d8..f25e00b0fc 100644
--- a/dolphinscheduler-ui-next/src/router/modules/datasource.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/datasource.ts
@@ -25,12 +25,11 @@ const components: { [key: string]: Component } = utils.mapping(modules)
 export default {
   path: '/datasource',
   name: 'datasource',
-  redirect: { name: 'datasource-list' },
   meta: { title: '数据源中心' },
   component: () => import('@/layouts/content'),
   children: [
     {
-      path: '/datasource/list',
+      path: '',
       name: 'datasource-list',
       component: components['datasource-list'],
       meta: {
diff --git a/dolphinscheduler-ui-next/src/router/modules/monitor.ts b/dolphinscheduler-ui-next/src/router/modules/monitor.ts
index d42998c803..68074bf66f 100644
--- a/dolphinscheduler-ui-next/src/router/modules/monitor.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/monitor.ts
@@ -32,7 +32,7 @@ export default {
     {
       path: '/monitor/master',
       name: 'servers-master',
-      component: components['master'],
+      component: components['monitor-servers-master'],
       meta: {
         title: '服务管理-Master',
         showSide: true
@@ -41,7 +41,7 @@ export default {
     {
       path: '/monitor/worker',
       name: 'servers-worker',
-      component: components['worker'],
+      component: components['monitor-servers-worker'],
       meta: {
         title: '服务管理-Worker',
         showSide: true
@@ -50,7 +50,7 @@ export default {
     {
       path: '/monitor/db',
       name: 'servers-db',
-      component: components['db'],
+      component: components['monitor-servers-db'],
       meta: {
         title: '服务管理-DB',
         showSide: true
@@ -59,7 +59,7 @@ export default {
     {
       path: '/monitor/statistics',
       name: 'statistics-statistics',
-      component: components['statistics'],
+      component: components['monitor-statistics-statistics'],
       meta: {
         title: '统计管理-Statistics',
         showSide: true
diff --git a/dolphinscheduler-ui-next/src/router/modules/projects.ts b/dolphinscheduler-ui-next/src/router/modules/projects.ts
index 68818b8b97..fae4fad153 100644
--- a/dolphinscheduler-ui-next/src/router/modules/projects.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/projects.ts
@@ -25,90 +25,100 @@ const components: { [key: string]: Component } = utils.mapping(modules)
 export default {
   path: '/projects',
   name: 'projects',
-  redirect: { name: 'projects-list' },
-  meta: { title: '项目管理' },
+  meta: {
+    title: '项目管理',
+    showSide: false
+  },
   component: () => import('@/layouts/content'),
   children: [
     {
-      path: '/projects/list',
+      path: '',
       name: 'projects-list',
-      component: components['list'],
+      component: components['projects-list'],
       meta: {
         title: '项目',
         showSide: false
       }
     },
     {
-      path: '/projects/:projectCode/workflow-monitor',
-      name: 'workflow-monitor',
-      component: components['workflow-monitor'],
+      path: '/projects/:projectCode',
+      name: 'projects-overview',
+      component: components['projects-overview'],
       meta: {
-        title: '工作流监控',
+        title: '项目概览',
         showSide: true
       }
     },
     {
-      path: '/projects/:projectCode/workflow-relation',
+      path: '/projects/:projectCode/workflow/relation',
       name: 'workflow-relation',
-      component: components['workflow-relation'],
+      component: components['projects-workflow-relation'],
       meta: {
-        title: '工作流关系'
+        title: '工作流关系',
+        showSide: true
       }
     },
     {
-      path: '/projects/:projectCode/workflow-definitions',
+      path: '/projects/:projectCode/workflow/definitions',
       name: 'workflow-definition-list',
-      component: components['workflow-definition-list'],
+      component: components['projects-workflow-definition'],
       meta: {
-        title: '工作流定义'
+        title: '工作流定义',
+        showSide: true
       }
     },
     {
-      path: '/projects/:projectCode/workflow-definitions/create',
+      path: '/projects/:projectCode/workflow/definitions/create',
       name: 'workflow-definition-create',
-      component: components['workflow-definition-create'],
+      component: components['projects-workflow-definition-create'],
       meta: {
-        title: '创建工作流定义'
+        title: '创建工作流定义',
+        showSide: true
       }
     },
     {
-      path: '/projects/:projectCode/workflow-definitions/:code',
-      name: 'workflow-definition-details',
-      component: components['workflow-definition-details'],
+      path: '/projects/:projectCode/workflow/definitions/:code',
+      name: 'workflow-definition-detail',
+      component: components['projects-workflow-definition-detail'],
       meta: {
-        title: '工作流定义详情'
+        title: '工作流定义详情',
+        showSide: true
       }
     },
     {
-      path: '/projects/:projectCode/workflow-instances',
+      path: '/projects/:projectCode/workflow/instances',
       name: 'workflow-instance-list',
-      component: components['workflow-instance-list'],
+      component: components['projects-workflow-instance'],
       meta: {
-        title: '工作流实例'
+        title: '工作流实例',
+        showSide: true
       }
     },
     {
-      path: '/projects/:projectCode/workflow-instances/:id',
-      name: 'workflow-instance-details',
-      component: components['workflow-instance-details'],
+      path: '/projects/:projectCode/workflow/instances/:id',
+      name: 'workflow-instance-detail',
+      component: components['projects-workflow-instance-detail'],
       meta: {
-        title: '工作流实例详情'
+        title: '工作流实例详情',
+        showSide: true
       }
     },
     {
-      path: '/projects/:projectCode/task-instances',
-      name: 'task-instance-list',
-      component: components['task-instance-list'],
+      path: '/projects/:projectCode/task/definitions',
+      name: 'task-definition-list',
+      component: components['projects-task-definition'],
       meta: {
-        title: '任务实例'
+        title: '任务定义',
+        showSide: true
       }
     },
     {
-      path: '/projects/:projectCode/task-definitions',
-      name: 'task-definition-list',
-      component: components['task-definition-list'],
+      path: '/projects/:projectCode/task/instances',
+      name: 'task-instance-list',
+      component: components['projects-task-instance'],
       meta: {
-        title: '任务定义'
+        title: '任务实例',
+        showSide: true
       }
     }
   ]
diff --git a/dolphinscheduler-ui-next/src/router/modules/resources.ts b/dolphinscheduler-ui-next/src/router/modules/resources.ts
index 889e186c93..942abb2c32 100644
--- a/dolphinscheduler-ui-next/src/router/modules/resources.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/resources.ts
@@ -32,7 +32,7 @@ export default {
     {
       path: '/resource/file-manage',
       name: 'file-manage',
-      component: components['file'],
+      component: components['resource-file'],
       meta: {
         title: '文件管理',
         showSide: true
@@ -59,7 +59,7 @@ export default {
     {
       path: '/resource/file/subdirectory/:id',
       name: 'resource-file-subdirectory',
-      component: components['file'],
+      component: components['resource-file'],
       meta: {
         title: '文件管理',
         showSide: true
@@ -104,7 +104,7 @@ export default {
     {
       path: '/resource/function-manage',
       name: 'function-manage',
-      component: components['function'],
+      component: components['resource-udf-function'],
       meta: {
         title: '函数管理'
       }
@@ -112,17 +112,17 @@ export default {
     {
       path: '/resource/task-group',
       name: 'task-group-manage',
-      component: components['taskGroupOption'],
+      component: components['resource-taskGroupOption'],
       children: [
         {
           path: '/resource/task-group-option',
           name: 'task-group-option',
-          component: components['taskGroupOption']
+          component: components['resource-taskGroupOption']
         },
         {
           path: '/resource/task-group-queue',
           name: 'task-group-queue',
-          component: components['taskGroupQueue']
+          component: components['resource-taskGroupQueue']
         }
       ]
     }
diff --git a/dolphinscheduler-ui-next/src/router/modules/security.ts b/dolphinscheduler-ui-next/src/router/modules/security.ts
index 99fc6ae096..44774e40b3 100644
--- a/dolphinscheduler-ui-next/src/router/modules/security.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/security.ts
@@ -32,7 +32,7 @@ export default {
     {
       path: '/security/tenant-manage',
       name: 'tenant-manage',
-      component: components['tenant-manage'],
+      component: components['security-tenant-manage'],
       meta: {
         title: '租户管理',
         showSide: true
@@ -50,7 +50,7 @@ export default {
     {
       path: '/security/alarm-group-manage',
       name: 'alarm-group-manage',
-      component: components['alarm-group-manage'],
+      component: components['security-alarm-group-manage'],
       meta: {
         title: '告警组管理',
         showSide: true
@@ -59,7 +59,7 @@ export default {
     {
       path: '/security/worker-group-manage',
       name: 'worker-group-manage',
-      component: components['worker-group-manage'],
+      component: components['security-worker-group-manage'],
       meta: {
         title: 'Worker分组管理',
         showSide: true
@@ -68,7 +68,7 @@ export default {
     {
       path: '/security/yarn-queue-manage',
       name: 'yarn-queue-manage',
-      component: components['yarn-queue-manage'],
+      component: components['security-yarn-queue-manage'],
       meta: {
         title: 'Yarn队列管理',
         showSide: true
@@ -77,7 +77,7 @@ export default {
     {
       path: '/security/environment-manage',
       name: 'environment-manage',
-      component: components['environment-manage'],
+      component: components['security-environment-manage'],
       meta: {
         title: '环境管理',
         showSide: true
@@ -86,7 +86,7 @@ export default {
     {
       path: '/security/token-manage',
       name: 'token-manage',
-      component: components['token-manage'],
+      component: components['security-token-manage'],
       meta: {
         title: '令牌管理管理',
         showSide: true
diff --git a/dolphinscheduler-ui-next/src/utils/mapping.ts b/dolphinscheduler-ui-next/src/utils/mapping.ts
index 8e1a3994f9..5268a5281c 100644
--- a/dolphinscheduler-ui-next/src/utils/mapping.ts
+++ b/dolphinscheduler-ui-next/src/utils/mapping.ts
@@ -32,7 +32,7 @@ const mapping = (modules: any) => {
 
     let name: string = indexMatch ? indexMatch[1] : nameMatch[1]
 
-    ;[name] = name.split('/').splice(-1)
+    name = name.replaceAll('/', '-')
 
     components[name] = modules[key]
   })
diff --git a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/detail.tsx b/dolphinscheduler-ui-next/src/views/datasource/list/detail.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/datasource/datasource-list/detail.tsx
rename to dolphinscheduler-ui-next/src/views/datasource/list/detail.tsx
diff --git a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/index.module.scss b/dolphinscheduler-ui-next/src/views/datasource/list/index.module.scss
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/datasource/datasource-list/index.module.scss
rename to dolphinscheduler-ui-next/src/views/datasource/list/index.module.scss
diff --git a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/index.tsx b/dolphinscheduler-ui-next/src/views/datasource/list/index.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/datasource/datasource-list/index.tsx
rename to dolphinscheduler-ui-next/src/views/datasource/list/index.tsx
diff --git a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/json-highlight.module.scss b/dolphinscheduler-ui-next/src/views/datasource/list/json-highlight.module.scss
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/datasource/datasource-list/json-highlight.module.scss
rename to dolphinscheduler-ui-next/src/views/datasource/list/json-highlight.module.scss
diff --git a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/json-highlight.tsx b/dolphinscheduler-ui-next/src/views/datasource/list/json-highlight.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/datasource/datasource-list/json-highlight.tsx
rename to dolphinscheduler-ui-next/src/views/datasource/list/json-highlight.tsx
diff --git a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/types.ts b/dolphinscheduler-ui-next/src/views/datasource/list/types.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/datasource/datasource-list/types.ts
rename to dolphinscheduler-ui-next/src/views/datasource/list/types.ts
diff --git a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/use-columns.ts b/dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/datasource/datasource-list/use-columns.ts
rename to dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts
diff --git a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/use-detail.ts b/dolphinscheduler-ui-next/src/views/datasource/list/use-detail.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/datasource/datasource-list/use-detail.ts
rename to dolphinscheduler-ui-next/src/views/datasource/list/use-detail.ts
diff --git a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/use-form.ts b/dolphinscheduler-ui-next/src/views/datasource/list/use-form.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/datasource/datasource-list/use-form.ts
rename to dolphinscheduler-ui-next/src/views/datasource/list/use-form.ts
diff --git a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/use-table.ts b/dolphinscheduler-ui-next/src/views/datasource/list/use-table.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/datasource/datasource-list/use-table.ts
rename to dolphinscheduler-ui-next/src/views/datasource/list/use-table.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
index 74107c6268..d983d999ab 100644
--- a/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
@@ -48,8 +48,7 @@ export function useTable(
           'a',
           {
             class: styles.links,
-            onClick: () =>
-              router.push({ path: `/projects/${row.code}/workflow-monitor` })
+            onClick: () => router.push({ path: `/projects/${row.code}` })
           },
           {
             default: () => {
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-monitor/components/definition-card.tsx b/dolphinscheduler-ui-next/src/views/projects/overview/components/definition-card.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-monitor/components/definition-card.tsx
rename to dolphinscheduler-ui-next/src/views/projects/overview/components/definition-card.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-monitor/components/state-card.tsx b/dolphinscheduler-ui-next/src/views/projects/overview/components/state-card.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-monitor/components/state-card.tsx
rename to dolphinscheduler-ui-next/src/views/projects/overview/components/state-card.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-monitor/index.tsx b/dolphinscheduler-ui-next/src/views/projects/overview/index.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-monitor/index.tsx
rename to dolphinscheduler-ui-next/src/views/projects/overview/index.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-monitor/types.ts b/dolphinscheduler-ui-next/src/views/projects/overview/types.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-monitor/types.ts
rename to dolphinscheduler-ui-next/src/views/projects/overview/types.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-monitor/use-process-definition.ts b/dolphinscheduler-ui-next/src/views/projects/overview/use-process-definition.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-monitor/use-process-definition.ts
rename to dolphinscheduler-ui-next/src/views/projects/overview/use-process-definition.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-monitor/use-process-state.ts b/dolphinscheduler-ui-next/src/views/projects/overview/use-process-state.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-monitor/use-process-state.ts
rename to dolphinscheduler-ui-next/src/views/projects/overview/use-process-state.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-monitor/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/overview/use-table.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-monitor/use-table.ts
rename to dolphinscheduler-ui-next/src/views/projects/overview/use-table.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-monitor/use-task-state.ts b/dolphinscheduler-ui-next/src/views/projects/overview/use-task-state.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-monitor/use-task-state.ts
rename to dolphinscheduler-ui-next/src/views/projects/overview/use-task-state.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/task-details/config.ts b/dolphinscheduler-ui-next/src/views/projects/task/constants/task-type.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/task-details/config.ts
rename to dolphinscheduler-ui-next/src/views/projects/task/constants/task-type.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/task-details/task-config.tsx b/dolphinscheduler-ui-next/src/views/projects/task/definition/detail/index.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/task-details/task-config.tsx
rename to dolphinscheduler-ui-next/src/views/projects/task/definition/detail/index.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/task-definition-list/task-definition-list.tsx b/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/task-definition-list/task-definition-list.tsx
rename to dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/task-instance-list/task-instance-list.tsx b/dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/task-instance-list/task-instance-list.tsx
rename to dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-canvas.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-canvas.tsx
similarity index 95%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-canvas.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-canvas.tsx
index e953f4ab0f..5aaa962a6d 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-canvas.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-canvas.tsx
@@ -19,12 +19,7 @@ import { defineComponent, ref, inject } from 'vue'
 import Styles from './dag.module.scss'
 import type { PropType, Ref } from 'vue'
 import type { Dragged } from './dag'
-import {
-  useCanvasInit,
-  useGraphOperations,
-  useCellActive,
-  useCanvasDrop
-} from './dag-hooks'
+import { useCanvasInit, useCellActive, useCanvasDrop } from './dag-hooks'
 import { useRoute } from 'vue-router'
 
 const props = {
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-config.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-config.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-config.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-config.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-format-modal.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-format-modal.tsx
new file mode 100644
index 0000000000..9efc269c4f
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-format-modal.tsx
@@ -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 { defineComponent, PropType } from 'vue'
+import Modal from '@/components/modal'
+import './x6-style.scss'
+
+const props = {
+  show: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  }
+}
+
+export default defineComponent({
+  name: 'dag-format-modal',
+  props,
+  setup(props, context) {
+    return () => <Modal show={props.show}></Modal>
+  }
+})
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-hooks.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-hooks.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-hooks.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-hooks.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-sidebar.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-sidebar.tsx
similarity index 94%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-sidebar.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-sidebar.tsx
index cd3a0f8da4..1a56970cf2 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-sidebar.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-sidebar.tsx
@@ -16,9 +16,9 @@
  */
 
 import type { PropType, Ref } from 'vue'
-import type { Dragged } from './dag'
+import type { Dragged } from './index'
 import { defineComponent, ref, inject } from 'vue'
-import { ALL_TASK_TYPES } from '../task-details/config'
+import { ALL_TASK_TYPES } from '../../../task/constants/task-type'
 import { useSidebarDrag } from './dag-hooks'
 import Styles from './dag.module.scss'
 
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-toolbar.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx
similarity index 90%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-toolbar.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx
index 6d2eef0f05..d514700b4f 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-toolbar.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx
@@ -88,8 +88,16 @@ export default defineComponent({
     /**
      * Open DAG format modal
      */
-    const openDagFormatModal = () => {}
+    const { openFormatModal } = inject('formatModal', {
+      openFormatModal: (bool: boolean) => {}
+    })
+    const onFormat = () => {
+      openFormatModal(true)
+    }
 
+    /**
+     * Back to the entrance
+     */
     const onClose = () => {
       router.go(-1)
     }
@@ -97,7 +105,7 @@ export default defineComponent({
     return () => (
       <div class={Styles.toolbar}>
         <span class={Styles['workflow-name']}>
-          {t('project.dag.createWorkflow')}
+          {t('project.workflow.create_workflow')}
         </span>
         <div class={Styles['toolbar-right-part']}>
           {/* Search node */}
@@ -120,7 +128,7 @@ export default defineComponent({
                   }}
                 />
               ),
-              default: () => t('project.dag.search')
+              default: () => t('project.workflow.search')
             }}
           ></NTooltip>
           <div
@@ -156,7 +164,7 @@ export default defineComponent({
                   }}
                 />
               ),
-              default: () => t('project.dag.download_png')
+              default: () => t('project.workflow.download_png')
             }}
           ></NTooltip>
           {/* Toggle fullscreen */}
@@ -185,8 +193,8 @@ export default defineComponent({
               ),
               default: () =>
                 isFullscreen.value
-                  ? t('project.dag.fullscreen_close')
-                  : t('project.dag.fullscreen_open')
+                  ? t('project.workflow.fullscreen_close')
+                  : t('project.workflow.fullscreen_open')
             }}
           ></NTooltip>
           {/* DAG Format */}
@@ -199,7 +207,7 @@ export default defineComponent({
                   secondary
                   circle
                   type='info'
-                  onClick={openDagFormatModal}
+                  onClick={onFormat}
                   v-slots={{
                     icon: () => (
                       <NIcon>
@@ -209,7 +217,7 @@ export default defineComponent({
                   }}
                 />
               ),
-              default: () => t('project.dag.format')
+              default: () => t('project.workflow.format')
             }}
           ></NTooltip>
           {/* Version info */}
@@ -232,7 +240,7 @@ export default defineComponent({
                   }}
                 />
               ),
-              default: () => t('project.dag.workflow_version')
+              default: () => t('project.workflow.workflow_version')
             }}
           ></NTooltip>
           {/* Save workflow */}
@@ -242,11 +250,11 @@ export default defineComponent({
             secondary
             round
           >
-            {t('project.dag.save')}
+            {t('project.workflow.save')}
           </NButton>
           {/* Return to previous page */}
           <NButton secondary round onClick={onClose}>
-            {t('project.dag.close')}
+            {t('project.workflow.close')}
           </NButton>
         </div>
       </div>
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag.module.scss b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss
similarity index 55%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/dag.module.scss
rename to dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss
index 2298363907..72fed2e054 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag.module.scss
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/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/workflow-details/dag.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
similarity index 83%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/dag.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
index 6852412ecc..185094a9a6 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
@@ -21,6 +21,7 @@ import DagToolbar from './dag-toolbar'
 import DagCanvas from './dag-canvas'
 import DagSidebar from './dag-sidebar'
 import Styles from './dag.module.scss'
+import DagFormatModal from './dag-format-modal'
 import './x6-style.scss'
 
 export interface Dragged {
@@ -52,6 +53,16 @@ export default defineComponent({
       type: ''
     })
 
+    // Dag format modal visible
+    const formatModalVisible = ref<boolean>(false)
+    const openFormatModal = (bool: boolean) => {
+      formatModalVisible.value = bool
+    }
+    provide('formatModal', {
+      openFormatModal,
+      formatModalVisible
+    })
+
     return () => (
       <div class={Styles.dag}>
         <DagToolbar v-slots={toolbarSlots} />
@@ -59,6 +70,7 @@ export default defineComponent({
           <DagSidebar dragged={dragged} />
           <DagCanvas dragged={dragged} />
         </div>
+        <DagFormatModal show={formatModalVisible.value} />
       </div>
     )
   }
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-canvas-drop.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-canvas-drop.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/use-canvas-drop.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-canvas-drop.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-canvas-init.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-canvas-init.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/use-canvas-init.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-canvas-init.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-cell-active.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-cell-active.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/use-cell-active.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-cell-active.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-graph-operations.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-graph-operations.ts
similarity index 98%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/use-graph-operations.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-graph-operations.ts
index 809e4dc5a8..2ec36a3a03 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-graph-operations.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/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-details/config'
+import { ALL_TASK_TYPES } from '../../../task/constants/task-type'
 import utils from '@/utils'
 
 interface Options {
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-node-search.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-search.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/use-node-search.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-search.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-sidebar-drag.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-sidebar-drag.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/use-sidebar-drag.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-sidebar-drag.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-details/x6-style.scss b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/x6-style.scss
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/x6-style.scss
rename to dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/x6-style.scss
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-create.module.scss b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/create/index.module.scss
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-create.module.scss
rename to dolphinscheduler-ui-next/src/views/projects/workflow/definition/create/index.module.scss
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-create.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/create/index.tsx
similarity index 93%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-create.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow/definition/create/index.tsx
index 06fda18e44..101cfcf326 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-create.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/create/index.tsx
@@ -16,9 +16,9 @@
  */
 
 import { defineComponent } from 'vue'
-import Dag from './dag'
+import Dag from '../../components/dag'
 import { NCard } from 'naive-ui'
-import styles from './workflow-definition-create.module.scss'
+import styles from './index.module.scss'
 
 export default defineComponent({
   name: 'WorkflowDefinitionCreate',
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-details.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/detail/index.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-details.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow/definition/detail/index.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-definition-list/workflow-definition-list.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-definition-list/workflow-definition-list.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-instance-details.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/detail/index.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-instance-details.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow/instance/detail/index.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-instance-list/workflow-instance-list.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-instance-list/workflow-instance-list.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-relation/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/relation/index.tsx
similarity index 95%
rename from dolphinscheduler-ui-next/src/views/projects/workflow-relation/index.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow/relation/index.tsx
index c88abdeea2..b47a6d054e 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow-relation/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/relation/index.tsx
@@ -32,7 +32,7 @@ const workflowRelation = defineComponent({
     const { t } = this
 
     return (
-      <Card title={t('project.workflow_relation.workflow_relation')}>
+      <Card title={t('project.workflow.workflow_relation')}>
         <div>
           <NSelect />
           <NButton strong secondary circle type='info'>
diff --git a/dolphinscheduler-ui-next/src/views/resource/file/create/resource-file-create.tsx b/dolphinscheduler-ui-next/src/views/resource/file/create/index.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/resource/file/create/resource-file-create.tsx
rename to dolphinscheduler-ui-next/src/views/resource/file/create/index.tsx
diff --git a/dolphinscheduler-ui-next/src/views/resource/file/edit/resource-file-edit.tsx b/dolphinscheduler-ui-next/src/views/resource/file/edit/index.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/resource/file/edit/resource-file-edit.tsx
rename to dolphinscheduler-ui-next/src/views/resource/file/edit/index.tsx