perf: refresh page.img mode.collection filter

This commit is contained in:
archer
2023-05-09 11:13:33 +08:00
parent 18e0212d27
commit de6ac0f589
11 changed files with 90 additions and 69 deletions

View File

@@ -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 />}
</>