merge feat/workflow

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx

@@ -1,13 +1,12 @@
-'use client'
-
-import { memo } from 'react'
 import Workflow from '@/app/components/workflow'
 
-const Page = () => {
+const Page = async ({
+  params: { appId },
+}: any) => {
   return (
     <div className='w-full h-full overflow-x-auto'>
-      <Workflow />
+      <Workflow appId={appId} />
     </div>
   )
 }
-export default memo(Page)
+export default Page

web/app/components/workflow/context.tsx

@@ -8,13 +8,14 @@ type WorkflowStore = ReturnType<typeof createWorkflowStore>
 export const WorkflowContext = createContext<WorkflowStore | null>(null)
 
 type WorkflowProviderProps = {
+  appId: string
   children: React.ReactNode
 }
-export const WorkflowContextProvider = ({ children }: WorkflowProviderProps) => {
+export const WorkflowContextProvider = ({ appId, children }: WorkflowProviderProps) => {
   const storeRef = useRef<WorkflowStore>()
 
   if (!storeRef.current)
-    storeRef.current = createWorkflowStore()
+    storeRef.current = createWorkflowStore(appId)
 
   return (
     <WorkflowContext.Provider value={storeRef.current}>

web/app/components/workflow/hooks/use-nodes-sync-draft.ts

@@ -10,7 +10,6 @@ import { BlockEnum } from '../types'
 import { useNodesReadOnly } from './use-workflow'
 import { syncWorkflowDraft } from '@/service/workflow'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
-import { useStore as useAppStore } from '@/app/components/app/store'
 import { API_PREFIX } from '@/config'
 
 export const useNodesSyncDraft = () => {
@@ -28,7 +27,7 @@ export const useNodesSyncDraft = () => {
       transform,
     } = store.getState()
     const [x, y, zoom] = transform
-    const appId = useAppStore.getState().appDetail?.id
+    const appId = workflowStore.getState().appId
 
     if (appId || appIdParams) {
       const nodes = getNodes()
@@ -79,7 +78,7 @@ export const useNodesSyncDraft = () => {
         },
       }
     }
-  }, [store, featuresStore])
+  }, [store, featuresStore, workflowStore])
 
   const syncWorkflowDraftWhenPageClose = useCallback(() => {
     const postParams = getPostParams()

web/app/components/workflow/index.tsx

@@ -8,7 +8,6 @@ import {
   useLayoutEffect,
   useMemo,
 } from 'react'
-import { useParams } from 'next/navigation'
 import { setAutoFreeze } from 'immer'
 import {
   useKeyPress,
@@ -51,7 +50,6 @@ import {
 import Loading from '@/app/components/base/loading'
 import { FeaturesProvider } from '@/app/components/base/features'
 import type { Features as FeaturesData } from '@/app/components/base/features/types'
-import { useStore as useAppStore } from '@/app/components/app/store'
 
 const nodeTypes = {
   custom: CustomNode,
@@ -78,7 +76,6 @@ const Workflow: FC<WorkflowProps> = memo(({
   } = useNodesSyncDraft()
   const { workflowReadOnly } = useWorkflowReadOnly()
   const { nodesReadOnly } = useNodesReadOnly()
-  const params = useParams()
 
   useEffect(() => {
     setAutoFreeze(false)
@@ -89,12 +86,8 @@ const Workflow: FC<WorkflowProps> = memo(({
   }, [])
 
   useLayoutEffect(() => {
-    const appId = params.appId
     return () => {
-      const appIdParams = useAppStore.getState().appDetail?.id
-
-      if (appId !== appIdParams)
-        handleSyncWorkflowDraft(true, appId as string)
+      handleSyncWorkflowDraft(true)
     }
   }, [])
 
@@ -258,9 +251,9 @@ const WorkflowWrap = memo(() => {
 })
 WorkflowWrap.displayName = 'WorkflowWrap'
 
-const WorkflowContainer = () => {
+const WorkflowContainer = ({ appId }: any) => {
   return (
-    <WorkflowContextProvider>
+    <WorkflowContextProvider appId={appId}>
       <WorkflowWrap />
     </WorkflowContextProvider>
   )

web/app/components/workflow/store.ts

@@ -20,6 +20,7 @@ import type {
 import { WorkflowContext } from './context'
 
 type Shape = {
+  appId: string
   workflowRunningData?: WorkflowRunningData
   setWorkflowRunningData: (workflowData: WorkflowRunningData) => void
   historyWorkflowData?: HistoryWorkflowData
@@ -63,8 +64,9 @@ type Shape = {
   setCustomTools: (tools: ToolWithProvider[]) => void
 }
 
-export const createWorkflowStore = () => {
+export const createWorkflowStore = (appId: string) => {
   return create<Shape>(set => ({
+    appId,
     workflowData: undefined,
     setWorkflowRunningData: workflowRunningData => set(() => ({ workflowRunningData })),
     historyWorkflowData: undefined,