Ecosystem/ai-gateway
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: berry theme update & bug fix (#1471)

Browse Source 
* feat: load channel models from server

* chore: support AWS Claude/Cloudflare/Coze

* fix: Popup message when copying fails

* chore: Optimize tips
This commit is contained in:
Buer 2024-05-28 01:22:40 +08:00 committed by GitHub
parent 0acee9a065
commit 07b2fd58d6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 448 additions and 469 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/berry/src/constants/ChannelConstants.js
View File

@ -11,12 +11,18 @@ export const CHANNEL_OPTIONS = {
value: 14, value: 14,
color: 'primary' color: 'primary'
}, },
// 33: { 33: {
// key: 33, key: 33,
// text: 'AWS Claude', text: 'AWS Claude',
// value: 33, value: 33,
// color: 'primary' color: 'primary'
// }, },
37: {
key: 37,
text: 'Cloudflare',
value: 37,
color: 'success'
},
3: { 3: {
key: 3, key: 3,
text: 'Azure OpenAI', text: 'Azure OpenAI',
@ -119,12 +125,12 @@ export const CHANNEL_OPTIONS = {
value: 32, value: 32,
color: 'primary' color: 'primary'
}, },
// 34: { 34: {
// key: 34, key: 34,
// text: 'Coze', text: 'Coze',
// value: 34, value: 34,
// color: 'primary' color: 'primary'
// }, },
35: { 35: {
key: 35, key: 35,
text: 'Cohere', text: 'Cohere',

42
web/berry/src/constants/SnackbarConstants.js
View File

@ -1,24 +1,56 @@
import { closeSnackbar } from 'notistack';
import { IconX } from '@tabler/icons-react';
import { IconButton } from '@mui/material';
const action = (snackbarId) => (
<>
<IconButton
onClick={() => {
closeSnackbar(snackbarId);
}}
>
<IconX stroke={1.5} size="1.25rem" />
</IconButton>
</>
);
export const snackbarConstants = { export const snackbarConstants = {
Common: { Common: {
ERROR: { ERROR: {
variant: 'error', variant: 'error',
autoHideDuration: 5000 autoHideDuration: 5000,
preventDuplicate: true,
action
}, },
WARNING: { WARNING: {
variant: 'warning', variant: 'warning',
autoHideDuration: 10000 autoHideDuration: 10000,
preventDuplicate: true,
action
}, },
SUCCESS: { SUCCESS: {
variant: 'success', variant: 'success',
autoHideDuration: 1500 autoHideDuration: 1500,
preventDuplicate: true,
action
}, },
INFO: { INFO: {
variant: 'info', variant: 'info',
autoHideDuration: 3000 autoHideDuration: 3000,
preventDuplicate: true,
action
}, },
NOTICE: { NOTICE: {
variant: 'info', variant: 'info',
autoHideDuration: 7000 autoHideDuration: 20000,
preventDuplicate: true,
action
},
COPY: {
variant: 'copy',
persist: true,
preventDuplicate: true,
allowDownload: true,
action
} }
}, },
Mobile: { Mobile: {

37
web/berry/src/utils/common.js
View File

@ -193,3 +193,40 @@ export function removeTrailingSlash(url) {
return url; return url;
} }
} }
let channelModels = undefined;
export async function loadChannelModels() {
const res = await API.get('/api/models');
const { success, data } = res.data;
if (!success) {
return;
}
channelModels = data;
localStorage.setItem('channel_models', JSON.stringify(data));
}
export function getChannelModels(type) {
if (channelModels !== undefined && type in channelModels) {
return channelModels[type];
}
let models = localStorage.getItem('channel_models');
if (!models) {
return [];
}
channelModels = JSON.parse(models);
if (type in channelModels) {
return channelModels[type];
}
return [];
}
export function copy(text, name = '') {
try {
navigator.clipboard.writeText(text);
} catch (error) {
text = `复制${name}失败，请手动复制：<br /><br />${text}`;
enqueueSnackbar(<SnackbarHTMLContent htmlContent={text} />, getSnackbarOptions('COPY'));
return;
}
showSuccess(`复制${name}成功！`);
}

43
web/berry/src/views/Authentication/AuthForms/ResetPasswordForm.js
View File

@ -1,22 +1,22 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from 'react';
import { useSearchParams } from "react-router-dom"; import { useSearchParams } from 'react-router-dom';
// material-ui // material-ui
import { Button, Stack, Typography, Alert } from "@mui/material"; import { Button, Stack, Typography, Alert } from '@mui/material';
// assets // assets
import { showError, showInfo } from "utils/common"; import { showError, copy } from 'utils/common';
import { API } from "utils/api"; import { API } from 'utils/api';
// ===========================|| FIREBASE - REGISTER ||=========================== // // ===========================|| FIREBASE - REGISTER ||=========================== //
const ResetPasswordForm = () => { const ResetPasswordForm = () => {
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const [inputs, setInputs] = useState({ const [inputs, setInputs] = useState({
email: "", email: '',
token: "", token: ''
}); });
const [newPassword, setNewPassword] = useState(""); const [newPassword, setNewPassword] = useState('');
const submit = async () => { const submit = async () => {
const res = await API.post(`/api/user/reset`, inputs); const res = await API.post(`/api/user/reset`, inputs);
@ -24,31 +24,25 @@ const ResetPasswordForm = () => {
if (success) { if (success) {
let password = res.data.data; let password = res.data.data;
setNewPassword(password); setNewPassword(password);
navigator.clipboard.writeText(password); copy(password, '新密码');
showInfo(`新密码已复制到剪贴板：${password}`);
} else { } else {
showError(message); showError(message);
} }
}; };
useEffect(() => { useEffect(() => {
let email = searchParams.get("email"); let email = searchParams.get('email');
let token = searchParams.get("token"); let token = searchParams.get('token');
setInputs({ setInputs({
token, token,
email, email
}); });
}, []); }, []);
return ( return (
<Stack <Stack spacing={3} padding={'24px'} justifyContent={'center'} alignItems={'center'}>
spacing={3}
padding={"24px"}
justifyContent={"center"}
alignItems={"center"}
>
{!inputs.email || !inputs.token ? ( {!inputs.email || !inputs.token ? (
<Typography variant="h3" sx={{ textDecoration: "none" }}> <Typography variant="h3" sx={{ textDecoration: 'none' }}>
无效的链接 无效的链接
</Typography> </Typography>
) : newPassword ? ( ) : newPassword ? (
@ -57,14 +51,7 @@ const ResetPasswordForm = () => {
请登录后及时修改密码 请登录后及时修改密码
</Alert> </Alert>
) : ( ) : (
<Button <Button fullWidth onClick={submit} size="large" type="submit" variant="contained" color="primary">
fullWidth
onClick={submit}
size="large"
type="submit"
variant="contained"
color="primary"
>
点击重置密码 点击重置密码
</Button> </Button>
)} )}

502
web/berry/src/views/Channel/component/EditModal.js
View File

@ -1,9 +1,9 @@
import PropTypes from "prop-types"; import PropTypes from 'prop-types';
import { useState, useEffect } from "react"; import { useState, useEffect } from 'react';
import { CHANNEL_OPTIONS } from "constants/ChannelConstants"; import { CHANNEL_OPTIONS } from 'constants/ChannelConstants';
import { useTheme } from "@mui/material/styles"; import { useTheme } from '@mui/material/styles';
import { API } from "utils/api"; import { API } from 'utils/api';
import { showError, showSuccess } from "utils/common"; import { showError, showSuccess, getChannelModels } from 'utils/common';
import { import {
Dialog, Dialog,
DialogTitle, DialogTitle,
@ -22,15 +22,15 @@ import {
Autocomplete, Autocomplete,
FormHelperText, FormHelperText,
Switch, Switch,
Checkbox, Checkbox
} from "@mui/material"; } from '@mui/material';
import { Formik } from "formik"; import { Formik } from 'formik';
import * as Yup from "yup"; import * as Yup from 'yup';
import { defaultConfig, typeConfig } from "../type/Config"; //typeConfig import { defaultConfig, typeConfig } from '../type/Config'; //typeConfig
import { createFilterOptions } from "@mui/material/Autocomplete"; import { createFilterOptions } from '@mui/material/Autocomplete';
import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank"; import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import CheckBoxIcon from "@mui/icons-material/CheckBox"; import CheckBoxIcon from '@mui/icons-material/CheckBox';
const icon = <CheckBoxOutlineBlankIcon fontSize="small" />; const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />; const checkedIcon = <CheckBoxIcon fontSize="small" />;
@ -38,38 +38,34 @@ const checkedIcon = <CheckBoxIcon fontSize="small" />;
const filter = createFilterOptions(); const filter = createFilterOptions();
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
is_edit: Yup.boolean(), is_edit: Yup.boolean(),
name: Yup.string().required("名称 不能为空"), name: Yup.string().required('名称 不能为空'),
type: Yup.number().required("渠道 不能为空"), type: Yup.number().required('渠道 不能为空'),
key: Yup.string().when("is_edit", { key: Yup.string().when(['is_edit', 'type'], {
is: false, is: (is_edit, type) => !is_edit && type !== 33,
then: Yup.string().required("密钥 不能为空"), then: Yup.string().required('密钥 不能为空')
}), }),
other: Yup.string(), other: Yup.string(),
models: Yup.array().min(1, "模型 不能为空"), models: Yup.array().min(1, '模型 不能为空'),
groups: Yup.array().min(1, "用户组 不能为空"), groups: Yup.array().min(1, '用户组 不能为空'),
base_url: Yup.string().when("type", { base_url: Yup.string().when('type', {
is: (value) => [3, 8].includes(value), is: (value) => [3, 8].includes(value),
then: Yup.string().required("渠道API地址 不能为空"), // base_url 是必需的 then: Yup.string().required('渠道API地址 不能为空'), // base_url 是必需的
otherwise: Yup.string(), // 在其他情况下，base_url 可以是任意字符串 otherwise: Yup.string() // 在其他情况下，base_url 可以是任意字符串
}), }),
model_mapping: Yup.string().test( model_mapping: Yup.string().test('is-json', '必须是有效的JSON字符串', function (value) {
"is-json", try {
"必须是有效的JSON字符串", if (value === '' || value === null || value === undefined) {
function (value) { return true;
try {
if (value === "" || value === null || value === undefined) {
return true;
}
const parsedValue = JSON.parse(value);
if (typeof parsedValue === "object") {
return true;
}
} catch (e) {
return false;
} }
const parsedValue = JSON.parse(value);
if (typeof parsedValue === 'object') {
return true;
}
} catch (e) {
return false; return false;
} }
), return false;
})
}); });
const EditModal = ({ open, channelId, onCancel, onOk }) => { const EditModal = ({ open, channelId, onCancel, onOk }) => {
@ -81,12 +77,13 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
const [groupOptions, setGroupOptions] = useState([]); const [groupOptions, setGroupOptions] = useState([]);
const [modelOptions, setModelOptions] = useState([]); const [modelOptions, setModelOptions] = useState([]);
const [batchAdd, setBatchAdd] = useState(false); const [batchAdd, setBatchAdd] = useState(false);
const [basicModels, setBasicModels] = useState([]);
const initChannel = (typeValue) => { const initChannel = (typeValue) => {
if (typeConfig[typeValue]?.inputLabel) { if (typeConfig[typeValue]?.inputLabel) {
setInputLabel({ setInputLabel({
...defaultConfig.inputLabel, ...defaultConfig.inputLabel,
...typeConfig[typeValue].inputLabel, ...typeConfig[typeValue].inputLabel
}); });
} else { } else {
setInputLabel(defaultConfig.inputLabel); setInputLabel(defaultConfig.inputLabel);
@ -95,7 +92,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
if (typeConfig[typeValue]?.prompt) { if (typeConfig[typeValue]?.prompt) {
setInputPrompt({ setInputPrompt({
...defaultConfig.prompt, ...defaultConfig.prompt,
...typeConfig[typeValue].prompt, ...typeConfig[typeValue].prompt
}); });
} else { } else {
setInputPrompt(defaultConfig.prompt); setInputPrompt(defaultConfig.prompt);
@ -104,40 +101,14 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
return typeConfig[typeValue]?.input; return typeConfig[typeValue]?.input;
}; };
const handleTypeChange = (setFieldValue, typeValue, values) => { const handleTypeChange = (setFieldValue, typeValue, values) => {
const newInput = initChannel(typeValue); initChannel(typeValue);
let localModels = getChannelModels(typeValue);
if (newInput) { setBasicModels(localModels);
Object.keys(newInput).forEach((key) => { if (localModels.length > 0 && Array.isArray(values['models']) && values['models'].length == 0) {
if ( setFieldValue('models', initialModel(localModels));
(!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) => { setFieldValue('config', {});
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 () => { const fetchGroups = async () => {
@ -155,7 +126,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
const { data } = res.data; const { data } = res.data;
data.forEach((item) => { data.forEach((item) => {
if (!item.owned_by) { if (!item.owned_by) {
item.owned_by = "未知"; item.owned_by = '未知';
} }
}); });
// 先对data排序 // 先对data排序
@ -171,7 +142,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
data.map((model) => { data.map((model) => {
return { return {
id: model.id, id: model.id,
group: model.owned_by, group: model.owned_by
}; };
}) })
); );
@ -182,33 +153,41 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
const submit = async (values, { setErrors, setStatus, setSubmitting }) => { const submit = async (values, { setErrors, setStatus, setSubmitting }) => {
setSubmitting(true); setSubmitting(true);
if (values.base_url && values.base_url.endsWith("/")) { if (values.base_url && values.base_url.endsWith('/')) {
values.base_url = values.base_url.slice(0, values.base_url.length - 1); values.base_url = values.base_url.slice(0, values.base_url.length - 1);
} }
if (values.type === 3 && values.other === "") { if (values.type === 3 && values.other === '') {
values.other = "2023-09-01-preview"; values.other = '2023-09-01-preview';
} }
if (values.type === 18 && values.other === "") { if (values.type === 18 && values.other === '') {
values.other = "v2.1"; values.other = 'v2.1';
} }
if (values.key === '') {
if (values.config.ak !== '' && values.config.sk !== '' && values.config.region !== '') {
values.key = `${values.config.ak}|${values.config.sk}|${values.config.region}`;
}
}
let res; let res;
const modelsStr = values.models.map((model) => model.id).join(","); const modelsStr = values.models.map((model) => model.id).join(',');
values.group = values.groups.join(","); const configStr = JSON.stringify(values.config);
values.group = values.groups.join(',');
if (channelId) { if (channelId) {
res = await API.put(`/api/channel/`, { res = await API.put(`/api/channel/`, {
...values, ...values,
id: parseInt(channelId), id: parseInt(channelId),
models: modelsStr, models: modelsStr,
config: configStr
}); });
} else { } else {
res = await API.post(`/api/channel/`, { ...values, models: modelsStr }); res = await API.post(`/api/channel/`, { ...values, models: modelsStr, config: configStr });
} }
const { success, message } = res.data; const { success, message } = res.data;
if (success) { if (success) {
if (channelId) { if (channelId) {
showSuccess("渠道更新成功！"); showSuccess('渠道更新成功！');
} else { } else {
showSuccess("渠道创建成功！"); showSuccess('渠道创建成功！');
} }
setSubmitting(false); setSubmitting(false);
setStatus({ success: true }); setStatus({ success: true });
@ -226,15 +205,15 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
} }
// 如果 channelModel 是一个字符串 // 如果 channelModel 是一个字符串
if (typeof channelModel === "string") { if (typeof channelModel === 'string') {
channelModel = channelModel.split(","); channelModel = channelModel.split(',');
} }
let modelList = channelModel.map((model) => { let modelList = channelModel.map((model) => {
const modelOption = modelOptions.find((option) => option.id === model); const modelOption = modelOptions.find((option) => option.id === model);
if (modelOption) { if (modelOption) {
return modelOption; return modelOption;
} }
return { id: model, group: "自定义：点击或回车输入" }; return { id: model, group: '自定义：点击或回车输入' };
}); });
return modelList; return modelList;
} }
@ -243,24 +222,24 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
let res = await API.get(`/api/channel/${channelId}`); let res = await API.get(`/api/channel/${channelId}`);
const { success, message, data } = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
if (data.models === "") { if (data.models === '') {
data.models = []; data.models = [];
} else { } else {
data.models = initialModel(data.models); data.models = initialModel(data.models);
} }
if (data.group === "") { if (data.group === '') {
data.groups = []; data.groups = [];
} else { } else {
data.groups = data.group.split(","); data.groups = data.group.split(',');
} }
if (data.model_mapping !== "") { if (data.model_mapping !== '') {
data.model_mapping = JSON.stringify( data.model_mapping = JSON.stringify(JSON.parse(data.model_mapping), null, 2);
JSON.parse(data.model_mapping),
null,
2
);
} }
data.base_url = data.base_url ?? ""; if (data.config !== '') {
data.config = JSON.parse(data.config);
}
data.base_url = data.base_url ?? '';
data.is_edit = true; data.is_edit = true;
initChannel(data.type); initChannel(data.type);
setInitialInput(data); setInitialInput(data);
@ -286,45 +265,25 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
}, [channelId]); }, [channelId]);
return ( return (
<Dialog open={open} onClose={onCancel} fullWidth maxWidth={"md"}> <Dialog open={open} onClose={onCancel} fullWidth maxWidth={'md'}>
<DialogTitle <DialogTitle
sx={{ sx={{
margin: "0px", margin: '0px',
fontWeight: 700, fontWeight: 700,
lineHeight: "1.55556", lineHeight: '1.55556',
padding: "24px", padding: '24px',
fontSize: "1.125rem", fontSize: '1.125rem'
}} }}
> >
{channelId ? "编辑渠道" : "新建渠道"} {channelId ? '编辑渠道' : '新建渠道'}
</DialogTitle> </DialogTitle>
<Divider /> <Divider />
<DialogContent> <DialogContent>
<Formik <Formik initialValues={initialInput} enableReinitialize validationSchema={validationSchema} onSubmit={submit}>
initialValues={initialInput} {({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values, setFieldValue }) => (
enableReinitialize
validationSchema={validationSchema}
onSubmit={submit}
>
{({
errors,
handleBlur,
handleChange,
handleSubmit,
isSubmitting,
touched,
values,
setFieldValue,
}) => (
<form noValidate onSubmit={handleSubmit}> <form noValidate onSubmit={handleSubmit}>
<FormControl <FormControl fullWidth error={Boolean(touched.type && errors.type)} sx={{ ...theme.typography.otherInput }}>
fullWidth <InputLabel htmlFor="channel-type-label">{inputLabel.type}</InputLabel>
error={Boolean(touched.type && errors.type)}
sx={{ ...theme.typography.otherInput }}
>
<InputLabel htmlFor="channel-type-label">
{inputLabel.type}
</InputLabel>
<Select <Select
id="channel-type-label" id="channel-type-label"
label={inputLabel.type} label={inputLabel.type}
@ -338,9 +297,9 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
MenuProps={{ MenuProps={{
PaperProps: { PaperProps: {
style: { style: {
maxHeight: 200, maxHeight: 200
}, }
}, }
}} }}
> >
{Object.values(CHANNEL_OPTIONS) {Object.values(CHANNEL_OPTIONS)
@ -360,21 +319,12 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.type} {errors.type}
</FormHelperText> </FormHelperText>
) : ( ) : (
<FormHelperText id="helper-tex-channel-type-label"> <FormHelperText id="helper-tex-channel-type-label"> {inputPrompt.type} </FormHelperText>
{" "}
{inputPrompt.type}{" "}
</FormHelperText>
)} )}
</FormControl> </FormControl>
<FormControl <FormControl fullWidth error={Boolean(touched.name && errors.name)} sx={{ ...theme.typography.otherInput }}>
fullWidth <InputLabel htmlFor="channel-name-label">{inputLabel.name}</InputLabel>
error={Boolean(touched.name && errors.name)}
sx={{ ...theme.typography.otherInput }}
>
<InputLabel htmlFor="channel-name-label">
{inputLabel.name}
</InputLabel>
<OutlinedInput <OutlinedInput
id="channel-name-label" id="channel-name-label"
label={inputLabel.name} label={inputLabel.name}
@ -383,7 +333,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
name="name" name="name"
onBlur={handleBlur} onBlur={handleBlur}
onChange={handleChange} onChange={handleChange}
inputProps={{ autoComplete: "name" }} inputProps={{ autoComplete: 'name' }}
aria-describedby="helper-text-channel-name-label" aria-describedby="helper-text-channel-name-label"
/> />
{touched.name && errors.name ? ( {touched.name && errors.name ? (
@ -391,21 +341,12 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.name} {errors.name}
</FormHelperText> </FormHelperText>
) : ( ) : (
<FormHelperText id="helper-tex-channel-name-label"> <FormHelperText id="helper-tex-channel-name-label"> {inputPrompt.name} </FormHelperText>
{" "}
{inputPrompt.name}{" "}
</FormHelperText>
)} )}
</FormControl> </FormControl>
<FormControl <FormControl fullWidth error={Boolean(touched.base_url && errors.base_url)} sx={{ ...theme.typography.otherInput }}>
fullWidth <InputLabel htmlFor="channel-base_url-label">{inputLabel.base_url}</InputLabel>
error={Boolean(touched.base_url && errors.base_url)}
sx={{ ...theme.typography.otherInput }}
>
<InputLabel htmlFor="channel-base_url-label">
{inputLabel.base_url}
</InputLabel>
<OutlinedInput <OutlinedInput
id="channel-base_url-label" id="channel-base_url-label"
label={inputLabel.base_url} label={inputLabel.base_url}
@ -422,22 +363,13 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.base_url} {errors.base_url}
</FormHelperText> </FormHelperText>
) : ( ) : (
<FormHelperText id="helper-tex-channel-base_url-label"> <FormHelperText id="helper-tex-channel-base_url-label"> {inputPrompt.base_url} </FormHelperText>
{" "}
{inputPrompt.base_url}{" "}
</FormHelperText>
)} )}
</FormControl> </FormControl>
{inputPrompt.other && ( {inputPrompt.other && (
<FormControl <FormControl fullWidth error={Boolean(touched.other && errors.other)} sx={{ ...theme.typography.otherInput }}>
fullWidth <InputLabel htmlFor="channel-other-label">{inputLabel.other}</InputLabel>
error={Boolean(touched.other && errors.other)}
sx={{ ...theme.typography.otherInput }}
>
<InputLabel htmlFor="channel-other-label">
{inputLabel.other}
</InputLabel>
<OutlinedInput <OutlinedInput
id="channel-other-label" id="channel-other-label"
label={inputLabel.other} label={inputLabel.other}
@ -454,10 +386,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.other} {errors.other}
</FormHelperText> </FormHelperText>
) : ( ) : (
<FormHelperText id="helper-tex-channel-other-label"> <FormHelperText id="helper-tex-channel-other-label"> {inputPrompt.other} </FormHelperText>
{" "}
{inputPrompt.other}{" "}
</FormHelperText>
)} )}
</FormControl> </FormControl>
)} )}
@ -471,22 +400,15 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
onChange={(e, value) => { onChange={(e, value) => {
const event = { const event = {
target: { target: {
name: "groups", name: 'groups',
value: value, value: value
}, }
}; };
handleChange(event); handleChange(event);
}} }}
onBlur={handleBlur} onBlur={handleBlur}
filterSelectedOptions filterSelectedOptions
renderInput={(params) => ( renderInput={(params) => <TextField {...params} name="groups" error={Boolean(errors.groups)} label={inputLabel.groups} />}
<TextField
{...params}
name="groups"
error={Boolean(errors.groups)}
label={inputLabel.groups}
/>
)}
aria-describedby="helper-text-channel-groups-label" aria-describedby="helper-text-channel-groups-label"
/> />
{errors.groups ? ( {errors.groups ? (
@ -494,10 +416,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.groups} {errors.groups}
</FormHelperText> </FormHelperText>
) : ( ) : (
<FormHelperText id="helper-tex-channel-groups-label"> <FormHelperText id="helper-tex-channel-groups-label"> {inputPrompt.groups} </FormHelperText>
{" "}
{inputPrompt.groups}{" "}
</FormHelperText>
)} )}
</FormControl> </FormControl>
@ -511,30 +430,19 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
onChange={(e, value) => { onChange={(e, value) => {
const event = { const event = {
target: { target: {
name: "models", name: 'models',
value: value.map((item) => value: value.map((item) => (typeof item === 'string' ? { id: item, group: '自定义：点击或回车输入' } : item))
typeof item === "string" }
? { id: item, group: "自定义：点击或回车输入" }
: item
),
},
}; };
handleChange(event); handleChange(event);
}} }}
onBlur={handleBlur} onBlur={handleBlur}
// filterSelectedOptions // filterSelectedOptions
disableCloseOnSelect disableCloseOnSelect
renderInput={(params) => ( renderInput={(params) => <TextField {...params} name="models" error={Boolean(errors.models)} label={inputLabel.models} />}
<TextField
{...params}
name="models"
error={Boolean(errors.models)}
label={inputLabel.models}
/>
)}
groupBy={(option) => option.group} groupBy={(option) => option.group}
getOptionLabel={(option) => { getOptionLabel={(option) => {
if (typeof option === "string") { if (typeof option === 'string') {
return option; return option;
} }
if (option.inputValue) { if (option.inputValue) {
@ -545,25 +453,18 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
filterOptions={(options, params) => { filterOptions={(options, params) => {
const filtered = filter(options, params); const filtered = filter(options, params);
const { inputValue } = params; const { inputValue } = params;
const isExisting = options.some( const isExisting = options.some((option) => inputValue === option.id);
(option) => inputValue === option.id if (inputValue !== '' && !isExisting) {
);
if (inputValue !== "" && !isExisting) {
filtered.push({ filtered.push({
id: inputValue, id: inputValue,
group: "自定义：点击或回车输入", group: '自定义：点击或回车输入'
}); });
} }
return filtered; return filtered;
}} }}
renderOption={(props, option, { selected }) => ( renderOption={(props, option, { selected }) => (
<li {...props}> <li {...props}>
<Checkbox <Checkbox icon={icon} checkedIcon={checkedIcon} style={{ marginRight: 8 }} checked={selected} />
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option.id} {option.id}
</li> </li>
)} )}
@ -573,103 +474,104 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.models} {errors.models}
</FormHelperText> </FormHelperText>
) : ( ) : (
<FormHelperText id="helper-tex-channel-models-label"> <FormHelperText id="helper-tex-channel-models-label"> {inputPrompt.models} </FormHelperText>
{" "}
{inputPrompt.models}{" "}
</FormHelperText>
)} )}
</FormControl> </FormControl>
<Container <Container
sx={{ sx={{
textAlign: "right", textAlign: 'right'
}} }}
> >
<ButtonGroup <ButtonGroup variant="outlined" aria-label="small outlined primary button group">
variant="outlined"
aria-label="small outlined primary button group"
>
<Button <Button
onClick={() => { onClick={() => {
setFieldValue("models", basicModels(values.type)); setFieldValue('models', initialModel(basicModels));
}} }}
> >
填入渠道支持模型 填入相关模型
</Button> </Button>
<Button <Button
onClick={() => { onClick={() => {
setFieldValue("models", modelOptions); setFieldValue('models', modelOptions);
}} }}
> >
填入所有模型 填入所有模型
</Button> </Button>
</ButtonGroup> </ButtonGroup>
</Container> </Container>
<FormControl {inputLabel.key && (
fullWidth <>
error={Boolean(touched.key && errors.key)} <FormControl fullWidth error={Boolean(touched.key && errors.key)} sx={{ ...theme.typography.otherInput }}>
sx={{ ...theme.typography.otherInput }} {!batchAdd ? (
> <>
{!batchAdd ? ( <InputLabel htmlFor="channel-key-label">{inputLabel.key}</InputLabel>
<> <OutlinedInput
<InputLabel htmlFor="channel-key-label"> id="channel-key-label"
{inputLabel.key} label={inputLabel.key}
</InputLabel> type="text"
<OutlinedInput value={values.key}
id="channel-key-label" name="key"
label={inputLabel.key} onBlur={handleBlur}
type="text" onChange={handleChange}
value={values.key} inputProps={{}}
name="key" aria-describedby="helper-text-channel-key-label"
onBlur={handleBlur} />
onChange={handleChange} </>
inputProps={{}} ) : (
aria-describedby="helper-text-channel-key-label" <TextField
/> multiline
</> id="channel-key-label"
) : ( label={inputLabel.key}
<TextField value={values.key}
multiline name="key"
id="channel-key-label" onBlur={handleBlur}
label={inputLabel.key} onChange={handleChange}
value={values.key} aria-describedby="helper-text-channel-key-label"
name="key" minRows={5}
onBlur={handleBlur} placeholder={inputPrompt.key + '，一行一个密钥'}
onChange={handleChange} />
aria-describedby="helper-text-channel-key-label" )}
minRows={5}
placeholder={inputPrompt.key + "，一行一个密钥"}
/>
)}
{touched.key && errors.key ? ( {touched.key && errors.key ? (
<FormHelperText error id="helper-tex-channel-key-label"> <FormHelperText error id="helper-tex-channel-key-label">
{errors.key} {errors.key}
</FormHelperText> </FormHelperText>
) : ( ) : (
<FormHelperText id="helper-tex-channel-key-label"> <FormHelperText id="helper-tex-channel-key-label"> {inputPrompt.key} </FormHelperText>
{" "} )}
{inputPrompt.key}{" "} </FormControl>
</FormHelperText> {channelId === 0 && (
)} <Container
</FormControl> sx={{
{channelId === 0 && ( textAlign: 'right'
<Container }}
sx={{ >
textAlign: "right", <Switch checked={batchAdd} onChange={(e) => setBatchAdd(e.target.checked)} />
}} 批量添加
> </Container>
<Switch )}
checked={batchAdd} </>
onChange={(e) => setBatchAdd(e.target.checked)}
/>
批量添加
</Container>
)} )}
<FormControl
fullWidth {inputLabel.config &&
error={Boolean(touched.model_mapping && errors.model_mapping)} Object.keys(inputLabel.config).map((configName) => {
sx={{ ...theme.typography.otherInput }} return (
> <FormControl key={'config.' + configName} fullWidth sx={{ ...theme.typography.otherInput }}>
<TextField
multiline
key={'config.' + configName}
name={'config.' + configName}
value={values.config?.[configName] || ''}
label={configName}
placeholder={inputPrompt.config[configName]}
onChange={handleChange}
/>
<FormHelperText id={`helper-tex-config.${configName}-label`}> {inputPrompt.config[configName]} </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> */} {/* <InputLabel htmlFor="channel-model_mapping-label">{inputLabel.model_mapping}</InputLabel> */}
<TextField <TextField
multiline multiline
@ -684,28 +586,16 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
placeholder={inputPrompt.model_mapping} placeholder={inputPrompt.model_mapping}
/> />
{touched.model_mapping && errors.model_mapping ? ( {touched.model_mapping && errors.model_mapping ? (
<FormHelperText <FormHelperText error id="helper-tex-channel-model_mapping-label">
error
id="helper-tex-channel-model_mapping-label"
>
{errors.model_mapping} {errors.model_mapping}
</FormHelperText> </FormHelperText>
) : ( ) : (
<FormHelperText id="helper-tex-channel-model_mapping-label"> <FormHelperText id="helper-tex-channel-model_mapping-label"> {inputPrompt.model_mapping} </FormHelperText>
{" "}
{inputPrompt.model_mapping}{" "}
</FormHelperText>
)} )}
</FormControl> </FormControl>
<DialogActions> <DialogActions>
<Button onClick={onCancel}>取消</Button> <Button onClick={onCancel}>取消</Button>
<Button <Button disableElevation disabled={isSubmitting} type="submit" variant="contained" color="primary">
disableElevation
disabled={isSubmitting}
type="submit"
variant="contained"
color="primary"
>
提交 提交
</Button> </Button>
</DialogActions> </DialogActions>
@ -723,5 +613,5 @@ EditModal.propTypes = {
open: PropTypes.bool, open: PropTypes.bool,
channelId: PropTypes.number, channelId: PropTypes.number,
onCancel: PropTypes.func, onCancel: PropTypes.func,
onOk: PropTypes.func, onOk: PropTypes.func
}; };

27
web/berry/src/views/Channel/component/NameLabel.js
View File

@ -1,20 +1,20 @@
import PropTypes from "prop-types"; import PropTypes from 'prop-types';
import { Tooltip, Stack, Container } from "@mui/material"; import { Tooltip, Stack, Container } from '@mui/material';
import Label from "ui-component/Label"; import Label from 'ui-component/Label';
import { styled } from "@mui/material/styles"; import { styled } from '@mui/material/styles';
import { showSuccess } from "utils/common"; import { showSuccess, copy } from 'utils/common';
const TooltipContainer = styled(Container)({ const TooltipContainer = styled(Container)({
maxHeight: "250px", maxHeight: '250px',
overflow: "auto", overflow: 'auto',
"&::-webkit-scrollbar": { '&::-webkit-scrollbar': {
width: "0px", // Set the width to 0 to hide the scrollbar width: '0px' // Set the width to 0 to hide the scrollbar
}, }
}); });
const NameLabel = ({ name, models }) => { const NameLabel = ({ name, models }) => {
let modelMap = []; let modelMap = [];
modelMap = models.split(","); modelMap = models.split(',');
modelMap.sort(); modelMap.sort();
return ( return (
@ -28,8 +28,7 @@ const NameLabel = ({ name, models }) => {
variant="ghost" variant="ghost"
key={index} key={index}
onClick={() => { onClick={() => {
navigator.clipboard.writeText(item); copy(item, '模型名称');
showSuccess("复制模型名称成功！");
}} }}
> >
{item} {item}
@ -48,7 +47,7 @@ const NameLabel = ({ name, models }) => {
NameLabel.propTypes = { NameLabel.propTypes = {
name: PropTypes.string, name: PropTypes.string,
models: PropTypes.string, models: PropTypes.string
}; };
export default NameLabel; export default NameLabel;

8
web/berry/src/views/Channel/index.js
View File

@ -1,5 +1,5 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { showError, showSuccess, showInfo } from 'utils/common'; import { showError, showSuccess, showInfo, loadChannelModels } from 'utils/common';
import { useTheme } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles';
import Table from '@mui/material/Table'; import Table from '@mui/material/Table';
@ -8,7 +8,6 @@ import TableContainer from '@mui/material/TableContainer';
import PerfectScrollbar from 'react-perfect-scrollbar'; import PerfectScrollbar from 'react-perfect-scrollbar';
import TablePagination from '@mui/material/TablePagination'; import TablePagination from '@mui/material/TablePagination';
import LinearProgress from '@mui/material/LinearProgress'; import LinearProgress from '@mui/material/LinearProgress';
import Alert from '@mui/material/Alert';
import ButtonGroup from '@mui/material/ButtonGroup'; import ButtonGroup from '@mui/material/ButtonGroup';
import Toolbar from '@mui/material/Toolbar'; import Toolbar from '@mui/material/Toolbar';
import useMediaQuery from '@mui/material/useMediaQuery'; import useMediaQuery from '@mui/material/useMediaQuery';
@ -189,6 +188,7 @@ export default function ChannelPage() {
.catch((reason) => { .catch((reason) => {
showError(reason); showError(reason);
}); });
loadChannelModels().then();
}, []); }, []);
return ( return (
@ -200,7 +200,7 @@ export default function ChannelPage() {
</Button> </Button>
</Stack> </Stack>
<Card> <Card>
<Box component="form" onSubmit={searchChannels} noValidate sx={{marginTop: 2}}> <Box component="form" onSubmit={searchChannels} noValidate sx={{ marginTop: 2 }}>
<TableToolBar filterName={searchKeyword} handleFilterName={handleSearchKeyword} placeholder={'搜索渠道的 ID，名称和密钥 ...'} /> <TableToolBar filterName={searchKeyword} handleFilterName={handleSearchKeyword} placeholder={'搜索渠道的 ID，名称和密钥 ...'} />
</Box> </Box>
<Toolbar <Toolbar
@ -214,7 +214,7 @@ export default function ChannelPage() {
> >
<Container> <Container>
{matchUpMd ? ( {matchUpMd ? (
<ButtonGroup variant="outlined" aria-label="outlined small primary button group" sx={{marginBottom: 2}}> <ButtonGroup variant="outlined" aria-label="outlined small primary button group" sx={{ marginBottom: 2 }}>
<Button onClick={handleRefresh} startIcon={<IconRefresh width={'18px'} />}> <Button onClick={handleRefresh} startIcon={<IconRefresh width={'18px'} />}>
刷新 刷新
</Button> </Button>

196
web/berry/src/views/Channel/type/Config.js
View File

@ -1,177 +1,209 @@
const defaultConfig = { const defaultConfig = {
input: { input: {
name: "", name: '',
type: 1, type: 1,
key: "", key: '',
base_url: "", base_url: '',
other: "", other: '',
model_mapping: "", model_mapping: '',
models: [], models: [],
groups: ["default"], groups: ['default'],
config: {}
}, },
inputLabel: { inputLabel: {
name: "渠道名称", name: '渠道名称',
type: "渠道类型", type: '渠道类型',
base_url: "渠道API地址", base_url: '渠道API地址',
key: "密钥", key: '密钥',
other: "其他参数", other: '其他参数',
models: "模型", models: '模型',
model_mapping: "模型映射关系", model_mapping: '模型映射关系',
groups: "用户组", groups: '用户组',
config: null
}, },
prompt: { prompt: {
type: "请选择渠道类型", type: '请选择渠道类型',
name: "请为渠道命名", name: '请为渠道命名',
base_url: "可空，请输入中转API地址，例如通过cloudflare中转", base_url: '可空，请输入中转API地址，例如通过cloudflare中转',
key: "请输入渠道对应的鉴权密钥", key: '请输入渠道对应的鉴权密钥',
other: "", other: '',
models: "请选择该渠道所支持的模型", models: '请选择该渠道所支持的模型',
model_mapping: model_mapping:
'请输入要修改的模型映射关系，格式为：api请求模型ID:实际转发给渠道的模型ID，使用JSON数组表示，例如：{"gpt-3.5": "gpt-35"}', '请输入要修改的模型映射关系，格式为：api请求模型ID:实际转发给渠道的模型ID，使用JSON数组表示，例如：{"gpt-3.5": "gpt-35"}',
groups: "请选择该渠道所支持的用户组", groups: '请选择该渠道所支持的用户组',
config: null
}, },
modelGroup: "openai", modelGroup: 'openai'
}; };
const typeConfig = { const typeConfig = {
3: { 3: {
inputLabel: { inputLabel: {
base_url: "AZURE_OPENAI_ENDPOINT", base_url: 'AZURE_OPENAI_ENDPOINT',
other: "默认 API 版本", other: '默认 API 版本'
}, },
prompt: { prompt: {
base_url: "请填写AZURE_OPENAI_ENDPOINT", base_url: '请填写AZURE_OPENAI_ENDPOINT',
other: "请输入默认API版本，例如：2024-03-01-preview", other: '请输入默认API版本，例如：2024-03-01-preview'
}, }
}, },
11: { 11: {
input: { input: {
models: ["PaLM-2"], models: ['PaLM-2']
}, },
modelGroup: "google palm", modelGroup: 'google palm'
}, },
14: { 14: {
input: { input: {
models: ["claude-instant-1", "claude-2", "claude-2.0", "claude-2.1"], models: ['claude-instant-1', 'claude-2', 'claude-2.0', 'claude-2.1']
}, },
modelGroup: "anthropic", modelGroup: 'anthropic'
}, },
15: { 15: {
input: { input: {
models: ["ERNIE-Bot", "ERNIE-Bot-turbo", "ERNIE-Bot-4", "Embedding-V1"], models: ['ERNIE-Bot', 'ERNIE-Bot-turbo', 'ERNIE-Bot-4', 'Embedding-V1']
}, },
prompt: { prompt: {
key: "按照如下格式输入：APIKey|SecretKey", key: '按照如下格式输入：APIKey|SecretKey'
}, },
modelGroup: "baidu", modelGroup: 'baidu'
}, },
16: { 16: {
input: { input: {
models: ["glm-4", "glm-4v", "glm-3-turbo", "chatglm_turbo", "chatglm_pro", "chatglm_std", "chatglm_lite"], models: ['glm-4', 'glm-4v', 'glm-3-turbo', 'chatglm_turbo', 'chatglm_pro', 'chatglm_std', 'chatglm_lite']
}, },
modelGroup: "zhipu", modelGroup: 'zhipu'
}, },
17: { 17: {
inputLabel: { inputLabel: {
other: "插件参数", other: '插件参数'
}, },
input: { input: {
models: [ models: ['qwen-turbo', 'qwen-plus', 'qwen-max', 'qwen-max-longcontext', 'text-embedding-v1']
"qwen-turbo",
"qwen-plus",
"qwen-max",
"qwen-max-longcontext",
"text-embedding-v1",
],
}, },
prompt: { prompt: {
other: "请输入插件参数，即 X-DashScope-Plugin 请求头的取值", other: '请输入插件参数，即 X-DashScope-Plugin 请求头的取值'
}, },
modelGroup: "ali", modelGroup: 'ali'
}, },
18: { 18: {
inputLabel: { inputLabel: {
other: "版本号", other: '版本号'
}, },
input: { input: {
models: [ models: ['SparkDesk', 'SparkDesk-v1.1', 'SparkDesk-v2.1', 'SparkDesk-v3.1', 'SparkDesk-v3.5']
"SparkDesk",
'SparkDesk-v1.1',
'SparkDesk-v2.1',
'SparkDesk-v3.1',
'SparkDesk-v3.5'
],
}, },
prompt: { prompt: {
key: "按照如下格式输入：APPID|APISecret|APIKey", key: '按照如下格式输入：APPID|APISecret|APIKey',
other: "请输入版本号，例如：v3.1", other: '请输入版本号，例如：v3.1'
}, },
modelGroup: "xunfei", modelGroup: 'xunfei'
}, },
19: { 19: {
input: { input: {
models: [ models: ['360GPT_S2_V9', 'embedding-bert-512-v1', 'embedding_s1_v1', 'semantic_similarity_s1_v1']
"360GPT_S2_V9",
"embedding-bert-512-v1",
"embedding_s1_v1",
"semantic_similarity_s1_v1",
],
}, },
modelGroup: "360", modelGroup: '360'
}, },
22: { 22: {
prompt: { prompt: {
key: "按照如下格式输入：APIKey-AppId，例如：fastgpt-0sp2gtvfdgyi4k30jwlgwf1i-64f335d84283f05518e9e041", key: '按照如下格式输入：APIKey-AppId，例如：fastgpt-0sp2gtvfdgyi4k30jwlgwf1i-64f335d84283f05518e9e041'
}, }
}, },
23: { 23: {
input: { input: {
models: ["hunyuan"], models: ['hunyuan']
}, },
prompt: { prompt: {
key: "按照如下格式输入：AppId|SecretId|SecretKey", key: '按照如下格式输入：AppId|SecretId|SecretKey'
}, },
modelGroup: "tencent", modelGroup: 'tencent'
}, },
24: { 24: {
inputLabel: { inputLabel: {
other: "版本号", other: '版本号'
}, },
input: { input: {
models: ["gemini-pro"], models: ['gemini-pro']
}, },
prompt: { prompt: {
other: "请输入版本号，例如：v1", other: '请输入版本号，例如：v1'
}, },
modelGroup: "google gemini", modelGroup: 'google gemini'
}, },
25: { 25: {
input: { input: {
models: ['moonshot-v1-8k', 'moonshot-v1-32k', 'moonshot-v1-128k'], models: ['moonshot-v1-8k', 'moonshot-v1-32k', 'moonshot-v1-128k']
}, },
modelGroup: "moonshot", modelGroup: 'moonshot'
}, },
26: { 26: {
input: { input: {
models: ['Baichuan2-Turbo', 'Baichuan2-Turbo-192k', 'Baichuan-Text-Embedding'], models: ['Baichuan2-Turbo', 'Baichuan2-Turbo-192k', 'Baichuan-Text-Embedding']
}, },
modelGroup: "baichuan", modelGroup: 'baichuan'
}, },
27: { 27: {
input: { input: {
models: ['abab5.5s-chat', 'abab5.5-chat', 'abab6-chat'], models: ['abab5.5s-chat', 'abab5.5-chat', 'abab6-chat']
}, },
modelGroup: "minimax", modelGroup: 'minimax'
}, },
29: { 29: {
modelGroup: "groq", modelGroup: 'groq'
}, },
30: { 30: {
modelGroup: "ollama", modelGroup: 'ollama'
}, },
31: { 31: {
modelGroup: "lingyiwanwu", modelGroup: 'lingyiwanwu'
}, },
33: {
inputLabel: {
key: '',
config: {
region: 'Region',
ak: 'Access Key',
sk: 'Secret Key'
}
},
prompt: {
key: '',
config: {
region: 'region，e.g. us-west-2',
ak: 'AWS IAM Access Key',
sk: 'AWS IAM Secret Key'
}
},
modelGroup: 'anthropic'
},
37: {
inputLabel: {
config: {
user_id: 'Account ID'
}
},
prompt: {
config: {
user_id: '请输入 Account ID，例如：d8d7c61dbc334c32d3ced580e4bf42b4'
}
},
modelGroup: 'Cloudflare'
},
34: {
inputLabel: {
config: {
user_id: 'User ID'
}
},
prompt: {
models: '对于 Coze 而言，模型名称即 Bot ID，你可以添加一个前缀 `bot-`，例如：`bot-123456`',
config: {
user_id: '生成该密钥的用户 ID'
}
},
modelGroup: 'Coze'
}
}; };
export { defaultConfig, typeConfig }; export { defaultConfig, typeConfig };

5
web/berry/src/views/Profile/index.js
View File

@ -21,7 +21,7 @@ import { IconBrandWechat, IconBrandGithub, IconMail } from '@tabler/icons-react'
import Label from 'ui-component/Label'; import Label from 'ui-component/Label';
import { API } from 'utils/api'; import { API } from 'utils/api';
import { showError, showSuccess } from 'utils/common'; import { showError, showSuccess } from 'utils/common';
import { onGitHubOAuthClicked, onLarkOAuthClicked } from 'utils/common'; import { onGitHubOAuthClicked, onLarkOAuthClicked, copy } from 'utils/common';
import * as Yup from 'yup'; import * as Yup from 'yup';
import WechatModal from 'views/Authentication/AuthForms/WechatModal'; import WechatModal from 'views/Authentication/AuthForms/WechatModal';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
@ -90,8 +90,7 @@ export default function Profile() {
const { success, message, data } = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
setInputs((inputs) => ({ ...inputs, access_token: data })); setInputs((inputs) => ({ ...inputs, access_token: data }));
navigator.clipboard.writeText(data); copy(data, '访问令牌');
showSuccess(`令牌已重置并已复制到剪贴板`);
} else { } else {
showError(message); showError(message);
} }

5
web/berry/src/views/Redemption/component/TableRow.js
View File

@ -18,7 +18,7 @@ import {
import Label from 'ui-component/Label'; import Label from 'ui-component/Label';
import TableSwitch from 'ui-component/Switch'; import TableSwitch from 'ui-component/Switch';
import { timestamp2string, renderQuota, showSuccess } from 'utils/common'; import { timestamp2string, renderQuota, copy } from 'utils/common';
import { IconDotsVertical, IconEdit, IconTrash } from '@tabler/icons-react'; import { IconDotsVertical, IconEdit, IconTrash } from '@tabler/icons-react';
@ -83,8 +83,7 @@ export default function RedemptionTableRow({ item, manageRedemption, handleOpenM
variant="contained" variant="contained"
color="primary" color="primary"
onClick={() => { onClick={() => {
navigator.clipboard.writeText(item.key); copy(item.key, '兑换码');
showSuccess('已复制到剪贴板！');
}} }}
> >
复制 复制

14
web/berry/src/views/Token/component/TableRow.js
View File

@ -20,7 +20,7 @@ import {
} from '@mui/material'; } from '@mui/material';
import TableSwitch from 'ui-component/Switch'; import TableSwitch from 'ui-component/Switch';
import { renderQuota, showSuccess, timestamp2string } from 'utils/common'; import { renderQuota, timestamp2string, copy } from 'utils/common';
import { IconDotsVertical, IconEdit, IconTrash, IconCaretDownFilled } from '@tabler/icons-react'; import { IconDotsVertical, IconEdit, IconTrash, IconCaretDownFilled } from '@tabler/icons-react';
@ -141,8 +141,7 @@ export default function TokensTableRow({ item, manageToken, handleOpenModal, set
if (type === 'link') { if (type === 'link') {
window.open(text); window.open(text);
} else { } else {
navigator.clipboard.writeText(text); copy(text);
showSuccess('已复制到剪贴板！');
} }
handleCloseMenu(); handleCloseMenu();
}; };
@ -192,7 +191,7 @@ export default function TokensTableRow({ item, manageToken, handleOpenModal, set
id={`switch-${item.id}`} id={`switch-${item.id}`}
checked={statusSwitch === 1} checked={statusSwitch === 1}
onChange={handleStatus} onChange={handleStatus}
// disabled={statusSwitch !== 1 && statusSwitch !== 2} // disabled={statusSwitch !== 1 && statusSwitch !== 2}
/> />
</Tooltip> </Tooltip>
</TableCell> </TableCell>
@ -211,8 +210,7 @@ export default function TokensTableRow({ item, manageToken, handleOpenModal, set
<Button <Button
color="primary" color="primary"
onClick={() => { onClick={() => {
navigator.clipboard.writeText(`sk-${item.key}`); copy(`sk-${item.key}`);
showSuccess('已复制到剪贴板！');
}} }}
> >
复制 复制
@ -222,7 +220,9 @@ export default function TokensTableRow({ item, manageToken, handleOpenModal, set
</Button> </Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup size="small" aria-label="split button"> <ButtonGroup size="small" aria-label="split button">
<Button color="primary" onClick={(e) => handleCopy(COPY_OPTIONS[0], 'link')}>聊天</Button> <Button color="primary" onClick={(e) => handleCopy(COPY_OPTIONS[0], 'link')}>
聊天
</Button>
<Button size="small" onClick={(e) => handleOpenMenu(e, 'link')}> <Button size="small" onClick={(e) => handleOpenMenu(e, 'link')}>
<IconCaretDownFilled size={'16px'} /> <IconCaretDownFilled size={'16px'} />
</Button> </Button>

8
web/berry/src/views/Topup/component/InviteCard.js
View File

@ -4,7 +4,7 @@ import SubCard from 'ui-component/cards/SubCard';
import inviteImage from 'assets/images/invite/cwok_casual_19.webp'; import inviteImage from 'assets/images/invite/cwok_casual_19.webp';
import { useState } from 'react'; import { useState } from 'react';
import { API } from 'utils/api'; import { API } from 'utils/api';
import { showError, showSuccess } from 'utils/common'; import { showError, copy } from 'utils/common';
const InviteCard = () => { const InviteCard = () => {
const theme = useTheme(); const theme = useTheme();
@ -12,8 +12,7 @@ const InviteCard = () => {
const handleInviteUrl = async () => { const handleInviteUrl = async () => {
if (inviteUl) { if (inviteUl) {
navigator.clipboard.writeText(inviteUl); copy(inviteUl, '邀请链接');
showSuccess(`邀请链接已复制到剪切板`);
return; return;
} }
const res = await API.get('/api/user/aff'); const res = await API.get('/api/user/aff');
@ -21,8 +20,7 @@ const InviteCard = () => {
if (success) { if (success) {
let link = `${window.location.origin}/register?aff=${data}`; let link = `${window.location.origin}/register?aff=${data}`;
setInviteUrl(link); setInviteUrl(link);
navigator.clipboard.writeText(link); copy(link, '邀请链接');
showSuccess(`邀请链接已复制到剪切板`);
} else { } else {
showError(message); showError(message);
} }