fix(web): Restructure the CustomSelect component, repair the interface that is called multiple times when the form is updated

web/src/components/CustomSelect/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, type FC, type Key } from 'react';
+import { useEffect, useState, useMemo, type FC, type Key } from 'react';
 import { Select } from 'antd';
 import type { SelectProps, DefaultOptionType } from 'antd/es/select';
 import { useTranslation } from 'react-i18next';
@@ -47,13 +47,14 @@ const CustomSelect: FC<CustomSelectProps> = ({
 }) => {
   const { t } = useTranslation();
   const [options, setOptions] = useState<OptionType[]>([]);
+  const memoizedParams = useMemo(() => params, [JSON.stringify(params)]);
 
   useEffect(() => {
-    request.get<ApiResponse<OptionType>>(url, params).then((res) => {
+    request.get<ApiResponse<OptionType>>(url, memoizedParams).then((res) => {
       const data = Array.isArray(res) ? res : res?.items || [];
       setOptions(data);
     });
-  }, [url, params]);
+  }, [url, memoizedParams]);
 
   const displayOptions = format ? format(options) : options;
 

web/src/views/ApplicationConfig/components/AiPromptModal.tsx

@@ -8,7 +8,7 @@ import { updatePromptMessages, createPromptSessions } from '@/api/prompt'
 import { getModelListUrl } from '@/api/models'
 import type { AiPromptModalRef, AiPromptVariableModalRef, AiPromptForm } from '../types'
 import RbModal from '@/components/RbModal'
-import type { Model } from '@/views/ModelManagement/types'
+import type { ModelListItem } from '@/views/ModelManagement/types'
 import ChatContent from '@/components/Chat/ChatContent'
 import Empty from '@/components/Empty'
 import ChatSendIcon from '@/assets/images/application/chatSend.svg'
@@ -21,7 +21,7 @@ import Editor from './Editor'
 
 interface AiPromptModalProps {
   refresh: (value: string) => void;
-  defaultModel: Model | null;
+  defaultModel: ModelListItem | null;
 }
 
 const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({

web/src/views/ApplicationConfig/components/ModelConfigModal.tsx

@@ -3,14 +3,14 @@ import { Form, Select } from 'antd';
 import { useTranslation } from 'react-i18next';
 
 import type { ModelConfig, ModelConfigModalRef, Config, Source } from '../types'
-import type { Model } from '@/views/ModelManagement/types'
+import type { ModelListItem } from '@/views/ModelManagement/types'
 import RbModal from '@/components/RbModal'
 import RbSlider from '@/components/RbSlider'
 
 const FormItem = Form.Item;
 
 interface ModelConfigModalProps {
-  modelList?: Model[];
+  modelList?: ModelListItem[];
   refresh: (values: ModelConfig, type: Source) => void;
   data: Config;
 }
@@ -76,9 +76,9 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
         console.log('err', err)
       });
   }
-  const handleChange = (_value: string, option: Model | Model[] | undefined) => {
+  const handleChange = (_value: string, option: ModelListItem | ModelListItem[] | undefined) => {
     if (source === 'chat') {
-      form.setFieldValue('label', (option as Model).name)
+      form.setFieldValue('label', (option as ModelListItem).name)
     }
   }