Fix: Modify the personal center style #10703 (#11347)

### What problem does this PR solve?

Fix: Modify the personal center style

### Type of change

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

web/src/pages/user-setting/data-source/add-datasource-modal.tsx

@@ -40,17 +40,17 @@ const AddDataSourceModal = ({
   return (
     <Modal
       title={
-        <div className="flex flex-col">
-          {sourceData?.icon}
+        <div className="flex flex-col gap-4">
+          <div className="size-6">{sourceData?.icon}</div>
           {t('setting.addDataSourceModalTital', { name: sourceData?.name })}
         </div>
       }
       open={visible || false}
       onOpenChange={(open) => !open && hideModal?.()}
       // onOk={() => handleOk()}
-      okText={t('common.ok')}
+      okText={t('common.confirm')}
       cancelText={t('common.cancel')}
-      showfooter={false}
+      footer={<div className="p-4"></div>}
     >
       <DynamicForm.Root
         fields={fields}
@@ -63,7 +63,7 @@ const AddDataSourceModal = ({
           ] as FieldValues
         }
       >
-        <div className="flex items-center justify-end w-full gap-2 py-4">
+        <div className=" absolute bottom-0 right-0 left-0 flex items-center justify-end w-full gap-2 py-6 px-6">
           <DynamicForm.CancelButton
             handleCancel={() => {
               hideModal?.();
@@ -71,7 +71,7 @@ const AddDataSourceModal = ({
           />
           <DynamicForm.SavingButton
             submitLoading={loading || false}
-            buttonText={t('common.ok')}
+            buttonText={t('common.confirm')}
             submitFunc={(values: FieldValues) => {
               handleOk(values);
             }}

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

@@ -1,3 +1,4 @@
+import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { Settings, Trash2 } from 'lucide-react';
@@ -32,17 +33,19 @@ export const AddedSourceCard = (props: IAddedSourceCardProps) => {
           >
             <div className="text-sm text-text-secondary ">{item.name}</div>
             <div className="text-sm text-text-secondary  flex gap-2">
-              <Settings
-                className="cursor-pointer"
-                size={14}
+              <Button
+                variant={'ghost'}
+                className="rounded-lg px-2 py-1 bg-transparent hover:bg-bg-card"
                 onClick={() => {
                   toDetail(item.id);
                 }}
-              />
+              >
+                <Settings size={14} />
+              </Button>
               {/* <ConfirmDeleteDialog onOk={() => handleDelete(item)}> */}
-              <Trash2
-                className="cursor-pointer"
-                size={14}
+              <Button
+                variant={'ghost'}
+                className="rounded-lg px-2 py-1 bg-transparent hover:bg-state-error-5 hover:text-state-error"
                 onClick={() =>
                   delSourceModal({
                     data: item,
@@ -51,7 +54,9 @@ export const AddedSourceCard = (props: IAddedSourceCardProps) => {
                     },
                   })
                 }
-              />
+              >
+                <Trash2 className="cursor-pointer" size={14} />
+              </Button>
               {/* </ConfirmDeleteDialog> */}
             </div>
           </div>