feat: get and set value from store

web/app/components/workflow/nodes/code/mock.ts

@@ -1,10 +1,11 @@
+import { BlockEnum } from '../../types'
 import { CodeLanguage } from './types'
 import type { CodeNodeType } from './types'
 
 export const mockData: CodeNodeType = {
   title: 'Test',
   desc: 'Test',
-  type: 'Test',
+  type: BlockEnum.Code,
   variables: [
     {
       variable: 'name',

web/app/components/workflow/nodes/direct-answer/mock.ts

@@ -1,9 +1,10 @@
+import { BlockEnum } from '../../types'
 import type { DirectAnswerNodeType } from './types'
 
 export const mockData: DirectAnswerNodeType = {
   title: 'Test',
   desc: 'Test',
-  type: 'Test',
+  type: BlockEnum.DirectAnswer,
   variables: [
     {
       variable: 'age',

web/app/components/workflow/nodes/start/mock.ts

@@ -1,15 +1,15 @@
 import type { StartNodeType } from './types'
-import { InputVarType } from '@/app/components/workflow/types'
+import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
 
 export const mockData: StartNodeType = {
   title: 'Test',
   desc: 'Test',
-  type: 'Test',
+  type: BlockEnum.Start,
   variables: [
     {
       type: InputVarType.textInput,
       label: 'Test',
-      variable: 'str',
+      variable: 'a',
       max_length: 10,
       default: 'test',
       required: true,

web/app/components/workflow/nodes/start/node.tsx

@@ -1,13 +1,16 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import InputVarTypeIcon from '../_base/components/input-var-type-icon'
-import { mockData } from './mock'
+import type { StartNodeType } from './types'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import type { NodeProps } from '@/app/components/workflow/types'
 const i18nPrefix = 'workflow.nodes.start'
 
-const Node: FC = () => {
+const Node: FC<NodeProps<StartNodeType>> = ({
+  data,
+}) => {
   const { t } = useTranslation()
-  const { variables } = mockData
+  const { variables } = data
 
   return (
     <div className='px-3'>

web/app/components/workflow/nodes/start/panel.tsx

@@ -2,16 +2,20 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import VarList from './components/var-list'
 import useConfig from './use-config'
-import { mockData } from './mock'
+import type { StartNodeType } from './types'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import AddButton from '@/app/components/base/button/add-button'
 import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
+import type { NodeProps } from '@/app/components/workflow/types'
 
 const i18nPrefix = 'workflow.nodes.start'
 
-const Panel: FC = () => {
+const Panel: FC<NodeProps<StartNodeType>> = ({
+  id,
+  data,
+}) => {
   const { t } = useTranslation()
   const readOnly = false
   const {
@@ -21,7 +25,7 @@ const Panel: FC = () => {
     handleAddVariable,
     hideAddVarModal,
     handleVarListChange,
-  } = useConfig(mockData)
+  } = useConfig(id, data)
 
   return (
     <div className='mt-2'>

web/app/components/workflow/nodes/start/use-config.ts

@@ -1,11 +1,19 @@
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 import produce from 'immer'
 import { useBoolean } from 'ahooks'
 import type { StartNodeType } from './types'
 import type { InputVar } from '@/app/components/workflow/types'
-
-const useConfig = (initInputs: StartNodeType) => {
-  const [inputs, setInputs] = useState<StartNodeType>(initInputs)
+import { useWorkflow } from '@/app/components/workflow/hooks'
+const useConfig = (id: string, payload: StartNodeType) => {
+  const { handleNodeDataUpdate } = useWorkflow()
+  // const [inputs, setInputs] = useState<StartNodeType>(initInputs)
+  const inputs = payload
+  const setInputs = (newInputs: StartNodeType) => {
+    handleNodeDataUpdate({
+      id,
+      data: newInputs,
+    })
+  }
 
   const [isShowAddVarModal, {
     setTrue: showAddVarModal,

web/app/components/workflow/nodes/template-transform/mock.ts

@@ -1,9 +1,10 @@
+import { BlockEnum } from '../../types'
 import type { TemplateTransformNodeType } from './types'
 
 export const mockData: TemplateTransformNodeType = {
   title: 'Test',
   desc: 'Test',
-  type: 'Test',
+  type: BlockEnum.TemplateTransform,
   variables: [
     {
       variable: 'name',

web/app/components/workflow/types.ts

@@ -23,7 +23,7 @@ export type Branch = {
   name: string
 }
 
-export type CommonNodeType = {
+export type CommonNodeType<T = {}> = {
   index?: {
     x: number
     y: number
@@ -34,10 +34,11 @@ export type CommonNodeType = {
   title: string
   desc: string
   type: BlockEnum
-}
+} & T
 
 export type Node = ReactFlowNode<CommonNodeType>
 export type SelectedNode = Pick<Node, 'id' | 'data'>
+export type NodeProps<T> = { id: string; data: CommonNodeType<T> }
 export type Edge = ReactFlowEdge
 
 export type ValueSelector = string[] // [nodeId, key | obj key path]