feat(web): model api key add request abort

web/src/api/models.ts

@@ -41,12 +41,12 @@ export const deleteCompositeModel = (model_id: string) => {
   return request.delete(`/models/composite/${model_id}`)
 }
 // Create API keys for all matching models by provider
-export const updateProviderApiKeys = (data: KeyConfigModalForm) => {
-  return request.post('/models/provider/apikeys', data)
+export const updateProviderApiKeys = (data: KeyConfigModalForm, signal?: AbortSignal) => {
+  return request.post('/models/provider/apikeys', data, { signal })
 }
 // Create model API key
-export const addModelApiKey = (model_id: string, data: MultiKeyForm) => {
-  return request.post(`/models/${model_id}/apikeys`, data)
+export const addModelApiKey = (model_id: string, data: MultiKeyForm, signal?: AbortSignal) => {
+  return request.post(`/models/${model_id}/apikeys`, data, { signal })
 }
 // Delete model API key
 export const deleteModelApiKey = (api_key_id: string) => {
@@ -65,10 +65,10 @@ export const addModelPlaza = (model_base_id: string) => {
   return request.post(`/models/model_plaza/${model_base_id}/add`)
 }
 // Create custom model
-export const addCustomModel = (data: CustomModelForm) => {
-  return request.post('/models', data)
+export const addCustomModel = (data: CustomModelForm, signal?: AbortSignal) => {
+  return request.post('/models', data, { signal })
 }
 // Update custom model
-export const updateCustomModel = (model_base_id: string, data: CustomModelForm) => {
-  return request.put(`/models/${model_base_id}`, data)
+export const updateCustomModel = (model_base_id: string, data: CustomModelForm, signal?: AbortSignal) => {
+  return request.put(`/models/${model_base_id}`, data, { signal })
 }

web/src/views/ModelManagement/components/CustomModelModal.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:49:28 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-04 11:31:43
+ * @Last Modified time: 2026-03-11 15:08:24
  */
 /**
  * Custom Model Modal
@@ -11,7 +11,7 @@
  */
 
 import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-import { Form, Input, App, Checkbox } from 'antd';
+import { Form, Input, App, Checkbox, Button } from 'antd';
 import { useTranslation } from 'react-i18next';
 
 import type { CustomModelForm, ModelListItem, CustomModelModalRef, CustomModelModalProps } from '../types';
@@ -35,6 +35,7 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
   const [isEdit, setIsEdit] = useState(false);
   const [form] = Form.useForm<CustomModelForm>();
   const [loading, setLoading] = useState(false)
+  const [abortController, setAbortController] = useState<AbortController | null>(null)
   const modelType = Form.useWatch(['type'], form);
   const isOmni = Form.useWatch(['is_omni'], form);
 
@@ -46,6 +47,8 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
 
   /** Close modal and reset state */
   const handleClose = () => {
+    abortController?.abort()
+    setAbortController(null)
     setModel({} as ModelListItem);
     form.resetFields();
     setLoading(false)
@@ -73,8 +76,10 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
   /** Update or create custom model */
   const handleUpdate = (data: CustomModelForm) => {
     setLoading(true)
+    const controller = new AbortController()
+    setAbortController(controller)
     const { type, provider, ...rest} = data
-    const res = isEdit ? updateCustomModel(model.id, rest) : addCustomModel(data)
+    const res = isEdit ? updateCustomModel(model.id, rest, controller.signal) : addCustomModel(data, controller.signal)
 
     res.then(() => {
       refresh?.(isEdit)
@@ -124,15 +129,15 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
   useImperativeHandle(ref, () => ({
     handleOpen,
   }));
-  console.log('modelType', modelType)
   return (
     <RbModal
       title={isEdit ? `${model.name} - ${t('modelNew.modelConfiguration')}` : t('modelNew.createCustomModel')}
       open={visible}
       onCancel={handleClose}
-      okText={t(`common.${isEdit ? 'save' : 'create'}`)}
-      onOk={handleSave}
-      confirmLoading={loading}
+      footer={[
+        <Button key="cancel" onClick={handleClose}>{t('common.cancel')}</Button>,
+        <Button key="confirm" type="primary" loading={loading} onClick={handleSave}>{t(`common.${isEdit ? 'save' : 'create'}`)}</Button>,
+      ]}
     >
       <Form
         form={form}

web/src/views/ModelManagement/components/KeyConfigModal.tsx

@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:49:40 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 16:49:40 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-11 15:12:17
  */
 /**
  * Key Configuration Modal
@@ -11,7 +11,7 @@
  */
 
 import { forwardRef, useImperativeHandle, useState } from 'react';
-import { Form, Input, App } from 'antd';
+import { Form, Input, App, Button } from 'antd';
 import { useTranslation } from 'react-i18next';
 
 import type { KeyConfigModalForm, ProviderModelItem, KeyConfigModalRef, KeyConfigModalProps } from '../types';
@@ -30,9 +30,12 @@ const KeyConfigModal = forwardRef<KeyConfigModalRef, KeyConfigModalProps>(({
   const [model, setModel] = useState<ProviderModelItem>({} as ProviderModelItem);
   const [form] = Form.useForm<KeyConfigModalForm>();
   const [loading, setLoading] = useState(false)
+  const [abortController, setAbortController] = useState<AbortController | null>(null)
 
   /** Close modal and reset state */
   const handleClose = () => {
+    abortController?.abort()
+    setAbortController(null)
     setModel({} as ProviderModelItem);
     form.resetFields();
     setLoading(false)
@@ -51,10 +54,13 @@ const KeyConfigModal = forwardRef<KeyConfigModalRef, KeyConfigModalProps>(({
       .then((values) => {
         setLoading(true)
 
+        const controller = new AbortController()
+        setAbortController(controller)
+
         updateProviderApiKeys({
           ...values,
           provider: model.provider
-        }).then((res) => {
+        }, controller.signal).then((res) => {
             if (refresh) {
               refresh();
             }
@@ -81,9 +87,10 @@ const KeyConfigModal = forwardRef<KeyConfigModalRef, KeyConfigModalProps>(({
       title={`${model.provider} - ${t('modelNew.keyConfig')}`}
       open={visible}
       onCancel={handleClose}
-      okText={t(`common.save`)}
-      onOk={handleSave}
-      confirmLoading={loading}
+      footer={[
+        <Button key="cancel" onClick={handleClose}>{t('common.cancel')}</Button>,
+        <Button key="confirm" type="primary" loading={loading} onClick={handleSave}>{t(`common.save`)}</Button>,
+      ]}
     >
       <Form
         form={form}

web/src/views/ModelManagement/components/MultiKeyConfigModal.tsx

@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:49:55 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 16:49:55 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-11 15:11:06
  */
 /**
  * Multi-Key Configuration Modal
@@ -28,9 +28,12 @@ const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigMod
   const [model, setModel] = useState<ModelListItem>({} as ModelListItem);
   const [form] = Form.useForm<MultiKeyForm>();
   const [loading, setLoading] = useState(false)
+  const [abortController, setAbortController] = useState<AbortController | null>(null)
 
   /** Close modal and refresh parent */
   const handleClose = () => {
+    abortController?.abort()
+    setAbortController(null)
     setModel({} as ModelListItem);
     refresh?.()
 
@@ -60,12 +63,14 @@ const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigMod
       .validateFields()
       .then((values) => {
         setLoading(true)
+        const controller = new AbortController()
+        setAbortController(controller)
         addModelApiKey(model.id, {
           ...values,
           model_config_id: model.id,
           model_name: model.name,
           provider: model.provider,
-        }).then(() => {
+        }, controller.signal).then(() => {
             message.success(t('common.saveSuccess'))
             form.resetFields();
             getData(model)
@@ -98,7 +103,6 @@ const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigMod
       open={visible}
       onCancel={handleClose}
       footer={null}
-      confirmLoading={loading}
     >
       {model.api_keys && model.api_keys.length > 0 && (
         <div className="rb:mb-4">