feat: frontend multi models support (#804)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: Joel <iamjoel007@gmail.com>

web/app/components/base/switch/index.tsx

@@ -5,7 +5,7 @@ import { Switch as OriginalSwitch } from '@headlessui/react'
 
 type SwitchProps = {
   onChange: (value: boolean) => void
-  size?: 'md' | 'lg'
+  size?: 'md' | 'lg' | 'l'
   defaultValue?: boolean
   disabled?: boolean
 }
@@ -17,16 +17,19 @@ const Switch = ({ onChange, size = 'lg', defaultValue = false, disabled = false
   }, [defaultValue])
   const wrapStyle = {
     lg: 'h-6 w-11',
+    l: 'h-5 w-9',
     md: 'h-4 w-7',
   }
 
   const circleStyle = {
     lg: 'h-5 w-5',
+    l: 'h-4 w-4',
     md: 'h-3 w-3',
   }
 
   const translateLeft = {
     lg: 'translate-x-5',
+    l: 'translate-x-4',
     md: 'translate-x-3',
   }
   return (