Feat: Support vLLM #4316 (#5395)

### What problem does this PR solve?
Feat: Support vLLM #4316

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/user-setting/setting-model/index.tsx

@@ -1,6 +1,7 @@
 import { ReactComponent as MoreModelIcon } from '@/assets/svg/more-model.svg';
 import { LlmIcon } from '@/components/svg-icon';
 import { useTheme } from '@/components/theme-provider';
+import { LLMFactory } from '@/constants/llm';
 import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
 import { LlmItem, useSelectLlmList } from '@/hooks/llm-hooks';
 import { CloseCircleOutlined, SettingOutlined } from '@ant-design/icons';
@@ -94,14 +95,14 @@ const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
               <Button onClick={handleApiKeyClick}>
                 <Flex align="center" gap={4}>
                   {isLocalLlmFactory(item.name) ||
-                  item.name === 'VolcEngine' ||
-                  item.name === 'Tencent Hunyuan' ||
-                  item.name === 'XunFei Spark' ||
-                  item.name === 'BaiduYiyan' ||
-                  item.name === 'Fish Audio' ||
-                  item.name === 'Tencent Cloud' ||
-                  item.name === 'Google Cloud' ||
-                  item.name === 'Azure OpenAI'
+                  item.name === LLMFactory.VolcEngine ||
+                  item.name === LLMFactory.TencentHunYuan ||
+                  item.name === LLMFactory.XunFeiSpark ||
+                  item.name === LLMFactory.BaiduYiYan ||
+                  item.name === LLMFactory.FishAudio ||
+                  item.name === LLMFactory.TencentCloud ||
+                  item.name === LLMFactory.GoogleCloud ||
+                  item.name === LLMFactory.AzureOpenAI
                     ? t('addTheModel')
                     : 'API-Key'}
                   <SettingOutlined />
@@ -248,15 +249,15 @@ const UserSettingModel = () => {
 
   const ModalMap = useMemo(
     () => ({
-      Bedrock: showBedrockAddingModal,
-      VolcEngine: showVolcAddingModal,
-      'Tencent Hunyuan': showHunyuanAddingModal,
-      'XunFei Spark': showSparkAddingModal,
-      BaiduYiyan: showyiyanAddingModal,
-      'Fish Audio': showFishAudioAddingModal,
-      'Tencent Cloud': showTencentCloudAddingModal,
-      'Google Cloud': showGoogleAddingModal,
-      'Azure-OpenAI': showAzureAddingModal,
+      [LLMFactory.Bedrock]: showBedrockAddingModal,
+      [LLMFactory.VolcEngine]: showVolcAddingModal,
+      [LLMFactory.TencentHunYuan]: showHunyuanAddingModal,
+      [LLMFactory.XunFeiSpark]: showSparkAddingModal,
+      [LLMFactory.BaiduYiYan]: showyiyanAddingModal,
+      [LLMFactory.FishAudio]: showFishAudioAddingModal,
+      [LLMFactory.TencentCloud]: showTencentCloudAddingModal,
+      [LLMFactory.GoogleCloud]: showGoogleAddingModal,
+      [LLMFactory.AzureOpenAI]: showAzureAddingModal,
     }),
     [
       showBedrockAddingModal,
@@ -396,63 +397,63 @@ const UserSettingModel = () => {
         hideModal={hideVolcAddingModal}
         onOk={onVolcAddingOk}
         loading={volcAddingLoading}
-        llmFactory={'VolcEngine'}
+        llmFactory={LLMFactory.VolcEngine}
       ></VolcEngineModal>
       <HunyuanModal
         visible={HunyuanAddingVisible}
         hideModal={hideHunyuanAddingModal}
         onOk={onHunyuanAddingOk}
         loading={HunyuanAddingLoading}
-        llmFactory={'Tencent Hunyuan'}
+        llmFactory={LLMFactory.TencentHunYuan}
       ></HunyuanModal>
       <GoogleModal
         visible={GoogleAddingVisible}
         hideModal={hideGoogleAddingModal}
         onOk={onGoogleAddingOk}
         loading={GoogleAddingLoading}
-        llmFactory={'Google Cloud'}
+        llmFactory={LLMFactory.GoogleCloud}
       ></GoogleModal>
       <TencentCloudModal
         visible={TencentCloudAddingVisible}
         hideModal={hideTencentCloudAddingModal}
         onOk={onTencentCloudAddingOk}
         loading={TencentCloudAddingLoading}
-        llmFactory={'Tencent Cloud'}
+        llmFactory={LLMFactory.TencentCloud}
       ></TencentCloudModal>
       <SparkModal
         visible={SparkAddingVisible}
         hideModal={hideSparkAddingModal}
         onOk={onSparkAddingOk}
         loading={SparkAddingLoading}
-        llmFactory={'XunFei Spark'}
+        llmFactory={LLMFactory.XunFeiSpark}
       ></SparkModal>
       <YiyanModal
         visible={yiyanAddingVisible}
         hideModal={hideyiyanAddingModal}
         onOk={onyiyanAddingOk}
         loading={yiyanAddingLoading}
-        llmFactory={'BaiduYiyan'}
+        llmFactory={LLMFactory.BaiduYiYan}
       ></YiyanModal>
       <FishAudioModal
         visible={FishAudioAddingVisible}
         hideModal={hideFishAudioAddingModal}
         onOk={onFishAudioAddingOk}
         loading={FishAudioAddingLoading}
-        llmFactory={'Fish Audio'}
+        llmFactory={LLMFactory.FishAudio}
       ></FishAudioModal>
       <BedrockModal
         visible={bedrockAddingVisible}
         hideModal={hideBedrockAddingModal}
         onOk={onBedrockAddingOk}
         loading={bedrockAddingLoading}
-        llmFactory={'Bedrock'}
+        llmFactory={LLMFactory.Bedrock}
       ></BedrockModal>
       <AzureOpenAIModal
         visible={AzureAddingVisible}
         hideModal={hideAzureAddingModal}
         onOk={onAzureAddingOk}
         loading={AzureAddingLoading}
-        llmFactory={'Azure-OpenAI'}
+        llmFactory={LLMFactory.AzureOpenAI}
       ></AzureOpenAIModal>
     </section>
   );