Merge pull request #533 from SuanmoSuanyangTechnology/fix/v0.2.7_zy
feat(web): model api key add request abort
This commit is contained in:
@@ -41,12 +41,12 @@ export const deleteCompositeModel = (model_id: string) => {
|
|||||||
return request.delete(`/models/composite/${model_id}`)
|
return request.delete(`/models/composite/${model_id}`)
|
||||||
}
|
}
|
||||||
// Create API keys for all matching models by provider
|
// Create API keys for all matching models by provider
|
||||||
export const updateProviderApiKeys = (data: KeyConfigModalForm) => {
|
export const updateProviderApiKeys = (data: KeyConfigModalForm, signal?: AbortSignal) => {
|
||||||
return request.post('/models/provider/apikeys', data)
|
return request.post('/models/provider/apikeys', data, { signal })
|
||||||
}
|
}
|
||||||
// Create model API key
|
// Create model API key
|
||||||
export const addModelApiKey = (model_id: string, data: MultiKeyForm) => {
|
export const addModelApiKey = (model_id: string, data: MultiKeyForm, signal?: AbortSignal) => {
|
||||||
return request.post(`/models/${model_id}/apikeys`, data)
|
return request.post(`/models/${model_id}/apikeys`, data, { signal })
|
||||||
}
|
}
|
||||||
// Delete model API key
|
// Delete model API key
|
||||||
export const deleteModelApiKey = (api_key_id: string) => {
|
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`)
|
return request.post(`/models/model_plaza/${model_base_id}/add`)
|
||||||
}
|
}
|
||||||
// Create custom model
|
// Create custom model
|
||||||
export const addCustomModel = (data: CustomModelForm) => {
|
export const addCustomModel = (data: CustomModelForm, signal?: AbortSignal) => {
|
||||||
return request.post('/models', data)
|
return request.post('/models', data, { signal })
|
||||||
}
|
}
|
||||||
// Update custom model
|
// Update custom model
|
||||||
export const updateCustomModel = (model_base_id: string, data: CustomModelForm) => {
|
export const updateCustomModel = (model_base_id: string, data: CustomModelForm, signal?: AbortSignal) => {
|
||||||
return request.put(`/models/${model_base_id}`, data)
|
return request.put(`/models/${model_base_id}`, data, { signal })
|
||||||
}
|
}
|
||||||
@@ -2,7 +2,7 @@
|
|||||||
* @Author: ZhaoYing
|
* @Author: ZhaoYing
|
||||||
* @Date: 2026-02-03 16:49:28
|
* @Date: 2026-02-03 16:49:28
|
||||||
* @Last Modified by: ZhaoYing
|
* @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
|
* Custom Model Modal
|
||||||
@@ -11,7 +11,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
|
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 { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import type { CustomModelForm, ModelListItem, CustomModelModalRef, CustomModelModalProps } from '../types';
|
import type { CustomModelForm, ModelListItem, CustomModelModalRef, CustomModelModalProps } from '../types';
|
||||||
@@ -35,6 +35,7 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
|
|||||||
const [isEdit, setIsEdit] = useState(false);
|
const [isEdit, setIsEdit] = useState(false);
|
||||||
const [form] = Form.useForm<CustomModelForm>();
|
const [form] = Form.useForm<CustomModelForm>();
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [abortController, setAbortController] = useState<AbortController | null>(null)
|
||||||
const modelType = Form.useWatch(['type'], form);
|
const modelType = Form.useWatch(['type'], form);
|
||||||
const isOmni = Form.useWatch(['is_omni'], form);
|
const isOmni = Form.useWatch(['is_omni'], form);
|
||||||
|
|
||||||
@@ -46,6 +47,8 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
|
|||||||
|
|
||||||
/** Close modal and reset state */
|
/** Close modal and reset state */
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
|
abortController?.abort()
|
||||||
|
setAbortController(null)
|
||||||
setModel({} as ModelListItem);
|
setModel({} as ModelListItem);
|
||||||
form.resetFields();
|
form.resetFields();
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
@@ -73,8 +76,10 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
|
|||||||
/** Update or create custom model */
|
/** Update or create custom model */
|
||||||
const handleUpdate = (data: CustomModelForm) => {
|
const handleUpdate = (data: CustomModelForm) => {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
|
const controller = new AbortController()
|
||||||
|
setAbortController(controller)
|
||||||
const { type, provider, ...rest} = data
|
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(() => {
|
res.then(() => {
|
||||||
refresh?.(isEdit)
|
refresh?.(isEdit)
|
||||||
@@ -124,15 +129,15 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
|
|||||||
useImperativeHandle(ref, () => ({
|
useImperativeHandle(ref, () => ({
|
||||||
handleOpen,
|
handleOpen,
|
||||||
}));
|
}));
|
||||||
console.log('modelType', modelType)
|
|
||||||
return (
|
return (
|
||||||
<RbModal
|
<RbModal
|
||||||
title={isEdit ? `${model.name} - ${t('modelNew.modelConfiguration')}` : t('modelNew.createCustomModel')}
|
title={isEdit ? `${model.name} - ${t('modelNew.modelConfiguration')}` : t('modelNew.createCustomModel')}
|
||||||
open={visible}
|
open={visible}
|
||||||
onCancel={handleClose}
|
onCancel={handleClose}
|
||||||
okText={t(`common.${isEdit ? 'save' : 'create'}`)}
|
footer={[
|
||||||
onOk={handleSave}
|
<Button key="cancel" onClick={handleClose}>{t('common.cancel')}</Button>,
|
||||||
confirmLoading={loading}
|
<Button key="confirm" type="primary" loading={loading} onClick={handleSave}>{t(`common.${isEdit ? 'save' : 'create'}`)}</Button>,
|
||||||
|
]}
|
||||||
>
|
>
|
||||||
<Form
|
<Form
|
||||||
form={form}
|
form={form}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: ZhaoYing
|
* @Author: ZhaoYing
|
||||||
* @Date: 2026-02-03 16:49:40
|
* @Date: 2026-02-03 16:49:40
|
||||||
* @Last Modified by: ZhaoYing
|
* @Last Modified by: ZhaoYing
|
||||||
* @Last Modified time: 2026-02-03 16:49:40
|
* @Last Modified time: 2026-03-11 15:12:17
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Key Configuration Modal
|
* Key Configuration Modal
|
||||||
@@ -11,7 +11,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { forwardRef, useImperativeHandle, useState } from 'react';
|
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 { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import type { KeyConfigModalForm, ProviderModelItem, KeyConfigModalRef, KeyConfigModalProps } from '../types';
|
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 [model, setModel] = useState<ProviderModelItem>({} as ProviderModelItem);
|
||||||
const [form] = Form.useForm<KeyConfigModalForm>();
|
const [form] = Form.useForm<KeyConfigModalForm>();
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [abortController, setAbortController] = useState<AbortController | null>(null)
|
||||||
|
|
||||||
/** Close modal and reset state */
|
/** Close modal and reset state */
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
|
abortController?.abort()
|
||||||
|
setAbortController(null)
|
||||||
setModel({} as ProviderModelItem);
|
setModel({} as ProviderModelItem);
|
||||||
form.resetFields();
|
form.resetFields();
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
@@ -51,10 +54,13 @@ const KeyConfigModal = forwardRef<KeyConfigModalRef, KeyConfigModalProps>(({
|
|||||||
.then((values) => {
|
.then((values) => {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
|
|
||||||
|
const controller = new AbortController()
|
||||||
|
setAbortController(controller)
|
||||||
|
|
||||||
updateProviderApiKeys({
|
updateProviderApiKeys({
|
||||||
...values,
|
...values,
|
||||||
provider: model.provider
|
provider: model.provider
|
||||||
}).then((res) => {
|
}, controller.signal).then((res) => {
|
||||||
if (refresh) {
|
if (refresh) {
|
||||||
refresh();
|
refresh();
|
||||||
}
|
}
|
||||||
@@ -81,9 +87,10 @@ const KeyConfigModal = forwardRef<KeyConfigModalRef, KeyConfigModalProps>(({
|
|||||||
title={`${model.provider} - ${t('modelNew.keyConfig')}`}
|
title={`${model.provider} - ${t('modelNew.keyConfig')}`}
|
||||||
open={visible}
|
open={visible}
|
||||||
onCancel={handleClose}
|
onCancel={handleClose}
|
||||||
okText={t(`common.save`)}
|
footer={[
|
||||||
onOk={handleSave}
|
<Button key="cancel" onClick={handleClose}>{t('common.cancel')}</Button>,
|
||||||
confirmLoading={loading}
|
<Button key="confirm" type="primary" loading={loading} onClick={handleSave}>{t(`common.save`)}</Button>,
|
||||||
|
]}
|
||||||
>
|
>
|
||||||
<Form
|
<Form
|
||||||
form={form}
|
form={form}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: ZhaoYing
|
* @Author: ZhaoYing
|
||||||
* @Date: 2026-02-03 16:49:55
|
* @Date: 2026-02-03 16:49:55
|
||||||
* @Last Modified by: ZhaoYing
|
* @Last Modified by: ZhaoYing
|
||||||
* @Last Modified time: 2026-02-03 16:49:55
|
* @Last Modified time: 2026-03-11 15:11:06
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Multi-Key Configuration Modal
|
* Multi-Key Configuration Modal
|
||||||
@@ -28,9 +28,12 @@ const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigMod
|
|||||||
const [model, setModel] = useState<ModelListItem>({} as ModelListItem);
|
const [model, setModel] = useState<ModelListItem>({} as ModelListItem);
|
||||||
const [form] = Form.useForm<MultiKeyForm>();
|
const [form] = Form.useForm<MultiKeyForm>();
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [abortController, setAbortController] = useState<AbortController | null>(null)
|
||||||
|
|
||||||
/** Close modal and refresh parent */
|
/** Close modal and refresh parent */
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
|
abortController?.abort()
|
||||||
|
setAbortController(null)
|
||||||
setModel({} as ModelListItem);
|
setModel({} as ModelListItem);
|
||||||
refresh?.()
|
refresh?.()
|
||||||
|
|
||||||
@@ -60,12 +63,14 @@ const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigMod
|
|||||||
.validateFields()
|
.validateFields()
|
||||||
.then((values) => {
|
.then((values) => {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
|
const controller = new AbortController()
|
||||||
|
setAbortController(controller)
|
||||||
addModelApiKey(model.id, {
|
addModelApiKey(model.id, {
|
||||||
...values,
|
...values,
|
||||||
model_config_id: model.id,
|
model_config_id: model.id,
|
||||||
model_name: model.name,
|
model_name: model.name,
|
||||||
provider: model.provider,
|
provider: model.provider,
|
||||||
}).then(() => {
|
}, controller.signal).then(() => {
|
||||||
message.success(t('common.saveSuccess'))
|
message.success(t('common.saveSuccess'))
|
||||||
form.resetFields();
|
form.resetFields();
|
||||||
getData(model)
|
getData(model)
|
||||||
@@ -98,7 +103,6 @@ const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigMod
|
|||||||
open={visible}
|
open={visible}
|
||||||
onCancel={handleClose}
|
onCancel={handleClose}
|
||||||
footer={null}
|
footer={null}
|
||||||
confirmLoading={loading}
|
|
||||||
>
|
>
|
||||||
{model.api_keys && model.api_keys.length > 0 && (
|
{model.api_keys && model.api_keys.length > 0 && (
|
||||||
<div className="rb:mb-4">
|
<div className="rb:mb-4">
|
||||||
|
|||||||
Reference in New Issue
Block a user