Fix: Refactoring and enhancing the functionality of the delete confirmation dialog component #10703 (#11542)

### What problem does this PR solve?

Fix: Refactoring and enhancing the functionality of the delete
confirmation dialog component

- Refactoring and enhancing the functionality of the delete confirmation
dialog component
- Modifying the style of the user center

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/user-setting/setting-model/components/modal-card.tsx

@@ -1,4 +1,8 @@
 // src/components/ModelProviderCard.tsx
+import {
+  ConfirmDeleteDialog,
+  ConfirmDeleteDialogNode,
+} from '@/components/confirm-delete-dialog';
 import { LlmIcon } from '@/components/svg-icon';
 import { Button } from '@/components/ui/button';
 import { Switch } from '@/components/ui/switch';
@@ -54,7 +58,7 @@ export const ModelProviderCard: FC<IModelCardProps> = ({
   const { visible, switchVisible } = useSetModalState();
   const { t } = useTranslate('setting');
   const { handleEnableLlm } = useHandleEnableLlm(item.name);
-  const { handleDeleteFactory } = useHandleDeleteFactory(item.name);
+  const { deleteFactory } = useHandleDeleteFactory(item.name);
 
   const handleApiKeyClick = () => {
     clickApiKey(item.name);
@@ -102,16 +106,31 @@ export const ModelProviderCard: FC<IModelCardProps> = ({
             {!visible ? <ChevronsDown /> : <ChevronsUp />}
           </Button>
 
-          <Button
-            variant={'ghost'}
-            onClick={(e) => {
-              e.stopPropagation();
-              handleDeleteFactory();
+          <ConfirmDeleteDialog
+            onOk={() => deleteFactory({ llm_factory: item.name })}
+            title={t('deleteModel')}
+            content={{
+              node: (
+                <ConfirmDeleteDialogNode>
+                  <div className="flex items-center gap-2">
+                    <LlmIcon name={item.name} />
+                    {item.name}
+                  </div>
+                </ConfirmDeleteDialogNode>
+              ),
             }}
-            className="  hover:text-state-error hover:bg-state-error-5 transition-colors border border-border-default"
           >
-            <Trash2 />
-          </Button>
+            <Button
+              variant={'ghost'}
+              // onClick={(e) => {
+              //   e.stopPropagation();
+              //   handleDeleteFactory(item);
+              // }}
+              className="  hover:text-state-error hover:bg-state-error-5 transition-colors border border-border-default"
+            >
+              <Trash2 />
+            </Button>
+          </ConfirmDeleteDialog>
         </div>
       </div>