perf: refresh page.img mode.collection filter
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useEffect } from 'react';
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import { Box, useColorMode, Flex } from '@chakra-ui/react';
|
||||
import Navbar from './navbar';
|
||||
import NavbarPhone from './navbarPhone';
|
||||
@@ -11,6 +11,9 @@ import { useGlobalStore } from '@/store/global';
|
||||
const pcUnShowLayoutRoute: Record<string, boolean> = {
|
||||
'/login': true
|
||||
};
|
||||
const phoneUnShowLayoutRoute: Record<string, boolean> = {
|
||||
'/login': true
|
||||
};
|
||||
|
||||
const Layout = ({ children, isPcDevice }: { children: JSX.Element; isPcDevice: boolean }) => {
|
||||
const { isPc } = useScreen({ defaultIsPc: isPcDevice });
|
||||
@@ -19,56 +22,45 @@ const Layout = ({ children, isPcDevice }: { children: JSX.Element; isPcDevice: b
|
||||
const { Loading } = useLoading({ defaultLoading: true });
|
||||
const { loading } = useGlobalStore();
|
||||
|
||||
const isChatPage = useMemo(
|
||||
() => router.pathname === '/chat' && Object.values(router.query).join('').length !== 0,
|
||||
[router.pathname, router.query]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (colorMode === 'dark' && router.pathname !== '/chat') {
|
||||
setColorMode('light');
|
||||
}
|
||||
}, [colorMode, router.pathname, setColorMode]);
|
||||
|
||||
const RenderPc = useCallback(
|
||||
() =>
|
||||
pcUnShowLayoutRoute[router.pathname] ? (
|
||||
<Auth>{children}</Auth>
|
||||
) : (
|
||||
<>
|
||||
<Box h={'100%'} position={'fixed'} left={0} top={0} w={'60px'}>
|
||||
<Navbar />
|
||||
</Box>
|
||||
<Box h={'100%'} ml={'60px'} overflow={'overlay'}>
|
||||
<Auth>{children}</Auth>
|
||||
</Box>
|
||||
</>
|
||||
),
|
||||
[children, router.pathname]
|
||||
);
|
||||
|
||||
const RenderPhone = useCallback(() => {
|
||||
const phoneUnShowLayoutRoute: Record<string, boolean> = {
|
||||
'/login': true
|
||||
};
|
||||
|
||||
const isChatPage =
|
||||
router.pathname === '/chat' && Object.values(router.query).join('').length !== 0;
|
||||
|
||||
if (phoneUnShowLayoutRoute[router.pathname] || isChatPage) {
|
||||
return <Auth>{children}</Auth>;
|
||||
}
|
||||
return (
|
||||
<Flex h={'100%'} flexDirection={'column'}>
|
||||
<Box flex={'1 0 0'} h={0} overflow={'overlay'}>
|
||||
<Auth>{children}</Auth>
|
||||
</Box>
|
||||
<Box h={'50px'} borderTop={'1px solid rgba(0,0,0,0.1)'}>
|
||||
<NavbarPhone />
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
}, [children, router]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box h={'100%'} overflow={'overlay'} bg={'gray.100'}>
|
||||
{isPc ? <RenderPc /> : <RenderPhone />}
|
||||
{isPc ? (
|
||||
pcUnShowLayoutRoute[router.pathname] ? (
|
||||
<Auth>{children}</Auth>
|
||||
) : (
|
||||
<>
|
||||
<Box h={'100%'} position={'fixed'} left={0} top={0} w={'60px'}>
|
||||
<Navbar />
|
||||
</Box>
|
||||
<Box h={'100%'} ml={'60px'} overflow={'overlay'}>
|
||||
<Auth>{children}</Auth>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
) : phoneUnShowLayoutRoute[router.pathname] || isChatPage ? (
|
||||
<Auth>{children}</Auth>
|
||||
) : (
|
||||
<Flex h={'100%'} flexDirection={'column'}>
|
||||
<Box flex={'1 0 0'} h={0} overflow={'overlay'}>
|
||||
<Auth>{children}</Auth>
|
||||
</Box>
|
||||
<Box h={'50px'} borderTop={'1px solid rgba(0,0,0,0.1)'}>
|
||||
<NavbarPhone />
|
||||
</Box>
|
||||
</Flex>
|
||||
)}
|
||||
</Box>
|
||||
{loading && <Loading />}
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user