fix: fix bugs with theme berry (#931)

* fix: home page & logo style issue

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

* fix: key cannot be activated after expiration
This commit is contained in:
Buer 2024-01-14 13:22:31 +08:00 committed by GitHub
parent 5d60305570
commit cf4e33cb12
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 39 additions and 6 deletions

View File

@ -26,7 +26,7 @@ const MinimalLayout = () => {
<Header /> <Header />
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Box sx={{ flex: '1 1 auto', overflow: 'auto' }} paddingTop={'64px'}> <Box sx={{ flex: '1 1 auto', overflow: 'auto' }} marginTop={'80px'}>
<Outlet /> <Outlet />
</Box> </Box>
<Box sx={{ flex: 'none' }}> <Box sx={{ flex: 'none' }}>

View File

@ -15,7 +15,7 @@ import { useSelector } from 'react-redux';
const Logo = () => { const Logo = () => {
const siteInfo = useSelector((state) => state.siteInfo); const siteInfo = useSelector((state) => state.siteInfo);
return <img src={siteInfo.logo || logo} alt={siteInfo.system_name} width="80" />; return <img src={siteInfo.logo || logo} alt={siteInfo.system_name} height="50" />;
}; };
export default Logo; export default Logo;

View File

@ -21,12 +21,18 @@ import {
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({
@ -41,7 +47,7 @@ const validationSchema = Yup.object().shape({
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, 24, 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 可以是任意字符串
}), }),
@ -144,8 +150,23 @@ 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.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( 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,
@ -237,6 +258,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
2 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);
@ -248,12 +270,16 @@ 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 {
initChannel(1); initChannel(1);
setInitialInput({ ...defaultConfig.input, is_edit: false }); setInitialInput({ ...defaultConfig.input, is_edit: false });
} }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [channelId]); }, [channelId]);
return ( return (
@ -489,7 +515,8 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
handleChange(event); handleChange(event);
}} }}
onBlur={handleBlur} onBlur={handleBlur}
filterSelectedOptions // filterSelectedOptions
disableCloseOnSelect
renderInput={(params) => ( renderInput={(params) => (
<TextField <TextField
{...params} {...params}
@ -522,6 +549,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">

View File

@ -192,7 +192,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>