Fix: Bug fixes (#11960)

### What problem does this PR solve?

Fix: Bug fixes

New search popup style modification
Fixed multilingual settings not updating immediately on personal center
page
Changed overlapped percent to percentage format, with maximum value of
30%
### 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

@@ -2,6 +2,7 @@ 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';
+import { useDataSourceInfo } from '../contant';
 import { useDeleteDataSource } from '../hooks';
 import { IDataSorceInfo, IDataSourceBase } from '../interface';
 import { delSourceModal } from './delete-source-modal';
@@ -13,6 +14,7 @@ export const AddedSourceCard = (props: IAddedSourceCardProps) => {
   const { list, name, icon } = props;
   const { handleDelete } = useDeleteDataSource();
   const { navigateToDataSourceDetail } = useNavigatePage();
+  const { dataSourceInfo } = useDataSourceInfo();
   const toDetail = (id: string) => {
     navigateToDataSourceDetail(id);
   };
@@ -49,6 +51,7 @@ export const AddedSourceCard = (props: IAddedSourceCardProps) => {
                 onClick={() =>
                   delSourceModal({
                     data: item,
+                    dataSourceInfo: dataSourceInfo,
                     onOk: () => {
                       handleDelete(item);
                     },

web/src/pages/user-setting/data-source/component/delete-source-modal.tsx

@@ -1,20 +1,19 @@
 import { Button } from '@/components/ui/button';
 import { Modal, ModalType } from '@/components/ui/modal/modal';
 import { t } from 'i18next';
-import { DataSourceInfo } from '../contant';
-import { IDataSourceBase } from '../interface';
+import { IDataSourceBase, IDataSourceInfoMap } from '../interface';
 
 export type IDelSourceModalProps<T> = Partial<ModalType> & {
   data?: T;
   type?: 'delete' | 'unlink';
   onOk?: (data?: T) => void;
+  dataSourceInfo: IDataSourceInfoMap;
 };
 
 export const delSourceModal = <T extends IDataSourceBase>(
   props: IDelSourceModalProps<T>,
 ) => {
-  const { data, onOk, type = 'delete', ...otherProps } = props;
-  console.log('data', data);
+  const { data, onOk, type = 'delete', dataSourceInfo, ...otherProps } = props;
   const config = {
     title:
       type === 'delete'
@@ -39,7 +38,7 @@ export const delSourceModal = <T extends IDataSourceBase>(
         )}
         <div className="flex items-center gap-1 p-2 border border-border-button rounded-md mb-3">
           <div className="w-6 h-6 flex-shrink-0">
-            {data?.source ? DataSourceInfo[data?.source].icon : ''}
+            {data?.source ? dataSourceInfo[data?.source].icon : ''}
           </div>
           <div className="flex items-center gap-2 text-text-secondary text-xs">
             {/* <div className="h-6 flex-shrink-0 text-text-primary text-base">