mirror of
https://github.com/songquanpeng/one-api.git
synced 2025-09-29 22:56:39 +08:00
467 lines
17 KiB
JavaScript
467 lines
17 KiB
JavaScript
import PropTypes from 'prop-types';
|
||
import { useState, useEffect } from 'react';
|
||
import { CHANNEL_OPTIONS } from 'constants/ChannelConstants';
|
||
import { useTheme } from '@mui/material/styles';
|
||
import { API } from 'utils/api';
|
||
import { showError, showSuccess } from 'utils/common';
|
||
import {
|
||
Dialog,
|
||
DialogTitle,
|
||
DialogContent,
|
||
DialogActions,
|
||
TextField,
|
||
Button,
|
||
Divider,
|
||
Select,
|
||
MenuItem,
|
||
FormControl,
|
||
InputLabel,
|
||
OutlinedInput,
|
||
ButtonGroup,
|
||
Container,
|
||
Autocomplete,
|
||
FormHelperText
|
||
} from '@mui/material';
|
||
|
||
import { Formik } from 'formik';
|
||
import * as Yup from 'yup';
|
||
import { defaultConfig, typeConfig } from '../type/Config'; //typeConfig
|
||
import { createFilterOptions } from '@mui/material/Autocomplete';
|
||
|
||
const filter = createFilterOptions();
|
||
const validationSchema = Yup.object().shape({
|
||
is_edit: Yup.boolean(),
|
||
name: Yup.string().required('名称 不能为空'),
|
||
type: Yup.number().required('渠道 不能为空'),
|
||
key: Yup.string().when('is_edit', { is: false, then: Yup.string().required('密钥 不能为空') }),
|
||
other: Yup.string(),
|
||
models: Yup.array().min(1, '模型 不能为空'),
|
||
groups: Yup.array().min(1, '用户组 不能为空'),
|
||
base_url: Yup.string().when('type', {
|
||
is: (value) => [3, 24, 8].includes(value),
|
||
then: Yup.string().required('渠道API地址 不能为空'), // base_url 是必需的
|
||
otherwise: Yup.string() // 在其他情况下，base_url 可以是任意字符串
|
||
}),
|
||
model_mapping: Yup.string().test('is-json', '必须是有效的JSON字符串', function (value) {
|
||
try {
|
||
if (value === '' || value === null || value === undefined) {
|
||
return true;
|
||
}
|
||
const parsedValue = JSON.parse(value);
|
||
if (typeof parsedValue === 'object') {
|
||
return true;
|
||
}
|
||
} catch (e) {
|
||
return false;
|
||
}
|
||
return false;
|
||
})
|
||
});
|
||
|
||
const EditModal = ({ open, channelId, onCancel, onOk }) => {
|
||
const theme = useTheme();
|
||
// const [loading, setLoading] = useState(false);
|
||
const [initialInput, setInitialInput] = useState(defaultConfig.input);
|
||
const [inputLabel, setInputLabel] = useState(defaultConfig.inputLabel); //
|
||
const [inputPrompt, setInputPrompt] = useState(defaultConfig.prompt);
|
||
const [groupOptions, setGroupOptions] = useState([]);
|
||
const [modelOptions, setModelOptions] = useState([]);
|
||
const [basicModels, setBasicModels] = useState([]);
|
||
|
||
const initChannel = (typeValue) => {
|
||
if (typeConfig[typeValue]?.inputLabel) {
|
||
setInputLabel({ ...defaultConfig.inputLabel, ...typeConfig[typeValue].inputLabel });
|
||
} else {
|
||
setInputLabel(defaultConfig.inputLabel);
|
||
}
|
||
|
||
if (typeConfig[typeValue]?.prompt) {
|
||
setInputPrompt({ ...defaultConfig.prompt, ...typeConfig[typeValue].prompt });
|
||
} else {
|
||
setInputPrompt(defaultConfig.prompt);
|
||
}
|
||
|
||
return typeConfig[typeValue]?.input;
|
||
};
|
||
const handleTypeChange = (setFieldValue, typeValue, values) => {
|
||
const newInput = initChannel(typeValue);
|
||
|
||
if (newInput) {
|
||
Object.keys(newInput).forEach((key) => {
|
||
if (
|
||
(!Array.isArray(values[key]) && values[key] !== null && values[key] !== undefined) ||
|
||
(Array.isArray(values[key]) && values[key].length > 0)
|
||
) {
|
||
return;
|
||
}
|
||
setFieldValue(key, newInput[key]);
|
||
});
|
||
}
|
||
};
|
||
|
||
const fetchGroups = async () => {
|
||
try {
|
||
let res = await API.get(`/api/group/`);
|
||
setGroupOptions(res.data.data);
|
||
} catch (error) {
|
||
showError(error.message);
|
||
}
|
||
};
|
||
|
||
const fetchModels = async () => {
|
||
try {
|
||
let res = await API.get(`/api/channel/models`);
|
||
setModelOptions(res.data.data.map((model) => model.id));
|
||
setBasicModels(
|
||
res.data.data
|
||
.filter((model) => {
|
||
return model.id.startsWith('gpt-3') || model.id.startsWith('gpt-4');
|
||
})
|
||
.map((model) => model.id)
|
||
);
|
||
} catch (error) {
|
||
showError(error.message);
|
||
}
|
||
};
|
||
|
||
const submit = async (values, { setErrors, setStatus, setSubmitting }) => {
|
||
setSubmitting(true);
|
||
if (values.base_url && values.base_url.endsWith('/')) {
|
||
values.base_url = values.base_url.slice(0, values.base_url.length - 1);
|
||
}
|
||
if (values.type === 3 && values.other === '') {
|
||
values.other = '2023-09-01-preview';
|
||
}
|
||
if (values.type === 18 && values.other === '') {
|
||
values.other = 'v2.1';
|
||
}
|
||
let res;
|
||
values.models = values.models.join(',');
|
||
values.group = values.groups.join(',');
|
||
if (channelId) {
|
||
res = await API.put(`/api/channel/`, { ...values, id: parseInt(channelId) });
|
||
} else {
|
||
res = await API.post(`/api/channel/`, values);
|
||
}
|
||
const { success, message } = res.data;
|
||
if (success) {
|
||
if (channelId) {
|
||
showSuccess('渠道更新成功！');
|
||
} else {
|
||
showSuccess('渠道创建成功！');
|
||
}
|
||
setSubmitting(false);
|
||
setStatus({ success: true });
|
||
onOk(true);
|
||
} else {
|
||
setStatus({ success: false });
|
||
// showError(message);
|
||
setErrors({ submit: message });
|
||
}
|
||
};
|
||
|
||
const loadChannel = async () => {
|
||
let res = await API.get(`/api/channel/${channelId}`);
|
||
const { success, message, data } = res.data;
|
||
if (success) {
|
||
if (data.models === '') {
|
||
data.models = [];
|
||
} else {
|
||
data.models = data.models.split(',');
|
||
}
|
||
if (data.group === '') {
|
||
data.groups = [];
|
||
} else {
|
||
data.groups = data.group.split(',');
|
||
}
|
||
if (data.model_mapping !== '') {
|
||
data.model_mapping = JSON.stringify(JSON.parse(data.model_mapping), null, 2);
|
||
}
|
||
data.is_edit = true;
|
||
initChannel(data.type);
|
||
setInitialInput(data);
|
||
} else {
|
||
showError(message);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
fetchGroups().then();
|
||
fetchModels().then();
|
||
if (channelId) {
|
||
loadChannel().then();
|
||
} else {
|
||
initChannel(1);
|
||
setInitialInput({ ...defaultConfig.input, is_edit: false });
|
||
}
|
||
}, [channelId]);
|
||
|
||
return (
|
||
<Dialog open={open} onClose={onCancel} fullWidth maxWidth={'md'}>
|
||
<DialogTitle sx={{ margin: '0px', fontWeight: 700, lineHeight: '1.55556', padding: '24px', fontSize: '1.125rem' }}>
|
||
{channelId ? '编辑渠道' : '新建渠道'}
|
||
</DialogTitle>
|
||
<Divider />
|
||
<DialogContent>
|
||
<Formik initialValues={initialInput} enableReinitialize validationSchema={validationSchema} onSubmit={submit}>
|
||
{({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values, setFieldValue }) => (
|
||
<form noValidate onSubmit={handleSubmit}>
|
||
<FormControl fullWidth error={Boolean(touched.type && errors.type)} sx={{ ...theme.typography.otherInput }}>
|
||
<InputLabel htmlFor="channel-type-label">{inputLabel.type}</InputLabel>
|
||
<Select
|
||
id="channel-type-label"
|
||
label={inputLabel.type}
|
||
value={values.type}
|
||
name="type"
|
||
onBlur={handleBlur}
|
||
onChange={(e) => {
|
||
handleChange(e);
|
||
handleTypeChange(setFieldValue, e.target.value, values);
|
||
}}
|
||
MenuProps={{
|
||
PaperProps: {
|
||
style: {
|
||
maxHeight: 200
|
||
}
|
||
}
|
||
}}
|
||
>
|
||
{Object.values(CHANNEL_OPTIONS).map((option) => {
|
||
return (
|
||
<MenuItem key={option.value} value={option.value}>
|
||
{option.text}
|
||
</MenuItem>
|
||
);
|
||
})}
|
||
</Select>
|
||
{touched.type && errors.type ? (
|
||
<FormHelperText error id="helper-tex-channel-type-label">
|
||
{errors.type}
|
||
</FormHelperText>
|
||
) : (
|
||
<FormHelperText id="helper-tex-channel-type-label"> {inputPrompt.type} </FormHelperText>
|
||
)}
|
||
</FormControl>
|
||
|
||
<FormControl fullWidth error={Boolean(touched.name && errors.name)} sx={{ ...theme.typography.otherInput }}>
|
||
<InputLabel htmlFor="channel-name-label">{inputLabel.name}</InputLabel>
|
||
<OutlinedInput
|
||
id="channel-name-label"
|
||
label={inputLabel.name}
|
||
type="text"
|
||
value={values.name}
|
||
name="name"
|
||
onBlur={handleBlur}
|
||
onChange={handleChange}
|
||
inputProps={{ autoComplete: 'name' }}
|
||
aria-describedby="helper-text-channel-name-label"
|
||
/>
|
||
{touched.name && errors.name ? (
|
||
<FormHelperText error id="helper-tex-channel-name-label">
|
||
{errors.name}
|
||
</FormHelperText>
|
||
) : (
|
||
<FormHelperText id="helper-tex-channel-name-label"> {inputPrompt.name} </FormHelperText>
|
||
)}
|
||
</FormControl>
|
||
|
||
<FormControl fullWidth error={Boolean(touched.base_url && errors.base_url)} sx={{ ...theme.typography.otherInput }}>
|
||
<InputLabel htmlFor="channel-base_url-label">{inputLabel.base_url}</InputLabel>
|
||
<OutlinedInput
|
||
id="channel-base_url-label"
|
||
label={inputLabel.base_url}
|
||
type="text"
|
||
value={values.base_url}
|
||
name="base_url"
|
||
onBlur={handleBlur}
|
||
onChange={handleChange}
|
||
inputProps={{}}
|
||
aria-describedby="helper-text-channel-base_url-label"
|
||
/>
|
||
{touched.base_url && errors.base_url ? (
|
||
<FormHelperText error id="helper-tex-channel-base_url-label">
|
||
{errors.base_url}
|
||
</FormHelperText>
|
||
) : (
|
||
<FormHelperText id="helper-tex-channel-base_url-label"> {inputPrompt.base_url} </FormHelperText>
|
||
)}
|
||
</FormControl>
|
||
|
||
{inputPrompt.other && (
|
||
<FormControl fullWidth error={Boolean(touched.other && errors.other)} sx={{ ...theme.typography.otherInput }}>
|
||
<InputLabel htmlFor="channel-other-label">{inputLabel.other}</InputLabel>
|
||
<OutlinedInput
|
||
id="channel-other-label"
|
||
label={inputLabel.other}
|
||
type="text"
|
||
value={values.other}
|
||
name="other"
|
||
onBlur={handleBlur}
|
||
onChange={handleChange}
|
||
inputProps={{}}
|
||
aria-describedby="helper-text-channel-other-label"
|
||
/>
|
||
{touched.other && errors.other ? (
|
||
<FormHelperText error id="helper-tex-channel-other-label">
|
||
{errors.other}
|
||
</FormHelperText>
|
||
) : (
|
||
<FormHelperText id="helper-tex-channel-other-label"> {inputPrompt.other} </FormHelperText>
|
||
)}
|
||
</FormControl>
|
||
)}
|
||
|
||
<FormControl fullWidth sx={{ ...theme.typography.otherInput }}>
|
||
<Autocomplete
|
||
multiple
|
||
id="channel-groups-label"
|
||
options={groupOptions}
|
||
value={values.groups}
|
||
onChange={(e, value) => {
|
||
const event = {
|
||
target: {
|
||
name: 'groups',
|
||
value: value
|
||
}
|
||
};
|
||
handleChange(event);
|
||
}}
|
||
onBlur={handleBlur}
|
||
filterSelectedOptions
|
||
renderInput={(params) => <TextField {...params} name="groups" error={Boolean(errors.groups)} label={inputLabel.groups} />}
|
||
aria-describedby="helper-text-channel-groups-label"
|
||
/>
|
||
{errors.groups ? (
|
||
<FormHelperText error id="helper-tex-channel-groups-label">
|
||
{errors.groups}
|
||
</FormHelperText>
|
||
) : (
|
||
<FormHelperText id="helper-tex-channel-groups-label"> {inputPrompt.groups} </FormHelperText>
|
||
)}
|
||
</FormControl>
|
||
|
||
<FormControl fullWidth sx={{ ...theme.typography.otherInput }}>
|
||
<Autocomplete
|
||
multiple
|
||
freeSolo
|
||
id="channel-models-label"
|
||
options={modelOptions}
|
||
value={Array.isArray(values.models) ? values.models : values.models.split(',')}
|
||
onChange={(e, value) => {
|
||
const event = {
|
||
target: {
|
||
name: 'models',
|
||
value: value
|
||
}
|
||
};
|
||
handleChange(event);
|
||
}}
|
||
onBlur={handleBlur}
|
||
filterSelectedOptions
|
||
renderInput={(params) => <TextField {...params} name="models" error={Boolean(errors.models)} label={inputLabel.models} />}
|
||
filterOptions={(options, params) => {
|
||
const filtered = filter(options, params);
|
||
const { inputValue } = params;
|
||
const isExisting = options.some((option) => inputValue === option);
|
||
if (inputValue !== '' && !isExisting) {
|
||
filtered.push(inputValue);
|
||
}
|
||
return filtered;
|
||
}}
|
||
/>
|
||
{errors.models ? (
|
||
<FormHelperText error id="helper-tex-channel-models-label">
|
||
{errors.models}
|
||
</FormHelperText>
|
||
) : (
|
||
<FormHelperText id="helper-tex-channel-models-label"> {inputPrompt.models} </FormHelperText>
|
||
)}
|
||
</FormControl>
|
||
<Container
|
||
sx={{
|
||
textAlign: 'right'
|
||
}}
|
||
>
|
||
<ButtonGroup variant="outlined" aria-label="small outlined primary button group">
|
||
<Button
|
||
onClick={() => {
|
||
setFieldValue('models', basicModels);
|
||
}}
|
||
>
|
||
填入基础模型
|
||
</Button>
|
||
<Button
|
||
onClick={() => {
|
||
setFieldValue('models', modelOptions);
|
||
}}
|
||
>
|
||
填入所有模型
|
||
</Button>
|
||
</ButtonGroup>
|
||
</Container>
|
||
<FormControl fullWidth error={Boolean(touched.key && errors.key)} sx={{ ...theme.typography.otherInput }}>
|
||
<InputLabel htmlFor="channel-key-label">{inputLabel.key}</InputLabel>
|
||
<OutlinedInput
|
||
id="channel-key-label"
|
||
label={inputLabel.key}
|
||
type="text"
|
||
value={values.key}
|
||
name="key"
|
||
onBlur={handleBlur}
|
||
onChange={handleChange}
|
||
inputProps={{}}
|
||
aria-describedby="helper-text-channel-key-label"
|
||
/>
|
||
{touched.key && errors.key ? (
|
||
<FormHelperText error id="helper-tex-channel-key-label">
|
||
{errors.key}
|
||
</FormHelperText>
|
||
) : (
|
||
<FormHelperText id="helper-tex-channel-key-label"> {inputPrompt.key} </FormHelperText>
|
||
)}
|
||
</FormControl>
|
||
<FormControl fullWidth error={Boolean(touched.model_mapping && errors.model_mapping)} sx={{ ...theme.typography.otherInput }}>
|
||
{/* <InputLabel htmlFor="channel-model_mapping-label">{inputLabel.model_mapping}</InputLabel> */}
|
||
<TextField
|
||
multiline
|
||
id="channel-model_mapping-label"
|
||
label={inputLabel.model_mapping}
|
||
value={values.model_mapping}
|
||
name="model_mapping"
|
||
onBlur={handleBlur}
|
||
onChange={handleChange}
|
||
aria-describedby="helper-text-channel-model_mapping-label"
|
||
minRows={5}
|
||
placeholder={inputPrompt.model_mapping}
|
||
/>
|
||
{touched.model_mapping && errors.model_mapping ? (
|
||
<FormHelperText error id="helper-tex-channel-model_mapping-label">
|
||
{errors.model_mapping}
|
||
</FormHelperText>
|
||
) : (
|
||
<FormHelperText id="helper-tex-channel-model_mapping-label"> {inputPrompt.model_mapping} </FormHelperText>
|
||
)}
|
||
</FormControl>
|
||
<DialogActions>
|
||
<Button onClick={onCancel}>取消</Button>
|
||
<Button disableElevation disabled={isSubmitting} type="submit" variant="contained" color="primary">
|
||
提交
|
||
</Button>
|
||
</DialogActions>
|
||
</form>
|
||
)}
|
||
</Formik>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
};
|
||
|
||
export default EditModal;
|
||
|
||
EditModal.propTypes = {
|
||
open: PropTypes.bool,
|
||
channelId: PropTypes.number,
|
||
onCancel: PropTypes.func,
|
||
onOk: PropTypes.func
|
||
};
|