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

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`,

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 />
     </>
   );

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>
   );

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>

web/berry/src/layout/MinimalLayout/Header/index.js

@@ -1,10 +1,30 @@
 // material-ui
-import { useTheme } from "@mui/material/styles";
-import { Box, Button, Stack } from "@mui/material";
-import LogoSection from "layout/MainLayout/LogoSection";
-import { Link } from "react-router-dom";
-import { useLocation } from "react-router-dom";
-import { useSelector } from "react-redux";
+import { useState } from 'react';
+import { useTheme } from '@mui/material/styles';
+import {
+  Box,
+  Button,
+  Stack,
+  Popper,
+  IconButton,
+  List,
+  ListItemButton,
+  Paper,
+  ListItemText,
+  Typography,
+  Divider,
+  ClickAwayListener
+} from '@mui/material';
+import LogoSection from 'layout/MainLayout/LogoSection';
+import { Link } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import ThemeButton from 'ui-component/ThemeButton';
+import ProfileSection from 'layout/MainLayout/Header/ProfileSection';
+import { IconMenu2 } from '@tabler/icons-react';
+import Transitions from 'ui-component/extended/Transitions';
+import MainCard from 'ui-component/cards/MainCard';
+import { useMediaQuery } from '@mui/material';
 
 // ==============================|| MAIN NAVBAR / HEADER ||============================== //
 
@@ -12,16 +32,26 @@ const Header = () => {
   const theme = useTheme();
   const { pathname } = useLocation();
   const account = useSelector((state) => state.account);
+  const [open, setOpen] = useState(null);
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const handleOpenMenu = (event) => {
+    setOpen(open ? null : event.currentTarget);
+  };
+
+  const handleCloseMenu = () => {
+    setOpen(null);
+  };
 
   return (
     <>
       <Box
         sx={{
           width: 228,
-          display: "flex",
-          [theme.breakpoints.down("md")]: {
-            width: "auto",
-          },
+          display: 'flex',
+          [theme.breakpoints.down('md')]: {
+            width: 'auto'
+          }
         }}
       >
         <Box component="span" sx={{ flexGrow: 1 }}>
@@ -31,43 +61,99 @@ const Header = () => {
 
       <Box sx={{ flexGrow: 1 }} />
       <Box sx={{ flexGrow: 1 }} />
-      <Stack spacing={2} direction="row">
-        <Button
-          component={Link}
-          variant="text"
-          to="/"
-          color={pathname === "/" ? "primary" : "inherit"}
-        >
-          首页
-        </Button>
-        <Button
-          component={Link}
-          variant="text"
-          to="/about"
-          color={pathname === "/about" ? "primary" : "inherit"}
-        >
-          关于
-        </Button>
-        {account.user ? (
-          <Button
-            component={Link}
-            variant="contained"
-            to="/panel"
-            color="primary"
-          >
-            控制台
-          </Button>
+      <Stack spacing={2} direction="row" justifyContent="center" alignItems="center">
+        {isMobile ? (
+          <>
+            <ThemeButton />
+            <IconButton onClick={handleOpenMenu}>
+              <IconMenu2 />
+            </IconButton>
+          </>
         ) : (
-          <Button
-            component={Link}
-            variant="contained"
-            to="/login"
-            color="primary"
-          >
-            登入
-          </Button>
+          <>
+            <Button component={Link} variant="text" to="/" color={pathname === '/' ? 'primary' : 'inherit'}>
+              首页
+            </Button>
+            <Button component={Link} variant="text" to="/about" color={pathname === '/about' ? 'primary' : 'inherit'}>
+              关于
+            </Button>
+            <ThemeButton />
+            {account.user ? (
+              <>
+                <Button component={Link} variant="contained" to="/panel" color="primary">
+                  控制台
+                </Button>
+                <ProfileSection />
+              </>
+            ) : (
+              <Button component={Link} variant="contained" to="/login" color="primary">
+                登录
+              </Button>
+            )}
+          </>
         )}
       </Stack>
+
+      <Popper
+        open={!!open}
+        anchorEl={open}
+        transition
+        disablePortal
+        popperOptions={{
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, 14]
+              }
+            }
+          ]
+        }}
+        style={{ width: '100vw' }}
+      >
+        {({ TransitionProps }) => (
+          <Transitions in={open} {...TransitionProps}>
+            <ClickAwayListener onClickAway={handleCloseMenu}>
+              <Paper style={{ width: '100%' }}>
+                <MainCard border={false} elevation={16} content={false} boxShadow shadow={theme.shadows[16]}>
+                  <List
+                    component="nav"
+                    sx={{
+                      width: '100%',
+                      maxWidth: '100%',
+                      minWidth: '100%',
+                      backgroundColor: theme.palette.background.paper,
+
+                      '& .MuiListItemButton-root': {
+                        mt: 0.5
+                      }
+                    }}
+                    onClick={handleCloseMenu}
+                  >
+                    <ListItemButton component={Link} variant="text" to="/">
+                      <ListItemText primary={<Typography variant="body2">首页</Typography>} />
+                    </ListItemButton>
+
+                    <ListItemButton component={Link} variant="text" to="/about">
+                      <ListItemText primary={<Typography variant="body2">关于</Typography>} />
+                    </ListItemButton>
+                    <Divider />
+                    {account.user ? (
+                      <ListItemButton component={Link} variant="contained" to="/panel" color="primary">
+                        控制台
+                      </ListItemButton>
+                    ) : (
+                      <ListItemButton component={Link} variant="contained" to="/login" color="primary">
+                        登录
+                      </ListItemButton>
+                    )}
+                  </List>
+                </MainCard>
+              </Paper>
+            </ClickAwayListener>
+          </Transitions>
+        )}
+      </Popper>
     </>
   );
 };

web/berry/src/layout/MinimalLayout/index.js

@@ -1,6 +1,6 @@
 import { Outlet } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
-import { AppBar, Box, CssBaseline, Toolbar } from '@mui/material';
+import { AppBar, Box, CssBaseline, Toolbar, Container } from '@mui/material';
 import Header from './Header';
 import Footer from 'ui-component/Footer';
 
@@ -22,9 +22,11 @@ const MinimalLayout = () => {
           flex: 'none'
         }}
       >
-        <Toolbar>
-          <Header />
-        </Toolbar>
+        <Container>
+          <Toolbar>
+            <Header />
+          </Toolbar>
+        </Container>
       </AppBar>
       <Box sx={{ flex: '1 1 auto', overflow: 'auto' }} marginTop={'80px'}>
         <Outlet />