From 451f234f685244913d4e6bed3133d405e96556ec Mon Sep 17 00:00:00 2001 From: archer <545436317@qq.com> Date: Thu, 11 May 2023 09:50:40 +0800 Subject: [PATCH] perf: ssr and iphone daapt --- src/components/Layout/index.tsx | 6 +++--- src/components/Loading/index.tsx | 22 ++++++++++++++++++++++ src/hooks/useLoading.tsx | 24 ++---------------------- src/pages/_app.tsx | 3 ++- src/pages/chat/index.tsx | 16 +++++++++++++--- src/pages/model/index.tsx | 6 +++++- src/pages/number/index.tsx | 16 +++++++++++++--- src/styles/reset.scss | 7 +++++++ 8 files changed, 67 insertions(+), 33 deletions(-) create mode 100644 src/components/Loading/index.tsx diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index d6e33a087..15a0d5992 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -1,12 +1,12 @@ import React, { useEffect, useMemo } from 'react'; import { Box, useColorMode, Flex } from '@chakra-ui/react'; -import Navbar from './navbar'; -import NavbarPhone from './navbarPhone'; import { useRouter } from 'next/router'; import { useScreen } from '@/hooks/useScreen'; import { useLoading } from '@/hooks/useLoading'; -import Auth from './auth'; import { useGlobalStore } from '@/store/global'; +import Auth from './auth'; +import Navbar from './navbar'; +import NavbarPhone from './navbarPhone'; const pcUnShowLayoutRoute: Record = { '/login': true diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx new file mode 100644 index 000000000..1352013fd --- /dev/null +++ b/src/components/Loading/index.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Spinner, Flex } from '@chakra-ui/react'; + +const Loading = ({ fixed = true }: { fixed?: boolean }) => { + return ( + + + + ); +}; + +export default Loading; diff --git a/src/hooks/useLoading.tsx b/src/hooks/useLoading.tsx index d6d13b056..64bbde086 100644 --- a/src/hooks/useLoading.tsx +++ b/src/hooks/useLoading.tsx @@ -1,32 +1,12 @@ import { useState, useCallback } from 'react'; -import { Spinner, Flex } from '@chakra-ui/react'; +import LoadingComponent from '@/components/Loading'; export const useLoading = (props?: { defaultLoading: boolean }) => { const [isLoading, setIsLoading] = useState(props?.defaultLoading || false); const Loading = useCallback( ({ loading, fixed = true }: { loading?: boolean; fixed?: boolean }): JSX.Element | null => { - return isLoading || loading ? ( - - - - ) : null; + return isLoading || loading ? : null; }, [isLoading] ); diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index e2d1fa3b3..a541441fa 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -45,9 +45,10 @@ export default function App({ Component, pageProps }: AppProps) { Fast GPT + diff --git a/src/pages/chat/index.tsx b/src/pages/chat/index.tsx index d981ddbec..c00f643d2 100644 --- a/src/pages/chat/index.tsx +++ b/src/pages/chat/index.tsx @@ -44,10 +44,20 @@ import { useLoading } from '@/hooks/useLoading'; import { fileDownload } from '@/utils/file'; import { htmlTemplate } from '@/constants/common'; import { useUserStore } from '@/store/user'; +import Loading from '@/components/Loading'; -const PhoneSliderBar = dynamic(() => import('./components/PhoneSliderBar')); -const History = dynamic(() => import('./components/History')); -const Empty = dynamic(() => import('./components/Empty')); +const PhoneSliderBar = dynamic(() => import('./components/PhoneSliderBar'), { + loading: () => , + ssr: false +}); +const History = dynamic(() => import('./components/History'), { + loading: () => , + ssr: false +}); +const Empty = dynamic(() => import('./components/Empty'), { + loading: () => , + ssr: false +}); import styles from './index.module.scss'; diff --git a/src/pages/model/index.tsx b/src/pages/model/index.tsx index 16ce37fe2..78d10f6de 100644 --- a/src/pages/model/index.tsx +++ b/src/pages/model/index.tsx @@ -5,8 +5,12 @@ import { useRouter } from 'next/router'; import ModelList from './components/ModelList'; import dynamic from 'next/dynamic'; import { useUserStore } from '@/store/user'; +import Loading from '@/components/Loading'; -const ModelDetail = dynamic(() => import('./components/detail/index')); +const ModelDetail = dynamic(() => import('./components/detail/index'), { + loading: () => , + ssr: false +}); const Model = ({ modelId, isPcDevice }: { modelId: string; isPcDevice: boolean }) => { const router = useRouter(); diff --git a/src/pages/number/index.tsx b/src/pages/number/index.tsx index e7399a594..6b5f0888c 100644 --- a/src/pages/number/index.tsx +++ b/src/pages/number/index.tsx @@ -13,10 +13,20 @@ import { useQuery } from '@tanstack/react-query'; import dynamic from 'next/dynamic'; import { useSelectFile } from '@/hooks/useSelectFile'; import { compressImg } from '@/utils/file'; +import Loading from '@/components/Loading'; -const PayRecordTable = dynamic(() => import('./components/PayRecordTable')); -const BilTable = dynamic(() => import('./components/BillTable')); -const PayModal = dynamic(() => import('./components/PayModal')); +const PayRecordTable = dynamic(() => import('./components/PayRecordTable'), { + loading: () => , + ssr: false +}); +const BilTable = dynamic(() => import('./components/BillTable'), { + loading: () => , + ssr: false +}); +const PayModal = dynamic(() => import('./components/PayModal'), { + loading: () => , + ssr: false +}); const NumberSetting = () => { const router = useRouter(); diff --git a/src/styles/reset.scss b/src/styles/reset.scss index c91293b4b..976f74464 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -87,6 +87,13 @@ textarea::placeholder { } } +@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { + body { + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); + } +} + #nprogress .bar { background: '#85b1ff' !important; //自定义颜色 }