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

💄 improve: Enhanced user experience by improving the channel selection box

Browse Source
This commit is contained in:
MartialBE 2024-01-10 22:31:08 +08:00 committed by Buer
parent eaedd255ef
commit a20dee02a7
1 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/views/Channel/component/EditModal.js
View File

@ -20,13 +20,19 @@ import {
ButtonGroup, ButtonGroup,
Container, Container,
Autocomplete, Autocomplete,
FormHelperText FormHelperText,
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 CheckBoxIcon from '@mui/icons-material/CheckBox';
const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;
const filter = createFilterOptions(); const filter = createFilterOptions();
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
@ -129,8 +135,17 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
const fetchModels = async () => { const fetchModels = async () => {
try { try {
let res = await API.get(`/api/channel/models`); let res = await API.get(`/api/channel/models`);
const { data } = res.data;
// 先对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( setModelOptions(
res.data.data.map((model) => { data.map((model) => {
return { return {
id: model.id, id: model.id,
group: model.owned_by group: model.owned_by
@ -214,6 +229,8 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
if (data.model_mapping !== '') { if (data.model_mapping !== '') {
data.model_mapping = JSON.stringify(JSON.parse(data.model_mapping), null, 2); data.model_mapping = JSON.stringify(JSON.parse(data.model_mapping), null, 2);
} }
data.base_url = data.base_url ?? '';
data.is_edit = true; data.is_edit = true;
initChannel(data.type); initChannel(data.type);
setInitialInput(data); setInitialInput(data);
@ -225,6 +242,9 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
useEffect(() => { useEffect(() => {
fetchGroups().then(); fetchGroups().then();
fetchModels().then(); fetchModels().then();
}, []);
useEffect(() => {
if (channelId) { if (channelId) {
loadChannel().then(); loadChannel().then();
} else { } else {
@ -395,7 +415,8 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
handleChange(event); handleChange(event);
}} }}
onBlur={handleBlur} onBlur={handleBlur}
filterSelectedOptions // 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} groupBy={(option) => option.group}
getOptionLabel={(option) => { getOptionLabel={(option) => {
@ -419,6 +440,12 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
} }
return filtered; return filtered;
}} }}
renderOption={(props, option, { selected }) => (
<li {...props}>
<Checkbox icon={icon} checkedIcon={checkedIcon} style={{ marginRight: 8 }} checked={selected} />
{option.id}
</li>
)}
/> />
{errors.models ? ( {errors.models ? (
<FormHelperText error id="helper-tex-channel-models-label"> <FormHelperText error id="helper-tex-channel-models-label">