From cf4e33cb12d67bdd3427b6fcee33d771b9cf8d06 Mon Sep 17 00:00:00 2001
From: Buer <42402987+MartialBE@users.noreply.github.com>
Date: Sun, 14 Jan 2024 13:22:31 +0800
Subject: [PATCH] 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
---
 web/berry/src/layout/MinimalLayout/index.js   |  2 +-
 web/berry/src/ui-component/Logo.js            |  2 +-
 .../src/views/Channel/component/EditModal.js  | 39 +++++++++++++++++--
 .../src/views/Token/component/TableRow.js     |  2 +-
 4 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/web/berry/src/layout/MinimalLayout/index.js b/web/berry/src/layout/MinimalLayout/index.js
index 084ee6ace9..c2919c6d79 100644
--- a/web/berry/src/layout/MinimalLayout/index.js
+++ b/web/berry/src/layout/MinimalLayout/index.js
@@ -26,7 +26,7 @@ const MinimalLayout = () => {
           <Header />
         </Toolbar>
       </AppBar>
-      <Box sx={{ flex: '1 1 auto', overflow: 'auto' }} paddingTop={'64px'}>
+      <Box sx={{ flex: '1 1 auto', overflow: 'auto' }} marginTop={'80px'}>
         <Outlet />
       </Box>
       <Box sx={{ flex: 'none' }}>
diff --git a/web/berry/src/ui-component/Logo.js b/web/berry/src/ui-component/Logo.js
index 9c65825b76..a34fe8954c 100644
--- a/web/berry/src/ui-component/Logo.js
+++ b/web/berry/src/ui-component/Logo.js
@@ -15,7 +15,7 @@ import { useSelector } from 'react-redux';
 const Logo = () => {
   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;
diff --git a/web/berry/src/views/Channel/component/EditModal.js b/web/berry/src/views/Channel/component/EditModal.js
index f99af8fc9e..07111c9756 100644
--- a/web/berry/src/views/Channel/component/EditModal.js
+++ b/web/berry/src/views/Channel/component/EditModal.js
@@ -21,12 +21,18 @@ import {
   Container,
   Autocomplete,
   FormHelperText,
+  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({
@@ -41,7 +47,7 @@ const validationSchema = Yup.object().shape({
   models: Yup.array().min(1, "模型 不能为空"),
   groups: Yup.array().min(1, "用户组 不能为空"),
   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 是必需的
     otherwise: Yup.string(), // 在其他情况下，base_url 可以是任意字符串
   }),
@@ -144,8 +150,23 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
   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(
-        res.data.data.map((model) => {
+         data.map((model) => {
           return {
             id: model.id,
             group: model.owned_by,
@@ -237,6 +258,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
           2
         );
       }
+      data.base_url = data.base_url ?? '';
       data.is_edit = true;
       initChannel(data.type);
       setInitialInput(data);
@@ -248,12 +270,16 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
   useEffect(() => {
     fetchGroups().then();
     fetchModels().then();
+  }, []);
+
+  useEffect(() => {
     if (channelId) {
       loadChannel().then();
     } else {
       initChannel(1);
       setInitialInput({ ...defaultConfig.input, is_edit: false });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [channelId]);
 
   return (
@@ -489,7 +515,8 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                     handleChange(event);
                   }}
                   onBlur={handleBlur}
-                  filterSelectedOptions
+                  // filterSelectedOptions
+                  disableCloseOnSelect
                   renderInput={(params) => (
                     <TextField
                       {...params}
@@ -522,6 +549,12 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                     }
                     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">
diff --git a/web/berry/src/views/Token/component/TableRow.js b/web/berry/src/views/Token/component/TableRow.js
index 8c15a46479..323ead8621 100644
--- a/web/berry/src/views/Token/component/TableRow.js
+++ b/web/berry/src/views/Token/component/TableRow.js
@@ -192,7 +192,7 @@ export default function TokensTableRow({ item, manageToken, handleOpenModal, set
               id={`switch-${item.id}`}
               checked={statusSwitch === 1}
               onChange={handleStatus}
-              disabled={statusSwitch !== 1 && statusSwitch !== 2}
+              // disabled={statusSwitch !== 1 && statusSwitch !== 2}
             />
           </Tooltip>
         </TableCell>