Fix: Improve some functional issues with the data source. #10703 (#11081)

### What problem does this PR solve?

Fix: Improve some functional issues with the data source. #10703

### Type of change

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

web/src/pages/user-setting/data-source/component/added-source-card.tsx

@@ -1,9 +1,9 @@
-import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { Settings, Trash2 } from 'lucide-react';
 import { useDeleteDataSource } from '../hooks';
 import { IDataSorceInfo, IDataSourceBase } from '../interface';
+import { delSourceModal } from './delete-source-modal';
 
 export type IAddedSourceCardProps = IDataSorceInfo & {
   list: IDataSourceBase[];
@@ -19,7 +19,7 @@ export const AddedSourceCard = (props: IAddedSourceCardProps) => {
     <Card className="bg-transparent border border-border-button px-5 pt-[10px] pb-5 rounded-md">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 p-0 pb-3">
         {/* <Users className="mr-2 h-5 w-5 text-[#1677ff]" /> */}
-        <CardTitle className="text-base flex gap-1 font-normal">
+        <CardTitle className="text-base items-center flex gap-1 font-normal">
           {icon}
           {name}
         </CardTitle>
@@ -28,7 +28,7 @@ export const AddedSourceCard = (props: IAddedSourceCardProps) => {
         {list.map((item) => (
           <div
             key={item.id}
-            className="flex flex-row items-center justify-between rounded-md bg-bg-input px-[10px] py-4"
+            className="flex flex-row items-center justify-between rounded-md bg-bg-card px-[10px] py-4"
           >
             <div className="text-sm text-text-secondary ">{item.name}</div>
             <div className="text-sm text-text-secondary  flex gap-2">
@@ -39,9 +39,20 @@ export const AddedSourceCard = (props: IAddedSourceCardProps) => {
                   toDetail(item.id);
                 }}
               />
-              <ConfirmDeleteDialog onOk={() => handleDelete(item)}>
-                <Trash2 className="cursor-pointer" size={14} />
-              </ConfirmDeleteDialog>
+              {/* <ConfirmDeleteDialog onOk={() => handleDelete(item)}> */}
+              <Trash2
+                className="cursor-pointer"
+                size={14}
+                onClick={() =>
+                  delSourceModal({
+                    data: item,
+                    onOk: () => {
+                      handleDelete(item);
+                    },
+                  })
+                }
+              />
+              {/* </ConfirmDeleteDialog> */}
             </div>
           </div>
         ))}