feat: output var

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

@@ -4,6 +4,7 @@ import useConfig from './use-config'
 import { mockData } from './mock'
 import { CodeLanguage } from './types'
 import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
+import OutputVarList from '@/app/components/workflow/nodes/_base/components/variable/output-var-list'
 import AddButton from '@/app/components/base/button/add-button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
@@ -31,6 +32,8 @@ const Panel: FC = () => {
     handleAddVariable,
     handleCodeChange,
     handleCodeLanguageChange,
+    handleOutputVarListChange,
+    handleAddOutputVariable,
   } = useConfig(mockData)
   return (
     <div className='mt-2'>
@@ -62,7 +65,18 @@ const Panel: FC = () => {
       </div>
       <Split />
       <div className='px-4 pt-4 pb-2'>
-        output var
+        <Field
+          title={t(`${i18nPrefix}.outputVars`)}
+          operations={
+            <AddButton onClick={handleAddOutputVariable} />
+          }
+        >
+          <OutputVarList
+            readonly={readOnly}
+            list={inputs.outputs}
+            onChange={handleOutputVarListChange}
+          />
+        </Field>
       </div>
     </div>
   )

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

@@ -5,12 +5,14 @@ export enum CodeLanguage {
   javascript = 'javascript',
 }
 
+export type OutputVar = {
+  variable: string
+  variable_type: string
+}
+
 export type CodeNodeType = CommonNodeType & {
   variables: Variable[]
   code_language: CodeLanguage
   code: string
-  outputs: {
-    variable: string
-    variable_type: string
-  }[]
+  outputs: OutputVar[]
 }

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

@@ -1,5 +1,6 @@
 import { useCallback, useState } from 'react'
 import useVarList from '../_base/hooks/use-var-list'
+import useOutputVarList from '../_base/hooks/use-output-var-list'
 import type { CodeLanguage, CodeNodeType } from './types'
 
 const useConfig = (initInputs: CodeNodeType) => {
@@ -17,12 +18,19 @@ const useConfig = (initInputs: CodeNodeType) => {
     setInputs(prev => ({ ...prev, code_language: codeLanguage }))
   }, [setInputs])
 
+  const { handleVarListChange: handleOutputVarListChange, handleAddVariable: handleAddOutputVariable } = useOutputVarList<CodeNodeType>({
+    inputs,
+    setInputs,
+  })
+
   return {
     inputs,
     handleVarListChange,
     handleAddVariable,
     handleCodeChange,
     handleCodeLanguageChange,
+    handleOutputVarListChange,
+    handleAddOutputVariable,
   }
 }