tool oauth

web/app/components/base/form/components/base/base-field.tsx

@@ -7,6 +7,7 @@ import type { AnyFieldApi } from '@tanstack/react-form'
 import { useStore } from '@tanstack/react-form'
 import cn from '@/utils/classnames'
 import Input from '@/app/components/base/input'
+import PureSelect from '@/app/components/base/select/pure'
 import type { FormSchema } from '@/app/components/base/form/types'
 import { FormTypeEnum } from '@/app/components/base/form/types'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
@@ -32,6 +33,9 @@ const BaseField = ({
   const renderI18nObject = useRenderI18nObject()
   const {
     label,
+    required,
+    placeholder,
+    options,
   } = formSchema
 
   const memorizedLabel = useMemo(() => {
@@ -44,12 +48,32 @@ const BaseField = ({
     if (typeof label === 'object' && label !== null)
       return renderI18nObject(label as Record<string, string>)
   }, [label, renderI18nObject])
+  const memorizedPlaceholder = useMemo(() => {
+    if (typeof placeholder === 'string')
+      return placeholder
+
+    if (typeof placeholder === 'object' && placeholder !== null)
+      return renderI18nObject(placeholder as Record<string, string>)
+  }, [placeholder, renderI18nObject])
+  const memorizedOptions = useMemo(() => {
+    return options?.map((option) => {
+      return {
+        label: typeof option.label === 'string' ? option.label : renderI18nObject(option.label),
+        value: option.value,
+      }
+    }) || []
+  }, [options, renderI18nObject])
   const value = useStore(field.form.store, s => s.values[field.name])
 
   return (
     <div className={cn(fieldClassName)}>
       <div className={cn(labelClassName)}>
         {memorizedLabel}
+        {
+          required && (
+            <span className='ml-1 text-text-destructive-secondary'>*</span>
+          )
+        }
       </div>
       <div className={cn(inputContainerClassName)}>
         {
@@ -62,6 +86,7 @@ const BaseField = ({
               onChange={e => field.handleChange(e.target.value)}
               onBlur={field.handleBlur}
               disabled={disabled}
+              placeholder={memorizedPlaceholder}
             />
           )
         }
@@ -76,6 +101,34 @@ const BaseField = ({
               onChange={e => field.handleChange(e.target.value)}
               onBlur={field.handleBlur}
               disabled={disabled}
+              placeholder={memorizedPlaceholder}
+            />
+          )
+        }
+        {
+          formSchema.type === FormTypeEnum.textNumber && (
+            <Input
+              id={field.name}
+              name={field.name}
+              type='number'
+              className={cn(inputClassName)}
+              value={value}
+              onChange={e => field.handleChange(e.target.value)}
+              onBlur={field.handleBlur}
+              disabled={disabled}
+              placeholder={memorizedPlaceholder}
+            />
+          )
+        }
+        {
+          formSchema.type === FormTypeEnum.select && (
+            <PureSelect
+              value={value}
+              onChange={v => field.handleChange(v)}
+              disabled={disabled}
+              placeholder={memorizedPlaceholder}
+              options={memorizedOptions}
+              triggerPopupSameWidth
             />
           )
         }

web/app/components/base/form/types.ts

@@ -31,6 +31,13 @@ export enum FormTypeEnum {
   dynamicSelect = 'dynamic-select',
 }
 
+export type FormOption = {
+  label: TypeWithI18N | string
+  value: string
+  show_on: FormShowOnObject[]
+  icon?: string
+}
+
 export type FormSchema = {
   type: FormTypeEnum
   name: string
@@ -41,6 +48,9 @@ export type FormSchema = {
   show_on?: FormShowOnObject[]
   url?: string
   scope?: string
+  help?: string | TypeWithI18N
+  placeholder?: string | TypeWithI18N
+  options?: FormOption[]
 }
 
 export type FormValues = Record<string, any>

web/app/components/base/select/pure.tsx

@@ -39,6 +39,9 @@ type PureSelectProps = {
     itemClassName?: string
     title?: string
   },
+  placeholder?: string
+  disabled?: boolean
+  triggerPopupSameWidth?: boolean
 }
 const PureSelect = ({
   options,
@@ -47,6 +50,9 @@ const PureSelect = ({
   containerProps,
   triggerProps,
   popupProps,
+  placeholder,
+  disabled,
+  triggerPopupSameWidth,
 }: PureSelectProps) => {
   const { t } = useTranslation()
   const {
@@ -74,7 +80,7 @@ const PureSelect = ({
   }, [onOpenChange])
 
   const selectedOption = options.find(option => option.value === value)
-  const triggerText = selectedOption?.label || t('common.placeholder.select')
+  const triggerText = selectedOption?.label || placeholder || t('common.placeholder.select')
 
   return (
     <PortalToFollowElem
@@ -82,6 +88,7 @@ const PureSelect = ({
       offset={offset || 4}
       open={mergedOpen}
       onOpenChange={handleOpenChange}
+      triggerPopupSameWidth={triggerPopupSameWidth}
     >
       <PortalToFollowElemTrigger
         onClick={() => handleOpenChange(!mergedOpen)}
@@ -135,6 +142,7 @@ const PureSelect = ({
                 )}
                 title={option.label}
                 onClick={() => {
+                  if (disabled) return
                   onChange?.(option.value)
                   handleOpenChange(false)
                 }}