chore: check input variable key of code/template node is valid (#21057)

web/app/components/workflow/nodes/_base/components/variable/var-list.tsx

 import Input from '@/app/components/base/input'
 import type { ValueSelector, Var, Variable } from '@/app/components/workflow/types'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
+import { checkKeys } from '@/utils/var'
+import Toast from '@/app/components/base/toast'
 
 type Props = {
   nodeId: string
 
   const handleVarNameChange = useCallback((index: number) => {
     return (e: React.ChangeEvent<HTMLInputElement>) => {
-      onVarNameChange?.(list[index].variable, e.target.value)
+      const newKey = e.target.value
+      const { isValid, errorKey, errorMessageKey } = checkKeys([newKey], true)
+      if (!isValid) {
+        Toast.notify({
+          type: 'error',
+          message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
+        })
+        return
+      }
+
+      if (list.map(item => item.variable?.trim()).includes(newKey.trim())) {
+        Toast.notify({
+          type: 'error',
+          message: t('appDebug.varKeyError.keyAlreadyExists', { key: newKey }),
+        })
+        return
+      }
+
+      onVarNameChange?.(list[index].variable, newKey)
       const newList = produce(list, (draft) => {
-        draft[index].variable = e.target.value
+        draft[index].variable = newKey
       })
       onChange(newList)
     }