diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx
index 2b9573e1dd..bb57d526c9 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx
@@ -2,12 +2,10 @@
 
 import { memo } from 'react'
 import Workflow from '@/app/components/workflow'
-import { useStore } from '@/app/components/app/store'
 
 const Page = () => {
-  const appDetail = useStore(s => s.appDetail)!
   return (
-    <div className='w-full h-full overflow-x-auto' key={appDetail.id}>
+    <div className='w-full h-full overflow-x-auto'>
       <Workflow />
     </div>
   )
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index ad83beed16..658aeb60cf 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import type { FC } from 'react'
 import {
   memo,
@@ -76,6 +78,12 @@ const Workflow: FC<WorkflowProps> = memo(({
     }
   }, [])
 
+  useEffect(() => {
+    return () => {
+      handleSyncWorkflowDraft(true)
+    }
+  }, [handleSyncWorkflowDraft])
+
   const {
     handleNodeDragStart,
     handleNodeDrag,
diff --git a/web/app/components/workflow/panel/inputs-panel.tsx b/web/app/components/workflow/panel/inputs-panel.tsx
index 5037c93cb5..69a6c5a04b 100644
--- a/web/app/components/workflow/panel/inputs-panel.tsx
+++ b/web/app/components/workflow/panel/inputs-panel.tsx
@@ -35,7 +35,7 @@ const InputsPanel = () => {
 
   const variables = useMemo(() => {
     const data = startVariables || []
-    if (fileSettings.image.enabled) {
+    if (fileSettings?.image.enabled) {
       return [
         ...data,
         {