frontend for model runtime (#1861)

Co-authored-by: Joel <iamjoel007@gmail.com>
This commit is contained in:
zxhlyh
2024-01-03 00:05:08 +08:00
committed by GitHub
parent d069c668f8
commit d70d61b1cb
29 changed files with 1442 additions and 917 deletions

View File

@@ -21,6 +21,7 @@ type FormProps = {
validating: boolean
validatedSuccess?: boolean
showOnVariableMap: Record<string, string[]>
isEditMode: boolean
}
const Form: FC<FormProps> = ({
@@ -30,11 +31,15 @@ const Form: FC<FormProps> = ({
validating,
validatedSuccess,
showOnVariableMap,
isEditMode,
}) => {
const language = useLanguage()
const [changeKey, setChangeKey] = useState('')
const handleFormChange = (key: string, val: string) => {
if (isEditMode && (key === '__model_type' || key === '__model_name'))
return
setChangeKey(key)
const shouldClearVariable: Record<string, string | undefined> = {}
if (showOnVariableMap[key]?.length) {
@@ -58,6 +63,8 @@ const Form: FC<FormProps> = ({
if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
return null
const disabed = isEditMode && (variable === '__model_type' || variable === '__model_name')
return (
<div key={variable} className='py-3'>
<div className='py-2 text-sm text-gray-900'>
@@ -69,10 +76,12 @@ const Form: FC<FormProps> = ({
}
</div>
<Input
className={`${disabed && 'cursor-not-allowed opacity-60'}`}
value={value[variable] as string}
onChange={val => handleFormChange(variable, val)}
validated={validatedSuccess}
placeholder={placeholder?.[language]}
disabled={disabed}
/>
{validating && changeKey === variable && <ValidatingTip />}
</div>
@@ -91,6 +100,8 @@ const Form: FC<FormProps> = ({
if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
return null
const disabed = isEditMode && (variable === '__model_type' || variable === '__model_name')
return (
<div key={variable} className='py-3'>
<div className='py-2 text-sm text-gray-900'>
@@ -113,6 +124,7 @@ const Form: FC<FormProps> = ({
className={`
flex items-center px-3 py-2 rounded-lg border border-gray-100 bg-gray-25 cursor-pointer
${value[variable] === option.value && 'bg-white border-[1.5px] border-primary-400 shadow-sm'}
${disabed && '!cursor-not-allowed opacity-60'}
`}
onClick={() => handleFormChange(variable, option.value)}
key={`${variable}-${option.value}`}