Buer
3fe2863ff7
* ⚡️ improve: delete google fonts * ⚡️ improve: Optimized priority input handling in TableRow component. * 🔖 chore: channel batch add * ✨ feat: add dark mod * ✨ feat: support token limit ip range and models * ✨ feat: add MessagePusher * ✨ feat: add lark login
728 lines
24 KiB
JavaScript
728 lines
24 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,
|
|
Switch,
|
|
Checkbox,
|
|
} 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";
|
|
import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
|
|
import CheckBoxIcon from "@mui/icons-material/CheckBox";
|
|
|
|
const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
|
|
const checkedIcon = <CheckBoxIcon fontSize="small" />;
|
|
|
|
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, 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 [batchAdd, setBatchAdd] = useState(false);
|
|
|
|
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 &&
|
|
values[key] !== "") ||
|
|
(Array.isArray(values[key]) && values[key].length > 0)
|
|
) {
|
|
return;
|
|
}
|
|
|
|
if (key === "models") {
|
|
setFieldValue(key, initialModel(newInput[key]));
|
|
return;
|
|
}
|
|
setFieldValue(key, newInput[key]);
|
|
});
|
|
}
|
|
};
|
|
|
|
const basicModels = (channelType) => {
|
|
let modelGroup =
|
|
typeConfig[channelType]?.modelGroup || defaultConfig.modelGroup;
|
|
// 循环 modelOptions，找到 modelGroup 对应的模型
|
|
let modelList = [];
|
|
modelOptions.forEach((model) => {
|
|
if (model.group === modelGroup) {
|
|
modelList.push(model);
|
|
}
|
|
});
|
|
return modelList;
|
|
};
|
|
|
|
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`);
|
|
const { data } = res.data;
|
|
data.forEach((item) => {
|
|
if (!item.owned_by) {
|
|
item.owned_by = "未知";
|
|
}
|
|
});
|
|
// 先对data排序
|
|
data.sort((a, b) => {
|
|
const ownedByComparison = a.owned_by.localeCompare(b.owned_by);
|
|
if (ownedByComparison === 0) {
|
|
return a.id.localeCompare(b.id);
|
|
}
|
|
return ownedByComparison;
|
|
});
|
|
|
|
setModelOptions(
|
|
data.map((model) => {
|
|
return {
|
|
id: model.id,
|
|
group: model.owned_by,
|
|
};
|
|
})
|
|
);
|
|
} 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;
|
|
const modelsStr = values.models.map((model) => model.id).join(",");
|
|
values.group = values.groups.join(",");
|
|
if (channelId) {
|
|
res = await API.put(`/api/channel/`, {
|
|
...values,
|
|
id: parseInt(channelId),
|
|
models: modelsStr,
|
|
});
|
|
} else {
|
|
res = await API.post(`/api/channel/`, { ...values, models: modelsStr });
|
|
}
|
|
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 });
|
|
}
|
|
};
|
|
|
|
function initialModel(channelModel) {
|
|
if (!channelModel) {
|
|
return [];
|
|
}
|
|
|
|
// 如果 channelModel 是一个字符串
|
|
if (typeof channelModel === "string") {
|
|
channelModel = channelModel.split(",");
|
|
}
|
|
let modelList = channelModel.map((model) => {
|
|
const modelOption = modelOptions.find((option) => option.id === model);
|
|
if (modelOption) {
|
|
return modelOption;
|
|
}
|
|
return { id: model, group: "自定义：点击或回车输入" };
|
|
});
|
|
return modelList;
|
|
}
|
|
|
|
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 = initialModel(data.models);
|
|
}
|
|
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.base_url = data.base_url ?? "";
|
|
data.is_edit = true;
|
|
initChannel(data.type);
|
|
setInitialInput(data);
|
|
} else {
|
|
showError(message);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchGroups().then();
|
|
fetchModels().then();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setBatchAdd(false);
|
|
if (channelId) {
|
|
loadChannel().then();
|
|
} else {
|
|
initChannel(1);
|
|
setInitialInput({ ...defaultConfig.input, is_edit: false });
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [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)
|
|
.sort((a, b) => {
|
|
return a.text.localeCompare(b.text);
|
|
})
|
|
.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={values.models}
|
|
onChange={(e, value) => {
|
|
const event = {
|
|
target: {
|
|
name: "models",
|
|
value: value.map((item) =>
|
|
typeof item === "string"
|
|
? { id: item, group: "自定义：点击或回车输入" }
|
|
: item
|
|
),
|
|
},
|
|
};
|
|
handleChange(event);
|
|
}}
|
|
onBlur={handleBlur}
|
|
// filterSelectedOptions
|
|
disableCloseOnSelect
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
name="models"
|
|
error={Boolean(errors.models)}
|
|
label={inputLabel.models}
|
|
/>
|
|
)}
|
|
groupBy={(option) => option.group}
|
|
getOptionLabel={(option) => {
|
|
if (typeof option === "string") {
|
|
return option;
|
|
}
|
|
if (option.inputValue) {
|
|
return option.inputValue;
|
|
}
|
|
return option.id;
|
|
}}
|
|
filterOptions={(options, params) => {
|
|
const filtered = filter(options, params);
|
|
const { inputValue } = params;
|
|
const isExisting = options.some(
|
|
(option) => inputValue === option.id
|
|
);
|
|
if (inputValue !== "" && !isExisting) {
|
|
filtered.push({
|
|
id: inputValue,
|
|
group: "自定义：点击或回车输入",
|
|
});
|
|
}
|
|
return filtered;
|
|
}}
|
|
renderOption={(props, option, { selected }) => (
|
|
<li {...props}>
|
|
<Checkbox
|
|
icon={icon}
|
|
checkedIcon={checkedIcon}
|
|
style={{ marginRight: 8 }}
|
|
checked={selected}
|
|
/>
|
|
{option.id}
|
|
</li>
|
|
)}
|
|
/>
|
|
{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(values.type));
|
|
}}
|
|
>
|
|
填入渠道支持模型
|
|
</Button>
|
|
<Button
|
|
onClick={() => {
|
|
setFieldValue("models", modelOptions);
|
|
}}
|
|
>
|
|
填入所有模型
|
|
</Button>
|
|
</ButtonGroup>
|
|
</Container>
|
|
<FormControl
|
|
fullWidth
|
|
error={Boolean(touched.key && errors.key)}
|
|
sx={{ ...theme.typography.otherInput }}
|
|
>
|
|
{!batchAdd ? (
|
|
<>
|
|
<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"
|
|
/>
|
|
</>
|
|
) : (
|
|
<TextField
|
|
multiline
|
|
id="channel-key-label"
|
|
label={inputLabel.key}
|
|
value={values.key}
|
|
name="key"
|
|
onBlur={handleBlur}
|
|
onChange={handleChange}
|
|
aria-describedby="helper-text-channel-key-label"
|
|
minRows={5}
|
|
placeholder={inputPrompt.key + "，一行一个密钥"}
|
|
/>
|
|
)}
|
|
|
|
{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>
|
|
{channelId === 0 && (
|
|
<Container
|
|
sx={{
|
|
textAlign: "right",
|
|
}}
|
|
>
|
|
<Switch
|
|
checked={batchAdd}
|
|
onChange={(e) => setBatchAdd(e.target.checked)}
|
|
/>
|
|
批量添加
|
|
</Container>
|
|
)}
|
|
<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,
|
|
};
|