feat: get and set data use context

web/app/components/workflow/nodes/template-transform/node.tsx

@@ -1,6 +1,8 @@
 import type { FC } from 'react'
+import type { TemplateTransformNodeType } from './types'
+import type { NodeProps } from '@/app/components/workflow/types'
 
-const Node: FC = () => {
+const Node: FC<NodeProps<TemplateTransformNodeType>> = () => {
   return (
     // No summary content
     <div></div>

web/app/components/workflow/nodes/template-transform/panel.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import useConfig from './use-config'
-import { mockData } from './mock'
+import type { TemplateTransformNodeType } from './types'
 import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
 import AddButton from '@/app/components/base/button/add-button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
@@ -9,10 +9,14 @@ import Split from '@/app/components/workflow/nodes/_base/components/split'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
+import type { NodeProps } from '@/app/components/workflow/types'
 
 const i18nPrefix = 'workflow.nodes.templateTransform'
 
-const Panel: FC = () => {
+const Panel: FC<NodeProps<TemplateTransformNodeType>> = ({
+  id,
+  data,
+}) => {
   const { t } = useTranslation()
   const readOnly = false
 
@@ -21,7 +25,8 @@ const Panel: FC = () => {
     handleVarListChange,
     handleAddVariable,
     handleCodeChange,
-  } = useConfig(mockData)
+  } = useConfig(id, data)
+
   return (
     <div className='mt-2'>
       <div className='px-4 pb-4 space-y-4'>

web/app/components/workflow/nodes/template-transform/use-config.ts

@@ -1,16 +1,21 @@
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
+import produce from 'immer'
 import useVarList from '../_base/hooks/use-var-list'
 import type { TemplateTransformNodeType } from './types'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 
-const useConfig = (initInputs: TemplateTransformNodeType) => {
-  const [inputs, setInputs] = useState<TemplateTransformNodeType>(initInputs)
+const useConfig = (id: string, payload: TemplateTransformNodeType) => {
+  const { inputs, setInputs } = useNodeCrud<TemplateTransformNodeType>(id, payload)
   const { handleVarListChange, handleAddVariable } = useVarList<TemplateTransformNodeType>({
     inputs,
     setInputs,
   })
 
   const handleCodeChange = useCallback((template: string) => {
-    setInputs(prev => ({ ...prev, template }))
+    const newInputs = produce(inputs, (draft: any) => {
+      draft.template = template
+    })
+    setInputs(newInputs)
   }, [setInputs])
 
   return {