feat: new var input editor

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

@@ -7,6 +7,7 @@ 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'
 
 const i18nPrefix = 'workflow.nodes.start'
 
@@ -15,6 +16,10 @@ const Panel: FC = () => {
   const readOnly = false
   const {
     inputs,
+    isShowAddVarModal,
+    showAddVarModal,
+    handleAddVariable,
+    hideAddVarModal,
     handleVarListChange,
   } = useConfig(mockData)
 
@@ -24,7 +29,7 @@ const Panel: FC = () => {
         <Field
           title={t(`${i18nPrefix}.inputField`)}
           operations={
-            <AddButton onClick={() => { }} />
+            <AddButton onClick={showAddVarModal} />
           }
         >
           <VarList
@@ -69,6 +74,17 @@ const Panel: FC = () => {
           </>
         </OutputVars>
       </div>
+      {isShowAddVarModal && (
+        <ConfigVarModal
+          isCreate
+          isShow={isShowAddVarModal}
+          onClose={hideAddVarModal}
+          onConfirm={(payload) => {
+            handleAddVariable(payload)
+            hideAddVarModal()
+          }}
+        />
+      )}
     </div>
   )
 }

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

@@ -1,11 +1,17 @@
 import { useCallback, useState } 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)
 
+  const [isShowAddVarModal, {
+    setTrue: showAddVarModal,
+    setFalse: hideAddVarModal,
+  }] = useBoolean(true)
+
   const handleVarListChange = useCallback((newList: InputVar[]) => {
     const newInputs = produce(inputs, (draft: any) => {
       draft.variables = newList
@@ -21,6 +27,9 @@ const useConfig = (initInputs: StartNodeType) => {
   }, [inputs, setInputs])
   return {
     inputs,
+    isShowAddVarModal,
+    showAddVarModal,
+    hideAddVarModal,
     handleVarListChange,
     handleAddVariable,
   }