Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 451f234f by archer
Options

perf: ssr and iphone daapt

parent 1ab45651
Showing with 68 additions and 34 deletions
src/components/Layout/index.tsx
import React, { useEffect, useMemo } from 'react'; import React, { useEffect, useMemo } from 'react';
import { Box, useColorMode, Flex } from '@chakra-ui/react'; import { Box, useColorMode, Flex } from '@chakra-ui/react';
import Navbar from './navbar';
import NavbarPhone from './navbarPhone';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useScreen } from '@/hooks/useScreen'; import { useScreen } from '@/hooks/useScreen';
import { useLoading } from '@/hooks/useLoading'; import { useLoading } from '@/hooks/useLoading';
import Auth from './auth';
import { useGlobalStore } from '@/store/global'; import { useGlobalStore } from '@/store/global';
import Auth from './auth';
import Navbar from './navbar';
import NavbarPhone from './navbarPhone';
const pcUnShowLayoutRoute: Record<string, boolean> = { const pcUnShowLayoutRoute: Record<string, boolean> = {
'/login': true '/login': true
......
src/components/Loading/index.tsx 0 → 100644
import React from 'react';
import { Spinner, Flex } from '@chakra-ui/react';
const Loading = ({ fixed = true }: { fixed?: boolean }) => {
return (
<Flex
position={fixed ? 'fixed' : 'absolute'}
zIndex={100}
backgroundColor={'rgba(255,255,255,0.5)'}
top={0}
left={0}
right={0}
bottom={0}
alignItems={'center'}
justifyContent={'center'}
>
<Spinner thickness="4px" speed="0.65s" emptyColor="gray.200" color="myBlue.500" size="xl" />
</Flex>
);
};
export default Loading;
src/hooks/useLoading.tsx
import { useState, useCallback } from 'react'; import { useState, useCallback } from 'react';
import { Spinner, Flex } from '@chakra-ui/react'; import LoadingComponent from '@/components/Loading';
export const useLoading = (props?: { defaultLoading: boolean }) => { export const useLoading = (props?: { defaultLoading: boolean }) => {
const [isLoading, setIsLoading] = useState(props?.defaultLoading || false); const [isLoading, setIsLoading] = useState(props?.defaultLoading || false);
const Loading = useCallback( const Loading = useCallback(
({ loading, fixed = true }: { loading?: boolean; fixed?: boolean }): JSX.Element | null => { ({ loading, fixed = true }: { loading?: boolean; fixed?: boolean }): JSX.Element | null => {
return isLoading || loading ? ( return isLoading || loading ? <LoadingComponent fixed={fixed} /> : null;
<Flex
position={fixed ? 'fixed' : 'absolute'}
zIndex={100}
backgroundColor={'rgba(255,255,255,0.5)'}
top={0}
left={0}
right={0}
bottom={0}
alignItems={'center'}
justifyContent={'center'}
>
<Spinner
thickness="4px"
speed="0.65s"
emptyColor="gray.200"
color="myBlue.500"
size="xl"
/>
</Flex>
) : null;
}, },
[isLoading] [isLoading]
); );
......
src/pages/_app.tsx
...@@ -45,9 +45,10 @@ export default function App({ Component, pageProps }: AppProps) { ...@@ -45,9 +45,10 @@ export default function App({ Component, pageProps }: AppProps) {
<Head> <Head>
<title>Fast GPT</title> <title>Fast GPT</title>
<meta name="description" content="Generated by Fast GPT" /> <meta name="description" content="Generated by Fast GPT" />
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover"
/> />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
......
src/pages/chat/index.tsx
...@@ -44,10 +44,20 @@ import { useLoading } from '@/hooks/useLoading'; ...@@ -44,10 +44,20 @@ import { useLoading } from '@/hooks/useLoading';
import { fileDownload } from '@/utils/file'; import { fileDownload } from '@/utils/file';
import { htmlTemplate } from '@/constants/common'; import { htmlTemplate } from '@/constants/common';
import { useUserStore } from '@/store/user'; import { useUserStore } from '@/store/user';
import Loading from '@/components/Loading';
const PhoneSliderBar = dynamic(() => import('./components/PhoneSliderBar'));
const History = dynamic(() => import('./components/History')); const PhoneSliderBar = dynamic(() => import('./components/PhoneSliderBar'), {
const Empty = dynamic(() => import('./components/Empty')); loading: () => <Loading fixed={false} />,
ssr: false
});
const History = dynamic(() => import('./components/History'), {
loading: () => <Loading fixed={false} />,
ssr: false
});
const Empty = dynamic(() => import('./components/Empty'), {
loading: () => <Loading fixed={false} />,
ssr: false
});
import styles from './index.module.scss'; import styles from './index.module.scss';
......
src/pages/model/index.tsx
...@@ -5,8 +5,12 @@ import { useRouter } from 'next/router'; ...@@ -5,8 +5,12 @@ import { useRouter } from 'next/router';
import ModelList from './components/ModelList'; import ModelList from './components/ModelList';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { useUserStore } from '@/store/user'; 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: () => <Loading fixed={false} />,
ssr: false
});
const Model = ({ modelId, isPcDevice }: { modelId: string; isPcDevice: boolean }) => { const Model = ({ modelId, isPcDevice }: { modelId: string; isPcDevice: boolean }) => {
const router = useRouter(); const router = useRouter();
......
src/pages/number/index.tsx
...@@ -13,10 +13,20 @@ import { useQuery } from '@tanstack/react-query'; ...@@ -13,10 +13,20 @@ import { useQuery } from '@tanstack/react-query';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { useSelectFile } from '@/hooks/useSelectFile'; import { useSelectFile } from '@/hooks/useSelectFile';
import { compressImg } from '@/utils/file'; import { compressImg } from '@/utils/file';
import Loading from '@/components/Loading';
const PayRecordTable = dynamic(() => import('./components/PayRecordTable')); const PayRecordTable = dynamic(() => import('./components/PayRecordTable'), {
const BilTable = dynamic(() => import('./components/BillTable')); loading: () => <Loading fixed={false} />,
const PayModal = dynamic(() => import('./components/PayModal')); ssr: false
});
const BilTable = dynamic(() => import('./components/BillTable'), {
loading: () => <Loading fixed={false} />,
ssr: false
});
const PayModal = dynamic(() => import('./components/PayModal'), {
loading: () => <Loading fixed={false} />,
ssr: false
});
const NumberSetting = () => { const NumberSetting = () => {
const router = useRouter(); const router = useRouter();
......
src/styles/reset.scss
...@@ -87,6 +87,13 @@ textarea::placeholder { ...@@ -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 { #nprogress .bar {
background: '#85b1ff' !important; //自定义颜色 background: '#85b1ff' !important; //自定义颜色
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment