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

feat: load channel models from server

Browse Source
This commit is contained in:
MartialBE 2024-05-26 17:09:26 +08:00
parent 0acee9a065
commit ec9b6d1039
No known key found for this signature in database
GPG Key ID: 27C0267EC84B0A5C
3 changed files with 148 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -193,3 +193,29 @@ export function removeTrailingSlash(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 [];
}

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

@ -1,9 +1,9 @@
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 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, getChannelModels } from 'utils/common';
import {
Dialog,
DialogTitle,
@ -22,15 +22,15 @@ import {
Autocomplete,
FormHelperText,
Switch,
Checkbox,
} from "@mui/material";
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";
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" />;
@ -38,38 +38,34 @@ 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", {
name: Yup.string().required('名称 不能为空'),
type: Yup.number().required('渠道 不能为空'),
key: Yup.string().when('is_edit', {
is: false,
then: Yup.string().required("密钥 不能为空"),
then: Yup.string().required('密钥 不能为空')
}),
other: Yup.string(),
models: Yup.array().min(1, "模型 不能为空"),
groups: Yup.array().min(1, "用户组 不能为空"),
base_url: Yup.string().when("type", {
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 可以是任意字符串
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;
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 }) => {
@ -81,12 +77,13 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
const [groupOptions, setGroupOptions] = useState([]);
const [modelOptions, setModelOptions] = useState([]);
const [batchAdd, setBatchAdd] = useState(false);
const [basicModels, setBasicModels] = useState([]);
const initChannel = (typeValue) => {
if (typeConfig[typeValue]?.inputLabel) {
setInputLabel({
...defaultConfig.inputLabel,
...typeConfig[typeValue].inputLabel,
...typeConfig[typeValue].inputLabel
});
} else {
setInputLabel(defaultConfig.inputLabel);
@ -95,7 +92,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
if (typeConfig[typeValue]?.prompt) {
setInputPrompt({
...defaultConfig.prompt,
...typeConfig[typeValue].prompt,
...typeConfig[typeValue].prompt
});
} else {
setInputPrompt(defaultConfig.prompt);
@ -104,42 +101,14 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
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]);
});
initChannel(typeValue);
let localModels = getChannelModels(typeValue);
setBasicModels(localModels);
if (localModels.length > 0 && Array.isArray(values['models']) && values['models'].length == 0) {
setFieldValue('models', initialModel(localModels));
}
};
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/`);
@ -155,7 +124,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
const { data } = res.data;
data.forEach((item) => {
if (!item.owned_by) {
item.owned_by = "未知";
item.owned_by = '未知';
}
});
// 先对data排序
@ -171,7 +140,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
data.map((model) => {
return {
id: model.id,
group: model.owned_by,
group: model.owned_by
};
})
);
@ -182,23 +151,23 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
const submit = async (values, { setErrors, setStatus, setSubmitting }) => {
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);
}
if (values.type === 3 && values.other === "") {
values.other = "2023-09-01-preview";
if (values.type === 3 && values.other === '') {
values.other = '2023-09-01-preview';
}
if (values.type === 18 && values.other === "") {
values.other = "v2.1";
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(",");
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,
models: modelsStr
});
} else {
res = await API.post(`/api/channel/`, { ...values, models: modelsStr });
@ -206,9 +175,9 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
const { success, message } = res.data;
if (success) {
if (channelId) {
showSuccess("渠道更新成功！");
showSuccess('渠道更新成功！');
} else {
showSuccess("渠道创建成功！");
showSuccess('渠道创建成功！');
}
setSubmitting(false);
setStatus({ success: true });
@ -226,15 +195,15 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
}
// 如果 channelModel 是一个字符串
if (typeof channelModel === "string") {
channelModel = channelModel.split(",");
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 { id: model, group: '自定义：点击或回车输入' };
});
return modelList;
}
@ -243,24 +212,20 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
let res = await API.get(`/api/channel/${channelId}`);
const { success, message, data } = res.data;
if (success) {
if (data.models === "") {
if (data.models === '') {
data.models = [];
} else {
data.models = initialModel(data.models);
}
if (data.group === "") {
if (data.group === '') {
data.groups = [];
} else {
data.groups = data.group.split(",");
data.groups = data.group.split(',');
}
if (data.model_mapping !== "") {
data.model_mapping = JSON.stringify(
JSON.parse(data.model_mapping),
null,
2
);
if (data.model_mapping !== '') {
data.model_mapping = JSON.stringify(JSON.parse(data.model_mapping), null, 2);
}
data.base_url = data.base_url ?? "";
data.base_url = data.base_url ?? '';
data.is_edit = true;
initChannel(data.type);
setInitialInput(data);
@ -286,45 +251,25 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
}, [channelId]);
return (
<Dialog open={open} onClose={onCancel} fullWidth maxWidth={"md"}>
<Dialog open={open} onClose={onCancel} fullWidth maxWidth={'md'}>
<DialogTitle
sx={{
margin: "0px",
margin: '0px',
fontWeight: 700,
lineHeight: "1.55556",
padding: "24px",
fontSize: "1.125rem",
lineHeight: '1.55556',
padding: '24px',
fontSize: '1.125rem'
}}
>
{channelId ? "编辑渠道" : "新建渠道"}
{channelId ? '编辑渠道' : '新建渠道'}
</DialogTitle>
<Divider />
<DialogContent>
<Formik
initialValues={initialInput}
enableReinitialize
validationSchema={validationSchema}
onSubmit={submit}
>
{({
errors,
handleBlur,
handleChange,
handleSubmit,
isSubmitting,
touched,
values,
setFieldValue,
}) => (
<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>
<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}
@ -338,9 +283,9 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
MenuProps={{
PaperProps: {
style: {
maxHeight: 200,
},
},
maxHeight: 200
}
}
}}
>
{Object.values(CHANNEL_OPTIONS)
@ -360,21 +305,12 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.type}
</FormHelperText>
) : (
<FormHelperText id="helper-tex-channel-type-label">
{" "}
{inputPrompt.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>
<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}
@ -383,7 +319,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
name="name"
onBlur={handleBlur}
onChange={handleChange}
inputProps={{ autoComplete: "name" }}
inputProps={{ autoComplete: 'name' }}
aria-describedby="helper-text-channel-name-label"
/>
{touched.name && errors.name ? (
@ -391,21 +327,12 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.name}
</FormHelperText>
) : (
<FormHelperText id="helper-tex-channel-name-label">
{" "}
{inputPrompt.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>
<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}
@ -422,22 +349,13 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.base_url}
</FormHelperText>
) : (
<FormHelperText id="helper-tex-channel-base_url-label">
{" "}
{inputPrompt.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>
<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}
@ -454,10 +372,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.other}
</FormHelperText>
) : (
<FormHelperText id="helper-tex-channel-other-label">
{" "}
{inputPrompt.other}{" "}
</FormHelperText>
<FormHelperText id="helper-tex-channel-other-label"> {inputPrompt.other} </FormHelperText>
)}
</FormControl>
)}
@ -471,22 +386,15 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
onChange={(e, value) => {
const event = {
target: {
name: "groups",
value: value,
},
name: 'groups',
value: value
}
};
handleChange(event);
}}
onBlur={handleBlur}
filterSelectedOptions
renderInput={(params) => (
<TextField
{...params}
name="groups"
error={Boolean(errors.groups)}
label={inputLabel.groups}
/>
)}
renderInput={(params) => <TextField {...params} name="groups" error={Boolean(errors.groups)} label={inputLabel.groups} />}
aria-describedby="helper-text-channel-groups-label"
/>
{errors.groups ? (
@ -494,10 +402,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.groups}
</FormHelperText>
) : (
<FormHelperText id="helper-tex-channel-groups-label">
{" "}
{inputPrompt.groups}{" "}
</FormHelperText>
<FormHelperText id="helper-tex-channel-groups-label"> {inputPrompt.groups} </FormHelperText>
)}
</FormControl>
@ -511,30 +416,19 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
onChange={(e, value) => {
const event = {
target: {
name: "models",
value: value.map((item) =>
typeof item === "string"
? { id: item, group: "自定义：点击或回车输入" }
: item
),
},
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}
/>
)}
renderInput={(params) => <TextField {...params} name="models" error={Boolean(errors.models)} label={inputLabel.models} />}
groupBy={(option) => option.group}
getOptionLabel={(option) => {
if (typeof option === "string") {
if (typeof option === 'string') {
return option;
}
if (option.inputValue) {
@ -545,25 +439,18 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
filterOptions={(options, params) => {
const filtered = filter(options, params);
const { inputValue } = params;
const isExisting = options.some(
(option) => inputValue === option.id
);
if (inputValue !== "" && !isExisting) {
const isExisting = options.some((option) => inputValue === option.id);
if (inputValue !== '' && !isExisting) {
filtered.push({
id: inputValue,
group: "自定义：点击或回车输入",
group: '自定义：点击或回车输入'
});
}
return filtered;
}}
renderOption={(props, option, { selected }) => (
<li {...props}>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
<Checkbox icon={icon} checkedIcon={checkedIcon} style={{ marginRight: 8 }} checked={selected} />
{option.id}
</li>
)}
@ -573,47 +460,35 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.models}
</FormHelperText>
) : (
<FormHelperText id="helper-tex-channel-models-label">
{" "}
{inputPrompt.models}{" "}
</FormHelperText>
<FormHelperText id="helper-tex-channel-models-label"> {inputPrompt.models} </FormHelperText>
)}
</FormControl>
<Container
sx={{
textAlign: "right",
textAlign: 'right'
}}
>
<ButtonGroup
variant="outlined"
aria-label="small outlined primary button group"
>
<ButtonGroup variant="outlined" aria-label="small outlined primary button group">
<Button
onClick={() => {
setFieldValue("models", basicModels(values.type));
setFieldValue('models', initialModel(basicModels));
}}
>
填入渠道支持模型
填入相关模型
</Button>
<Button
onClick={() => {
setFieldValue("models", modelOptions);
setFieldValue('models', modelOptions);
}}
>
填入所有模型
</Button>
</ButtonGroup>
</Container>
<FormControl
fullWidth
error={Boolean(touched.key && errors.key)}
sx={{ ...theme.typography.otherInput }}
>
<FormControl fullWidth error={Boolean(touched.key && errors.key)} sx={{ ...theme.typography.otherInput }}>
{!batchAdd ? (
<>
<InputLabel htmlFor="channel-key-label">
{inputLabel.key}
</InputLabel>
<InputLabel htmlFor="channel-key-label">{inputLabel.key}</InputLabel>
<OutlinedInput
id="channel-key-label"
label={inputLabel.key}
@ -637,7 +512,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
onChange={handleChange}
aria-describedby="helper-text-channel-key-label"
minRows={5}
placeholder={inputPrompt.key + "，一行一个密钥"}
placeholder={inputPrompt.key + '，一行一个密钥'}
/>
)}
@ -646,30 +521,20 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.key}
</FormHelperText>
) : (
<FormHelperText id="helper-tex-channel-key-label">
{" "}
{inputPrompt.key}{" "}
</FormHelperText>
<FormHelperText id="helper-tex-channel-key-label"> {inputPrompt.key} </FormHelperText>
)}
</FormControl>
{channelId === 0 && (
<Container
sx={{
textAlign: "right",
textAlign: 'right'
}}
>
<Switch
checked={batchAdd}
onChange={(e) => setBatchAdd(e.target.checked)}
/>
<Switch checked={batchAdd} onChange={(e) => setBatchAdd(e.target.checked)} />
批量添加
</Container>
)}
<FormControl
fullWidth
error={Boolean(touched.model_mapping && errors.model_mapping)}
sx={{ ...theme.typography.otherInput }}
>
<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
@ -684,28 +549,16 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
placeholder={inputPrompt.model_mapping}
/>
{touched.model_mapping && errors.model_mapping ? (
<FormHelperText
error
id="helper-tex-channel-model_mapping-label"
>
<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>
<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 disableElevation disabled={isSubmitting} type="submit" variant="contained" color="primary">
提交
</Button>
</DialogActions>
@ -723,5 +576,5 @@ EditModal.propTypes = {
open: PropTypes.bool,
channelId: PropTypes.number,
onCancel: PropTypes.func,
onOk: PropTypes.func,
onOk: PropTypes.func
};

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

@ -1,5 +1,5 @@
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 Table from '@mui/material/Table';
@ -8,7 +8,6 @@ import TableContainer from '@mui/material/TableContainer';
import PerfectScrollbar from 'react-perfect-scrollbar';
import TablePagination from '@mui/material/TablePagination';
import LinearProgress from '@mui/material/LinearProgress';
import Alert from '@mui/material/Alert';
import ButtonGroup from '@mui/material/ButtonGroup';
import Toolbar from '@mui/material/Toolbar';
import useMediaQuery from '@mui/material/useMediaQuery';
@ -189,6 +188,7 @@ export default function ChannelPage() {
.catch((reason) => {
showError(reason);
});
loadChannelModels().then();
}, []);
return (
@ -200,7 +200,7 @@ export default function ChannelPage() {
</Button>
</Stack>
<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，名称和密钥 ...'} />
</Box>
<Toolbar
@ -214,7 +214,7 @@ export default function ChannelPage() {
>
<Container>
{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>