Merge pull request #533 from SuanmoSuanyangTechnology/fix/v0.2.7_zy

feat(web): model api key add request abort
This commit is contained in:
yingzhao
2026-03-11 15:17:50 +08:00
committed by GitHub
4 changed files with 42 additions and 26 deletions

View File

@@ -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 })
} }

View File

@@ -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}

View File

@@ -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}

View File

@@ -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">