4.8.16 test (#3442)

* perf: simple app save

* fix: notify config i18n

* perf: service side props render

* perf: model selector

* update doc

projects/app/src/pages/_app.tsx

@@ -14,6 +14,7 @@ import NextHead from '@/components/common/NextHead';
 import { ReactElement, useEffect } from 'react';
 import { NextPage } from 'next';
 import { getWebReqUrl } from '@fastgpt/web/common/system/utils';
+import SystemStoreContextProvider from '@fastgpt/web/context/useSystem';
 
 type NextPageWithLayout = NextPage & {
   setLayout?: (page: ReactElement) => JSX.Element;
@@ -55,11 +56,13 @@ function App({ Component, pageProps }: AppPropsWithLayout) {
       {scripts?.map((item, i) => <Script key={i} strategy="lazyOnload" {...item}></Script>)}
 
       <QueryClientContext>
-        <I18nContextProvider>
-          <ChakraUIContext>
-            <Layout>{setLayout(<Component {...pageProps} />)}</Layout>
-          </ChakraUIContext>
-        </I18nContextProvider>
+        <SystemStoreContextProvider device={pageProps.deviceSize}>
+          <I18nContextProvider>
+            <ChakraUIContext>
+              <Layout>{setLayout(<Component {...pageProps} />)}</Layout>
+            </ChakraUIContext>
+          </I18nContextProvider>
+        </SystemStoreContextProvider>
       </QueryClientContext>
     </>
   );

projects/app/src/pages/_error.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { Box } from '@chakra-ui/react';
 import { TrackEventName } from '@/web/common/system/constants';

projects/app/src/pages/account/apikey.tsx

@@ -3,7 +3,7 @@ import ApiKeyTable from '@/components/support/apikey/Table';
 import { useTranslation } from 'next-i18next';
 import { Box } from '@chakra-ui/react';
 import AccountContainer, { TabEnum } from './components/AccountContainer';
-import { serviceSideProps } from '../../web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 
 const ApiKey = () => {
   const { t } = useTranslation();

projects/app/src/pages/account/bill/index.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'next-i18next';
 import ApplyInvoiceModal from './components/ApplyInvoiceModal';
 import { useRouter } from 'next/router';
 import AccountContainer, { TabEnum } from '../components/AccountContainer';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 
 export enum InvoiceTabEnum {
   bill = 'bill',

projects/app/src/pages/account/components/AccountContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { Box, Flex, useTheme } from '@chakra-ui/react';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { useRouter } from 'next/router';
@@ -42,7 +42,7 @@ const AccountContainer = ({
     return router.pathname.split('/').pop() as TabEnum;
   }, [router.pathname]);
 
-  const tabList = [
+  const tabList = useRef([
     {
       icon: 'support/user/userLight',
       label: t('account:personal_information'),
@@ -108,7 +108,7 @@ const AccountContainer = ({
       label: t('account:logout'),
       value: TabEnum.loginout
     }
-  ];
+  ]);
 
   const { openConfirm, ConfirmModal } = useConfirm({
     content: t('account:confirm_logout')
@@ -129,57 +129,54 @@ const AccountContainer = ({
   );
 
   return (
-    <>
-      <Script src={getWebReqUrl('/js/qrcode.min.js')} strategy="lazyOnload"></Script>
-      <PageContainer isLoading={isLoading}>
-        <Flex flexDirection={['column', 'row']} h={'100%'} pt={[4, 0]}>
-          {isPc ? (
-            <Flex
-              flexDirection={'column'}
-              p={4}
-              h={'100%'}
-              flex={'0 0 200px'}
-              borderRight={theme.borders.base}
-            >
-              <SideTabs<TabEnum>
-                flex={1}
-                mx={'auto'}
-                mt={2}
-                w={'100%'}
-                list={tabList}
-                value={currentTab}
-                onChange={setCurrentTab}
-              />
-              <Flex alignItems={'center'}>
-                <Box w={'8px'} h={'8px'} borderRadius={'50%'} bg={'#67c13b'} />
-                <Box fontSize={'md'} ml={2}>
-                  V{systemVersion}
-                </Box>
-              </Flex>
+    <PageContainer isLoading={isLoading}>
+      <Flex flexDirection={['column', 'row']} h={'100%'} pt={[4, 0]}>
+        {isPc ? (
+          <Flex
+            flexDirection={'column'}
+            p={4}
+            h={'100%'}
+            flex={'0 0 200px'}
+            borderRight={theme.borders.base}
+          >
+            <SideTabs<TabEnum>
+              flex={1}
+              mx={'auto'}
+              mt={2}
+              w={'100%'}
+              list={tabList.current}
+              value={currentTab}
+              onChange={setCurrentTab}
+            />
+            <Flex alignItems={'center'}>
+              <Box w={'8px'} h={'8px'} borderRadius={'50%'} bg={'#67c13b'} />
+              <Box fontSize={'md'} ml={2}>
+                V{systemVersion}
+              </Box>
             </Flex>
-          ) : (
-            <Box mb={3}>
-              <LightRowTabs<TabEnum>
-                m={'auto'}
-                w={'100%'}
-                size={isPc ? 'md' : 'sm'}
-                list={tabList.map((item) => ({
-                  value: item.value,
-                  label: item.label
-                }))}
-                value={currentTab}
-                onChange={setCurrentTab}
-              />
-            </Box>
-          )}
-
-          <Box flex={'1 0 0'} h={'100%'} pb={[4, 0]} overflow={'auto'}>
-            {children}
+          </Flex>
+        ) : (
+          <Box mb={3}>
+            <LightRowTabs<TabEnum>
+              m={'auto'}
+              w={'100%'}
+              size={isPc ? 'md' : 'sm'}
+              list={tabList.current.map((item) => ({
+                value: item.value,
+                label: item.label
+              }))}
+              value={currentTab}
+              onChange={setCurrentTab}
+            />
           </Box>
-        </Flex>
-        <ConfirmModal />
-      </PageContainer>
-    </>
+        )}
+
+        <Box flex={'1 0 0'} h={'100%'} pb={[4, 0]} overflow={'auto'}>
+          {children}
+        </Box>
+      </Flex>
+      <ConfirmModal />
+    </PageContainer>
   );
 };
 

projects/app/src/pages/account/individuation.tsx

@@ -10,7 +10,7 @@ import { UserUpdateParams } from '@/types/user';
 import TimezoneSelect from '@fastgpt/web/components/common/MySelect/TimezoneSelect';
 import I18nLngSelector from '@/components/Select/I18nLngSelector';
 import AccountContainer from './components/AccountContainer';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 
 const Individuation = () => {
   const { t } = useTranslation();

projects/app/src/pages/account/info/components/UpdateNotificationModal.tsx

@@ -1,14 +1,5 @@
-import React, { useCallback } from 'react';
-import {
-  ModalBody,
-  Box,
-  Flex,
-  Input,
-  ModalFooter,
-  Button,
-  HStack,
-  useDisclosure
-} from '@chakra-ui/react';
+import React from 'react';
+import { ModalBody, Box, Flex, Input, ModalFooter, Button, HStack } from '@chakra-ui/react';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useTranslation } from 'next-i18next';
 import { useForm } from 'react-hook-form';
@@ -89,7 +80,7 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
               ></Input>
             </Flex>
             <Flex mt="6" alignItems="center" position={'relative'}>
-              <Box flex={'0 0 70px'}>{t('account_info:verification_code_required')}</Box>
+              <Box flex={'0 0 70px'}>{t('account_info:verification_code')}</Box>
               <Input
                 flex={1}
                 bg={'myGray.50'}

projects/app/src/pages/account/info/index.tsx

@@ -44,7 +44,7 @@ import { useSystem } from '@fastgpt/web/hooks/useSystem';
 import MyImage from '@fastgpt/web/components/common/Image/MyImage';
 import { getWebReqUrl } from '@fastgpt/web/common/system/utils';
 import AccountContainer from '../components/AccountContainer';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import { useRouter } from 'next/router';
 import TeamSelector from '../components/TeamSelector';
 

projects/app/src/pages/account/inform.tsx

@@ -8,7 +8,7 @@ import { useLoading } from '@fastgpt/web/hooks/useLoading';
 import { useTranslation } from 'next-i18next';
 import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
 import AccountContainer, { TabEnum } from './components/AccountContainer';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 
 const InformTable = () => {
   const { t } = useTranslation();

projects/app/src/pages/account/promotion.tsx

@@ -26,7 +26,7 @@ import { useLoading } from '@fastgpt/web/hooks/useLoading';
 import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
 import AccountContainer, { TabEnum } from './components/AccountContainer';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 
 const Promotion = () => {
   const { t } = useTranslation();

projects/app/src/pages/account/team/index.tsx

@@ -1,4 +1,4 @@
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import AccountContainer from '../components/AccountContainer';
 import { Box, Button, Flex, useDisclosure } from '@chakra-ui/react';
 import Icon from '@fastgpt/web/components/common/Icon';

projects/app/src/pages/account/usage/index.tsx

@@ -31,7 +31,7 @@ import { formatNumber } from '@fastgpt/global/common/math/tools';
 import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
 import AccountContainer, { TabEnum } from '../components/AccountContainer';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 
 const UsageDetail = dynamic(() => import('./UsageDetail'));
 

projects/app/src/pages/app/detail/components/SimpleApp/Header.tsx

@@ -19,7 +19,7 @@ import { formatTime2YMDHMS } from '@fastgpt/global/common/string/time';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { useDatasetStore } from '@/web/core/dataset/store/dataset';
 import SaveButton from '../Workflow/components/SaveButton';
-import { useBoolean, useDebounceEffect } from 'ahooks';
+import { useBoolean, useDebounceEffect, useLockFn } from 'ahooks';
 import { appWorkflow2Form } from '@fastgpt/global/core/app/utils';
 import {
   compareSimpleAppSnapshot,
@@ -29,6 +29,7 @@ import {
 import PublishHistories from '../PublishHistoriesSlider';
 import { AppVersionSchemaType } from '@fastgpt/global/core/app/version';
 import { useBeforeunload } from '@fastgpt/web/hooks/useBeforeunload';
+import { isProduction } from '@fastgpt/global/common/system/constants';
 
 const Header = ({
   forbiddenSaveSnapshot,
@@ -152,15 +153,22 @@ const Header = ({
     { wait: 500 }
   );
 
-  const onLeaveAutoSave = useCallback(() => {
+  const onLeaveAutoSave = useLockFn(async () => {
     if (isSaved) return;
     try {
       console.log('Leave auto save');
-      onClickSave({ isPublish: false, versionName: t('app:auto_save') });
+      return onClickSave({ isPublish: false, versionName: t('app:auto_save') });
     } catch (error) {
       console.error(error);
     }
-  }, [isSaved, onClickSave, t]);
+  });
+  useEffect(() => {
+    return () => {
+      if (isProduction) {
+        onLeaveAutoSave();
+      }
+    };
+  }, []);
   useBeforeunload({
     tip: t('common:core.common.tip.leave page'),
     callback: onLeaveAutoSave

projects/app/src/pages/app/detail/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { Box } from '@chakra-ui/react';
 import dynamic from 'next/dynamic';
 import Loading from '@fastgpt/web/components/common/MyLoading';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import NextHead from '@/components/common/NextHead';
 import { useContextSelector } from 'use-context-selector';
 import AppContextProvider, { AppContext } from './components/context';

projects/app/src/pages/app/list/index.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { Box, Flex, Button, useDisclosure, Input, InputGroup } from '@chakra-ui/react';
 import { AddIcon } from '@chakra-ui/icons';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';

projects/app/src/pages/chat/index.tsx

@@ -15,7 +15,7 @@ import ChatHistorySlider from './components/ChatHistorySlider';
 import SliderApps from './components/SliderApps';
 import ChatHeader from './components/ChatHeader';
 import { useUserStore } from '@/web/support/user/useUserStore';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import { getChatTitleFromChatMessage } from '@fastgpt/global/core/chat/utils';
 import { GPTMessages2Chats } from '@fastgpt/global/core/chat/adapt';
 import { getMyApps } from '@/web/core/app/api';

projects/app/src/pages/chat/share.tsx

@@ -11,7 +11,7 @@ import type { StartChatFnProps } from '@/components/core/chat/ChatContainer/type
 import PageContainer from '@/components/PageContainer';
 import ChatHeader from './components/ChatHeader';
 import ChatHistorySlider from './components/ChatHistorySlider';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import { useTranslation } from 'next-i18next';
 import { getInitOutLinkChatInfo } from '@/web/core/chat/api';
 import { getChatTitleFromChatMessage } from '@fastgpt/global/core/chat/utils';

projects/app/src/pages/chat/team.tsx

@@ -8,7 +8,7 @@ import PageContainer from '@/components/PageContainer';
 import { getMyTokensApps } from '@/web/core/chat/api';
 import ChatHistorySlider from './components/ChatHistorySlider';
 import ChatHeader from './components/ChatHeader';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import { useTranslation } from 'next-i18next';
 import ChatBox from '@/components/core/chat/ChatContainer/ChatBox';
 import type { StartChatFnProps } from '@/components/core/chat/ChatContainer/type';

projects/app/src/pages/dataset/detail/index.tsx

@@ -5,7 +5,7 @@ import { useToast } from '@fastgpt/web/hooks/useToast';
 import { getErrText } from '@fastgpt/global/common/error/utils';
 import dynamic from 'next/dynamic';
 import PageContainer from '@/components/PageContainer';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import { useTranslation } from 'next-i18next';
 import MetaDataCard from './components/MetaDataCard';
 import NavBar from './components/NavBar';

projects/app/src/pages/dataset/list/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { Box, Flex, Button, InputGroup, InputLeftElement, Input } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import ParentPaths from '@/components/common/folder/Path';
 import List from './component/List';
 import { DatasetsContext } from './context';

projects/app/src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import React, { useEffect } from 'react';
 import Loading from '@fastgpt/web/components/common/MyLoading';
 import { useRouter } from 'next/router';

projects/app/src/pages/login/components/LoginForm/WechatForm.tsx

@@ -32,8 +32,10 @@ const WechatForm = ({ setPageType, loginSuccess }: Props) => {
   useQuery(['getWXLoginResult', wechatInfo?.code], () => getWXLoginResult(wechatInfo?.code || ''), {
     refetchInterval: 3 * 1000,
     enabled: !!wechatInfo?.code,
-    onSuccess(data: ResLogin) {
-      loginSuccess(data);
+    onSuccess(data: ResLogin | undefined) {
+      if (data) {
+        loginSuccess(data);
+      }
     }
   });
 

projects/app/src/pages/login/fastlogin.tsx

@@ -6,7 +6,7 @@ import { clearToken, setToken } from '@/web/support/user/auth';
 import { postFastLogin } from '@/web/support/user/api';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import Loading from '@fastgpt/web/components/common/MyLoading';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import { getErrText } from '@fastgpt/global/common/error/utils';
 import { useTranslation } from 'next-i18next';
 const FastLogin = ({

projects/app/src/pages/login/index.tsx

@@ -18,7 +18,7 @@ import { useUserStore } from '@/web/support/user/useUserStore';
 import { useChatStore } from '@/web/core/chat/context/useChatStore';
 import LoginForm from './components/LoginForm/LoginForm';
 import dynamic from 'next/dynamic';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import { clearToken, setToken } from '@/web/support/user/auth';
 import Script from 'next/script';
 import Loading from '@fastgpt/web/components/common/MyLoading';

projects/app/src/pages/login/provider.tsx

@@ -7,7 +7,7 @@ import { clearToken, setToken } from '@/web/support/user/auth';
 import { oauthLogin } from '@/web/support/user/api';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import Loading from '@fastgpt/web/components/common/MyLoading';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import { getErrText } from '@fastgpt/global/common/error/utils';
 import { useTranslation } from 'next-i18next';
 import { OAuthEnum } from '@fastgpt/global/support/user/constant';

projects/app/src/pages/more/index.tsx

@@ -4,7 +4,7 @@ import { ChevronRightIcon } from '@chakra-ui/icons';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useRouter } from 'next/router';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import { useTranslation } from 'next-i18next';
 import { getDocPath } from '@/web/common/system/doc';
 

projects/app/src/pages/price/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import { Box, Flex } from '@chakra-ui/react';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { getTeamPlanStatus } from '@/web/support/user/team/api';

projects/app/src/pages/toolkit/index.tsx

@@ -1,4 +1,4 @@
-import { serviceSideProps } from '@/web/common/utils/i18n';
+import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import { getPluginGroups, getSystemPlugTemplates } from '@/web/core/app/api/plugin';
 import { Box, Flex, Grid, useDisclosure } from '@chakra-ui/react';
 import Avatar from '@fastgpt/web/components/common/Avatar';