fix: some style

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

+.wrapper {
+  background: linear-gradient(180deg, rgba(217, 45, 32, 0.05) 0%, rgba(217, 45, 32, 0.00) 24.02%), #F9FAFB;
+}
\ No newline at end of file

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

+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
+}
+
+const ConfirmCommon: FC<ConfirmCommonProps> = ({
+  type = 'danger',
+  isShow,
+  onCancel,
+  title,
+  desc,
+}) => {
+  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=''>{CONFIRM_MAP[type].confirmText}</Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default ConfirmCommon

web/app/components/header/account-dropdown/index.tsx

@@ -23,7 +23,7 @@ export default function AppSelector() {
     rounded-lg font-normal hover:bg-gray-50 cursor-pointer
   `
   const router = useRouter()
-  const [settingVisible, setSettingVisible] = useState(true)
+  const [settingVisible, setSettingVisible] = useState(false)
   const [aboutVisible, setAboutVisible] = useState(false)
 
   const { locale } = useContext(I18n)

web/app/components/header/account-setting/index.tsx

@@ -30,7 +30,7 @@ type IAccountSettingProps = {
 }
 export default function AccountSetting({
   onCancel,
-  activeTab = 'provider',
+  activeTab = 'account',
 }: IAccountSettingProps) {
   const [activeMenu, setActiveMenu] = useState(activeTab)
   const { t } = useTranslation()

web/app/components/header/account-setting/model-page/model-item/Operation.tsx

+import type { FC } from 'react'
 import { Fragment } from 'react'
 import { Popover, Transition } from '@headlessui/react'
 import { useTranslation } from 'react-i18next'
@@ -7,7 +8,13 @@ const itemClassName = `
 flex items-center px-3 h-9 text-sm text-gray-700 rounded-lg cursor-pointer
 `
 
-const Operation = () => {
+type OperationProps = {
+  onOperate: (action: string) => void
+}
+
+const Operation: FC<OperationProps> = ({
+  onOperate,
+}) => {
   const { t } = useTranslation()
 
   return (
@@ -33,7 +40,7 @@ const Operation = () => {
         <Popover.Panel className='absolute top-8 right-0 w-[144px] bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg z-10'>
           <div className='p-1'>
             <Popover.Button as={Fragment}>
-              <div className={`group ${itemClassName} hover:bg-[#FEF3F2] hover:text-[#D92D20]`}>
+              <div className={`group ${itemClassName} hover:bg-[#FEF3F2] hover:text-[#D92D20]`} onClick={() => onOperate('delete')}>
                 <Trash03 className='mr-2 w-4 h-4 text-gray-500 group-hover:text-[#D92D20]' />
                 {t('common.operation.remove')}
               </div>

web/app/components/header/account-setting/model-page/model-item/index.tsx

+import { useState } from 'react'
 import type { FC, ReactElement } from 'react'
 import { useTranslation } from 'react-i18next'
 import Indicator from '../../../indicator'
 import Operation from './Operation'
 import Button from '@/app/components/base/button'
+import Confirm from '@/app/components/base/confirm/common'
 
 type ModelItemProps = {
   provider: { key: string; type: string; icon: ReactElement }
@@ -14,6 +16,7 @@ const ModelItem: FC<ModelItemProps> = ({
   onOpenModal,
 }) => {
   const { t } = useTranslation()
+  const [confirmShow, setConfirmShow] = useState(false)
 
   return (
     <div className='mb-2 bg-gray-50 rounded-xl'>
@@ -33,7 +36,7 @@ const ModelItem: FC<ModelItemProps> = ({
           >
             {t('common.operation.edit')}
           </Button>
-          <Operation />
+          <Operation onOperate={() => setConfirmShow(true)} />
         </div>
       </div>
       <div className='px-3 pb-3'>
@@ -53,7 +56,7 @@ const ModelItem: FC<ModelItemProps> = ({
             >
               {t('common.operation.edit')}
             </Button>
-            <Operation />
+            <Operation onOperate={() => setConfirmShow(true)} />
           </div>
         </div>
         <div className='flex mb-1 px-3 py-2 bg-white rounded-lg shadow-xs last:mb-0'>
@@ -72,10 +75,16 @@ const ModelItem: FC<ModelItemProps> = ({
             >
               {t('common.operation.edit')}
             </Button>
-            <Operation />
+            <Operation onOperate={() => setConfirmShow(true)} />
           </div>
         </div>
       </div>
+      <Confirm
+        isShow={confirmShow}
+        onCancel={() => setConfirmShow(false)}
+        title='xxxx-xxx'
+        desc='xxxxx'
+      />
     </div>
   )
 }