feat: frontend multi models support (#804)

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

web/app/components/base/confirm/common.module.css

@@ -0,0 +1,3 @@
+.wrapper {
+  background: linear-gradient(180deg, rgba(217, 45, 32, 0.05) 0%, rgba(217, 45, 32, 0.00) 24.02%), #F9FAFB;
+}

web/app/components/base/confirm/common.tsx

@@ -0,0 +1,69 @@
+import type { FC, ReactElement } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import s from './common.module.css'
+import Modal from '@/app/components/base/modal'
+import { XClose } from '@/app/components/base/icons/src/vender/line/general'
+import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+import Button from '@/app/components/base/button'
+
+type ConfirmCommonProps = {
+  type?: string
+  isShow: boolean
+  onCancel: () => void
+  title: string
+  desc?: string
+  onConfirm: () => void
+}
+
+const ConfirmCommon: FC<ConfirmCommonProps> = ({
+  type = 'danger',
+  isShow,
+  onCancel,
+  title,
+  desc,
+  onConfirm,
+}) => {
+  const { t } = useTranslation()
+
+  const CONFIRM_MAP: Record<string, { icon: ReactElement; confirmText: string }> = {
+    danger: {
+      icon: <AlertCircle className='w-6 h-6 text-[#D92D20]' />,
+      confirmText: t('common.operation.remove'),
+    },
+  }
+
+  return (
+    <Modal isShow={isShow} onClose={() => {}} className='!w-[480px] !max-w-[480px] !p-0 !rounded-2xl'>
+      <div className={cn(s.wrapper, 'relative p-8')}>
+        <div className='flex items-center justify-center absolute top-4 right-4 w-8 h-8 cursor-pointer' onClick={onCancel}>
+          <XClose className='w-4 h-4 text-gray-500' />
+        </div>
+        <div className='flex items-center justify-center mb-3 w-12 h-12 bg-white shadow-xl rounded-xl'>
+          {CONFIRM_MAP[type].icon}
+        </div>
+        <div className='text-xl font-semibold text-gray-900'>{title}</div>
+        {
+          desc && <div className='mt-1 text-sm text-gray-500'>{desc}</div>
+        }
+        <div className='flex items-center justify-end mt-10'>
+          <Button
+            className='mr-2 min-w-24 text-sm font-medium !text-gray-700'
+            onClick={onCancel}
+          >
+            {t('common.operation.cancel')}
+          </Button>
+          <Button
+            type='primary'
+            className=''
+            onClick={onConfirm}
+          >
+            {CONFIRM_MAP[type].confirmText}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default ConfirmCommon