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

README.md

@@ -414,6 +414,9 @@ https://openai.justsong.cn
 8. 升级之前数据库需要做变更吗？
    + 一般情况下不需要，系统将在初始化的时候自动调整。
    + 如果需要的话，我会在更新日志中说明，并给出脚本。
+9. 手动修改数据库后报错：`数据库一致性已被破坏，请联系管理员`？
+   + 这是检测到 ability 表里有些记录的通道 id 是不存在的，这大概率是因为你删了 channel 表里的记录但是没有同步在 ability 表里清理无效的通道。
+   + 对于每一个通道，其所支持的模型都需要有一个专门的 ability 表的记录，表示该通道支持该模型。
 
 ## 相关项目
 * [FastGPT](https://github.com/labring/FastGPT): 基于 LLM 大语言模型的知识库问答系统

common/constants.go

@@ -100,7 +100,7 @@ var RelayTimeout = GetOrDefault("RELAY_TIMEOUT", 0) // unit is second
 
 var GeminiSafetySetting = GetOrDefaultString("GEMINI_SAFETY_SETTING", "BLOCK_NONE")
 
-var Theme = "default"
+var Theme = GetOrDefaultString("THEME", "default")
 var ValidThemes = map[string]bool{
 	"default": true,
 	"berry":   true,

web/README.md

@@ -8,7 +8,9 @@
 
 1. 在 `web` 文件夹下新建一个文件夹，文件夹名为主题名。
 2. 把你的主题文件放到这个文件夹下。
-3. 修改 `package.json` 文件，把 `build` 命令改为：`"build": "react-scripts build && mv -f build ../build/default"`，其中 `default` 为你的主题名。
+3. 修改你的 `package.json` 文件，把 `build` 命令改为：`"build": "react-scripts build && mv -f build ../build/default"`，其中 `default` 为你的主题名。
+4. 修改 `common/constants.go` 中的 `ValidThemes`，把你的主题名称注册进去。
+5. 修改 `web/THEMES` 文件，这里也需要同步修改。
 
 ## 主题列表
 

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' }}>

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;

web/berry/src/views/Authentication/AuthForms/AuthLogin.js

@@ -92,7 +92,7 @@ const LoginForm = ({ ...others }) => {
                   <Box sx={{ mr: { xs: 1, sm: 2, width: 20 }, display: 'flex', alignItems: 'center' }}>
                     <img src={Github} alt="github" width={25} height={25} style={{ marginRight: matchDownSM ? 8 : 16 }} />
                   </Box>
-                  使用 Github 登录
+                  使用 GitHub 登录
                 </Button>
               </AnimateButton>
             </Grid>
@@ -115,7 +115,7 @@ const LoginForm = ({ ...others }) => {
                   <Box sx={{ mr: { xs: 1, sm: 2, width: 20 }, display: 'flex', alignItems: 'center' }}>
                     <img src={Wechat} alt="Wechat" width={25} height={25} style={{ marginRight: matchDownSM ? 8 : 16 }} />
                   </Box>
-                  使用 Wechat 登录
+                  使用微信登录
                 </Button>
               </AnimateButton>
               <WechatModal open={openWechat} handleClose={handleWechatClose} wechatLogin={wechatLogin} qrCode={siteInfo.wechat_qrcode} />

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">

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>