feat: support var remove in code node

web/app/components/workflow/nodes/_base/hooks/use-output-var-list.ts

@@ -1,6 +1,8 @@
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import produce from 'immer'
+import { useBoolean } from 'ahooks'
 import { type OutputVar } from '../../code/types'
+import type { ValueSelector } from '@/app/components/workflow/types'
 import { VarType } from '@/app/components/workflow/types'
 import {
   useWorkflow,
@@ -22,7 +24,7 @@ function useOutputVarList<T>({
   outputKeyOrders = [],
   onOutputKeyOrdersChange,
 }: Params<T>) {
-  const { handleOutVarRenameChange } = useWorkflow()
+  const { handleOutVarRenameChange, isVarUsedInNodes, removeUsedVarInNodes } = useWorkflow()
 
   const handleVarsChange = useCallback((newVars: OutputVar, changedIndex?: number, newKey?: string) => {
     const newInputs = produce(inputs, (draft: any) => {
@@ -56,19 +58,38 @@ function useOutputVarList<T>({
     onOutputKeyOrdersChange([...outputKeyOrders, newKey])
   }, [inputs, setInputs, varKey, outputKeyOrders, onOutputKeyOrdersChange])
 
+  const [isShowRemoveVarConfirm, {
+    setTrue: showRemoveVarConfirm,
+    setFalse: hideRemoveVarConfirm,
+  }] = useBoolean(false)
+  const [removedVar, setRemovedVar] = useState<ValueSelector>([])
+  const removeVarInNode = useCallback(() => {
+    removeUsedVarInNodes(removedVar)
+    hideRemoveVarConfirm()
+  }, [hideRemoveVarConfirm, removeUsedVarInNodes, removedVar])
   const handleRemoveVariable = useCallback((index: number) => {
     const key = outputKeyOrders[index]
+
+    if (isVarUsedInNodes([id, key])) {
+      showRemoveVarConfirm()
+      setRemovedVar([id, key])
+      return
+    }
+
     const newInputs = produce(inputs, (draft: any) => {
       delete draft[varKey][key]
     })
     setInputs(newInputs)
     onOutputKeyOrdersChange(outputKeyOrders.filter((_, i) => i !== index))
-  }, [inputs, setInputs, varKey, outputKeyOrders, onOutputKeyOrdersChange])
+  }, [outputKeyOrders, isVarUsedInNodes, id, inputs, setInputs, onOutputKeyOrdersChange, showRemoveVarConfirm, varKey])
 
   return {
     handleVarsChange,
     handleAddVariable,
     handleRemoveVariable,
+    isShowRemoveVarConfirm,
+    hideRemoveVarConfirm,
+    onRemoveVarConfirm: removeVarInNode,
   }
 }
 

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

@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import RemoveEffectVarConfirm from '../_base/components/remove-effect-var-confirm'
 import useConfig from './use-config'
 import type { CodeNodeType } from './types'
 import { CodeLanguage } from './types'
@@ -14,6 +15,7 @@ import TypeSelector from '@/app/components/workflow/nodes/_base/components/selec
 import type { NodePanelProps } from '@/app/components/workflow/types'
 import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
 import ResultPanel from '@/app/components/workflow/run/result-panel'
+
 const i18nPrefix = 'workflow.nodes.code'
 
 const codeLanguages = [
@@ -44,6 +46,9 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
     handleVarsChange,
     handleAddOutputVariable,
     filterVar,
+    isShowRemoveVarConfirm,
+    hideRemoveVarConfirm,
+    onRemoveVarConfirm,
     // single run
     isShowSingleRun,
     hideSingleRun,
@@ -125,6 +130,11 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
           />
         )
       }
+      <RemoveEffectVarConfirm
+        isShow={isShowRemoveVarConfirm}
+        onCancel={hideRemoveVarConfirm}
+        onConfirm={onRemoveVarConfirm}
+      />
     </div >
   )
 }

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

@@ -85,7 +85,14 @@ const useConfig = (id: string, payload: CodeNodeType) => {
     setInputs(newInputs)
   }, [allLanguageDefault, inputs, setInputs])
 
-  const { handleVarsChange, handleAddVariable: handleAddOutputVariable, handleRemoveVariable } = useOutputVarList<CodeNodeType>({
+  const {
+    handleVarsChange,
+    handleAddVariable: handleAddOutputVariable,
+    handleRemoveVariable,
+    isShowRemoveVarConfirm,
+    hideRemoveVarConfirm,
+    onRemoveVarConfirm,
+  } = useOutputVarList<CodeNodeType>({
     id,
     inputs,
     setInputs,
@@ -142,6 +149,9 @@ const useConfig = (id: string, payload: CodeNodeType) => {
     handleVarsChange,
     filterVar,
     handleAddOutputVariable,
+    isShowRemoveVarConfirm,
+    hideRemoveVarConfirm,
+    onRemoveVarConfirm,
     // single run
     isShowSingleRun,
     hideSingleRun,