feat: berry theme update & bug fix (#1282)

* ⚡️ improve: delete google fonts * ⚡️ improve: Optimized priority input handling in TableRow component. * 🔖 chore: channel batch add * ✨ feat: add dark mod * ✨ feat: support token limit ip range and models * ✨ feat: add MessagePusher * ✨ feat: add lark login
songquanpeng · Apr 6, 2024 · 3fe2863 · 3fe2863
1 parent acf8cb6
commit 3fe2863
Show file tree

Hide file tree

Showing 40 changed files with 936 additions and 281 deletions.
diff --git a/web/berry/.prettierrc b/web/berry/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "bracketSpacing": true,
+  "printWidth": 140,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "useTabs": false
+}
diff --git a/web/berry/public/index.html b/web/berry/public/index.html
@@ -11,11 +11,6 @@
       name="description"
       content="OpenAI 接口聚合管理，支持多种渠道包括 Azure，可用于二次分发管理 key，仅单可执行文件，已打包好 Docker 镜像，一键部署，开箱即用"
     />
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"
-      rel="stylesheet"
-    />
   </head>
 
   <body>

diff --git a/web/berry/src/App.js b/web/berry/src/App.js
@@ -1,8 +1,9 @@
-import { useSelector } from 'react-redux';
+import { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 
 import { ThemeProvider } from '@mui/material/styles';
 import { CssBaseline, StyledEngineProvider } from '@mui/material';
-
+import { SET_THEME } from 'store/actions';
 // routing
 import Routes from 'routes';
 
@@ -20,8 +21,16 @@ import { SnackbarProvider } from 'notistack';
 // ==============================|| APP ||============================== //
 
 const App = () => {
+  const dispatch = useDispatch();
   const customization = useSelector((state) => state.customization);
 
+  useEffect(() => {
+    const storedTheme = localStorage.getItem('theme');
+    if (storedTheme) {
+      dispatch({ type: SET_THEME, theme: storedTheme });
+    }
+  }, [dispatch]);
+
   return (
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={themes(customization)}>

diff --git a/web/berry/src/assets/fonts/roboto-500.woff2 b/web/berry/src/assets/fonts/roboto-500.woff2
diff --git a/web/berry/src/assets/fonts/roboto-700.woff2 b/web/berry/src/assets/fonts/roboto-700.woff2
diff --git a/web/berry/src/assets/fonts/roboto-regular.woff2 b/web/berry/src/assets/fonts/roboto-regular.woff2
diff --git a/web/berry/src/assets/images/icons/lark.svg b/web/berry/src/assets/images/icons/lark.svg
diff --git a/web/berry/src/assets/images/logo-white.svg b/web/berry/src/assets/images/logo-white.svg
diff --git a/web/berry/src/assets/scss/_themes-vars.module.scss b/web/berry/src/assets/scss/_themes-vars.module.scss
@@ -46,11 +46,16 @@ $grey600: #4b5565;
 $grey700: #364152;
 $grey900: #121926;
 
+$tableBackground: #f4f6f8;
+$tableBorderBottom: #f1f3f4;
+
 // ==============================|| DARK THEME VARIANTS ||============================== //
 
 // paper & background
 $darkBackground: #1a223f; // level 3
 $darkPaper: #111936; // level 4
+$darkDivider: rgba(227, 232, 239, 0.2);
+$darkSelectedBack : rgba(124, 77, 255, 0.15);
 
 // dark 800 & 900
 $darkLevel1: #29314f; // level 1
@@ -154,4 +159,9 @@ $darkTextSecondary: #8492c4;
   darkSecondaryDark: $darkSecondaryDark;
   darkSecondary200: $darkSecondary200;
   darkSecondary800: $darkSecondary800;
+
+  darkDivider: $darkDivider;
+  darkSelectedBack: $darkSelectedBack;
+  tableBackground: $tableBackground;
+  tableBorderBottom: $tableBorderBottom;
 }
diff --git a/web/berry/src/assets/scss/fonts.scss b/web/berry/src/assets/scss/fonts.scss
@@ -0,0 +1,32 @@
+
+/* roboto-regular */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Roboto'), url('../fonts/roboto-regular.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
+  /* roboto-500 */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: local('Roboto'), url('../fonts/roboto-500.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+
+/* roboto-700 */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Roboto'), url('../fonts/roboto-700.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
diff --git a/web/berry/src/assets/scss/style.scss b/web/berry/src/assets/scss/style.scss
@@ -1,3 +1,4 @@
+@import 'fonts.scss';
 // color variants
 @import 'themes-vars.module.scss';
 

diff --git a/web/berry/src/hooks/useLogin.js b/web/berry/src/hooks/useLogin.js
@@ -48,6 +48,28 @@ const useLogin = () => {
     }
   };
 
+  const larkLogin = async (code, state) => {
+    try {
+      const res = await API.get(`/api/oauth/lark?code=${code}&state=${state}`);
+      const { success, message, data } = res.data;
+      if (success) {
+        if (message === 'bind') {
+          showSuccess('绑定成功！');
+          navigate('/panel');
+        } else {
+          dispatch({ type: LOGIN, payload: data });
+          localStorage.setItem('user', JSON.stringify(data));
+          showSuccess('登录成功！');
+          navigate('/panel');
+        }
+      }
+      return { success, message };
+    } catch (err) {
+      // 请求失败，设置错误信息
+      return { success: false, message: '' };
+    }
+  };
+
   const wechatLogin = async (code) => {
     try {
       const res = await API.get(`/api/oauth/wechat?code=${code}`);
@@ -72,7 +94,7 @@ const useLogin = () => {
     navigate('/');
   };
 
-  return { login, logout, githubLogin, wechatLogin };
+  return { login, logout, githubLogin, wechatLogin, larkLogin };
 };
 
 export default useLogin;
diff --git a/web/berry/src/layout/MainLayout/Header/ProfileSection/index.js b/web/berry/src/layout/MainLayout/Header/ProfileSection/index.js
@@ -71,8 +71,8 @@ const ProfileSection = () => {
           alignItems: 'center',
           borderRadius: '27px',
           transition: 'all .2s ease-in-out',
-          borderColor: theme.palette.primary.light,
-          backgroundColor: theme.palette.primary.light,
+          borderColor: theme.typography.menuChip.background,
+          backgroundColor: theme.typography.menuChip.background,
           '&[aria-controls="menu-list-grow"], &:hover': {
             borderColor: theme.palette.primary.main,
             background: `${theme.palette.primary.main}!important`,

diff --git a/web/berry/src/layout/MainLayout/Header/index.js b/web/berry/src/layout/MainLayout/Header/index.js
@@ -7,6 +7,7 @@ import { Avatar, Box, ButtonBase } from '@mui/material';
 // project imports
 import LogoSection from '../LogoSection';
 import ProfileSection from './ProfileSection';
+import ThemeButton from 'ui-component/ThemeButton';
 
 // assets
 import { IconMenu2 } from '@tabler/icons-react';
@@ -37,9 +38,8 @@ const Header = ({ handleLeftDrawerToggle }) => {
             sx={{
               ...theme.typography.commonAvatar,
               ...theme.typography.mediumAvatar,
+              ...theme.typography.menuButton,
               transition: 'all .2s ease-in-out',
-              background: theme.palette.secondary.light,
-              color: theme.palette.secondary.dark,
               '&:hover': {
                 background: theme.palette.secondary.dark,
                 color: theme.palette.secondary.light
@@ -55,7 +55,7 @@ const Header = ({ handleLeftDrawerToggle }) => {
 
       <Box sx={{ flexGrow: 1 }} />
       <Box sx={{ flexGrow: 1 }} />
-
+      <ThemeButton />
       <ProfileSection />
     </>
   );

diff --git a/web/berry/src/layout/MainLayout/Sidebar/MenuCard/index.js b/web/berry/src/layout/MainLayout/Sidebar/MenuCard/index.js
@@ -36,7 +36,7 @@ import { useNavigate } from 'react-router-dom';
 // }));
 
 const CardStyle = styled(Card)(({ theme }) => ({
-  background: theme.palette.primary.light,
+  background: theme.typography.menuChip.background,
   marginBottom: '22px',
   overflow: 'hidden',
   position: 'relative',
@@ -121,7 +121,6 @@ const MenuCard = () => {
             />
           </ListItem>
         </List>
-        {/* <LinearProgressWithLabel value={80} /> */}
       </CardContent>
     </CardStyle>
   );

diff --git a/web/berry/src/layout/MainLayout/Sidebar/index.js b/web/berry/src/layout/MainLayout/Sidebar/index.js
@@ -39,7 +39,13 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
           <MenuList />
           <MenuCard />
           <Stack direction="row" justifyContent="center" sx={{ mb: 2 }}>
-            <Chip label={process.env.REACT_APP_VERSION} disabled chipcolor="secondary" size="small" sx={{ cursor: 'pointer' }} />
+            <Chip
+              label={process.env.REACT_APP_VERSION || '未知版本号'}
+              disabled
+              chipcolor="secondary"
+              size="small"
+              sx={{ cursor: 'pointer' }}
+            />
           </Stack>
         </PerfectScrollbar>
       </BrowserView>
@@ -48,7 +54,13 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
           <MenuList />
           <MenuCard />
           <Stack direction="row" justifyContent="center" sx={{ mb: 2 }}>
-            <Chip label={process.env.REACT_APP_VERSION} disabled chipcolor="secondary" size="small" sx={{ cursor: 'pointer' }} />
+            <Chip
+              label={process.env.REACT_APP_VERSION || '未知版本号'}
+              disabled
+              chipcolor="secondary"
+              size="small"
+              sx={{ cursor: 'pointer' }}
+            />
           </Stack>
         </Box>
       </MobileView>