fix #794 input bug (#801)

Author: lingfengchencn

web/app/components/app/configuration/config-var/index.tsx

@@ -16,13 +16,16 @@ import { DEFAULT_VALUE_MAX_LEN, getMaxVarNameLength } from '@/config'
 import { checkKeys, getNewVar } from '@/utils/var'
 import Switch from '@/app/components/base/switch'
 import Toast from '@/app/components/base/toast'
+import { Timeout } from 'ahooks/lib/useRequest/src/types'
 
 export type IConfigVarProps = {
   promptVariables: PromptVariable[]
   readonly?: boolean
   onPromptVariablesChange?: (promptVariables: PromptVariable[]) => void
 }
 
+let conflictTimer: Timeout
+
 const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVariablesChange }) => {
   const { t } = useTranslation()
   const hasVar = promptVariables.length > 0
@@ -34,11 +37,9 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
     return obj
   })()
 
-  const updatePromptVariable = (key: string, updateKey: string, newValue: any) => {
-    if (!(key in promptVariableObj))
-      return
-    const newPromptVariables = promptVariables.map((item) => {
-      if (item.key === key) {
+  const updatePromptVariable = (index: number, updateKey: string, newValue: any) => {
+    const newPromptVariables = promptVariables.map((item, i) => {
+      if (i === index) {
         return {
           ...item,
           [updateKey]: newValue,
@@ -51,11 +52,9 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
     onPromptVariablesChange?.(newPromptVariables)
   }
 
-  const batchUpdatePromptVariable = (key: string, updateKeys: string[], newValues: any[]) => {
-    if (!(key in promptVariableObj))
-      return
-    const newPromptVariables = promptVariables.map((item) => {
-      if (item.key === key) {
+  const batchUpdatePromptVariable = (index: number, updateKeys: string[], newValues: any[]) => {
+    const newPromptVariables = promptVariables.map((item, i) => {
+      if (i === index) {
         const newItem: any = { ...item }
         updateKeys.forEach((updateKey, i) => {
           newItem[updateKey] = newValues[i]
@@ -68,8 +67,8 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
 
     onPromptVariablesChange?.(newPromptVariables)
   }
-
   const updatePromptKey = (index: number, newKey: string) => {
+    clearTimeout(conflictTimer)
     const { isValid, errorKey, errorMessageKey } = checkKeys([newKey], true)
     if (!isValid) {
       Toast.notify({
@@ -78,17 +77,28 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
       })
       return
     }
+
     const newPromptVariables = promptVariables.map((item, i) => {
       if (i === index) {
         return {
           ...item,
           key: newKey,
         }
       }
-
       return item
     })
 
+    conflictTimer = setTimeout(() => {
+      const isKeyExists = promptVariables.some(item => item.key.trim() === newKey.trim())
+      if (isKeyExists) {
+        Toast.notify({
+          type: 'error',
+          message: t(`appDebug.varKeyError.keyAlreadyExists`, { key: newKey }),
+        })
+        return
+      }
+    },1000)
+
     onPromptVariablesChange?.(newPromptVariables)
   }
 
@@ -196,7 +206,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
                           type="text"
                           placeholder={key}
                           value={name}
-                          onChange={e => updatePromptVariable(key, 'name', e.target.value)}
+                          onChange={e => updatePromptVariable(index, 'name', e.target.value)}
                           maxLength={getMaxVarNameLength(name)}
                           className="h-6 leading-6 block w-full rounded-md border-0 py-1.5 text-gray-900  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
                         />)

web/i18n/lang/app-debug.en.ts

@@ -121,6 +121,7 @@ const translation = {
     tooLong: 'Variable key: {{key}} too length. Can not be longer then 16 characters',
     notValid: 'Variable key: {{key}} is invalid. Can only contain letters, numbers, and underscores',
     notStartWithNumber: 'Variable key: {{key}} can not start with a number',
+    keyAlreadyExists:'Variable key: :{{key}} already exists',
   },
   variableConig: {
     modalTitle: 'Field settings',

web/i18n/lang/app-debug.zh.ts

@@ -117,6 +117,7 @@ const translation = {
     tooLong: '变量: {{key}} 长度太长。不能超过 16 个字符',
     notValid: '变量: {{key}} 非法。只能包含英文字符，数字和下划线',
     notStartWithNumber: '变量: {{key}} 不能以数字开头',
+    keyAlreadyExists:'变量:{{key}} 已存在',
   },
   variableConig: {
     modalTitle: '变量设置',