feat: model load balancing (#4926)

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

@@ -1,16 +1,16 @@
-import type { FC, MouseEventHandler } from 'react'
-import React from 'react'
+import type { FC, MouseEventHandler, PropsWithChildren } from 'react'
+import React, { memo } from 'react'
+import classNames from 'classnames'
 import Spinner from '../spinner'
 
-export type IButtonProps = {
+export type IButtonProps = PropsWithChildren<{
   type?: string
   className?: string
   disabled?: boolean
   loading?: boolean
   tabIndex?: number
-  children: React.ReactNode
   onClick?: MouseEventHandler<HTMLDivElement>
-}
+}>
 
 const Button: FC<IButtonProps> = ({
   type,
@@ -21,22 +21,22 @@ const Button: FC<IButtonProps> = ({
   loading = false,
   tabIndex,
 }) => {
-  let style = 'cursor-pointer'
+  let typeClassNames = 'cursor-pointer'
   switch (type) {
     case 'primary':
-      style = (disabled || loading) ? 'btn-primary-disabled' : 'btn-primary'
+      typeClassNames = (disabled || loading) ? 'btn-primary-disabled' : 'btn-primary'
       break
     case 'warning':
-      style = (disabled || loading) ? 'btn-warning-disabled' : 'btn-warning'
+      typeClassNames = (disabled || loading) ? 'btn-warning-disabled' : 'btn-warning'
       break
     default:
-      style = disabled ? 'btn-default-disabled' : 'btn-default'
+      typeClassNames = disabled ? 'btn-default-disabled' : 'btn-default'
       break
   }
 
   return (
     <div
-      className={`btn ${style} ${className && className}`}
+      className={classNames('btn', typeClassNames, className)}
       tabIndex={tabIndex}
       onClick={disabled ? undefined : onClick}
     >
@@ -47,4 +47,4 @@ const Button: FC<IButtonProps> = ({
   )
 }
 
-export default React.memo(Button)
+export default memo(Button)