diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
index a82a6a8d22..4376486880 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
@@ -219,6 +219,7 @@ export default defineComponent({
           definition={props.definition}
         />
         <TaskModal
+          readonly={props.readonly}
           show={taskModalVisible.value}
           projectCode={props.projectCode}
           data={currTask.value as any}
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-task-edit.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-task-edit.ts
index d2bc42ebac..a904401c16 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-task-edit.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-task-edit.ts
@@ -37,10 +37,11 @@ interface Options {
  */
 export function useTaskEdit(options: Options) {
   const { graph, definition } = options
-
   const { addNode, setNodeName } = useCellUpdate({ graph })
 
-  const taskDefinitions = ref<NodeData[]>([])
+  const taskDefinitions = ref<NodeData[]>(
+    definition.value?.taskDefinitionList || []
+  )
   const currTask = ref<NodeData>({
     taskType: 'SHELL',
     code: 0,
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/detail/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/detail/index.tsx
index daf9bbfd9c..c14e225f47 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/detail/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/detail/index.tsx
@@ -53,10 +53,15 @@ export default defineComponent({
     const code = Number(route.params.code)
 
     const definition = ref<WorkflowDefinition>()
+    const readonly = ref(false)
+    const isLoading = ref(true)
 
     const refresh = () => {
+      isLoading.value = true
       queryProcessDefinitionByCode(code, projectCode).then((res: any) => {
+        readonly.value = res.processDefinition.releaseState === 'ONLINE'
         definition.value = res
+        isLoading.value = false
       })
     }
 
@@ -107,12 +112,15 @@ export default defineComponent({
           theme.darkTheme ? Styles['dark'] : Styles['light']
         ]}
       >
-        <Dag
-          definition={definition.value}
-          onRefresh={refresh}
-          projectCode={projectCode}
-          onSave={save}
-        />
+        {!isLoading.value && (
+          <Dag
+            definition={definition.value}
+            onRefresh={refresh}
+            projectCode={projectCode}
+            onSave={save}
+            readonly={readonly.value}
+          />
+        )}
       </div>
     )
   }